/* ---------- base ---------- */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #6e6e6e;
  --hairline: rgba(0, 0, 0, 0.12);
  --accent: #00ff66;
  --footer-bg: #2949FF;
  /* Sized so the wordmark fits at slight horizontal overflow without cropping
     the top. 5648×987 px → aspect ~5.72 → 100% width needs ~17.5vw; we use
     a bit more headroom for the overflow factor below. */
  --footer-h: clamp(140px, 19vw, 420px);
  --card: #f4f4f4;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-h: 76px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  /* Default tight tracking for all Helvetica Neue usage */
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }

.section { width: 100%; }

/* ---------- page loader ----------
   Full-screen white overlay shown until the carousel images are ready.
   Hides the chaotic image-streaming pop-in. */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.55s ease;
  pointer-events: auto;
}
#page-loader img,
#page-loader .loader-logo {
  width: clamp(220px, 36vw, 420px);
  height: auto;
}

/* Two SVGs stacked: the stroke layer (always visible after draw) sits over
   the fill layer (gets clipped from the top, releases bottom-up = ink pour). */
.loader-logo {
  position: relative;
  display: block;
  width: clamp(220px, 36vw, 420px);
  aspect-ratio: 2043 / 354; /* match the source SVG viewBox so stacked svgs align */
}
.loader-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.loader-logo .fill-layer {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.55s cubic-bezier(.4, 0, .2, 1);
}
.loader-logo.is-poured .fill-layer {
  clip-path: inset(0 0 0 0);
}

/* Fallback pulse used only until the SVG draw kicks in */
#page-loader img {
  opacity: 0.4;
  animation: loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}

body.is-booting { overflow: hidden; }
body:not(.is-booting) #page-loader {
  opacity: 0;
  pointer-events: none;
}

/* ---------- scroll-reveal fade ----------
   Elements tagged via JS start at opacity:0 + slight Y offset; once they
   enter the viewport they ease into place. Stagger via nth-child. */
.fade-in {
  opacity: 0;
  /* Use the standalone `translate` property so it doesn't clash with
     transform-based hovers (e.g. .cta scaling) on the same element. */
  translate: 0 18px;
  transition: opacity 1.4s cubic-bezier(.2,.8,.3,1),
              translate 1.4s cubic-bezier(.2,.8,.3,1);
}
.fade-in.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* light stagger across the 6 case-study tiles */
.cs-tile.fade-in:nth-child(1) { transition-delay: 0s; }
.cs-tile.fade-in:nth-child(2) { transition-delay: 0.08s; }
.cs-tile.fade-in:nth-child(3) { transition-delay: 0.16s; }
.cs-tile.fade-in:nth-child(4) { transition-delay: 0.24s; }
.cs-tile.fade-in:nth-child(5) { transition-delay: 0.32s; }
.cs-tile.fade-in:nth-child(6) { transition-delay: 0.40s; }

/* pricing cards stagger */
.pricing-card.fade-in:nth-child(1) { transition-delay: 0s; }
.pricing-card.fade-in:nth-child(2) { transition-delay: 0.10s; }
.pricing-card.fade-in:nth-child(3) { transition-delay: 0.20s; }
.pricing-card.fade-in:nth-child(4) { transition-delay: 0.30s; }

/* keep fixed elements out of the transform graph so they don't break */
.site-nav.fade-in { transform: none !important; }
.cta .cta-arrow svg { /* protect arrow svg from inheriting transforms */ }

/* ---------- site footer reveal ----------
   On pages with `body.with-footer`, the body bg is the footer color, main
   becomes a white card with rounded bottom corners and a higher z-index,
   and the fixed footer sits behind it. Scrolling main upward reveals the
   wordmark underneath. */
body.with-footer {
  background: var(--footer-bg);
  /* Less than full footer height so max-scroll only reveals part of the
     wordmark instead of the whole thing. */
  padding-bottom: calc(var(--footer-h) * 0.80);
}

body.with-footer .site-nav {
  background: #fff;
}

body.with-footer > main {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 0 0 clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px);
  overflow: hidden;
}

#site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  background: var(--footer-bg);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

#site-footer img {
  /* Wider than the footer so the wordmark bleeds off the sides,
     with slightly more crop on the left to kill the gap there.
     Negative bottom margin nudges it down so the baseline gets clipped. */
  width: 106%;
  margin-left: -3.5%;
  margin-bottom: -3%;
  height: auto;
  display: block;
}

/* ---------- site nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}

.site-nav .logo img {
  height: 18px;
  width: auto;
}

.nav-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
  transition: opacity 0.15s ease;
}

.nav-link:hover { opacity: 0.55; }

/* ---------- hero ---------- */
#hero {
  padding: clamp(48px, 8vh, 96px) 32px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(32px, 5vh, 56px);
}

.hero-headline {
  margin: 0;
  max-width: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-headline em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  /* slightly bigger than the surrounding sans */
  font-size: 1.12em;
  line-height: 0.9;
  letter-spacing: -0.01em;
  padding: 0 0.04em;
}

/* Force the wrap after "build" only on wide desktops */
.hero-break { display: none; }
@media (min-width: 1200px) {
  .hero-break { display: inline; }
}

/* ---------- CTA pill ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  padding: 12px 14px 12px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1);
}
.cta:hover { transform: scale(1.10); }
.cta:active { transform: scale(0.98); }
.cta-label { line-height: 1; }
.cta-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Green variant — used on section 3 */
.cta--green { background: var(--accent); color: var(--ink); }
.cta--green .cta-arrow { background: var(--ink); color: #fff; }

/* ---------- 3D ring carousel ---------- */
/* Dodecahedron v1 */
.dodeca {
  width: 100%;
  height: clamp(320px, 32vw, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dodeca canvas {
  display: block;
}

.ring {
  width: 100%;
  height: clamp(260px, 24vw, 340px);
  perspective: 1400px;
  perspective-origin: center center;
  overflow: visible;
}
.ring-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ring-spin 40s linear infinite;
}
@keyframes ring-spin {
  from { transform: rotateX(-8deg) rotateY(0deg); }
  to   { transform: rotateX(-8deg) rotateY(-360deg); }
}

.ring-card {
  --count: 12;
  --radius: 460px;
  --angle: calc(var(--i) * (360deg / var(--count)));
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(150px, 17vw, 220px);
  height: clamp(94px, 11vw, 138px);
  margin-top: clamp(-69px, -5.5vw, -47px);
  margin-left: clamp(-110px, -8.5vw, -75px);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  transform: rotateY(var(--angle)) translateZ(var(--radius));
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.ring-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .ring { height: 180px; perspective: 900px; }
  .ring-card {
    --radius: 280px;
    width: 120px;
    height: 76px;
    margin-top: -38px;
    margin-left: -60px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  }
}

/* ---------- sliding puzzle grid (legacy, unused) ---------- */
.puzzle-grid {
  position: relative;
  width: 100%;
  /* 12 cols × 2 rows = 6:1 aspect — long horizontal strip */
  aspect-ratio: 12 / 2;
  background: #d0d0d0;
  overflow: hidden;
  /* Cell sizing as CSS vars so JS uses the same numbers */
  --cols: 12;
  --rows: 2;
}
.puzzle-cell {
  position: absolute;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  background: #fff;
  border: 0.5px solid #d0d0d0;
  box-sizing: border-box;
  transition: top 0.7s cubic-bezier(.55,.085,.32,1),
              left 0.7s cubic-bezier(.55,.085,.32,1);
  will-change: top, left;
}
.puzzle-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
}

/* ---------- carousel ---------- */
.carousel-stack {
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(8px, 1.5vh, 24px);
  transition: opacity 0.6s ease;
}
.carousel-stack.is-loading {
  opacity: 0;
  /* Pause the animation while hidden so we don't unveil a mid-scroll state */
  animation-play-state: paused;
}
.carousel-stack.is-loading .carousel-track {
  animation-play-state: paused;
}

.carousel-row {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}

.carousel-track img {
  height: clamp(80px, 9vw, 120px);
  width: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Each strip owns a trailing gap so two copies + margin = 2 × (W + gap),
   and translating -50% advances by exactly one (strip + gap) unit. */
.carousel-strip { margin-right: 15px; }

@keyframes scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.carousel-row[data-direction="right"] .carousel-track {
  animation: scroll-right var(--dur, 100s) linear infinite;
}
.carousel-row[data-direction="left"] .carousel-track {
  animation: scroll-left var(--dur, 100s) linear infinite;
}

/* ---------- section 2: thesis card ---------- */
#thesis {
  padding: 5px 0 0;
  display: flex;
  justify-content: center;
}

.thesis-card {
  background: var(--ink);
  color: #fff;
  border-radius: clamp(20px, 2.5vw, 36px);
  padding: clamp(48px, 7vw, 100px) clamp(28px, 6vw, 96px);
  width: 100%;
  max-width: none;
  text-align: center;
}

.thesis-label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.thesis-headline {
  margin: 0 auto clamp(36px, 5vh, 60px);
  max-width: 900px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #fff;
}

.thesis-headline .sans {
  font-family: var(--sans);
  font-weight: 500;
  /* visual size match — serif fonts run taller, so sans gets a slight bump down */
  font-size: 0.92em;
  letter-spacing: -0.025em;
}

.thesis-body {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.thesis-body p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #fff;
}

/* ---------- section 3: founders ---------- */
#founders {
  padding: 120px 32px clamp(0px, 1vh, 20px);
  display: flex;
  justify-content: center;
}

.founders-inner {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 32px);
}

.founders-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.founders-headline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.founders-sub {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.founders-pfps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(10px, 1.5vh, 18px);
}

.pfp {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pfp img {
  width: clamp(163px, 17vw, 224px);
  height: clamp(163px, 17vw, 224px);
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.13);
}

.pfp figcaption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.04em;
  color: #b3b3b3;
}

.founders-body {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(4px, 0.8vh, 12px);
}

.founders-body p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---------- section 4: case studies ---------- */
#case-studies {
  padding: clamp(40px, 6vh, 80px) clamp(20px, 3vw, 48px) clamp(48px, 8vh, 96px);
  max-width: none;
  margin: 0;
}

.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 2vh, 24px);
}

.cs-title {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

.cs-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  aspect-ratio: 16 / 10;
  background: #eee;
}

.cs-tile img,
.cs-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}

.cs-tile:hover img,
.cs-tile:hover video { transform: scale(1.04); }

/* Bottom "View All" is hidden on desktop — shown on mobile in its place */
.cs-view-all-bottom { display: none; }

/* <br> that only renders on mobile (for "We're / Graham & Jonny" break) */
.break-mobile { display: none; }

/* small CTA variant for the View All button */
.cta--small {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 6px 5px 14px;
  gap: 8px;
}
.cta--small .cta-arrow {
  width: 22px;
  height: 22px;
}

/* ---------- section 5: pricing ---------- */
#pricing {
  padding: clamp(48px, 7vh, 96px) clamp(20px, 3vw, 48px) clamp(48px, 7vh, 96px);
  max-width: none;
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}

.pricing-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: clamp(26px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 6vh, 96px);
  min-height: clamp(340px, 36vw, 440px);
  color: var(--ink);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1);
}
.pricing-card:hover { transform: scale(1.02); }

.pricing-card--dark {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}

.pricing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Keep the Book A Call pill at its natural size — long titles like
   "Creative Founder In Residence" used to compress it. */
.pricing-head .cta { flex-shrink: 0; }

.pricing-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: inherit;
  flex: 1 1 auto;
}

.pricing-info {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.pricing-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-timeline,
.pricing-price {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: inherit;
}

.pricing-desc {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: inherit;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(20px, 3vw, 56px);
  row-gap: 8px;
  justify-content: start;
}
.pricing-features li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #9a9a9a;
  text-transform: capitalize;
}
.pricing-card--dark .pricing-features li {
  color: rgba(255, 255, 255, 0.55);
}
.pricing-features li::before {
  content: "—  ";
  color: inherit;
}

/* ---------- section 6: testimonials ---------- */
#testimonials {
  padding: clamp(48px, 7vh, 96px) clamp(20px, 3vw, 48px) clamp(56px, 9vh, 120px);
  max-width: none;
  margin: 0;
}

.section-label {
  margin: 0 0 clamp(16px, 2vh, 24px);
  text-align: left;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.testimonial-marquee {
  width: 100%;
  overflow: hidden;
  /* let the track bleed visually past the section padding */
  margin-inline: calc(-1 * clamp(20px, 3vw, 48px));
  padding-inline: clamp(20px, 3vw, 48px);
}

.testimonial-track {
  display: flex;
  gap: clamp(16px, 1.5vw, 24px);
  width: max-content;
  animation: t-scroll var(--t-dur, 80s) linear infinite;
}

@keyframes t-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.testimonial-card {
  flex: 0 0 auto;
  width: min(560px, 86vw);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: clamp(24px, 2.4vw, 36px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.testimonial-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.testimonial-pfp {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #eee;
}

.testimonial-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.2;
}

.testimonial-title {
  margin-top: 2px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #6e6e6e;
  line-height: 1.15;
}

.testimonial-body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  /* Header — smaller logo + smaller nav text */
  .site-nav { padding: 0 16px; height: 54px; }
  .site-nav .logo img { height: 12px; }
  .nav-link { font-size: 9.5px; }

  /* Hero */
  #hero { padding: 28px 22px 9px; gap: 24px; }
  .hero-headline { font-size: clamp(34px, 9vw, 52px); }
  .cta { font-size: 15px; padding: 10px 12px 10px 22px; }
  .cta-arrow { width: 30px; height: 30px; }

  /* Carousel */
  .carousel-stack { gap: 10px; margin-top: 4px; margin-left: -22px; margin-right: -22px; width: calc(100% + 44px); }
  .carousel-track { gap: 0; }
  .carousel-track img { height: clamp(60px, 14vw, 85px); }
  .carousel-strip { margin-right: 5px; }

  /* Black box thesis — generous side padding, narrower text column */
  #thesis { padding: 9px 0 0; }
  .thesis-card { padding: 48px 44px 72px; border-radius: 18px; }
  .thesis-label { font-size: 20px; margin-bottom: 28px; }
  .thesis-headline { font-size: clamp(34px, 9vw, 52px); margin-bottom: 32px; }
  .thesis-body { gap: 18px; max-width: 320px; }
  .thesis-body p { font-size: 20px; line-height: 1.35; }

  /* Founders / "about us" — sits close beneath the black box, narrower body */
  #founders { padding: 36px 44px 0; gap: 20px; }
  .founders-headline { font-size: clamp(34px, 9vw, 52px); }
  .founders-sub { font-size: 18px; }
  .pfp img { width: 130px; height: 130px; }
  .pfp figcaption { font-size: 12px; }
  .founders-body { max-width: 320px; }
  .founders-body p { font-size: 20px; line-height: 1.35; }
  .break-mobile { display: initial; }

  /* Case studies — single column stack, View All at the bottom */
  #case-studies { padding: 32px 16px 56px; }
  .cs-title { font-size: 26px; }
  .cs-grid { grid-template-columns: 1fr; gap: 10px; }
  .cs-tile { aspect-ratio: 16 / 9; }
  .cs-view-all-top { display: none; }
  .cs-view-all-bottom {
    display: flex;
    width: max-content;
    margin: 24px auto 0;
  }

  /* Pricing — give each card more vertical room and bigger type */
  #pricing { padding: 48px 16px 64px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pricing-card {
    min-height: 360px;
    padding: 28px 26px;
    gap: 44px;
  }
  .pricing-head { gap: 14px; }
  .pricing-title { font-size: 30px; max-width: 60%; line-height: 1; }
  .pricing-cta, .pricing-card .cta {
    font-size: 14px;
    padding: 10px 10px 10px 18px;
    gap: 10px;
  }
  .pricing-card .cta-arrow { width: 28px; height: 28px; }
  .pricing-timeline, .pricing-price, .pricing-desc { font-size: 17px; line-height: 1.35; }
  .pricing-info { grid-template-columns: 1fr 1.4fr; gap: 20px; }
  .pricing-features li { font-size: 16px; }

  /* Testimonials — much smaller cards + tighter section */
  #testimonials { padding: 28px 16px 36px; }
  .section-label { font-size: 22px; margin-bottom: 14px; }
  .testimonial-marquee { margin-inline: -16px; padding-inline: 16px; }
  .testimonial-track { gap: 12px; }
  .testimonial-card { padding: 18px; width: min(280px, 76vw); border-radius: 12px; }
  .testimonial-pfp { width: 38px; height: 38px; }
  .testimonial-head { gap: 10px; margin-bottom: 12px; }
  .testimonial-name { font-size: 14px; }
  .testimonial-title { font-size: 14px; }
  .testimonial-body { font-size: 14px; line-height: 1.4; }
}