/* Builders’ Quorum. Light, clean, one accent. */

/* Fonts are self-hosted (Latin only), so text doesn't wait on another domain.
   Inter Tight is one variable file for 400 and 500. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/inter-tight.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/urbanist-800.woff2") format("woff2"); }

:root {
  /* Brand. Change the accent here and nowhere else. */
  --accent: #E0482B;
  /* Darker shade of the accent for small text, so it passes WCAG AA on white. */
  --accent-ink: color-mix(in srgb, var(--accent) 82%, black);
  --accent-wash: color-mix(in srgb, var(--accent) 20%, transparent);
  --ink: #15151A;
  --ink-soft: #55555E;
  --graphite: #45454D;
  --line: #E6E6E9;
  --paper: #FFFFFF;
  --wash: #F7F5F0;
  --dot: #E2DFD7;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 74rem;
  --gutter: 1rem;
  --radius: 12px;
  --header-h: 4rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 1rem/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
p { text-wrap: pretty; }

h1, h2, .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.4rem + 6vw, 6.25rem); }
h2 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); max-width: 18ch; }
h1 em, h2 em { font-style: italic; }
h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; text-wrap: balance; }
.serif-h3 { font: 400 clamp(1.625rem, 1.4rem + 0.9vw, 2rem)/1.1 var(--serif); letter-spacing: -0.01em; }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  z-index: 40;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
}
.skip-link:focus { top: 0.75rem; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow > * { max-width: 46rem; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.375rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn-arrow::after, .link-arrow::after { content: "\2192"; margin-left: 0.5rem; transition: transform 0.25s var(--ease); }
.btn-arrow:hover::after, .link-arrow:hover::after { transform: translateX(4px); }

.link-arrow { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 0.125rem; transition: border-color 0.2s; }
.link-arrow:hover { border-color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s;
  view-transition-name: site-header;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font: 800 1.3125rem/1 "Urbanist", var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav-toggle {
  display: none;
  padding: 0.5rem 0.875rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
.site-nav a:not(.btn) { position: relative; text-decoration: none; color: var(--ink-soft); transition: color 0.2s; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { color: var(--ink); }
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* On small screens with JS, the nav collapses behind the toggle. */
@media (max-width: 55.99rem) {
  .js .nav-toggle { display: block; }
  .js .site-nav { display: none; flex-basis: 100%; padding-bottom: 1.25rem; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.875rem; padding-block: 0.5rem; }
  .site-nav a:not(.btn) { font: 400 1.75rem/1.1 var(--serif); color: var(--ink); }
  .site-nav a:not(.btn)::after { display: none; }
}

/* Reading progress: a hairline of accent under the header, where supported. */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--accent);
      transform-origin: left;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Heroes */

.hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(4rem, 9vw, 6.5rem); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 2rem; } }
.hero h1 { max-width: 13ch; }
.page-hero h1 { font-size: clamp(2.625rem, 1.5rem + 4.6vw, 5.25rem); max-width: 14ch; }

.lede {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.note { margin-top: 1.5rem; font-size: 0.875rem; color: var(--ink-soft); }
.note::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.5rem; vertical-align: 0.15em; background: var(--accent); border-radius: 50%; }

.hero-art { max-width: 30rem; width: 100%; justify-self: center; }

/* Sections */

.section { padding-block: clamp(4.5rem, 10vw, 7.5rem); border-top: 1px solid var(--line); }
.section-wash { background: var(--wash); border-top: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--accent); }

.intro { max-width: 38rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--ink-soft); }

.section-head { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 56rem) { .section-head.with-link { grid-template-columns: 1fr auto; } }

.subsection { margin-top: clamp(3.5rem, 8vw, 5.5rem); }

/* Splash: a highlighter stroke behind sub-headings, drawn in on reveal. */
.mark {
  background: linear-gradient(var(--accent-wash), var(--accent-wash)) no-repeat 0 88% / 100% 0.38em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.08em;
}

/* Grids */

.grid { display: grid; gap: 2rem; margin-top: 2.75rem; }
@media (min-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.points li, .cards li, .journey li, .stack li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}
.points p, .cards p, .journey p, .stack p { margin-top: 0.5rem; color: var(--ink-soft); }
.cards h3, .stack h3 { font: 400 1.75rem/1.1 var(--serif); }
.cards p { margin-top: 0.75rem; }
.stack { display: grid; gap: 2.25rem; }

/* Doors: one card per audience on the home page */

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.door:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(21 21 26 / 0.35); }
.door .icon { width: 4rem; height: 4rem; margin-bottom: 0.75rem; transition: transform 0.5s var(--ease); }
.door:hover .icon { transform: rotate(-6deg) scale(1.06); }
.door h3 { font: 400 1.875rem/1.05 var(--serif); }
.door p { color: var(--ink-soft); }
.door .link-arrow { margin-top: auto; padding-top: 1rem; align-self: flex-start; border: 0; color: var(--accent-ink); }
.door:hover .link-arrow::after { transform: translateX(4px); }

/* Exposure -> BQ -> venture */

.flow-art { margin-top: 3rem; }
.flow { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 48rem) { .flow { grid-template-columns: 1fr 1.3fr 1fr; } }
.flow li { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); }
.flow li.is-bq { position: relative; overflow: hidden; background: var(--wash); border-color: transparent; color: var(--ink); }
.flow li.is-bq::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform-origin: left; }
.flow-label { display: block; margin-bottom: 0.5rem; font: 400 1.625rem/1.1 var(--serif); color: var(--ink); }

/* What's stopping you: tabs */

.stuck { display: grid; gap: 1.5rem; margin-top: 2.75rem; }
@media (min-width: 56rem) { .stuck { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.stuck-list { display: grid; border-top: 1px solid var(--line); }
.stuck-list button {
  position: relative;
  padding: 0.9375rem 2rem 0.9375rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, padding 0.3s var(--ease);
}
.stuck-list button:hover { color: var(--ink); }
.stuck-list button[aria-selected="true"] { color: var(--ink); padding-left: 1.25rem; }
.stuck-list button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.stuck-list button[aria-selected="true"]::before { transform: scale(1); }

.stuck-panels [role="tabpanel"] { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--wash); border-radius: var(--radius); }
.stuck-panels [role="tabpanel"] + [role="tabpanel"] { margin-top: 1rem; }
.stuck-panels p { color: var(--ink-soft); }
.stuck-panels .answer { margin-bottom: 1rem; font: 400 clamp(1.75rem, 1.3rem + 2vw, 2.625rem)/1.08 var(--serif); color: var(--ink); text-wrap: balance; }
.source { margin-top: 1rem; font-size: 0.8125rem; }
.source a { color: var(--ink-soft); }
@media (min-width: 56rem) {
  .stuck-panels { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}

/* Sprint stages */

.stages-art { margin-top: 3rem; height: 2.5rem; }
.stages { display: grid; gap: 2rem; margin-top: 1rem; counter-reset: stage; }
@media (min-width: 40rem) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stages { grid-template-columns: repeat(4, 1fr); } }
.stages li { counter-increment: stage; }
.stages li::before { content: "0" counter(stage); display: block; font-size: 0.8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stages h3 { margin: 0.25rem 0 0.75rem; font: 400 2.25rem/1 var(--serif); }
.stages p { color: var(--ink-soft); }
.stages .makes { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.stages .makes span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }

/* Tracks and sectors */

.track { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--wash); border-radius: var(--radius); }
.track-head { display: flex; align-items: center; gap: 1rem; }
.track-head .icon { width: 3.25rem; height: 3.25rem; flex: none; }
.track h3 { font: 400 2rem/1.05 var(--serif); }
.track > p { margin-top: 1rem; color: var(--ink-soft); }
.track .example { padding-top: 1rem; margin-top: 1.25rem; border-top: 1px solid var(--line); font: 400 1.375rem/1.25 var(--serif); color: var(--ink); }
.example span { display: block; margin-bottom: 0.375rem; font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

.tag { display: inline-block; padding: 0.25rem 0.625rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.8125rem; line-height: 1.4; }
.tag-accent { color: var(--accent-ink); border-color: currentColor; }

.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .sectors { grid-template-columns: repeat(6, 1fr); } }
.sectors li { display: grid; justify-items: center; gap: 0.5rem; text-align: center; font-size: 0.875rem; color: var(--ink-soft); }
.sectors .icon { width: 3rem; height: 3rem; }

/* Outcomes */

.outcomes { margin-top: 2.75rem; border-top: 1px solid var(--ink); }
.outcomes li { display: grid; gap: 0.25rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .outcomes li { grid-template-columns: 1fr 1.4fr; align-items: baseline; } }
.outcomes strong { font: 400 1.5rem/1.15 var(--serif); }
.outcomes span { color: var(--ink-soft); }

/* Journey */

.step { font-size: 0.8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.journey h3 { margin-top: 0.5rem; font: 400 1.875rem/1.1 var(--serif); }
.journey h3 .tag { vertical-align: middle; margin-left: 0.25rem; font: 500 0.75rem/1.4 var(--sans); }
.journey li.is-selective { border-top: 3px solid var(--accent); padding-top: calc(1.25rem - 2px); }
.journey p a { color: var(--accent-ink); }

/* Dot fields thin out at each stage. Illustrative only. */
.dots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2.25rem; align-content: flex-start; margin-bottom: 1.25rem; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.25; }
.journey li.is-selective .dots i { opacity: 0.8; }
.journey li:last-child .dots i { width: 10px; height: 10px; background: var(--accent); opacity: 1; }

/* Ink band: BQ Fellows */

.section-ink {
  --ink-soft: #A9A9B2;
  --line: #2C2C33;
  --graphite: #C9C9D0;
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
/* Lighter accent for small text on ink, to keep AA contrast. */
.section-ink .eyebrow, .section-ink .link-arrow { color: color-mix(in srgb, var(--accent) 75%, white); }
.section-ink .mark { --accent-wash: color-mix(in srgb, var(--accent) 55%, transparent); }
.section-ink .ticks li { border-color: var(--line); }
.section-ink .link-arrow { border-color: var(--line); }
.fellows { gap: 3rem; }
.fellows-note {
  max-width: 40rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.2 var(--serif);
  text-wrap: balance;
}

/* Lists */

.list-title { margin-bottom: 1rem; font: 400 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.15 var(--serif); }
.list-title:not(:first-child) { margin-top: 2.5rem; }
.ticks li { position: relative; padding: 0.75rem 0 0.75rem 1.5rem; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 0.5rem; height: 0.5rem; background: var(--accent); }

.split { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.numbered { display: grid; gap: 0; margin-top: 2.75rem; border-top: 1px solid var(--ink); counter-reset: n; }
.numbered li { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); counter-increment: n; }
@media (min-width: 48rem) { .numbered li { grid-template-columns: 4rem 16rem 1fr; } }
.numbered li::before { content: "0" counter(n); font: 400 1.75rem/1 var(--serif); color: var(--accent-ink); }
.numbered strong { font: 400 1.5rem/1.15 var(--serif); }
.numbered span { grid-column: 2; color: var(--ink-soft); }
@media (min-width: 48rem) { .numbered span { grid-column: 3; } }

.callout { max-width: 46rem; margin-top: 2.75rem; padding: 1.5rem 1.75rem; border-left: 3px solid var(--accent); background: var(--wash); border-radius: 0 var(--radius) var(--radius) 0; }
.callout p + p { margin-top: 0.75rem; }
.callout p:first-child { font: 400 1.5rem/1.2 var(--serif); }
.callout p:not(:first-child) { color: var(--ink-soft); }

/* Backers */

.logo-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 1.5rem; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 48rem) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
.logo-wall li { display: grid; place-items: center; min-height: 7rem; padding: 1.5rem; background: var(--paper); }
.logo-wall img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.logo-wall li:hover img { filter: none; opacity: 1; }
.people li { display: grid; gap: 0.25rem; }
.people .avatar { width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--wash); overflow: hidden; }
.people span:last-child { color: var(--ink-soft); font-size: 0.9375rem; }
[data-placeholder] { color: var(--ink-soft); font-size: 0.875rem; }
.logo-wall [data-placeholder] { outline: 1px dashed #CFCFD4; outline-offset: -0.75rem; }

/* Closing band */

.cta-band { display: grid; gap: 2.5rem; padding: clamp(2rem, 6vw, 4rem); background: var(--wash); border-radius: calc(var(--radius) * 1.5); }
@media (min-width: 56rem) { .cta-band { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.cta-band h2 { max-width: 14ch; }
.cta-band .actions { margin-top: 1.75rem; }
.brief-card { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.brief-card h3 { margin: 0.875rem 0 0.5rem; font: 400 1.75rem/1.1 var(--serif); }
.brief-card p { color: var(--ink-soft); font-size: 0.9375rem; }
.brief-card .link-arrow { display: inline-block; margin-top: 1rem; }

/* FAQ */

.faq { margin-top: 2.75rem; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; font-size: 1.0625rem; cursor: pointer; list-style: none; transition: color 0.2s; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent-ink); font-size: 1.375rem; line-height: 1.1; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; max-width: 40rem; color: var(--ink-soft); }

/* Form */

.apply-grid { display: grid; gap: 3rem; margin-top: 2.75rem; }
@media (min-width: 60rem) { .apply-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.apply-aside { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .apply-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.panel { padding: clamp(1.5rem, 5vw, 3rem); background: var(--wash); border-radius: var(--radius); }
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.375rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

label, .label { font-size: 0.9375rem; }
.optional { color: var(--ink-soft); }

input, select, textarea {
  width: 100%;
  padding: 0.8125rem 0.875rem;
  border: 1px solid #CFCFD4;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:hover, select:hover, textarea:hover { border-color: #A9A9B2; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.form .btn { justify-self: start; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.role-fields { display: grid; gap: 1.25rem; padding-block: 1.25rem; border-block: 1px solid #E2E2DE; }
.role-fields[hidden] { display: none; }
.legend { font: 400 1.625rem/1.1 var(--serif); }
.checks { display: grid; gap: 0.5rem 1rem; }
@media (min-width: 40rem) { .checks { grid-template-columns: 1fr 1fr; } }
.checks label, .check { display: flex; align-items: center; gap: 0.625rem; color: var(--ink-soft); cursor: pointer; }
.checks input, .check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); flex: none; }
.check { color: var(--ink); }
.form-status:empty { display: none; }
.form-status { padding: 1rem 1.25rem; background: var(--paper); border-left: 3px solid var(--accent); }

/* Footer */

.site-footer { padding-block: 4rem 2rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.footer-grid p { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.9375rem; }
.footer-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  max-width: none;
  margin-bottom: 0.875rem;
  font: 500 0.75rem/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-title .tag { letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
.footer-links { display: grid; gap: 0.5rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--accent-ink); }
.footer-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-soft); }

/* Pencil sketches. Every stroke has pathLength="1" so it can draw itself in. */

.sketch { display: block; width: 100%; height: auto; overflow: visible; }
.sketch > g { filter: url(#pencil); }
.sketch :is(path, circle, rect, line, ellipse) {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sketch .faint { stroke-opacity: 0.35; stroke-width: 1.1; }
.sketch .acc { stroke: var(--accent); stroke-width: 2.2; }
.icon :is(path, circle) { stroke-width: 1.8; }

.scribble { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.32em; overflow: visible; }
.scribble path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

/* Hero headline: words rise in from a mask. */
.headline .w { display: inline-block; overflow: hidden; padding: 0 0.06em 0.12em 0; margin-bottom: -0.12em; vertical-align: bottom; }
.headline .w > * { display: inline-block; }
.headline .w-open { overflow: visible; }
.headline em { position: relative; color: var(--accent); }
.headline .w:last-child { margin-left: -0.1em; }

/* Motion. Everything below is skipped for people who prefer reduced motion,
   and content stays visible if JS doesn't run. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  html { scroll-behavior: smooth; }

  .js .site-header:not(.is-scrolled) { border-bottom-color: transparent; }

  .headline .w > * { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
  .headline .w-open > * { animation-name: fade-up; }
  .hero-rest { animation: fade-up 0.9s ease both 0.7s; }

  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal .mark { background-size: 0% 0.38em; transition: background-size 1s var(--ease) 0.35s; }
  .js .reveal.is-in .mark { background-size: 100% 0.38em; }

  .js .flow li.is-bq::before { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.5s; }
  .js .flow li.is-bq.is-in::before { transform: scaleX(1); }

  .js .dots i { transform: scale(0); transition: transform 0.6s var(--ease); transition-delay: calc(var(--d) * 30ms + 300ms); }
  .js .is-in .dots i { transform: scale(1); }

  .stuck-panels [role="tabpanel"]:not([hidden]) { animation: fade-up 0.45s ease both; }

  /* Sketches draw stroke by stroke, like a pencil on paper. Strokes are matched by tag,
     not by [pathLength]: Chrome doesn't restyle camelCase SVG attribute selectors
     when an ancestor's class changes. */
  .draw :is(path, circle, rect, line, ellipse) {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset var(--dur, 0.9s) cubic-bezier(0.5, 0.1, 0.3, 1), opacity 0.01s;
    transition-delay: calc(var(--i, 0) * var(--step, 45ms) + var(--start, 80ms));
  }
  .draw.is-in :is(path, circle, rect, line, ellipse) { stroke-dashoffset: 0; opacity: 1; }
  .icon.draw { --dur: 0.7s; --step: 60ms; }
  .scribble.draw { --dur: 0.8s; --start: 1100ms; }
}

@keyframes rise { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

/* Small fixes for tagged cards and the apply page. */
.cards .tag + h3 { margin-top: 0.875rem; }
.apply-hero { padding-bottom: clamp(4rem, 8vw, 6rem); }
.apply-hero h1 { max-width: none; }
.brief-card .tag + h3 { margin-top: 0.875rem; }
.section-wash .track { background: var(--paper); }
@media (max-width: 59.99rem) {
  .hero-art { max-width: 19rem; justify-self: start; }
  .hero-grid { gap: 2rem; }
}

/* Living sketches: once drawn, parts of each sketch keep moving. Moving parts use
   transform-box so they rotate and bob around their own centre. */

.sketch :is(.bob, .float, .sway, .wave, .wiggle, .flicker, .write, .twinkle, .pulse) { transform-box: fill-box; transform-origin: center; }
.sketch .sway { transform-origin: bottom center; }
.sketch .wave { transform-origin: left center; }
.sketch .mover { fill: var(--accent); stroke: none; }
.sketch .mover.ink { fill: var(--graphite); }

@media (prefers-reduced-motion: reduce) {
  .sketch .mover { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Line boil: the pencil texture shifts a few times a second, like stop-motion. */
  .hero-art .sketch > g { animation: boil 0.5s steps(1) infinite; }

  .sketch .bob { animation: bob 3.2s ease-in-out infinite; }
  .sketch .float { animation: float 4s ease-in-out infinite; }
  .sketch .sway { animation: sway 4.5s ease-in-out infinite; }
  .sketch .wave { animation: wave 1.8s ease-in-out infinite; }
  .sketch .wiggle { animation: wiggle 3.5s ease-in-out infinite; }
  .sketch .flicker { animation: flicker 0.35s ease-in-out infinite alternate; }
  .sketch .write { animation: write 2.6s ease-in-out infinite; }
  .sketch .twinkle { animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--tw, 0s); }
  .sketch .pulse { animation: twinkle 2s ease-in-out infinite; animation-delay: var(--tw, 0s); }
}

@keyframes boil {
  0% { filter: url(#pencil); }
  33% { filter: url(#pencil-2); }
  66% { filter: url(#pencil-3); }
}
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-3px, -7px) rotate(-3deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(0.92); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(0deg); } }
@keyframes flicker { from { transform: scaleY(0.8); } to { transform: scaleY(1.15); } }
@keyframes write { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-8px, 4px) rotate(-2deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }

/* What you get */
.gets li { display: grid; align-content: start; gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.gets .icon { width: 3.25rem; height: 3.25rem; margin-bottom: 0.5rem; }
.gets h3 { font: 400 1.75rem/1.1 var(--serif); }
.gets p { color: var(--ink-soft); }

/* Labels under the exposure-to-venture sketch */
.flow-captions { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.flow-captions span:nth-child(2) { text-align: center; color: var(--ink); }
.flow-captions span:last-child { text-align: right; color: var(--accent-ink); }


/* ------------------------------------------------------------------
   Layout v2: editorial rail, bigger type contrast, more air.
   ------------------------------------------------------------------ */

.section { padding-block: clamp(5rem, 11vw, 9rem); }
h2 { font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4.5rem); }
.intro { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; max-width: 36rem; }
.eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; }

/* Section numbers: every section with an eyebrow gets 01, 02, 03... */
main { counter-reset: sec; }
.section > .wrap > .eyebrow { counter-increment: sec; }

/* On wide screens the eyebrow moves into a sticky left rail with a large number,
   and the content sits in a wide right column. */
@media (min-width: 64rem) {
  .section > .wrap {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: clamp(3rem, 5vw, 6rem);
  }
  .section > .wrap > * { grid-column: 2; }
  .section > .wrap > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    display: block;
    padding-top: 1rem;
    border-top: 1px solid var(--ink);
  }
  .section > .wrap > .eyebrow::before {
    content: counter(sec, decimal-leading-zero);
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
    background: none;
    font: 400 3.25rem/1 var(--serif);
    letter-spacing: -0.02em;
    color: var(--accent);
  }
  .section-ink > .wrap > .eyebrow { border-color: var(--line); }
  .section > .wrap > .cta-band { grid-column: 1 / -1; }

  /* Four-up grids get cramped in the right column, so they go two-up. */
  .section > .wrap .grid-4:not(.journey) { grid-template-columns: repeat(2, 1fr); }
}

/* Hero: taller, with a faint dot grid like sketchbook paper. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
@media (min-width: 60rem) {
  .hero:not(.apply-hero) { min-height: calc(92svh - var(--header-h)); display: grid; align-items: center; }
}
.hero h1 { font-size: clamp(3rem, 1.2rem + 7vw, 7.5rem); letter-spacing: -0.025em; }
.page-hero h1 { font-size: clamp(2.75rem, 1.4rem + 5vw, 6rem); }

/* Ticker of sectors and formats under the home hero. */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); }
.ticker-track { display: flex; width: max-content; }
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.125rem 1.25rem;
  font: 400 clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem)/1 var(--serif);
  white-space: nowrap;
}
.ticker-track span::after { content: ""; width: 0.45rem; height: 0.45rem; background: var(--accent); }

/* Statement: the positioning line, set large, lit word by word as you scroll. */
.statement { padding-block: clamp(6rem, 14vw, 11rem); }
.statement-text {
  max-width: 22ch;
  margin-inline: auto;
  font: 400 clamp(2.125rem, 1.2rem + 3.6vw, 4.5rem)/1.08 var(--serif);
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
.statement-text em { color: var(--accent); }
.statement-live .word { color: #CFCDC6; transition: color 0.35s ease; }
.statement-live .word.lit { color: var(--ink); }
.statement-live em .word.lit { color: var(--accent); }
.statement-by { margin-top: 2.5rem; text-align: center; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* Doors: calmer, taller cards. */
.doors { gap: 1.25rem; }
.door { min-height: 17rem; padding: clamp(1.75rem, 3vw, 2.5rem); border-color: var(--line); }
.door h3 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.625rem); }
.door:hover { background: var(--wash); border-color: var(--wash); box-shadow: none; transform: translateY(-3px); }

/* More air between items in lists and grids. */
.grid { row-gap: clamp(2.5rem, 5vw, 3.75rem); }
.gets h3, .cards h3, .stack h3 { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); }
.numbered li { padding-block: 1.75rem; }
.outcomes li { padding-block: 1.5rem; }

/* Footer: a large wordmark closes every page. */
.footer-mark {
  margin-top: clamp(3rem, 7vw, 5rem);
  font: 800 clamp(2.25rem, 0.5rem + 8.2vw, 8.5rem)/0.9 "Urbanist", var(--sans);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink);
  user-select: none;
}
.footer-mark span { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------
   Refinement pass: quieter, sharper, more exclusive.
   Square corners, hairlines, warm paper, grain, the accent used sparingly,
   small tracked capitals against very large serif type, and slower motion.
   ------------------------------------------------------------------ */

:root {
  --paper: #FBFAF7;
  --wash: #F3F1EB;
  --line: #E4E1DA;
  --ink-soft: #5E5D63;
  --radius: 0px;
}

body { background: var(--paper); }

/* Paper grain, very faint. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  /* Ink noise with its own alpha, so no blend mode: a blended full-screen layer
     made every scroll frame repaint the whole page. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.1 -1 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero::before { display: none; }

/* Buttons: rectangular, small tracked capitals. */
.btn { border-radius: 0; padding: 1.0625rem 1.625rem; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.btn-small { padding: 0.625rem 1.125rem; font-size: 0.75rem; }
.site-nav .btn-primary { background: transparent; color: var(--ink); }
.site-nav .btn-primary:hover, .site-nav .btn-primary[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-toggle { border-radius: 0; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

@media (min-width: 56rem) {
  .site-nav a:not(.btn) { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
}

.site-header { background: rgb(251 250 247 / 0.86); }

/* Tags, inputs and panels lose their rounding too. */
.tag { border-radius: 0; padding: 0.25rem 0.5rem; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
input, select, textarea { border-radius: 0; border-color: #D6D3CB; background: #fff; }
.cta-band, .brief-card, .panel, .track, .callout, .stuck-panels [role="tabpanel"] { border-radius: 0; }

/* The accent, used sparingly. */
.eyebrow { color: var(--ink-soft); }
.section > .wrap > .eyebrow::before { color: var(--ink); font-style: italic; }
.numbered li::before { color: var(--ink-soft); font-style: italic; }
.stages .makes span, .door .link-arrow { color: var(--ink); }
.ticks li::before { top: 1.45rem; width: 0.625rem; height: 1px; background: var(--ink); }

/* Sub-heading underline: a single accent hairline instead of a highlighter. */
.mark { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 1px; padding: 0 0 0.1em; }
.section-ink .mark { background-image: linear-gradient(var(--accent), var(--accent)); }

/* Hero: an invitation line above the headline. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-meta .live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-wash); }
.hero-meta i { font-style: normal; color: var(--line); }

/* Doors: a hairline grid rather than floating cards. */
.doors { gap: 0; row-gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.door { min-height: 19rem; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.door:hover { background: var(--wash); transform: none; }

/* Ticker: italic serif, slower. */
.ticker { background: transparent; }
.ticker-track span { font-style: italic; gap: 2.25rem; }
.ticker-track span::after { width: 0.3rem; height: 0.3rem; background: var(--ink); border-radius: 50%; }

/* Footer in ink, closed by the wordmark. */
.site-footer { --ink-soft: #A3A2A8; --line: #2C2C33; background: var(--ink); color: var(--paper); border-top: 0; padding-bottom: 0; }
.site-footer .link-arrow { color: var(--paper); border-color: var(--line); }
.site-footer .tag { background: transparent; color: color-mix(in srgb, var(--accent) 75%, white); border-color: currentColor; }
.footer-links a:hover { color: color-mix(in srgb, var(--accent) 75%, white); }
.footer-mark { color: var(--paper); margin-bottom: -0.12em; }

/* Finer pencil lines. */
.sketch :is(path, circle, rect, line, ellipse) { stroke-width: 1.2; }
.sketch .acc { stroke-width: 1.6; }
.sketch .faint { stroke-width: 0.9; }
.icon :is(path, circle) { stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  /* Calm motion: no line boil, slower and smaller movements. */
  .hero-art .sketch > g { animation: none; }
  .sketch .bob { animation-duration: 5s; }
  .sketch .float { animation-duration: 6.5s; }
  .sketch .sway { animation-duration: 6s; }
  .sketch .wave { animation-duration: 3s; }
  .sketch .wiggle { animation: sway 7s ease-in-out infinite; }
  .sketch .write { animation-duration: 4.5s; }
  .sketch .twinkle, .sketch .pulse { animation-duration: 4s; }
  .ticker-track { animation-duration: 80s; }
  .hero-meta .live { animation: beacon 2.8s ease-out infinite; }
  .js .reveal .mark { background-size: 0% 1px; }
  .js .reveal.is-in .mark { background-size: 100% 1px; }
}

@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-2px, -5px) rotate(-1.5deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-4deg) scaleX(0.95); } }
@keyframes write { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, 2.5px); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.section-ink > .wrap > .eyebrow::before { color: var(--paper); }

/* Body text at 400 reads lighter and more editorial. Interface text stays at 500.
   The body grey is a touch darker so thin text holds up on low-resolution screens. */
:root { --ink-soft: #56555B; }
body { font-weight: 400; }
h3, .btn, .site-nav a, .nav-toggle, label, .label, .eyebrow, .tag, summary, strong, .step,
.link-arrow, .hero-meta, .flow-captions, .stages .makes span, .footer-title, .brief-card .tag,
.stuck-list button[aria-selected="true"] { font-weight: 500; }

/* Spacing fix: sections were stacking two large paddings into a screen-high gap.
   One rhythm now: about 7rem between sections at most, less on small screens. */
.section { padding-block: clamp(4rem, 7vw, 7rem); }
.statement { padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(3.5rem, 6vw, 5.5rem); }
.statement + .section { border-top: 0; padding-top: clamp(2.5rem, 4vw, 4rem); }
.hero + .ticker { margin-top: 0; }
@media (min-width: 60rem) {
  .hero:not(.apply-hero) { min-height: calc(82svh - var(--header-h)); }
}

/* The numbered rail now starts at tablet-landscape widths, with a slimmer rail,
   so mid-size laptop windows don't leave the right half empty. */
@media (min-width: 56rem) {
  .section > .wrap {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 6rem);
  }
  .section > .wrap > * { grid-column: 2; }
  .section > .wrap > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    display: block;
    padding-top: 1rem;
    border-top: 1px solid var(--ink);
  }
  .section > .wrap > .eyebrow::before {
    content: counter(sec, decimal-leading-zero);
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
    background: none;
    font: italic 400 clamp(2.5rem, 2rem + 1.2vw, 3.25rem)/1 var(--serif);
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .section-ink > .wrap > .eyebrow { border-color: var(--line); }
  .section-ink > .wrap > .eyebrow::before { color: var(--paper); }
  .section > .wrap > .cta-band { grid-column: 1 / -1; }
  .section > .wrap .grid-4:not(.journey) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .section > .wrap { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* Why BQ sketch: smaller, closer to its labels, and labels aligned to the drawing
   (scattered dots on the left, the loop in the middle, the arrow on the right). */
.flow-art { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.flow-captions {
  max-width: 44rem;
  grid-template-columns: 21fr 44fr 35fr;
  margin-top: 0.25rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.flow-captions span:nth-child(2) { text-align: center; }
.flow-captions span:last-child { text-align: right; }

/* Closing CTA: on wide screens the heading takes the left and the note and buttons sit
   on the right, so the band has no empty half. Less air above the footer too. */
.section:has(> .wrap > .cta-band) { padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem); }
.section:has(> .wrap > .cta-band) + .section, .statement + .section:has(.cta-band) { border-top: 0; }
.cta-band { padding: clamp(2rem, 5vw, 4.5rem); }
.cta-band .intro { max-width: 34rem; }
@media (min-width: 56rem) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band > div {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: end;
  }
  .cta-band h2 { grid-row: 1 / span 2; max-width: 13ch; margin: 0; }
  .cta-band .intro { margin: 0; }
  .cta-band .actions { margin-top: 1.75rem; }
}

/* Venues: filters, listing cards and the empty state. */
.venue-filters {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 40rem) { .venue-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.venue-count { grid-column: 1 / -1; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.venue-list { display: grid; gap: 0; margin-top: 0; }
@media (min-width: 40rem) { .venue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .venue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.venue {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.venue-meta { display: flex; gap: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.venue-meta span + span::before { content: "/"; margin-right: 1rem; color: var(--line); }
.venue h3 { font: 400 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem)/1.1 var(--serif); }
.venue-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1rem; margin: 0; }
.venue-facts dt { font-size: 0.75rem; color: var(--ink-soft); }
.venue-facts dd { margin: 0.125rem 0 0; font-size: 0.9375rem; }
.venue .link-arrow { margin-top: auto; align-self: flex-start; }
.venue-none { margin-top: 1.5rem; color: var(--ink-soft); }
#hosts .actions { margin-top: 2.5rem; }
.venue[hidden] { display: none; }

/* Venues directory: terms label, contact buttons and open dates. */
.venue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .venue-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.venue-terms { display: grid; gap: 0.25rem; padding-left: 0.75rem; border-left: 2px solid var(--ink); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.venue-terms-partner { border-color: var(--accent); }
.venue-terms span { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.venue-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: auto; padding-top: 0.5rem; }


.legend-sub { margin-top: 0.5rem; font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.checks label, .check { align-items: flex-start; }
.checks input, .check input { margin-top: 0.2rem; }



/* Movers sit at the sketch's corner until their path starts, so keep them hidden until then. */
@media (prefers-reduced-motion: no-preference) {
  .sketch .mover { opacity: 0; animation: mover-in 0.2s linear var(--start, 0s) forwards; }
  @keyframes mover-in { to { opacity: 1; } }
}

/* Venue cards: sample label, inline contact and the stats line. */
.tag-sample { padding: 0.125rem 0.5rem; border-color: var(--accent); color: var(--accent-ink); font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.venue-meta .tag-sample { margin-left: auto; }
.venue-contact { display: grid; gap: 0.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.venue-contact dt { font-size: 0.75rem; color: var(--ink-soft); }
.venue-contact dd { margin: 0; overflow-wrap: anywhere; }
.venue-contact a { color: var(--ink); }
.venue-stats { margin-top: 1.25rem; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.venue-stats strong { font: 400 1.5rem/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.venue-stats i { margin-inline: 0.5rem; font-style: normal; color: var(--line); }
.venue-meta { align-items: flex-start; }
.venue-meta span.tag-sample::before { content: none; }
.venue .venue-confirmed { margin-top: auto; font-size: 0.8125rem; color: var(--ink-soft); }

/* Brand identity: ink header, and the wordmark's apostrophe and full stop in the accent. */
.brand .accent { color: var(--accent); }
.site-header .brand img, .site-footer .brand img { border-radius: 22%; box-shadow: 0 0 0 1px var(--paper); }

.site-header { --line: #2C2C33; background: rgb(21 21 26 / 0.94); color: var(--paper); }
.site-header .brand { color: var(--paper); }
.site-nav a:not(.btn) { color: #A3A2A8; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { color: var(--paper); }
.site-nav .btn-primary { background: transparent; color: var(--paper); border-color: var(--paper); }
.site-nav .btn-primary:hover, .site-nav .btn-primary[aria-current="page"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav-toggle { color: var(--paper); border-color: var(--line); }
@media (max-width: 55.99rem) {
  .site-nav a:not(.btn) { color: var(--paper); }
}

/* Home hero: a crowd in WebGL with pencil marks in SVG on top (src/field.js). Every few
   seconds someone in the crowd is found: circled, and labelled with the industry that
   found them. It fades in once loaded; without WebGL the hero is simply typographic. */
html:not(.js) .hero-field { display: none; }
.hero-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.8s ease; }
.hero-field.is-ready { opacity: 1; }
.hero-field canvas, .hero-field .finds { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-field .finds { overflow: visible; }

.find-dot { fill: var(--ink); }
.find-ring { fill: none; stroke: var(--graphite); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.find.is-current .find-ring { stroke: var(--accent); stroke-width: 1.6; }
.find-link { fill: none; stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 1; }
.find-label text { font: 500 10.5px var(--sans); letter-spacing: 0.14em; fill: var(--ink-soft); stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.find-label .find-n { font: italic 400 15px var(--serif); letter-spacing: 0; fill: var(--ink); }

/* The pointer: a faint pencil circle offers the nearest person, and a found person
   under the pointer is picked out with their links. */
.find-ghost { fill: none; stroke: var(--graphite); stroke-opacity: 0.45; stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity 0.25s ease; }
.find-ghost.is-on { opacity: 1; }
.find.is-hover .find-ring { stroke: var(--accent); }
.find.is-hover .find-label text { fill: var(--ink); }
.find-link.is-hover { stroke-opacity: 0.75; }

.hero-hint {
  position: absolute;
  right: max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter));
  bottom: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-field.is-ready .hero-hint { opacity: 1; transition-delay: 5s; }
.hero-field.was-used .hero-hint { opacity: 0; transition-delay: 0s; }
@media (max-width: 59.99rem) { .hero-hint { right: 0; left: 0; bottom: 0.25rem; text-align: center; } }

@media (prefers-reduced-motion: no-preference) {
  .find-dot { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--ease); }
  .find-ring { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.5, 0.1, 0.3, 1) 0.15s, stroke 1.2s ease; }
  .find-label { opacity: 0; transition: opacity 0.7s ease 0.7s; }
  .find-link { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(0.5, 0.1, 0.3, 1) 0.9s; }
  .find.is-in .find-dot { transform: none; }
  .find.is-in .find-ring, .find-link.is-in { stroke-dashoffset: 0; }
  .find.is-in .find-label { opacity: 1; }
  .cohort { transition: opacity 1.4s ease; }
  .cohort.is-out { opacity: 0; }
}

/* Keep the text clear: the crowd fades out behind the headline and lede. */
@media (min-width: 60rem) {
  .hero-field canvas {
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.6) 30%, #000 60%), linear-gradient(#000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, rgb(0 0 0 / 0.6) 30%, #000 60%), linear-gradient(#000 92%, transparent);
    mask-composite: intersect;
  }
}

/* On narrow screens the text fills the hero, so the field becomes a figure below it. */
@media (max-width: 59.99rem) {
  .hero-field { position: relative; height: calc(56vw + 5rem); margin-top: 1rem; z-index: 0; }
  .hero-field canvas {
    -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  }
}

/* The closing wordmark rises out of the footer edge when it comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .site-footer { overflow: clip; }
  .js .footer-mark { transition: transform 1.6s var(--ease) 0.2s; }
  .js .site-footer:not(.is-in) .footer-mark { transform: translateY(45%); }
}

/* First screen: on desktop heroes are as tall as their content with modest padding, and the
   home headline is capped by the screen's height. No empty band above the headline, and
   the buttons stay above the fold on laptops. */
@media (min-width: 60rem) {
  .hero:not(.apply-hero) { min-height: 0; padding-block: clamp(2.5rem, 6svh, 4.5rem) clamp(3rem, 7svh, 5rem); }
  .hero:not(.page-hero) h1 { font-size: min(clamp(3rem, 1.2rem + 7vw, 7.5rem), 12.5svh); }
}

/* The closing wordmark runs the full width of the column. The text is about 7.46 times
   as wide as its font size; 7.6 leaves room for a scrollbar. */
.footer-mark { font-size: calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 7.6); }

/* Accent discipline. Vermilion now means "chosen": the newest find in the home hero, the
   BQ Fellow step, the one key stroke in each sketch, plus the brand mark and the current
   page in the nav. Sub-heading underlines, callouts, note bullets, FAQ toggles and the
   footer tag were also vermilion and diluted that, so they are ink. */
.mark, .section-ink .mark { background-image: linear-gradient(var(--ink), var(--ink)); }
.callout { border-left-color: var(--ink); }
.note::before { background: var(--ink-soft); }
.faq summary::after { color: var(--ink); }
.eyebrow::before { background: var(--ink); }
.site-footer .tag { color: var(--ink-soft); }
.footer-title .tag { letter-spacing: 0.12em; text-transform: uppercase; }

/* Venues: the numbered rail narrows the content column, so three cards (and four filters)
   across only fit on wide screens. */
@media (min-width: 72rem) { .venue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .venue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .venue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .venue-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Photographs: warm black and white, so they sit in the ink-on-paper palette. Full-bleed
   bands between sections, and a pair on the home page. Credits are in the README. */
.photo, .photo-band { margin: 0; overflow: hidden; background: var(--wash); }
.photo img, .photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(0.12) contrast(1.04); }
.photo-band { height: clamp(16rem, 46vw, 38rem); }
.photo-pair { display: grid; gap: 1rem; padding-block: clamp(1rem, 3vw, 2rem); }
.photo-pair .photo { height: clamp(16rem, 34vw, 30rem); }
@media (min-width: 60rem) { .photo-pair { grid-template-columns: 7fr 5fr; } }

@media (prefers-reduced-motion: no-preference) {
  .js .photo, .js .photo-band { transition: clip-path 1.4s var(--ease); }
  .js .photo:not(.is-in), .js .photo-band:not(.is-in) { clip-path: inset(14% 0 0 0); }
  .js .photo img, .js .photo-band img { transition: transform 2s var(--ease); }
  .js .photo:not(.is-in) img, .js .photo-band:not(.is-in) img { transform: scale(1.08); }
}

/* Frontiers: the sectors in large serif type on a hairline grid. */
.frontiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 48rem) { .frontiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frontiers li {
  display: grid;
  place-items: center;
  min-height: clamp(6rem, 11vw, 9rem);
  padding: 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 400 clamp(1.375rem, 1rem + 1.4vw, 2.25rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
  text-align: center;
  color: #9A988F;
  transition: color 0.4s ease, background-color 0.4s ease;
}
.frontiers li:hover { color: var(--ink); background: var(--wash); }

/* Dark band for "Why BQ": labels stay neutral and the captions stay legible on ink. */
.section-ink .eyebrow { color: var(--ink-soft); }
.section-ink .flow-captions span:nth-child(2) { color: var(--paper); }
.section-ink .numbered li { border-color: var(--line); }
.section-ink .intro { color: var(--ink-soft); }

/* Work with us: written like a letter, not a form. Each part is numbered, the fields are
   hairlines and the chosen way in is circled in pencil, like a find on the home page. */
.apply-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.apply-hero h1 { max-width: 16ch; }
.apply { padding-bottom: clamp(4rem, 9vw, 7rem); }
.apply-grid { margin-top: 0; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) { .apply-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }

.form { gap: 0; counter-reset: step; }
.step { display: grid; gap: 1.5rem; padding-block: 2rem 2.75rem; border-top: 1px solid var(--ink); counter-increment: step; }
.step[hidden] { display: none; }
.step-title { display: flex; align-items: baseline; gap: 1rem; font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.step-title::before { content: counter(step, decimal-leading-zero); flex: none; min-width: 1.75rem; font: italic 400 1.125rem/1 var(--serif); color: var(--ink-soft); }

.form label, .form .label, .apply-aside .label { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.form .optional { letter-spacing: 0.06em; text-transform: none; font-weight: 400; }
.form .field { gap: 0.25rem; }
.form .field-row { gap: 1.5rem 2rem; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea {
  padding: 0.5rem 0 0.625rem;
  border: 0;
  border-bottom: 1px solid #CBC7BD;
  background: transparent;
  font: 400 1.125rem/1.4 var(--sans);
  box-shadow: none;
}
.form textarea { padding-top: 0.75rem; }
.form select {
  appearance: none;
  padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315151A' stroke-width='1.2'/%3E%3C/svg%3E") right 0.25rem center / 0.75rem no-repeat;
  cursor: pointer;
}
.form input::placeholder, .form textarea::placeholder { color: #A8A59D; }
.form input:not([type="checkbox"]):not([type="radio"]):hover, .form select:hover, .form textarea:hover { border-bottom-color: var(--ink-soft); }
.form input:not([type="checkbox"]):not([type="radio"]):focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }

.form .checks { gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .form .checks { column-gap: 2rem; } }
.form .checks label, .form .check, .ways-more label {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
  font: 400 0.9375rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.form .check { border-bottom: 0; color: var(--ink); }
.form .checks label:has(:checked), .ways-more label:has(:checked) { color: var(--ink); }
.form .checks label:hover, .ways-more label:hover { color: var(--ink); }

/* The four main ways in, as a hairline grid. */
.ways { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40rem) { .ways { grid-template-columns: 1fr 1fr; } }
.form .way {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.625rem;
  background: var(--paper);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.way input { position: absolute; opacity: 0; pointer-events: none; }
.way:hover, .way:has(:checked) { background: var(--wash); }
.way:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.way-n { position: relative; justify-self: start; padding: 0.25rem 0.375rem; font: italic 400 1.0625rem/1 var(--serif); color: var(--ink-soft); }
.way-ring { position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.way:has(:checked) .way-n { color: var(--ink); }
.way:has(:checked) .way-ring { stroke-dashoffset: 0; opacity: 1; }
.way-name { margin-top: 0.25rem; font: 400 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem)/1.1 var(--serif); color: var(--ink); text-wrap: balance; }
.way-note { font: 400 0.9375rem/1.45 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .way-ring { transition: stroke-dashoffset 0.8s cubic-bezier(0.5, 0.1, 0.3, 1); }
}

.ways-more { display: grid; }
.ways-more .label { padding-bottom: 0.5rem; }
.ways-more label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.ways-more label[hidden] { display: none; }
.ways-more input { width: 1rem; height: 1rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--ink); }

.send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.send-note { font-size: 0.875rem; color: var(--ink-soft); }

/* What happens next follows the chosen way in. */
.apply-aside { display: block; padding-top: 2rem; border-top: 1px solid var(--ink); }
.next { margin-top: 1rem; counter-reset: next; }
.next[hidden] { display: none; }
.next li { display: grid; grid-template-columns: 2.25rem 1fr; padding-block: 1rem; border-bottom: 1px solid var(--line); counter-increment: next; font: 400 1.25rem/1.3 var(--serif); color: var(--ink); }
.next li::before { content: counter(next, decimal-leading-zero); font: italic 400 1rem/1.6 var(--serif); color: var(--ink-soft); }
.next p { padding-block: 1rem; font: 400 1.25rem/1.3 var(--serif); }
.next .link-arrow { display: inline-block; margin-top: 0.5rem; }

/* Three of the sectors in pictures, under the frontiers grid. */
.photo-trio { display: grid; gap: 1.5rem 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) { .photo-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-trio .photo { background: none; }
.photo-trio img { height: auto; aspect-ratio: 16 / 10; background: var(--wash); }
@media (min-width: 48rem) { .photo-trio img { aspect-ratio: 4 / 5; } }
.photo-trio figcaption { margin-top: 0.75rem; font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }