/* ====================================================================
   Shared by index.html and media.html. The header is authored for
   the hero, so the standalone Media page gives it its own cream band and
   pushes the section below it clear of the fold.
   ==================================================================== */
.page-media {
  background: var(--cream);
}

/* the header is fixed on every page, so each standalone page just has to
   clear its own height */
.page-media,
.page-about {
  padding-top: var(--header-h);
}

/* the press grid sits below the player now, so the video no longer has to
   hold the page open on its own */
.page-media .speaking {
  padding-top: clamp(28px, 5vw, 90px);
  padding-bottom: clamp(34px, 4.6vw, 84px);
}

/* ====================================================================
   Tokens
   ==================================================================== */
:root {
  /* Brief palette: bone / ink / orange. --cream keeps its token name; its
     value is now bone. */
  --orange: #f26631;
  --cream: #f2efe9;
  --bone: #f2efe9;
  --ink: #1a1a1a;
  /* the LinkedIn banner blue, sampled from banner.svg (paint0_linear) */
  --blue: #56a8ff;
  --muted: #9a9a9a;
  --rule: rgba(26, 26, 26, .08);

  --font-display: "Anton SC", "Arial Narrow", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;

  /* Single scale unit for the whole hero. Equals 1vw at the reference
     aspect (1154x872) but falls back to height once the viewport gets
     wider-but-shorter, so the poster never outgrows the fold. */
  --u: min(1vw, 1.3234vh);

  /* horizontal gutter — width-only so every section aligns to the same
     edge regardless of viewport height */
  --gut: clamp(20px, 7vw, 150px);

  /* The header is fixed, so everything below it has to be pushed clear by
     its height. This is a close static estimate; the nav script measures
     the real header and overwrites it on load and on resize. */
  --header-h: clamp(64px, calc(7.4 * var(--u)), 112px);

  --slate: #46697c;
  --panel: #fffcf4;
  --navy: #16294a;
  --sky: #cfe3fb;
  --sky-card: #e2edfd;
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* a #hash jump has to clear the fixed header, or it lands behind it */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ====================================================================
   Hero shell
   ==================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  /* the header no longer lives inside the hero, so the stage has to clear
     it on its own */
  padding-top: var(--header-h);
  padding-bottom: clamp(14px, calc(1.6 * var(--u)), 28px);

  /* how far the portrait column sits inboard of the right gutter, so the
     right-hand stack reads centre-left rather than pinned to the edge */
  --hero-shift: clamp(0px, calc(9.5 * var(--u)), 164px);
}

/* five hairlines splitting the viewport into six equal columns */
.hero__rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__rules span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.hero__rules span:nth-child(1) { left: 16.6667%; }
.hero__rules span:nth-child(2) { left: 33.3333%; }
.hero__rules span:nth-child(3) { left: 50%; }
.hero__rules span:nth-child(4) { left: 66.6667%; }
.hero__rules span:nth-child(5) { left: 83.3333%; }

/* ====================================================================
   Header
   ==================================================================== */
/* Fixed rather than sticky: `overflow-x: hidden` on html/body turns the
   page into a scroll container that position:sticky can't escape, and the
   hero clips its own overflow on top of that. Fixed sidesteps both, and
   every page below simply reserves --header-h. */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(12px, calc(1.6 * var(--u)), 23px) var(--gut);
  transition: background .3s ease, box-shadow .3s ease;
}

/* Only once the page has moved: over the hero the header floats on the
   cream ground, and a band there would cut the hairline rules in half.
   The plate is a pseudo-element rather than the header's own background,
   so its blur never becomes the containing block for the fixed drawer
   inside the header. */
.header::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* hugs the content: the gutter less a little breathing room, so the
     plate reads as a floating bar rather than a full-width band */
  inset: clamp(6px, .7vw, 13px) max(10px, calc(var(--gut) - clamp(16px, 2.4vw, 46px)));
  border-radius: 999px;
  background: rgba(255, 253, 250, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, .04), 0 14px 34px rgba(17, 17, 17, .1);
  opacity: 0;
  scale: .99;
  transition: opacity .3s ease, scale .3s ease;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand img {
  width: auto;
  height: clamp(40px, calc(4.8 * var(--u)), 66px);
}

.brand span {
  font-size: clamp(13px, calc(1.25 * var(--u)), 18px);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, calc(2.6 * var(--u)), 36px);
}

.nav a {
  font-size: clamp(12px, calc(1.18 * var(--u)), 18px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}

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

.nav a.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  height: clamp(34px, calc(2.9 * var(--u)), 46px);
  padding: 0 clamp(18px, calc(1.9 * var(--u)), 30px);
  margin-left: clamp(8px, calc(1.4 * var(--u)), 22px);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: clamp(12px, calc(1.15 * var(--u)), 17px);
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.nav a.btn-pill:hover {
  background: #e35f1d;
  transform: translateY(-1px);
}

/* current page gets a rule under it rather than a colour swap, so the nav
   still reads as one row */
.nav a[aria-current="page"]:not(.btn-pill) {
  color: var(--orange);
}

/* --- mobile trigger -------------------------------------------------
   Present in the markup on every page and hidden above the breakpoint,
   so the drawer is a purely CSS-driven state change. */
/* No plate of its own: the header already carries one once the page
   scrolls, and a bordered box inside that plate reads as a box in a box. */
.nav-toggle {
  display: none;
  /* the drawer is a child of the header and paints above the header's own
     content, so the button needs to be lifted over it to stay tappable */
  position: relative;
  z-index: 65;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}

/* the scrim is the tap-anywhere-to-close target, and it stops the page
   behind the drawer reading as still interactive */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(17, 17, 17, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ====================================================================
   Stage — copy left, portrait right
   ==================================================================== */
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(16px, calc(2.4 * var(--u)), 48px);
  padding: clamp(16px, calc(3 * var(--u)), 56px) var(--gut) 0;
}

/* vertically centred against the portrait beside it */
.stage__copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-bottom: clamp(20px, calc(3 * var(--u)), 60px);
}

.stage__eyebrow {
  margin: 0;
  font-size: clamp(11px, 1.32vw, 26px);
  font-weight: 400;
  letter-spacing: .1em;
  text-indent: .1em;
  text-transform: uppercase;
  text-align: left;
}

.stage__title {
  position: relative;
  z-index: 1;
  margin: clamp(10px, calc(2.3 * var(--u)), 34px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* sized off the longest line, "EVERY GROWTH PLATEAU": the headline never
     wraps, so this has to clear the left column on its own */
  font-size: clamp(24px, 4.3vw, 92px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
  /* ink, not orange: in the hero only the flag and the CTA may be orange */
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

/* the headline breaks over two lines in the left column */
.stage__title .word {
  display: block;
}

.stage__title .ch--sp {
  width: .22em;
}

.stage__cta {
  margin-top: clamp(18px, calc(2.6 * var(--u)), 46px);
}

/* The margin pulls the column inboard of the gutter; it keeps its size
   and overhangs the grid area's start rather than shrinking, which the
   left column has slack for. */
.stage__aside {
  justify-self: end;
  width: 100%;
  max-width: clamp(280px, calc(46 * var(--u)), 700px);
  margin-right: var(--hero-shift);
}

.stage__portrait {
  position: relative;
  z-index: 2;
  width: 100%;
}

.stage__portrait img.portrait {
  width: 100%;
  height: auto;
}

/* Cream ellipse trimming the hard bottom cut of the cut-out. It only has
   to clear that edge across the figure's width — sitting any higher just
   eats the photo and pushes the meta row away from it. */
.stage__portrait img.ellipse {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 99%;
  transform: translate(-50%, 68%);
  pointer-events: none;
}

/* ====================================================================
   Meta row
   ==================================================================== */
/* Three equal columns spanning the figure — not the image box. The cut-out
   carries transparent padding, so these insets come from its alpha bounds
   (x 111..620 of 684): the row starts and ends on Mark's shoulders.
   Percentages resolve against .stage__aside, whose width is the photo's,
   so the two stay locked together at any size. */
.meta {
  position: relative;
  z-index: 3;
  display: grid;
  /* Equal columns, so the proof block is the same width as Format rather
     than sized to its own content, with a wide gutter between them. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(14px, calc(2.1 * var(--u)), 40px);
  row-gap: clamp(8px, calc(.9 * var(--u)), 16px);
  margin: -1% 9.4% 0 16.2%;
}

/* Each block is a subgrid of those two rows, so the labels sit on one
   line and the copy beneath them on another however many lines any one
   of them wraps to. Bottom-aligning whole blocks cannot do that. */
.meta__item {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  text-align: left;
  min-width: 0;
}

.meta__label,
.social__avatars {
  align-self: end;
}

.meta__value,
.social__proof {
  align-self: start;
}

.meta__label {
  margin: 0;
  font-size: clamp(11px, calc(.95 * var(--u)), 14px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* sized so "Coach & Fractional CRO" clears a third of the span on one
   line — the equal columns are narrower than content-sized ones were */
.meta__value {
  margin: 0;
  font-size: clamp(8.5px, calc(.72 * var(--u)), 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: clamp(34px, calc(2.9 * var(--u)), 46px);
  padding: 0 clamp(18px, calc(1.7 * var(--u)), 28px);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: clamp(9px, calc(.78 * var(--u)), 12px);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.btn-ghost svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

/* The grid's row-gap spaces this off the proof line, same as the labels.
   A shallow overlap only: two of the three are book covers, so anything
   deeper starts eating their titles. Source order does the stacking, each
   one painting over the one before it. */
.social__avatars {
  display: flex;
  justify-content: flex-start;
}

.social__avatars img + img {
  margin-left: clamp(-7px, calc(-.45 * var(--u)), -4px);
}

.social__avatars img {
  width: clamp(28px, calc(2.85 * var(--u)), 42px);
  height: clamp(28px, calc(2.85 * var(--u)), 42px);
  border-radius: 50%;
  border: 2px solid var(--cream);
  object-fit: cover;
}

.social p {
  margin: 0;
  font-size: clamp(10px, calc(.88 * var(--u)), 13px);
  line-height: 1.35;
}

.social p.is-strong {
  font-weight: 600;
}

.social p.is-muted {
  color: var(--muted);
}

/* ====================================================================
   About
   ==================================================================== */
.about {
  background: #fff;
  /* trimmed a notch off the vertical rhythm — the section was reading taller
     than the ones around it */
  padding: clamp(44px, 6.4vw, 112px) var(--gut);
}

/* Everything below is sized in cqw against this element, so the section
   keeps the design's proportions at any viewport width instead of the
   type flattening out against a px ceiling while the cards keep growing. */
.about__inner {
  container-type: inline-size;
}

.about {
  --card-pad: clamp(20px, 2.81cqw, 60px);
  --radius: clamp(14px, 1.4cqw, 30px);
  --badge: clamp(36px, 4.15cqw, 88px);
  --card-gap: clamp(12px, 1.16cqw, 30px);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  align-items: stretch;
}

.about__col {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

/* the photo sets the row height; the flanking columns stretch to it */
.about__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 561 / 913;
}

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

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: var(--card-pad);
}

.card--orange {
  flex: 1;
  background: var(--orange);
  color: #fff;
}

.card__eyebrow {
  margin: 0;
  font-size: clamp(11px, 1.12cqw, 24px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__title {
  margin: clamp(16px, 1.9cqw, 42px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.3cqw, 92px);
  line-height: 1.36;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* --- feature cards ------------------------------------------------- */
.card--light {
  flex: 1;
  background: linear-gradient(158deg, #fbfcfe 0%, #f2f6fb 100%);
  color: var(--ink);
}

.card--slate {
  flex: 1;
  background: var(--slate);
  color: #fff;
}

.card__icon {
  width: clamp(24px, 2.4cqw, 50px);
  height: clamp(24px, 2.4cqw, 50px);
  margin-bottom: auto;
  flex: none;
}

.card__heading {
  margin: clamp(20px, 2.4cqw, 50px) 0 clamp(8px, 1.05cqw, 22px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.63cqw, 35px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.card__text {
  margin: 0;
  font-size: clamp(13px, 1.18cqw, 25px);
  line-height: 1.62;
}

.card--light .card__text {
  color: #3a3a3a;
}

.card--slate .card__text {
  color: rgba(255, 255, 255, .88);
}

.card__text em {
  font-style: italic;
}

/* --- pull quote ---------------------------------------------------- */
.quote {
  position: relative;
  margin: 0;
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(22px, 2.9cqw, 62px) var(--card-pad);
}

.quote blockquote {
  margin: 0;
  font-size: clamp(13px, 1.18cqw, 25px);
  font-style: italic;
  line-height: 1.62;
  color: #2b2b2b;
}

.quote__mark {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
}

.quote__mark svg {
  width: 46%;
  height: auto;
}

.quote__mark--start {
  top: calc(var(--badge) * -.24);
  left: 4px;
  transform: rotate(180deg);
}

.quote__mark--end {
  right: calc(var(--badge) * -.14);
  bottom: calc(var(--badge) * -.55);
}

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

  .about__photo {
    aspect-ratio: 4 / 5;
  }

  .about__col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .about__col:last-child .card {
    flex: 1;
  }
}

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

  .about__col:last-child {
    flex-direction: column;
  }

  .card__title {
    line-height: 1.28;
  }
}

/* ====================================================================
   Services — three equal cards
   ==================================================================== */
.services {
  background: #fff;
  padding: 0 var(--gut) clamp(56px, 8vw, 140px);
}

.services__inner {
  container-type: inline-size;
}

.services__head {
  text-align: center;
  margin-bottom: clamp(28px, 5cqw, 92px);
}

.services__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.13cqw, 88px);
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

.services__title em {
  display: block;
  font-style: normal;
  color: var(--orange);
}

/* geometry-only <defs>; nothing here paints */
.topo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* one row of three; each card carries the same width and height */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.07cqw, 38px);
  align-items: stretch;
}

/* isolation keeps the contour layer (z-index -1) behind the copy but
   still inside the card, so it never paints over the section itself */
.service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, #fbfcfe 0%, #f2f6fb 100%);
  border: 1px solid #e6e6e6;
  border-radius: clamp(14px, 1.66cqw, 32px);
  box-shadow: 0 14px 40px rgba(17, 17, 17, .06);
  padding: clamp(22px, 3.2cqw, 60px);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease,
              transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* --- topographic layer ---------------------------------------------
   A contour field in <defs>, stamped once per card. It's oversized and
   inset past the card's edges so the slow drift never exposes a corner.
   Hairline strokes, as on a printed survey map: the opacity carries the
   weight, not the line. */
.service__topo {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  z-index: -1;
  fill: none;
  stroke: rgba(22, 41, 74, .3);
  stroke-width: .45;
  pointer-events: none;
  transition: stroke .5s ease, opacity .5s ease;
  animation: topoDrift 30s ease-in-out infinite;
}

/* The card carries a faint wash of its own so the hairlines never compete
   with the copy, plus a scrim that thickens down the card: the pattern
   stays legible at the top edge and gets out of the way under the text.
   --scrim flips to navy on hover so the same gradient still matches the
   panel once the card inverts. */
.service--topo {
  --scrim: 244, 248, 253;
  background: linear-gradient(158deg, #f5f9fd 0%, #eaf1fa 100%);
}

/* ::after, not ::before: both sit at z-index -1, so painting order falls
   back to DOM order and only the "last child" pseudo lands on top of the
   contour <svg> it is meant to soften. */
.service--topo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(178deg,
              rgba(var(--scrim), .04) 0%,
              rgba(var(--scrim), .52) 32%,
              rgba(var(--scrim), .8) 100%);
  transition: background .5s ease;
}

/* --- card variants ---------------------------------------------------
   Only card 01 carries the contour pattern. Card 02 is navy and stays
   navy: hover lifts every card and deepens its own shadow, but no card
   ever changes colour under the cursor. */
.service--dark {
  background: linear-gradient(158deg, #1c3158 0%, #101f39 100%);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 46px rgba(16, 41, 74, .22);
}

.service:not(.service--dark):hover {
  box-shadow: 0 26px 60px rgba(17, 17, 17, .13);
  transform: translateY(-6px);
}

.service--dark:hover {
  box-shadow: 0 26px 60px rgba(16, 41, 74, .3);
  transform: translateY(-6px);
}

/* the survey drifts a little faster under the cursor. Motion only: the
   stroke keeps its colour. */
.service:hover .service__topo {
  animation: topoDrift 16s ease-in-out infinite;
}

@keyframes topoDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2.5%, 0) scale(1.07); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .service__topo,
  .service:hover .service__topo {
    animation: none !important;
  }
}

/* --- card icon ------------------------------------------------------
   align-self stops the flex column from stretching the badge to the card's
   full width. */
.service__icon {
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex: none;
  width: clamp(54px, 5.6cqw, 114px);
  height: clamp(54px, 5.6cqw, 114px);
  margin-bottom: clamp(16px, 2.2cqw, 44px);
  border: 1px solid #e1e7ef;
  border-radius: clamp(14px, 1.5cqw, 30px);
  background: rgba(255, 255, 255, .75);
  color: var(--navy);
  transition: background .5s ease, color .5s ease, border-color .5s ease;
}

.service__icon svg {
  width: 56%;
  height: 56%;
}

.service--dark .service__icon {
  background: var(--orange);
  border-color: transparent;
  color: #fff;
}

/* auto margin below the title pins every body copy block to the same
   baseline, so the three cards read as one row rather than three */
.service__title {
  margin: 0 0 clamp(14px, 1.8cqw, 34px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.75cqw, 37px);
  line-height: 1.24;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .5s ease;
}

.service__text {
  margin: 0;
  font-size: clamp(13px, 1.12cqw, 24px);
  line-height: 1.72;
  color: #3a3a3a;
  transition: color .5s ease;
}

.service--dark .service__title {
  color: #fff;
}

.service--dark .service__text {
  color: rgba(255, 253, 250, .76);
}

@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ====================================================================
   Roadmap
   ==================================================================== */
/* Roadmap and Engagements are both white, so their vertical padding simply
   stacks. Trimmed the bottom here (and the top over on .plans) rather than
   zeroing one side, so the two sections still breathe apart. */
.roadmap {
  background: #fff;
  padding: 0 var(--gut) clamp(28px, 3.2vw, 56px);
}

.roadmap__inner {
  container-type: inline-size;
}

.roadmap__head {
  text-align: center;
  margin-bottom: clamp(28px, 5.5cqw, 100px);
}

.roadmap__eyebrow {
  margin: 0 0 clamp(8px, 1cqw, 20px);
  font-size: clamp(11px, 1.1cqw, 22px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.roadmap__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.13cqw, 88px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5cqw, 46px);
}

.step {
  border-radius: clamp(12px, 1.25cqw, 26px);
  overflow: hidden;
}

/* Two columns inside one full-width panel: label and title on one side,
   the copy on the other, vertically centred against them. Explicit
   placement rather than a wrapper element, so the reversed rows only
   have to swap two column numbers. */
.step__panel {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: clamp(16px, 3.4cqw, 66px);
  padding: clamp(22px, 3.6cqw, 70px);
}

.step__icon  { grid-area: 1 / 1; }
.step__label { grid-area: 2 / 1; }
.step__title { grid-area: 3 / 1; }

/* copy plus its bullets travel together, so the reversed rows only swap
   one grid area rather than one per paragraph */
.step__body {
  grid-area: 1 / 2 / 4 / 3;
  align-self: center;
}

/* the reversed row hangs its icon, label and title off the right edge */
.step--reverse .step__panel {
  grid-template-columns: minmax(0, 1fr) 42%;
}

.step--reverse .step__icon  { grid-area: 1 / 2; justify-self: end; }
.step--reverse .step__label { grid-area: 2 / 2; }
.step--reverse .step__title { grid-area: 3 / 2; }
.step--reverse .step__body  { grid-area: 1 / 1 / 4 / 2; }

.step--reverse .step__label,
.step--reverse .step__title {
  text-align: right;
}

/* Line-drawn, but seated on a filled plate rather than floating loose on
   the panel: at this size a bare hairline reads as a smudge, and the plate
   is what lets each step carry a second colour instead of just the panel's
   own. The plate is the element's own background, so padding (with the
   global border-box) insets the drawing without a wrapper. */
.step__icon {
  width: clamp(50px, 5.4cqw, 106px);
  height: clamp(50px, 5.4cqw, 106px);
  padding: clamp(10px, 1.1cqw, 22px);
  margin-bottom: clamp(12px, 1.7cqw, 32px);
  justify-self: start;
  border-radius: clamp(14px, 1.5cqw, 30px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.step--orange .step__panel {
  background: var(--orange);
  color: #fff;
}

.step--slate .step__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--slate);
  color: #fff;
}

/* The contour field, drawn in white on the slate. z-index -1 keeps it over
   the panel's own background but under every line of copy. */
.step__topo {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  z-index: -1;
  fill: none;
  stroke: rgba(255, 255, 255, .17);
  stroke-width: .5;
  pointer-events: none;
  animation: topoDrift 30s ease-in-out infinite;
}

/* the same scrim the services card uses: the survey stays legible along
   the top edge and gets out of the way under the text */
.step--slate .step__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(178deg,
              rgba(70, 105, 124, .06) 0%,
              rgba(70, 105, 124, .48) 46%,
              rgba(70, 105, 124, .72) 100%);
}

/* each plate pulls the *other* two brand colours in, so the three steps
   read as a set rather than three tints of one panel */
.step--orange .step__icon {
  background: #fff;
  stroke: var(--orange);
  box-shadow: 0 8px 22px rgba(120, 44, 8, .22);
}

.step--slate .step__icon {
  background: #fff;
  stroke: var(--slate);
  box-shadow: 0 8px 22px rgba(15, 34, 46, .24);
}

.step--cream .step__icon {
  background: var(--orange);
  stroke: #fff;
  box-shadow: 0 8px 22px rgba(243, 114, 49, .28);
}

/* the cream panel sits on a white section, so it needs an edge of its own
   to still read as a panel now the photo isn't framing it */
.step--cream .step__panel {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #ece5d6;
}

.step__label {
  margin: 0 0 clamp(8px, 1.4cqw, 26px);
  font-size: clamp(12px, 1.4cqw, 28px);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4cqw, 48px);
  line-height: 1.27;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.step__text {
  margin: 0;
  font-size: clamp(15px, 1.44cqw, 30px);
  line-height: 1.62;
}

/* --- step bullets ----------------------------------------------------
   Arrow markers drawn in CSS rather than set as a glyph, so they inherit
   the panel's colour and scale with the copy. */
.step__list {
  margin: clamp(12px, 1.5cqw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, .9cqw, 18px);
}

.step__list li {
  position: relative;
  padding-left: 1.75em;
  font-size: clamp(13px, 1.24cqw, 26px);
  line-height: 1.6;
}

.step__list li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .52em;
  width: 0;
  height: 0;
  border-left: .5em solid currentColor;
  border-top: .34em solid transparent;
  border-bottom: .34em solid transparent;
  opacity: .85;
}

.step--cream .step__text,
.step--cream .step__list {
  color: #3a3a3a;
}

.step--cream .step__list li::before {
  color: var(--orange);
  opacity: 1;
}

@media (max-width: 820px) {
  .step__panel,
  .step--reverse .step__panel {
    grid-template-columns: 1fr;
    row-gap: clamp(10px, 2.5vw, 20px);
  }

  /* one column, so every block falls back to source order */
  .step__icon,
  .step__label,
  .step__title,
  .step__body,
  .step--reverse .step__icon,
  .step--reverse .step__label,
  .step--reverse .step__title,
  .step--reverse .step__body {
    grid-area: auto;
    justify-self: start;
    text-align: left;
  }

  .step__icon {
    margin-bottom: 0;
  }
}

/* ====================================================================
   Validator
   ==================================================================== */
.validate {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(56px, 8vw, 150px) var(--gut);
}

.validate__inner {
  container-type: inline-size;
}

.validate__head {
  text-align: center;
  max-width: 62cqw;
  margin: 0 auto clamp(30px, 5cqw, 90px);
}

.validate__eyebrow {
  margin: 0 0 clamp(10px, 1.5cqw, 28px);
  font-size: clamp(10px, 1cqw, 20px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}

.validate__title {
  margin: 0 0 clamp(12px, 1.8cqw, 34px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5.6cqw, 116px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.validate__lead {
  margin: 0;
  font-size: clamp(12px, 1.25cqw, 25px);
  line-height: 1.6;
  color: rgba(255, 253, 250, .68);
}

/* stat strip */
.validate__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6cqw, 30px);
  margin-bottom: clamp(30px, 4.6cqw, 84px);
}

.vstat {
  padding: clamp(16px, 2.4cqw, 44px) clamp(12px, 1.8cqw, 32px);
  border: 1px solid rgba(255, 253, 250, .14);
  border-radius: clamp(10px, 1.2cqw, 22px);
  text-align: center;
}

.vstat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.2cqw, 66px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--orange);
}

.vstat span {
  display: block;
  margin-top: clamp(6px, .8cqw, 15px);
  font-size: clamp(9px, .95cqw, 19px);
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .6);
}

/* three steps */
.validate__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2cqw, 38px);
  margin-bottom: clamp(30px, 4.6cqw, 84px);
}

.vstep {
  position: relative;
  padding: clamp(18px, 2.6cqw, 48px);
  border-radius: clamp(10px, 1.2cqw, 22px);
  background: rgba(255, 253, 250, .05);
  border: 1px solid rgba(255, 253, 250, .1);
}

.vstep b {
  display: block;
  margin-bottom: clamp(14px, 2cqw, 38px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.9cqw, 38px);
  line-height: 1;
  color: rgba(255, 253, 250, .28);
}

.vstep h3 {
  margin: 0 0 clamp(6px, .9cqw, 17px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.75cqw, 36px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.vstep p {
  margin: 0;
  font-size: clamp(11px, 1.1cqw, 22px);
  line-height: 1.6;
  color: rgba(255, 253, 250, .62);
}

.validate__cta {
  text-align: center;
}

.validate__btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4cqw, 26px);
  height: clamp(40px, 4cqw, 78px);
  padding: 0 clamp(6px, .6cqw, 12px) 0 clamp(20px, 2.4cqw, 46px);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: clamp(11px, 1.1cqw, 22px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.validate__btn:hover {
  background: #e35f1d;
  transform: translateY(-2px);
}

.validate__btn i {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.8cqw, 54px);
  height: clamp(28px, 2.8cqw, 54px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  flex: none;
}

.validate__btn svg {
  width: 52%;
  height: 52%;
}

.validate__note {
  margin: clamp(12px, 1.5cqw, 28px) 0 0;
  font-size: clamp(9px, .95cqw, 19px);
  letter-spacing: .06em;
  color: rgba(255, 253, 250, .45);
}

@media (max-width: 900px) {
  .validate__head { max-width: none; }
  .validate__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .validate__steps { grid-template-columns: 1fr; }
}

/* ====================================================================
   Books
   ==================================================================== */
.books {
  background: var(--bone);
  padding: clamp(56px, 8vw, 140px) var(--gut);
}

.books__inner {
  container-type: inline-size;
}

.books__head {
  text-align: center;
  margin-bottom: clamp(24px, 4.2cqw, 76px);
}

.books__eyebrow {
  margin: 0 0 clamp(8px, 2cqw, 36px);
  font-size: clamp(10px, 1.11cqw, 22px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

.books__title {
  margin: 0 0 clamp(8px, 1.7cqw, 32px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.1cqw, 84px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.books__text {
  margin: 0 auto;
  max-width: 72cqw;
  font-size: clamp(11px, 1.17cqw, 24px);
  line-height: 1.6;
  color: #4a4a4a;
}

/* the claim leads, the invitation follows — same pattern as the reviews */
.books__text strong {
  font-weight: 700;
  color: var(--ink);
}

/* the card stack is inset from the section's own content width */
.books__list {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.3cqw, 42px);
  max-width: 75.3cqw;
  margin: 0 auto;
}

.book {
  display: grid;
  grid-template-columns: 41% 59%;
  align-items: center;
  /* warm near-white, so the card lifts off the bone ground */
  background: var(--panel);
  border-radius: clamp(12px, 1.9cqw, 36px);
  padding: clamp(18px, 3.5cqw, 64px);
  box-shadow: 0 10px 40px rgba(17, 17, 17, .07);
}

.book--reverse {
  grid-template-columns: 59% 41%;
}

.book--reverse .book__media {
  order: 2;
}

/* Empty on purpose — drop the cover art in here. The aspect ratio holds
   the card's height so the layout doesn't shift once images land. */
.book__media {
  container-type: size;
  margin: 0;
  aspect-ratio: 239 / 217;
  display: grid;
  place-items: center;
}

.book__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- 3D book --------------------------------------------------------
   thepace.png is a flat cover, so the whole body is built in CSS: back
   cover, spine, page block, an inside page, and a hinged front cover
   that swings open on the spine. --d is half the book's depth. */
/* --- 3D book --------------------------------------------------------
   thepace.png is a flat cover, so the depth is built in CSS: back cover,
   spine and page block behind a fixed front cover. --d is half the
   book's depth. The block leans and floats; it does not open. */
.book3d {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  perspective: 1600px;
}

.book3d__float {
  animation: bookFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
}

.book3d__inner {
  --d: clamp(6px, .85cqw, 15px);
  position: relative;
  --ar: 590 / 890;
  height: 94cqh;
  aspect-ratio: var(--ar);
  transform-style: preserve-3d;
  /* flat and front-on (reads 2D) -> turns to show depth -> holds while
     the cover opens -> turns back. */
  animation: bookTurn 12s cubic-bezier(.5, 0, .2, 1) infinite;
}

/* let visitors stop it and look */
.book:hover .book3d__inner,
.book:hover .book3d__leaf,
.book:hover .book3d__float {
  animation-play-state: paused;
}

/* The second book trails the first rather than running half a cycle behind:
   at -6s it sat parked in the long hold at -30deg for as long as anyone
   watched, which read as "the second book doesn't animate". */
.book--reverse .book3d__inner,
.book--reverse .book3d__leaf,
.book--reverse .book3d__float {
  animation-delay: -1.6s;
}

.book3d__inner > * {
  position: absolute;
  inset: 0;
}

.book3d__back {
  background: linear-gradient(120deg, #17427f, #0f2f5e);
  border-radius: 5px 2px 2px 5px;
  transform: translateZ(calc(var(--d) * -1));
}

/* spine bridges back to front, centred on the left edge */
.book3d__spine {
  left: calc(var(--d) * -1);
  width: calc(var(--d) * 2);
  background: linear-gradient(90deg, #0b2750, #1b4a8f 45%, #0b2750);
  transform: rotateY(-90deg);
}

.book3d__pages {
  left: auto;
  right: calc(var(--d) * -1);
  width: calc(var(--d) * 2);
  background: repeating-linear-gradient(90deg, #fdfdfb 0 1px, #dcd8d0 1px 2px);
  transform: rotateY(90deg);
}

/* front cover — fixed to the block; it no longer swings open */
.book3d__leaf {
  transform-style: preserve-3d;
  transform: translateZ(var(--d));
}

.leaf__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 2px 5px 5px 2px;
}

.leaf__front {
  object-fit: cover;
  box-shadow: 0 26px 50px rgba(17, 17, 17, .3);
}

/* Bestseller seal, applied to the cover like a sticker. It rides inside
   the leaf so it turns with the cover, sits one unit proud of it in Z, and
   overhangs the top-right corner so it covers as little artwork as
   possible. The tag is decorative: `.book__tag` already says it in text. */
/* the `.book3d` qualifier is load-bearing: `.book__media img` sets
   width/height auto and outranks a lone class */
/* Size and inset started from Book1.png.png, the mockup this section is
   meant to look like (25% of the cover's width, ~7% in from both edges).
   Sized off Rewired, which is the tighter of the two covers: its artwork
   starts at y9% (flag, then the strapline, then the wordmark at y14%), so
   from a .5% inset 13% is the largest seal that lands on bare cover. The
   mockup's 25% suits PACE, whose top-left is open sky, but overlapped the
   title here. Both books share one rule, so the two read as a matched
   pair — measure Rewired before changing these numbers.

   Offsets are `left`/`top` — percentages of the cover — rather than a
   percentage translate, which resolves against the seal's own box and
   made the inset move whenever the seal was resized.

   translateZ is 1px, not 20px. At 20px under a 1600px perspective the
   seal parallaxed away from the cover as the block turned, which is what
   read as floating; 1px only breaks the coplanar tie with the artwork.
   It stays clear of x=0 because the spine is a plane standing on that
   edge in the same preserve-3d group and would sort in front of it. */
.book3d .leaf__badge {
  position: absolute;
  /* Flush to the corner. left cannot reach 0: the spine is a plane standing
     on x=0 in the same preserve-3d group, and a seal touching it sorts
     against the spine at the edge. */
  left: .15%;
  top: 0;
  width: 16%;
  height: auto;
  transform: translateZ(1px);
  /* a contact shadow — printed on the cover, not hovering over it */
  filter: drop-shadow(0 1px 2px rgba(17, 17, 17, .45));
  backface-visibility: hidden;
  pointer-events: none;
}

.book3d--rewired .book3d__inner { --ar: 592 / 942; }

.book3d--rewired .book3d__back {
  background: linear-gradient(120deg, #3c4550, #22282f);
}

.book3d--rewired .book3d__spine {
  background: linear-gradient(90deg, #1b2027, #454e59 45%, #1b2027);
}

@keyframes bookTurn {
  0%, 10%   { transform: rotateY(0deg) rotateX(0deg); }
  26%, 84%  { transform: rotateY(-30deg) rotateX(6deg); }
  96%, 100% { transform: rotateY(0deg) rotateX(0deg); }
}

@keyframes bookFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .book3d__float,
  .book3d__inner { animation: none; }

  /* parked at an angle so the block still reads as a book, not a flat cover */
  .book3d__inner { transform: rotateY(-24deg) rotateX(5deg); }
}

.book__tag {
  margin: 0 0 clamp(6px, 1.1cqw, 20px);
  font-size: clamp(9px, 1.06cqw, 21px);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

.book__title {
  margin: 0 0 clamp(8px, 1.5cqw, 28px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.75cqw, 56px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.book__desc {
  margin: 0 0 clamp(12px, 2.4cqw, 44px);
  font-size: clamp(11px, 1.17cqw, 24px);
  line-height: 1.7;
  color: #4a4a4a;
}

.book__btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.5cqw, 28px);
  height: clamp(30px, 3.5cqw, 66px);
  padding: 0 clamp(6px, .7cqw, 14px) 0 clamp(12px, 1.8cqw, 34px);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: clamp(8px, .94cqw, 19px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}

.book__btn:hover {
  background: #e35f1d;
}

.book__btn i {
  display: grid;
  place-items: center;
  width: clamp(20px, 2.4cqw, 46px);
  height: clamp(20px, 2.4cqw, 46px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  flex: none;
}

.book__btn svg {
  width: 55%;
  height: 55%;
}

/* ====================================================================
   Books — mobile
   Two columns inside a 75% measure leaves the cover a thumbnail and the
   copy a gutter, so the card stacks and takes the full width.
   ==================================================================== */
@media (max-width: 700px) {
  .books__list {
    max-width: none;
  }

  .book,
  .book--reverse {
    grid-template-columns: 1fr;
    row-gap: clamp(16px, 4vw, 28px);
  }

  .book--reverse .book__media {
    order: 0;
  }

  /* an explicit width, not max-width: the media box is a size container,
     so auto margins on an auto width collapse it to nothing */
  .book__media {
    width: min(100%, 240px);
    margin-inline: auto;
  }
}

/* ====================================================================
   Speaking
   ==================================================================== */
.speaking {
  background: #fff;
  padding: clamp(56px, 8vw, 140px) var(--gut);
}

.speaking__inner {
  container-type: inline-size;
}

.speaking__head {
  text-align: center;
  margin-bottom: clamp(24px, 5.7cqw, 100px);
}

.speaking__eyebrow {
  margin: 0 0 clamp(6px, 1.5cqw, 28px);
  font-size: clamp(10px, 1.1cqw, 22px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}

.speaking__title {
  margin: 0 0 clamp(8px, 1.4cqw, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8cqw, 58px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

.speaking__text {
  margin: 0 auto;
  max-width: 72cqw;
  font-size: clamp(11px, 1.19cqw, 24px);
  line-height: 1.6;
  color: #4a4a4a;
}

.player {
  position: relative;
  aspect-ratio: 1093 / 490;
  border-radius: clamp(12px, 1.83cqw, 34px);
  background: #0d1626;
}

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* Click-to-load facade: the poster stands in until the user hits play,
   so the page never pulls the YouTube player on load. */
.player__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

.player__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.62);
}

.player__play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(38px, 4.8cqw, 92px);
  height: clamp(38px, 4.8cqw, 92px);
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}

.player__poster:hover .player__play {
  transform: scale(1.08);
}

.player__play svg {
  width: 38%;
  height: 38%;
  margin-left: 8%;
  fill: var(--navy);
}

/* "Watch here" tab notched into the video's top-right corner */
.player__badge {
  position: absolute;
  top: clamp(-26px, -3cqw, -8px);
  right: clamp(4px, .9cqw, 18px);
  z-index: 2;
  background: #fff;
  border-radius: 999px;
  padding: clamp(4px, .75cqw, 14px);
}

.player__badge a {
  display: flex;
  align-items: center;
  gap: clamp(6px, .9cqw, 18px);
  height: clamp(32px, 4.4cqw, 84px);
  padding: 0 clamp(12px, 1.6cqw, 30px);
  border-radius: 999px;
  background: var(--slate);
  color: #fff;
  font-size: clamp(9px, 1.1cqw, 22px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}

.player__badge a:hover {
  background: #3a596a;
}

.player__badge i {
  display: grid;
  place-items: center;
  width: clamp(22px, 2.9cqw, 56px);
  height: clamp(16px, 2.1cqw, 40px);
  border-radius: clamp(4px, .6cqw, 12px);
  background: #fff;
  flex: none;
}

.player__badge i svg {
  width: 42%;
  height: 42%;
  margin-left: 8%;
  fill: var(--navy);
}

/* --- logo marquee -------------------------------------------------- */
.marquee {
  overflow: hidden;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Spacing is margin, not gap: translateX(-50%) only loops seamlessly if
   each half has an identical trailing gap, which `gap` does not give. */
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 90s linear infinite;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track img {
  height: clamp(12px, 1.25cqw, 26px);
  width: auto;
  margin-right: clamp(24px, 4cqw, 72px);
  flex: none;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ====================================================================
   Press — the media page's clip grid
   ==================================================================== */
.press {
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  padding: clamp(40px, 5.4vw, 100px) var(--gut) clamp(56px, 8vw, 140px);
}

.press__inner {
  container-type: inline-size;
}

.press__head {
  text-align: center;
  margin-bottom: clamp(28px, 4.4cqw, 82px);
}

.press__eyebrow {
  margin: 0 0 clamp(6px, 1.5cqw, 28px);
  font-size: clamp(10px, 1.1cqw, 22px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}

.press__title {
  margin: 0 0 clamp(8px, 1.4cqw, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8cqw, 58px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

.press__text {
  margin: 0 auto;
  max-width: 72cqw;
  font-size: clamp(11px, 1.19cqw, 24px);
  line-height: 1.6;
  color: #4a4a4a;
}

.press__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2cqw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each grid cell is a link end to end, so the whole card is the target
   rather than a small button inside it */
.press__grid > li {
  display: flex;
}

.clip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.6cqw, 52px) clamp(14px, 1.8cqw, 36px) clamp(18px, 2.2cqw, 44px);
  border: 1px solid #e9edf3;
  border-radius: clamp(10px, 1.1cqw, 22px);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.clip:hover {
  transform: translateY(-4px);
  border-color: #dbe3ef;
  box-shadow: 0 16px 40px rgba(22, 41, 74, .10);
}

/* The logos arrive at wildly different aspect ratios — square podcast art
   next to a wordmark five times as wide. A fixed-height box with `contain`
   is what keeps the rows on one baseline without cropping anyone's mark. */
/* minmax(0, 1fr), not an auto row: an auto row sizes to the image, which
   makes the img's own `max-height: 100%` cyclic — it resolves against the
   grown row instead of the box, and tall square covers spill over the
   title below. A definite row breaks the cycle. */
.clip__logo {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: clamp(76px, 8cqw, 160px);
  margin: 0 0 clamp(14px, 1.7cqw, 34px);
}

.clip__logo img {
  max-width: min(100%, clamp(108px, 11.5cqw, 228px));
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.clip__title {
  margin: 0 0 clamp(8px, 1cqw, 20px);
  font-size: clamp(13px, 1.32cqw, 27px);
  font-weight: 600;
  line-height: 1.35;
  color: #22409a;
}

.clip__date {
  margin: auto 0 0;
  font-size: clamp(10px, 1.02cqw, 21px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
}

/* names the action behind the card — "Listen Here", "Read Blog" — so the
   destination is legible before the click */
.clip__cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(10px, 1.2cqw, 24px);
  font-size: clamp(9px, .92cqw, 19px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .25s ease;
}

.clip__cta i {
  display: inline-flex;
  transition: translate .25s ease;
}

.clip__cta svg {
  width: 1.15em;
  height: 1.15em;
}

.clip:hover .clip__cta {
  color: var(--orange);
}

.clip:hover .clip__cta i {
  translate: 4px 0;
}

/* the shared design-system button, used once under the grid */
.press__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3.2cqw, 66px);
}

.press__btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .9cqw, 18px);
  height: clamp(44px, 3.6cqw, 72px);
  padding: 0 clamp(20px, 2.2cqw, 44px);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: clamp(12px, 1.05cqw, 21px);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s ease, transform .2s ease;
}

.press__btn i {
  display: inline-flex;
  transition: translate .25s ease;
}

.press__btn svg {
  width: 1.15em;
  height: 1.15em;
}

.press__btn:hover {
  background: #e35f1d;
  transform: translateY(-1px);
}

.press__btn:hover i {
  translate: 4px 0;
}

@media (max-width: 900px) {
  .press__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ====================================================================
   Engagements
   ==================================================================== */
.plans {
  background: #fff;
  padding: clamp(34px, 4.2vw, 72px) var(--gut) clamp(56px, 8vw, 140px);
}

/* this section sits on a narrower measure than the rest of the page */
.plans__inner {
  max-width: 84.1%;
  margin-inline: auto;
  container-type: inline-size;
}

.plans__head {
  text-align: center;
  margin-bottom: clamp(26px, 4cqw, 70px);
}

.plans__eyebrow {
  margin: 0 0 clamp(10px, 2.35cqw, 40px);
  font-size: clamp(11px, 1.17cqw, 24px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plans__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.28cqw, 88px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.07cqw, 38px);
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  border-radius: clamp(14px, 1.66cqw, 32px);
  padding: clamp(20px, 3.8cqw, 70px);
  background: #fff;
  border: 1px solid #e6e6e6;
}

.plan--featured {
  background: var(--slate);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 50px rgba(17, 17, 17, .18);
}

.plan__badge {
  align-self: flex-end;
  margin: 0 0 clamp(14px, 5.3cqw, 96px);
  font-size: clamp(10px, 1.04cqw, 21px);
  line-height: 1;
}

/* only the featured card wears the badge as a pill */
.plan--featured .plan__badge {
  display: inline-flex;
  align-items: center;
  height: clamp(26px, 3.1cqw, 58px);
  padding: 0 clamp(12px, 1.7cqw, 32px);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
}

/* two auto margins split the slack, so the lists and buttons line up
   across all three cards even though the titles differ in size */
.plan__name {
  margin: auto 0 0;
  font-size: clamp(15px, 1.5cqw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.plan--featured .plan__name {
  font-size: clamp(26px, 4.55cqw, 94px);
}

.plan__desc {
  margin: clamp(12px, 4.3cqw, 78px) 0 clamp(12px, 3.4cqw, 62px);
  font-size: clamp(11px, 1.07cqw, 22px);
  line-height: 1.5;
  color: #3a3a3a;
}

.plan--featured .plan__desc {
  color: rgba(255, 255, 255, .92);
}

.plan__list {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8cqw, 32px);
}

.plan__list li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1cqw, 22px);
  font-size: clamp(10px, .94cqw, 19px);
  line-height: 1.3;
}

.plan__list svg {
  width: clamp(11px, 1.1cqw, 22px);
  height: clamp(11px, 1.1cqw, 22px);
  flex: none;
}

.plan__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: clamp(10px, 1.6cqw, 30px);
  margin-top: clamp(16px, 2.6cqw, 48px);
  height: clamp(32px, 3.1cqw, 58px);
  padding: 0 clamp(4px, .5cqw, 10px) 0 clamp(14px, 1.9cqw, 36px);
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(9px, .9cqw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease;
}

.plan__btn:hover {
  transform: translateY(-2px);
}

.plan__btn i {
  display: grid;
  place-items: center;
  width: clamp(22px, 2.07cqw, 40px);
  height: clamp(22px, 2.07cqw, 40px);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  flex: none;
}

.plan__btn svg {
  width: 55%;
  height: 55%;
}

@media (max-width: 900px) {
  .plans__inner {
    max-width: none;
  }

  .plans__grid {
    grid-template-columns: 1fr;
  }

  .plan__name,
  .plan__list {
    margin-top: clamp(16px, 4cqw, 40px);
  }

  .plan__desc {
    margin-top: clamp(10px, 2cqw, 20px);
  }
}

/* ====================================================================
   Global Experience — headline numbers
   ==================================================================== */
/* Warm wash rather than flat white: the row is the one place on the page
   where the orange is the subject, so the ground shades toward it. */
.stats {
  background: linear-gradient(180deg, #fff 0%, #fff 26%, #fdf2ec 100%);
  padding: clamp(48px, 6.4vw, 116px) var(--gut) clamp(56px, 8vw, 140px);
}

.stats__inner {
  container-type: inline-size;
}

/* geometry-only <defs>; nothing here paints */
.stats__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stats__head {
  text-align: center;
  margin-bottom: clamp(26px, 4cqw, 76px);
}

.stats__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4cqw, 84px);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.stats__title em {
  font-style: normal;
  color: var(--orange);
}

/* five across on desktop; the hairlines between them carry the rhythm
   rather than boxes, so the row stays light next to the card sections */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(8px, 1.5cqw, 30px);
  border-left: 1px solid rgba(22, 41, 74, .13);
}

.stat:first-child {
  border-left: 0;
}

/* --- medallion ------------------------------------------------------
   White disc, with an open arc swept around its lower two-thirds. The arc
   is a <path> rather than a dashed <circle> so the two ends land on exact
   angles instead of wherever the circumference maths happens to fall. */
.stat__medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 11.4cqw, 232px);
  height: clamp(96px, 11.4cqw, 232px);
  margin-bottom: clamp(14px, 1.9cqw, 38px);
}

.stat__medallion::before {
  content: "";
  position: absolute;
  inset: clamp(5px, .62cqw, 13px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 41, 74, .10);
}

/* 161 is the arc's own length (2*pi*46 * 200/360), so the dash draws the
   stroke on from one end rather than fading it in */
.stat__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--orange);
  stroke-width: 7;
  stroke-linecap: butt;
  stroke-dasharray: 161;
  stroke-dashoffset: 161;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, .75, .2, 1);
  transition-delay: var(--rd, 0ms);
}

.stats__grid .stat:nth-child(even) .stat__arc {
  stroke: #22409a;
}

.stat.is-in .stat__arc {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stat__arc {
    stroke-dashoffset: 0;
    transition: none;
  }
}

.stat__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1px, .2cqw, 5px);
}

/* Poppins, not the display face: the reference sets these as heavy
   geometric numerals, and Anton's condensed figures read as a headline. */
.stat__value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(21px, 2.75cqw, 56px);
  line-height: 1;
  letter-spacing: -.015em;
  color: #22409a;
}

.stat__value sup {
  font-size: .68em;
  line-height: 1;
  vertical-align: baseline;
}

.stat__label {
  margin: 0;
  font-size: clamp(9px, .95cqw, 19px);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #22409a;
}

.stat__text {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(11px, 1.02cqw, 21px);
  line-height: 1.55;
  color: #3f4757;
}

@media (max-width: 1024px) {
  .stats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(24px, 4cqw, 56px);
  }

  /* the hairline only means anything within a row, and the row length
     changes at every breakpoint */
  .stats__grid .stat:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__grid .stat {
    border-left: 1px solid rgba(22, 41, 74, .13);
  }

  .stats__grid .stat:nth-child(odd) {
    border-left: 0;
  }
}

/* ====================================================================
   Testimonials
   ==================================================================== */
/* Sits on bone rather than white, so the ink cards read as objects on the
   brief's ground. Eases in from the Global Experience wash above and back
   out to the FAQ's white below, so neither edge lands on a seam. */
.reviews {
  background: linear-gradient(180deg,
      #fdf2ec 0%, var(--bone) 20%, var(--bone) 84%, #fff 100%);
  padding: clamp(56px, 8vw, 140px) var(--gut) clamp(30px, 4vw, 70px);
}

.reviews__inner {
  container-type: inline-size;
}

.reviews__head {
  text-align: center;
  margin-bottom: clamp(28px, 6cqw, 110px);
}

.reviews__eyebrow {
  margin: 0 0 clamp(6px, 1.4cqw, 26px);
  font-size: clamp(10px, 1cqw, 20px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

.reviews__title {
  margin: 0 0 clamp(6px, 1.4cqw, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4cqw, 70px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.reviews__text {
  margin: 0 auto;
  max-width: 62cqw;
  font-size: clamp(13px, 1.35cqw, 28px);
  line-height: 1.55;
  color: #4a4a4a;
}

/* the lead-in carries the claim; the rest is supporting detail */
.reviews__text strong {
  font-weight: 700;
  color: var(--ink);
}

/* --- carousel shell -------------------------------------------------
   One horizontal row that loops. The track is duplicated in JS so the
   wrap is a silent jump between two identical frames rather than a
   rewind, and the centred card is scaled up. */
.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
  /* room for the card shadows, which would otherwise be clipped flat */
  padding: clamp(10px, 1.1cqw, 22px) 0 clamp(18px, 2.1cqw, 42px);
}

.carousel__track {
  display: flex;
  align-items: center;
  gap: var(--rev-gap, clamp(14px, 2.2cqw, 42px));
  will-change: transform;
}

.carousel.is-ready .carousel__track {
  transition: transform .55s cubic-bezier(.22, .75, .2, 1);
}

.carousel.is-dragging .carousel__track {
  transition: none;
  cursor: grabbing;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6cqw, 30px);
  margin-top: clamp(10px, 1.4cqw, 26px);
}

.carousel__nav {
  display: grid;
  place-items: center;
  width: clamp(36px, 3.4cqw, 64px);
  height: clamp(36px, 3.4cqw, 64px);
  border: 1px solid var(--orange);
  border-radius: 50%;
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.carousel__nav svg {
  width: 42%;
  height: 42%;
}

.carousel__nav:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: clamp(6px, .7cqw, 12px);
}

.carousel__dot {
  width: clamp(7px, .7cqw, 12px);
  height: clamp(7px, .7cqw, 12px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 26, 26, .18);
  cursor: pointer;
  transition: background .2s ease, width .25s ease;
}

.carousel__dot.is-active {
  width: clamp(20px, 2cqw, 36px);
  border-radius: 999px;
  background: var(--orange);
}

.review {
  flex: none;
  width: var(--rev-card, clamp(272px, 30cqw, 560px));
  display: flex;
  flex-direction: column;
  border-radius: clamp(10px, 1.3cqw, 26px);
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(26, 26, 26, .07);
  /* Every card reads at full strength now — scaling and dimming the
     neighbours fought the ink banner and made the row look unfinished at
     its edges. The centred card is marked only by a deeper shadow, so
     nothing reflows as the track moves. */
  transition: box-shadow .55s ease;
}

.review.is-active {
  box-shadow: 0 22px 54px rgba(26, 26, 26, .13);
}

/* --- ink banner ------------------------------------------------------
   Was template navy. Ink puts the card on the bone/ink/orange brief and
   lets the orange name carry the only colour in the band. The folded
   corner tail that used to hang off the bottom-left is gone with it —
   it was a flourish the rest of the page never repeats. */
.review__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2cqw, 24px);
  min-height: clamp(74px, 8.4cqw, 168px);
  padding: clamp(14px, 1.7cqw, 34px) clamp(16px, 1.9cqw, 38px);
  border-radius: clamp(10px, 1.3cqw, 26px) clamp(10px, 1.3cqw, 26px) 0 0;
  background: var(--ink);
  color: #fff;
}

.review__id {
  min-width: 0;
}

.review__name {
  margin: 0 0 clamp(4px, .5cqw, 10px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.6cqw, 33px);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--orange);
}

.review__role {
  margin: 0;
  font-size: clamp(9px, .92cqw, 19px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

/* Orange ring straight onto the ink band. The white outer halo this used
   to carry only made sense against navy; on ink it read as a second,
   competing ring. */
.review__avatar {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: clamp(52px, 5.6cqw, 112px);
  height: clamp(52px, 5.6cqw, 112px);
  border-radius: 50%;
  background: var(--bone);
  border: clamp(2px, .26cqw, 5px) solid var(--orange);
  overflow: hidden;
}

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

/* stand-in until a real portrait is dropped in */
.review__initials {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.9cqw, 38px);
  letter-spacing: .04em;
  color: var(--ink);
}

/* --- body ----------------------------------------------------------- */
.review__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 2.2cqw, 44px) clamp(16px, 1.9cqw, 38px) clamp(16px, 1.9cqw, 38px);
}

/* Collapsed to a fixed number of lines with a fade off the last one, so
   every card is the same height until one is opened. */
.review__text {
  margin: 0 0 clamp(14px, 1.6cqw, 32px);
  font-size: clamp(11px, 1.07cqw, 22px);
  line-height: 1.62;
  color: #23303f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .25) 100%);
  mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .25) 100%);
}

.review__text.is-open {
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* a quote short enough to fit needs no fade and no button */
.review__body.is-short .review__text {
  -webkit-mask-image: none;
  mask-image: none;
}

.review__body.is-short .review__more {
  display: none;
}

.review__more {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, .7cqw, 14px);
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(11px, 1.07cqw, 22px);
  cursor: pointer;
  transition: color .2s ease;
}

.review__more svg {
  width: 1.1em;
  height: 1.1em;
  transition: translate .25s ease;
}

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

.review__more:hover svg {
  translate: 4px 0;
}

@media (max-width: 1024px) {
  .reviews {
    --rev-card: clamp(260px, 46cqw, 420px);
  }
}

@media (max-width: 680px) {
  .reviews {
    --rev-card: min(82vw, 380px);
    --rev-gap: 14px;
  }
}

/* ====================================================================
   Logo band — full bleed, no gutter
   ==================================================================== */
.band {
  container-type: inline-size;
  background: #fff;
  /* About already carries the space above; this closes the gap to Services */
  padding: 0 0 clamp(56px, 8vw, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4cqw, 48px);
}

.band__title {
  margin: 0 0 clamp(12px, 1.8cqw, 36px);
  padding: 0 var(--gut);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.2cqw, 66px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.band__title em {
  font-style: normal;
  color: var(--orange);
}

.band .marquee__track img {
  height: clamp(13px, 1.9cqw, 38px);
  margin-right: clamp(28px, 4.2cqw, 88px);
  filter: grayscale(1);
  opacity: .45;
  transition: filter .25s ease, opacity .25s ease;
}

/* the track pauses under the cursor, so a single logo can be picked out
   and read in its own colours */
.band .marquee__track img:hover {
  filter: none;
  opacity: 1;
}

/* ====================================================================
   FAQ
   ==================================================================== */
.faq {
  background: #fff;
  padding: clamp(40px, 6vw, 110px) var(--gut) clamp(56px, 8vw, 140px);
}

.faq__inner {
  container-type: inline-size;
}

.faq__head {
  text-align: center;
  margin-bottom: clamp(20px, 4.4cqw, 80px);
}

.faq__eyebrow {
  margin: 0 0 clamp(6px, 1.4cqw, 26px);
  font-size: clamp(10px, 1cqw, 20px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}

.faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4cqw, 70px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

/* the accordion runs on a narrower measure than the section */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1.16cqw, 22px);
  max-width: 70.9cqw;
  margin: 0 auto;
}

.faq__item {
  border: 1px solid #e6e6e6;
  border-radius: clamp(6px, 1.16cqw, 22px);
  background: #fff;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: clamp(10px, 1.75cqw, 34px) clamp(12px, 1.75cqw, 34px);
  font-size: clamp(10px, 1.3cqw, 27px);
  line-height: 1.3;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  width: clamp(10px, 1.5cqw, 30px);
  height: clamp(10px, 1.5cqw, 30px);
  flex: none;
}

.faq__icon i {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--ink);
  transition: transform .25s ease;
}

.faq__icon i:last-child {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon i:last-child {
  transform: rotate(0deg);
}

.faq__a {
  margin: 0;
  padding: 0 clamp(12px, 1.75cqw, 34px) clamp(12px, 1.75cqw, 34px);
  font-size: clamp(10px, 1.15cqw, 24px);
  line-height: 1.6;
  color: #4a4a4a;
}

/* ====================================================================
   Closing CTA
   ==================================================================== */
.cta {
  background: #fff;
  padding: 0 var(--gut) clamp(56px, 8vw, 140px);
}

.cta__inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 66.8fr 32fr;
  gap: clamp(6px, 1.2cqw, 22px);
  align-items: stretch;
}

.cta__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: clamp(8px, 1.75cqw, 34px);
  background: var(--sky);
  padding: clamp(20px, 8.7cqw, 170px);
}

.cta__eyebrow {
  margin: 0 0 clamp(10px, 3.8cqw, 74px);
  font-size: clamp(8px, .95cqw, 20px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate);
}

.cta__title {
  margin: 0 0 clamp(12px, 3.6cqw, 70px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3.9cqw, 80px);
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--slate);
}

.cta__btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: clamp(6px, .9cqw, 18px);
  height: clamp(24px, 2.8cqw, 54px);
  padding: 0 clamp(3px, .35cqw, 7px) 0 clamp(10px, 1.3cqw, 26px);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: clamp(7px, .8cqw, 17px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease;
}

.cta__btn:hover {
  transform: translateY(-2px);
}

.cta__btn i {
  display: grid;
  place-items: center;
  width: clamp(18px, 2.1cqw, 40px);
  height: clamp(18px, 2.1cqw, 40px);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  flex: none;
}

.cta__btn svg {
  width: 55%;
  height: 55%;
}

/* A framed photograph, so it stays inside the panel. (The break-out
   treatment only worked because the old asset was a cut-out figure.) */
.cta__photo {
  position: relative;
  margin: 0;
  border-radius: clamp(8px, 1.75cqw, 34px);
  background: var(--slate);
  overflow: hidden;
}

.cta__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% center;
}

@media (max-width: 900px) {
  .reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq__list {
    max-width: none;
  }

  .cta__inner {
    grid-template-columns: 1fr;
  }

  .cta__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .cta__photo img {
    object-fit: cover;
    object-position: center 30%;
  }
}

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

  .review:nth-child(odd),
  .review:nth-child(even) {
    transform: none;
  }
}

/* ====================================================================
   The Weekly Unlock — newsletter band
   ==================================================================== */
/* Deliberately the same ink as .unlock rather than a shade of its own:
   the two dark bands are meant to read as one system bracketing the
   light sections between them. */
/* The footer's summit climbs out over this band's bottom-right corner, so
   the padding under the copy is deeper than the padding above it: that gap
   is what keeps the lead and the signup note clear of the peak instead of
   sitting against it. */
.weekly {
  position: relative;
  background: #1a1a1a;
  color: #f2efe9;
  padding: clamp(40px, 6vw, 104px) var(--gut) clamp(84px, 10vw, 190px);
}

.weekly__inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5cqw, 96px);
  align-items: center;
}

.weekly__title {
  margin: 0 0 clamp(8px, 1.1cqw, 20px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4cqw, 66px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #f7f4ee;
}

.weekly__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(12px, 1.08cqw, 20px);
  line-height: 1.65;
  color: rgba(242, 239, 233, .84);
}

/* A rule, not a filled pill: on ink the field has to read as an input
   without lighting up a whole block of the band. */
.weekly__form {
  display: flex;
  align-items: center;
  gap: clamp(8px, .9cqw, 16px);
  flex-wrap: wrap;
}

.weekly__input {
  flex: 1 1 clamp(180px, 18cqw, 340px);
  min-width: 0;
  height: clamp(42px, 3.6cqw, 68px);
  padding: 0 clamp(14px, 1.4cqw, 26px);
  border: 1px solid rgba(242, 239, 233, .28);
  border-radius: 999px;
  background: rgba(242, 239, 233, .06);
  color: #f7f4ee;
  font-family: inherit;
  font-size: clamp(12px, 1.02cqw, 19px);
  transition: border-color .2s ease, background .2s ease;
}

.weekly__input::placeholder {
  color: rgba(242, 239, 233, .5);
}

.weekly__input:hover {
  border-color: rgba(242, 239, 233, .45);
}

.weekly__input:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(242, 239, 233, .1);
}

.weekly__btn {
  flex: none;
  height: clamp(42px, 3.6cqw, 68px);
  padding: 0 clamp(18px, 1.9cqw, 38px);
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: clamp(12px, 1.02cqw, 19px);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, translate .2s ease;
}

.weekly__btn:hover {
  background: #ff8a58;
  translate: 0 -2px;
}

.weekly__note {
  margin: clamp(10px, 1cqw, 18px) 0 0;
  font-size: clamp(10px, .92cqw, 17px);
  line-height: 1.5;
  color: rgba(242, 239, 233, .58);
}

/* empty until the form is submitted, so it takes no space on arrival */
.weekly__status:empty {
  display: none;
}

.weekly__status {
  margin: clamp(8px, .8cqw, 14px) 0 0;
  font-size: clamp(10px, .92cqw, 17px);
  line-height: 1.5;
  color: var(--orange);
}

/* header above form, per spec */
@media (max-width: 900px) {
  .weekly__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .weekly__btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weekly__btn:hover { translate: 0 0; }
}

/* ====================================================================
   Footer
   ==================================================================== */
/* The one blue surface on the page — the banner's sky, #56A8FF to white,
   left to right, which puts the clear end under the summit exactly the way
   the banner does. A light ground, so the whole footer runs ink-on-blue
   rather than the white-on-black it used to be. Not clipped: the summit has
   to break out over the section above, so the wordmark's own overflow moves
   onto .footer__inner. */
.footer {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(90deg, #56A8FF 0%, #FFFFFF 100%);
  color: var(--ink);
  padding: clamp(24px, 3.4vw, 64px) clamp(20px, 10.9vw, 230px) 0;

  /* How far the summit rises above the top edge. Kept just inside .cta's
     padding-bottom (clamp(56px, 8vw, 140px)) so the peak lands in that gap
     rather than on the porch photo. */
  --summit-out: clamp(44px, 7.2vw, 112px);
}

/* Survey ground, same 400-unit field the services cards carry. Held at a
   whisper — it should read as texture in the blue, not as a second picture
   competing with the summit. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("new-landing-assets/topo-tile.svg") repeat 0 0 / 400px 400px;
  opacity: .11;
  pointer-events: none;
}

.footer__rules {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.footer__rules span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(11, 47, 99, .12);
}

/* Same corner the summit held in the hero: flush right, flush bottom. Tall
   enough that the peak and the flag climb out over the section above,
   which is what stops it reading as a picture pasted into a box. Sits
   above the hairlines but under the content, so the newsletter still
   reads over it. The overhang is sized against .cta's padding-bottom, so
   it clears the porch photo. */
.footer__summit {
  position: absolute;
  /* hung off the right edge so the near slope is trimmed instead of
     reaching halfway across the newsletter column */
  right: clamp(-140px, -5.4vw, 0px);
  bottom: 0;
  z-index: -1;
  /* Footer height plus a fixed overhang, so the peak clears the top edge by
     the same amount whatever the footer measures. The flag's underside sits
     at 11% of the image, so the overhang has to beat that share of the
     rendered height for the flag to clear the blue entirely. */
  height: calc(100% + var(--summit-out));
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  /* left alone: against a light sky the silhouette already reads the way it
     does in the banner, and darkening it only muddies the flag */
  filter: contrast(1.04) saturate(1.12);

  pointer-events: none;
}

/* the wordmark is one line by design; this is what clips it now */
.footer__inner {
  container-type: inline-size;
  overflow: hidden;
}

.footer__wordmark {
  margin: 0 0 clamp(16px, 4.2cqw, 84px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10.2cqw;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--orange);
  /* one line by design; the footer clips it rather than let it wrap */
  white-space: nowrap;
  user-select: none;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr 1.85fr;
  gap: clamp(20px, 3cqw, 60px);
  align-items: start;
}

.footer__tagline {
  margin: 0 0 clamp(12px, 2.4cqw, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(12px, 1.46cqw, 30px);
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .3cqw, 8px);
  font-size: clamp(9px, 1.05cqw, 22px);
  line-height: 1.5;
  text-transform: uppercase;
}

.footer__contact a:hover {
  color: var(--orange);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7cqw, 34px);
  margin: clamp(16px, 2.4cqw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

/* .is-inert is Spotify: drawn like the rest, but there is nowhere to send
   anyone yet, so it is a span rather than an anchor */
.footer__social a,
.footer__social .is-inert {
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: opacity .2s ease, translate .2s ease;
}

.footer__social .is-inert {
  cursor: default;
}

.footer__social a:hover {
  opacity: .72;
  translate: 0 -2px;
}

.footer__social svg {
  width: clamp(15px, 1.5cqw, 30px);
  height: clamp(15px, 1.5cqw, 30px);
  display: block;
}

.footer__col h3 {
  margin: 0 0 clamp(8px, 1.4cqw, 28px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(11px, 1.23cqw, 25px);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .45cqw, 10px);
}

.footer__col a {
  font-size: clamp(9px, .97cqw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .78);
  transition: color .2s ease;
}

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

/* Media entries with nowhere to point yet. Same type as the links so the
   column stays even, one step back in weight and colour so nothing here
   looks clickable. */
.footer__col li > span {
  display: inline-block;
  font-size: clamp(9px, .97cqw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .52);
}

.footer__soon {
  font-weight: 400;
  color: rgba(26, 26, 26, .4);
}

.footer__news-title {
  margin: 0 0 clamp(10px, 1.8cqw, 36px);
  /* Held short of the column's full width so it wraps before it reaches the
     summit's near flank — ink copy on a black slope does not read. The form
     below keeps the whole column. */
  max-width: 60%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(12px, 1.4cqw, 29px);
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.newsletter {
  display: flex;
  align-items: center;
  gap: clamp(6px, .7cqw, 14px);
  height: clamp(38px, 4.4cqw, 90px);
  padding: 0 clamp(4px, .45cqw, 10px) 0 clamp(12px, 1.6cqw, 32px);
  border-radius: 999px;
  background: var(--orange);
}

.newsletter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 1.14cqw, 23px);
}

.newsletter input::placeholder {
  color: rgba(255, 255, 255, .85);
}

.newsletter input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.newsletter button {
  flex: none;
  height: clamp(30px, 3.5cqw, 72px);
  padding: 0 clamp(12px, 1.8cqw, 36px);
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 1.14cqw, 23px);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}

.newsletter button:hover {
  background: #222;
}

.footer__bottom {
  margin-top: clamp(18px, 3cqw, 58px);
  padding: clamp(12px, 1.9cqw, 38px) 0;
  text-align: center;
  font-size: clamp(9px, 1.05cqw, 22px);
  color: rgba(26, 26, 26, .55);
}

@media (max-width: 900px) {
  /* The stacked footer is tall and narrow, and the summit is taller than it
     is wide — sized to the footer's height it would be wider than the
     viewport. So below this width it gives up the overhang and goes back to
     a corner mark. */
  .footer__summit {
    right: 0;
    height: clamp(170px, 34vw, 300px);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(24px, 5cqw, 50px);
  }

  .footer__brand,
  .footer__news {
    grid-column: 1 / -1;
  }
}


/* ====================================================================
   Motion — boot sequence + scroll reveals
   ==================================================================== */

/* --- hero intro ----------------------------------------------------
   These only bite once JS adds .is-ready, so with JS disabled the hero
   renders normally with no animation at all. */
html.is-ready .hero__rules span {
  transform-origin: top center;
  animation: ruleDrop 1.1s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes ruleDrop {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

html.is-ready [data-hero] {
  animation: heroRise .95s cubic-bezier(.22, .75, .2, 1) both;
  animation-delay: var(--hd, 0ms);
}

/* The nav is animated one link at a time rather than as a block: the
   drawer parks itself off-canvas with `translate`, which heroRise would
   overwrite and leave the mobile menu hanging open. */
html.is-ready .header .nav > *,
html.is-ready .header .nav-toggle {
  animation: heroRise .95s cubic-bezier(.22, .75, .2, 1) both;
}

html.is-ready .stage__portrait {
  animation-name: portraitRise;
  animation-duration: 1.1s;
}

html.is-ready .stage__title .ch {
  animation: charIn .85s cubic-bezier(.22, .8, .2, 1) both;
  /* 26ms, not 32: the headline is six characters longer than it was, and the
     last letter still needs to land before the CTA reveals at 820ms */
  animation-delay: calc(160ms + var(--i) * 26ms);
}

.stage__title .ch {
  display: inline-block;
  will-change: opacity, translate, filter;
}

@keyframes heroRise {
  from { opacity: 0; translate: 0 26px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

@keyframes portraitRise {
  from { opacity: 0; translate: 0 46px; scale: .95; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes charIn {
  from { opacity: 0; translate: 0 .38em; filter: blur(14px); }
  to   { opacity: 1; translate: 0 0;     filter: blur(0); }
}

/* --- scroll reveals -------------------------------------------------
   Uses `translate`, not `transform`, so it composes with elements that
   already carry a transform (the tilted review cards). */
[data-reveal] {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1),
              translate .75s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rd, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

/* headings wipe up from a mask instead of just fading */
[data-wipe] {
  clip-path: inset(0 0 105% 0);
  translate: 0 0;
  transition: clip-path 1s cubic-bezier(.2, .75, .2, 1);
  transition-delay: var(--rd, 0ms);
}

[data-wipe].is-in {
  clip-path: inset(-25% -10% -25% -10%);
}

.book__btn i,
.plan__btn i {
  transition: translate .25s ease;
}

.book__btn:hover i,
.plan__btn:hover i {
  translate: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }

  html.is-ready .hero__rules span,
  html.is-ready [data-hero],
  html.is-ready .stage__title .ch {
    animation: none !important;
  }

  [data-wipe] {
    clip-path: none !important;
    transition: none !important;
  }
}

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 900px) {
  /* --- mobile nav ---------------------------------------------------
     The links move into a right-hand drawer. It sits under the header
     (z 55 against 60) and is padded clear of it, so the close button is
     never covered by the panel it opens. */
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 330px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 55;
    padding: calc(var(--header-h) + 14px) clamp(22px, 6vw, 34px)
             calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    box-shadow: -24px 0 70px rgba(17, 17, 17, .2);
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: 100% 0;
    transition: translate .34s cubic-bezier(.2, .7, .2, 1);
  }

  .header.is-open .nav {
    translate: 0 0;
  }

  .nav a {
    display: block;
    padding: 15px 2px;
    font-size: 14px;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--rule);
  }

  .nav a.btn-pill {
    height: 50px;
    margin: 22px 0 0;
    padding: 0 20px;
    font-size: 15px;
    border-bottom: 0;
  }

  /* burger to X */
  .header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  html.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* the drawer scrolls on its own; the page behind it must not. Both
     elements, because html is the scroll container here. */
  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }

  /* one column: copy over the portrait, and the inboard shift has
     nothing left to sit inboard of */
  .hero {
    --hero-shift: 0px;
  }

  .stage {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3vw, 32px);
  }

  .stage__copy {
    padding-bottom: 0;
  }

  .stage__eyebrow {
    letter-spacing: .06em;
    text-indent: .06em;
  }

  /* Still nowrap here. Each letter is its own inline-block, so `normal`
     lets a line break land mid-word; sizing the type to the line instead
     keeps the two lines intact. */
  .stage__title {
    font-size: 8.6vw;
  }

  .stage__aside {
    justify-self: stretch;
    max-width: none;
  }

  .stage__portrait {
    max-width: min(100%, 460px);
    margin-inline: auto;
  }
}

/* Three narrow columns stop being readable well before the layout
   collapses, so the proof block drops to its own row first. That needs
   four parent rows, and each block explicitly spanning two of them —
   the desktop `grid-row: 1 / -1` would stack all three in the same
   cells once the track is taller than one label/copy pair. Insetting to
   the shoulders is dropped too: the photo is centred and capped here, so
   the meta reads better on the section's own width. */
@media (max-width: 700px) {
  .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    justify-content: start;
    margin: clamp(14px, 4vw, 28px) 0 0;
  }

  .meta__item {
    grid-row: span 2;
  }

  .meta .social {
    grid-column: 1 / -1;
    grid-row: 3 / span 2;
  }
}

/* ====================================================================
   Brief rebuild — CTA component, hero copy, ridge, About, services grid
   ==================================================================== */

/* --- CTA button: hero, below the services grid, closing section ------ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(13px, 1.15vw, 20px) clamp(26px, 2.3vw, 44px);
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: clamp(13px, 1.05vw, 19px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.btn-cta:hover { background: #d9531f; }

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

/* --- hero copy ------------------------------------------------------- */
.stage__tagline {
  margin: clamp(12px, 1.5vw, 26px) 0 0;
  font-size: clamp(15px, 1.55vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.stage__blurb {
  margin: clamp(12px, 1.3vw, 24px) 0 0;
  max-width: 58ch;
  font-size: clamp(12px, 1.02vw, 19px);
  line-height: 1.65;
  color: rgba(26, 26, 26, .92);
}

/* --- hero ground ------------------------------------------------------
   The fold keeps the original cream rather than the bone the rest of the
   page moved to. */
.hero {
  --hero-ground: #fffdfa;
  background: var(--hero-ground);
}

/* The figure sits a touch high in its column so his eyeline lands nearer
   the headline rather than the tagline. A negative margin, not `translate`:
   portraitRise animates `translate` on this element and would flatten it
   back to 0 the moment the intro finished. */
.stage__portrait {
  margin-top: clamp(-34px, -1.8vw, -12px);
}

/* The cut-out has a hard horizontal bottom edge. A flat cream ellipse used
   to cover it; masking the edge off draws the same arc, costs a request
   less, and does not care what the ground under it is. */
.stage__portrait img.portrait {
  -webkit-mask-image: radial-gradient(118% 15% at 50% 100%,
    transparent 0%, transparent 60%, #000 92%);
  mask-image: radial-gradient(118% 15% at 50% 100%,
    transparent 0%, transparent 60%, #000 92%);
}

/* rings on the avatars punch back to that same ground */
.social__avatars img {
  border-color: var(--hero-ground);
}

/* --- About: porch photo left, copy right ------------------------------
   The photo leads in source order, so the mobile stack gets the same
   order without an `order` override. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}

.about__eyebrow {
  margin: 0 0 clamp(10px, 1.1vw, 20px);
  font-size: clamp(10px, .9vw, 16px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

.about__title {
  margin: 0 0 clamp(16px, 1.9vw, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.05vw, 58px);
  line-height: 1.14;
  letter-spacing: .01em;
  color: var(--ink);
}

.about__body p {
  margin: 0 0 clamp(12px, 1.2vw, 22px);
  font-size: clamp(13px, 1.06vw, 20px);
  line-height: 1.72;
  color: rgba(26, 26, 26, .78);
}

.about__kicker {
  font-weight: 600;
  color: var(--ink) !important;
}

.about__photo {
  margin: 0;
  border-radius: clamp(10px, 1.1vw, 20px);
  overflow: hidden;
}

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

/* --- Services: 2x2 grid ---------------------------------------------- */
.services__title {
  margin: 0 0 clamp(14px, 1.6vw, 30px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 64px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink);
}

.services__intro {
  margin: 0 0 clamp(28px, 3.6vw, 70px);
  max-width: 88ch;
  font-size: clamp(13px, 1.06vw, 20px);
  line-height: 1.72;
  color: rgba(26, 26, 26, .78);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 32px);
  align-items: start;
}

.tile {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 46px);
  border: 1px solid rgba(26, 26, 26, .15);
  border-radius: clamp(10px, 1vw, 18px);
  background: var(--bone);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

/* orange rule sweeps the top edge on hover */
.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease-out;
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(26, 26, 26, .10);
}

.tile:hover::before { transform: scaleX(1); }

.tile__title {
  margin: 0 0 clamp(8px, .9vw, 16px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 30px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink);
}

.tile__lead {
  margin: 0 0 clamp(12px, 1.2vw, 22px);
  font-size: clamp(12px, 1vw, 18px);
  line-height: 1.65;
  color: rgba(26, 26, 26, .78);
}

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

.tile__list li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: clamp(7px, .7vw, 13px);
  font-size: clamp(12px, .98vw, 18px);
  line-height: 1.6;
  color: rgba(26, 26, 26, .78);
}

.tile__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.services__cta { margin-top: clamp(26px, 3.2vw, 60px); }

/* first scroll-in only: fade up 12px, staggered 80ms */
[data-tile] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .24s ease-out, translate .24s ease-out;
  transition-delay: calc(var(--t) * 80ms);
}

[data-tile].is-in { opacity: 1; translate: 0 0; }

@media (max-width: 900px) {
  .about__layout { grid-template-columns: 1fr; }
  .about__photo { aspect-ratio: 4 / 3; }
  .tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tile] { opacity: 1; translate: none; transition: none; }
  .tile, .tile::before { transition: none; }
}

/* --- Services grid: overrides for rules inherited from the old 3-card
       layout (centred head, white ground, ragged row heights) ----------- */
.services {
  background: var(--bone);
  padding: clamp(56px, 8vw, 140px) var(--gut);
}

.services__head {
  text-align: left;
  margin-bottom: 0;
}

/* tiles in a row share a height so the grid reads as a grid; content still
   starts at the top of each tile */
.tiles {
  align-items: stretch;
}

.tile {
  display: flex;
  flex-direction: column;
}

/* the roadmap used to butt straight onto the section above it */
.roadmap {
  padding-top: clamp(56px, 8vw, 140px);
}

/* Book a Call sits centred under the grid */
.services__cta {
  text-align: center;
}

/* Brand block plus four link columns. The summit hangs off the right of
   the footer, so the grid is held to the left ~72% or the last column
   ends up behind the mountain. */
.footer__grid {
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  max-width: 74%;
}

/* not-yet-live entries sit in the link rhythm but are not clickable.
   Ink, not white: this footer is a light sky gradient. */
.footer__soon {
  display: block;
  font-size: clamp(9px, .97cqw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .42);
}

.footer__soon em {
  font-style: normal;
  opacity: .8;
}

@media (max-width: 1100px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    max-width: 66%;
  }

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

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

/* three capability tiles rather than the four engagement types */
.tiles--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* the intro is three short paragraphs now, not one block */
.services__intro {
  margin-bottom: clamp(10px, 1.1vw, 20px);
}

.services__intro--last {
  margin-bottom: clamp(28px, 3.6vw, 70px);
}

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

/* ====================================================================
   The UNLOCK Method - dark panel, copy left, the six moves listed right
   ==================================================================== */
/* the only dark band on the page — ink, matched to --ink rather than the
   warm near-black it used to carry */
.unlock {
  background: #1a1a1a;
  color: #f2efe9;
  padding: clamp(56px, 8vw, 140px) var(--gut);
}

.unlock__inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: clamp(30px, 6cqw, 120px);
  align-items: start;
}

.unlock__eyebrow {
  margin: 0 0 clamp(12px, 1.5cqw, 26px);
  font-size: clamp(10px, .95cqw, 18px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orange);
}

.unlock__heading {
  margin: 0 0 clamp(14px, 1.7cqw, 30px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqw, 76px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #f7f4ee;
}

.unlock__heading sup {
  font-size: .3em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

.unlock__sub {
  margin: 0 0 clamp(18px, 2.2cqw, 40px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.7cqw, 32px);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--orange);
}

.unlock__lead {
  margin: 0 0 clamp(12px, 1.2cqw, 22px);
  font-size: clamp(12px, 1.08cqw, 20px);
  line-height: 1.7;
  /* on an ink ground, "darker" means more contrast, not less light */
  color: rgba(242, 239, 233, .88);
}

.unlock__lead strong {
  font-weight: 600;
  color: #f7f4ee;
}

/* --- the six moves ---------------------------------------------------- */
.unlock__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(242, 239, 233, .14);
}

/* The spine. A rail down the gutter between the copy and the list that
   fills as you read the six moves — one system being unlocked, not six
   unrelated bullets. It sits at half the column gap so it lands in open
   space rather than against the letters.

   Both halves are pseudo-elements on the same box, so the fill can never
   drift out of register with its own track. The fill is driven by
   --unlock-progress, which JS writes, so the whole rail is gated on
   .is-ready: with no JS there is no permanently empty track sitting in
   the gutter, just the layout as it was. */
html.is-ready .unlock__list::before,
html.is-ready .unlock__list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * clamp(15px, 3cqw, 60px));
  width: 3px;
  border-radius: 3px;
}

html.is-ready .unlock__list::before {
  background: rgba(242, 239, 233, .16);
}

html.is-ready .unlock__list::after {
  background: linear-gradient(180deg, var(--orange), #ff8a58);
  box-shadow: 0 0 18px rgba(242, 102, 49, .6);
  transform-origin: top center;
  scale: 1 var(--unlock-progress, 0);
  transition: scale .35s linear;
}

/* no gutter to hang it in once the section is a single column */
@media (max-width: 900px) {
  .unlock__list::before,
  .unlock__list::after { display: none; }
}

/* Each move now reveals on its own as it scrolls in, rather than the whole
   list firing the moment its top edge appears — the list is tall enough
   that the bottom half used to animate well off-screen. The opacity and
   translate come from [data-reveal]; the row only owns its layout. */
.unlock__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, 5.4cqw, 104px) minmax(0, 1fr);
  gap: clamp(14px, 2cqw, 40px);
  align-items: start;
  padding: clamp(18px, 2.3cqw, 42px) 0;
}

/* The separator is a pseudo-element rather than a border so it can draw
   itself across as the move lands — each one reads as clicking into
   place under the last. */
.unlock__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(242, 239, 233, .14);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .85s cubic-bezier(.2, .7, .2, 1),
              background .25s ease-out;
}

/* Held back only when JS is driving the reveal; without it the rules are
   simply there, same as the scriptless fallback everywhere else here.
   The delay is written per property, not as a blanket transition-delay,
   or the hover colour below would wait out the reveal stagger too. */
.unlock__row[data-reveal]::after {
  transform: scaleX(0);
  transition: transform .85s cubic-bezier(.2, .7, .2, 1) calc(var(--rd, 0ms) + 120ms),
              background .25s ease-out;
}

.unlock__row[data-reveal].is-in::after { transform: scaleX(1); }

/* A hot pass that runs the rule ahead of the grey one and then burns off,
   so each move lands with a visible strike rather than a quiet fade. It is
   a second element rather than a colour change on ::after, which would put
   the reveal's long delay on the hover colour too and make hover feel
   broken. */
.unlock__row[data-reveal]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), #ff8a58);
  box-shadow: 0 0 12px rgba(242, 102, 49, .55);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
  pointer-events: none;
  transition: transform .85s cubic-bezier(.2, .7, .2, 1) calc(var(--rd, 0ms) + 120ms),
              opacity .75s ease-out calc(var(--rd, 0ms) + 1020ms);
}

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

/* the rows travel further than the page default, so the list builds
   rather than blinks */
.unlock__row[data-reveal] { translate: 0 46px; }
.unlock__row[data-reveal].is-in { translate: 0 0; }

.unlock__letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.6cqw, 88px);
  line-height: .86;
  letter-spacing: .01em;
  color: var(--orange);
}

/* The letter lands a beat after its row and settles down to size from
   1.1x, so reading down the list feels like the word is being spelled out.
   Keyed on [data-reveal] — which only JS applies — so a scriptless visitor
   gets the letters sitting still rather than hidden.

   Delays are written per property, and `translate` deliberately carries
   none: it belongs to the hover nudge, which must not sit out the reveal
   stagger before it responds. */
.unlock__row[data-reveal] .unlock__letter {
  opacity: 0;
  scale: 1.1;
  transform-origin: left center;
  transition: opacity .5s ease-out calc(var(--rd, 0ms) + 140ms),
              scale .6s cubic-bezier(.2, .7, .2, 1) calc(var(--rd, 0ms) + 140ms),
              translate .3s cubic-bezier(.2, .7, .2, 1),
              color .25s ease-out;
}

.unlock__row[data-reveal].is-in .unlock__letter {
  opacity: 1;
  scale: 1;
}

/* the summit flag plants itself once the last move is up */
.unlock__row[data-reveal] .unlock__flag {
  opacity: 0;
  translate: 0 -10px;
  rotate: -12deg;
  transform-origin: bottom left;
  transition: opacity .45s ease-out,
              translate .55s cubic-bezier(.2, 1.5, .4, 1),
              rotate .55s cubic-bezier(.2, 1.5, .4, 1);
  transition-delay: calc(var(--rd, 0ms) + 420ms);
}

.unlock__row[data-reveal].is-in .unlock__flag {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

/* Pointing at a move warms it: the letter nudges 4px and lifts toward the
   light, and the rule under it goes orange — the same colour the spine
   uses, so hovering reads as the same "unlocked" state. */
@media (hover: hover) {
  .unlock__row:hover .unlock__letter { translate: 4px 0; color: #ff8a58; }
  .unlock__row:hover::after { background: rgba(242, 102, 49, .7); }
}

/* the scriptless case: no reveal rule to carry these, so the letter owns
   its own hover transition */
.unlock__letter {
  transition: color .25s ease-out,
              translate .3s cubic-bezier(.2, .7, .2, 1);
}

/* Reduced motion gets the same sequence with the movement taken out: the
   scale-settle, the slide and the strike all go, and opacity is the only
   thing left carrying the reveal. */
@media (prefers-reduced-motion: reduce) {
  .unlock__row[data-reveal] .unlock__letter,
  .unlock__row[data-reveal] .unlock__flag {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: opacity .4s ease-out;
  }

  .unlock__row[data-reveal]::after {
    transform: scaleX(1);
    transition: none;
  }

  /* the hot pass is pure motion — nothing is lost by dropping it */
  .unlock__row[data-reveal]::before { display: none; }

  .unlock__row[data-reveal] { translate: none; }

  /* scroll-linked motion is the part worth dropping here; the static
     track stays so the gutter does not change between the two modes */
  html.is-ready .unlock__list::after { display: none; }

  /* the hover nudge is motion too — the colour warm-up carries it alone */
  .unlock__row:hover .unlock__letter { translate: 0 0; }
}

.unlock__title {
  margin: 0 0 clamp(5px, .6cqw, 11px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.45cqw, 27px);
  line-height: 1.18;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #f7f4ee;
}

.unlock__text {
  margin: 0;
  font-size: clamp(11px, 1.02cqw, 19px);
  line-height: 1.6;
  color: rgba(242, 239, 233, .84);
}

/* the flag plants on the final move */
.unlock__flag {
  position: absolute;
  right: 0;
  bottom: clamp(18px, 2.3cqw, 42px);
  width: clamp(18px, 1.9cqw, 34px);
  height: auto;
}

@media (max-width: 900px) {
  .unlock__inner { grid-template-columns: 1fr; }
  .unlock__flag { display: none; }
}

/* the closing line above the services CTA */
.services__closer {
  margin: clamp(26px, 3.2cqw, 58px) 0 clamp(14px, 1.6cqw, 28px);
  text-align: center;
  font-size: clamp(13px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .unlock__track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(26px, 4vw, 44px); }
  .unlock__track::before { display: none; }
}

@media (max-width: 620px) {
  .unlock__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unlock__lead { max-width: none; }
}

/* the network proof point has no figure, so the medallion carries a mark */
.stat__value--icon {
  display: grid;
  place-items: center;
  color: var(--orange);
}

.stat__value--icon svg {
  width: clamp(26px, 3.1cqw, 52px);
  height: clamp(26px, 3.1cqw, 52px);
}

/* ====================================================================
   Where are you stuck — copy left, four pain cards right
   ==================================================================== */
.stuck {
  background: var(--bone);
  padding: clamp(56px, 8vw, 140px) var(--gut);
}

.stuck__inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5cqw, 96px);
  align-items: start;
}

.stuck__eyebrow {
  margin: 0 0 clamp(12px, 1.5cqw, 26px);
  font-size: clamp(10px, .95cqw, 18px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}

.stuck__title {
  margin: 0 0 clamp(20px, 2.4cqw, 44px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5cqw, 66px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.stuck__title em {
  font-style: normal;
  color: var(--orange);
}

.stuck__lead {
  margin: 0 0 clamp(14px, 1.5cqw, 28px);
  font-size: clamp(14px, 1.32cqw, 25px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.stuck__body {
  margin: 0 0 clamp(16px, 1.8cqw, 32px);
  font-size: clamp(12px, 1.08cqw, 20px);
  line-height: 1.7;
  color: rgba(26, 26, 26, .72);
}

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

.stuck__ask {
  margin: 0 0 clamp(16px, 1.8cqw, 30px);
  font-size: clamp(13px, 1.2cqw, 22px);
  font-weight: 600;
  color: var(--ink);
}

.stuck__note {
  margin: clamp(10px, 1cqw, 18px) 0 0;
  font-size: clamp(11px, .95cqw, 17px);
  color: rgba(26, 26, 26, .55);
}

/* --- the four cards -------------------------------------------------- */
.stuck__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.7cqw, 30px);
}

.stuck__card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.3cqw, 42px);
  border: 1px solid rgba(26, 26, 26, .12);
  border-radius: clamp(12px, 1.2cqw, 22px);
  background: rgba(255, 255, 255, .42);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.stuck__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(26, 26, 26, .09);
}

.stuck__num {
  margin: 0 0 clamp(10px, 1.1cqw, 20px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.5cqw, 28px);
  line-height: 1;
  color: var(--orange);
}

.stuck__pain {
  margin: 0 0 clamp(8px, .8cqw, 15px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.52cqw, 29px);
  line-height: 1.16;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.stuck__role {
  margin: 0 0 clamp(10px, 1.1cqw, 20px);
  font-size: clamp(10px, .92cqw, 17px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

.stuck__text {
  margin: 0 0 clamp(14px, 1.5cqw, 26px);
  font-size: clamp(11px, 1.02cqw, 19px);
  line-height: 1.62;
  color: rgba(26, 26, 26, .74);
}

.stuck__more {
  margin-top: auto;
  font-size: clamp(11px, 1cqw, 18px);
  font-weight: 600;
  color: var(--orange);
  transition: gap .2s ease;
}

.stuck__more span {
  display: inline-block;
  transition: translate .2s ease;
}

.stuck__more:hover span { translate: 4px 0; }

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

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


/* the trademark rides small and high rather than sitting at cap height */
.unlock__heading sup {
  font-size: .34em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

/* second line of the About headline carries the accent */
.about__title em {
  font-style: normal;
  color: var(--orange);
}

/* the closing line reads as a pull-quote, ruled in orange */
.about__kicker {
  padding-left: clamp(14px, 1.5vw, 26px);
  border-left: 3px solid var(--orange);
}