/* ==========================================================================
   Sense Of Celebration
   Visual system: Madre Mia art direction (cream canvas, editorial serif,
   arc-masked media) on the Boldway structural scale (grid, tabs, spacing
   and typography ladder measured from the reference).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Primary face — Canela
   Self-hosted from assets/fonts. Only Regular and Regular Italic are cut, which
   is all the design asks for: every display setting on the page is weight 400.
   Headings are pinned to 400 in the reset below so no browser tries to fake a
   bold out of the Regular file.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Canela";
  src: url("../assets/fonts/canela-regular.woff2") format("woff2"),
    url("../assets/fonts/canela-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Canela";
  src: url("../assets/fonts/canela-regular-italic.woff2") format("woff2"),
    url("../assets/fonts/canela-regular-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette — navy taken from the SOC logo (#1E336B) */
  --navy: #1e336b;
  --navy-deep: #16244a;
  --navy-soft: #33477c;

  --cream: #f7f2ea;
  --cream-deep: #efe5d7;
  --surface: #fffcf7;

  --beige: #e4d6c3;
  --brown: #6b5540;
  --gold: #b08d4f;
  --gold-soft: #c7a86a;

  --muted: #7a7269;
  --line: rgba(30, 51, 107, 0.14);
  --line-strong: rgba(30, 51, 107, 0.28);

  /* Typography */
  --font-display: "Canela", Georgia, serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;

  /* Scale ladder — mirrors the reference breakpoint steps 42→110 / 32→70 */
  --fs-hero: clamp(2.25rem, 4.6vw, 4.75rem);
  --fs-h2: clamp(2.625rem, 5vw, 6.875rem);
  --fs-title: clamp(2rem, 3.4vw, 4.375rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2.875rem);
  --fs-h4: clamp(1.375rem, 1.55vw, 2rem);
  --fs-h5: clamp(1.125rem, 1.15vw, 1.5rem);
  --fs-body: clamp(1rem, 0.85vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-body: 1.62;

  --ls-tight: -0.03em;
  --ls-label: 0.16em;

  /* Spacing ladder. Every block clears 100px top and bottom once the viewport
     is wide enough for it; below that it scales down rather than crowding. */
  --gap-section: clamp(3.75rem, 9vw, 6.25rem);
  --gap-half: clamp(1.875rem, 4.5vw, 6.875rem);
  --gap-title: clamp(1.875rem, 3.8vw, 5.625rem);
  --gutter: clamp(0.9375rem, 5vw, 6.25rem);
  --max-width: 1920px;
  --measure: 62ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 0.3s;
  --dur-text: 0.8s;
  --dur-media: 1.1s;

  --radius-media: 14px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote {
  margin: 0;
}

/* Canela is cut in Regular only: left at the browser default, every heading
   would ask for 700 and get a smeared synthetic bold back */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 1280px;
}

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--gap-section);
}

/* Editorial section head: small label above a large serif title */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-bottom: var(--gap-title);
}

.section-head__text {
  max-width: 46ch;
}

/* Long statements need a wider measure so they stay within 2–3 lines */
.section-head__text--wide {
  max-width: min(100%, 1150px);
}

.label {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brown);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
  margin-top: 1.25rem;
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  color: var(--brown);
}

/* Display head — the reference lockup: a small upright lead word set against a
   large italic on the first line, the roman second line under it, both centred,
   with the action holding the right edge of the row. Three tracks rather than
   an absolute overlay, so the button can never sit on top of the type. */
.display-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-bottom: clamp(2rem, 3.4vw, 3.25rem);
}

.display-head__title {
  grid-column: 2;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
}

.display-head__line {
  display: block;
}

/* Body face at caption scale, riding the baseline of the italic beside it */
.display-head__kicker {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.15vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.28em;
}

.display-head__accent {
  font-style: italic;
}

.display-head__action {
  grid-column: 3;
}

/* Squared-off counterpart to the pill .btn — matches the reference head action */
.head-btn {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  margin-top: clamp(0.4rem, 1.4vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: var(--navy);
  color: var(--cream);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-soft),
    border-color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-soft);
}

.head-btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.head-btn:active {
  transform: translateY(1px);
}

/* Reversed for the navy section */
.head-btn--light {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
}

.head-btn--light:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.9rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-micro) var(--ease-soft),
    color var(--dur-micro) var(--ease-soft),
    border-color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-soft);
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(247, 242, 234, 0.16);
  transition: transform var(--dur-micro) var(--ease);
}

.btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.btn:hover .btn__icon {
  transform: translate(2px, -2px);
}

.btn:active {
  transform: scale(0.985);
}

/* Full-width action bar. The label centres and the icon keeps its place beside
   it, rather than being pushed out to the far edge of a very wide button. */
.btn--wide {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-inline: 1.5rem;
}

.btn--light {
  --btn-bg: var(--cream);
  --btn-fg: var(--navy);
  border-color: var(--cream);
}

.btn--light:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(0.85rem, 1.4vw, 1.4rem);
  transition: background-color 0.5s var(--ease-soft),
    box-shadow 0.5s var(--ease-soft), padding 0.5s var(--ease-soft);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 242, 234, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}

.header.is-stuck::before {
  opacity: 1;
}

.header.is-stuck {
  box-shadow: 0 1px 0 var(--line);
}

.header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/* Wordmark left, monogram centred, actions right — mirrors the reference nav */
.header__brand {
  font-size: var(--fs-small);
  color: var(--navy);
  letter-spacing: 0.01em;
  justify-self: start;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-soft);
}

.header__brand:hover {
  color: var(--brown);
}

.header__mark {
  justify-self: center;
  display: block;
}

.header__mark img {
  height: clamp(38px, 3.4vw, 52px);
  width: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.25rem, 4vw, 4.5rem);
}

.header__phone {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--navy);
  transition: color var(--dur-micro) var(--ease-soft);
}

.header__phone:hover {
  color: var(--brown);
}

/* Text trigger for the full-screen menu — no pill button, as in the reference */
.header__menu {
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--navy);
  position: relative;
}

.header__menu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.header__menu:hover::after,
.header__menu[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Full-screen overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--cream);
  padding: clamp(6rem, 18vw, 9rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  visibility: hidden;
}

.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.mobile-menu.is-open .mobile-menu__nav a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.14s + var(--i) * 0.055s);
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

.mobile-menu__foot a {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7. Hero — centred serif statement over a curved three-up media band
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(6.5rem, 8.5vw, 9rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
}

/* Capped in em rather than ch: the measure then scales with the headline itself
   and holds the two-line break at every width, whichever face is loaded */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
  max-width: 8.5em;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 3.2vw, 3rem);
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  color: var(--brown);
}

/* Near full-bleed: the reference insets the band only ~7px from the page edge */
.hero__bleed {
  padding-inline: 8px;
}

/* Rolling track. The band is the window; the track is a single row that slides.
   Measured off the reference: 1382 x 448 at the edges, pinching to 364 at the
   centre — the top edge dips down and the bottom edge lifts up.
   max-height keeps the whole hero inside one screen on short viewports. */
.hero__band {
  position: relative;
  margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
  /* width must be stated: with aspect-ratio alone, max-height would shrink it */
  width: 100%;
  aspect-ratio: 1382 / 448;
  max-height: 40vh;
  overflow: hidden;
}

/* The shared media reveal clips to a rounded rectangle. On a full-bleed band
   that shows up as rounded corners and, along the top and bottom, a hairline
   where the anti-aliased clip edge cuts through the cream arcs. The band opens
   with the same wipe, but lands on a clip that sits outside its own box, so
   nothing of the element itself is ever cut. */
.hero__band[data-reveal="media"] {
  clip-path: inset(14% 8% 14% 8%);
}

.hero__band[data-reveal="media"].is-in {
  clip-path: inset(-2px);
}

/* The belt never stops. --roll is the pixel width of one full set of slots
   (set from script, since the slots are sized off the band); once the track has
   travelled that far the second, identical set sits exactly where the first
   started, so the restart is invisible. */
.hero__track {
  display: flex;
  gap: 8px;
  height: 100%;
  will-change: transform;
  animation: hero-roll var(--roll-dur, 40s) linear infinite;
}

.hero__track.is-paused {
  animation-play-state: paused;
}

@keyframes hero-roll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--roll, 0px) * -1), 0, 0);
  }
}

/* Cream arcs mask the band into its curve. They start outside the box and are
   wider than it, so no sliver of media can survive at the edges when the band
   height lands on a fractional device pixel. */
.hero__band::before,
.hero__band::after {
  content: "";
  position: absolute;
  left: -2px;
  width: calc(100% + 4px);
  /* 42px of sag over a 448px band = 9.4%, plus the 3px lead-out */
  height: calc(9.4% + 3px);
  background: var(--cream);
  z-index: 3;
  pointer-events: none;
}

.hero__band::before {
  top: -3px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.hero__band::after {
  bottom: -3px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero__slot {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 3);
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cream-deep);
}

.hero__slot img,
.hero__slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease-soft);
}

/* Two-column meta block below the band */
.hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  /* Only the columns are spaced here: the row under them is the action, and it
     carries its own margin */
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: 0;
  align-items: start;
  /* the arrows used to hold this space open; the belt runs straight into it */
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  text-align: left;
}

.hero__sub {
  color: var(--muted);
  max-width: 52ch;
  font-size: clamp(1rem, 1vw, 1.1875rem);
  line-height: 1.62;
}

.hero__aside {
  justify-self: end;
  max-width: 34ch;
}

.hero__geo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.05vw, 1.1875rem);
  color: var(--brown);
}

/* The action takes a row of its own under both meta columns and runs the full
   width of the page */
.hero__cta {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 3.4vw, 3.25rem);
}

/* --------------------------------------------------------------------------
   8. About — three-column opening spread, then the two founders, facts between
   -------------------------------------------------------------------------- */

/* Rail / copy / portrait. The middle column carries roughly twice the width of
   the rail, and the portrait stays narrow so it reads as an edge accent rather
   than a second subject competing with the text. */
.about__intro {
  display: grid;
  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.45fr)
    minmax(0, 0.5fr);
  gap: clamp(1.75rem, 5vw, 6.5rem);
  align-items: start;
}

/* The section marker on the left rail. It uses the shared label component, so
   it reads as the same kind of mark as ( Events ) or ( Reviews ). */
.about__mark {
  margin-top: 0.4rem;
}

/* The statement takes the whole column; the body underneath is pulled in to a
   readable measure, since ch on this face still runs to ~90 characters */
.about__copy {
  max-width: 46rem;
}

/* Deliberately smaller than the other section titles: here the statement leads
   into body copy directly underneath, so it has to sit close to it in scale */
.about__statement {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.25vw, 2.75rem);
  line-height: 1.28;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
  text-wrap: balance;
}

.about__statement em {
  font-style: italic;
  color: var(--brown);
}

.about__body {
  margin-top: clamp(1.5rem, 2.4vw, 2.5rem);
  max-width: 34rem;
  color: var(--muted);
}

.about__body p + p {
  margin-top: 1.15rem;
}

/* Stretched rather than given a ratio: the portrait then ends exactly where the
   copy ends, which is what makes the row read as one composed block */
.about__portrait {
  align-self: stretch;
  min-height: clamp(20rem, 25vw, 32rem);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--cream-deep);
}

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

/* Founders — a spread, not a card row */
.founders {
  margin-top: var(--gap-section);
}

/* Title left, the shared languages block holding the right edge — stated once
   for the pair instead of repeated in both captions */
.founders__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

.langs {
  display: grid;
  gap: 0.85rem;
  justify-items: end;
  text-align: right;
}

.langs__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brown);
}

/* The four languages hold one line at every width: the pills come down in size
   on narrow columns rather than breaking onto a second row */
.langs__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.langs__list li {
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--navy);
}

/* The per-founder copy of the block belongs to the phone layout only: on any
   wider screen the pair still share the one statement up in the head */
.langs--founder {
  display: none;
}

/* A notch under the section statement, so the h2 keeps the lead */
.founders__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.95vw, 2.375rem);
  line-height: 1.16;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
  margin-top: 1.25rem;
}

.founders__title em {
  font-style: italic;
  color: var(--brown);
}

.founders__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

/* Matching frames so the two rules under them land on the same line */
.founder {
  display: grid;
  margin: 0;
}

.founder__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--cream-deep);
}

.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.founder:hover .founder__media img {
  transform: scale(1.035);
}

/* Caption plate: role above the name, body underneath. No rule between the
   portrait and the text — the spacing carries the break on its own. */
.founder__text {
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--muted);
}

.founder__text p + p {
  margin-top: 1.1rem;
}

/* The column track is the measure: capping the copy left every line short of
   the portrait above it, so the two blocks read as separate widths */
.founder__text > p:not(.founder__role) {
  max-width: none;
  text-wrap: pretty;
}

.founder__role {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brown);
}

/* Asterisk marker, drawn rather than set, so it keeps its weight at any size */
.founder__mark {
  flex: none;
  color: var(--gold);
}

.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.95vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
  margin: 0.85rem 0 1.35rem;
}

/* Facts — all four in one row, the figure over its line. Set off by space
   rather than by a rule, so the section reads as one open spread. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  margin-top: var(--gap-half);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.fact {
  display: grid;
  align-content: start;
  gap: clamp(0.6rem, 1vw, 1rem);
}

.fact__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* No measure cap here: the column track is the measure. Capping it left every
   line short of its track and the row read as unevenly spaced. */
.fact__label {
  font-size: var(--fs-small);
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9. Events — Projects block reproduced from the Boldway reference
   -------------------------------------------------------------------------- */

.events {
  background: var(--cream);
}

/* Tab row: right aligned, slash separated — as in the reference */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.9rem, 1.4vw, 1.375rem);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 1.4vw, 1.375rem);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--muted);
  transition: color var(--dur-micro) var(--ease-soft);
}

.tab::after {
  content: "/";
  color: var(--line-strong);
}

.tab:last-child::after {
  content: none;
}

.tab__text {
  position: relative;
  padding-bottom: 3px;
}

.tab__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.tab:hover {
  color: var(--navy);
}

.tab[aria-selected="true"] {
  color: var(--navy);
}

.tab[aria-selected="true"] .tab__text::after,
.tab:hover .tab__text::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Segmented variant: the row becomes one pill and the active tab the filled
   segment inside it. Used where the switch has to sit under a centred head. */
.tabs--pill {
  display: inline-flex;
  justify-content: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream-deep);
}

.tabs--pill .tab {
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-micro) var(--ease-soft),
    color var(--dur-micro) var(--ease-soft);
}

.tabs--pill .tab::after,
.tabs--pill .tab__text::after {
  content: none;
}

.tabs--pill .tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--cream);
}

/* Under a centred display head the switch has to sit on the same axis */
.tabs--centred {
  display: flex;
  width: max-content;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 3.4vw, 3.25rem);
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel {
  animation: panel-in 0.5s var(--ease) both;
}

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

/* Two column grid, 16px gutters — matches .project-list.one */
.event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The frame itself is the trigger, so it is a button with its chrome stripped */
.event-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 850 / 729;
  background: var(--cream-deep);
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.event-card__media img,
.event-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

/* Held above the shared media-reveal rule, which also writes a transform */
.event-card .event-card__media:hover img,
.event-card .event-card__media:hover video {
  transform: scale(1.06);
}

/* Frosted navy glass over the frame: a real blur, a tinted diagonal wash and a
   1px inner highlight so the pane reads as glass rather than as a flat scrim */
.event-card__veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  background: linear-gradient(
    145deg,
    rgba(30, 51, 107, 0.62),
    rgba(22, 36, 74, 0.4)
  );
  box-shadow: inset 0 0 0 1px rgba(247, 242, 234, 0.18),
    inset 0 1px 0 rgba(247, 242, 234, 0.32);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}

/* Glass pill riding the centre of the pane */
.event-card__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.9rem 1.6rem;
  border: 1px solid rgba(247, 242, 234, 0.42);
  border-radius: var(--radius-pill);
  background: rgba(247, 242, 234, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

.event-card__cue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(247, 242, 234, 0.2);
  transition: transform var(--dur-micro) var(--ease);
}

.event-card__media:hover .event-card__veil,
.event-card__media:focus-visible .event-card__veil {
  opacity: 1;
}

.event-card__media:hover .event-card__cue,
.event-card__media:focus-visible .event-card__cue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.event-card__media:hover .event-card__cue-icon {
  transform: translate(2px, -2px);
}

.event-card__media:active {
  transform: scale(0.995);
}

.event-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.event-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  font-weight: 400;
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

.event-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   10. For whom — sticky media beside a progressive list
   -------------------------------------------------------------------------- */

.audience {
  background: var(--navy);
  color: var(--cream);
}

.audience .display-head__title {
  color: var(--cream);
}

.audience__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.audience__media {
  position: sticky;
  top: clamp(5.5rem, 10vw, 8rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--navy-deep);
}

.audience__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft);
  position: absolute;
  inset: 0;
}

.audience__media img.is-active {
  opacity: 1;
}

.audience__list {
  border-top: 1px solid rgba(247, 242, 234, 0.18);
}

.audience__item {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.35rem, 2.4vw, 2.1rem);
  border-bottom: 1px solid rgba(247, 242, 234, 0.18);
  cursor: default;
  transition: opacity 0.4s var(--ease-soft);
}

.audience__index {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.audience__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: rgba(247, 242, 234, 0.55);
  transition: color 0.4s var(--ease-soft);
}

.audience__item.is-active .audience__text,
.audience__item:hover .audience__text {
  color: var(--cream);
}

/* Closes the run of names, on the axis of the list itself */
.audience__action {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   11. Reviews — title and its line on the left, the format switch on the right,
   then either the video cards or the written notes
   -------------------------------------------------------------------------- */

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.reviews__lead {
  max-width: 46rem;
}

.reviews__title {
  margin-top: 0;
  text-wrap: balance;
}

.reviews__text {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Format switch on top, pager under it, both holding the right edge */
.reviews__controls {
  display: grid;
  justify-items: end;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

/* Page counter and the two arrows. Hidden by the script while the reviews on
   hand fit on one page. */
.pager {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.35rem);
}

.pager[hidden] {
  display: none;
}

.pager__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.pager__now {
  color: var(--navy);
}

.pager__sep {
  color: var(--brown);
  opacity: 0.5;
}

.pager__arrows {
  display: flex;
  gap: 0.5rem;
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-soft),
    border-color var(--dur-micro) var(--ease-soft),
    color var(--dur-micro) var(--ease-soft),
    opacity var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-soft);
}

.pager__btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

.pager__btn:active:not(:disabled) {
  transform: scale(0.94);
}

.pager__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Shared track for both formats: one row of cards that pages across with the
   arrows in the head, and swipes on touch. */
.rev-row {
  --row-gap: clamp(1rem, 1.6vw, 1.5rem);
  --per-row: 3;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-row) - 1) * var(--row-gap)) / var(--per-row));
  gap: var(--row-gap);
  align-items: stretch;
  overflow-x: auto;
  /* the reveal offset would otherwise open a vertical scroll inside the track */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rev-row::-webkit-scrollbar {
  display: none;
}

.rev-row > * {
  scroll-snap-align: start;
}

/* Video cards — four across, portrait frames, caption bar riding the bottom */
.vreviews {
  --row-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  --per-row: 4;
}

.vreview {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 22px);
  background: var(--cream-deep);
}

.vreview__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.vreview:hover .vreview__media {
  transform: scale(1.03);
}

/* Scrim under the caption bar, so the bar holds on pale footage too. On ::before
   because ::after already carries the placeholder badge. */
.vreview::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(22, 36, 74, 0.5), rgba(22, 36, 74, 0));
}

.vreview__foot {
  position: absolute;
  left: clamp(0.5rem, 0.8vw, 0.75rem);
  right: clamp(0.5rem, 0.8vw, 0.75rem);
  bottom: clamp(0.5rem, 0.8vw, 0.75rem);
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: clamp(10px, 1vw, 16px);
  /* flat translucency rather than a backdrop filter: this bar scrolls with the
     page, and blurring it would repaint on every frame */
  background: rgba(22, 36, 74, 0.72);
  color: var(--cream);
}

.vreview__thumb {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(247, 242, 234, 0.2);
}

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

.vreview__who {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.vreview__name {
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vreview__date {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: rgba(247, 242, 234, 0.68);
  font-variant-numeric: tabular-nums;
}

.vreview__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: rgba(247, 242, 234, 0.16);
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-soft);
}

.vreview__play:hover {
  background: rgba(247, 242, 234, 0.28);
}

.vreview__play:active {
  transform: scale(0.94);
}

.vreview__play svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.vreview__play .icon-pause {
  display: none;
}

.vreview__play[data-state="playing"] .icon-play {
  display: none;
}

.vreview__play[data-state="playing"] .icon-pause {
  display: block;
}

/* Written notes — three to a row on desktop */
.treviews {
  --per-row: 3;
}

/* Message-style note: minimal frame, no messenger chrome */
.review-note {
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.review-note__quote {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  line-height: 1.4;
  color: var(--navy);
  letter-spacing: -0.015em;
}

.review-note__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}

.review-note__meta time {
  font-variant-numeric: tabular-nums;
}

.is-placeholder {
  position: relative;
}

.is-placeholder::after {
  content: "Placeholder";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown);
  background: var(--beige);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

/* Rides the scroll: the header clears the top, so the offset matches its height
   rather than sitting flush against the viewport edge */
.faq__aside {
  position: sticky;
  top: clamp(5.5rem, 10vw, 8rem);
}

.faq__aside-text {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--muted);
  max-width: 34ch;
  text-wrap: pretty;
}

.faq__aside-cta {
  width: 100%;
  max-width: 15rem;
  justify-content: space-between;
  padding: 0.9rem 0.9rem 0.9rem 1.5rem;
  min-height: 44px;
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.35rem, 2.2vw, 1.9rem);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--navy);
  transition: color var(--dur-micro) var(--ease-soft);
}

.faq__question {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.faq__trigger:hover {
  color: var(--brown);
}

/* Plus / minus toggle */
.faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease), opacity 0.3s linear;
}

.faq__icon::before {
  width: 16px;
  height: 1.5px;
}

.faq__icon::after {
  width: 1.5px;
  height: 16px;
}

.faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.5s var(--ease);
}

.faq__answer {
  padding-bottom: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   13. CTA form
   -------------------------------------------------------------------------- */

.cta {
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
}

.cta .label {
  color: var(--beige);
}

.cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}

/* Stretched rather than given a ratio, so the frame ends exactly where the copy
   beside it ends and the two read as one composed block */
.cta__media {
  align-self: stretch;
  min-height: clamp(24rem, 30vw, 40rem);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--navy-deep);
}

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

.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--cream);
  margin-top: 1.25rem;
  text-wrap: balance;
}

.cta__title em {
  font-style: italic;
  color: var(--beige);
}

.cta__text {
  margin-top: 1.5rem;
  color: rgba(247, 242, 234, 0.72);
  text-wrap: pretty;
}

/* The action leads, its qualifier sits beside it rather than under the button */
.cta__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 3.2vw, 2.75rem);
}

/* Takes whatever the button leaves, rather than being held to a narrow measure */
.cta__note {
  flex: 1 1 16rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(247, 242, 234, 0.55);
}

/* Direct lines: label above the line itself, ruled off from one another.
   The space above the first rule is held close to the rhythm between the rows
   themselves — the two together used to open a gap under the button. */
.channels {
  margin-top: clamp(1.75rem, 2.4vw, 2.25rem);
  border-top: 1px solid rgba(247, 242, 234, 0.2);
}

.channel {
  display: grid;
  gap: 0.4rem;
  padding-block: clamp(1.1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid rgba(247, 242, 234, 0.16);
}

.channel__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--beige);
}

.channel__value {
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  transition: color var(--dur-micro) var(--ease-soft);
}

/* Addresses and handles are set text, not display figures */
.channel__value--set {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.channel__value:hover {
  color: var(--beige);
}

.channel__meta {
  font-size: 0.8125rem;
  color: rgba(247, 242, 234, 0.5);
}

.cta__geo {
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  font-size: var(--fs-small);
  color: rgba(247, 242, 234, 0.6);
}

/* Form */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--beige);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  min-height: 48px;
  background-color: rgba(247, 242, 234, 0.06);
  border: 1px solid rgba(247, 242, 234, 0.22);
  border-radius: 8px;
  color: var(--cream);
  transition: border-color var(--dur-micro) var(--ease-soft),
    background-color var(--dur-micro) var(--ease-soft);
}

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

/* The native control sizes and places its own arrow, which leaves the select
   short of the input beside it. Drawn here instead so both align exactly. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.9rem;
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 8px;
}

.field select::-ms-expand {
  display: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(247, 242, 234, 0.4);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(247, 242, 234, 0.4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background-color: rgba(247, 242, 234, 0.1);
}

.field select option {
  background: var(--navy-deep);
  color: var(--cream);
}

.field__error {
  font-size: 0.8125rem;
  color: #f0b8a0;
  min-height: 1.2em;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #e08a6a;
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.form__note {
  font-size: 0.8125rem;
  color: rgba(247, 242, 234, 0.55);
  max-width: 34ch;
}

/* Inline confirmation */
.form__status {
  grid-column: 1 / -1;
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(176, 141, 79, 0.12);
}

.form__status.is-visible {
  display: flex;
}

.form__status strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--cream);
}

.form__status p {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  color: rgba(247, 242, 234, 0.75);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

/* Light footer, as in the reference: wordmark and sign-up on the left, the
   links in the middle, the mark holding the right edge, socials and legal on a
   line of their own underneath */
.footer {
  background: var(--cream);
  color: var(--navy);
  padding-block: clamp(3.5rem, 7vw, 7rem) 2rem;
}

.footer__top {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.8fr)
    minmax(0, 0.55fr);
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

/* Monogram over the wordmark, set to the left edge of the row */
.footer__brand {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Set rather than placed: the logo lockup shrinks its wordmark to nothing at
   this size, and the reference carries a plain display-face wordmark here */
.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  max-width: 12ch;
}

/* Direct lines in place of a sign-up field, in a column of their own beside the
   links. No frames: the address and the number carry themselves, and the
   networks sit under them as bare icons. */
.footer__connect {
  min-width: 0;
}

.footer__connect-title {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brown);
}

.footer__lines {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.footer__lines a {
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.5;
  color: var(--navy);
  overflow-wrap: anywhere;
  transition: color var(--dur-micro) var(--ease-soft);
}

.footer__lines a:hover {
  color: var(--brown);
}

.footer__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  margin-left: -10px;
}

/* 44px target around a 20px glyph: thumb-sized without a visible box */
.footer__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
  transition: color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-soft);
}

.footer__icons a:hover {
  color: var(--brown);
  transform: translateY(-1px);
}

/* With the mark now part of the brand lockup, the links close the row and hold
   the right edge in its place */
.footer__nav {
  justify-self: end;
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer__nav a {
  font-size: var(--fs-small);
  color: var(--navy);
  transition: color var(--dur-micro) var(--ease-soft);
}

.footer__nav a:hover {
  color: var(--brown);
}

.footer__mark {
  width: clamp(72px, 6.5vw, 104px);
  height: auto;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.footer__legal a {
  color: var(--navy);
  transition: color var(--dur-micro) var(--ease-soft);
}

.footer__legal a:hover {
  color: var(--brown);
}

.footer__copy {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Mobile sticky call button */
.call-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.3rem;
  min-height: 48px;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px -12px rgba(22, 36, 74, 0.6);
  font-size: var(--fs-small);
  transform: translateY(120%);
  transition: transform 0.5s var(--ease);
}

.call-fab.is-visible {
  transform: translateY(0);
}

.call-fab svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   14c. Event request dialog
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 24, 48, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
}

/* A light panel on the dimmed field: the dialog reads as a sheet of the same
   paper the page is printed on rather than as a second dark surface */
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 40rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: 18px;
  background: var(--surface);
  color: var(--navy-deep);
  box-shadow: 0 40px 80px -30px rgba(10, 18, 40, 0.55);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-soft),
    border-color var(--dur-micro) var(--ease-soft);
}

.modal__close:hover {
  background: var(--cream-deep);
  border-color: var(--line-strong);
}

.modal__head {
  padding-right: 3.5rem;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* Carries the frame the dialog was opened from */
.modal__subject {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brown);
}

.modal__title {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--navy);
}

.modal__title em {
  font-style: italic;
  color: var(--brown);
}

.modal__text {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 46ch;
}

/* Light variant of the form: the field styles above are cut for the navy
   contact field, so every surface, border and text colour is reversed here */
.form--light .field label {
  color: var(--brown);
}

.form--light .field input,
.form--light .field select,
.form--light .field textarea {
  background-color: var(--cream);
  border-color: var(--line);
  color: var(--navy);
}

.form--light .field input::placeholder,
.form--light .field textarea::placeholder {
  color: var(--muted);
}

.form--light .field input:hover,
.form--light .field select:hover,
.form--light .field textarea:hover {
  border-color: var(--line-strong);
}

.form--light .field input:focus,
.form--light .field select:focus,
.form--light .field textarea:focus {
  border-color: var(--gold);
  background-color: var(--surface);
}

.form--light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231e336b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.7 6 6.3l5-4.6'/%3E%3C/svg%3E");
}

.form--light .field select option {
  background: var(--surface);
  color: var(--navy);
}

/* One line: the note sits beside the button, not under a 34ch cap */
.form--light .form__note {
  max-width: none;
}

.form--light .field__error {
  color: #9f2f2d;
}

.form--light .field.has-error input,
.form--light .field.has-error select,
.form--light .field.has-error textarea {
  border-color: #9f2f2d;
}

.form--light .form__status {
  background: rgba(176, 141, 79, 0.1);
}

.form--light .form__status strong {
  color: var(--navy);
}

.form--light .form__status p {
  color: var(--muted);
}

.form--light .form__note {
  color: var(--muted);
}

.form--light .form__note a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   14b. Legal pages
   -------------------------------------------------------------------------- */

.legal {
  padding-top: clamp(7.5rem, 13vw, 11rem);
}

.legal__body {
  max-width: 68ch;
  margin-top: var(--gap-title);
  color: var(--muted);
}

.legal__body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal__body p + p {
  margin-top: 1rem;
}

.legal__body a {
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
}

.legal__notice {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brown);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   15. Reveal animations
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-text) var(--ease),
    transform var(--dur-text) var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Media mask reveal — clip-path wipe plus a slow settle */
[data-reveal="media"] {
  opacity: 1;
  transform: none;
  clip-path: inset(14% 8% 14% 8% round var(--radius-media));
  transition: clip-path var(--dur-media) var(--ease);
}

[data-reveal="media"].is-in {
  clip-path: inset(0% 0% 0% 0% round var(--radius-media));
}

[data-reveal="media"] > img,
[data-reveal="media"] > video {
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}

[data-reveal="media"].is-in > img,
[data-reveal="media"].is-in > video {
  transform: scale(1);
}

/* Word-level text reveal — split in JS so inline markup survives */
.reveal-lines .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.reveal-lines.is-in .word {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .footer__top {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 0.85fr)
      minmax(0, 0.5fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }
}

@media (max-width: 1100px) {
  .audience__layout,
  .faq__layout,
  .cta__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the title has nothing left to ride alongside */
  .faq__aside {
    position: static;
  }

  /* Four portrait cards get too narrow to read the caption bar: go two-up */
  .vreviews {
    --per-row: 2;
    --row-gap: clamp(0.75rem, 1.8vw, 1.25rem);
  }

  .treviews {
    --per-row: 2;
  }

  .audience__media {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 10;
  }

  /* Three columns get thin here: the section name takes its own row and the
     portrait keeps the copy company */
  .about__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
  }

  .about__mark {
    grid-column: 1 / -1;
  }

  .about__copy {
    max-width: none;
  }

  /* Two columns, two rows: the brand lockup opens the first one, the links
     close the second rather than being squeezed into a third column */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  /* Two columns: the links open the second row rather than closing the first */
  .footer__nav {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .tabs {
    justify-content: flex-start;
  }

  /* The head stacks: type first, action underneath, both on the centre axis */
  .display-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(1.5rem, 3vw, 2rem);
  }

  .display-head__title,
  .head-btn {
    grid-column: 1;
  }

  .head-btn {
    justify-self: center;
    margin-top: 0;
  }

  /* Languages move under the founders title rather than across from it */
  .founders__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .langs {
    justify-items: start;
    text-align: left;
  }

  .langs__list {
    justify-content: flex-start;
  }

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

  /* Four columns leave the longer lines wrapping five deep at this width */
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  }

  /* Stacked, the portrait has no copy left to match, so it takes a ratio again */
  .about__portrait {
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-width: 26rem;
  }

  /* One under the other, with the frames capped so a portrait never fills the
     whole width of a tablet */
  .founders__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3.5rem, 9vw, 5.5rem);
  }

  .founder {
    max-width: 34rem;
  }
}

@media (max-width: 900px) {
  /* Portrait band; slots stay narrower than the window so the belt still reads
     as moving rather than as one frame swapping for the next */
  .hero__band {
    aspect-ratio: 1 / 1;
    max-height: 52vh;
  }

  /* 72% of a square band lands close to the 3:4 of the source photos */
  .hero__slot {
    flex: 0 0 72%;
  }

  /* Flatter sag on the taller band; the 3px lead-out is kept */
  .hero__band::before,
  .hero__band::after {
    height: calc(3.5% + 3px);
  }

  .hero__meta {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

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

  /* Stacked, the row gap already carries the space above the action */
  .hero__cta {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: 6rem;
  }

  /* At phone sizes the column is already the measure */
  .hero__title {
    max-width: none;
  }


  .event-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .event-card__media {
    aspect-ratio: 4 / 3;
  }

  /* Touch devices never get the hover state, so the cue sits in the corner of
     the frame permanently. The whole frame is still the tap target. */
  .event-card__cue {
    top: auto;
    left: 12px;
    bottom: 12px;
    opacity: 1;
    transform: none;
    padding: 0.65rem 0.7rem 0.65rem 1.1rem;
    background: rgba(22, 36, 74, 0.62);
    border-color: rgba(247, 242, 234, 0.34);
  }

  .event-card__media:hover .event-card__cue,
  .event-card__media:focus-visible .event-card__cue {
    transform: none;
  }

  .event-card__cue-icon {
    width: 24px;
    height: 24px;
  }

  .event-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

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

  .form__foot .btn {
    width: 100%;
    justify-content: center;
  }

  .call-fab {
    display: inline-flex;
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .treviews {
    --per-row: 1;
  }

  /* The switch is the widest thing in the head on a phone: let it wrap */
  .tabs--pill {
    display: flex;
    width: 100%;
  }

  .tabs--pill .tab {
    flex: 1;
    justify-content: center;
    padding-inline: 0.75rem;
  }

  /* Controls take the full width: switch across the top, count and arrows
     holding the two ends of the row below it */
  .reviews__controls {
    width: 100%;
    justify-items: stretch;
  }

  .pager {
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  /* Monogram alone carries the brand once space runs short */
  .header__brand {
    display: none;
  }

  .header__mark {
    justify-self: start;
  }

  .header__inner {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 620px) {
  /* Two per row keeps the figures readable without stacking into a long list */
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

@media (max-width: 479px) {

  .header__phone {
    display: none;
  }

    .arc::before,
  .arc::after {
    height: 24px;
  }
}

/* --------------------------------------------------------------------------
   16b. Phone layout
   Everything above this point is the desktop composition and stays as it is.
   The rules below only ever apply at 767px and under, where the single column
   asks for a different reading order: actions run the full width, the founders
   carry their own languages, the event frames stack over one another as the
   page moves, the review track shows the next card at its edge, and the footer
   sits on the centre line.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* ---- Actions ----------------------------------------------------------
     One column, so every request button takes the whole measure rather than
     sitting as a short pill against a wide empty side */

  .btn,
  .head-btn {
    width: 100%;
    justify-content: center;
  }

  .head-btn {
    justify-self: stretch;
    white-space: normal;
  }

  /* The FAQ action was capped at a short width for the desktop rail */
  .faq__aside-cta {
    max-width: none;
    justify-content: center;
    padding-inline: 1.5rem;
  }

  /* Both wrappers are flex rows: let the button hold its own line and the
     note under it take the next one */
  .cta__action,
  .audience__action,
  .form__foot {
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacked, the wrapper is a column: the 16rem basis would be read as a
     height and open a gap between the note and the lines under it */
  .cta__note {
    flex: 0 0 auto;
    text-align: center;
  }

  /* Once the script has moved the events action under the two panels it needs
     its own air above, and no longer answers to the head grid */
  .head-btn--under {
    margin-top: clamp(2rem, 7vw, 2.75rem);
  }

  /* ---- Founders ---------------------------------------------------------
     The shared languages statement leaves the head and closes each caption
     instead, directly under that founder's portrait and copy */

  .founders__head .langs {
    display: none;
  }

  .langs--founder {
    display: grid;
    justify-items: start;
    text-align: left;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }

  .langs--founder .langs__list {
    justify-content: flex-start;
  }

  /* Four pills across a 360px column: the tracking of the padding and the size
     come down just enough that the row never breaks */
  .langs--founder .langs__list li {
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
  }

  /* The role has to hold one line: the tracking and the size come down far
     enough that all three words fit across a 360px column */
  .founder__role {
    gap: 0.45rem;
    font-size: 0.6875rem;
    letter-spacing: 0.075em;
    white-space: nowrap;
  }

  .founder {
    max-width: none;
  }

  /* ---- Events -----------------------------------------------------------
     The frames stop sitting in a list and start stacking: each card pins
     itself a few pixels below the one before it, so the previous frames stay
     as a visible edge while the next one rides over them */

  .event-grid {
    display: block;
  }

  .event-card {
    --stack: 0;
    position: sticky;
    top: calc(5.5rem + var(--stack) * 7px);
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    background: var(--cream);
  }

  .event-card:nth-child(1) { --stack: 0; }
  .event-card:nth-child(2) { --stack: 1; }
  .event-card:nth-child(3) { --stack: 2; }
  .event-card:nth-child(4) { --stack: 3; }
  .event-card:nth-child(5) { --stack: 4; }
  .event-card:nth-child(6) { --stack: 5; }
  .event-card:nth-child(7) { --stack: 6; }
  .event-card:nth-child(8) { --stack: 7; }

  /* The last frame has nothing left to be covered by, so it releases at the
     foot of the panel instead of holding the top */
  .event-card:last-child {
    margin-bottom: 0;
  }

  /* The cue becomes the foot of the frame: full width, squared off against
     the sides, rounded only where it meets the bottom corners */
  .event-card__cue {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.85rem 0.85rem 1.2rem;
    border-width: 1px 0 0 0;
    border-radius: 0 0 var(--radius-media) var(--radius-media);
    background: rgba(22, 36, 74, 0.62);
    border-color: rgba(247, 242, 234, 0.34);
  }

  /* ---- Reviews ----------------------------------------------------------
     One card and half of the next, so the track reads as something that
     carries on past the edge rather than as a single framed item */

  .vreviews,
  .treviews {
    --per-row: 1.5;
  }

  /* Moved under the open track by the script: the count holds the left, the
     two arrows the right */
  .pager--under {
    width: 100%;
    justify-content: space-between;
    margin-top: clamp(1.5rem, 5vw, 2rem);
  }

  /* ---- Footer -----------------------------------------------------------
     Stacked, every block sits on the centre line */

  .footer__top {
    justify-items: center;
    text-align: center;
  }

  .footer__wordmark {
    max-width: none;
  }

  .footer__lines {
    justify-items: center;
  }

  .footer__icons {
    justify-content: center;
    margin-left: 0;
  }

  .footer__nav {
    justify-self: center;
  }

  .footer__nav ul {
    align-items: center;
  }

  .footer__brand {
    justify-items: center;
  }

  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Centred, the legal pair now runs under the floating call button: the last
     line of the page needs the clearance that the right-hand column had */
  .footer {
    padding-bottom: 5.5rem;
  }
}

/* The role line is the tightest thing on the page: one more step down keeps
   it on a single line on the narrowest phones still in use */
@media (max-width: 400px) {
  .founder__role {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
  }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal],
  [data-reveal].is-in,
  [data-reveal="media"],
  [data-reveal="media"].is-in,
  .hero__band[data-reveal="media"],
  .hero__band[data-reveal="media"].is-in {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  [data-reveal="media"] > img,
  [data-reveal="media"] > video {
    transform: none;
  }

  .reveal-lines .word {
    opacity: 1;
    transform: none;
  }

  /* The dialog appears rather than rises */
  .modal__backdrop,
  .modal__panel {
    opacity: 1;
    transform: none;
  }

  /* The belt stands still rather than snapping to the end of its cycle */
  .hero__track {
    animation: none;
    transform: none;
  }

  .audience__media {
    position: relative;
    top: auto;
  }

  /* The track jumps to the page rather than gliding to it */
  .rev-row {
    scroll-behavior: auto;
  }
}