:root {
  --red: #C1381C;
  --cream: #F4EBE2;
  --paper: #F7EFE7;
  --ink: #2A1109;
  /* Deep maroon for footer-menu hover. Dark enough to clear 3:1 against --red
     at display sizes, still visibly red rather than black. */
  --maroon: #3A0C05;
  --gutter: clamp(24px, 5vw, 72px);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

/* Rotated cards and the marquees can extend past the viewport on narrow
   screens. Nothing here uses position: sticky, so clipping the axis is safe
   and stops the page sliding sideways on a phone. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  background: var(--red);
  color: var(--paper);
  font-family: "hardcover-vf", Georgia, "Times New Roman", serif;
  font-weight: 300;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: var(--ink); color: var(--cream); }
img { max-width: 100%; display: block; }

/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px var(--gutter);
  transition: color 220ms ease;
}
.nav--dark { color: var(--ink); }
.nav--dark a:hover { color: rgba(42, 17, 9, 0.6); }
.wordmark { font-size: 19px; font-weight: 400; letter-spacing: 0.01em; display: block; }
/* ---- Logo system ----------------------------------------------------------
   Three weights, one rule: use the heaviest thing that still fits.
     logo-display.svg  refined weight   48px and up   hero, covers, print, og
     logo-ui.svg       UI weight        22–48px       nav, footers, avatars   ← in the nav
     logo-mark.svg     ampersand        32px and down favicon, tight screens
   All three are monotone and inherit currentColor, so they flip to ink over
   the cream sections along with the rest of the nav.
--------------------------------------------------------------------------- */
.wordmark-svg,
.wordmark-mark {
  display: block;
  width: auto;
  fill: currentColor;
  overflow: visible;
}
.wordmark-svg { height: clamp(26px, 2.6vw, 38px); }
.wordmark-mark { display: none; height: 30px; }
.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Hero */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--gutter) 48px;
}
.hero-type { display: flex; align-items: center; }
.hero h1 {
  margin: 0;
  max-width: 15em;
  font-weight: 250;
  font-size: clamp(44px, 7.4vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.hero h1 em { font-style: italic; font-weight: 300; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(247, 239, 231, 0.35);
  padding-top: 20px;
}
.hero-meta p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Studio */
.studio {
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.statement {
  margin: 0;
  font-weight: 250;
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.prose {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 36em;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}
.prose p { margin: 0; }

/* What we're into */
.into {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(80px, 12vw, 170px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.into-intro { max-width: 26em; }
.into-intro h2 {
  margin: 0 0 24px;
  font-weight: 250;
  font-size: clamp(38px, 5.2vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.into-intro p { margin: 0; font-size: 16px; line-height: 1.6; opacity: 0.8; }

.accordion { display: flex; flex-direction: column; }
.acc-item { border-top: 1px solid rgba(42, 17, 9, 0.35); }
.acc-rule { border-top: 1px solid rgba(42, 17, 9, 0.35); }
.acc-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  background: none;
  border: 0;
  padding: 26px 0;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: 300;
  letter-spacing: -0.005em;
  transition: opacity 200ms ease;
}
.acc-head:hover { opacity: 0.65; }
.acc-sign { font-size: 22px; font-weight: 250; line-height: 1; opacity: 0.6; }
.acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 340ms ease, opacity 220ms ease;
}
.acc-body.is-open {
  max-height: 640px;
  opacity: 1;
  transition: max-height 440ms ease, opacity 320ms ease;
}
.acc-body-inner {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 34em;
  padding-bottom: 34px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.85;
}
.acc-body-inner p { margin: 0; }
.acc-body-inner em { font-style: italic; }

/* Contact */
.contact {
  padding: clamp(80px, 12vw, 170px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-intro h2 {
  margin: 0 0 24px;
  font-weight: 250;
  font-size: clamp(38px, 5.2vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.contact-intro p { margin: 0; font-size: 17px; line-height: 1.6; opacity: 0.85; }

.form { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.field input,
.field textarea {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(247, 239, 231, 0.5);
  color: var(--paper);
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  padding: 10px 2px;
  outline: none;
  transition: border-color 200ms ease;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--paper); }

.form-actions { display: flex; align-items: center; gap: 20px; }
.form-actions button {
  background: var(--cream);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 15px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
}
.form-actions button:hover { background: #FFFFFF; }
.form-note { font-size: 15px; font-style: italic; opacity: 0.85; }
.hp { position: absolute; left: -9999px; }

/* Footer */
.footer {
  padding: clamp(56px, 9vw, 130px) var(--gutter) 34px;
  border-top: 1px solid rgba(247, 239, 231, 0.3);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;
}

/* Left column — wordmark at the top, RGD pinned to the bottom so it sits
   just above the keyline no matter how tall the menu runs. */
.footer-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.footer-brand { display: block; }
.footer-brand img {
  width: 100%;
  max-width: 560px;
  height: auto;
}
/* Marks and acknowledgement, sitting together on the floor of the column. */
.footer-ground {
  margin-top: auto;
  padding-top: clamp(40px, 6vw, 84px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 46px);
}
.footer-cert {
  /* Both marks and the gap between them live inside 300px: 190 + 20 + 84 = 294. */
  max-width: 300px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-land {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 44em;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;      /* left rag */
  text-wrap: pretty;
  opacity: 0.72;
}
.footer-land a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-land a:hover { color: var(--maroon); opacity: 1; }
/* A circular seal reads optically smaller than a horizontal lockup of the same
   box, so the disc keeps a taller profile inside a narrower width. Both shrink
   together if the column ever gets tighter than 300px. */
.footer-cert img { height: auto; min-width: 0; opacity: 0.9; }
.cert-rgd { width: 190px; }
.cert-cc  { width: 84px; }

/* Right — the menu, at display scale */
.footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.04em;
}
.footer-menu a {
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 250;
  line-height: 1.04;
  letter-spacing: -0.015em;
  transition: color 180ms ease;
}
.footer-menu a:hover,
.footer-menu a:focus-visible { color: var(--maroon); }
.footer-menu .footer-menu-minor {
  margin-top: 1.1em;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  opacity: 0.75;
}
.footer-menu .footer-menu-minor:hover { opacity: 1; color: var(--maroon); }

/* Bottom rule */
.footer-base {
  /* 10px is the gap the RGD mark sits above this keyline. */
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 239, 231, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  justify-content: space-between;
  align-items: baseline;
}
.footer-copy,
.footer-mail {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: clamp(34px, 7vw, 56px);
  }
  .footer-menu { align-items: flex-start; text-align: left; }
  .footer-brand img { max-width: 420px; }
  /* Stacked, so the marks follow the wordmark instead of being pushed down. */
  .footer-ground { margin-top: 0; padding-top: clamp(28px, 6vw, 44px); }
  .footer-base { margin-top: clamp(34px, 7vw, 56px); }
}

/* Long-form pages: privacy, terms, anything text-only */
.prose-page {
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(60px, 9vw, 120px);
  max-width: 46em;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}
.prose-page h2 {
  margin: 2.2em 0 0.5em;
  font-weight: 300;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.prose-page p { margin: 0 0 1.1em; }
.prose-page a { text-decoration: underline; text-underline-offset: 3px; }
.prose-meta { margin-top: 2.4em; font-size: 14px; opacity: 0.65; }

/* ---------- Shared page furniture ---------- */

.eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.eyebrow--ink { opacity: 0.6; }
.nav-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.page-head {
  padding: clamp(140px, 20vh, 260px) var(--gutter) clamp(56px, 9vw, 120px);
  border-bottom: 1px solid rgba(247, 239, 231, 0.3);
}
.page-head h1 {
  margin: 28px 0 0;
  max-width: 22em;
  font-weight: 250;
  font-size: clamp(36px, 5.6vw, 92px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.split {
  padding: clamp(64px, 10vw, 150px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.prose--sm { font-size: 17px; }
.prose-link { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }

.cta {
  padding: clamp(64px, 9vw, 130px) var(--gutter);
  border-top: 1px solid rgba(247, 239, 231, 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  justify-content: space-between;
  align-items: baseline;
}
.cta p {
  margin: 0;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 250;
  letter-spacing: -0.01em;
}
.cta a {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(247, 239, 231, 0.5);
  padding-bottom: 4px;
}
.cta a:hover { border-bottom-color: #FFFFFF; }

/* Image placeholders */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(247,239,231,0.10) 0 6px, rgba(247,239,231,0) 6px 12px);
  border: 1px solid rgba(247, 239, 231, 0.3);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
}
.ph span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 8px 12px;
  text-align: center;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--hero { aspect-ratio: 16 / 9; }
.ph--card { aspect-ratio: 4 / 3; }
.ph--tall { aspect-ratio: 4 / 5; }
[data-light] .ph,
.into .ph {
  background: repeating-linear-gradient(135deg, rgba(42,17,9,0.10) 0 6px, rgba(42,17,9,0) 6px 12px);
  border-color: rgba(42, 17, 9, 0.3);
}

/* ---------- Studio (about) ---------- */

.facts {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(56px, 8vw, 110px) var(--gutter);
}
.facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px;
}
.facts dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 10px;
}
.facts dd {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 250;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ---------- Client strip ---------- */

.clients {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(52px, 7vw, 96px) 0;
  overflow: hidden;
}
.clients-head {
  padding: 0 var(--gutter);
  margin-bottom: clamp(30px, 4vw, 54px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.clients-head p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.clients-viewport {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.clients-viewport + .clients-viewport { margin-top: clamp(18px, 2.4vw, 34px); }
.clients-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(38px, 5vw, 76px);
  padding-right: clamp(38px, 5vw, 76px);
  animation: clients-scroll 78s linear infinite;
  animation-play-state: paused;
}
.clients-track--rev { animation-name: clients-scroll-rev; animation-duration: 92s; }
/* Held still until the strip scrolls into view, so the row always starts from the top. */
.clients.is-running .clients-track { animation-play-state: running; }
.clients-track img {
  height: clamp(38px, 3.6vw, 52px);
  width: auto;
  flex: none;
  filter: brightness(0);
  opacity: 0.55;
  transition: opacity 260ms ease;
}
.clients-track img.is-feature {
  height: clamp(52px, 5vw, 74px);
  opacity: 1;
}
.clients-viewport:hover .clients-track { animation-play-state: paused; }
.clients-track img:hover { opacity: 1; }

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes clients-scroll-rev {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ---------- Pricing ---------- */

.price {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(64px, 10vw, 150px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.price-figure {
  margin: 22px 0 18px;
  font-size: clamp(76px, 13vw, 190px);
  font-weight: 250;
  line-height: 0.86;
  letter-spacing: -0.03em;
}
.price-terms {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-style: italic;
  opacity: 0.8;
}
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(42, 17, 9, 0.3);
}
.price-list li {
  border-bottom: 1px solid rgba(42, 17, 9, 0.3);
  padding: 17px 0;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 300;
}

/* ---------- Case studies ---------- */

.case {
  padding: clamp(56px, 9vw, 130px) var(--gutter);
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}
.case-body { display: flex; flex-direction: column; gap: 28px; max-width: 68ch; }
.case h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -0.015em;
}
.case-claim {
  margin: 0;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 250;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.9;
}
.case-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(247, 239, 231, 0.3);
  border-bottom: 1px solid rgba(247, 239, 231, 0.3);
  padding: 22px 0;
}
.case-meta dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
}
.case-meta dd { margin: 0; font-size: 17px; font-weight: 300; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* ---------- Notes ---------- */

.notes-grid {
  padding: clamp(56px, 9vw, 130px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.note-card { display: block; }
.note-card:hover { color: inherit; }
.note-card:hover .ph { border-color: rgba(247, 239, 231, 0.7); }
.note-kicker {
  margin: 22px 0 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.note-card h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 250;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.note-claim {
  margin: 0;
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.8;
}

.note-head {
  padding: clamp(140px, 20vh, 250px) var(--gutter) clamp(40px, 6vw, 80px);
}
.note-head h1 {
  margin: 14px 0 22px;
  max-width: 14em;
  font-size: clamp(38px, 5.6vw, 92px);
  font-weight: 250;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.note-head .note-kicker { margin-top: 0; }
.note-lede {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 250;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.9;
}
.note-hero { padding: 0 var(--gutter); }
.note-body {
  padding: clamp(48px, 7vw, 100px) var(--gutter);
  max-width: calc(65ch + 2 * var(--gutter));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
}
.note-body p { margin: 0; }
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 1em calc(-1 * clamp(0px, 6vw, 140px));
}
.compare-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pull {
  margin: 1em 0;
  border-top: 1px solid rgba(247, 239, 231, 0.35);
  border-bottom: 1px solid rgba(247, 239, 231, 0.35);
  padding: 34px 0;
}
.pull p {
  margin: 0;
  font-size: clamp(23px, 2.6vw, 38px);
  font-weight: 250;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.note-next {
  padding: clamp(48px, 7vw, 100px) var(--gutter) clamp(64px, 9vw, 120px);
}
.note-card--next { max-width: 46ch; }


/* ---------- Animated icons ---------- */

@keyframes travel { 0%,12% { transform:translateX(0) } 44%,56% { transform:translateX(26px) } 88%,100% { transform:translateX(52px) } }
@keyframes spin { 0% { transform:rotate(0deg) } 100% { transform:rotate(90deg) } }
@keyframes counter { 0% { transform:rotate(0deg) } 100% { transform:rotate(-90deg) } }
@keyframes foldL { 0%,20% { transform:perspective(120px) rotateY(0deg) } 55%,100% { transform:perspective(120px) rotateY(72deg) } }
@keyframes foldR { 0%,20% { transform:perspective(120px) rotateY(0deg) } 55%,100% { transform:perspective(120px) rotateY(-72deg) } }
@keyframes rise { 0%,100% { transform:scaleY(0.28) } 50% { transform:scaleY(1) } }
@keyframes ring { 0% { transform:scale(0.35); opacity:0 } 25% { opacity:0.9 } 100% { transform:scale(1.5); opacity:0 } }
@keyframes sweep { 0%,100% { transform:translate(0,0) } 50% { transform:translate(30px,18px) } }
@keyframes meetL { 0%,100% { transform:translateX(-13px) } 50% { transform:translateX(4px) } }
@keyframes meetR { 0%,100% { transform:translateX(13px) } 50% { transform:translateX(-4px) } }
@keyframes tick { 0%,100% { transform:scaleX(0.2) } 50% { transform:scaleX(1) } }

.ic {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  transform: scale(var(--s, 1));
  transform-origin: top left;
  /* reserve the overhang the scale creates, so scaled icons don't overflow */
  margin-right: calc(64px * (var(--s, 1) - 1));
  margin-bottom: calc(64px * (var(--s, 1) - 1));
}
.ic > * { position: absolute; }

.ic-strategy .rule { top: 31px; left: 0; right: 6px; height: 1px; background: currentColor; opacity: 0.45; }
.ic-strategy .dot { top: 26px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: currentColor; animation: travel 2.6s cubic-bezier(.65,0,.35,1) infinite; }

.ic-product .outer { top: 6px; left: 6px; width: 52px; height: 52px; border: 1px solid currentColor; opacity: 0.6; animation: spin 3.2s cubic-bezier(.7,0,.3,1) infinite; }
.ic-product .inner { top: 20px; left: 20px; width: 24px; height: 24px; background: currentColor; animation: counter 3.2s cubic-bezier(.7,0,.3,1) infinite; }

.ic-brand .f { top: 10px; width: 20px; height: 44px; background: currentColor; }
.ic-brand .f1 { left: 0; opacity: 0.35; transform-origin: right center; animation: foldL 2.8s ease-in-out infinite alternate; }
.ic-brand .f2 { left: 22px; }
.ic-brand .f3 { left: 44px; opacity: 0.35; transform-origin: left center; animation: foldR 2.8s ease-in-out infinite alternate; }

.ic-pitch .b { bottom: 8px; width: 12px; height: 48px; background: currentColor; transform-origin: bottom; animation: rise 2.2s ease-in-out infinite; }
.ic-pitch .b1 { left: 8px; }
.ic-pitch .b2 { left: 27px; animation-delay: -0.55s; }
.ic-pitch .b3 { left: 46px; animation-delay: -1.1s; }

.ic-fund .r { top: 6px; left: 6px; width: 52px; height: 52px; border: 1px solid currentColor; border-radius: 50%; animation: ring 2.6s ease-out infinite; }
.ic-fund .r2 { animation-delay: -1.3s; }
.ic-fund .c { top: 25px; left: 25px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }

.ic-research .dots {
  position: absolute;
  inset: 16px 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: space-between;
}
.ic-research .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.ic-research .lens { top: 8px; left: 2px; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; animation: sweep 3.4s ease-in-out infinite; }

.ic-collab .o { top: 15px; left: 15px; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; }
.ic-collab .o1 { animation: meetL 3s ease-in-out infinite; }
.ic-collab .o2 { animation: meetR 3s ease-in-out infinite; }

.ic-craft .t { left: 8px; right: 8px; height: 1px; background: currentColor; transform-origin: left; animation: tick 2.4s ease-in-out infinite; }
.ic-craft .t1 { top: 20px; }
.ic-craft .t2 { top: 30px; animation-delay: -0.3s; }
.ic-craft .t3 { top: 40px; animation-delay: -0.6s; }
.ic-craft .t4 { top: 50px; animation-delay: -0.9s; }

/* ---------- Services ---------- */

.svc-head {
  padding: clamp(140px, 20vh, 250px) var(--gutter) clamp(40px, 6vw, 90px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 24px;
}
.svc-head h1 {
  grid-column: 1 / 10;
  margin: 22px 0 0;
  font-weight: 250;
  font-size: clamp(40px, 7.6vw, 124px);
  line-height: 0.93;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.svc-head .eyebrow { grid-column: 1 / 10; }
.svc-head .ic { grid-column: 11 / 13; justify-self: end; --s: 1.4; }

.svc {
  padding: 0 var(--gutter) clamp(60px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 40px);
}
.svc-item { display: flex; flex-direction: column; gap: 22px; }
.svc-item .ic { --s: 1.55; margin-bottom: 18px; }
.svc-item h2 {
  margin: 0;
  font-weight: 250;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.svc-num {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
.svc-item p { margin: 0; }
.svc-claim { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 34ch; opacity: 0.9; }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; opacity: 0.85; }
.svc-list li { border-bottom: 1px solid currentColor; padding: 12px 0; font-size: 15px; }

.svc-p1 { grid-column: 1 / 6; }
.svc-p2 { grid-column: 7 / 12; margin-top: clamp(0px, 9vw, 130px); }
.svc-p3 { grid-column: 2 / 7; margin-top: clamp(-140px, -6vw, 0px); }
.svc-p4 { grid-column: 8 / 13; }

.svc-item--cream {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(28px, 3vw, 44px);
  align-self: start;
}
.svc-item--cream .svc-num { opacity: 0.5; }

.svc-rule {
  grid-column: 1 / 13;
  height: 1px;
  background: rgba(247, 239, 231, 0.3);
}
.svc-aside {
  grid-column: 1 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(40px, 7vw, 110px);
  align-items: flex-start;
}
.svc-aside p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 250;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.svc-aside .ic-row { display: flex; gap: clamp(28px, 4vw, 60px); align-items: flex-start; height: 100px; }
.svc-aside .ic-row .ic:nth-child(1) { --s: 1.1; }
.svc-aside .ic-row .ic:nth-child(2) { --s: 0.8; margin-top: 30px; }
.svc-aside .ic-row .ic:nth-child(3) { --s: 1.3; margin-top: -10px; }

@media (max-width: 820px) {
  .svc-head h1, .svc-head .eyebrow { grid-column: 1 / 13; }
  .svc-head .ic { grid-column: 1 / 13; justify-self: start; margin-top: 30px; }
  .svc-p1, .svc-p2, .svc-p3, .svc-p4 { grid-column: 1 / 13; margin-top: 0; }
}

@media (max-width: 640px) {
  .nav { padding: 16px var(--gutter); align-items: center; }
  .nav-links { font-size: 12px; gap: 14px; }
  .wordmark-svg { height: 22px; }
}

/* Below this the wordmark crowds the four nav links, so the mark takes over.
   Same rule as print: when the lockup won't hold, show the ampersand. */
@media (max-width: 460px) {
  .wordmark-svg { display: none; }
  .wordmark-mark { display: block; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .acc-body, .acc-body.is-open { transition: none; }
  .clients-track { animation: none; }
  .clients-viewport {
    width: 100%;
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .clients-viewport > .clients-track[aria-hidden="true"] { display: none; }
}

/* ---------- Case study (.ds-*) ----------------------------------------
   Shared by every page under /case-studies/. Lives here rather than
   page-scoped so one change updates every case study at once.
--------------------------------------------------------------------- */

/* Template B — Dossier, with a standing meta column */
  .ds-head {
    padding: clamp(140px, 20vh, 230px) var(--gutter) clamp(32px, 4vw, 56px);
    border-bottom: 1px solid rgba(247, 239, 231, 0.3);
    display: flex;
    flex-wrap: wrap;
    gap: 20px 48px;
    align-items: baseline;
    justify-content: space-between;
  }
  .ds-head h1 {
    margin: 0;
    font-weight: 250;
    font-size: clamp(44px, 8vw, 132px);
    line-height: 0.88;
    letter-spacing: -0.03em;
  }
  .ds-head .eyebrow { text-align: right; }

  .ds-shell {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(0, 2.6fr);
    gap: clamp(32px, 5vw, 80px);
    padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 110px);
    align-items: start;
  }

  .ds-meta {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
  }
  .ds-meta > div {
    border-top: 1px solid rgba(247, 239, 231, 0.3);
    padding: 15px 0;
  }
  .ds-meta > div:last-child { border-bottom: 1px solid rgba(247, 239, 231, 0.3); }
  .ds-meta dt {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 7px;
  }
  .ds-meta dd { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.4; }
  .ds-meta dd ul { list-style: none; margin: 0; padding: 0; }

  .ds-main { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
  .ds-claim {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(24px, 3.4vw, 52px);
    font-weight: 250;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: pretty;
  }
  .ds-claim em { font-style: italic; }

  .ds-block { display: grid; gap: 16px; }
  .ds-block h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .ds-block .ds-text {
    display: flex;
    flex-direction: column;
    gap: 1.3em;
    max-width: 62ch;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.6;
  }
  .ds-block .ds-text p { margin: 0; }

  .ds-plates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  /* Cycles every four, so 4, 8 or 12 plates all lay out on the same rhythm. */
  .ds-plates > *:nth-child(4n+1) { grid-column: span 4; }
  .ds-plates > *:nth-child(4n+2) { grid-column: span 2; }
  .ds-plates > *:nth-child(4n+3) { grid-column: span 2; }
  .ds-plates > *:nth-child(4n+4) { grid-column: span 4; }
  .ds-plates .ph { aspect-ratio: auto; height: 100%; min-height: 190px; }
  /* Three plates instead of four: the last one takes the full second row
     rather than leaving a hole where the fourth would have gone. */
  .ds-plates--three > *:nth-child(3) { grid-column: span 6; }

  /* A small piece of evidence set into the prose — a previous mark, a
     spread, a screen. Sits on a light field so client artwork reads
     correctly rather than fighting the red. */
  .ds-figure { margin: 1.6em 0 0; max-width: 340px; }
  .ds-figure img {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    padding: 18px;
    border: 1px solid rgba(247, 239, 231, 0.25);
  }
  .ds-figure figcaption {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  /* A photograph rather than artwork — no white field, and room to breathe. */
  .ds-figure--photo { max-width: none; }

/* Inline motion on a case study. Same frame as .ds-figure--photo, but the
   video is decorative: muted, looping, no controls, and it never blocks. */
/* Uncropped image run. Unlike .ds-plates, nothing is cover-cropped: each image
   keeps its own aspect ratio and simply fills the column width. Use when the
   artwork's proportions are part of the work. */
.ds-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 26px);
  margin: clamp(26px, 3.4vw, 44px) 0;
}
.ds-stack img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(247, 239, 231, 0.25);
}

.ds-video { margin: clamp(22px, 3vw, 38px) 0 0; padding: 0; }
.ds-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid rgba(247, 239, 231, 0.25);
}
.ds-video figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .ds-video video { content: ""; }
}
  .ds-figure--photo img { background: none; padding: 0; }
  /* Real photographs fill their cell the way the placeholders did. */
  .ds-plates img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    border: 1px solid rgba(247, 239, 231, 0.25);
  }

  .ds-numbers {
    background: var(--cream);
    color: var(--ink);
    padding: clamp(44px, 6vw, 90px) var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(30px, 4vw, 60px);
  }
  .ds-numbers div { border-top: 1px solid rgba(42, 17, 9, 0.35); padding-top: 18px; }
  .ds-numbers b {
    display: block;
    font-size: clamp(46px, 6.4vw, 104px);
    font-weight: 250;
    line-height: 0.86;
    letter-spacing: -0.035em;
  }
  .ds-numbers span {
    display: block;
    margin-top: 14px;
    max-width: 24ch;
    font-size: 15px;
    line-height: 1.45;
    opacity: 0.7;
  }

  .ds-quote {
    padding: clamp(56px, 8vw, 120px) var(--gutter);
    max-width: 1000px;
  }
  .ds-quote blockquote { margin: 0; }
  .ds-quote p {
    margin: 0;
    font-size: clamp(23px, 3vw, 46px);
    font-weight: 250;
    font-style: italic;
    line-height: 1.16;
    letter-spacing: -0.018em;
  }
  .ds-quote cite {
    display: block;
    margin-top: 22px;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  @media (max-width: 820px) {
    .ds-shell { grid-template-columns: minmax(0, 1fr); }
    .ds-meta { position: static; }
    .ds-plates { grid-template-columns: repeat(2, 1fr); }
    .ds-plates > * { grid-column: span 2 !important; }
  }

/* ---------- Case study cards (/work) ---------------------------------------
   Same language as the services cards — outline, ghost numeral, pill meta,
   a tilt that straightens on hover — arranged as a grid rather than a
   cascade, because six of them need to be scannable.
--------------------------------------------------------------------------- */
.cs-grid {
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(60px, 9vw, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(26px, 3vw, 44px);
  align-items: stretch;
}
.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 2.6vw, 40px);
  border: 1px solid currentColor;
  background: var(--red);
  color: var(--paper);
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
  transition: transform 320ms cubic-bezier(.34,1.4,.5,1);
}
.cs-card:nth-child(8n+1) { --r: -1.2deg; }
.cs-card:nth-child(8n+2) { --r:  1.4deg; }
.cs-card:nth-child(8n+3) { --r: -0.8deg; }
.cs-card:nth-child(8n+4) { --r:  1.1deg; }
.cs-card:nth-child(8n+5) { --r: -1.5deg; }
.cs-card:nth-child(8n+6) { --r:  0.9deg; }
.cs-card:nth-child(8n+7) { --r: -1.0deg; }
.cs-card:nth-child(8n+8) { --r:  1.3deg; }
.cs-card:hover { transform: rotate(0deg) translateY(-6px); z-index: 4; }
.cs-card:hover { color: var(--paper); }
.cs-card--cream { background: var(--cream); color: var(--ink); }

/* The deck wall card: deliberately not a case study. Spans the row, no tilt,
   no ghost numeral, sits last so it reads as a different kind of thing. */
.cs-card--wide { grid-column: 1 / -1; --r: 0deg; }
.cs-card--wide:hover { transform: translateY(-6px); }
.cs-card--wide h2 { font-size: clamp(32px, 4.4vw, 62px); }
.cs-card--wide .claim { max-width: 34em; }
.cs-card--wide .ghost { display: none; }

/* /decks */
.deck-sets {
  padding: 0 var(--gutter) clamp(60px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 110px);
}
.deck-set-head { max-width: 40em; margin-bottom: 22px; }
.deck-set-head .kicker {
  margin: 0 0 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.deck-set-head h2 {
  margin: 0 0 10px;
  font-weight: 250;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.deck-purpose { margin: 0; font-size: 17px; line-height: 1.5; opacity: 0.8; }
.deck-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.deck-shots img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(247, 239, 231, 0.25);
}
.cs-card--cream:hover { color: var(--ink); }

.cs-card .ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.34em;
  margin: 0;
  font-size: clamp(120px, 13vw, 190px);
  font-weight: 300;
  line-height: 0.7;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--paper);
  text-stroke: 1px var(--paper);
  opacity: 0.3;
  pointer-events: none;
}
.cs-card--cream .ghost { -webkit-text-stroke: 1px var(--ink); text-stroke: 1px var(--ink); }
@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)) {
  .cs-card .ghost { color: var(--paper); opacity: 0.14; }
  .cs-card--cream .ghost { color: var(--ink); opacity: 0.14; }
}

.cs-card .kicker {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.cs-card h2 {
  margin: 0;
  font-weight: 250;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.cs-card .claim {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  max-width: 32ch;
  opacity: 0.9;
}
.cs-card ul {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.cs-card li {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  opacity: 0.85;
}

@media (max-width: 860px) {
  .cs-card { --r: 0deg !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card { transition: none; }
}