/* =============================================================
   The Wheels of Ezekiel™ — Kingdom Consulting

   LOCKED SYSTEM
   Sans      Manrope. Navigation, body, buttons, every heading.
   Serif     Instrument Serif. ONE use only: the hero product name.
   Spacing   8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 120
   Width     1200px container
   Buttons   48px tall, 3px radius, no hover movement
   Dividers  Only where two genuinely different zones meet
   Icons     Two on the page: the button arrow and the crown payoff
   Cards     None
   Motion    One idea: the Wheel resolves when you reach it
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:        #070707;
  --ink-2:      #0C0C0C;
  --paper:      #F7F4EF;
  --paper-2:    #ECE7DE;

  --on-ink:       #F2EFE9;
  --on-ink-soft:  #ADA79D;
  --on-ink-mute:  #888176;
  --on-paper:     #14130F;
  --on-paper-soft:#524D45;
  --on-paper-mute:#635E55;

  --gold:        #D8B460;
  --gold-bright: #EFD79B;
  --gold-deep:   #82531B;
  --gold-ink:    #231804;

  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:120px;

  --section-y: clamp(64px, 7.6vw, 112px);
  --shell: 1200px;
  --shell-wide: 1360px;
  --gutter: clamp(20px, 4.4vw, 40px);
  --hero-strip-h: 178px;

  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --hero-font: "Archivo", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--sans);
  font-size:clamp(16px,.28vw + 15.1px,17.5px);
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul,ol,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- Layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--wide{ max-width:var(--shell-wide); }
.section{ padding-block:var(--section-y); }
.section--ink{ background:var(--ink); }
.section--paper{ background:var(--paper); color:var(--on-paper); }
.section--paper2{ background:var(--paper-2); color:var(--on-paper); }

/* ---------- Type ----------
   Sans carries every heading. Serif appears exactly once. */
.h2{
  font-family:var(--sans);
  font-size:clamp(30px,3.1vw,46px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.028em;
  text-wrap:balance;
  max-width:20ch;
}
.h2 em{ font-style:normal; color:var(--gold); }
.section--paper .h2 em,
.section--paper2 .h2 em{ color:var(--gold-deep); }
.h2--center{ margin-inline:auto; text-align:center; }

.h3{
  font-size:clamp(20px,1.35vw,24px);
  font-weight:700; line-height:1.25; letter-spacing:-.022em;
}
.h3--lg{ font-size:clamp(24px,2.1vw,32px); line-height:1.2; }

.lede{
  font-size:clamp(17px,.5vw + 15.6px,20px);
  line-height:1.6; color:var(--on-ink-soft); max-width:56ch;
  text-wrap:pretty;
}
.section--paper .lede,
.section--paper2 .lede{ color:var(--on-paper-soft); }

.body{ max-width:60ch; color:var(--on-ink-soft); }
.section--paper .body,
.section--paper2 .body{ color:var(--on-paper-soft); }
.body + .body{ margin-top:var(--s5); }

/* The only two small labels on the page. */
.label{
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 var(--s4);
}
.section--paper .label,
.section--paper2 .label{ color:var(--gold-deep); }

.tm{ font-size:.4em; vertical-align:.9em; margin-left:.08em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; border-radius:3px;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg{ width:14px; height:14px; flex:none; }
.btn--gold{ background:var(--gold); color:var(--gold-ink); }
.btn--gold:hover{ background:var(--gold-bright); }
.btn--ghost{ border-color:rgba(242,239,233,.3); color:var(--on-ink); }
.btn--ghost:hover{ border-color:var(--on-ink); }
.btn--sm{ height:40px; padding:0 18px; font-size:12px; }

/* Quiet text link. */
.tlink{
  display:inline-block;
  font-size:15px; font-weight:600; color:var(--on-paper);
  border-bottom:1px solid rgba(20,19,15,.28); padding-bottom:2px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tlink:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }

/* ---------- Photography placeholders ----------
   Swap the element for <img>; the ratio, crop zone and treatment stay. */
.ph{
  position:relative; overflow:hidden;
  background:linear-gradient(158deg,#2E2C26 0%,#1C1B17 46%,#100F0D 100%);
}
.ph::after{
  content:attr(data-ph);
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,239,233,.45); text-align:center;
}
.ph > img{ width:100%; height:100%; object-fit:cover; }

/* =============================================================
   HEADER
   ============================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  font-family:var(--hero-font);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(7,7,7,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(242,239,233,.1);
}
.header__bar{ display:flex; align-items:center; min-height:84px; }
.header__logo img{ width:auto; height:44px; }
.header__nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(18px,2vw,28px); }
.header__nav a{
  white-space:nowrap;
  font-size:14px; font-weight:700; letter-spacing:0; color:var(--on-ink-soft);
  transition:color .2s var(--ease);
}
.header__nav a:hover{ color:var(--on-ink); }
.header__nav a.btn{
  margin-left:var(--s3);
  height:43px; padding:0 20px; border-radius:2px; font-size:12px;
}

.btn--gold-outline{ background:transparent; border-color:var(--gold); color:var(--gold); }
.btn--gold-outline:hover{ background:rgba(216,180,96,.12); }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid rgba(242,239,233,.2); border-radius:3px; cursor:pointer;
}
.burger span{
  display:block; width:18px; height:1.5px; margin:0 auto; background:var(--on-ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span{ margin-top:5px; }
.header.is-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.header.is-open .burger span:nth-child(2){ opacity:0; }
.header.is-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1000px){
  .header{ background:rgba(7,7,7,.9); backdrop-filter:blur(14px); }
  .burger{ display:block; }
  .header__nav{
    display:none;
    position:absolute; inset:84px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:var(--s3) var(--gutter) var(--s6);
    background:rgba(7,7,7,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(242,239,233,.1);
  }
  .header.is-open .header__nav{ display:flex; }
  .header__nav a{ padding:14px 0; font-size:16px; font-weight:600; color:var(--on-ink); }
  .header__nav a.btn{ margin:var(--s4) 0 0; }
}

/* =============================================================
   HERO — Direction 2: one photograph across the whole frame,
   dark on the left where the words live.
   ============================================================= */
.hero{ position:relative; background:var(--ink); overflow:hidden; isolation:isolate; font-family:var(--hero-font); }

.hero__media{ position:absolute; inset:0; z-index:0; }

.hero__plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 35%;
}

/* The fade. Built to blend the photo into the dark hero for legibility. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg,
      #070707 0%,
      rgba(7,7,7,.97) 22%,
      rgba(7,7,7,.74) 40%,
      rgba(7,7,7,.28) 58%,
      rgba(7,7,7,.04) 78%,
      rgba(7,7,7,.18) 100%),
    linear-gradient(to top,    #070707 0%, rgba(7,7,7,.4) 14%, rgba(7,7,7,0) 38%),
    linear-gradient(to bottom, rgba(7,7,7,.68) 0%, rgba(7,7,7,0) 20%);
}

.hero__inner{
  position:relative; z-index:3;
  min-height:calc(100svh - var(--hero-strip-h));
  display:grid; align-items:center;
  padding-block:calc(84px + var(--s7)) var(--s6);
}
.hero__copy{ max-width:570px; }

.hero__eyebrow{ font-size:16px; letter-spacing:.07em; margin-bottom:20px; }

.hero__title{
  font-family:var(--hero-font);
  font-size:clamp(52px,4vw,58px);
  font-weight:800; line-height:.99; letter-spacing:-.04em;
  max-width:none;
  margin:0 0 var(--s5);
}
.hero__title-accent{ color:var(--gold); }

.hero__body{
  font-size:18px; font-weight:500; line-height:1.55;
  color:rgba(242,239,233,.92); max-width:41ch; margin:0 0 var(--s6);
}
.hero__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s6); }

.hero__learnmore{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--on-ink);
  transition:color .2s var(--ease);
}
.hero__learnmore svg{ width:12px; height:12px; }
.hero__learnmore:hover{ color:var(--gold); }

/* =============================================================
   FACILITATOR — Andrew carries the weight; the three facts read as
   quiet supporting proof, not a row of cloned feature cards.
   ============================================================= */
.facilitator{
  position:relative; z-index:4; background:var(--ink);
  font-family:var(--hero-font);
  box-shadow:inset 0 1px 0 rgba(242,239,233,.09);
}
.facilitator__row{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s6) var(--s8);
  min-height:var(--hero-strip-h);
  padding-block:var(--s5);
}
.facilitator__who{
  flex:0 1 auto; width:clamp(300px,41%,420px);
  display:flex; align-items:center; gap:var(--s4);
}
.facilitator__photo{
  flex:none; width:74px; height:74px; border-radius:50%;
  overflow:hidden; background:var(--paper);
}
.facilitator__photo img{ width:100%; height:100%; object-fit:cover; }
.facilitator__eyebrow{
  display:block; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--on-ink-soft); margin-bottom:3px;
}
.facilitator__name{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.facilitator__desc{
  margin-top:5px; font-size:15px; font-weight:400; line-height:1.5;
  color:var(--on-ink-soft); max-width:34ch;
}

.facilitator__facts{
  flex:1 1 480px;
  display:flex; flex-wrap:nowrap; align-items:flex-start; gap:var(--s7) var(--s8);
}
/* Icon above the label, both centred — one line of copy per point. */
.fpoint{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px;
  flex:1 1 0; min-width:0;
}
.fpoint__icon{ flex:none; width:35px; height:35px; color:var(--gold); }
.fpoint__title{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gold); line-height:1.45;
}

@media (max-width:1080px){
  .facilitator__facts{ gap:var(--s6) var(--s7); }
}
@media (max-width:900px){
  .facilitator__row{ flex-direction:column; align-items:flex-start; min-height:0; gap:var(--s5); }
  .facilitator__who{ width:100%; }
  /* Below this point .facilitator__row is a column, so the row-level
     flex:1 1 480px on .facilitator__facts (a horizontal sizing hint)
     would otherwise be read as a 480px HEIGHT basis, leaving a tall
     empty box under the three stacked items; flex:0 1 auto lets it
     size to its actual content instead. Same reasoning applies to
     fpoint's flex-grow, which is only meant for the row layout above
     this breakpoint and must not stretch into that leftover space. */
  .facilitator__facts{ flex:0 1 auto; width:100%; gap:var(--s4) var(--s7); }
  .fpoint{ flex:0 1 auto; }
}
@media (max-width:480px){
  .facilitator__who{ flex-direction:column; align-items:flex-start; text-align:left; }
  /* Stretch so each stacked point fills the column and its centred
     icon + label share one centre axis, instead of each block being
     shrink-wrapped to its own text and landing at a different offset. */
  .facilitator__facts{ flex-direction:column; align-items:stretch; gap:var(--s5); }
}

/* =============================================================
   CHALLENGE — editorial left column, numbered 01–05 rail on the right.
   Everything here is scoped to .challenge so the global .h2 / .body
   rules used by the rest of the page stay untouched.
   ============================================================= */
.challenge{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(72px,7vw,112px);
  align-items:stretch;
}

/* ---- left column ---- */
.challenge__title{
  font-family:var(--sans);
  font-size:clamp(44px,3.8vw,58px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--on-paper);
  margin:0;
}
/* the approved line breaks, held explicitly rather than left to wrapping */
.challenge__title span{ display:block; }
.challenge__title::after{
  content:"";
  display:block;
  width:36px; height:2px;
  background:var(--gold-deep);
  margin-top:26px;
}

.challenge__para{
  font-size:19px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:-.005em;
  color:var(--on-paper);
  max-width:47ch;
}
.challenge__title + .challenge__para{ margin-top:28px; }
.challenge__para + .challenge__para{ margin-top:30px; }

/* The four paragraphs rise in one after another once the lead block
   is reached — reduced-motion visitors get them via the sitewide
   catch-all below (instant .is-drawn + near-zero transition duration),
   same as every other [data-reveal] element on the page. */
.challenge__para{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.challenge__lead.is-drawn .challenge__para{ opacity:1; transform:translateY(0); }
.challenge__lead.is-drawn .challenge__para:nth-of-type(1){ transition-delay:0s; }
.challenge__lead.is-drawn .challenge__para:nth-of-type(2){ transition-delay:.12s; }
.challenge__lead.is-drawn .challenge__para:nth-of-type(3){ transition-delay:.24s; }
.challenge__lead.is-drawn .challenge__para:nth-of-type(4){ transition-delay:.36s; }

/* ---- right column: the 01–05 rail ---- */
.challenge__list{
  --marker:36px;
  --marker-gap:28px;
  padding-top:20px;   /* sets the composed offset against the heading */
  /* Stretches to match the paragraph column's height (see .challenge's
     align-items:stretch), then hands that height to the 6 items below
     as equal flex shares, so item 06 lands at the same baseline as the
     last paragraph instead of stopping partway down the column. */
  height:100%;
  display:flex;
  flex-direction:column;
}

.challenge__item{
  position:relative;
  display:grid;
  grid-template-columns:var(--marker) minmax(0,1fr);
  column-gap:var(--marker-gap);
  align-items:start;
  align-content:start;
  flex:1;
  padding-bottom:0;
}
.challenge__item:last-child{ padding-bottom:0; }

/* One continuous dashed rail, drawn per item so it also crosses the
   spacing between rows, and stopped dead at the centre of 05. */
.challenge__item::before{
  content:"";
  position:absolute;
  left:calc(var(--marker) / 2);
  top:0; bottom:0;
  transform:translateX(-.5px) scaleY(0);
  transform-origin:top;
  border-left:1px dashed rgba(130,83,27,.45);
  transition:transform .5s var(--ease);
}
.challenge__item:first-child::before{ top:calc(var(--marker) / 2); }
.challenge__item:last-child::before{
  bottom:auto; height:calc(var(--marker) / 2);
}

/* The rail draws down through the six uncertainties one at a time,
   as if working down the list — never all at once, never a generic
   fade. Each numbered marker lights up the instant the line reaches
   it. The sentences themselves are never gated by this: they are
   readable immediately, only the connective rail moves. */
.challenge__list.is-drawn .challenge__item::before{ transform:translateX(-.5px) scaleY(1); }
.challenge__list.is-drawn .challenge__item:nth-child(1)::before{ transition-delay:0s; }
.challenge__list.is-drawn .challenge__item:nth-child(2)::before{ transition-delay:.4s; }
.challenge__list.is-drawn .challenge__item:nth-child(3)::before{ transition-delay:.8s; }
.challenge__list.is-drawn .challenge__item:nth-child(4)::before{ transition-delay:1.2s; }
.challenge__list.is-drawn .challenge__item:nth-child(5)::before{ transition-delay:1.6s; }
.challenge__list.is-drawn .challenge__item:nth-child(6)::before{ transition-delay:2s; }

/* Separator sits a fixed distance under each question's own text,
   not the item's box — the item's box is now a flexed, equal-height
   share of the column (see .challenge__list), so anchoring from its
   bottom edge would leave the line floating in empty space below
   shorter questions. Anchoring to .challenge__text's own bottom edge
   (which still only ever hugs its real content height) keeps the line
   glued to the text at every item, regardless of box height. */
.challenge__item:not(:last-child) .challenge__text::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:calc(100% + 30px);
  border-top:1px solid rgba(130,83,27,.33);
}

.challenge__number{
  position:relative; z-index:1;
  width:var(--marker); height:var(--marker);
  border-radius:50%;
  background:var(--gold-deep);
  color:var(--paper);
  font-size:11.5px; font-weight:700; line-height:1;
  letter-spacing:.02em;
  display:grid; place-items:center;
  transform:scale(.5); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.challenge__list.is-drawn .challenge__number{ transform:scale(1); opacity:1; }
.challenge__list.is-drawn .challenge__item:nth-child(1) .challenge__number{ transition-delay:.05s; }
.challenge__list.is-drawn .challenge__item:nth-child(2) .challenge__number{ transition-delay:.55s; }
.challenge__list.is-drawn .challenge__item:nth-child(3) .challenge__number{ transition-delay:.95s; }
.challenge__list.is-drawn .challenge__item:nth-child(4) .challenge__number{ transition-delay:1.35s; }
.challenge__list.is-drawn .challenge__item:nth-child(5) .challenge__number{ transition-delay:1.8s; }
.challenge__list.is-drawn .challenge__item:nth-child(6) .challenge__number{ transition-delay:2.25s; }

.challenge__text{
  position:relative;            /* containing block for the ::after separator */
  padding-top:3px;              /* optically centres line 1 on the marker */
  font-size:19px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--on-paper);
}

@media (max-width:880px){
  .challenge{ grid-template-columns:1fr; gap:52px; }
  .challenge__list{ max-width:none; padding-top:0; }
  /* The stretch/flex height-matching above only makes sense next to a
     taller sibling column; once the two columns stack full-width there
     is no height to match, so cancel it here and go back to normal
     block flow with real spacing between items instead of an equal
     (here: zero) flex share. */
  .challenge__list{ height:auto; display:block; }
  .challenge__item{ flex:none; padding-bottom:52px; }
}
@media (max-width:560px){
  /* fixed line breaks stop helping once the column is this narrow */
  .challenge__title{ font-size:clamp(32px,8.5vw,44px); }
  .challenge__title span{ display:inline; }
  .challenge__list{ --marker:30px; --marker-gap:17px; }
  .challenge__item{ padding-bottom:36px; }
  .challenge__item:not(:last-child) .challenge__text::after{ top:calc(100% + 18px); }
  .challenge__text{ font-size:16.5px; padding-top:2px; }
  .challenge__number{ font-size:11px; }
}

/* =============================================================
   FRAMEWORK — Andrew's own Wheel artwork (Wheel.png). Left column
   is the heading, right column is the image; stacks on mobile.
   ============================================================= */
#framework{ padding-block:clamp(64px,5.8vw,88px) clamp(64px,5.8vw,88px); }

.framework__stage{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,2fr);
  gap:clamp(32px,4vw,56px);
  align-items:center;
}

.framework__title{
  font-family:var(--sans);
  font-size:clamp(36px,2.9vw,42px);
  font-weight:700; line-height:1.08; letter-spacing:-.03em;
  color:var(--on-ink);
  max-width:none;
  margin:0;
}
.framework__title span,
.framework__title em{ display:block; }
.framework__title em{ font-style:normal; color:var(--gold); }
.framework__title::after{
  content:""; display:block;
  width:34px; height:2px; background:var(--gold);
  margin-top:22px;
}

/* ---- the Wheel image: a simple fade-up, no separate draw stages
   since it is now one flat picture rather than an assembled SVG ---- */
.framework__visual{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.framework__visual.is-drawn{ opacity:1; transform:none; }
.framework__image{ width:80%; height:auto; margin-inline:auto; }

/* ---- tablet: stack, heading first ---- */
@media (max-width:760px){
  .framework__stage{ grid-template-columns:1fr; gap:var(--s6); }
  .framework__title span{ display:inline; }
  .framework__title em{ display:inline; }
}

/* =============================================================
   PROCESS — the six-session journey to the completed wheel.
   Everything below is scoped under #process; the shared .h2/.lede
   classes keep their base rules and are only refined here via
   descendant selectors.
   ============================================================= */
#process{ padding-block:clamp(72px,7vw,88px) clamp(64px,6vw,80px); }

.process__head{ text-align:center; margin-bottom:0; }
.process__head .process__title{
  font-size:clamp(46px,4vw,58px);
  line-height:1.05; letter-spacing:-.035em;
  max-width:800px; margin-inline:auto;
}
.process__head .process__lede{
  margin:20px auto 0;
  max-width:560px;
  font-size:16.5px; line-height:1.6; font-weight:400;
}

/* ---- the track ---- */
.process-track{
  position:relative;
  max-width:1260px; margin:60px auto 0;
}
.process-track__line{
  position:absolute; z-index:0;
  left:6.99%; right:8.04%; top:32px; height:1px;
  background:var(--gold); opacity:.55;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.1s var(--ease);
}
.process-track__line.is-drawn{ transform:scaleX(1); }
.process-track__items{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.15fr);
  align-items:start;
}
.process-step{ text-align:center; padding-inline:6px; }
.process-step__dot{
  width:60px; height:60px; margin:0 auto;
  display:grid; place-items:center;
  border:1px solid rgba(216,180,96,.5); border-radius:50%;
  background:var(--paper);
  font-size:16px; font-weight:700; letter-spacing:.01em; color:var(--on-paper);
}
.process-step__body{ margin-top:20px; }
.process-step__label{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold-deep);
}
.process-step__title{
  margin:8px 0 0;
  font-size:17px; font-weight:700; line-height:1.2; color:var(--on-paper);
}
.process-step__desc{
  margin:8px auto 0; max-width:155px;
  font-size:14.5px; font-weight:400; line-height:1.55; color:var(--on-paper-soft);
}

/* ---- the completed-wheel destination ---- */
.process-step--final .process-step__dot{
  width:98px; height:98px; margin-top:-19px;
  background:var(--gold); border:none; color:var(--gold-ink);
  box-shadow:0 0 0 1px rgba(216,180,96,.55), 0 0 0 7px rgba(216,180,96,.12);
}
.process-step--final .process-step__body{ margin-top:24px; }
.process-step--final .process-step__title{ font-size:19px; }
.process-step--final .process-step__desc{ max-width:150px; }

/* ---- the small gold nodes between each marker, positioned along
   the same fr-based math as the seven-column grid above ---- */
.process-track__dots{ position:absolute; z-index:1; inset:0; pointer-events:none; }
.process-track__dots span{
  position:absolute; top:32px;
  width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--gold);
  transform:scale(0); transition:transform .3s var(--ease);
}
.process-track__dots span:nth-child(1){ left:13.99%; }
.process-track__dots span:nth-child(2){ left:27.97%; }
.process-track__dots span:nth-child(3){ left:41.96%; }
.process-track__dots span:nth-child(4){ left:55.94%; }
.process-track__dots span:nth-child(5){ left:69.93%; }
.process-track__dots span:nth-child(6){ left:84.44%; }

/* Each node lights up the instant the drawing line reaches its
   position along the track — a chase, not a stagger. */
.process-track__line.is-drawn ~ .process-track__dots span{ transform:scale(1); }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(1){ transition-delay:.09s; }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(2){ transition-delay:.27s; }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(3){ transition-delay:.45s; }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(4){ transition-delay:.63s; }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(5){ transition-delay:.81s; }
.process-track__line.is-drawn ~ .process-track__dots span:nth-child(6){ transition-delay:1s; }

/* ---- the small brand divider between the track and the facilitator line ---- */
.process-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:38px auto 0;
}
.process-divider span{
  width:110px; height:1px; background:var(--gold-deep); opacity:.4;
}
.process-divider__mark{ width:18px; height:auto; flex:none; opacity:.9; }

.process__foot{
  margin-top:32px; text-align:center;
  font-size:14.5px; line-height:1.5; color:var(--on-paper-soft);
}
.process__foot b{ color:var(--on-paper); font-weight:700; }

/* Between roughly 1024 and 1150px there is no longer enough room to
   keep six full session columns AND real, readable copy in one row —
   so rather than keep shrinking the text, the track drops the single
   spanning line/dots (which only make sense against one straight row)
   and regroups into a 3+3 grid, with the completed wheel on its own
   row beneath. Text sizes stay the same as desktop. */
@media (max-width:1100px){
  .process-track{ max-width:640px; margin-top:52px; }
  .process-track__line{ display:none; }
  .process-track__dots{ display:none; }
  .process-track__items{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:44px; column-gap:20px;
  }
  .process-step__desc{ max-width:170px; }
  .process-step--final{ grid-column:1 / -1; margin-top:12px; }
  .process-step--final .process-step__dot{ margin-top:0; margin-inline:auto; }
}

/* Below this width the seven-across grid stops being able to hold
   real session copy — Direction 1's own layout only works at desktop
   widths, so the journey becomes a vertical sequence instead. */
@media (max-width:760px){
  .process-track{ max-width:440px; margin-top:48px; }
  /* the single spanning line only works when every row starts at the
     same y — true on the desktop single-row layout, false here once
     rows stack with variable text-wrap height. Each dot instead draws
     its own fixed-length stub into the row-gap above/below it, so the
     line always meets cleanly regardless of how tall any row grows. */
  .process-track__line{ display:none; }
  .process-track__dots{ display:none; }
  .process-track__items{
    grid-template-columns:1fr; row-gap:32px;
  }
  .process-step{
    display:flex; align-items:flex-start; gap:20px;
    text-align:left; padding-inline:0;
  }
  .process-step__dot{ position:relative; margin:0; flex:none; }
  .process-step:not(:first-child) .process-step__dot::before,
  .process-step:not(:last-child) .process-step__dot::after{
    content:''; position:absolute; left:50%; width:1px; height:16px;
    background:var(--gold); opacity:.55; transform:translateX(-50%);
  }
  .process-step:not(:first-child) .process-step__dot::before{ bottom:100%; }
  .process-step:not(:last-child) .process-step__dot::after{ top:100%; }
  .process-step__body{ margin-top:0; }
  .process-step__desc{ max-width:none; }
  .process-step--final .process-step__dot{ width:64px; height:64px; margin-top:0; }
  .process-divider{ margin-top:32px; }
  .process-divider span{ width:64px; }
}

/* =============================================================
   AUDIENCE — three photographs, captions beneath. No overlay boxes.
   ============================================================= */
/* Same hairline the facilitator strip uses on its own top edge —
   marks the seam where two --ink sections meet back to back. */
#audience{ box-shadow:inset 0 1px 0 rgba(242,239,233,.09); }

.audience__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,80px); align-items:end;
  margin-bottom:clamp(40px,5vw,64px);
}
.audience__quote{
  font-size:clamp(18px,1.35vw,21px); font-weight:500; line-height:1.5;
  letter-spacing:-.018em; color:var(--on-ink); max-width:34ch;
}
.audience__quote em{ font-style:normal; color:var(--gold); }
.audience__attrib{ margin-top:var(--s3); font-size:14px; color:var(--on-ink-soft); }

.profiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px); }
.profile .ph{ aspect-ratio:4/5; }
.profile__name{ margin-top:var(--s4); font-size:17px; font-weight:700; letter-spacing:-.02em; }

@media (max-width:880px){ .audience__head{ grid-template-columns:1fr; align-items:start; gap:var(--s6); } }
@media (max-width:680px){
  .profiles{ grid-template-columns:1fr; gap:var(--s6); }
  .profile .ph{ aspect-ratio:3/2; }
}

/* =============================================================
   OUTCOME — left/right/centre-divider composition. Scoped to its
   own classes; the shared .h2/.h3/.lede rules used elsewhere are
   untouched.
   ============================================================= */
#outcome{ padding-block:clamp(90px,8vw,110px); }

.outcome{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1.15fr);
  column-gap:clamp(52px,5vw,78px);
  align-items:center;
}

.outcome__lead{ max-width:none; }
.outcome__title{
  font-family:var(--sans);
  font-size:clamp(34px,3vw,40px);
  font-weight:700; line-height:1.12; letter-spacing:-.03em;
  color:var(--on-paper);
  margin:0;
}
.outcome__title-accent{ color:var(--gold-deep); }
.outcome__title::after{
  content:""; display:block;
  width:36px; height:2px; background:var(--gold-deep);
  margin-top:28px;
}
.outcome__desc{
  margin-top:30px;
  max-width:520px;
  font-size:18px; font-weight:400; line-height:1.6;
  color:var(--on-paper-soft);
}

.outcome__divider{
  width:1px; height:280px; align-self:center;
  background:var(--gold-deep); opacity:.38;
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform 1.1s var(--ease);
}
.outcome__divider.is-drawn{ transform:scaleY(1); }

.outcome__list{ display:grid; }
.outcome__item{
  display:grid; grid-template-columns:72px minmax(0,1fr);
  column-gap:30px; align-items:start;
  opacity:0; transform:translateX(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* Both statements arrive with the completed wheel's own dividing
   line, not before it — what you leave with, appearing as the
   line finishes resolving. */
.outcome__divider.is-drawn ~ .outcome__list .outcome__item{ opacity:1; transform:none; transition-delay:.5s; }
.outcome__divider.is-drawn ~ .outcome__list .outcome__item ~ .outcome__item{ transition-delay:.72s; }
.outcome__icon{
  width:72px; height:72px;
  border:1px solid var(--gold-deep); border-radius:50%;
  display:grid; place-items:center;
  color:var(--gold-deep);
}
.outcome__icon svg{ width:30px; height:30px; }
.outcome__heading{
  font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-.02em;
  color:var(--on-paper); margin:0;
}
.outcome__text{
  margin-top:11px; max-width:480px;
  font-size:17px; font-weight:400; line-height:1.6;
  color:var(--on-paper-soft);
}
.outcome__sep{
  height:1px; margin:40px 0;
  background:var(--gold-deep); opacity:0;
  transition:opacity .5s var(--ease) .65s;
}
.outcome__divider.is-drawn ~ .outcome__list .outcome__sep{ opacity:.3; }

@media (max-width:1024px){
  .outcome{ column-gap:clamp(36px,4vw,56px); }
  .outcome__title{ font-size:clamp(38px,3.6vw,46px); }
  .outcome__divider{ height:240px; }
  .outcome__icon{ width:60px; height:60px; }
  .outcome__icon svg{ width:26px; height:26px; }
  .outcome__item{ grid-template-columns:60px minmax(0,1fr); column-gap:24px; }
  .outcome__heading{ font-size:20px; }
}

@media (max-width:760px){
  .outcome{ grid-template-columns:1fr; row-gap:44px; }
  .outcome__lead,
  .outcome__list{ max-width:none; }
  .outcome__divider{ display:none; }
  .outcome__title{ font-size:clamp(36px,8vw,42px); line-height:1.1; }
}

/* =============================================================
   VIDEO — the video is the section, not a box inside one
   ============================================================= */
.video__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); margin-bottom:var(--s6);
}
.video__head .lede{ max-width:40ch; margin-bottom:4px; }
.video__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#111;
}
.video__frame iframe{ width:100%; height:100%; border:0; }
.video__poster{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-content:center; justify-items:center; gap:var(--s4);
  background:linear-gradient(158deg,#2E2C26 0%,#1B1A16 48%,#0E0E0C 100%);
  border:0; cursor:pointer;
}
.video__play{
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(216,180,96,.6);
  transition:background-color .2s var(--ease);
}
.video__play svg{ width:20px; height:20px; color:var(--gold); margin-left:3px; }
.video__poster:hover .video__play{ background:rgba(216,180,96,.16); }
.video__caption{ font-size:15px; font-weight:600; color:var(--on-ink-soft); }

/* =============================================================
   ANDREW — the facilitator
   Heading and quote reuse the site's one heading family (Manrope);
   no serif here — Instrument Serif stays a hero-only exception.
   ============================================================= */
#andrew{ padding-block:clamp(78px,6.6vw,88px) clamp(44px,4.6vw,56px); }

.andrew{
  display:grid; grid-template-columns:415px minmax(0,1fr);
  column-gap:clamp(72px,6vw,84px); align-items:start;
}

/* ---- left: portrait, gold frame, dot matrix. The left track is a
   fixed width equal to the portrait itself — sizing it via fr and
   then capping the child with max-width left dead space inside the
   track that inflated the real gap well past spec. ---- */
.andrew__media{ position:relative; width:100%; }
.andrew__frame{
  position:absolute; top:-30px; left:-28px;
  width:300px; height:255px;
  border:1px solid var(--gold-deep);
  opacity:0;
  transform:translate(-14px,-10px);
  transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
  z-index:0;
}
/* The frame and the dot matrix find their place around the portrait
   as you reach it — the photo itself never moves. */
.andrew__media.is-drawn .andrew__frame{ opacity:.82; transform:none; }
.andrew__dots{
  position:absolute; left:-30px; bottom:-26px;
  width:60px; height:70px;
  background-image:radial-gradient(circle, var(--gold-deep) 1.4px, transparent 1.6px);
  background-size:11px 11px;
  opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .8s var(--ease) .25s, transform .8s var(--ease) .25s;
  z-index:0;
}
.andrew__media.is-drawn .andrew__dots{ opacity:.6; transform:none; }
.andrew__portrait{
  position:relative; z-index:1;
  aspect-ratio:5/6; overflow:hidden; background:var(--paper-2);
}
.andrew__portrait img{ width:100%; height:100%; object-fit:cover; }

/* ---- right: eyebrow, heading, description. Sits a touch above the
   portrait's top edge for the controlled asymmetry in the approved
   composition — hence align-items:start plus this negative offset. ---- */
.andrew__body{ margin-top:-14px; }
.andrew__eyebrow{
  display:block;
  font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:16px;
}
.andrew__title{
  font-family:var(--sans);
  font-size:clamp(46px,4vw,54px); font-weight:700; line-height:1.05;
  letter-spacing:-.035em; color:var(--on-paper);
  max-width:560px; margin:0;
}
.andrew__desc{
  margin:24px 0 0; max-width:575px;
  font-size:17px; font-weight:400; line-height:1.6;
  color:var(--on-paper-soft);
}

/* ---- quote: editorial containment, not a component-library card ---- */
.andrew__quote{
  display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:16px; align-items:start;
  margin:28px 0 0; padding:24px 26px; min-height:118px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(130,83,27,.35);
}
.andrew__quote-mark{
  font-family:var(--sans); font-size:52px; font-weight:700; line-height:.9;
  color:var(--gold-deep);
}
.andrew__quote-text{
  font-family:var(--sans);
  font-size:clamp(20px,1.5vw,22px); font-weight:600; line-height:1.45;
  letter-spacing:-.015em; color:var(--on-paper); max-width:460px; margin:0;
}

.andrew__divider{ height:1px; background:var(--gold-deep); opacity:.45; margin:20px 0 17px; }

/* ---- social row: reuses the site's existing quiet text-link style,
   with a small monochrome mark per platform ahead of the label. ---- */
.andrew__links{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.andrew__link{ display:inline-flex; align-items:center; gap:8px; }
.andrew__link-icon{ width:16px; height:16px; flex:none; color:currentColor; }
.andrew__sep{ width:1px; height:19px; background:var(--on-paper-mute); opacity:.4; flex:none; }

@media (max-width:1024px){
  .andrew{ grid-template-columns:355px minmax(0,1fr); column-gap:clamp(42px,4.4vw,50px); }
  .andrew__frame{ width:250px; height:212px; top:-22px; left:-22px; }
  .andrew__body{ margin-top:0; }
  .andrew__title{ font-size:clamp(38px,4.6vw,46px); }
  .andrew__quote-text{ font-size:clamp(19px,2.1vw,21px); }
}

@media (max-width:760px){
  .andrew{ grid-template-columns:1fr; row-gap:0; }
  .andrew__body{ display:contents; margin-top:0; }
  .andrew__eyebrow{ order:1; }
  .andrew__title{ order:2; font-size:clamp(34px,9vw,42px); line-height:1.08; }
  .andrew__desc{ order:3; }
  .andrew__media{ order:4; width:90%; max-width:420px; margin:32px auto 0; justify-self:center; }
  .andrew__quote{ order:5; margin-top:32px; }
  .andrew__divider{ order:6; }
  .andrew__links{ order:7; flex-direction:column; align-items:flex-start; gap:14px; }
  .andrew__sep{ display:none; }
}

/* =============================================================
   WHEELHOUSE — the podcast, its own feature band, own section
   ============================================================= */
#wheelhouse{ padding-block:clamp(0px,1vw,12px) clamp(56px,5.5vw,68px); }

.wheelhouse__band{
  display:grid; grid-template-columns:118px minmax(0,1fr) 210px;
  column-gap:clamp(26px,2.6vw,32px); align-items:center;
  min-height:140px; padding:22px 26px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(20,19,15,.14);
}

.wheelhouse__art{
  width:110px; height:110px;
  background:var(--ink); border:1px solid var(--gold-deep);
  color:var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.wheelhouse__art svg{ width:30px; height:30px; }
.wheelhouse__art span{
  font-size:8px; font-weight:700; letter-spacing:.1em; text-align:center; line-height:1.4;
  color:var(--gold);
}

.wheelhouse__title{
  font-family:var(--sans); font-size:clamp(24px,2vw,27px); font-weight:700;
  line-height:1.2; letter-spacing:-.02em; color:var(--on-paper); margin:0;
}
.wheelhouse__desc{
  margin-top:5px; font-size:15.5px; line-height:1.5; color:var(--on-paper-soft); max-width:480px;
}

.wheelhouse__status{
  display:flex; align-items:center; height:64px;
  border-left:1px solid rgba(130,83,27,.3); padding-left:24px;
  font-size:12.5px; font-weight:600; color:var(--on-paper-mute); white-space:nowrap;
}

@media (max-width:760px){
  .wheelhouse__band{ grid-template-columns:80px minmax(0,1fr); row-gap:10px; padding:20px; }
  .wheelhouse__art{ width:72px; height:72px; }
  .wheelhouse__art svg{ width:22px; height:22px; }
  .wheelhouse__art span{ font-size:6.5px; }
  .wheelhouse__status{ grid-column:2; height:auto; border-left:none; padding-left:0; }
}

/* =============================================================
   BOOK
   ============================================================= */
.book{ text-align:center; }
.book .h2{ margin-inline:auto; }
.book .lede{ margin:var(--s5) auto var(--s7); text-align:center; max-width:44ch; }
.book__cite{
  display:block; margin-top:10px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--on-ink-soft);
}
.book__meta{ margin-top:var(--s5); font-size:14px; color:var(--on-ink-soft); }

/* =============================================================
   FOOTER — quiet
   ============================================================= */
.footer{ background:var(--ink-2); }
.footer__top{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s6) var(--s7); align-items:start; padding-block:var(--s9) var(--s7);
}
.footer__logo img{ height:32px; width:auto; margin-bottom:var(--s4); }
.footer__brand p{ font-size:14.5px; color:var(--on-ink-soft); max-width:36ch; line-height:1.6; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); }
.footer__nav a{ font-size:14.5px; color:var(--on-ink-soft); transition:color .2s var(--ease); }
.footer__nav a:hover{ color:var(--on-ink); }
.footer__base{
  padding-block:var(--s5) var(--s8);
  border-top:1px solid rgba(242,239,233,.09);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
  font-size:13.5px; color:var(--on-ink-soft);
}
.footer__base .sep{ margin-left:auto; }
@media (max-width:760px){
  .footer__top{ grid-template-columns:1fr; }
  .footer__base .sep{ margin-left:0; }
}

/* =============================================================
   MOTION — reveal transitions resolve instantly for visitors who
   have asked for reduced motion, sitewide.
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =============================================================
   HERO responsive
   ============================================================= */
@media (max-width:1150px){
  .hero__title{ font-size:clamp(40px,3.9vw,45px); }
}
@media (max-width:820px){
  .hero{ display:flex; flex-direction:column; }
  .hero__inner{
    order:1; min-height:0;
    padding-block:calc(84px + var(--s7)) var(--s7);
  }
  .hero__media{
    order:2; position:relative; inset:auto;
    width:100%; aspect-ratio:1/1; min-height:480px;
  }
  .hero__copy{ max-width:none; }
  .hero__title{ font-size:clamp(38px,10.5vw,50px); max-width:none; }
  .hero__body{ max-width:none; }
  .hero__scrim{
    background:
      linear-gradient(to bottom,#070707 0%,rgba(7,7,7,.55) 10%,rgba(7,7,7,.1) 40%,rgba(7,7,7,.72) 88%,#070707 100%),
      linear-gradient(96deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,.06) 32%,rgba(7,7,7,.06) 68%,rgba(7,7,7,.55) 100%);
  }
  .facilitator__row{ min-height:0; }
}
@media (max-width:420px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__learnmore{ align-self:center; }
}