/* ===========================================================================
   Alex Prober — one page.

   The ground is a board, not a theme: a deep slate green you'd find on a wall,
   with chalk-warm type over it. Two accents that carry meaning rather than
   decoration — amber is what survives a cut, dusty red is what gets crossed
   out. Nothing on this page is set below 16px.

   01 Tokens        05 Buttons & links   09 Ways to work
   02 Base          06 Nav               10 Timeline
   03 Type          07 Hero + board      11 Beliefs, quotes, writing
   04 Layout        08 Craft (services)  12 Booking  13 Footer  14 A11y
   =========================================================================== */

/* --- 01 Tokens ----------------------------------------------------------- */

:root {
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* The board */
  --board: #26332e;
  --board-deep: #1e2825;
  --board-up: #2f3e38;
  --board-edge: rgba(239, 234, 220, 0.14);
  --board-edge-soft: rgba(239, 234, 220, 0.08);

  /* Chalk */
  --chalk: #efeadc;
  --chalk-2: #b5bfb6;
  --chalk-3: #7e8a83;

  /* Meaning, not decoration */
  --keep: #f0b429;
  --cut: #d8695f;

  /* Type — 18px floor for body, nothing below 16px anywhere */
  --t-body: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --t-small: 1rem;
  --t-lead: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3.125rem);
  /* Capped so the headline still gets ~16 characters per line in the hero's
     column — at 5rem the rag broke and left single words stranded. */
  --t-h1: clamp(2.375rem, 1.55rem + 3.1vw, 4rem);

  --gutter: clamp(1.5rem, 1rem + 3vw, 5rem);
  --wrap: 72rem;
  --measure: 34rem;
  --gap: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Elevation, stepped by how big the surface is. */
  --lift: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
  --lift-md: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --lift-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.7);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

/* --- 02 Base ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--board);
  color: var(--chalk);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The board has a faint tooth to it. Static; it never competes. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(239, 234, 220, 0.05) 0.6px, transparent 0.6px),
    radial-gradient(rgba(0, 0, 0, 0.16) 0.6px, transparent 0.6px);
  background-size: 17px 17px, 23px 23px;
  background-position: 0 0, 8px 11px;
}

/* height: auto matters on img: without it the HTML height="" attribute applies
   as a presentational hint and overrides aspect-ratio. */
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--keep); color: var(--board-deep); }

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

.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 200;
  padding: 0.75rem 1.15rem;
  background: var(--chalk);
  color: var(--board-deep);
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 600;
  transition: top 200ms var(--ease-out);
}

.skip:focus { top: 1rem; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- 03 Type ------------------------------------------------------------- */

h1, h2, h3, .h-display {
  font-family: var(--display);
  font-weight: 700;
  /* Full width. Compressing the wdth axis and then tightening tracking on top
     of it reads as squashed rather than confident. */
  font-variation-settings: 'wdth' 100;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.014em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.22;
  letter-spacing: -0.006em;
  font-weight: 600;
}

@media (min-width: 60rem) {
  h1 { letter-spacing: -0.02em; line-height: 1; }
  h2 { letter-spacing: -0.017em; }
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--chalk-2);
  max-width: 30ch;
  text-wrap: pretty;
}

.dim { color: var(--chalk-2); }
.keep { color: var(--keep); }
p { text-wrap: pretty; max-width: var(--measure); }

/* --- 04 Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* One vertical rhythm token, applied by a single class, so nothing cancels. */
.band { padding-block: var(--gap); }
.band + .band { padding-top: 0; }

.band__head { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }

/* The pinned band starts sooner than the others so the cards begin advancing
   almost as soon as the section arrives, instead of after a long run-up. */
.band--stack { padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }
.band__head h2 { max-width: 24ch; }
.band__head .lead { margin-top: 1.15rem; max-width: 42ch; }

.hr { border: 0; height: 1px; background: var(--board-edge-soft); }

/* --- 05 Buttons & links -------------------------------------------------- */

/* Squared, weighty, no pills. */
.btn {
  display: inline-flex;
  align-items: center;
  /* Only bites when the button is stretched wider than its label, as it is
     inside the pricing cards. Content-width buttons are unaffected. */
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border-radius: 2px;
  background: var(--keep);
  color: var(--board-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 130ms var(--ease-out),
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

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

.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 220ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--chalk); }
  .btn:hover svg { transform: translateX(3px); }
}

.btn--quiet {
  background: transparent;
  color: var(--chalk);
  border-color: var(--board-edge);
}

@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover { background: var(--board-up); border-color: var(--chalk-3); color: var(--chalk); }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--chalk);
  border-bottom: 1px solid var(--chalk-3);
  padding-bottom: 1px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tlink:hover { color: var(--keep); border-color: var(--keep); }
}

/* --- 06 Nav -------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--board) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transform: translate3d(0, calc(var(--nav-hide, 0) * -100%), 0);
  transition:
    transform 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}

.nav.is-past { border-bottom-color: var(--board-edge-soft); }

.nav__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.004em;
  text-decoration: none;
  white-space: nowrap;
}

/* One auto margin, on the name — so the button still sits right when the
   links are hidden on narrow screens. */
.nav__name { margin-right: auto; }
.nav__links { display: none; gap: 1.75rem; }

.nav__links a {
  text-decoration: none;
  color: var(--chalk-2);
  font-size: var(--t-small);
  transition: color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--chalk); } }

.nav .btn { padding: 0.7rem 1.15rem; }

@media (min-width: 52rem) { .nav__links { display: flex; } }

/* --- 07 Hero + the board ------------------------------------------------- */

.hero { padding-top: clamp(7rem, 5rem + 7vw, 10rem); padding-bottom: var(--gap); }

.hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 5vw, 5rem); }

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: 1.5rem; }
.hero .actions { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }

.hero__note {
  margin-top: 2rem;
  color: var(--chalk-2);
  font-size: var(--t-small);
  max-width: 48ch; /* one run of facts, not a three-line paragraph */
}

/* The signature. A real board: items get crossed out, one gets circled. */
.board {
  background: var(--board-deep);
  border: 1px solid var(--board-edge);
  border-radius: 3px;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  box-shadow: var(--lift-lg);
}

/* The heading is a claim, so it gets room to be two lines while the count
   stays pinned top-right instead of being wrapped onto its own row. */
.board__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--board-edge-soft);
}

.board__title {
  flex: 1 1 auto;
  max-width: 32ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.28;
  letter-spacing: -0.006em;
}
.board__count { flex: none; white-space: nowrap; color: var(--chalk-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.board__count b { color: var(--keep); font-weight: 400; }

.board__list { list-style: none; padding: 0; display: grid; }

.board__item { display: flex; }

/* The button hugs its text, so a strike is exactly as long as the words it
   crosses out rather than running the width of the row. */
.board__item button {
  position: relative;
  display: inline-block;
  width: auto;
  text-align: left;
  padding: 0.42rem 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.35;
  color: var(--chalk);
  transition: color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .board__item button:hover { color: var(--cut); }
  .board__item[data-keep] button:hover { color: var(--keep); }
}

/* Struck items recede — the point is that they stop competing for attention. */
.board__item.is-cut button { color: var(--chalk-3); }

/* The mark is an HTML wrapper, scaled on the x axis from its left edge. A
   transform is compositor-driven and always interpolates; CSS clip-path
   transitions on an <svg> element do not reliably run in Chrome. With
   non-scaling-stroke the line keeps its weight while the wrapper grows. */
.board__mark {
  position: absolute;
  display: block;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.board__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

.board__mark svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.board__mark--strike {
  left: -3px;
  top: 50%;
  margin-top: -0.35em;
  width: calc(100% + 6px);
  height: 0.7em;
  color: var(--cut);
}

.board__mark--ring {
  left: -0.7em;
  top: -0.14em;
  width: calc(100% + 1.5em);
  height: calc(100% + 0.28em);
  color: var(--keep);
}

.board__item.is-cut .board__mark--strike {
  transform: scaleX(1);
  transition: transform 240ms var(--ease-out);
}

.board__item.is-kept .board__mark--ring {
  transform: scaleX(1);
  transition: transform 560ms var(--ease-out);
}

.board__item.is-kept button { color: var(--chalk); }

.board__foot {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--board-edge-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.board__hint { color: var(--chalk-3); font-size: var(--t-small); }

.board__reset {
  color: var(--chalk-2);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--chalk-3);
  padding-bottom: 1px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .board__reset:hover { color: var(--keep); border-color: var(--keep); }
}

/* --- 08 Craft ------------------------------------------------------------ */

/* --- 08 Pinned card stack ------------------------------------------------ *
   Scrolling advances the card instead of the page. The frame sticks inside a
   tall track; scroll position within that track picks the active card.

   Cards move by POSITION, not by scroll direction: below → active → above.
   That makes reversing correct for free — a card that went up comes back down
   from where it left, with no direction tracking and no forced reflow.
   ------------------------------------------------------------------------- */

.stack { position: relative; --pinnable: 0; }

/* 7.5rem clears the 86px nav with room to breathe. The nav is held visible
   while this section is pinned (see initNav), so the gap above the heading is
   the same scrolling up as scrolling down. */
.stack__frame { position: sticky; top: 7.5rem; display: grid; gap: 2rem; }

.stack__head h2 { max-width: 24ch; }
.stack__head .lead { margin-top: 1.15rem; max-width: 42ch; }

.scrub { display: none; }

.stack__cards { position: relative; }

.stack__card {
  border: 1px solid var(--board-edge);
  border-top-color: rgba(239, 234, 220, 0.2);
  border-radius: 3px;
  background: var(--board-up);
  box-shadow: var(--lift-md);
  padding: clamp(1.75rem, 1.3rem + 2vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.stack__card h3 {
  font-size: clamp(1.625rem, 1.25rem + 1.9vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 700;
  max-width: 20ch;
}

.stack__card p {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--chalk-2);
  max-width: 45ch;
}

/* Pin only where there's height to spare and a page that isn't already tight.
   Below this the same markup is an ordinary stack — no hijacked scroll. */
@media (min-width: 44rem) and (min-height: 32rem) {
  .stack { --pinnable: 1; }

  .stack.is-pinned { height: var(--track, auto); }

  .stack.is-pinned .stack__frame {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 2.5rem;
    row-gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);
    align-items: start;
  }

  /* Inside the pinned frame the heading is competing with the card for a fixed
     amount of height, so it gives some back. On a short viewport the full-size
     heading left the card too little room and it spilled its slot. */
  .stack.is-pinned .stack__head { grid-column: 1 / -1; grid-row: 1; }
  .stack.is-pinned .stack__head h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); }
  .stack.is-pinned .stack__head .lead { margin-top: 0.8rem; }

  /* The scrubber: one element doing what the index list and the progress bar
     were doing separately. Dragging it drives page scroll, so card position
     stays derived from scroll and there is no second source of truth. */
  .stack.is-pinned .scrub {
    display: grid;
    grid-template-columns: 2px auto;
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    gap: 0 1.15rem;
    height: 100%;
    position: relative;
  }

  .stack.is-pinned .scrub__rail {
    grid-column: 1;
    position: relative;
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: var(--board-edge);
  }

  .stack.is-pinned .scrub__fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--keep);
    transform: scaleY(var(--p, 0));
    transform-origin: top center;
  }

  /* Carrier translates by a percentage of the rail; the handle centres itself
     on that point. Transform only — no top/height animation. */
  .stack.is-pinned .scrub__carrier {
    position: absolute;
    inset: 0;
    transform: translate3d(0, calc(var(--p, 0) * 100%), 0);
  }

  .stack.is-pinned .scrub__handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--keep);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px var(--board);
    transition: scale 160ms var(--ease-out);
  }

  /* A wide invisible target over the rail: 2px is not a grabbable thing. */
  .stack.is-pinned .scrub__grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 32px;
    cursor: grab;
    touch-action: none;
    border-radius: 3px;
  }

  .stack.is-pinned .scrub__grip:focus-visible { outline-offset: 1px; }
  .stack.is-pinned .scrub.is-dragging .scrub__grip { cursor: grabbing; }
  .stack.is-pinned .scrub.is-dragging .scrub__handle,
  .stack.is-pinned .scrub__grip:focus-visible ~ .scrub__rail .scrub__handle { scale: 1.35; }

  @media (hover: hover) and (pointer: fine) {
    .stack.is-pinned .scrub__grip:hover ~ .scrub__labels button[aria-current='true'] { color: var(--keep); }
  }

  .stack.is-pinned .scrub__labels {
    grid-column: 2;
    display: grid;
    grid-auto-rows: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .stack.is-pinned .scrub__labels li { display: grid; align-items: center; }

  .stack.is-pinned .scrub__labels button {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--body);
    font-size: var(--t-body);
    line-height: 1.25;
    color: var(--chalk-3);
    transition: color 240ms var(--ease-out), transform 240ms var(--ease-out);
  }

  .stack.is-pinned .scrub__labels button[aria-current='true'] { color: var(--chalk); }

  /* Feedback on press, not on release. */
  .stack.is-pinned .scrub__labels button:active {
    color: var(--keep);
    transform: translateX(2px);
    transition-duration: 120ms;
  }

  @media (hover: hover) and (pointer: fine) {
    .stack.is-pinned .scrub__labels button:hover { color: var(--chalk-2); }
    .stack.is-pinned .scrub__labels button[aria-current='true']:hover { color: var(--chalk); }
  }

  .stack.is-pinned .stack__cards { grid-column: 2; grid-row: 2; display: grid; align-self: stretch; }

  .stack.is-pinned .stack__card {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    pointer-events: none;
    transition:
      opacity 220ms var(--ease-out),
      transform 300ms var(--ease-out);
  }

  /* Short viewport: the card trades padding for content room so it never
     spills its slot. Measured floor without this was ~510px of viewport. */
  @media (max-height: 44rem) {
    .stack.is-pinned .stack__card { padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem); }
    .stack.is-pinned .stack__head .lead { display: none; }
  }

  .stack.is-pinned .stack__card.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .stack.is-pinned .stack__card.is-past { opacity: 0; transform: translate3d(0, -14px, 0); }

}

/* Unpinned fallback: a plain readable stack. */
.stack:not(.is-pinned) .stack__cards { display: grid; gap: 1rem; }

@media (min-width: 44rem) {
  .stack:not(.is-pinned) .stack__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 09 Ways to work ----------------------------------------------------- */

.ways { display: grid; gap: 1.25rem; }

@media (min-width: 58rem) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Each card carries its own colour tokens. The inverted card just re-points
   them — no `.way--lead ul` vs `.way ul` specificity fight, which equal
   specificity would settle by source order rather than by intent. */
.way {
  --ink: var(--chalk);
  --ink-soft: var(--chalk-2);
  --rule: var(--board-edge);
  --bullet: var(--keep);
  --ask: var(--keep);

  background: var(--board-up);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .way:hover { border-color: var(--chalk-3); transform: translateY(-3px); }
}

.way--lead {
  --ink: #1b2521;
  --ink-soft: #46544c;
  --rule: rgba(27, 37, 33, 0.2);
  --bullet: #1b2521;
  --ask: #8a5a10;

  background: var(--chalk);
  border-color: var(--chalk);
}

.way h3 { margin-bottom: 0.5rem; color: var(--ink); }

.way__ask {
  font-family: var(--body);
  font-style: italic;
  font-size: var(--t-body);
  color: var(--ask);
  line-height: 1.35;
  margin-bottom: 1rem;
}

.way ul { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.5rem; color: var(--ink-soft); }
.way li { display: grid; grid-template-columns: 0.6rem 1fr; gap: 0.7rem; align-items: baseline; }
.way li::before { content: ''; width: 4px; height: 4px; margin-top: 0.62em; background: var(--bullet); }

.way__foot { margin-top: auto; }

/* Cards share row tracks so the title, the quote, the bullets, the price and
   the button each sit on one line across all three. Per-card flexbox can't do
   this — each card would size its own rows, and a 2-line quote next to a
   3-line one pushes everything below it out of step.
   The bullets row takes the slack (1fr), which is what keeps the footer down. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 58rem) {
    .ways { grid-template-rows: auto auto 1fr auto auto; }

    .way {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }

    .way__foot {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      margin-top: 0;
    }
  }
}


.way__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4375rem;
  letter-spacing: -0.008em;
  color: var(--ink);
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}

.way__note {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.way--lead .btn { background: var(--board-deep); color: var(--chalk); }

@media (hover: hover) and (pointer: fine) {
  .way--lead .btn:hover { background: var(--keep); color: var(--board-deep); }
}

.investors {
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--board-edge-soft);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 58rem) { .investors { grid-template-columns: minmax(0, 1fr) auto; } }

.investors p { color: var(--chalk-2); max-width: 52ch; }

/* --- 10 Timeline --------------------------------------------------------- */

.line { position: relative; }

.line__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 0 2rem;
  scrollbar-width: none;
  cursor: grab;
}

.line__track::-webkit-scrollbar { display: none; }
.line__track.is-dragging { cursor: grabbing; }
.line__track.is-dragging * { pointer-events: none; }

.line__inner { display: flex; width: max-content; list-style: none; padding: 0; margin: 0; }

.stop {
  flex: 0 0 auto;
  width: min(19rem, 78vw);
  padding-right: 2.5rem;
  position: relative;
}

/* The drawn rule that makes this a timeline rather than a row of cards. */
.stop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.72rem;
  height: 1px;
  background: var(--board-edge);
}

.stop::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid var(--chalk-3);
  background: var(--board);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.stop[data-near]::after { background: var(--keep); border-color: var(--keep); }
.stop:last-child::before { right: 2.5rem; }

.stop__body { padding-top: 2.25rem; }

.stop__meta { color: var(--chalk-3); font-size: var(--t-small); margin-bottom: 0.5rem; }
.stop__meta b { color: var(--keep); font-weight: 400; font-variant-numeric: tabular-nums; }

.stop h3 { margin-bottom: 0.35rem; }
.stop__role { color: var(--chalk-2); font-size: var(--t-small); margin-bottom: 1rem; }

.stop__lesson {
  font-style: italic;
  color: var(--chalk);
  padding-top: 1rem;
  border-top: 1px solid var(--board-edge-soft);
  max-width: none;
}

.line__foot { display: flex; align-items: center; gap: 1.25rem; padding-top: 0.5rem; }
.line__bar { flex: 1; height: 1px; background: var(--board-edge-soft); position: relative; }
.line__bar i { position: absolute; inset: 0; background: var(--keep); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.line__hint { color: var(--chalk-3); font-size: var(--t-small); }

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

.step button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--board-edge);
  border-radius: 2px;
  color: var(--chalk);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.step button svg { width: 18px; height: 18px; }
.step button:disabled { opacity: 0.3; cursor: default; }
.step button:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .step button:not(:disabled):hover { background: var(--board-up); border-color: var(--chalk-3); }
}

/* --- 11 Beliefs, quotes, writing ---------------------------------------- */

.beliefs { list-style: none; padding: 0; display: grid; gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }

.belief {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.15rem + 1.5vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  max-width: 32ch;
}

.belief em { font-family: var(--body); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Words come up as the line crosses the reading band. */
.belief .w { display: inline-block; color: var(--chalk-3); transition: color 400ms var(--ease-out); }
.belief .w.on { color: var(--chalk); }

.said { display: grid; gap: 1.25rem; }

@media (min-width: 52rem) { .said { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.said figure {
  background: var(--board-up);
  border: 1px solid var(--board-edge);
  border-radius: 3px;
  padding: clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.said blockquote { font-size: var(--t-lead); line-height: 1.32; max-width: none; }
.said figcaption { margin-top: auto; color: var(--chalk-3); font-size: var(--t-small); }
.said figcaption b { color: var(--chalk); font-weight: 400; }







/* --- 12 Booking ---------------------------------------------------------- */

.book__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }

@media (min-width: 64rem) { .book__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }

.book__ask { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0.6rem; color: var(--chalk-2); }
.book__ask li { display: grid; grid-template-columns: 0.6rem 1fr; gap: 0.7rem; align-items: baseline; }
.book__ask li::before { content: ''; width: 4px; height: 4px; margin-top: 0.62em; background: var(--keep); }

.slot { background: var(--board-deep); border: 1px solid var(--board-edge); border-radius: 3px; overflow: hidden; }
.slot__inner { padding: clamp(1.75rem, 1.4rem + 2vw, 3rem); }
.slot__inner h3 { margin-bottom: 0.75rem; }
.slot__inner p { color: var(--chalk-2); }
.slot__inner .btn { margin-top: 1.75rem; }

/* --- Portrait ------------------------------------------------------------ *
   Reads as a designed plate with or without a photograph, so the page is
   publishable before the image exists.
   ------------------------------------------------------------------------- */

.who { display: grid; gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); align-items: start; }

@media (min-width: 52rem) {
  .who { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; }
}

.who__text h2 { max-width: 34ch; }
.who__text .lead { margin-top: 1.35rem; max-width: 46ch; }

/* The confident close, in the page's own voice rather than a grey footnote. */
.who__kicker {
  color: var(--chalk);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.35;
}

.portrait { margin: 0; max-width: 20rem; }

.portrait__frame {
  position: relative;
  padding: 0.7rem;
  border: 1px solid var(--board-edge);
  border-top-color: rgba(239, 234, 220, 0.22);
  border-radius: 4px;
  background: var(--board-deep);
  box-shadow: var(--lift-md);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.portrait__plate {
  position: absolute;
  inset: 0.7rem;
  display: none;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, rgba(30, 40, 37, 0.07) 0 1px, transparent 1px 11px),
    var(--chalk);
}

.portrait__plate span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -0.04em;
  color: var(--board-deep);
}

.portrait.is-empty img { display: none; }
.portrait.is-empty .portrait__plate { display: grid; }

.portrait figcaption { margin-top: 0.85rem; color: var(--chalk-2); font-size: var(--t-small); }

/* --- 13 Footer ----------------------------------------------------------- */

.foot { border-top: 1px solid var(--board-edge-soft); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

.foot__grid { display: grid; gap: 2rem; align-items: end; }

@media (min-width: 52rem) { .foot__grid { grid-template-columns: minmax(0, 1fr) auto; } }

.foot__line {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 26ch;
}

.foot__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__links a { color: var(--chalk-2); text-decoration: none; transition: color 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--keep); } }

.foot__fine { margin-top: 2.5rem; color: var(--chalk-3); font-size: var(--t-small); }

/* --- 14 Accessibility preferences --------------------------------------- */

/* Reveals are scoped to .js so a script failure can't hide content. */
.js [data-rise] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 520ms var(--ease-out) var(--d, 0ms),
    transform 620ms var(--ease-out) var(--d, 0ms);
}

.js [data-rise].is-in { opacity: 1; transform: none; }

.word { display: inline-block; opacity: 0; transform: translate3d(0, 0.3em, 0); transition: opacity 520ms var(--ease-out) var(--d, 0ms), transform 700ms var(--ease-out) var(--d, 0ms); }
.is-lit .word { opacity: 1; transform: none; }

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

@media (prefers-contrast: more) {
  :root { --chalk-2: #d7ded8; --chalk-3: #aab4ac; --board-edge: rgba(239, 234, 220, 0.4); --board-edge-soft: rgba(239, 234, 220, 0.26); }
  .belief .w { color: var(--chalk); }
  .nav { background: var(--board); backdrop-filter: none; }
}

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

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

  /* Keep the meaning, drop the travel. */
  .js [data-rise], .word { transform: none !important; }
  .nav { transform: none !important; }
  .way:hover { transform: none; }
  .belief .w { color: var(--chalk) !important; }
  .board__mark { transform: scaleX(1) !important; }

  /* Never pin: the stack becomes an ordinary grid and the page scrolls normally. */
  .stack, .stack.is-pinned { height: auto !important; }
  .stack.is-pinned .stack__frame { position: static; height: auto; grid-template-columns: minmax(0, 1fr); }
  .stack.is-pinned .stack__index, .stack.is-pinned .stack__bar { display: none; }
  .stack.is-pinned .stack__cards { position: static; height: auto; display: grid; gap: 1rem; }
  .stack.is-pinned .stack__card { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
}