/* =========================================================
   Media Farm shared styles
   index.html, wins.html, cul2vate.html
   Tokens, type, and spacing mirror the live mediafarm.agency
   homepage (Syne, cream on deep green, aqua eyebrows; labels are bold uppercase Syne).
   ========================================================= */

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

:root {
  --white: #ffffff;
  --bg: #16200e;
  --green: #16200e;
  --green-deep: #101a04;
  --green-deepest: #0a1200;
  --cream: #eef0e6;
  --cream-70: rgba(238,240,230,0.72);
  --cream-45: rgba(238,240,230,0.45);
  --hair: rgba(238,240,230,0.14);
  --aqua: #a8d8c8;

  --ink: #eef0e6;
  --ink-55: rgba(238,240,230,0.6);
  --ink-35: rgba(238,240,230,0.42);
  --ink-20: rgba(238,240,230,0.22);

  --sans: 'Syne', sans-serif;
  --mono: 'Syne', sans-serif; /* small caps labels: bold uppercase Syne (was Syne Mono) */
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { width: 100%; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--aqua); outline-offset: 3px;
}
[hidden] { display: none !important; }

/* =========================================================
   HOME HERO (index.html)
   ========================================================= */
.hero {
  position: relative;
  min-height: 84vh;
  min-height: 84svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(3rem, 11vh, 7rem);
}
.bg-mesh { position: absolute; inset: 0; z-index: 0; background: var(--green); }
.noise {
  position: absolute; inset: 0; z-index: 2; opacity: 0.03; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1040px;
  margin-left: max(0px, min((100vw - 1040px) / 2, 332px - 6vw));
  margin-right: auto;
  margin-bottom: clamp(5rem, 13vh, 9rem);
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity;
}
.wordmark {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.9s ease 0.4s forwards;
  margin-bottom: clamp(3.5rem, 9vh, 6rem);
}
.wordmark img { height: clamp(40px, 4.8vw, 70px); width: auto; display: block; opacity: 0.92; }

.headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 100%;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}
.headline .line { display: block; white-space: nowrap; }

.divider {
  width: 0;
  height: 1px;
  background: var(--ink-20);
  margin: clamp(3.4rem, 7.5vh, 5.2rem) 0 clamp(1.4rem, 3vh, 2rem);
  animation: expandLine 1s ease 0.95s forwards;
}
@keyframes expandLine {
  from { width: 0; opacity: 0; }
  to   { width: min(210px, 22vw); opacity: 1; }
}

.details { display: flex; flex-direction: column; gap: 0.85rem; opacity: 0; animation: fadeUp 0.9s ease 1.15s forwards; }
.location, .services {
  font-family: var(--mono);
  font-size: clamp(0.76rem, 1.05vw, 0.88rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.services { display: flex; align-items: center; gap: 0.8rem; }
.pipe { color: var(--ink-20); }
.email-line { margin-top: 0.3rem; }
.email-link {
  font-family: var(--mono);
  font-size: clamp(0.76rem, 1.05vw, 0.88rem);
  letter-spacing: 0.12em;
  color: var(--ink-35);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.email-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--ink-55);
  transition: width 0.35s ease;
}
.email-link:hover { color: var(--ink); }
.email-link:hover::after { width: 100%; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   GREEN SECTION (shared page body)
   ========================================================= */
.green { position: relative; margin-top: -1px; background: var(--green); color: var(--cream); z-index: 4; }
.green .noise-soft {
  position: absolute; inset: 0; z-index: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n2)' opacity='1'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.wrap { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 6vw; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aqua);
  display: inline-block;
  margin-bottom: 1.4rem;
}
.mono {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* =========================================================
   CONTACT (index.html)
   ========================================================= */
.contact {
  border-top: 1px solid var(--hair);
  padding-top: clamp(4.5rem, 11vh, 8rem);
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
}
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-intro h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 1.2rem;
}
.contact-intro p { font-size: 1rem; line-height: 1.7; color: var(--cream-70); max-width: 36ch; }

.contact-form { display: flex; flex-direction: column; gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.field input, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(238,240,230,0.18);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(238,240,230,0.3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--aqua);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(168,216,200,0.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.hp { position: absolute; left: -9999px; opacity: 0; }

.send-btn, .btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--green-deepest);
  background: var(--cream);
  border: none;
  border-radius: 10px;
  padding: 0.95rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.25s ease;
}
.send-btn { margin-top: 0.3rem; align-self: flex-start; }
.send-btn:hover, .btn:hover { opacity: 0.9; transform: translateY(-1px); }
.send-btn:active, .btn:active { transform: translateY(0); }
.send-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.form-status { font-family: var(--sans); font-size: 0.95rem; color: var(--cream-70); min-height: 1.2rem; }
.thanks { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.thanks h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}
.thanks p { font-size: 1rem; line-height: 1.6; color: var(--cream-70); }

/* =========================================================
   FOOTER (all pages)
   ========================================================= */
.footer { border-top: 1px solid var(--hair); padding: clamp(2.2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 5vh, 3.5rem); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem; }
.footer img { height: 30px; width: auto; opacity: 0.85; }
.footer .foot-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-45);
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.footer .foot-meta .pipe { color: rgba(238,240,230,0.22); }
.top-link {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-45);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.top-link::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--aqua);
  transition: width 0.35s ease;
}
.top-link:hover { color: var(--cream); }
.top-link:hover::after { width: 100%; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.modules .module.reveal:nth-child(2) { transition-delay: 0.08s; }
.modules .module.reveal:nth-child(3) { transition-delay: 0.16s; }

/* =========================================================
   SUBPAGES (wins.html, cul2vate.html)
   ========================================================= */

/* top bar */
.page-top { position: relative; z-index: 5; padding: clamp(1.6rem, 4vh, 2.4rem) 0; }
.page-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-top .brand img { height: clamp(34px, 3.6vw, 44px); width: auto; opacity: 0.92; }
.page-top nav { display: flex; align-items: center; gap: 1.6rem; }
.page-top nav a { text-decoration: none; }

/* page hero */
.page-hero { padding-top: clamp(2.5rem, 8vh, 5.5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.page-hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
}
.page-hero .lead { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.7; color: var(--cream-70); max-width: 56ch; }
.page-hero .lead strong { color: var(--cream); font-weight: 600; }

/* outline pillboxes / jump links */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-70);
  background: transparent;
  border: 1px solid rgba(238,240,230,0.34);
  border-radius: 999px;
  padding: 0.62rem 1.1rem;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.pill:hover, .pill.is-active { color: var(--cream); border-color: var(--aqua); background: rgba(168,216,200,0.08); }
.pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); margin-right: 0.6rem; vertical-align: 1px; }

/* sticky jump bar (cul2vate.html) */
.jump {
  position: sticky; top: 0; z-index: 6;
  background: rgba(22,32,14,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.jump .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.jump .pills { margin: 0; }
.jump .mono { white-space: nowrap; }
@media (max-width: 600px) { .jump .mono { display: none; } }

/* stats strip */
.stats { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(1.6rem, 4vh, 2.4rem) 1.5rem clamp(1.6rem, 4vh, 2.4rem) 0; border-left: 1px solid var(--hair); padding-left: 1.5rem; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
}
.stat .lbl { display: block; margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.5; color: var(--cream-70); max-width: 24ch; }
.stats-note { padding-top: 0.9rem; }

/* section framing */
.section { padding-top: clamp(3.5rem, 9vh, 7rem); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem;
  border-top: 1px solid var(--hair);
  padding-top: clamp(2rem, 4vh, 3rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.section-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.section-head .count { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--cream-45); }
.section .intro { font-size: 1.02rem; line-height: 1.75; color: var(--cream-70); max-width: 62ch; margin: -0.6rem 0 clamp(1.6rem, 4vh, 2.4rem); }
.section .intro strong { color: var(--cream); font-weight: 600; }

/* band header for the two big sections on cul2vate.html */
.band { padding-top: clamp(3.5rem, 9vh, 7rem); }
.band-head { border-top: 1px solid var(--hair); padding-top: clamp(2rem, 4vh, 3rem); margin-bottom: clamp(1.4rem, 3vh, 2rem); }
.band-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1rem;
}
.band-head p { font-size: 1.02rem; line-height: 1.75; color: var(--cream-70); max-width: 62ch; }

/* win rows */
.win {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.2rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.8rem, 4vh, 2.6rem) 0;
  border-top: 1px solid var(--hair);
}
.win:last-of-type { border-bottom: 1px solid var(--hair); }
.win .result {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 0.6rem;
}
.win .client { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.win .scope { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-45); line-height: 1.7; }
.win .body p { font-size: 1rem; line-height: 1.7; color: var(--cream-70); max-width: 60ch; margin-bottom: 0.9rem; }
.win .body p:last-child { margin-bottom: 0; }
.win .body p strong { color: var(--cream); font-weight: 600; }
.win ul { margin: 0; padding-left: 1.1rem; max-width: 60ch; }
.win li { font-size: 0.98rem; line-height: 1.6; color: var(--cream-70); margin-bottom: 0.45rem; }
.win li::marker { color: var(--aqua); }
.win li:last-child { margin-bottom: 0; }
.win li strong { color: var(--cream); font-weight: 600; }

.note { font-size: 0.92rem; line-height: 1.65; color: var(--cream-45); max-width: 66ch; margin-top: 1.2rem; }
.note strong { color: var(--cream-70); font-weight: 600; }

/* modules (cards) */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
.modules.two { grid-template-columns: repeat(2, 1fr); }
.module {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: rgba(255,255,255,0.035);
}
.module .tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-45);
  margin-bottom: 1.1rem;
}
.module .num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 0.5rem;
}
.module h3 { font-family: var(--sans); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.6rem; }
.module p { font-size: 0.95rem; line-height: 1.65; color: var(--cream-70); }
.module p + p { margin-top: 0.6rem; }
.module p strong { color: var(--cream); font-weight: 600; }
.module ul { margin-top: 0.7rem; padding-left: 1.05rem; }
.module li { font-size: 0.93rem; line-height: 1.6; color: var(--cream-70); margin-bottom: 0.35rem; }
.module li::marker { color: var(--aqua); }
.module li strong { color: var(--cream); font-weight: 600; }
.module .foot { margin-top: auto; padding-top: 1rem; }

/* simple lists (services, press) */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.5rem); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.5rem); }
.item h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.45rem; }
.item p { font-size: 0.95rem; line-height: 1.65; color: var(--cream-70); max-width: 38ch; }
.item p strong { color: var(--cream); font-weight: 600; }

.press { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; }
.press .pipe { color: var(--ink-20); }

/* CTA */
.cta { padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3.5rem, 9vh, 7rem); border-top: 1px solid var(--hair); }
.cta h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 1rem;
  max-width: 20ch;
}
.cta p { font-size: 1rem; line-height: 1.7; color: var(--cream-70); max-width: 52ch; margin-bottom: 1.6rem; }
.cta p strong { color: var(--cream); font-weight: 600; }

/* =========================================================
   Q&A blocks (cul2vate.html)
   ========================================================= */
.q { padding: clamp(2.6rem, 6vh, 4rem) 0 clamp(1.6rem, 4vh, 2.6rem); border-top: 1px solid var(--hair); }
.q .asked { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--aqua); margin-bottom: 1rem; }
.q h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 24ch;
  margin-bottom: 1rem;
}
.q .full { font-size: 0.95rem; line-height: 1.65; color: var(--cream-45); max-width: 70ch; margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.q .blurb {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.8vw, 1.38rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 56ch;
  margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
  padding-left: 1.2rem;
  border-left: 2px solid var(--aqua);
}
.q h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; margin: clamp(1.8rem, 4vh, 2.4rem) 0 0.8rem; }
.q h3:first-of-type { margin-top: 0; }
.q h3 .sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-45); font-weight: 400; margin-left: 0.8rem; }
.q p { font-size: 1rem; line-height: 1.7; color: var(--cream-70); max-width: 66ch; margin-bottom: 0.9rem; }
.q p strong { color: var(--cream); font-weight: 600; }
.q ul { margin: 0 0 0.9rem; padding-left: 1.1rem; max-width: 66ch; }
.q li { font-size: 0.98rem; line-height: 1.65; color: var(--cream-70); margin-bottom: 0.5rem; }
.q li::marker { color: var(--aqua); }
.q li strong { color: var(--cream); font-weight: 600; }
.q .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem clamp(1.5rem, 4vw, 3rem); }
.q .two ul { margin-bottom: 0; }

table.plain { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
table.plain th, table.plain td { text-align: left; vertical-align: top; padding: 0.9rem 1.2rem 0.9rem 0; border-bottom: 1px solid var(--hair); }
table.plain tr:first-child th, table.plain tr:first-child td { border-top: 1px solid var(--hair); }
table.plain th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-45); white-space: nowrap; padding-top: 1.05rem; width: 9.5rem; font-weight: 400; }
table.plain td { font-size: 0.98rem; line-height: 1.65; color: var(--cream-70); }
table.plain td strong { color: var(--cream); font-weight: 600; }

.callout { border: 1px solid rgba(168,216,200,0.35); background: rgba(168,216,200,0.06); border-radius: 12px; padding: 1rem 1.2rem; margin: 0.4rem 0 1.4rem; max-width: 66ch; }
.callout p { margin: 0; color: var(--cream); font-size: 0.98rem; }

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem clamp(1.5rem, 4vw, 3rem); max-width: 72ch; margin-bottom: 0.6rem; }
.kv .k {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.kv p { margin: 0; font-size: 0.95rem; }

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.8rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vh, 2rem) 0;
  border-top: 1px solid var(--hair);
}
.case:last-of-type { border-bottom: 1px solid var(--hair); }
.case .n { font-family: var(--sans); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0.4rem; }
.case .c { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.3rem; }
.case .d { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-45); }
.case dl { margin: 0; }
.case dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua); margin-bottom: 0.25rem; }
.case dd { font-size: 0.98rem; line-height: 1.65; color: var(--cream-70); max-width: 60ch; margin: 0 0 0.9rem; }
.case dd:last-child { margin-bottom: 0; }
.case dd strong { color: var(--cream); font-weight: 600; }

/* =========================================================
   PASSWORD GATE (cul2vate.html)
   ========================================================= */
.gate {
  position: fixed; inset: 0; z-index: 50;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  padding: 6vw;
}
.gate .noise { z-index: 0; }
.gate-card { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.gate-card .brand img { height: 42px; width: auto; opacity: 0.92; margin-bottom: clamp(2rem, 6vh, 3rem); }
.gate-card h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: 0.9rem;
}
.gate-card > p { font-size: 0.98rem; line-height: 1.65; color: var(--cream-70); margin-bottom: 1.8rem; max-width: 36ch; }
.gate-form { display: flex; flex-direction: column; gap: 1rem; }
.gate-form .row { display: flex; gap: 0.6rem; }
.gate-form .row input { flex: 1; }
.gate-form .send-btn { margin-top: 0; white-space: nowrap; }
.gate-form .form-status { min-height: 1.2rem; }
.gate-form .form-status.err { color: #e8b4a8; }
body.locked { overflow: hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero-content { margin-bottom: clamp(2.5rem, 7vh, 5rem); }
}
@media (max-width: 900px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.4rem 1rem 1.4rem 1rem; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 768px) {
  .headline .line { display: inline; white-space: normal; }
  .headline { max-width: 22ch; }
}
@media (max-width: 640px) {
  .win, .case { grid-template-columns: 1fr; }
  .modules, .modules.two, .grid3, .grid2, .kv, .q .two { grid-template-columns: 1fr; }
  table.plain th { width: auto; display: block; border-bottom: 0; padding-bottom: 0.2rem; }
  table.plain td { display: block; padding-top: 0.2rem; }
  table.plain tr:first-child td { border-top: 0; }
  .page-top nav { gap: 1rem; }
  .gate-form .row { flex-direction: column; }
}
@media (max-width: 600px) {
  .hero { padding-top: clamp(2.6rem, 8vh, 4rem); }
  .hero-content { padding: 0 7vw; margin-bottom: clamp(3rem, 8vh, 5rem); }
  .headline { font-size: clamp(2.7rem, 11vw, 4rem); line-height: 1.05; max-width: 100%; }
  .wordmark { margin-bottom: clamp(2.2rem, 5.5vh, 3.2rem); }
  .wordmark img { height: clamp(40px, 11vw, 48px); }
  .divider { margin: clamp(2.4rem, 5.5vh, 3.2rem) 0 clamp(1.6rem, 3.5vh, 2.2rem); }
  .details { gap: 1.15rem; }
  .services { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
  .wrap { padding: 0 7vw; }
}
@media (max-width: 380px) {
  .headline { font-size: clamp(2.6rem, 12vw, 3.4rem); }
}
@media (max-height: 560px) and (min-width: 601px) {
  .hero { justify-content: center; padding-top: 0; }
  .headline { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .divider { margin: 1.4rem 0; }
  .wordmark { margin-bottom: 1.6rem; }
  .hero-content { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content { transform: none !important; opacity: 1 !important; }
  .wordmark, .headline, .divider, .details { animation: none !important; opacity: 1 !important; transform: none !important; }
  .divider { width: min(210px, 22vw); }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
  .gate, .jump, .page-top nav { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #111; }
}

/* =========================================================
   LABEL + BUTTON TYPE
   Every small-caps label, pill, eyebrow, and meta line uses
   bold uppercase Syne. Buttons match.
   ========================================================= */
.location, .services, .email-link, .eyebrow, .mono, .field label, .footer .foot-meta, .top-link,
.pill, .section-head .count, .win .scope, .module .tag, .q .asked, .q h3 .sub, table.plain th,
.case .d, .case dt {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.email-link { letter-spacing: 0.14em; }
.eyebrow, .q .asked { letter-spacing: 0.18em; }
.send-btn, .btn {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 1rem 1.5rem;
}

/* =========================================================
   LAYOUT PASS (cul2vate.html): one larger pill set, airier stats
   ========================================================= */
.jump .wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.jump .pills { gap: 0.8rem; }
.jump .pill { font-size: 0.82rem; padding: 0.9rem 1.6rem; letter-spacing: 0.16em; }
.jump .pill .dot { width: 8px; height: 8px; margin-right: 0.75rem; }
.jump + .stats { border-top: 0; }
.stats.airy .stat { padding-top: clamp(3rem, 7.5vh, 4.5rem); padding-bottom: clamp(3rem, 7.5vh, 4.5rem); padding-right: 1.5rem; }
.stats.airy .stat .num { margin-bottom: 0.2rem; }
.stats.airy .stat .lbl { margin-top: 1rem; font-size: 0.98rem; max-width: 24ch; }
.page-hero + .jump { margin-top: clamp(0.5rem, 2vh, 1.2rem); }
.band { padding-top: clamp(4.5rem, 11vh, 8rem); }
.band-head { margin-bottom: clamp(2rem, 4vh, 2.8rem); }
@media (max-width: 820px) {
  .stats.airy .stat { padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .jump .pill { font-size: 0.74rem; padding: 0.75rem 1.2rem; }
}

/* =========================================================
   STICKY TOP BAR (subpages) + pills inside it (cul2vate)
   ========================================================= */
.page-top.sticky {
  position: sticky; top: 0; z-index: 20;
  background: rgba(22,32,14,0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  padding: 0.9rem 0;
}
.page-top.sticky .brand img { height: clamp(30px, 3vw, 38px); }
.page-top .pills { margin: 0; gap: 0.7rem; }
.page-top .pill { font-size: 0.8rem; padding: 0.8rem 1.4rem; letter-spacing: 0.16em; }
.page-top .pill .dot { width: 8px; height: 8px; margin-right: 0.7rem; }
.page-top + .page-hero { padding-top: clamp(3rem, 9vh, 6rem); }
.page-hero + .stats { border-top: 1px solid var(--hair); }
@media (max-width: 760px) {
  .page-top.sticky .wrap { flex-wrap: wrap; row-gap: 0.7rem; }
  .page-top .pills { order: 3; width: 100%; }
  .page-top .pill { font-size: 0.72rem; padding: 0.7rem 1.1rem; }
}

/* =========================================================
   Q&A SPACING FIX
   Each subheading lives in its own wrapper, so :first-of-type
   zeroed every top margin. Space the wrappers instead.
   ========================================================= */
.q h3, .q h3:first-of-type { margin-top: 0; }
.q .wrap > div.reveal { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
.q .wrap > .blurb + div.reveal { margin-top: 0; }
.q .wrap > .case + div.reveal { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
table.plain { margin-bottom: 0; }
.kv { margin-bottom: 1.2rem; }

/* =========================================================
   READABLE: type hierarchy for the private pages and wins.html
   Question (600, moderate) > featured answer (500) > subhead > body.
   Body copy is cream (white), 1.04rem. Labels stay small caps.
   ========================================================= */
.readable .page-hero .lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--cream); max-width: 52ch; }
.readable .stat .lbl { font-size: 1rem; color: var(--cream); }
.readable .band-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.readable .band-head p { font-size: 1.08rem; color: var(--cream); max-width: 60ch; }

/* question */
.readable .q .asked { font-size: 0.74rem; margin-bottom: 1rem; }
.readable .q h2 {
  font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 62ch;
  margin-bottom: clamp(1.4rem, 3.5vh, 2rem);
}
.readable .q h2 .n { color: var(--aqua); margin-right: 0.35em; }

/* featured answer */
.readable .q .blurb {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--cream);
  max-width: 58ch;
  padding-left: 1.3rem;
  margin-bottom: clamp(2.2rem, 5vh, 3rem);
}

/* subheads and body */
.readable .q h3 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.readable .q h3 .sub { font-size: 0.64rem; }
.readable .q p, .readable .q li, .readable table.plain td, .readable .kv p, .readable .case dd, .readable .callout p,
.readable .item p, .readable .module p, .readable .module li, .readable .win .body p, .readable .win li, .readable .note, .readable .cta p, .readable .section .intro {
  font-size: 1.04rem; line-height: 1.65; color: var(--cream);
}
.readable .q ul, .readable .q p, .readable .case dd, .readable .win .body p, .readable .win ul { max-width: 62ch; }
.readable .q li, .readable .win li { margin-bottom: 0.6rem; }
.readable .note { color: var(--cream-70); }
.readable table.plain th { font-size: 0.7rem; padding-top: 1.1rem; width: 10rem; }
.readable table.plain th, .readable table.plain td { padding-top: 1rem; padding-bottom: 1rem; }
.readable .kv .k { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.readable .kv { max-width: 76ch; gap: 1.6rem clamp(1.5rem, 4vw, 3rem); }
.readable .kv p { font-size: 1rem; }
.readable .item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.readable .item p { font-size: 1.02rem; max-width: 42ch; }
.readable .grid2 { gap: clamp(1.8rem, 4vh, 2.6rem) clamp(2rem, 4vw, 3.5rem); }

/* case studies: keep labels small, titles tight (these are <p> elements) */
.readable .case { padding: clamp(1.6rem, 4vh, 2.4rem) 0; }
.readable .case .n { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; color: var(--cream); margin-bottom: 0.45rem; }
.readable .case .c { font-size: 1.08rem; line-height: 1.3; color: var(--cream); margin-bottom: 0.4rem; }
.readable .case .d { font-size: 0.64rem; line-height: 1.6; color: var(--cream-45); }
.readable .case dt { font-size: 0.66rem; margin-bottom: 0.3rem; }

/* modules and wins rows */
.readable .module h3 { font-size: 1.18rem; }
.readable .module .num { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.readable .module p, .readable .module li { font-size: 1rem; }
.readable .win .client { font-size: 1.12rem; }

/* band heading: no hairline (the stats strip above already draws one) */
.band-head { border-top: 0; padding-top: 0; }
.band { padding-top: clamp(3rem, 8vh, 5.5rem); }
.band-head .eyebrow { margin-bottom: 1.1rem; }
.band-head h2 { margin-bottom: 0.8rem; }

/* module cards: labels stay small, numbers stay tight (they are <p> elements) */
.readable .module .tag { font-size: 0.64rem; line-height: 1.6; color: var(--cream-45); margin-bottom: 1rem; }
.readable .module .num { line-height: 1.05; margin-bottom: 0.5rem; color: var(--cream); }
.readable .module h3 { line-height: 1.25; }
/* press strip needs air before the CTA hairline */
.press { padding-bottom: clamp(3rem, 8vh, 5rem); }

/* cul2vate.html: no intro band, the first question follows the stats strip directly */
.band-questions { padding-top: 0; }
.band-questions .q:first-of-type { border-top: 0; padding-top: clamp(3rem, 8vh, 5.5rem); }

/* =========================================================
   TEXT FACE: Helvetica Neue for all reading text, labels, and
   buttons. Syne stays on display headlines and big numbers.
   ========================================================= */
:root { --text: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body, .field input, .field textarea, .send-btn, .btn, .form-status, .thanks p, .contact-intro p,
.page-hero .lead, .stat .lbl, .band-head p, .section .intro, .win .client, .win .body p, .win li, .note,
.module h3, .module p, .module li, .item h3, .item p, .cta p, .gate-card > p,
.q h2, .q .blurb, .q h3, .q p, .q li, table.plain td, .callout p, .kv p, .case .c, .case dd,
.location, .services, .email-link, .eyebrow, .mono, .field label, .footer .foot-meta, .top-link, .pill,
.section-head .count, .win .scope, .module .tag, .q .asked, .q h3 .sub, table.plain th, .case .d, .case dt {
  font-family: var(--text);
}
/* Helvetica Neue ships in 400 / 500 / 700: map the in-between weights */
.q h2 { font-weight: 500; letter-spacing: -0.01em; }
.q .blurb { font-weight: 500; letter-spacing: 0; }
.q h3, .item h3, .module h3, .win .client, .case .c { font-weight: 700; letter-spacing: 0; }
.q p strong, .q li strong, table.plain td strong, .item p strong, .module p strong, .module li strong,
.win .body p strong, .win li strong, .case dd strong, .cta p strong, .page-hero .lead strong, .section .intro strong, .note strong { font-weight: 700; }
.send-btn, .btn { font-weight: 700; }
.location, .services, .email-link, .eyebrow, .mono, .field label, .footer .foot-meta, .top-link, .pill,
.section-head .count, .win .scope, .module .tag, .q .asked, .q h3 .sub, table.plain th, .case .d, .case dt { letter-spacing: 0.12em; }
.eyebrow, .q .asked { letter-spacing: 0.16em; }

/* timeline: larger month column */
.readable table.plain th { font-size: 0.84rem; width: 12.5rem; padding-top: 1.05rem; letter-spacing: 0.1em; color: var(--cream-70); }
@media (max-width: 640px) { .readable table.plain th { width: auto; } }

/* =========================================================
   TEXT FACE v2: DM Sans for reading text (replaces Helvetica Neue).
   Scale: body up a notch, each heading level clearly above its body.
   ========================================================= */
:root { --text: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { font-family: var(--text); }

/* reading text */
.readable .q p, .readable .q li, .readable table.plain td, .readable .kv p, .readable .case dd, .readable .callout p,
.readable .item p, .readable .module p, .readable .module li, .readable .win .body p, .readable .win li, .readable .note,
.readable .cta p, .readable .section .intro, .readable .band-head p { font-size: 1.12rem; line-height: 1.65; }
.readable .kv p, .readable .module p, .readable .module li, .readable .item p { font-size: 1.06rem; }
.readable .page-hero .lead { font-size: clamp(1.15rem, 1.7vw, 1.32rem); line-height: 1.6; }
.readable .stat .lbl { font-size: 1.06rem; }
.contact-intro p, .thanks p, .field input, .field textarea { font-size: 1.06rem; }

/* headings sit clearly above their body text */
.readable .q h2 { font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.25; letter-spacing: -0.015em; }
.readable .q .blurb { font-weight: 500; font-size: clamp(1.25rem, 1.85vw, 1.55rem); line-height: 1.45; }
.readable .q h3 { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 1rem; }
.readable .item h3 { font-size: 1.35rem; margin-bottom: 0.55rem; }
.readable .module h3 { font-size: 1.32rem; }
.readable .win .client { font-size: 1.25rem; }
.readable .case .c { font-size: 1.2rem; }
.readable .kv .k { font-size: clamp(1.9rem, 2.8vw, 2.4rem); }
.readable .section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.readable .band-head h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.readable .cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* labels, a touch larger */
.location, .services, .email-link, .mono, .field label, .footer .foot-meta, .top-link, .pill,
.section-head .count, .win .scope, .module .tag, .q h3 .sub, .case .d, .case dt { font-size: 0.74rem; letter-spacing: 0.1em; }
.eyebrow, .q .asked { font-size: 0.78rem; letter-spacing: 0.14em; }
.readable table.plain th { font-size: 0.9rem; letter-spacing: 0.08em; }
.send-btn, .btn { font-size: 0.86rem; letter-spacing: 0.1em; }
.page-top .pill { font-size: 0.82rem; }

/* =========================================================
   LIGHT BODY
   Header, hero, and stats stay dark. Everything below, through
   the CTA, sits on light cream with dark green text. The wrapper
   remaps the color tokens so every component adapts.
   ========================================================= */
.light {
  --cream: #16200e;
  --cream-70: rgba(22,32,14,0.80);
  --cream-45: rgba(22,32,14,0.58);
  --hair: rgba(22,32,14,0.14);
  --aqua: #2f6b4f;
  --ink: #16200e;
  --ink-55: rgba(22,32,14,0.6);
  --ink-35: rgba(22,32,14,0.45);
  --ink-20: rgba(22,32,14,0.2);
  --green: #f4f2ea;
  --green-deepest: #f4f2ea;
  position: relative; z-index: 1;
  background: #f4f2ea;
  color: #16200e;
}
.light .module { background: rgba(22,32,14,0.035); border-color: rgba(22,32,14,0.12); }
.light .callout { background: rgba(47,107,79,0.08); border-color: rgba(47,107,79,0.35); }
.light .btn, .light .send-btn { background: #16200e; color: #f4f2ea; }
.light .btn:hover, .light .send-btn:hover { opacity: 0.92; }
.light .q .asked, .light .eyebrow, .light .case dt { color: #2f6b4f; }
.light li::marker { color: #2f6b4f; }
.light .q .blurb { border-left-color: #2f6b4f; }
.light .q, .light .case, .light .win, .light .section-head, .light .cta, .light table.plain th, .light table.plain td { border-color: rgba(22,32,14,0.14); }
.light .press .pipe { color: rgba(22,32,14,0.25); }
.light .band-questions .q:first-of-type, .light .band { padding-top: clamp(3.5rem, 9vh, 6rem); }
.light .cta { padding-bottom: clamp(4rem, 10vh, 7rem); }
.footer { background: var(--green); position: relative; z-index: 1; }
.stats-note { padding-bottom: clamp(1.4rem, 3vh, 2rem); }
.light > .section:first-child .section-head { border-top: 0; padding-top: 0; }
.light > .section:first-child { padding-top: clamp(3.5rem, 9vh, 6rem); }

/* =========================================================
   SPACING PASS: more air everywhere on the report pages
   ========================================================= */
.readable .q { padding-top: clamp(4rem, 10vh, 6.5rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.readable .q .asked { margin-bottom: 1.5rem; }
.readable .q h2 { line-height: 1.32; margin-bottom: clamp(2rem, 5vh, 2.8rem); }
.readable .q .blurb { padding: 0.5rem 0 0.5rem 1.6rem; margin-bottom: clamp(3rem, 7vh, 4.2rem); }
.q .wrap > div.reveal, .q .wrap > .case + div.reveal { margin-top: clamp(3.2rem, 7vh, 4.4rem); }
.readable .q h3 { margin-bottom: 1.3rem; }
.readable .q li, .readable .win li, .readable .module li { margin-bottom: 0.85rem; }
.readable .q ul { padding-left: 1.3rem; }
.readable table.plain th, .readable table.plain td { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.readable table.plain th { padding-top: 1.5rem; }
.readable .callout { padding: 1.3rem 1.5rem; margin: 0.6rem 0 2.2rem; }
.readable .kv { gap: 2.4rem clamp(2rem, 5vw, 4rem); margin-bottom: 1.6rem; }
.readable .kv .k { margin-bottom: 0.7rem; }
.readable .grid2 { gap: clamp(2.6rem, 6vh, 3.6rem) clamp(2.5rem, 5vw, 4.5rem); }
.readable .item h3 { margin-bottom: 0.7rem; }
.readable .case { padding: clamp(2.2rem, 5vh, 3.2rem) 0; gap: 1rem clamp(2rem, 5vw, 4rem); }
.readable .case dd { margin-bottom: 1.2rem; }
.readable .case dt { margin-bottom: 0.45rem; }
.readable .win { padding: clamp(2.4rem, 5.5vh, 3.4rem) 0; gap: 1.4rem clamp(2rem, 5vw, 4rem); }
.readable .win .body p { margin-bottom: 1.2rem; }
.readable .win .client { margin-bottom: 0.6rem; }
.readable .modules { gap: clamp(1.6rem, 3vw, 2.4rem); }
.readable .module { padding: clamp(1.7rem, 2.8vw, 2.3rem); }
.readable .module .tag { margin-bottom: 1.3rem; }
.readable .module .num { margin-bottom: 0.7rem; }
.readable .module h3 { margin-bottom: 0.8rem; }
.readable .module ul { margin-top: 1rem; }
.readable .section { padding-top: clamp(4rem, 10vh, 6.5rem); }
.readable .section-head { padding-top: clamp(2.4rem, 5vh, 3.4rem); margin-bottom: clamp(2.2rem, 5vh, 3.2rem); }
.readable .grid3 { gap: clamp(2.2rem, 5vh, 3rem) clamp(2rem, 4vw, 3rem); }
.readable .cta { padding-top: clamp(4.5rem, 11vh, 7.5rem); }
.readable .cta h2 { margin-bottom: 1.4rem; }
.readable .cta p { margin-bottom: 2.2rem; }
.readable .page-hero { padding-top: clamp(3.5rem, 9vh, 6.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.readable .page-hero h1 { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.readable .stat { padding-top: clamp(3.2rem, 8vh, 5rem); padding-bottom: clamp(3.2rem, 8vh, 5rem); }
.readable .stat .lbl { margin-top: 1.1rem; }

/* first question: a single, lighter top gap (earlier rules had stacked two) */
.light .band-questions { padding-top: 0; }
.light .band-questions .q:first-of-type { padding-top: clamp(2.8rem, 7vh, 4.2rem); }

/* two-column lists (Question 2) and outcome tiles: a touch tighter vertically */
.readable .grid2 { gap: clamp(1.8rem, 4vh, 2.4rem) clamp(2.5rem, 5vw, 4.5rem); }
.readable .item h3 { margin-bottom: 0.5rem; }
.readable .kv { gap: 1.8rem clamp(2rem, 5vw, 4rem); }
.readable .kv .k { margin-bottom: 0.5rem; }
.readable .q .blurb { margin-bottom: clamp(2.4rem, 5.5vh, 3.2rem); }
.readable .grid3 { gap: clamp(1.8rem, 4vh, 2.4rem) clamp(2rem, 4vw, 3rem); }
.readable .item h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 0.6rem; }

/* CTA: equal padding above and below so the block sits vertically centered */
.readable .cta { padding: clamp(5rem, 12vh, 8rem) 0; }
.readable .cta .wrap { display: flex; flex-direction: column; justify-content: center; }
.readable .cta p { margin-bottom: 2rem; }
.readable .cta .wrap { align-items: flex-start; }
.readable .cta p:last-child { margin-bottom: 0; }

/* case study: event bullets, inline link, pulled quote */
.readable .case dd ul { margin: 0.2rem 0 1.2rem; padding-left: 1.2rem; max-width: 62ch; }
.readable .case dd li { font-size: 1.12rem; line-height: 1.65; margin-bottom: 0.85rem; }
.readable .case dd a { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.readable .case dd a:hover { text-decoration-thickness: 2px; }
.case .quote { margin: 0.4rem 0 1.4rem; padding: 0.3rem 0 0.3rem 1.3rem; border-left: 2px solid var(--aqua); max-width: 58ch; }
.case .quote p { font-size: 1.15rem; line-height: 1.55; font-weight: 500; color: var(--cream); margin: 0 0 0.6rem; }
.case .quote cite { display: block; font-style: normal; font-family: var(--text); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-45); }

/* case study header: tag on top, larger number and title, larger body */
.readable .case .d { font-size: 0.8rem; letter-spacing: 0.12em; margin: 0 0 0.9rem; order: -1; }
.readable .case .n { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; margin-bottom: 0.7rem; }
.readable .case .c { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0; }
.readable .case dd, .readable .case dd li { font-size: 1.16rem; line-height: 1.65; }
.readable .case dt { font-size: 0.78rem; }
.case .quote p { font-size: 1.2rem; }
.readable .case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }

/* case headers: consistent hierarchy across the three cards */
.readable .case .d { white-space: nowrap; }
.readable .case .n.long { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 16ch; }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .readable .case .d { white-space: normal; } }
.readable .case .n { font-size: clamp(1.8rem, 2.7vw, 2.3rem); }
.readable .case .n.long { font-size: clamp(1.4rem, 2vw, 1.75rem); max-width: none; }
/* sentence-style case title matches the name line's face (DM Sans bold), just larger */
.readable .case .n.long { font-family: var(--text); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.5rem, 2.1vw, 1.85rem); line-height: 1.22; }
/* Q3 has no featured answer: give the first case room under the question */
#q3 h2 + .case { margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.readable .item h3 { font-size: 1.65rem; line-height: 1.22; margin-bottom: 0.7rem; }

/* "Media Farm Stats:" label integrated at the top of the dark stats strip */
.stats-title { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: clamp(2.2rem, 5.5vh, 3.4rem) 6vw 0; }
.stats-title .eyebrow { margin-bottom: 0; font-size: 0.82rem; }
.stats-title + .wrap .stat { padding-top: clamp(1.6rem, 4vh, 2.4rem); }
@media (max-width: 600px) { .stats-title { padding-left: 7vw; padding-right: 7vw; } }

/* =========================================================
   HEADER RIGHT: confidential pill + account menu (cul2vate.html)
   ========================================================= */
.hdr-right { display: flex; align-items: center; gap: 0.9rem; }
.pill.pill-sm { font-size: 0.66rem; padding: 0.5rem 0.9rem; letter-spacing: 0.14em; cursor: default; color: var(--cream-70); border-color: rgba(238,240,230,0.3); }
.pill.pill-sm:hover { background: transparent; border-color: rgba(238,240,230,0.3); color: var(--cream-70); }
.account { position: relative; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(238,240,230,0.4);
  cursor: pointer; padding: 0; line-height: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.avatar svg { display: block; }
.account:hover .avatar, .account.open .avatar, .avatar:focus-visible { border-color: var(--aqua); background: rgba(168,216,200,0.1); }
.menu { position: absolute; right: 0; top: 100%; padding-top: 0.6rem; display: none; z-index: 30; }
.account:hover .menu, .account.open .menu, .account:focus-within .menu { display: block; }
.menu-inner {
  min-width: 190px;
  background: #1c2912;
  border: 1px solid rgba(238,240,230,0.16);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.menu-inner a, .menu-inner button {
  display: block; width: 100%; text-align: left;
  font-family: var(--text); font-size: 0.98rem; font-weight: 500;
  color: var(--cream); text-decoration: none;
  background: transparent; border: 0; border-radius: 8px;
  padding: 0.7rem 0.9rem; cursor: pointer;
}
.menu-inner a:hover, .menu-inner button:hover, .menu-inner a:focus-visible, .menu-inner button:focus-visible { background: rgba(238,240,230,0.08); outline: none; }
@media (max-width: 480px) { .pill.pill-sm { display: none; } }
.page-top.sticky .brand img { height: clamp(36px, 3.6vw, 46px); }
@media (max-width: 600px) { .page-top.sticky .brand img { height: 34px; } .avatar { width: 36px; height: 36px; } }

/* "Cul2vate x Media Farm" stays on one line: size it to the container */
.gate-card { max-width: 560px; }
.gate-card h1.one-line { font-size: clamp(1.55rem, 5.4vw, 2.5rem); white-space: nowrap; letter-spacing: -0.03em; }
.readable .page-hero h1.one-line { font-size: clamp(2rem, 4.4vw, 4.1rem); white-space: nowrap; max-width: none; }
@media (max-width: 420px) { .readable .page-hero h1.one-line { font-size: clamp(1.7rem, 8.4vw, 2.2rem); } }

/* mobile timeline: keep each month label snug against its text */
@media (max-width: 640px) {
  .readable table.plain th { padding-top: 1.2rem; padding-bottom: 0.3rem; }
  .readable table.plain td { padding-top: 0.25rem; padding-bottom: 1.2rem; }
}
@media (max-width: 640px) { .readable .page-hero h1.one-line { font-size: clamp(1.4rem, 6.3vw, 2.4rem); } }
/* case name line: regular weight under the bold result */
.readable .case .c { font-weight: 400; }
/* question numbers match the question text color */
.readable .q h2 .n, .light .q h2 .n { color: inherit; }

/* Full Strategy Overview link at the top of the answers */
.deck-row { padding-top: clamp(2.8rem, 7vh, 4.2rem); }
.deck-link {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(22,32,14,0.16);
  border-radius: 14px;
  background: rgba(22,32,14,0.035);
  text-decoration: none; color: var(--cream);
  max-width: 62ch;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.deck-link:hover { border-color: var(--aqua); background: rgba(47,107,79,0.08); transform: translateY(-1px); }
.deck-title { font-family: var(--text); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.deck-sub { font-family: var(--text); font-size: 1rem; color: var(--cream-70); }
.deck-row + .q { padding-top: clamp(2.4rem, 6vh, 3.6rem); }

/* =========================================================
   MOBILE QA: everything stacks below 760px, with phone-sized type
   ========================================================= */
@media (max-width: 760px) {
  .readable .case, .readable .win { grid-template-columns: 1fr; gap: 1.2rem; }
  .readable .case > div:first-child { display: flex; flex-direction: column; }
  .readable .case .d { white-space: normal; margin-bottom: 0.6rem; }
  .readable .case .n { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .readable .case .n.long { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .readable .case .c { font-size: 1.15rem; }
  .readable .case dl { margin-top: 0.4rem; }
  .readable .grid2, .readable .grid3, .readable .modules { grid-template-columns: 1fr; }
  .readable .q h2 { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
  .readable .q .blurb { font-size: 1.12rem; padding-left: 1rem; }
  .readable .q h3 { font-size: 1.3rem; }
  .readable .item h3 { font-size: 1.35rem; }
  .readable .q p, .readable .q li, .readable table.plain td, .readable .case dd, .readable .case dd li,
  .readable .item p, .readable .win .body p, .readable .win li, .readable .callout p { font-size: 1.04rem; line-height: 1.6; }
  .readable .stat .num { font-size: clamp(2rem, 9vw, 2.6rem); }
  .readable .stat .lbl { font-size: 0.98rem; }
  .readable .band-head h2, .readable .section-head h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .readable .cta h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .deck-link { padding: 1.1rem 1.2rem; }
  .deck-title { font-size: 1.15rem; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}

/* =========================================================
   HOMEPAGE: about + services section (crawlable summary)
   ========================================================= */
.about { padding-top: clamp(3.5rem, 9vh, 6.5rem); padding-bottom: clamp(3.5rem, 9vh, 6.5rem); }
.intro-lead {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.55rem, 3.4vw, 2.6rem);
  line-height: 1.22; letter-spacing: -0.02em;
  max-width: 24ch; margin-bottom: clamp(2rem, 4vh, 3rem);
}
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.intro-grid p { font-family: var(--text); font-size: 1.06rem; line-height: 1.75; color: var(--cream-70); }
.intro-grid p strong { color: var(--cream); font-weight: 700; }
.services-heading { font-family: var(--sans); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; margin: clamp(2.6rem, 6vh, 4rem) 0 clamp(1.4rem, 3vh, 2rem); padding-top: clamp(2rem, 4vh, 3rem); border-top: 1px solid var(--hair); }
.services-list { list-style: none; padding: 0; margin: 0; }
.services-list .item h4 { font-family: var(--text); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.services-list .item p { font-family: var(--text); font-size: 1rem; line-height: 1.65; color: var(--cream-70); max-width: 38ch; }
@media (max-width: 820px) { .intro-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .services-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-list { grid-template-columns: 1fr; } }

/* =========================================================
   WINS PAGE: clearer section breaks
   ========================================================= */
.readable .win:last-of-type { border-bottom: 0; }            /* no double hairline before the next section head */
.readable .section-head.major { padding-top: clamp(2.6rem, 6vh, 3.8rem); margin-bottom: clamp(2rem, 5vh, 3rem); align-items: end; }
.readable .section-head.major .eyebrow { margin-bottom: 0.9rem; }
.readable .section-head.major h2 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -0.03em; line-height: 1; }
.readable .section-head.major .count { padding-bottom: 0.5rem; }
.readable .section { padding-top: clamp(4.5rem, 11vh, 7.5rem); }
.readable .section .intro { margin: 0 0 clamp(1.6rem, 4vh, 2.4rem); }
@media (max-width: 760px) { .readable .section-head.major h2 { font-size: clamp(2rem, 9vw, 2.8rem); } .readable .section-head.major .count { padding-bottom: 0; } }
/* wins page scope lines: sentence case, regular weight, slightly faded */
.readable .win .scope { font-family: var(--text); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--cream-45); margin-top: 0.2rem; }

/* wins scope lines: body size, same placement under the client name */
.readable .win .scope { font-size: 1.12rem; line-height: 1.55; }
/* Q&A subsection titles (Timeline, Spend, ROI, How we track and report): larger */
.readable .q h3 { font-size: 1.85rem; line-height: 1.2; margin-bottom: 1.2rem; }
@media (max-width: 760px) { .readable .q h3 { font-size: 1.5rem; } }

/* =========================================================
   HOMEPAGE: burger menu, top right of the hero
   ========================================================= */
.site-nav { position: absolute; top: clamp(3rem, 11vh, 7rem); right: 6vw; z-index: 8; }
.site-nav .avatar { width: 44px; height: 44px; }
.site-nav .menu { right: 0; }
@media (max-width: 600px) { .site-nav { top: clamp(2.6rem, 8vh, 4rem); right: 7vw; } .site-nav .avatar { width: 40px; height: 40px; } }
@media (max-height: 560px) and (min-width: 601px) { .site-nav { top: 1.6rem; } }
/* burger aligns with the hero content column and the wordmark's vertical center */
.site-nav {
  right: auto;
  left: max(0px, min((100vw - 1040px) / 2, 332px - 6vw));
  width: min(1040px, 100%);
  padding: 0 6vw;
  display: flex; justify-content: flex-end;
  pointer-events: none;
  margin-top: 0.4rem;
}
.site-nav .account { pointer-events: auto; }
@media (max-width: 600px) { .site-nav { left: 0; width: 100%; padding: 0 7vw; margin-top: 0.1rem; } }

/* =========================================================
   PUBLIC NAV: desktop links + Say Hello outline button;
   burger only on mobile. Used on the homepage hero and page-top.
   ========================================================= */
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links .top-link { font-size: 0.78rem; color: var(--cream-70); }
.nav-links .top-link.is-current { color: var(--cream); }
.nav-links .top-link.is-current::after { width: 100%; }
.pill.pill-cta { color: var(--cream); border-color: rgba(238,240,230,0.55); padding: 0.7rem 1.2rem; font-size: 0.74rem; }
.pill.pill-cta:hover { background: var(--cream); color: var(--green-deepest); border-color: var(--cream); }
.burger-wrap { display: none; }
.page-top.public .site-nav { position: static; width: auto; padding: 0; margin: 0; pointer-events: auto; left: auto; }
.page-top.public .wrap { justify-content: space-between; }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .burger-wrap { display: block; }
}
/* homepage: the hero nav row aligns with the wordmark */
.hero .site-nav .nav-links { gap: 1.6rem; }

/* =========================================================
   NETWORK PAGE: channel list
   ========================================================= */
.channels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.channel { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--hair); }
.ch-platform { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.ch-handle { font-family: var(--text); font-size: 1.12rem; color: var(--cream-70); }
.ch-count { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; text-align: right; white-space: nowrap; }
.ch-count.new { color: var(--aqua); }
@media (max-width: 640px) {
  .channel { grid-template-columns: 1fr auto; gap: 0.15rem 1rem; }
  .ch-handle { grid-column: 1 / -1; order: 3; font-size: 1rem; }
  .ch-platform { font-size: 1.15rem; }
  .ch-count { font-size: 1.05rem; }
}
.readable .section-head.major .count { text-transform: none; letter-spacing: 0.04em; font-size: 0.8rem; }

/* homepage nav row: vertically centered on the wordmark */
.hero .site-nav { margin-top: 1.4rem; }
@media (max-width: 600px) { .hero .site-nav { margin-top: 0.6rem; } }

/* What We Do: one blurb under the lead, larger services section */
.intro-copy p { font-family: var(--text); font-size: 1.22rem; line-height: 1.7; color: var(--cream-70); max-width: 64ch; }
.intro-copy p strong { color: var(--cream); font-weight: 700; }
.readable .intro-lead { font-size: clamp(1.9rem, 3.8vw, 3rem); max-width: 22ch; }
.readable .services-heading { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: clamp(3rem, 7vh, 4.5rem); }
.readable .services-list .item h4 { font-size: 1.55rem; line-height: 1.25; margin-bottom: 0.6rem; }
.readable .services-list .item p { font-size: 1.15rem; line-height: 1.65; max-width: 36ch; }
.readable .services-list { gap: clamp(2.4rem, 5vh, 3.2rem) clamp(2rem, 4vw, 3rem); }
@media (max-width: 760px) {
  .intro-copy p { font-size: 1.1rem; }
  .readable .services-list .item h4 { font-size: 1.35rem; }
  .readable .services-list .item p { font-size: 1.05rem; }
}
/* page hero lead (What We Do, Network, Wins): larger */
.readable .page-hero .lead { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; max-width: 46ch; }
@media (max-width: 760px) { .readable .page-hero .lead { font-size: 1.15rem; } }

/* =========================================================
   NAV v2: Say Hello button + burger on every screen size
   ========================================================= */
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; }
.nav-links { display: flex !important; }
.burger-wrap { display: block !important; }
.site-nav .avatar { width: 44px; height: 44px; }
.pill.pill-cta { font-size: 0.76rem; padding: 0.75rem 1.25rem; }
.page-top.public .site-nav { gap: 0.9rem; }
/* larger logo in the sticky header and the homepage hero */
.page-top.sticky .brand img, .page-top.public .brand img { height: clamp(42px, 4.2vw, 54px); }
.wordmark img { height: clamp(48px, 5.4vw, 78px); }
@media (max-width: 600px) {
  .site-nav .avatar { width: 40px; height: 40px; }
  .pill.pill-cta { font-size: 0.7rem; padding: 0.65rem 1rem; }
  .page-top.sticky .brand img, .page-top.public .brand img { height: 38px; }
  .wordmark img { height: clamp(44px, 12vw, 52px); }
}
@media (max-width: 380px) { .pill.pill-cta { display: none; } }
.wordmark a { display: inline-block; line-height: 0; }
.wordmark a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; border-radius: 4px; }

/* homepage: burger only, pinned to the page's top-right corner */
.hero .site-nav {
  left: auto; right: 6vw; width: auto; padding: 0; margin: 0;
  top: clamp(1.4rem, 3.2vh, 2.2rem);
}
@media (max-width: 600px) { .hero .site-nav { right: 7vw; top: 1.1rem; } }
/* stat tile with words instead of a figure: smaller so it holds its row */
.stat .num.num-text { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; }
@media (max-width: 760px) { .stat .num.num-text { font-size: clamp(1.4rem, 6vw, 1.8rem); } }

/* room between the last section and the CTA hairline (all light-body pages) */
.light .cta { margin-top: clamp(3.5rem, 9vh, 6rem); }
.press { padding-bottom: 0; }
.light .about { padding-bottom: 0; }

/* Network: channel modules (replaces the row table) */
.modules.four { grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; }
.channels .channel { display: flex; flex-direction: column; border-top: 1px solid var(--hair); padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.channels .channel .tag { margin-bottom: 1.4rem; }
.channels .channel .num { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 0.1rem; }
.channels .channel .num.new { color: var(--aqua); }
.channels .channel .ch-unit { font-family: var(--text); font-size: 0.95rem; color: var(--cream-45); margin-bottom: 1rem; }
.channels .channel .ch-handle { font-family: var(--text); font-weight: 700; font-size: 1.05rem; color: var(--cream); margin-top: auto; }
@media (max-width: 1024px) { .modules.four { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .modules.four { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .channels .channel { padding: 1.1rem; } }
@media (max-width: 400px) { .modules.four { grid-template-columns: 1fr; } }
/* channel modules: no leftover table hairlines */
.channels, .channels .channel { border-top: 0; }
.channels .channel { border: 1px solid rgba(22,32,14,0.12); border-bottom-width: 1px; }

/* footer nav links (public pages): crawlable paths to every page */
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.foot-nav a { font-family: var(--text); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-45); text-decoration: none; }
.foot-nav a:hover { color: var(--cream); }
.contact-intro h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 1.2rem; }

/* hero content shares the site column (.wrap): same left edge as every section below */
.hero-content { max-width: 1120px; margin-left: auto; margin-right: auto; padding: 0 6vw; }
.hero .site-nav { left: 0; right: 0; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 6vw; justify-content: flex-end; }
@media (max-width: 600px) { .hero-content, .hero .site-nav { padding: 0 7vw; } }

/* footer layout: logo left, page links center, meta right; stacks on phones */
.footer-row { justify-content: space-between; align-items: center; gap: 1.5rem 2.5rem; }
.footer-row .foot-meta { order: 3; margin-left: auto; }
.footer-row .foot-nav { order: 2; }
.footer-row img { order: 1; }
@media (max-width: 760px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .footer-row .foot-meta { margin-left: 0; }
}
/* case study labels (Strategy, Events, Timeline, Outcome): bold */
.case dt, .readable .case dt { font-weight: 800; letter-spacing: 0.14em; }