/* Preston Pollard — mirror of ryanleak.com (Preston, 2026-10-14: "exactly the same, spacing by spacing, keeping our colours").
 *
 * Layout numbers are measured from the live reference, not invented:
 *  - every block sits on the reference's own fluid grid (24 columns desktop, 8 phone, 11px gaps,
 *    3vw / 6vw gutters, desktop row height = container width x 0.0215, phone rows min 24px);
 *  - type sizes follow the reference's formulas: desktop (n-1) x 1.2vw + 1rem, phone (n-1) x 1.2vh(max 10.8px) + 1rem;
 *  - section padding/min-height, angled dividers, marquee speeds and slide timing are the measured values.
 * Colour map: reference white -> paper, charcoal -> ink, yellow -> green, sky blue -> mint, navy hover -> deep green.
 * Display face: Cabin Condensed 700 (free) stands in for the reference's licensed face; same cap height, 1.8% narrower,
 * made up with letter-spacing. Body: Poppins, the reference's own body face. Script: Mr Dafoe.
 */

:root {
  --paper: #f4f4f1;
  --paper-3: #e8e7e1;
  --ink: #0e0e0c;
  --ink-2: #4b4b45;
  --accent: #14603f;
  --accent-dark: #0e4a30;
  --accent-light: #8fd3b2;
  --veil: rgba(14, 14, 12, 0.5);

  --font-display: "Cabin Condensed", "Arial Narrow", sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-script: "Mr Dafoe", cursive;
  --track-display: 0.009em;

  --gut: 6vw;
  --hh: 84px;
  --u: min(1.2vh, 10.8px);
  --cw: min(1500px, calc(100vw - var(--gut) * 2));

  --t-h1: calc(5 * var(--u) + 1rem);
  --t-h2: calc(3 * var(--u) + 1rem);
  --t-h3: calc(1.8 * var(--u) + 1rem);
  --t-h4: calc(0.2 * var(--u) + 1rem);
  --t-p: calc(0.1 * var(--u) + 1rem);
  --t-quote: calc(0.9 * var(--u) + 1rem);
  --t-nav: 0.9136rem;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 768px) {
  :root { --gut: 3vw; --hh: 67px; --u: 1.2vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hh); }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-p)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-display); }
h1 { font-size: var(--t-h1); line-height: 0.88; }
h2 { font-size: var(--t-h2); line-height: 0.968; }
h3 { font-size: var(--t-h3); line-height: 1.0208; }
h4 { font-size: var(--t-h4); line-height: 1.25; font-weight: 700; text-transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 2000; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible, .on-green :focus-visible { outline-color: var(--paper); }

/* ---------- the reference's fluid grid ---------- */
.fe {
  display: grid;
  position: relative;
  gap: 11px;
  grid-template-columns:
    minmax(calc(var(--gut) - 11px), 1fr)
    repeat(8, minmax(0, calc((1500px - 77px) / 8)))
    minmax(calc(var(--gut) - 11px), 1fr);
  grid-template-rows: repeat(var(--rm), minmax(24px, auto));
}
.fe > * { grid-area: var(--m); z-index: var(--z, 1); min-width: 0; position: relative; }
@media (min-width: 768px) {
  .fe {
    grid-template-columns:
      minmax(calc(var(--gut) - 11px), 1fr)
      repeat(24, minmax(0, calc((1500px - 253px) / 24)))
      minmax(calc(var(--gut) - 11px), 1fr);
    grid-template-rows: repeat(var(--rd), minmax(calc(var(--cw) * 0.0215), auto));
  }
  .fe > * { grid-area: var(--d); }
}
/* block content alignment (the reference's per-block vertical alignment) */
.b { display: flex; flex-direction: column; justify-content: flex-start; }
.b--mid { justify-content: center; }
.b--end { justify-content: flex-end; }
.media { width: 100%; height: 100%; object-fit: cover; }
/* pictures never size their rows; the grid does, as on the reference */
.media, .tile, .framed, .vid, .arrows { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc { text-align: center; }
.tr { text-align: right; }

/* ---------- buttons (pill, 0.7em 2.4em, grows on hover) ---------- */
.b { container-type: inline-size; }
.pill {
  display: block;
  width: 100%;
  padding: 0.7em 2.4em;
  border-radius: 300px;
  background: var(--accent);
  color: var(--paper);
  font: 700 min(16px, 6.6cqi)/0.92 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.5s var(--ease), padding 0.5s var(--ease);
}
.pill:hover { background: var(--accent-dark); padding-top: 0.9em; padding-bottom: 0.9em; }
.pill:active { transform: translateY(1px); }
.pill.c { text-align: center; }
/* placeholders: styled like the real thing, but they do nothing yet */
[data-soon] { pointer-events: none; }
.on-dark .pill:hover, .on-video .pill:hover { background: var(--paper); color: var(--ink); }
.pill--wrap { white-space: normal; }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--hh);
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut);
}
.logo { display: block; text-decoration: none; color: var(--ink); font-family: var(--font-body); font-style: italic; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; font-size: 22px; }
.logo b { font-weight: 800; }
.logo span { font-weight: 300; }
.hdr__nav { display: none; }
.hdr__nav a { font: 700 var(--t-nav)/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.1em 0; }
.hdr__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hdr__nav .pill { width: auto; font: 700 var(--t-nav)/0.92 var(--font-display); letter-spacing: 0.06em; padding: 0.77em 2.63em; }
.hdr__nav .pill:hover { text-decoration: none; padding-top: 0.9em; padding-bottom: 0.9em; }
.burger { width: 48px; height: 48px; margin-right: -9px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.burger span { display: block; width: 30px; height: 1px; background: currentColor; margin: 8px auto; transition: transform 0.3s var(--ease); }
.menu-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mnav {
  position: fixed; inset: 0 0 auto 0; z-index: 999; max-height: 100dvh; overflow-y: auto;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0 36px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
.mnav__name {
  margin: 0 0 24px; padding: 0 0 24px; width: 100%;
  border-bottom: 1px solid var(--line);
  font: 700 26px/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; text-align: center;
}
.mnav__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 22px; justify-items: center; }
.menu-open .mnav { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
.mnav a:not(.pill) { font: 700 23px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; }
.mnav .pill { width: auto; }
/* the bar behind the open menu carries only the close button */
.menu-open .hdr { background: transparent; }
.menu-open .hdr .logo { opacity: 0; pointer-events: none; }
.menu-open .burger { position: relative; z-index: 1001; }
@media (min-width: 940px) {
  .logo { font-size: clamp(22px, 2.15vw, 34px); }
  .burger, .mnav { display: none; }
  .menu-open .hdr .logo { opacity: 1; }
  .hdr__nav { display: flex; align-items: center; gap: 2vw; }
}

/* ---------- sections ---------- */
main { padding-top: 0; }
.sec { position: relative; z-index: 1; }
.speak { z-index: 3; }
.pod { z-index: 3; }
.prog { z-index: 2; }
.on-dark { background: var(--ink); color: var(--paper); }
.on-green { background: var(--accent); color: var(--paper); }
.on-video { color: var(--paper); }
.bgmedia { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.bgmedia > img, .bgmedia > video { width: 100%; height: 100%; object-fit: cover; }
.bgmedia::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.sec > .fe { z-index: 1; }

/* angled bottom edges, as the reference draws them */
.slant { padding-bottom: var(--slant); }
.slant--lh > .bgmedia, .slant--lh.on-dark { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }
.slant--rh > .bgmedia { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.under > .bgmedia { top: calc(-1 * var(--under)); }

/* hero */
.hero { padding-top: var(--hh); background: var(--ink); color: var(--paper); }
.hero__media { position: absolute; inset: 0; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.hero h2, .hero__h { color: var(--paper); }

/* Preston's own hero lockup (2026-10-14): two big lines, a quieter third, then the two calls to action */
/* Preston's reference: the lockup sits on the right of the frame, ragged left,
   so it never lands on top of him. */
.hero__box { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: clamp(18px, 2.6cqi, 34px); }
.hero__h {
  margin: 0; display: grid; justify-items: end; gap: 0.72em;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-display);
  line-height: 0.98;
}
/* Preston (2026-10-14): same lockup, smaller, with air between the lines, so it
   stops covering him. Three lines now, all one size. */
.hero__big { font-size: min(calc(var(--t-h2) * 0.5), 3.8cqi); }
/* on a phone the column is narrow, so the same formula lands at 17px and reads as weak */
@media (max-width: 767px) { .hero__big { font-size: min(calc(var(--t-h2) * 0.6), 5.2cqi); } }
.hero__sub { font-size: min(calc(var(--t-h2) * 0.46), 3.5cqi); font-weight: 400; letter-spacing: 0.06em; margin-top: 0.35em; }
.hero__sub b { font-weight: 700; }
.hero__h .mk { justify-self: end; }
.hero__h .mk svg { bottom: -0.16em; }
.hero__cta { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.9em; font-size: min(16px, 4.4cqi); }
.pill__arw { width: 1.4em; height: 0.8em; flex: none; }
.watch {
  display: inline-flex; align-items: center; gap: 0.85em;
  color: var(--paper); text-decoration: none;
  font: 700 min(16px, 4.2cqi)/1 var(--font-display); letter-spacing: 0.07em; text-transform: uppercase;
}
.watch__ico { width: 2.3em; height: 2.3em; flex: none; transition: transform 0.4s var(--ease); }
.watch:hover .watch__ico { transform: scale(1.08); }

/* hand-drawn marks: draw in over 0.5s when seen */
.mk { position: relative; display: inline-block; white-space: nowrap; }
.mk svg { position: absolute; overflow: visible; pointer-events: none; z-index: -1; }
.mk--front svg { z-index: 1; }
.mk--u svg { display: none; }
.mk--u::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: -0.1em; height: 0.062em; border-radius: 2px;
  background: var(--mark, var(--accent));
  transform: scaleX(0); transform-origin: left center; transition: transform 0.5s linear;
}
.mk--u.is-drawn::after { transform: scaleX(1); }
.mk--o svg { left: -0.18em; top: -0.16em; width: calc(100% + 0.36em); height: calc(100% + 0.3em); }
.mk path { fill: none; stroke: var(--mark, var(--accent)); stroke-width: var(--mw, 0.05em); stroke-linecap: square; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk svg { max-width: none; }
.mk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s linear; }
.mk.is-drawn path { stroke-dashoffset: 0; }
.on-video, .on-dark, .hero { --mark: var(--accent-light); }

/* logo marquee */
/* Adrian, 2026-10-17: bigger, and plainly moving. The marks were printing at
   48% of the strip on a desktop, which read as a static row of small badges;
   they take about two thirds of it now. The pace went with them — the track
   covers roughly 60px a second on a desktop and 33 on a phone, slow enough to
   read a name and fast enough that you can see it is a carousel. --dur is per
   item, so adding a logo lengthens the loop instead of speeding it up. */
/* On a phone the cell's width is what caps a logo, not its height — a wordmark
   runs out of room sideways long before it runs out of it vertically. So the
   cell is wider here and fewer of them are on screen at once, which is what
   makes each one bigger. */
/* the band is cut to the marks now that they are all one size — 93px wide and
   55 tall on a phone — instead of leaving 60px of air around them */
.logos { height: 94px; margin-top: 30px; overflow: hidden; display: flex; align-items: center; background: var(--paper); }
/* Adrian, twice: the logos are not moving. They were — in Chromium, at the
   measured 39px a second. The duration was `calc(var(--n) * 2.6s)` off an
   inline `--n`, and Safari resolves a calc()-from-a-custom-property
   animation-duration to 0s, which finishes the animation on frame one and
   leaves a strip that never moves. The text band beside it has always run
   because its duration is a plain 46s. So this one is a plain number too.
   Seven logos is settled, so the loop is a constant; if an eighth arrives,
   add about 2.6s here and 3.7s to the desktop override. */
/* The travel is in vw, not a percentage of the track. A percentage resolves
   against the track's own width, which is max-content inside a flex parent,
   and iOS Safari was resolving it to nothing — the strip moved on a Mac and
   sat still on a phone. One row is 14 items, so the distance is just
   14 x the cell width and the second row lands exactly where the first was. */
.logos__track { display: flex; width: max-content; animation: logos-slide 46s linear infinite; will-change: transform; }
.logos__item { flex: 0 0 26vw; height: 72px; display: grid; place-items: center; }
/* Every logo file is now the same 440x260 canvas with its mark scaled to the
   same optical size inside it (build-logo-strip.py), so one width is all
   this needs — a wide wordmark and a square crest come out the same size
   instead of one being capped by width and the other by height.
   No mix-blend-mode either: each file carries the paper tone itself, and a
   blend inside a transform that animates is one of the things iOS Safari
   composites badly. */
.logos__item img { width: 92%; height: auto; }
@media (min-width: 768px) {
  .logos { height: 158px; margin-top: 0; }
  .logos__track { animation-name: logos-slide-wide; animation-duration: 66s; }
  /* a phone needs the wide cell to make a wordmark big; a desktop gets its
     size from the height instead, so the cell stays narrow enough to keep
     five marks on screen */
  .logos__item { flex: 0 0 20vw; height: 158px; }
  .logos__item img { width: 88%; }
}
@keyframes slide-left { to { transform: translateX(-50%); } }
@keyframes logos-slide      { to { transform: translateX(-468vw); } }   /* 18 x 26vw */
@keyframes logos-slide-wide { to { transform: translateX(-360vw); } }   /* 18 x 20vw */

/* Phone "Hi I'm": the exact placement Adrian set in /editor on 2026-10-15
   (band 202px tall showing 54% down, green suit 157px wide at 118,129, 11px gap).
   His numbers were measured on a 390px phone and are kept as vw so they hold from
   320 to 767. The grid steps aside here; everything else on the page still uses it. */
@media (max-width: 767px) {
  .about .fe { display: block; position: relative; }
  .about .fe > * { width: auto; }
  .about .ph--band { height: 51.79vw; aspect-ratio: auto; }
  .about .ph--port {
    position: absolute; z-index: 6;
    left: 30.26%; top: 33.08vw; width: 40.26%; aspect-ratio: 4 / 5;
  }
  .about .b { padding: 0 var(--gut); }
  .about .ph--port + .b { margin-top: 34.36vw; }
  .about .bio { margin-top: 10px; }
}

/* about ("Hi I'm") */
.about { background: var(--paper); }
/* the official bio Preston sent (2026-10-14), lead sentence set up a step */
.bio { max-width: 62ch; }
.lbl.lbl--ink { color: var(--accent); }
/* phone: the bio is what an About tap should land on, so it comes before the pictures,
   which then need a shape of their own since no text sits in their rows any more */
.ph--port { aspect-ratio: 4 / 5; }
.ph--port img { object-position: 50% 18%; }
.ph--band { aspect-ratio: 16 / 9; }
/* stage.jpg is a stack: Preston speaking on top, the audience below. Hold the crop
   on him, the way the reference's band shows its speaker. */
.ph--band img { object-position: 50% 16%; }
@media (min-width: 768px) {
  .ph--port, .ph--band { aspect-ratio: auto; }
  .ph--port img { object-position: 50% 50%; }
}
.bio p { text-wrap: pretty; }
.bio__lead { font-size: 1.22em; line-height: 1.42; font-weight: 500; margin-bottom: 1.1em; }
.bio__more { margin-top: 1.4em; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* the two buttons sit side by side on a desktop instead of stacking */
@media (min-width: 768px) { .bio__more { flex-direction: row; gap: 16px; } }
.bio__more .pill { display: inline-block; width: auto; }
@media (max-width: 767px) {
  .sig { margin-top: 18px; }
  .about img[src*=stage] { object-position: 50% 54%; }  /* Adrian set this in /editor */
  .about img[src*=about-front] { object-position: 50% 20%; }
}
.sig { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1; transform: rotate(-10deg); white-space: nowrap; font-size: 12vw; }
@media (min-width: 768px) { .sig { font-size: 6.1vw; } }
/* "Who is Preston?" above the About bio, in the bold heading face */
.bio__q { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-display); font-size: min(calc(var(--t-h2) * 0.72), 7vw); line-height: 0.95; color: var(--ink); margin: 0 0 0.5em; }
@media (max-width: 767px) { .bio__q { margin-top: 28px; } }

/* scrolling band */
.band { min-height: 23vh; padding: 2.3vmax 0; display: flex; flex-direction: column; justify-content: center; }
.band__row { overflow: hidden; display: flex; align-items: center; height: 100%; }
.band__track { display: flex; width: max-content; animation: slide-left var(--dur, 46s) linear infinite; }
.band__track h2 { line-height: 1.4; color: rgba(244, 244, 241, 0.42); padding-right: 0.6em; white-space: nowrap; }  /* Preston: the faded band was too faint to read */

/* testimonials */
.testi { overflow: hidden; }
.testi__slides { display: grid; grid-template-columns: minmax(0, 1fr); }
.testi__slide {
  grid-area: 1 / 1;
  padding: 96px var(--gut) 0;
  text-align: center;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0s 0.6s;
}
.testi__slide.is-on { transform: none; visibility: visible; transition: transform 0.6s var(--ease); }
.testi__slide.is-prev { transform: translateX(-100%); }
.testi__slide h2 { font-size: var(--t-quote); line-height: 1.3; letter-spacing: var(--track-display); max-width: 786px; margin: 0 auto 16px; }
.testi__slide blockquote { margin: 0 auto; max-width: 786px; }
.testi__who { margin: 26px auto 0; max-width: 786px; }
.testi__who em { display: block; font: 400 min(3em, 12.5vw)/1.05 var(--font-script); font-style: normal; white-space: nowrap; }
.testi__who strong { display: block; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.08em; font-weight: 800; line-height: 1.45; }
.testi { position: relative; }
.testi__nav { display: flex; justify-content: center; gap: 22px; padding: 56px 0 72px; }
.testi__btn { width: 44px; height: 44px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.testi__btn svg { width: 22px; height: 12px; }
@media (min-width: 768px) {
  .testi { min-height: 540px; display: flex; align-items: center; position: relative; }  /* was 686, the reference's height for longer quotes than Preston's */
  .testi__slides { width: 100%; }
  .testi__slide { padding: 0 var(--gut); }
  .testi__nav { padding: 0; position: absolute; inset: 0 6vw; bottom: 0; justify-content: space-between; align-items: center; pointer-events: none; }
  .testi__btn { pointer-events: auto; width: 35px; }
  .testi__btn svg { width: 35px; height: 14px; }
}

/* speaking (video) */
.speak { --slant: 2vw; min-height: 66vh; padding-top: 6.6vmax; padding-bottom: calc(6.6vmax + var(--slant)); display: flex; flex-direction: column; justify-content: center; }
.arrows { object-fit: contain; }
.arrows path { fill: none; stroke: var(--paper); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* shop (the reference's book band) */
.shop { min-height: 10vh; padding: 1vmax 0; }
.shop h3 { margin-bottom: 33px; }
.shop__price { font: 700 28px/1 var(--font-display); letter-spacing: 0.02em; display: flex; align-items: center; height: 100%; }

/* connect */
.tile { width: 100%; height: 100%; }
.tile--mint { background: var(--accent-light); }
.tile--ink { background: var(--ink); }
.tile--green { background: var(--accent); }
.framed { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.vid { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; }
.vid img, .vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -16px; }
.vid__play path { fill: var(--paper); }
.browse { font: 700 var(--t-h4)/1.25 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--paper); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.handle { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--paper); font: 800 12.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; height: 100%; }
.handle svg { width: 18px; height: 18px; flex: none; }
.tweet { color: var(--paper); font-weight: 700; text-align: center; line-height: 1.5; }
.tweet span { text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.25em; }
.socials { display: flex; justify-content: center; align-items: center; gap: 16px; height: 100%; }
.socials a { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink); }
.socials svg { width: 24px; height: 24px; }
.reels-h { display: flex; align-items: center; gap: 26px; font: 800 18px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; height: 100%; }
.reels-h svg { width: 30px; height: 30px; flex: none; }
.rule { align-self: center; height: 1px; background: var(--ink); }
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
.reels a { display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); }
.reels img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reels video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.reels a:hover video { transform: scale(1.1); }
/* name + title under each interview: small, but white on ink so it reads */
.reel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.reel__cap { color: var(--paper); font-size: 13px; line-height: 1.4; text-wrap: pretty; }
.reel__cap b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.reel__cap span { opacity: 0.82; }
@media (min-width: 768px) {
  /* four interviews now, held at the reference's tile size and centred in the panel */
  .reels { grid-template-columns: repeat(4, minmax(0, 198px)); justify-content: center; gap: 24px; }
  .handle { font-size: 13px; }
  .reels-h { font-size: 19px; }
}


/* program (the reference's self-leadership band) */
/* standalone pages (About): the mirror's type and colour, a plain reading column
   instead of the reference's 24-column grid, which only earns its keep on the home page */
.page { padding: 7vmax var(--gut); background: var(--paper); }
.page--top { padding-top: calc(var(--hh) + 5vmax); }
.page__in { max-width: 1180px; margin: 0 auto; }
.page h1 { font-size: var(--t-h1); line-height: 0.9; margin-bottom: 0.5em; }
.page p { text-wrap: pretty; }
.page .lead { font-size: 1.28em; line-height: 1.45; font-weight: 500; }
.page .lead + p { margin-top: 1em; }
/* About page: every body paragraph matches the opening one (Adrian 2026-10-21) */
.pg-about .page p:not(.statement):not(.lbl):not(.page__cta) { font-size: 1.28em; line-height: 1.45; font-weight: 500; }
.split { display: grid; gap: 7vmin; align-items: center; }
.split__text { max-width: 60ch; }
.split__text p + p { margin-top: 1em; }
.split__fig { margin: 0; }
.split__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; aspect-ratio: 4 / 5; }
.split__fig--wide img { aspect-ratio: 4 / 3; }
.page--band { padding-top: 8vmax; padding-bottom: 8vmax; }
/* .page sets its own paper background, so the band has to win it back */
.page.on-green { background: var(--accent); color: var(--paper); }
.page.on-dark { background: var(--ink); color: var(--paper); }
.statement {
  font: 700 var(--t-h2)/1.02 var(--font-display);
  letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; margin: 0;
}
.statement--ink { color: var(--ink); font-size: var(--t-h3); margin-bottom: 1.2em; max-width: 24ch; }
.page--bio { background: var(--paper-3); }
.cols { columns: 2; column-gap: 7vmin; }
.cols p { break-inside: avoid; margin-bottom: 1.1em; }
.page__cta { margin-top: 2.4em; }
.page__cta .pill { display: inline-block; width: auto; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 0.78fr; }
  .split--flip .split__text { order: 2; }
}
@media (max-width: 767px) {
  .page { padding: 11vmax var(--gut); }
  .cols { columns: 1; }
  .split__fig--wide img { aspect-ratio: 5 / 4; }
  /* the bio's opening sentence is 25 words: at h3 it runs ten lines of uppercase on a phone */
  .statement--ink { font-size: calc(var(--t-h4) * 1.3); line-height: 1.12; max-width: none; }
}

/* Push Forward Program page */
.page h1 .q2, .page .q2 { display: block; margin-top: 0.42em; }
.pf__turn { font-weight: 700; font-size: 1.1em; margin-top: 1.1em; }
.split--wide { align-items: start; margin-top: 3vmax; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 7vmin; margin: 4vmax 0 0; }
.stats .stat { border-top: 1px solid rgba(14, 14, 12, 0.18); padding-top: 22px; }
.one--page { background: var(--ink); margin-top: 5vmax; text-align: center; border-radius: 2px; }
.pf__close { max-width: 46ch; margin-left: auto; margin-right: auto; }
.page__in.tc .page__cta .pill { margin: 0 auto; }
@media (max-width: 767px) {
  /* the question carries a drawn underline across "began to thrive", which cannot
     wrap, so the heading is sized to the phone rather than the other way round */
  .page h1 { font-size: 7.2vw; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .split--wide .split__fig { margin-top: 6vmax; }
}

/* booking form (Preston's fields, 2026-10-14) */
.book { background: var(--paper-3); padding: 7vmax 0; }
.book h2 { margin-bottom: 22px; }
.book__note { max-width: 34ch; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; margin: 0 0 22px; }
.fld { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.fld--wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fld label { font: 700 0.82rem/1.3 var(--font-display); letter-spacing: 0.11em; text-transform: uppercase; }
.fld__opt { font-weight: 400; letter-spacing: 0.06em; color: var(--ink-2); }
.fld input, .fld select, .fld textarea {
  font: 400 16px/1.4 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(14, 14, 12, 0.22);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fld textarea { resize: vertical; min-height: 110px; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.fld :is(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 96, 63, 0.18); }
.fld :is(input, select, textarea)[aria-invalid="true"] { border-color: #8c2f23; }
.fld__err { font-size: 0.78rem; color: #8c2f23; }
.form__go { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
.form__go .pill { width: auto; }
.form__msg:empty { display: none; }
.form__msg { font-size: 0.86rem; line-height: 1.5; max-width: 52ch; margin: 0; }
.form__msg--ok { color: var(--accent); font-weight: 600; }
.form__msg--bad { color: #8c2f23; font-weight: 600; }
.form__go .pill[disabled] { opacity: 0.6; cursor: progress; }
.book .fine { max-width: 62ch; }
@media (max-width: 767px) {
  .book { padding: 11vmax 0; }
  .form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Push Forward Program page copy (Preston, 2026-10-14) */
.lbl { font: 700 var(--t-h4)/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; color: var(--accent-light); }
/* the second question drops to its own line, with air after the first question mark */
.q2 { display: block; margin-top: 0.42em; }
.res { background: var(--paper); padding: 7vmax 0 2vmax; }  /* short bottom: Popular interviews follows close (Adrian 2026-10-21) */
.res h2 { margin-bottom: 0; }
.stat { justify-content: flex-start; padding-top: 22px; border-top: 1px solid rgba(14, 14, 12, 0.18); }
.stat__n { font: 700 var(--t-h2)/0.95 var(--font-display); letter-spacing: var(--track-display); color: var(--accent); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stat__n > span { display: block; white-space: nowrap; }
.stat__n small { display: block; font-size: 0.36em; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.3em; }
.stat__l { font-size: calc(var(--t-p) * 0.95); line-height: 1.4; text-wrap: pretty; }
.one { color: var(--paper); padding: 4vmax var(--gut); }
.one h3 { margin-bottom: 18px; }
.one p { font-size: calc(var(--t-p) * 1.15); color: var(--paper); margin: 0; }
.fine { font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); margin: 18px 0 0; }
@media (max-width: 767px) {
  .res { padding: 10vmax 0 3vmax; }
  /* "Measurable results." is one drawn-underline phrase, which cannot wrap, so the
     heading is sized to fit it on a phone instead of running off the edge */
  .res h2 { font-size: calc(var(--t-h2) * 0.78); }
  .one { padding: 7vmax var(--gut); }
}

.prog { --slant: 6vw; --under: 4vw; min-height: 66vh; padding-top: 6.6vmax; padding-bottom: calc(6.6vmax + var(--slant)); display: flex; flex-direction: column; justify-content: center; }
.prog h2 { margin-bottom: 30px; }
.prog p b { font-weight: 700; }

/* footer */
.ftr { padding: 0.1vmax 0 0; min-height: 1vh; }
.bubble { position: relative; display: inline-block; justify-self: center; align-self: center; background: var(--accent-light); color: var(--ink); font: 800 10px/1 var(--font-body); letter-spacing: 0.02em; text-transform: uppercase; padding: 9px 16px; border-radius: 5px; box-shadow: 0 2px 0 rgba(14, 14, 12, 0.08); }
.bubble::after { content: ""; position: absolute; left: 10px; bottom: -8px; border: 8px solid transparent; border-top-color: var(--accent-light); border-left-color: var(--accent-light); border-bottom: 0; }
.flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; align-content: start; }
.flinks a { font: 700 calc(var(--t-h4) * 1.066)/1.25 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.flinks a:hover { color: var(--accent); }
/* social icons in a row under the footer name (Adrian 2026-10-21) */
.ftr__social { display: flex; gap: 8px; justify-self: center; }
.ftr__social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.ftr__social a:hover { color: var(--accent); }
.ftr__social svg { width: 26px; height: 26px; }
@media (min-width: 768px) { .ftr__social { justify-self: start; margin-left: -9px; } }
.ftr .logo { font-size: 9.5vw; justify-self: center; }
.copy { font: 700 var(--t-h4)/1.25 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--paper); text-align: center; align-self: center; padding: 0 var(--gut); }
@media (min-width: 768px) { .ftr .logo { font-size: 2.05vw; justify-self: start; } }

/* lightbox for "preview speaking" */
/* The player takes the whole screen: Preston asked for one tap to fill the
   phone, with nobody sent off to youtube.com. */
.lb {
  border: 0; padding: 0; margin: 0; background: var(--ink);
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  display: grid; place-items: center;
}
/* display:grid above beats the browser's own hiding of a closed <dialog>, which
   left the empty player sitting under the footer. Hide it until it opens. */
.lb:not([open]) { display: none; }
.lb::backdrop { background: rgba(14, 14, 12, 0.96); }
/* as big as 16:9 fits in the screen, whichever way the phone is held */
.lb__frame { width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); background: var(--ink); }
.lb__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb__x {
  position: fixed; right: 6px; top: 6px; z-index: 2;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(14, 14, 12, 0.55); color: var(--paper);
  font-size: 28px; line-height: 1; cursor: pointer;
}


@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; }
  /* Adrian, 2026-10-17: "It should be moving everywhere." So Reduce Motion
     slows the logo strip rather than stopping it — a constant-speed sideways
     slide is the mildest motion there is, and a dead strip reads as a broken
     page. The big moving text band still stops outright. */
  .logos__track { animation-duration: 124s; }
  .mk--u::after { transition: none; transform: scaleX(1); }
  .mk path { transition: none; stroke-dashoffset: 0; }
  .testi__slide, .testi__slide.is-on { transition: opacity 0.15s linear; }
  .pill, .reels img { transition: none; }
}

/* room under the About block: the Get to know me button was sitting on the dark band below */
.sec.about { padding-bottom: 7vmax; }
@media (max-width: 767px) { .sec.about { padding-bottom: 14vmax; } }

/* keep each phrase of the bio line together when it wraps */
.nw { white-space: nowrap; }
.ln { display: block; }  /* one title per line, no separators */