/* ————————————————————————————————————————————————
   Humanistics — style.css
   Apple-white, image-led, warm bronze accent.
   Type: SF system stack + Instrument Serif italic accents.
   ———————————————————————————————————————————————— */
:root {
--bg: #fbfbfd;
  --surface: #f5f5f7;
  --white: #ffffff;
  --tint-hi: #faf8f4;
  --tint-lo: #f4f1ea;
  --warm-hi: #f5f2ec;
  --warm-lo: #ece7de;
  --warm-hover: #ece8e1;
  color-scheme: light;
  --ink: #1d1d1f;
  --ink-strong: #000000;
  --ink-soft: #55555a;
  --ink-faint: #67676c;
  --gold: #80623a;
  --gold-soft: #a07d48;
  --on-image: #ffffff;
  --gold-wash: rgba(128, 98, 58, 0.28);
  --hairline: rgba(0, 0, 0, 0.08);
  --danger-wash: rgba(162, 69, 58, 0.14);
  --radius-pill: 999px;
  --radius: 28px;
  --radius-card: 24px;
  --radius-control: 14px;
  --content-max: 1120px;
  --wide-max: 1440px;
  --rail: max(24px, calc((100% - var(--content-max)) / 2));
  --rail-text: var(--rail);
  --shadow-md: 0 1px 2px rgba(29, 29, 31, 0.04), 0 18px 44px -32px rgba(29, 29, 31, 0.22);
  --shadow-lg: 0 1px 2px rgba(29, 29, 31, 0.05), 0 30px 70px -38px rgba(29, 29, 31, 0.35);
  --z-content: 1;
  --z-menu: 90;
  --z-nav: 100;
  --z-skip: 200;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --hero-overlap: 200px;
  --danger: #a2453a;
  --fade: clamp(56px, 7vh, 96px);
}

/* Self-hosted accent face. Two subsets, and a Georgia fallback whose
   size-adjust was measured in headless Chrome (the real face sets at 78.6%
   of Georgia's width), so the headline does not reflow when it arrives. */
@font-face {
font-family: "Instrument Serif Fallback";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 78.6%;
}

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

html {
scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
  caret-color: var(--gold);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-wash) transparent;
}

body {
overflow-x: clip;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-wash); }

/* Paragraph rag and touch feedback are set once, for every page. */
p { text-wrap: pretty; }

a, button { -webkit-tap-highlight-color: transparent; }

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

/* <picture> wraps every image for AVIF/WebP negotiation. It must not
   generate a box, or it becomes the flex/grid item the <img> used to be. */
picture { display: contents; }

/* ——— Accessibility helpers ——— */
.skip-link {
position: absolute;
  top: -48px;
  left: 16px;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--on-image);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.25s var(--ease);
}

.skip-link:focus { top: 12px; }

:focus-visible {
outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ——— Navigation ——— */
/* A floating capsule rather than an edge-to-edge bar: the chrome reads as
   an object sitting above the page instead of a lid clamped onto it, and
   the photography runs full-bleed underneath it. */
.nav {
position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding: 14px max(12px, calc(var(--rail) - 26px)) 0;
  pointer-events: none;
  background: none;
  border: none;
}

.nav-inner {
pointer-events: auto;
  max-width: calc(var(--content-max) + 52px);
  margin: 0 auto;
  padding: 6px 6px 6px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 34px -20px rgba(29, 29, 31, 0.30);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

/* Once the page moves under it, the capsule firms up so it never dissolves
   into a pale section behind it. */
.nav.scrolled .nav-inner {
background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 14px 40px -20px rgba(29, 29, 31, 0.38);
}

.hero-media {
position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* V2 subjects stand in the right third with their heads high in the frame:
     keep the top of the photograph and bias toward them, no enlargement. */
  object-position: 64% 22%;
  display: block;
}

.hero-grid::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 251, 253, 0.96) 0%, rgba(251, 251, 253, 0.92) 32%, rgba(251, 251, 253, 0.62) 52%, rgba(251, 251, 253, 0.18) 70%, rgba(251, 251, 253, 0) 100%),
    linear-gradient(180deg, rgba(251, 251, 253, 0.5) 0%, rgba(251, 251, 253, 0) 24%),
    linear-gradient(0deg, var(--bg) 0, var(--bg) 2%, rgba(251, 251, 253, 0.86) 8%, rgba(251, 251, 253, 0.4) 16%, rgba(251, 251, 253, 0) 26%);
}

.hero-kicker {
margin: 0 0 18px;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.section-tinted:has(+ .closing) {
background: linear-gradient(180deg, var(--bg) 0, rgba(251, 251, 253, 0) var(--fade)),
    linear-gradient(180deg, var(--tint-hi) 0%, var(--tint-lo) 100%);
}

.problem {
position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.problem.section-tinted {
padding-top: calc(var(--hero-overlap) + 24px);
  padding-bottom: calc(var(--fade) + 56px);
}

.problem-media {
position: absolute;
  inset: auto 0;
  margin: 0;
  z-index: 0;
  mask-image: linear-gradient(90deg, black 0, black 40%, transparent 66%), linear-gradient(180deg, transparent 0, black 12%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0, black 40%, transparent 66%), linear-gradient(180deg, transparent 0, black 12%, black 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  top: calc(var(--hero-overlap) - 48px);
  transform: translateX(-6%);
  height: auto;
  aspect-ratio: 16 / 8.2;
  max-height: none;
}

.problem-media img {
width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 0%;
}

.problem-grid {
position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  padding-inline: var(--rail);
  align-items: start;
  min-height: 0;
}

.problem-copy { grid-column: 2; }

.problem .section-text {
text-align: left;
  margin: 0;
  padding: 0;
  max-width: none;
}

.problem .scatter {
padding-inline: 0;
  margin-top: clamp(32px, 5vh, 48px);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 64px);
  padding-inline: var(--rail);
  /* Both columns hold content of a similar size, so the pair is capped and
     centred: on a wide display the card must not float at the left of a
     column far wider than itself. */
  max-width: calc(1160px + 2 * var(--rail));
  margin-inline: auto;
}

.how-steps {
list-style: none;
  margin: 0;
  padding: 0;
}

.how-step {
display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
}

.how-step:last-child { border-bottom: 1px solid var(--hairline); }

.how-num {
grid-row: 1 / span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--gold);
}

.how-step h3 {
margin: 0;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.how-step p {
grid-column: 2;
  margin: 6px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34em;
}

.who {
display: grid;
  gap: 14px;
}

.who-label {
margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

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

.who-tabs [role="tab"] {
min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--white);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.who-tabs [role="tab"][aria-selected="true"] {
background: var(--ink);
  color: var(--on-image);
  border-color: var(--ink);
}

.chat-who[hidden] { display: none; }

.chat-who {
animation: who-in 0.45s var(--ease);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.who-note {
margin: 0;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.photo-stage {
position: relative;
  max-width: min(var(--wide-max), calc(100% - 48px));
  margin: clamp(48px, 7vh, 80px) auto 0;
}

.photo-stage .photo {
max-width: none;
  margin: 0;
}

.photo-steps {
position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.photo-steps li {
display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 18px 17px;
  border-radius: var(--radius-card);
  background: rgba(251, 251, 253, 0.84);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow-md);
}

.ps-num {
grid-row: 1 / span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--gold);
}

.photo-steps h3 {
margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.photo-steps p {
grid-column: 2;
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.problem-quote {
grid-column: 1;
  align-self: end;
  max-width: 21em;
  padding-bottom: 0;
  margin-bottom: -52px;
}

.problem-quote p {
  hanging-punctuation: first;
margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.hero-who {
width: 100%;
  max-width: 560px;
  gap: 12px;
}

.hero-who .chat {
max-width: none;
  width: 100%;
}

.who-prompt {
display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px 0 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hero-who .who-tabs [role="tab"] {
background: rgba(251, 251, 253, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-who .who-tabs [role="tab"][aria-selected="true"] { background: var(--ink); }

.hero-who .who-note { color: var(--ink-soft); }

.chat-anim[hidden] { display: none; }

.included-grid {
margin: 20px 0 0;
  padding: 0 var(--rail);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  text-align: left;
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.included-card {
background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 4px;
  align-content: start;
  grid-template-rows: auto auto auto;
}

.included-lead {
background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  border-color: rgba(128, 98, 58, 0.18);
}

.included-card h4 {
margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  margin-top: 10px;
}

.included-card p {
margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.how {
position: relative;
  overflow: hidden;
}

.how > * {
position: relative;
  z-index: 1;
}

.how-media {
  position: absolute;
  /* Sits a little below the section top so the couple's heads clear the fade
     rather than being sliced by it. */
  inset: clamp(72px, 9%, 150px) 0 auto 0;
  height: 78%;
  margin: 0;
  z-index: 0;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 36% 48% at 66% 54%, black 0, black 30%, transparent 100%), linear-gradient(180deg, transparent 0, black 6%, black 62%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 36% 48% at 66% 54%, black 0, black 30%, transparent 100%), linear-gradient(180deg, transparent 0, black 6%, black 62%, transparent 82%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.how-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
  transform: scale(1.08);
  transform-origin: 62% 100%;
}

.section-tinted.into-warm {
background: linear-gradient(180deg, var(--bg) 0, rgba(251, 251, 253, 0) var(--fade)),
    linear-gradient(180deg, var(--tint-hi) 0%, var(--tint-lo) 100%);
}

.closing-grid {
position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding-inline: var(--rail);
  align-items: center;
}

.closing .section-text {
grid-column: 2;
  text-align: left;
  margin: 0;
  padding: 0;
  max-width: none;
}

.closing .cta-row { justify-content: flex-start; }

.closing-media {
position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  mask-image: linear-gradient(90deg, black 0, black 34%, transparent 64%), linear-gradient(180deg, transparent 0, black 8%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0, black 34%, transparent 64%), linear-gradient(180deg, transparent 0, black 8%, black 88%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.closing-media img {
width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  transform: scale(1.16);
  transform-origin: 0% 6%;
}

.included-icon {
display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--gold-wash);
  color: var(--gold);
}

.included-lead .included-icon { background: rgba(255, 255, 255, 0.7); }

.compare {
--pos: 50%;
  position: relative;
  max-width: min(var(--wide-max), calc(100% - 48px));
  margin: clamp(48px, 7vh, 80px) auto 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  user-select: none;
  -webkit-user-select: none;
}

.compare figure {
position: absolute;
  inset: 0;
  margin: 0;
}

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

.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare-handle {
position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.compare-range {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare-range:focus-visible ~ .compare-handle::after {
outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.compare-copy {
max-width: min(var(--wide-max), calc(100% - 48px));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}

.compare-card {
background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-md);
}

.compare-card-after {
background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  border-color: rgba(128, 98, 58, 0.18);
}

.compare-card h3 {
margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.compare-card ul {
list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.compare-card li {
font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}

.compare-card li::before {
content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

.closing::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 242, 236, 0) 40%, rgba(245, 242, 236, 0.82) 58%, rgba(245, 242, 236, 0.94) 100%);
}

.compare-after { clip-path: inset(0 0 0 calc(var(--pos) - 1px)); }

.compare-btn {
position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease), transform 0.25s var(--ease);
}

.compare-btn-before {
background: rgba(251, 251, 253, 0.92);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.compare-btn-after {
background: var(--ink);
  color: var(--on-image);
}

.compare-btn.is-hidden {
opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.compare-btn:focus-visible {
outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cred-list.cred-logos {
  flex-wrap: nowrap;
  gap: clamp(18px, 3vw, 44px);
  row-gap: 20px;
}

.cred-list.cred-logos li {
  display: flex;
  align-items: center;
  line-height: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.cred-list.cred-logos img {
  filter: grayscale(1) opacity(0.68);
  transition: filter 0.35s var(--ease);
  max-width: 100%;
  height: auto;
}

.cred-list.cred-logos li:hover img { filter: grayscale(0) opacity(1); }

/* ——— Leaders: one stage at a time ——————————————————————
   Five leaders, one platform. Each slide is a portrait beside three lines:
   who, the fear in their own words, and what changes. It snap-scrolls
   sideways; the row of faces underneath is both the index and the control. */
.stage-wrap { margin-top: clamp(40px, 6vh, 64px); }

.stage {
  /* The leading inset grows with the viewport so the current slide is centred,
     never parked at the left rail with dead space beside it. */
  --stage-gap: clamp(16px, 2vw, 28px);
  /* vw, not %: a percentage flex-basis on the trailing spacer would resolve
     against the container's inner width and fall short of the leading inset. */
  --stage-inset: max(var(--rail-text), calc((100vw - 1040px) / 2));
  position: relative;
  display: flex;
  gap: var(--stage-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--stage-inset);
  padding: 6px var(--stage-inset) 28px;
  scrollbar-width: none;
}


.stage::-webkit-scrollbar { display: none; }

.stage:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.slide {
  flex: 0 0 min(100%, 1040px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: opacity 0.5s var(--ease);
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Neighbours peek in at the rails; they step back so the current one reads. */
.stage[data-live] .slide:not(.is-current) { opacity: 0.48; }

.slide-photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  overflow: hidden;
}

.slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.5vw, 64px);
}

.slide-who {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.slide-fear {
  hanging-punctuation: first;
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.slide-turn {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.slide-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stage-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--rail);
  margin-top: 4px;
}

.faces {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faces button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  transition: color 0.3s var(--ease);
}

.faces img {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--hairline);
  opacity: 0.72;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.3s var(--ease);
}

.faces button:hover img, .faces button[aria-current="true"] img { opacity: 1; }

.faces button[aria-current="true"] { color: var(--ink); }

.faces button[aria-current="true"] img {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold);
}

.faces button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stage-nav {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.stage-nav button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.stage-nav button:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.stage-nav button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}


/* ——— V2 components ———————————————————————————————————————————
   The V2 copy argues in single claims, so it needs one thing V1 never had:
   a line that stands alone between sections and carries the weight itself. */
.statement {
  margin: clamp(48px, 7vh, 80px) auto 0;
  max-width: calc(980px + 2 * var(--rail));
  padding-inline: var(--rail);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  hanging-punctuation: first;
}

.statement em { color: var(--gold); }

.statement-small {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.statement-small em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--gold);
}

/* The hero's straddle card. V1 held a conversation here; V2 holds the
   sentence the whole page turns on. */
.statement-card p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.statement-card .statement-card-punch {
  margin-top: 14px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Three-up variant of the bento cards, for sets of three and of six. */
.included-grid.is-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(32px, 5vh, 48px);
}

.included-card h3 {
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.is-trio .included-icon {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}


/* A set of short lines the copy asks or states, set as type rather than cards.
   Nothing here is paraphrased: each line is the client's own. */
.questions-lead {
  margin: clamp(28px, 4vh, 40px) auto 0;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.questions {
  list-style: none;
  margin: clamp(20px, 3vh, 28px) auto 0;
  padding: 0 var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}

.questions li {
  padding: 22px 0 26px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.questions.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.questions.is-terms li {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.005em;
  color: var(--gold);
}

.statement-card .statement-card-punch.is-first { margin: 0 0 12px; }


/* The hero's statement card straddles into the next section by
   --hero-overlap + 72px, so that section opens below it, not beneath it. */
.hero + .section { padding-top: calc(var(--hero-overlap) + 72px + clamp(56px, 8vh, 96px)); }

.questions.is-terms li { text-align: center; }


/* A plain section warms into the closing rather than meeting it at a line.
   (A tinted one already does, via .section-tinted:has(+ .closing).) */
.section:not(.section-tinted):has(+ .closing) {
  padding-bottom: clamp(96px, 13vh, 150px);
  background: linear-gradient(180deg, var(--bg) 0, var(--bg) 45%, var(--tint-lo) 100%);
}

.questions.is-five li { font-size: clamp(1.125rem, 1.45vw, 1.375rem); }


/* Narrow crops keep the people each photograph is about. */
.photo.is-left img { object-position: 28% 50%; }

.photo.is-right img { object-position: 70% 50%; }

.nav-cta-short { display: none; }


/* ——— Logo wall ———————————————————————————————————————————————
   Twelve marks in even columns, each sized by its attributes for equal visual
   weight (wide wordmarks shorter, emblems taller), set in one grey so no brand
   colour outshouts the rest; colour returns on hover. */
.credibility:has(.cred-wall) { max-width: calc(1180px + 48px); }

.cred-list.cred-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(28px, 4vh, 40px) clamp(16px, 2.4vw, 36px);
  margin-top: 8px;
}

.cred-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  line-height: 0;
}

.cred-wall img {
  max-width: 100%;
  height: auto;
  filter: grayscale(1) opacity(0.62);
  transition: filter 0.35s var(--ease);
}

.cred-wall li:hover img { filter: grayscale(0) opacity(1); }

@media (prefers-reduced-transparency: reduce) {
  .nav-inner { background: var(--white); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner { background: rgba(255, 255, 255, 0.94); }
}

.wordmark {
font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ——— Buttons & links ——— */
.btn {
display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--on-image);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  min-height: 44px;
}

.btn:hover {
background: var(--ink-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.45);
}

/* HIG minimum hit region is 44x44pt. This is the site's single conversion
   control — it was measuring 37px tall on desktop and 35.5px on phones. */
.btn-nav {
padding: 0 22px;
  min-height: 44px;
  font-size: 0.9375rem;
}

.btn-large {
padding: 20px 40px;
  font-size: 1.1875rem;
}

.text-link {
display: inline;
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  font-size: 1.0625rem;
  transition: transform 0.3s var(--ease), color 0.25s var(--ease),
    opacity 0.25s var(--ease);
}

.text-link:hover {
text-decoration: underline;
  text-underline-offset: 4px;
  transform: translateX(2px);
}

.cta-row {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ——— Typography ——— */
h1, h2 {
font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(2.875rem, 7vw, 5.5rem); }

h2 { font-size: clamp(2.25rem, 5vw, 4rem); }

h1 em, h2 em {
font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.05em;
  line-height: 1;
}

.lede {
font-size: clamp(1.1875rem, 2.1vw, 1.625rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-top: 1.75rem;
  text-wrap: balance;
}

.page-hero .lede {
  max-width: 36em;
  margin-inline: auto;
}

.copy {
font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-faint);
  max-width: 36em;
  margin: 1.5rem auto 0;
  text-wrap: pretty;
}

/* ——— Sections ——— */
.section { padding-top: clamp(110px, 16vh, 190px); }

.section-text {
max-width: calc(900px + 2 * var(--rail));
  margin: 0 auto;
  text-align: center;
  padding-inline: var(--rail);
}

/* ——— Media ——— */
/* ——— Captioned media — copy integrated into the image ——— */
/* ——— Steps (Look. Show. Build. Share.) ——— */
.steps {
margin-top: clamp(56px, 8vh, 84px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  text-align: left;
  counter-reset: step;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

@media (max-width: 1100px) {
  .steps {
  grid-template-columns: repeat(3, 1fr);
                                                      gap: 36px;
  }
}

.step {
border-top: 1px solid var(--gold-wash);
  padding-top: 22px;
  counter-increment: step;
}

.step h3 {
font-size: 1.375rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.step p {
font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* A standard section running into a full-bleed one needs air between them */
/* ——— Overlay features — full-screen image, copy over top, offset left ——— */
/* The stage: pulls overlay copy in to the same left edge the image
   panels use. The image and the veil are inset:0, so they resolve
   against the padding box and stay full-bleed. */
/* The hero — and only the hero — fills the screen, and keeps the wider
   cinematic inset. It is a title card, not a content section. */
/* Hero headline runs longer than the section heads — give it room to sit on two lines */
/* ——— Footer ——— */
.footer { border-top: 1px solid var(--hairline); }

.footer-mark {
font-weight: 600;
  color: var(--ink);
  font-size: 0.875rem;
}

/* ——— Reveal motion ——— */
/* The hidden start-state applies ONLY once JS has confirmed it is running
   (main.js sets html.js as its first statement). Without the guard a
   blocked or failed script leaves the whole page blank — nearly all of
   <main> lives inside one of these wrappers. */
/* :not(.in) rather than relying on `.in` to override.
   `.js .reveal` is specificity (0,2,0) and plain `.in` is (0,1,0), so the
   guard would otherwise outrank the class that reveals the element and the
   page would stay blank WITH JavaScript — the exact failure this guard
   exists to prevent, inverted. Excluding .in here removes the contest. */
.js .reveal:not(.in) {
opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
}

.js .reveal {
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}

.reveal[data-d="1"] { transition-delay: 0.1s; }

.reveal[data-d="2"] { transition-delay: 0.2s; }

.reveal[data-d="3"] { transition-delay: 0.3s; }

.reveal[data-d="4"] { transition-delay: 0.4s; }

.js .reveal-img:not(.in) { opacity: 0; }

.js .reveal-img { transition: opacity 1.1s var(--ease); }

.js .reveal-img:not(.in) img { transform: scale(1.05); }

.js .reveal-img img { transition: transform 1.6s var(--ease); }

.reveal-img.in img { transform: scale(1); }

.in {
opacity: 1;
  transform: none;
}

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

  /* Must out-specify `.js .reveal:not(.in)` (0,3,0), or someone who has
     asked for no motion waits on the observer for content that should
     simply be there — the opposite of what this query is for. */
  .js .reveal, .js .reveal:not(.in), .js .reveal-img, .js .reveal-img:not(.in), .js .reveal-img img, .js .reveal-img:not(.in) img {
  opacity: 1;
                                                      transform: none;
                                                      filter: none;
                                                      transition: none;
  }

  .js .scatter .tile {
  opacity: 1;
                                                      transform: none;
                                                      transition: none;
  }
}

/* ——— Responsive ——— */
.br-wide { display: inline; }

@media (max-width: 900px) {
  .steps {
  grid-template-columns: repeat(2, 1fr);
                                                      gap: 32px;
  }
}

@media (max-width: 700px) {
  /* Mobile display type — tighter, no oversized wraps */
  /* Art direction: keep each image's subject in the portrait crop */
  /* V4 photography — each crop keeps its subject in frame once the
     full-bleed sections go bottom-anchored on small screens. */
  /* the colleagues sit left; the card stacks below the copy on phones */
  .img-v4tailor { object-position: 58% center; }
}

@media (max-width: 640px) {
  .br-wide { display: none; }

  .cta-row { gap: 20px; }

  .btn {
  padding: 12px 24px;
                                                      font-size: 1rem;
  }

  .btn-nav {
  padding: 0 18px;
                                                      min-height: 44px;
                                                      font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .steps {
  grid-template-columns: 1fr;
                                                      gap: 24px;
  }
}

/* ═══════════════════════════════════════════════════
   Multi-page extensions
   ═══════════════════════════════════════════════════ */
/* ——— Nav links ——— */
.nav-links {
display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  margin-right: 24px;
}

.nav-links a {
font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.25s var(--ease);
  padding: 14px 6px;
  line-height: 1.2;
  min-width: 44px;
  text-align: center;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a[aria-current="page"] {
color: var(--ink);
  font-weight: 600;
}

.nav-right {
display: flex;
  align-items: center;
  gap: 12px;
}

.nav-burger {
display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.nav-burger span {
display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.menu-open .nav-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }

.menu-open .nav-burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(251, 251, 253, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 32px 48px;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.menu-open .mobile-menu {
visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-menu {
  background: var(--bg);
                                                      -webkit-backdrop-filter: none;
                                                      backdrop-filter: none;
  }
}

.menu-open { overflow: hidden; }

.mobile-menu a {
font-size: 2rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.25s var(--ease);
}

.mobile-menu .btn {
margin-top: 24px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .nav-links { display: none; }

  .nav-burger { display: flex; }
}

/* ——— Interior page hero ——— */
.page-hero {
padding: clamp(140px, 20vh, 220px) 24px clamp(40px, 6vh, 72px);
  text-align: center;
  padding-inline: var(--rail);
}

.page-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }

/* ——— Long-form prose (legal, about story) ——— */
.prose {
max-width: 42em;
  margin: 0 auto;
  padding: 0 24px clamp(96px, 14vh, 160px);
  text-align: left;
}

.prose h2 {
font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin: 2.5em 0 0.75em;
}

.prose h3 {
font-size: 1.125rem;
  margin: 2em 0 0.5em;
  font-weight: 620;
}

.prose p, .prose li {
font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1em;
}

.prose ul {
padding-left: 1.25em;
  margin-bottom: 1em;
}

.prose strong {
color: var(--ink);
  font-weight: 600;
}

.draft-chip {
display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(138, 106, 63, 0.35);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: 2rem;
}

/* ——— Detail steps (How it works) ——— */
.step-detail {
  position: relative;
  padding-top: clamp(28px, 4vh, 40px);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 28px;
  text-align: left;
  width: calc(100% - 2 * var(--rail));
  max-width: 880px;
  margin-inline: auto;
}

.step-detail + .step-detail { margin-top: clamp(28px, 4vh, 44px); }

.step-detail:last-of-type { padding-bottom: clamp(28px, 4vh, 40px); }

/* The rules sit on the content column, not on the box that carries the rails. */
.step-detail::before, .step-detail:last-of-type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 1px solid var(--hairline);
}

.step-detail:last-of-type::after {
  top: auto;
  bottom: 0;
}

.step-num {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.75rem;
  color: var(--gold-soft);
  line-height: 1;
  padding-top: 4px;
}

.step-body h2 {
font-size: 1.625rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.step-body p {
font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: none;
}

.step-body .step-get {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.step-get-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

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

  .step-num { font-size: 2rem; }
}

/* ——— Fit / not fit ——— */
.fit-grid {
margin-top: clamp(40px, 6vh, 64px);
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.fit-card {
border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 32px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.fit-card h3 {
font-size: 1.125rem;
  margin-bottom: 1rem;
}

.fit-card li {
font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  list-style: none;
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 0.5em;
}

.fit-card li::before {
content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-soft);
}

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

/* ——— Team ——— */
.team-grid {
margin-top: clamp(48px, 7vh, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.team-card { text-align: left; }

.team-photo {
aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 20px;
  border: 0;
  box-shadow: var(--shadow-md);
}

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

.team-card h3 {
font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.team-card .team-role {
font-size: 0.9375rem;
  color: var(--gold);
  font-weight: 600;
  margin: 4px 0 10px;
}

.team-card p {
font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .team-grid {
  grid-template-columns: 1fr;
                                                      max-width: 420px;
  }
}

/* ——— Leadership (team members who are not founders) ——— */
.leadership {
margin-top: clamp(48px, 7vh, 72px);
  padding: 0 24px;
  text-align: left;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.leadership h2 {
font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}

.lead-person {
display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 48px);
  padding-top: 32px;
}

.lead-name h3 {
font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.lead-person p {
font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

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

/* ——— Quotes (placeholder testimonials) ——— */
/* ——— FAQ ——— */
.faq-list {
margin-top: clamp(40px, 6vh, 64px);
  text-align: left;
  padding-inline: var(--rail);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-item summary {
list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 26px 0;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.24s var(--ease);
  max-width: 62ch;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
padding: 0 40px 24px 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ——— Forms ——— */
.form-card {
max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.field { margin-bottom: 20px; }

.field label {
display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.field input, .field textarea, .field select {
width: 100%;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-control);
  padding: 14px 16px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field textarea {
min-height: 120px;
  resize: vertical;
}

.field input:focus, .field textarea:focus {
outline: none;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(128, 98, 58, 0.18);
}

.field input:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: rgba(0, 0, 0, 0.24); }

.form-note {
font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: 16px;
}

.pill-note {
display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.success-panel {
border: 1px solid rgba(138, 106, 63, 0.3);
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 40px 36px;
  text-align: center;
  display: none;
}

.success-panel.show { display: block; }

.success-panel h2, .success-panel h3 {
font-size: 1.375rem;
  margin-bottom: 0.5rem;
}

.success-panel p {
font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.success-panel .pill-note { margin-top: 20px; }

button.btn {
border: none;
  font-family: var(--font-sans);
}

/* ——— Meeting page (Calendly-style) ——— */
.meet-layout {
max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px clamp(96px, 14vh, 160px);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
  text-align: left;
}

.meet-info, .meet-picker {
  box-shadow: var(--shadow-md);
border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--white);
  padding: 36px;
}

.meet-info h2 {
font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.meet-meta {
display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 24px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.meet-meta span::before {
content: "—";
  color: var(--gold-soft);
  margin-right: 10px;
}

.meet-info h3 {
font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.meet-info li {
list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding-left: 1.4em;
  position: relative;
}

.meet-info li::before {
content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-soft);
}

.cal-head {
display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cal-head h2 { font-size: 1.125rem; }

.cal-nav {
display: flex;
  gap: 8px;
}

.cal-nav button {
width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--white);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.cal-nav button:hover:not(:disabled) { border-color: var(--ink); }

.cal-nav button:disabled {
opacity: 0.3;
  cursor: default;
}

.cal-grid {
display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-dow {
font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding: 6px 0 10px;
}

.cal-day {
aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.cal-day.avail {
background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.cal-day.avail:hover {
background: var(--warm-hover);
  transform: scale(1.05);
}

.cal-day.selected {
background: var(--ink);
  color: var(--on-image);
}

.slots {
display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.slot {
border: 1px solid rgba(0, 0, 0, 0.16);
  background: var(--white);
  border-radius: var(--radius-control);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

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

.slot.selected {
background: var(--ink);
  border-color: var(--ink);
  color: var(--on-image);
}

.tz-note {
font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 16px;
}

.meet-step { display: none; }

.meet-step.active { display: block; }

.meet-back {
background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
}

.meet-summary {
font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .meet-layout { grid-template-columns: 1fr; }
}

/* ——— Portal login ——— */
/* ——— Stat row (measurable results) ——— */
.stat-row {
margin-top: clamp(56px, 8vh, 84px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.stat {
border-top: 1px solid var(--hairline);
  padding-top: 24px;
}

.stat-num {
font-variant-numeric: tabular-nums;
  font-size: clamp(2.75rem, 5.5vw, 4rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* The unit beside a statistic is presentational, not emphasis — <em> here
   would put stress on "%" for a screen reader reading "30 percent". */
.stat-num .stat-unit {
font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
}

.stat p {
margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .stat-row {
  grid-template-columns: 1fr;
                                                      gap: 28px;
  }
}

/* ——— Two ways in (audience paths) ——— */
.path-grid {
margin-top: clamp(40px, 6vh, 64px);
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.path-card {
border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(28px, 3.5vw, 40px);
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.path-card h3 {
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 10px 0 14px;
}

.path-card p {
font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.path-terms {
margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--gold);
  font-weight: 600;
}

.path-terms + .path-terms {
border-top: none;
  padding-top: 6px;
}

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

@media (max-width: 760px) {
  .cta-panel {
  margin-left: 16px;
                                                      margin-right: 16px;
  }
}

/* ——— CTA panel (interior pages) ——— */
.cta-panel {
margin-top: clamp(48px, 7vh, 80px);
  padding: clamp(56px, 8vh, 88px) 32px;
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  text-align: center;
  padding-inline: var(--rail);
}

.cta-panel h2 { font-size: clamp(2rem, 4vw, 3rem); }

.cta-panel .lede { margin-top: 1rem; }

.cta-panel .cta-row { margin-top: 2rem; }

/* ——— Footer ———
   Seven links and a wordmark cannot fill 1800px, and a 4-column
   fr-grid tries to — which is what made this scatter. So: columns
   sized to their content, clustered from the left, anchored to the
   same text rail as every section above. The empty right is
   deliberate negative space, not a gap. */
.footer-mega {
padding: clamp(56px, 7vh, 76px) var(--rail-text) clamp(36px, 4.5vh, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px clamp(56px, 7vw, 128px);
  text-align: left;
}

.footer-brand { max-width: 15rem; }

.footer-brand .footer-mark { font-size: 1.25rem; }

.footer-brand p {
font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
  margin-top: 10px;
  font-size: 1rem;
}

.footer-col-label {
font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.footer-col a {
display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover { color: var(--ink); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
border-top: 1px solid var(--hairline);
  padding: 20px var(--rail-text) calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: left;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.footer-credit {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer-credit span {
  color: var(--ink-soft);
  font-weight: 600;
}

.footer-credit:hover, .footer-credit:hover span { color: var(--ink); }

@media (max-width: 760px) {
  .footer-mega { gap: 32px 48px; }

  .footer-brand {
  flex: 1 0 100%;
                                                      max-width: none;
  }
}

/* ═══════════════════════════════════════════════════
   FLAGSHIP LAYER
   Adaptive materials, scroll-driven motion, and press
   physics. Everything below is progressive enhancement —
   the base experience above stands on its own.

   NO DARK APPEARANCE, DELIBERATELY. A prefers-color-scheme
   layer was built once and the client rejected it: the brand
   is white and gold, "extremely clean, slightly spiritual".
   Do not reintroduce it — the absence is a decision, not a
   gap, and an audit flagging it as missing is wrong here.
   ═══════════════════════════════════════════════════ */
/* ——— Press physics ———
   HIG: feedback within 100ms, motion that tracks the finger. */
.btn:active {
transform: scale(0.97);
  box-shadow: none;
}

.slot:active, .cal-day.avail:active { transform: scale(0.97); }

.text-link:active { transform: translateX(2px) scale(0.98); }

.path-card, .fit-card, .team-photo {
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .path-card:hover, .team-photo:hover { transform: translateY(-3px); }
}

/* ——— Scroll-driven motion ———
   Native CSS timelines: no JS, no scroll listeners, no jank.
   Browsers without support keep the existing reveal. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes heroDrift {
      from { transform: scale(1) translate3d(0, 0, 0); }

      to { transform: scale(1.09) translate3d(0, 2.4%, 0); }
    }

    /* Contained images drift inside their own frame as they pass. */
    @keyframes mediaDrift {
      from { transform: scale(1.13) translate3d(0, -2.1%, 0); }

      to { transform: scale(1.13) translate3d(0, 2.1%, 0); }
    }
  }
}

/* ——— Counting statistics ——— */
.stat-num .count { font-variant-numeric: tabular-nums; }

/* ——— Materials: honour reduced transparency, and degrade cleanly ———
   HIG materials.md — Liquid Glass belongs to the control layer only,
   and must not be the sole carrier of legibility. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(251, 251, 253, 0.97); }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.scrolled {
  background: var(--bg);
                                                      -webkit-backdrop-filter: none;
                                                      backdrop-filter: none;
                                                      border-bottom-color: var(--hairline);
  }
}

/* ——— Increased contrast ———
   HIG accessibility.md — supply a higher-contrast scheme when the
   system asks for one. */
@media (prefers-contrast: more) {
  :root {
  --ink-soft: #3a3a3e;
                                                      --ink-faint: #48484d;
                                                      --gold: #6d5127;
                                                      --gold-soft: #6d5127;
                                                      --hairline: rgba(0, 0, 0, 0.3);
  }

  .nav, .nav.scrolled {
  background: var(--bg);
                                                      -webkit-backdrop-filter: none;
                                                      backdrop-filter: none;
  }

  .btn { background: var(--ink-strong); }
}

/* ═══════════════════════════════════════════════════
   IMAGE PANEL
   A rounded, contained image that carries its own copy.
   One block of words per section, sitting inside the
   picture it belongs to — never above it and below it
   and inside it at the same time.
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   CENTRED FULL-BLEED FEATURE
   A full-width photographic moment with the copy
   centred over it, used for the partner quotes so the
   run of text sections is broken by something to look at.
   ═══════════════════════════════════════════════════ */
/* Even coverage rather than the left-weighted scrim of the standard overlay */
@media (max-width: 700px) {
  /* the centred variant keeps its even scrim on small screens */
}

/* ——— Credibility strip ———
   Typographic, not logos. These names are the founders' own career
   history, not a Humanistics client list, so they are attributed as
   such — and reproducing third-party trademarks would imply an
   endorsement that does not exist. */
.credibility {
max-width: 1000px;
  margin: clamp(56px, 8vh, 88px) auto 0;
  padding: clamp(36px, 5vh, 52px) 24px 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
  border-top-color: var(--gold-wash);
}

.cred-label {
font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(24px, 3.5vh, 36px);
}

.cred-list {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  list-style: none;
  row-gap: 12px;
}

.cred-list li {
font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ——— Tinted band ———
   Two centred text sections in a row read as one long zone. A very light
   warm band gives the second one its own surface, so the eye registers a
   new chapter without introducing a dark section. */
.section-tinted {
background: linear-gradient(180deg, var(--bg) 0, rgba(251, 251, 253, 0) var(--fade)),
    linear-gradient(0deg, var(--bg) 0, rgba(251, 251, 253, 0) var(--fade)),
    linear-gradient(180deg, var(--tint-hi) 0%, var(--tint-lo) 100%);
  margin-top: clamp(110px, 16vh, 190px);
  padding-top: clamp(88px, 12vh, 140px);
  padding-bottom: clamp(88px, 12vh, 140px);
  padding-block: calc(var(--fade) + 48px);
}

.section-tinted .stat { border-top-color: rgba(0, 0, 0, 0.12); }

/* ——— Layout utilities (promoted from inline styles) ——— */
.section-flush { padding-top: 0; }

.section-tight { padding-top: clamp(40px, 6vh, 64px); }

.section-form {
padding-top: clamp(40px, 6vh, 64px);
  padding-bottom: clamp(96px, 14vh, 160px);
}

.section-link { margin-top: 40px; }

.label-hint {
font-weight: 400;
  color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════
   ROLE CARDS — "One company. Five different jobs."
   ═══════════════════════════════════════════════════

   The claim of this section is that a CFO and a COO are afraid of
   DIFFERENT things and therefore do not get the same product. A row
   shows five peers at once, so the difference reads at a glance; five
   stacked sections would read as five features of one thing, which is
   the opposite of the point.

   Scroll-snap rather than a 5-up grid: at the 1440px stage a fifth of
   the width is ~260px, too narrow for a portrait, a pull-quote and
   three labelled blocks.

   The row is a grid and every card is a SUBGRID of it, so "What it's
   costing", the question and "What changes" sit on the same baseline
   across all five cards however long each one's copy runs. Without
   this the tinted question boxes stagger, and the eye reads the
   raggedness as sloppiness rather than as five different answers. */

/* The pain, in their own voice. The emotional hook of the whole page —
   set in the accent serif so it reads as a person speaking, not body copy. */

/* Subgrid is what keeps the five cards aligned; where it is missing the
   cards still stack correctly, they just size independently. */
@supports not (grid-template-rows: subgrid) {

}

/* Belongs to the centred header block above it, not to the card row. */

/* ═══════════════════════════════════════════════════
   POLISH PASS — 2026-09-01
   ═══════════════════════════════════════════════════
   Findings from a full-page visual audit. Each rule below fixes
   something that was measurably weaker than the rest of the page. */
/* ——— Steps ————————————————————————————————————————————
   Was a hairline and two sizes of small text — the thinnest component
   on a page that otherwise has real weight. The plan is the section
   that removes risk, so it has to look as considered as the rest.
   Numerals earn their place here: these are ordered steps, and the
   order is the information. */
.step::before {
content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

/* ——— Testimonial cards ————————————————————————————————
   The quotes sat as bare text on a faded photograph and dissolved into
   it — the palest, weakest block on the page. The frosted treatment
   already used for cards over photography gives them a surface to sit
   on, and lets the picture behind stay legible instead of being
   scrimmed into nothing. */
/* ——— FAQ ——————————————————————————————————————————————
   Ten plain rows of 18px text with no affordance beyond a small plus.
   Larger targets, a warm hover, and a gold question when open. */
@media (hover: hover) {
  .faq-item summary:hover { color: var(--gold); }
}

.faq-item[open] summary { color: var(--gold); }

/* ——— Founder portraits ————————————————————————————————
   The two source photographs are different aspect ratios and different
   background temperatures (one neutral grey, one cool blue). The crop
   is equalised here; the colour is equalised in the files themselves.
   A hairline keeps them from floating on the white. */
/* ——— Credibility strip ————————————————————————————————
   Founder career history, not client logos — it should read as a quiet
   line of provenance, not a logo wall. Slightly more air, warmer rule. */
/* ——— Centred body copy ————————————————————————————————
   In the centred text sections the third tier (h2 → lede → copy) was
   set at --ink-faint on a 36em measure, which read as an afterthought
   trailing off. A tighter measure and one step more ink keeps it part
   of the argument. Left-aligned copy elsewhere is unaffected. */
.section-text .copy {
max-width: 32em;
  color: var(--ink-soft);
}

/* ——— Role card hover ——————————————————————————————————
   Every other card on the page answers the pointer; these did not.
   Transform and shadow only — nothing that triggers layout. */

/* ——— Browser surfaces ——————————————————————————————————————
   The parts nobody draws still ship with somebody's design, and by
   default it is the browser's. Caret, placeholder, scrollbar and the
   invalid state were all still stock. */
::placeholder {
color: var(--ink-faint);
  opacity: 1;
}

/* Page scrollbar, in the brand rather than in system grey. */
::-webkit-scrollbar {
width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
background: var(--gold-wash);
  border-radius: var(--radius-pill);
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* An invalid field has to say so before the browser bubble appears and
   after it dismisses. Bound to :user-invalid, not :invalid, so a field
   is never marked wrong before it has been filled in. */
.field input:user-invalid, .field textarea:user-invalid {
border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-wash);
}

.field input:user-invalid + .field-error, .field textarea:user-invalid + .field-error {
display: block;
}

.field-error {
display: none;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════
   V6 — THE PRODUCT, SHOWN
   ═══════════════════════════════════════════════════
   A software product with no picture of the software is a brand site.
   The conversation component below IS the interface: a real rendered
   exchange in the site's own type, not a screenshot and not a mock
   dashboard. It appears once in the hero, once large in "What it does",
   and compact inside every leader card, so the same object carries the
   page. */
/* ——— Hero: copy left, product right ——————————————————— */
.hero-grid {
position: relative;
  z-index: var(--z-content);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: 120px var(--rail) 72px;
}

.hero-product {
padding: 0;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
  align-self: end;
  margin-bottom: calc(-1 * (var(--hero-overlap) + 72px));
}

@media (max-width: 1000px) {
  .hero-grid {
  grid-template-columns: 1fr;
                                                      align-items: start;
                                                      gap: 40px;
                                                      padding: 104px var(--rail) 40px;
                                                      align-content: start;
  }

  .hero-product {
  padding: 0;
                                                      justify-content: flex-start;
                                                      align-self: auto;
                                                      margin-bottom: 0;
                                                      margin-top: -140px;
  }

  .hero-media {
  position: static;
                                                      inset: auto;
                                                      z-index: auto;
                                                      aspect-ratio: 4 / 5;
                                                      margin: 8px calc(-1 * var(--rail)) 0;
                                                      mask-image: linear-gradient(180deg, black 62%, transparent 100%);
                                                      -webkit-mask-image: linear-gradient(180deg, black 62%, transparent 100%);
  }

  .hero-media img {
  object-position: 78% 35%;
        transform: none;
  }

  .hero-grid::after { display: none; }

  .problem.section-tinted { padding-top: calc(var(--fade) + 8px); }

  .problem-grid {
  grid-template-columns: 1fr;
                                                      gap: 0;
                                                      min-height: 0;
                                                      align-items: start;
  }

  .problem-copy {
  grid-column: 1;
                                                      order: 1;
  }

  .problem-media {
  position: static;
                                                      inset: auto;
                                                      aspect-ratio: 4 / 3;
                                                      margin: 0 calc(-1 * var(--rail)) 8px;
                                                      mask-image: linear-gradient(180deg, black 55%, transparent 100%);
                                                      -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%);
                                                      mask-composite: add;
                                                      -webkit-mask-composite: source-over;
                                                      top: auto;
                                                      transform: none;
                                                      height: auto;
                                                      max-height: none;
  }

  .problem-media img { object-position: 0% 20%; }

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

  .problem { min-height: 0; }

  .problem-quote {
  order: 2;
                                                  max-width: none;
                                                  margin-top: 32px;
                                                  padding-bottom: 0;
                                                  margin-bottom: 0;
  }

  .closing-media img { transform: none; }

  .closing::after { display: none; }

}

/* ——— The conversation ——————————————————————————————— */
.chat {
width: 100%;
  max-width: 520px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.chat-head {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.chat-head span:last-child {
font-weight: 500;
  color: var(--ink-faint);
}

.chat-turn {
display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-q p {
font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

.chat-a {
background: linear-gradient(180deg, var(--tint-hi), var(--tint-lo));
  border-radius: 16px;
  padding: 14px 16px 14px;
}

.chat-a .chat-who { color: var(--gold); }

.chat-a p {
font-size: 0.9688rem;
  line-height: 1.55;
  color: var(--ink);
}

.chat-src {
list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.chat-src li {
border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--white);
  color: var(--ink-soft);
  font-weight: 500;
}

.chat-src li:first-child {
border: 0;
  padding: 0;
  background: none;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Compact variant inside the leader cards */

/* The page's one authored motion: the hero exchange happens in front of
   you. Question, then the answer, then what it checked. CSS-only so it
   runs without JS; removed entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .chat-anim .chat-q, .chat-anim .chat-a, .chat-anim .chat-src {
  opacity: 0;
                                                      transform: translateY(10px);
                                                      animation: chat-in 0.7s var(--ease) forwards;
  }

  .chat-anim .chat-q { animation-delay: 0.5s; }

  .chat-anim .chat-a { animation-delay: 1.4s; }

  .chat-anim .chat-src { animation-delay: 2.1s; }

  @keyframes chat-in {
    to {
    opacity: 1;
                                                                                                          transform: none;
    }
  }
}

/* ——— Works with ————————————————————————————————————— */
/* Brands Simple Icons does not carry (Salesforce, Slack, NetSuite, Excel)
   are set as restrained wordmarks at the same optical height, in the same
   ink, so the row reads as one set. */
/* ——— What it does: copy + big conversation ——————————— */
.split {
display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.split .section-text {
text-align: left;
  padding: 0;
  margin: 0;
  max-width: none;
}

.split .copy { margin-left: 0; }

.split .chat {
max-width: 560px;
  justify-self: end;
}

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

  .split .chat {
  justify-self: start;
                                                      max-width: none;
  }
}

/* ——— Chips (what a leader is connected to) ——————————— */
/* ——— What you get back: a ledger, not three cards ———————— */
.ledger {
margin-top: clamp(48px, 7vh, 80px);
  text-align: left;
  padding-inline: var(--rail);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.ledger-row {
display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 32px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}

.ledger-row:last-child { border-bottom: 1px solid var(--hairline); }

.ledger-kind {
font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.ledger-after {
  hanging-punctuation: first;
font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
}

@media (max-width: 760px) {
  .ledger-row {
  grid-template-columns: 1fr;
                                                      gap: 8px;
  }
}

/* ——— What's included ————————————————————————————————— */
/* Each integration is its mark plus its name, so the four brands without a
   mark sit in the same row as one set instead of as a different kind. */
/* ═══════════════════════════════════════════════════
   V7 — ONE IDEA PER SCREEN
   ═══════════════════════════════════════════════════
   Every section is a headline, one line, and one focal visual.
   Copy never sits on a photograph. The product is the picture. */
/* ——— Display type: tracking tightens as size grows ————————— */
/* ——— Hero on a clean ground ——————————————————————————— */
.hero {
min-height: clamp(640px, 100svh, 920px);
  display: grid;
  align-items: stretch;
  background: radial-gradient(60% 50% at 78% 45%, rgba(128, 98, 58, 0.10), transparent 70%),
    linear-gradient(180deg, var(--tint-hi) 0%, var(--bg) 100%);
  padding: 0;
  position: relative;
  z-index: 1;
}

.hero-copy {
max-width: 560px;
  align-self: center;
}

.hero-copy .lede { max-width: 24em; }

.hero-copy .cta-row { justify-content: flex-start; }

.hero-product .chat { max-width: 560px; }

@media (max-width: 1000px) {
  .hero-grid {
  grid-template-columns: 1fr;
                                                      gap: 40px;
                                                      padding: 104px var(--rail) 40px;
  }

  .hero-product { justify-content: flex-start; }

}

/* ——— Works with: a grid, never a ragged wrap ————————————— */
/* ——— "Eight places": the problem, drawn ————————————————— */
.scatter {
margin-top: clamp(48px, 7vh, 72px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 16px;
  padding-inline: var(--rail);
  overflow: visible;
}

.tile {
background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  --i: 0;
}

.tile-brand {
display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.tile-brand img {
height: 18px;
  width: auto;
  opacity: 0.85;
}

.tile-frag {
font-size: 0.875rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ——— A photograph, clean. Copy lives above it. ————————————— */
.photo {
max-width: min(var(--wide-max), calc(100% - 48px));
  margin: clamp(48px, 7vh, 80px) auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(165deg, var(--warm-hi), var(--warm-lo));
  box-shadow: var(--shadow-lg);
}

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

@media (max-width: 860px) {
  .photo { aspect-ratio: 4 / 5; }
}

/* ——— Feature list: three bold lines, nothing under them ————— */
/* ——— Leader cards: four rows ——————————————————————————— */

/* ——— What you get back: three statements ————————————————— */
.ledger-note {
grid-column: 2;
  font-size: 1rem;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 1fr; }

  .ledger-note { grid-column: 1; }
}

/* ——— Closing on a warm band ———————————————————————————— */
.closing {
margin-top: 0;
  padding: clamp(96px, 14vh, 160px) 0;
  background: linear-gradient(0deg, var(--bg) 0, rgba(251, 251, 253, 0) var(--fade)),
    linear-gradient(180deg, var(--tint-lo) 0, var(--warm-hi) 140px, var(--warm-lo) 100%);
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 92svh;
  display: grid;
  align-items: center;
}

/* ═══════════════════════════════════════════════════
   V8 — CRAFT
   ═══════════════════════════════════════════════════ */
/* ——— The tray. A machined frame around every object that should read as
   physical: the product card, the photographs, the founders. Two spread
   shadows, no markup, follows the element's own radius. Quiet enough to
   register as an edge, not as a second card. ——————————————————— */
.hero-product .chat, .split .chat, .photo, .team-photo {
box-shadow: 0 0 0 6px rgba(29, 29, 31, 0.028),
    0 0 0 7px rgba(29, 29, 31, 0.06),
    0 30px 70px -38px rgba(29, 29, 31, 0.35);
}

/* ——— Island CTA: the arrow lives in its own circle, flush right, and
   moves on hover. Nav pill stays text-only; it is chrome, not a moment. — */
.btn-arrow {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -6px -14px -6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.9375rem;
  line-height: 1;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.btn-large .btn-arrow {
width: 32px;
  height: 32px;
  margin: -8px -20px -8px 8px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover .btn-arrow {
  transform: translate(3px, -1px) scale(1.06);
                                                      background: rgba(255, 255, 255, 0.22);
  }
}

/* ——— The eight places arrive one at a time, because that is the point:
   they are separate. ——————————————————————————————————————— */
/* sequence index; each tile overrides inline */
.js .scatter .tile {
opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.js .scatter.in .tile {
opacity: 1;
  transform: none;
}

/* The one that is not a system. Paper, not software. */
.tile-paper {
background: linear-gradient(180deg, var(--warm-hi), var(--warm-lo));
  border-color: rgba(128, 98, 58, 0.22);
}

.tile-paper .tile-frag {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

/* ——— Mobile menu links arrive in sequence ————————————————————— */
.menu-open .mobile-menu a {
opacity: 1;
  transform: none;
}

.menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.06s; }

.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.11s; }

.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.16s; }

.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.21s; }

.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.26s; }

.menu-open .mobile-menu a:nth-child(6) { transition-delay: 0.31s; }

/* ——— Three bold lines, separated by breath and a hairline ——————— */
/* Reduced motion for the menu, stated last and at matching specificity so
   it beats the open-state rule above. Before this, `.menu-open .mobile-menu`
   (0,2,0) outranked an earlier `.mobile-menu { transition: none }` (0,1,0),
   so people who asked for no motion still got the fade and the delayed
   hide. Without motion the menu simply appears and simply goes. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .menu-open .mobile-menu, .mobile-menu a, .menu-open .mobile-menu a {
  transition: none;
  }

  .mobile-menu { transform: none; }
}

/* The menu's primary button had ink text on an ink pill: `.mobile-menu a`
   (0,1,1) outranked `.btn` (0,1,0) for colour, so the label vanished.
   Caught in the first screenshot of the menu actually open. */
.mobile-menu a.btn { color: var(--on-image); }

.mobile-menu a.btn:hover { color: var(--on-image); }

/* A 44pt target belongs to a standalone link, not to one inside a paragraph,
   where inline-block + min-height inflated the line box by 40px. */
.cta-row .text-link, .section-link .text-link {
display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* A standalone link that can wrap keeps its arrow in the text flow, after the
   last word, instead of floating beside the whole wrapped block. */
.section-link .text-link {
  display: inline;
  min-height: 0;
  padding-block: 12px;
}

/* The copy says fragmented; the grid said organised. The tiles now sit on a
   12-column field at different widths, a few nudged off the line, one
   tipped, one running off the edge. On phones it settles into two clean
   columns: the point is made by then. */
.tile:nth-child(1) { grid-column: 1 / span 3; }

.tile:nth-child(2) {
grid-column: 4 / span 3;
  transform: translateY(10px);
}

.tile:nth-child(3) {
grid-column: 1 / span 4;
  transform: rotate(-1deg);
}

.tile:nth-child(4) {
grid-column: 5 / span 2;
  transform: translateY(-4px);
}

.tile:nth-child(5) {
grid-column: 1 / span 3;
  transform: rotate(1.2deg) translateY(6px);
}

.tile:nth-child(6) { grid-column: 4 / span 3; }

.tile:nth-child(7) {
grid-column: 1 / span 3;
  transform: translateY(6px);
}

.tile:nth-child(8) {
grid-column: 4 / span 3;
  transform: translateX(14px) rotate(0.8deg);
}

@media (prefers-reduced-motion: no-preference) {
  .js .scatter.in .tile:nth-child(2) { transform: translateY(10px); }

  .js .scatter.in .tile:nth-child(3) { transform: rotate(-1deg); }

  .js .scatter.in .tile:nth-child(4) { transform: translateY(-4px); }

  .js .scatter.in .tile:nth-child(5) { transform: rotate(1.2deg) translateY(6px); }

  .js .scatter.in .tile:nth-child(7) { transform: translateY(6px); }

  .js .scatter.in .tile:nth-child(8) { transform: translateX(14px) rotate(0.8deg); }
}

@media (max-width: 760px) {
  .scatter {
  grid-template-columns: 1fr 1fr;
                                                      gap: 12px;
  }

  .scatter .tile, .js .scatter.in .tile {
  grid-column: auto;
                                                      transform: none;
  }
}

.included-title {
margin-top: clamp(48px, 7vh, 72px);
  padding-inline: var(--rail);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  max-width: calc(var(--wide-max) + 2 * var(--rail));
  margin-inline: auto;
}

.fit-grid.on-home { margin-top: clamp(40px, 6vh, 64px); }

@media (max-width: 700px) {
  .hero-product .chat-src { display: none; }
}

/* The card row fades at whichever edge still has more to show. */

.faq-item summary h3 {
font: inherit;
  margin: 0;
}

@media print {
  .js .reveal, .js .reveal:not(.in), .js .reveal-img, .js .reveal-img:not(.in) {
  opacity: 1;
                                                      transform: none;
                                                      filter: none;
  }

  .js .scatter .tile {
  opacity: 1;
                                                      transform: none;
  }

  .chat-anim .chat-q, .chat-anim .chat-a, .chat-anim .chat-src {
  opacity: 1;
                                                      transform: none;
                                                      animation: none;
  }

  .nav, .mobile-menu, .btn, .stage-nav, .faces, .skip-link { display: none; }

  .faq-item p { display: block; }

  .tile { transform: none; }
}

.nowrap { white-space: nowrap; }

/* Mobile overrides for rules declared late in the file. A max-width block
   placed BEFORE a base rule of equal specificity loses to it; these sit last. */
@media (max-width: 760px) {
  .scatter { grid-template-columns: repeat(2, 1fr); }

  .faq-list { grid-template-columns: 1fr; }
}

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

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

@media (prefers-reduced-transparency: reduce) {
  .photo-steps li {
  background: var(--white);
                                                      backdrop-filter: none;
                                                      -webkit-backdrop-filter: none;
  }
}

@media (max-width: 860px) {
  .photo-steps {
  position: static;
                                                      grid-template-columns: 1fr;
                                                      gap: 10px;
                                                      margin-top: 12px;
  }

  .photo-steps li {
  background: var(--white);
                                                      border: 1px solid var(--hairline);
                                                      backdrop-filter: none;
                                                      -webkit-backdrop-filter: none;
                                                      box-shadow: none;
  }
}

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

  .included-lead { grid-column: span 2; }

}

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

  .included-lead { grid-column: auto; }
}

@media (max-width: 1000px) {
  .closing {
  min-height: 0;
                                                      padding-top: var(--fade);
  }

  .closing-grid {
  grid-template-columns: 1fr;
                                                      gap: 0;
  }

  .closing .section-text { grid-column: 1; }

  .closing-media {
  position: static;
                                            inset: auto;
                                            aspect-ratio: 4 / 3;
                                            margin: 0 calc(-1 * var(--rail)) 24px;
                                            mask-image: linear-gradient(180deg, black 55%, transparent 100%);
                                            -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%);
                                            mask-composite: add;
                                            -webkit-mask-composite: source-over;
  }

}

@media (max-width: 860px) {
  .compare { aspect-ratio: 4 / 3; }

  .compare-copy { grid-template-columns: 1fr; }
}

/* Wide screens: the hero (and the nav that must align with it) open past the
   reading column, so the claim and the card use the room a large display gives. */
@media (min-width: 1441px) {
  :root { --rail: clamp(160px, 9vw, 240px); }

  .nav-inner { max-width: none; }

  .section-text { max-width: calc(1040px + 2 * var(--rail)); }

  .hero-copy { max-width: 620px; }

  .hero-who { max-width: 620px; }

  .problem-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }

  .problem-media {
    transform: none;
    max-height: 760px;
  }

  .closing-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }

  .closing-media img {
  transform: scale(1.26);
                                    transform-origin: 0% 6%;
  }

  .problem-media img {
    transform: none;
    object-fit: contain;
    object-position: 0 0;
  }

  .photo { aspect-ratio: 21 / 9; }

  .photo-stage { max-width: calc(100% - 2 * var(--rail)); }
}

@media (max-width: 860px) {
  .compare-btn {
  font-size: 0.8125rem;
          padding: 0 12px;
          gap: 6px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .compare-btn-before {
  background: var(--white);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
  }
}

/* ——— Credentials strip: one shrinking line down to phones, then two rows ——— */
@media (max-width: 700px) {
  .cred-list.cred-logos {
    flex-wrap: wrap;
    gap: 22px;
    row-gap: 18px;
  }

  .cred-list.cred-logos li { flex: 0 0 auto; }
}

@media (hover: none) {
  .stage-nav { display: none; }
}

@media (max-width: 700px) {
  .stage {
    gap: 16px;
    padding-inline: 24px;
    scroll-padding-inline-start: 24px;
  }

  .slide {
    flex-basis: 100%;
    grid-template-columns: 1fr;
  }

  .slide-photo { aspect-ratio: 1; }

  .slide-photo img { object-position: 50% 22%; }

  .slide-copy { padding: 24px 24px 28px; }

  .stage-foot { padding-inline: 16px; }

  .faces { gap: 12px; }

  .faces img {
    width: 46px;
    height: 46px;
  }

  .faces button {
    gap: 8px;
    font-size: 0.75rem;
  }
}

@media print {
  .stage {
    overflow: visible;
    display: block;
  }

  .slide {
    page-break-inside: avoid;
    margin-bottom: 24px;
  }
}

/* ——— Three steps: the wash is a hint on phones, never a face behind the copy ——— */
@media (max-width: 700px) {
  .how-media {
    height: 62%;
    opacity: 0.16;
    mask-image: radial-gradient(ellipse 62% 52% at 62% 26%, black 0, black 26%, transparent 100%), linear-gradient(180deg, transparent 0, black 12%, black 58%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 62% 52% at 62% 26%, black 0, black 26%, transparent 100%), linear-gradient(180deg, transparent 0, black 12%, black 58%, transparent 78%);
  }

  .how-media img {
    object-position: 58% 30%;
    transform: none;
  }
}

/* The trio collapses like the five-up grid it borrows from. */
@media (max-width: 1000px) {
  .included-grid.is-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (max-width: 1000px) {
  .questions, .questions.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .questions, .questions.is-five { grid-template-columns: 1fr; }
}

/* Below 1000px the card no longer straddles, so the next section needs no clearance. */
@media (max-width: 1000px) {
  .hero + .section { padding-top: clamp(72px, 10vh, 110px); }
}

/* Tablets and phones: V1's tall 4:5 crop suited one photo with cards stacked
   under it; V2's photographs are wide groups of people, so they stay landscape. */
@media (max-width: 860px) {
  .photo { aspect-ratio: 4 / 3; }
}

/* A set of three never splits two-and-one: it stays in a row until the phone
   stacks it. */
@media (max-width: 1000px) {
  .questions:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .questions:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; }
}

/* The nav keeps its menu button reachable on the narrowest phones. */
@media (max-width: 420px) {
  .nav-cta-full { display: none; }

  .nav-cta-short { display: inline; }
}

@media (max-width: 340px) {
  .btn-nav { display: none; }
}

@media (max-width: 1000px) {
  .cred-list.cred-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cred-list.cred-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 14px;
  }
}