:root{
    --ink:#171A24;
    --ivory:#F6F1E8;
    --copper:#B45E3B;
    --copper-dark:#9c4f31;
    --copper-text:#9c4f31; /* copper for small text on light grounds: 5.22:1 */
    --sand:#E8D9CB;        /* warm accent for text on the dark panel: 12.34:1 */
    --muted-text:#746d63;  /* secondary text on light grounds: 4.54:1 on ivory */
    --panel:#241A15;       /* deep espresso: the dark end of the warm palette */
    --panel-text:#EDE4DB;  /* body copy on the panel: 13.55:1 */
    --panel-muted:#C6B5A6; /* secondary copy on the panel: 8.56:1 */
    --stone:#D9D2C7;
    /* The one semantic colour on the site: used only to report a problem. */
    --error:#A02E22;        /* 6.19:1 on ivory, 3.4:1 as a border */
    --error-text:#8F291E;   /* 7.4:1 on ivory */
    --error-on-panel:#F0A79C; /* 8.1:1 on the ink panel */
    --white:#FFFFFF;
    --max:1080px;
    --radius:2px;
    /* Control sizing. Three roles, each meeting a 44px touch target. */
    --ctrl-lg-pad:14px 28px;   /* page-level actions */
    --ctrl-md-pad:13px 22px;   /* actions inside panels and dialogs */
    --ctrl-sm-pad:10px 18px;   /* compact, nav */
    --ctrl-lg-min:48px;
    --ctrl-md-min:46px;
    --ctrl-sm-min:44px;
    /* Heading roles. Three levels, not five ad-hoc clamps. */
    --h-section:clamp(1.75rem,3.6vw,2.5rem);   /* 28-40px, main section heads */
    --h-feature:clamp(1.625rem,3.4vw,2.125rem);/* 26-34px, headings on dark panels */
    --h-card:clamp(1.5rem,3vw,1.875rem);       /* 24-30px, headings inside cards */
    /* Three roles did not cover the page: 13 one-off clamps had grown around
       them, which is the guessing the design principles rule out. These are the
       roles that actually exist, named. */
    --h-display:clamp(2.25rem,5.2vw,3.625rem);  /* homepage hero, once per site */
    --h-page:clamp(1.875rem,4vw,2.75rem);       /* landing page h1 */
    --h-statement:clamp(1.625rem,3.2vw,2.375rem); /* the POV assertion */
    /* Uppercase micro-labels had five different tracking values for one role. */
    --track-label:0.1em;
    /* Spacing scale. Control and heading sizes were already tokenised; space
       was not, and 18 different raw px values had accumulated. Named steps so
       rhythm is chosen from a set rather than guessed per component. */
    --space-2xs:6px;
    --space-xs:10px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:clamp(32px,4vw,48px);
    --space-xl:clamp(48px,6vw,72px);
    --space-2xl:clamp(64px,8vw,96px);
    /* Depth, named by role rather than by number. */
    --z-float:40;
    --z-header:50;
    --z-modal:200;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{
    font-family:'DM Serif Display',serif;
    text-wrap:balance;
    font-weight:400;
    line-height:1.15;
    margin:0;
  }
  p{margin:0 0 1em 0;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

  .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
  section{padding:96px 0;}
  @media (max-width:640px){ section{padding:64px 0;} }

  .eyebrow{
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:0.8125rem;
    letter-spacing:var(--track-label);
    text-transform:uppercase;
    color:var(--copper-text);
    margin-bottom:18px;
    display:block;
  }

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:var(--ivory);
    border-bottom:1px solid var(--stone);
  }
  /* Replaces the space the header no longer occupies. Measured at runtime so
     it stays correct if the nav wraps. */
  #smooth-content{padding-top:var(--header-h,81px);}
  /* Only go translucent where the blur actually renders. Without this the
     0.92 alpha let page content show through on devices that ignore it. */
  @supports (backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px)){
    header{
      background:rgba(246,241,232,0.92);
      -webkit-backdrop-filter:blur(6px);
      backdrop-filter:blur(6px);
    }
  }
  .nav{
    max-width:var(--max);margin:0 auto;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .navlinks{display:flex;gap:32px;align-items:center;}
  .navlinks a{font-size:0.875rem;font-weight:600;color:var(--ink);}
  .navlinks a:hover{color:var(--copper-dark);}
  .nav-cta{
    background:var(--ink);color:var(--ivory);
  }
  .nav-cta:hover{background:var(--copper-dark);}
  /* .navlinks a (0,1,1) outranks .nav-cta (0,1,0), so the CTA was inheriting
     color:var(--ink) on top of its own ink background, and copper-on-copper
     on hover. Match that specificity so the label stays visible in both. */
  .navlinks a.nav-cta,
  .navlinks a.nav-cta:hover,
  .navlinks a.nav-cta:focus{color:var(--ivory);}
  /* Secondary CTA: same button shape, outlined instead of filled, so the
     assessment stays the single dominant action in the bar. */
  .nav-cta-secondary{background:transparent;border:1px solid var(--ink);}
  .nav-cta-secondary:hover{background:transparent;border-color:var(--copper-dark);}
  .navlinks a.nav-cta-secondary,
  .navlinks a.nav-cta-secondary:focus{color:var(--ink);}
  .navlinks a.nav-cta-secondary:hover{color:var(--copper-dark);}
  .navtoggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--ink);}
  /* Content-driven, not a round number: the bar now carries four labels plus
     a CTA, which measure about 992px against a 1080px container. At the old
     900px the links overflowed the header between roughly 900 and 1000px. */
  @media (max-width:1040px){
    .navlinks{
      position:absolute;top:64px;left:0;right:0;
      background:var(--ivory);border-bottom:1px solid var(--stone);
      flex-direction:column;align-items:flex-start;gap:0;padding:8px 28px 20px;
      display:none;
    }
    .navlinks.open{display:flex;}
    .navlinks a{padding:12px 0;width:100%;border-bottom:1px solid var(--stone);}
    /* The CTA keeps its emphasis in the drawer rather than flattening into the
       link list, so the primary action stays the primary action on mobile. */
    .navlinks a.nav-cta{border-bottom:none;margin-top:12px;width:auto;}
    .navtoggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{padding:110px 0 90px;}
  .hero-grid{display:grid;grid-template-columns:1.4fr 0.6fr;gap:60px;align-items:center;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px;} }
  .hero h1{font-size:var(--h-display);max-width:620px;}
  .hero .sub{font-size:1.125rem;max-width:480px;margin-top:22px;color:#3a3f4d;}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;}
  @media (max-width:640px){
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .hero-ctas > *{width:100%;}
  }

  /* One shape for every button-like control; size classes set the rest. */
  .btn-primary,.btn-ghost,.btn-on-panel,.btn-outline-panel,.nav-cta,.result-secondary button{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:var(--radius);font-weight:700;text-align:center;
  }
  .btn-primary,.btn-ghost{padding:var(--ctrl-lg-pad);min-height:var(--ctrl-lg-min);font-size:0.9375rem;}
  .btn-on-panel,.btn-outline-panel,.result-secondary button{padding:var(--ctrl-md-pad);min-height:var(--ctrl-md-min);font-size:0.875rem;}
  .nav-cta{padding:var(--ctrl-sm-pad);min-height:var(--ctrl-sm-min);font-size:0.8125rem;}

  .btn-primary{
    background:var(--copper);color:var(--white);
    border:none;
  }
  .btn-primary:hover{background:var(--copper-dark);}
  .btn-primary:disabled{opacity:0.6;cursor:default;}
  .btn-ghost{
    background:transparent;color:var(--ink);
    border:1.5px solid var(--ink);
  }
  .btn-ghost:hover{border-color:var(--copper-dark);color:var(--copper-text);}
  /* <picture> is inline by default, so the portrait's width:100% resolved
     against the picture rather than the frame and it stopped filling it. */
  .hero-photo picture{display:block;width:100%;height:100%;}
  .hero-photo{
    aspect-ratio:4/5;background:var(--stone);overflow:hidden;
    border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    color:#6b6256;font-size:0.875rem;text-align:center;padding:20px;
  }

  /* ---------- POV STATEMENTS ---------- */
  .pov{background:var(--ink);color:var(--ivory);padding:clamp(52px,6vw,76px) 0;}
  .pov-inner{max-width:var(--max);margin:0 auto;padding:0 28px;}
  /* Not a matched pair. The first statement leads; the second answers it from
     the opposite side, under a rule that runs only as far as it does. */
  .pov-lead{
    margin:0;max-width:19ch;
    font-family:'DM Serif Display',serif;font-weight:400;
    font-size:var(--h-statement);line-height:1.16;
    color:var(--ivory);
  }
  .pov-follow{
    margin:clamp(28px,3.5vw,44px) 0 0 auto;
    max-width:36ch;
    padding-top:clamp(20px,2.4vw,28px);
    border-top:1px solid rgba(246,241,232,0.22);
    font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.6;
    color:#CFC6BA;
  }
  @media (max-width:640px){
    .pov-lead{max-width:none;}
    .pov-follow{margin-left:0;max-width:none;}
  }

  /* ---------- PROOF STORIES ---------- */
  /* These live inside the POV band and answer its two statements with the
     moment each one actually happened. No boxes: the band already contains
     them, and bordering here would make a frame inside a frame. Unequal
     measures keep them from reading as a matched pair, the same way the
     statements above them do. */
  .framework-name{
    margin:clamp(26px,3.2vw,38px) 0 0;max-width:34ch;
    font-family:'DM Serif Display',serif;font-weight:400;
    font-size:clamp(1.125rem,1.8vw,1.375rem);line-height:1.35;
    color:var(--sand);
  }
  .proof-pair{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);
    margin-top:clamp(32px,4vw,48px);
    padding-top:clamp(26px,3vw,34px);
    border-top:1px solid rgba(246,241,232,0.22);
  }
  @media (max-width:760px){ .proof-pair{grid-template-columns:1fr;gap:30px;} }
  .proof-when{
    display:block;margin-bottom:9px;
    font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--sand);
  }
  .proof p{margin:0;max-width:46ch;font-size:1rem;line-height:1.65;color:#CFC6BA;}
  .proof:last-child p{max-width:42ch;}

  /* ---------- THE TWO OFFERS ---------- */
  /* Deliberately not a matched pair of cards. The free workshop is the front
     door and carries the weight; the cohort is what sits behind it and reads
     as the heavier commitment. The asymmetry is the information: it says
     where nearly everyone should start, before a word is read. */
  .offer-pair{
    display:grid;grid-template-columns:1.22fr 1fr;
    gap:clamp(18px,2.4vw,28px);align-items:stretch;
  }
  @media (max-width:820px){ .offer-pair{grid-template-columns:1fr;} }
  .offer{
    display:flex;flex-direction:column;gap:13px;
    padding:clamp(26px,3.2vw,38px);
  }
  .offer-kind{
    font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  }
  .offer h3{font-size:var(--h-card);}
  .offer p{margin:0;font-size:1rem;line-height:1.6;max-width:42ch;}
  /* Pushed to the foot so both offers align on their facts regardless of how
     long the description above runs. */
  .offer-when{
    margin-top:auto;padding-top:17px;
    display:flex;flex-wrap:wrap;gap:5px 22px;
    font-size:0.875rem;font-weight:600;
  }
  .offer-when span{white-space:nowrap;}
  .offer-when b{font-weight:700;}
  .offer .btn-primary,.offer .btn-ghost,.offer .btn-on-panel{align-self:flex-start;}

  /* Free: the primary action, on white with a full ink border so it reads as
     the nearer of the two. */
  .offer--free{background:var(--white);border:1px solid var(--ink);}
  .offer--free .offer-kind{color:var(--copper-text);}
  .offer--free p{color:#3a3f4d;}
  .offer--free .offer-when{border-top:1px solid var(--stone);color:var(--ink);}

  /* Paid: inverted onto the same ink used by the POV and community bands, so
     the step up in commitment is visible before it is read. */
  .offer--paid{background:var(--ink);color:var(--ivory);border:1px solid var(--ink);}
  .offer--paid h3{color:var(--ivory);}
  .offer--paid .offer-kind{color:var(--sand);}
  .offer--paid p{color:#CFC6BA;}
  .offer--paid .offer-when{border-top:1px solid rgba(246,241,232,0.22);color:var(--ivory);}

  /* ---------- CREDIBILITY STRIP ---------- */
  /* Three facts read as one band, not three boxes. Rules above and below hold
     it together; 1px hairlines separate the entries. */
  .cred-strip{
    margin:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
    border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);
    padding:clamp(28px,3.5vw,40px) 0;
  }
  .cred-item{display:flex;flex-direction:column;gap:10px;padding-right:clamp(20px,3vw,40px);}
  @supports (grid-template-rows:subgrid){
    .cred-item{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px;}
  }
  .cred-item + .cred-item{
    border-left:1px solid var(--stone);
    padding-left:clamp(24px,3.5vw,48px);
  }
  .cred-strip dt{
    font-family:'DM Serif Display',serif;font-weight:400;
    font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1;
    color:var(--copper-text);
  }
  .cred-strip dd{margin:0;font-size:0.9375rem;line-height:1.55;color:#3f3b34;max-width:30ch;}
  @media (max-width:760px){
    .cred-strip{grid-template-columns:1fr;padding:clamp(20px,4vw,28px) 0;}
    .cred-item{padding-right:0;padding-bottom:20px;}
    .cred-item + .cred-item{
      border-left:none;padding-left:0;padding-top:20px;
      border-top:1px solid var(--stone);
    }
    .cred-item:last-child{padding-bottom:0;}
  }

  /* ---------- SECTION HEADINGS ---------- */
  /* The 640px cap applied to the whole block, so headings wrapped early even
     with 440px of container to spare. The measure belongs on the reading copy;
     a heading gets a heading measure. */
  .sec-head{margin-bottom:48px;}
  .sec-head h2{max-width:46ch;}
  .sec-head .lede,.sec-head p{max-width:62ch;}
  .sec-head h2{font-size:var(--h-section);}
  .sec-head .lede{margin-top:16px;font-size:1.0625rem;color:#3a3f4d;}

  /* ---------- ASSESSMENT ---------- */
  .assessment{background:var(--white);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);}

  .q-progress{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;}
  .q-progress-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
  .quiz-back:disabled{opacity:0.32;text-decoration:none;cursor:default;}
  .quiz-back:disabled:hover{color:var(--copper-text);}
  .pathway{display:flex;align-items:center;margin:0;max-width:420px;}
  .pathway .pw-step{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
  }
  .pathway .pw-dot{
    width:14px;height:14px;border-radius:50%;
    border:2px solid var(--stone);background:var(--white);
    transition:background .2s,border-color .2s;
  }
  .pathway .pw-step.active .pw-dot,.pathway .pw-step.done .pw-dot{
    background:var(--copper);border-color:var(--copper);
  }
  .pathway .pw-line{position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--stone);z-index:-1;}
  .pathway .pw-step:first-child .pw-line{display:none;}
  .pathway .pw-step.done .pw-line{background:var(--copper);}
  .pathway .pw-label{font-size:0.6875rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted-text);}
  .pathway .pw-step.active .pw-label{color:var(--copper-text);}

  .quiz-frame{
    border:1px solid var(--ink);padding:clamp(22px,3.4vw,40px);position:relative;background:var(--ivory);
  }
  .quiz-frame::before{
    content:"";position:absolute;top:-1px;right:-1px;width:22px;height:22px;
    border-top:2px solid var(--copper);border-right:2px solid var(--copper);
  }
  .q-eyebrow{font-size:0.8125rem;font-weight:700;color:var(--copper-text);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px;display:block;}
  .q-text{
    font-family:'DM Serif Display',serif;font-weight:400;
    font-size:clamp(1.25rem,2.6vw,1.875rem);line-height:1.24;
    margin:0 0 26px;max-width:65ch;
    /* min-height is set from the longest question at the current width, in
       script.js, so the answers never move between questions. */
  }
  .options{display:flex;flex-direction:column;gap:10px;}
  .opt{
    text-align:left;border:1px solid var(--stone);background:var(--white);
    padding:16px 18px;font-size:0.9375rem;font-weight:500;border-radius:var(--radius);
    transition:border-color .15s, background .15s;
  }
  .opt:hover{border-color:var(--copper);background:#fdfaf8;}
  .opt:active{transform:translateY(1px);}
  .opt:focus-visible{outline:2px solid var(--copper-text);outline-offset:2px;}
  .opt.selected{border-color:var(--copper-text);background:#f7ece5;font-weight:700;box-shadow:inset 0 0 0 1px var(--copper-text);}
  .quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;}
  .quiz-foot .qcount{font-size:0.8125rem;color:var(--muted-text);font-weight:600;}
  .quiz-back{
    background:none;border:none;padding:0;
    font-size:0.8125rem;font-weight:600;color:var(--copper-text);text-decoration:underline;
  }
  .quiz-back:hover{color:var(--ink);}
  .quiz-back[hidden]{display:none;}

  .intro-card{display:flex;flex-direction:column;gap:18px;}
  .intro-card .meta{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:0.875rem;font-weight:700;color:#4a4436;}
  .intro-card .meta span{display:flex;align-items:center;gap:6px;}

  .result-frame{border:1px solid var(--ink);background:var(--panel);color:var(--ivory);padding:48px;position:relative;}
  .result-frame::before{
    content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;
    border-top:2px solid var(--sand);border-left:2px solid var(--sand);
  }
  .result-tag{font-size:0.8125rem;font-weight:700;color:var(--sand);letter-spacing:0.1em;text-transform:uppercase;display:block;}
  /* Five bands: verdict, diagnosis, actions, evidence, act. The hairline
     reuses the rule .about-ona already used, so no new colour is introduced. */
  .result-band{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.18);}
  .result-band > :first-child{margin-top:0;}
  .result-band .result-tag + .result-desc{margin-top:10px;}
  /* The verdict is the payoff: keep it tight so it reads as one unit. */
  .result-verdict .result-pathway{margin-bottom:0;}
  .result-frame h3{font-size:clamp(1.75rem,4vw,2.5rem);margin-top:10px;color:var(--white);}
  .result-desc{margin-top:14px;font-size:1rem;line-height:1.68;max-width:540px;color:var(--panel-text);}
  .result-pathway{display:flex;gap:6px;margin:28px 0;max-width:460px;}
  .rp-seg{flex:1;height:8px;background:rgba(255,255,255,0.18);border-radius:2px;}
  .rp-seg.lit{background:var(--sand);}
  .result-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;}
  .btn-on-panel{background:var(--copper);color:var(--white);border:none;}
  .btn-on-panel:hover{background:var(--copper-dark);}
  .btn-outline-panel{background:transparent;color:var(--ivory);border:1.5px solid var(--ivory);}
  .btn-outline-panel:hover{border-color:var(--sand);color:var(--sand);}
  .result-secondary{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    margin-top:28px;padding-top:22px;
    border-top:1px solid rgba(255,255,255,0.18);
  }
  .result-secondary button{background:none;border:1px solid rgba(255,255,255,0.45);color:var(--ivory);}
  .result-secondary button:hover{border-color:var(--white);background:rgba(255,255,255,0.10);}
  .result-secondary .secondary-note{font-size:0.75rem;color:var(--panel-muted);flex-basis:100%;margin:0;}
  /* On a phone the pairs stack, so they match each other rather than each
     being sized to its own label. */
  @media (max-width:640px){
    .result-ctas{flex-direction:column;align-items:stretch;}
    .result-ctas > *{width:100%;}
    .result-secondary{flex-direction:column;align-items:stretch;}
    .result-secondary button{width:100%;}
  }

  @media (prefers-reduced-motion:no-preference){
    .result-frame.revealing > *{animation:result-in .52s cubic-bezier(.22,1,.36,1) backwards;}
    .result-frame.revealing .rp-seg.lit{animation:seg-in .34s cubic-bezier(.22,1,.36,1) backwards;}
  }
  @keyframes result-in{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
  @keyframes seg-in{from{opacity:0;transform:scaleX(.3);transform-origin:left;}to{opacity:1;transform:none;}}
  /* Returns to the questions from the result; only shown once every
     answer exists, so it never appears during a first run-through. */
  .quiz-resume{
    background:none;border:none;padding:0;
    font-size:0.8125rem;font-weight:700;color:var(--copper-dark);text-decoration:underline;
  }
  .quiz-resume:hover{color:var(--ink);}
  .quiz-resume[hidden]{display:none;}

  .scale-legend{display:flex;gap:10px;flex-wrap:wrap;}
  .scale-legend span{font-size:0.75rem;font-weight:600;color:#6b6256;border:1px solid var(--stone);padding:6px 10px;border-radius:var(--radius);}
  .callout{border-left:3px solid var(--copper);background:#fbf3ee;padding:16px 20px;font-size:0.875rem;font-weight:600;}

  .result-score-big{font-family:'DM Serif Display',serif;font-size:clamp(2.875rem,6vw,3.625rem);line-height:1;color:var(--white);margin-top:6px;}
  @media (max-width:640px){
    .result-frame{padding:30px 22px;}
    .result-band{margin-top:24px;padding-top:22px;}
  }
  .result-score-sub{font-size:0.75rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-muted);margin:0 0 4px;}

  .action-list{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
  .action-list li{font-size:0.9375rem;padding-left:24px;position:relative;color:var(--white);}
  .action-list li::before{content:"\2192";position:absolute;left:0;color:var(--sand);font-weight:700;}
  .proof-line{font-size:0.8125rem;font-style:italic;color:var(--panel-muted);margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.18);}

  .dim-breakdown{display:flex;flex-direction:column;gap:11px;margin:18px 0 8px;}
  .dim-row{display:flex;align-items:center;gap:14px;}
  .dim-row .dim-name{flex:0 0 230px;font-size:0.8125rem;font-weight:700;color:var(--panel-muted);}
  .dim-row.priority .dim-name{color:var(--white);}
  .dim-row .priority-tag{color:var(--sand);font-weight:700;}
  .dim-row .dim-bar{flex:1;height:7px;background:rgba(255,255,255,0.14);border-radius:2px;overflow:hidden;}
  .dim-row .dim-fill{height:100%;background:rgba(255,255,255,0.4);}
  .dim-row.priority .dim-fill{background:var(--sand);}
  .dim-row .dim-score{flex:0 0 46px;text-align:right;font-size:0.75rem;font-weight:700;color:var(--panel-muted);}
  @media (max-width:640px){ .dim-row .dim-name{flex:0 0 140px;font-size:0.75rem;} }

  .about-ona{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.18);font-size:0.875rem;color:var(--panel-muted);}
  .about-ona strong{color:var(--white);}

  /* ---------- WAITLIST FORM ---------- */
  .waitlist{background:var(--stone);}
  .form-card{
    background:var(--white);border:1px solid var(--ink);padding:40px;max-width:560px;
  }
  .form-row{margin-bottom:18px;}
  /* Submit spans the same width as the fields above it. */
  .form-card button[type="submit"]{width:100%;}
  .form-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
  @media (max-width:480px){ .form-row-grid{grid-template-columns:1fr;gap:0;} }
  .form-row-grid .form-row{margin-bottom:0;}
  .form-row label{display:block;font-size:0.8125rem;font-weight:700;margin-bottom:6px;color:var(--ink);}
  .form-row input,.form-row select,.form-row textarea{
    width:100%;padding:13px 14px;border:1px solid var(--stone);background:var(--ivory);
    font-family:'Manrope',sans-serif;font-size:0.9375rem;border-radius:var(--radius);color:var(--ink);
  }
  .form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--copper);}
  .form-note{font-size:0.875rem;color:#6b6256;margin-top:6px;line-height:1.5;}
  .form-success{display:none;background:var(--panel);color:var(--ivory);padding:20px 24px;border-radius:var(--radius);font-weight:600;}
  .form-success.show{display:block;}
  /* Canvas for the submit celebration. Pointer-events off so it can never
     intercept a click, and it removes itself when the burst finishes. */
  .celebrate-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:300;}
  .form-error{display:none;background:var(--white);border-left:3px solid var(--copper);color:var(--copper-dark);padding:14px 18px;border-radius:var(--radius);font-size:0.875rem;font-weight:600;margin-top:4px;}
  .form-error.show{display:block;}
  .form-wrap.hidden{display:none;}

  /* ---------- SUBSTACK ---------- */
  .substack-card{
    border:1px solid var(--ink);padding:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
    background:var(--ivory);
  }
  .substack-card .left{max-width:480px;}
  .substack-embed{min-width:0;max-width:100%;flex-shrink:1;}
  .substack-embed iframe{border:1px solid var(--stone);max-width:100%;display:block;}

  /* ---------- SPEAKING ---------- */
  .speaking-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;}
  @media (max-width:900px){ .speaking-grid{grid-template-columns:1fr;} }

  /* ---------- BLACK IN PROJECTS ---------- */
  .bip{background:var(--ink);color:var(--ivory);}
  .bip-grid{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
  /* The button sits inside a wrapper div, so a percentage min-width would
     resolve against that wrapper rather than the row. Fixed value above the
     width where it fits, full width below it. */
  .bip-grid .btn-on-panel{min-width:300px;padding-left:32px;padding-right:32px;}
  @media (max-width:560px){
    .bip-grid > *{width:100%;}
    .bip-grid .btn-on-panel{min-width:0;width:100%;}
  }
  .bip h2{color:var(--white);font-size:var(--h-feature);max-width:480px;}
  .bip p{color:#c7c2b8;max-width:420px;margin-top:14px;}

  /* ---------- FOOTER ---------- */
  footer{padding:48px 0;border-top:1px solid var(--stone);}
  .footer-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .footer-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:0.8125rem;font-weight:600;}
  /* Matches the sibling links exactly; it is a button because it opens a dialog. */
  .footer-linkbtn{background:none;border:none;padding:0;font:inherit;color:inherit;text-decoration:underline;}
  .footer-linkbtn:hover{color:var(--copper-dark);}
  .footer-tag{font-size:0.8125rem;color:#7a7264;margin-top:6px;}

  .h-feature{font-size:var(--h-feature);}
  .h-card{font-size:var(--h-card);}
  .q-scale-intro{font-family:'DM Serif Display',serif;font-size:1.375rem;margin:0;}
  /* Only ever shown on a resumed visit, so it reads as an explanation
     rather than as permanent chrome. */
  .q-resumed{
    margin:0 0 14px;font-size:0.875rem;line-height:1.5;color:var(--copper-text);
  }
  .q-dim-sub{font-size:0.875rem;font-style:italic;color:#6f685c;margin:0 0 18px;}

  /* ---------- booking ---------- */
  .booking-embed{width:100%;background:var(--white);border:1px solid var(--stone);}
  .booking-embed iframe{display:block;width:100%;border:0;}
  .booking-fallback{font-size:0.8125rem;color:#6b6256;margin:0;}
  .booking-fallback a{color:var(--copper-text);text-decoration:underline;}

  /* ---------- modal ---------- */
  /* The priority list is gated behind finishing the assessment, so it lives
     here rather than as a section anyone can scroll past. */
  .modal[hidden]{display:none;}
  .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:28px 20px;overflow-y:auto;}
  .modal-backdrop{position:fixed;inset:0;background:rgba(19,12,9,0.62);}
  .modal-panel{
    position:relative;margin:auto;width:100%;max-width:640px;
    background:var(--ivory);border:1px solid var(--ink);padding:40px;
  }
  /* Placed after .modal-panel: same specificity, so order decides. */
  .modal-panel--wide{max-width:820px;}
  .modal-close{
    position:absolute;top:8px;right:8px;
    display:inline-flex;align-items:center;justify-content:center;
    min-width:46px;min-height:46px;
    background:none;border:none;padding:0;
    font-size:1.5rem;line-height:1;color:var(--ink);
  }
  .modal-close:hover{color:var(--copper-text);}
  .modal-panel .sec-head{margin-bottom:28px;}
  .modal-panel .form-card{border:none;padding:0;max-width:none;background:none;}
  body.modal-open{overflow:hidden;}
  @media (prefers-reduced-motion:no-preference){
    .modal:not([hidden]) .modal-panel{animation:modal-in .28s cubic-bezier(.22,1,.36,1);}
  }
  @keyframes modal-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  @media (max-width:640px){ .modal{padding:0;} .modal-panel{padding:32px 22px;min-height:100%;} }

  /* Touch devices need 44px targets; a mouse does not. Applied by pointer
     type rather than by width, since large tablets are touch too. */
  @media (pointer:coarse){
    .navlinks a,.footer-links a,.footer-linkbtn{min-height:44px;display:inline-flex;align-items:center;}
    .footer-note a{min-height:44px;display:inline-flex;align-items:center;}
    .logo-link{min-height:44px;}
    .footer-links{gap:2px 24px;}
    .quiz-back,.quiz-resume{min-height:44px;display:inline-flex;align-items:center;}
  }

  /* ---------- scroll reveals ---------- */
  .reveal-ready .reveal{opacity:0;transform:translateY(14px);}
  .reveal-ready .reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  }

  .visually-hidden{position:absolute;left:-9999px;}

  /* privacy notice page */
  .legal{max-width:720px;}
  .legal h1{font-size:clamp(2rem,5vw,3rem);}
  .legal h2{font-size:clamp(1.5625rem,2.6vw,1.875rem);margin-top:44px;}
  .legal h3{font-size:1.25rem;font-weight:700;font-family:'Manrope',sans-serif;margin-top:26px;}
  .legal p,.legal li{font-size:1rem;color:#3f3b34;}
  .legal ul{margin:0 0 1em 0;padding-left:20px;}
  .legal li{margin-bottom:8px;}
  .legal a{color:var(--copper-text);text-decoration:underline;}
  .legal-updated{font-size:0.8125rem;color:#7a7264;}

  /* ---------- HERO SECONDARY LINK ---------- */
  /* Not a second button. A bordered ghost button beside the primary reads as a
     competing choice and wraps onto its own line at narrow widths; an inline
     link stays subordinate and stays on the same row. The min-height matches
     the primary control so the two sit on one baseline. */
  .secondary-link{
    display:inline-flex;align-items:center;
    min-height:var(--ctrl-lg-min);
    font-size:0.9375rem;font-weight:600;color:var(--ink);
    text-decoration:underline;text-underline-offset:3px;
  }
  .secondary-link:hover{color:var(--copper-text);}

  /* The framework is the one name on the page worth setting apart in place. */
  .pov-follow strong{color:var(--ivory);font-weight:700;}

  /* ---------- FLOATING BOOK A CALL ---------- */
  /* A standing lead capture, so it is always on screen. It must live outside
     #smooth-wrapper: ScrollSmoother transforms that element, and a transformed
     ancestor becomes the containing block for position:fixed, which would pin
     this to the page instead of the viewport.

     Permanent visibility puts the burden on the styling: it has to read as a
     deliberate, quiet fixture rather than a banner stuck over the page. Hence
     the ink ground the site already uses for its dark bands, a single copper
     mark, and no shadow theatrics. */
  .float-call-wrap{
    position:fixed;z-index:var(--z-float);
    right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
    display:flex;
  }
  .float-call{
    display:inline-flex;align-items:center;gap:10px;
    cursor:pointer;font:inherit;text-align:left;
    min-height:var(--ctrl-md-min);padding:var(--ctrl-md-pad);
    background:var(--ink);color:var(--ivory);
    border:1px solid var(--ink);border-radius:var(--radius);
    font-family:'Manrope',sans-serif;font-weight:700;font-size:0.875rem;
    letter-spacing:0.01em;white-space:nowrap;
    /* Two layers: a tight contact shadow so it sits on the page, and a wide
       soft one so it separates from busy content behind it. Tinted with the
       page's own ink rather than neutral black. */
    box-shadow:0 1px 2px rgba(23,26,36,0.20),0 10px 28px rgba(23,26,36,0.20);
    transition:background-color .15s ease-out,border-color .15s ease-out,transform .15s ease-out;
  }
  .float-call .dot{
    width:7px;height:7px;background:var(--copper);display:inline-block;flex:none;
    transition:background-color .15s ease-out;
  }
  .float-call:hover{
    background:var(--copper-dark);border-color:var(--copper-dark);
    transform:translateY(-1px);
  }
  .float-call:hover .dot{background:var(--ivory);}
  .float-call:active{transform:translateY(0);background:#8a4529;border-color:#8a4529;}
  /* A dialog is already a deliberate context; the button would only compete
     with it, and on a phone it sits on top of the panel. */
  body.modal-open .float-call-wrap{display:none;}

  @media (max-width:640px){
    .float-call{font-size:0.8125rem;gap:8px;padding:12px 16px;}
    .float-call-wrap{right:12px;bottom:12px;}
  }
  @media (prefers-reduced-motion:reduce){
    .float-call{transition:background-color .15s ease-out,border-color .15s ease-out;}
    .float-call:hover,.float-call:active{transform:none;}
  }

  /* ---------- FOOTER NOTE AND LEGAL ---------- */
  /* .footer-grid wraps, so a full-width child becomes its own row. */
  .footer-note{
    width:100%;margin:0;padding-top:22px;border-top:1px solid var(--stone);
    max-width:72ch;font-size:0.875rem;line-height:1.6;color:#3f3b34;
  }
  .footer-note a{color:var(--copper-text);font-weight:600;text-decoration:underline;}
  .footer-legal{width:100%;margin:0;font-size:0.8125rem;color:#6b6256;}

  /* ---------- LOGO ---------- */
  /* One asset, one intrinsic size (217x80), scaled by height wherever it sits.
     The source carried heavy asymmetric transparent padding, so it is trimmed
     to the mark itself; every placement now shares the same optical size. */
  .logo-link{display:inline-flex;align-items:center;line-height:0;}
  .site-logo{height:38px;width:auto;display:block;}
  .site-logo--sm{height:30px;}
  @media (max-width:640px){ .site-logo{height:32px;} }

  /* ---------- SECONDARY BUTTON ---------- */
  /* Distinct from .btn-ghost: ghost carries a heavy 1.5px ink outline and reads
     almost as loud as the primary, which is why two of them fought for the same
     row and wrapped. This is the quieter step down - white fill, hairline stone
     border - so the pair reads as one action and one alternative. */
  .btn-secondary{
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
    padding:var(--ctrl-md-pad);min-height:var(--ctrl-md-min);
    font-size:0.875rem;font-weight:700;white-space:nowrap;
    background:var(--white);color:var(--ink);
    border:1px solid var(--stone);border-radius:var(--radius);
  }
  .btn-secondary:hover{border-color:var(--ink);color:var(--copper-text);}

  /* ---------- LANDING PAGE SHELL (workshop, cohort) ---------- */
  .measure{max-width:760px;margin:0 auto;}
  .narrow{max-width:600px;margin:0 auto;}
  .page-hero{padding:clamp(52px,6.5vw,84px) 0 clamp(32px,4vw,52px);}
  .page-hero h1{font-size:var(--h-page);}
  .page-hero .lede{margin-top:20px;max-width:62ch;font-size:1.0625rem;color:#3a3f4d;}
  .page-hero .hero-ctas{margin-top:30px;}

  /* Dark band: the same ink the POV and community sections already use, so a
     landing page reads as the same site rather than a second palette. */
  .panel-band{background:var(--ink);color:var(--ivory);}
  .panel-band h2,.panel-band h3{color:var(--ivory);}
  .panel-band .eyebrow{color:var(--sand);}
  .panel-band .lede{color:#CFC6BA;}

  /* ---------- SPEC TABLE ---------- */
  .spec-wrap{overflow-x:auto;border:1px solid var(--stone);background:var(--white);}
  .spec{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:440px;}
  .spec th{
    text-align:left;padding:12px 16px;background:var(--ivory);
    font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    color:#6b6256;border-bottom:1px solid var(--stone);
  }
  .spec td{padding:13px 16px;border-bottom:1px solid var(--stone);vertical-align:top;color:#3f3b34;}
  .spec tr:last-child td{border-bottom:none;}
  .spec td:first-child{color:var(--ink);font-weight:700;}
  .spec td.when{white-space:nowrap;font-variant-numeric:tabular-nums;}
  .panel-band .spec-wrap{border-color:rgba(246,241,232,0.22);background:transparent;}
  .panel-band .spec th{background:rgba(246,241,232,0.06);color:var(--sand);border-bottom-color:rgba(246,241,232,0.22);}
  .panel-band .spec td{color:#CFC6BA;border-bottom-color:rgba(246,241,232,0.14);}
  .panel-band .spec td:first-child{color:var(--ivory);}

  /* ---------- CLAIM LISTS ---------- */
  /* Two columns of claims, one affirming and one ruling out. The marks carry
     the difference, so neither column needs a box to be told from the other. */
  .claim-pair{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(32px,5vw,72px);align-items:start;}
  @media (max-width:760px){ .claim-pair{grid-template-columns:1fr;gap:36px;} }
  .checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .checklist li{position:relative;padding-left:26px;font-size:0.9375rem;line-height:1.6;color:#3f3b34;}
  .checklist li::before{content:"\2014";position:absolute;left:0;top:0;line-height:inherit;color:var(--copper-text);font-weight:700;}
  .checklist--out li::before{content:"\00D7";color:#6f675c;}
  .checklist li b,.checklist li strong{color:var(--ink);font-weight:700;}
  .panel-band .checklist li{color:#CFC6BA;}
  .panel-band .checklist li::before{color:var(--sand);}
  .panel-band .checklist li b,.panel-band .checklist li strong{color:var(--ivory);}

  /* ---------- PRICE PANEL (cohort) ---------- */
  .price-panel{border:1px solid rgba(246,241,232,0.22);padding:clamp(24px,3.2vw,36px);margin:0;}
  .price-line{
    display:flex;justify-content:space-between;align-items:baseline;gap:20px;
    padding:11px 0;border-bottom:1px solid rgba(246,241,232,0.14);
  }
  .price-line:last-child{border-bottom:none;}
  .price-line dt{margin:0;font-size:0.9375rem;color:#CFC6BA;}
  .price-line dd{margin:0;text-align:right;font-weight:700;color:var(--ivory);font-variant-numeric:tabular-nums;}
  .price-figure{
    display:block;font-family:'DM Serif Display',serif;font-weight:400;
    font-size:clamp(2.75rem,7vw,4.5rem);line-height:0.95;letter-spacing:-0.02em;
  }
  .price-was{text-decoration:line-through;color:#9a8f82;font-weight:400;margin-right:10px;}

  /* ---------- FAQ ---------- */
  .faq-item{padding:20px 0;border-bottom:1px solid var(--stone);}
  .faq-item:first-child{padding-top:0;}
  .faq-item:last-child{border-bottom:none;}
  .faq-q{margin:0 0 8px;font-size:1rem;font-weight:700;color:var(--ink);}
  .faq-a{margin:0;font-size:0.9375rem;line-height:1.65;color:#3f3b34;}

  /* ---------- SECTION RHYTHM ---------- */
  /* Uniform 96px between every section gave the page one flat beat, so nothing
     read as grouped. The credentials exist to support the two offers, so they
     are pulled tight to them and the pair is separated from what follows. */
  section:has(.cred-strip){padding-bottom:var(--space-lg);}
  #offers{padding-top:var(--space-lg);padding-bottom:var(--space-xl);}

  /* Depth tokens applied. */
  header{z-index:var(--z-header);}
  .float-call{z-index:var(--z-float);}
  .modal{z-index:var(--z-modal);}

  /* ---------- OFFER CARD RHYTHM ---------- */
  /* One uniform gap put the label, heading, description and facts at equal
     distance, so nothing grouped. The label belongs to the heading, the facts
     belong to the action; the description is what separates the two pairs. */
  .offer{gap:0;}
  .offer-kind{margin-bottom:var(--space-2xs);}
  .offer h3{margin-bottom:var(--space-sm);}
  .offer p{margin-bottom:var(--space-md);}
  .offer-when{padding-top:var(--space-sm);margin-bottom:var(--space-sm);}

  /* ---------- MEASURE ---------- */
  /* Answer copy inside a 760px column ran to roughly 85 characters at 15px,
     well past the comfortable range. Reading text gets a measure; the table
     and label text around it does not need one. */
  .faq-a{max-width:68ch;}
  .checklist li{max-width:60ch;}

  /* Uppercase labels, one tracking value for one role. */
  .offer-kind,.proof-when,.spec th{letter-spacing:var(--track-label);}

  /* ---------- FLOATING BUTTON CLEARANCE ---------- */
  /* The floating Book a call sits over the bottom-right of the viewport. At the
     foot of the page that lands on the footer links, and on a phone it covers
     them outright. The footer reserves the space rather than the button moving,
     so nothing shifts while scrolling. */
  @media (max-width:640px){
    footer{padding-bottom:calc(var(--space-xl) + 56px);}
    /* The sign-up sections end with a submit control; the standing button must
       not land on top of it. */
    #register,#enrol{padding-bottom:calc(var(--space-xl) + 56px);}
  }
  /* Reduced motion is already respected for reveals; the floating control has
     no entrance animation, so it needs no counterpart. */

  /* ---------- CURRENT PAGE ---------- */
  /* A marker, not a second call to action. On its own page the CTA drops its
     fill, so the bar never asks for something the visitor has already done.
     inset box-shadow rather than border-bottom: it adds no height, so nothing
     shifts as you move between pages. */
  .navlinks a[aria-current="page"]{color:var(--copper-dark);}
  .navlinks a[aria-current="page"]:not(.nav-cta){box-shadow:inset 0 -2px 0 var(--copper);}
  .navlinks a.nav-cta[aria-current="page"],
  .navlinks a.nav-cta[aria-current="page"]:hover,
  .navlinks a.nav-cta[aria-current="page"]:focus{
    background:transparent;border:1px solid var(--stone);color:var(--ink);box-shadow:none;
  }
  .footer-links a[aria-current="page"]{color:var(--copper-text);text-decoration:underline;text-underline-offset:3px;}

  /* ---------- CONTROL FEEDBACK ---------- */
  /* Buttons had no transition at all, so every hover snapped, and there was no
     pressed state anywhere. Colour only, no transform: nothing moves, so this
     needs no reduced-motion counterpart. */
  .btn-primary,.btn-secondary,.btn-ghost,.btn-on-panel,.btn-outline-panel,
  .nav-cta,.float-call,.footer-linkbtn,.result-secondary button{
    transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
  }
  .btn-primary:active{background:#8a4529;}
  .btn-secondary:active{background:var(--ivory);border-color:var(--ink);}
  .btn-ghost:active{background:var(--stone);}
  .btn-on-panel:active,.btn-outline-panel:active{background:rgba(246,241,232,0.12);}
  .float-call:active{background:#8a4529;border-color:#8a4529;}

  /* ---------- HERO PHOTO FIT ---------- */
  /* Was an inline style attribute on the homepage img; now shared, so the
     cohort hero inherits the same crop instead of restating it. */
  .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}

  /* ---------- FAQ DISCLOSURE ---------- */
  /* Native <details>: correct semantics, keyboard handling and state for free.
     No JS, no ARIA of our own to keep in sync. */
  .faq-item{padding:0;border-bottom:1px solid var(--stone);}
  .faq-item summary{
    position:relative;cursor:pointer;list-style:none;
    padding:var(--space-md) 40px var(--space-md) 0;
    min-height:var(--ctrl-sm-min);display:flex;align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-q{margin:0;font-size:1rem;font-weight:700;color:var(--ink);}
  .faq-item summary:hover .faq-q{color:var(--copper-dark);}
  .faq-item summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
  /* Two bars drawn, not a glyph: the vertical one rotates onto the horizontal
     one, so plus becomes minus in a single transform. */
  .faq-item summary::before,
  .faq-item summary::after{
    content:"";position:absolute;right:2px;top:calc(50% - 1px);
    width:14px;height:2px;background:var(--copper-text);
  }
  .faq-item summary::after{transform:rotate(90deg);transition:transform .2s ease-out;}
  .faq-item[open] summary::after{transform:rotate(0deg);}
  @media (prefers-reduced-motion:reduce){
    .faq-item summary::after{transition:none;}
  }
  .faq-a{margin:0;padding:0 40px var(--space-md) 0;max-width:68ch;}

  /* ---------- ENROL RHYTHM ---------- */
  /* The price line carries the decision, so it is given room the other rows
     are not. Everything above and below stays tight against it. */
  .price-line--headline{
    padding:var(--space-md) 0 var(--space-lg);
    flex-direction:column;align-items:flex-start;gap:var(--space-2xs);
  }
  .price-line--headline dd{text-align:left;}
  .price-was{font-size:1.125rem;}

  /* ---------- BAND PAIRING ---------- */
  /* A dark band and the section after it are one movement: the band states the
     offer, the section that follows details it. Pulled tight so they read as a
     pair, which leaves the gap to the next idea meaning something. */
  .panel-band + section{padding-top:var(--space-lg);}

  /* ---------- FIT: NOT A MATCHED PAIR ---------- */
  /* Qualifying in is the point; ruling out is a footnote to it. But the two
     headings are peers in the structure, so they take the same treatment and
     differ by weight and colour alone - the serif heading used here before
     competed with the section heading directly above it.

     The columns are the measure. A max-width on the items as well left each
     column wider than anything allowed to fill it, which is what opened the
     gap down the middle. */
  .claim-in h3,.claim-out h3{
    font-family:'Manrope',sans-serif;font-size:0.8125rem;font-weight:700;
    letter-spacing:var(--track-label);text-transform:uppercase;
    margin:0 0 var(--space-sm);
  }
  .claim-in h3{color:var(--copper-text);}
  .claim-out h3{color:#6b6256;}

  .claim-in .checklist li{font-size:1rem;line-height:1.65;color:var(--ink);}
  .claim-out .checklist li{font-size:0.9375rem;line-height:1.6;color:#6b6256;}
  .claim-out .checklist li::before{color:#6f675c;}


  /* ---------- HERO FIGURE ---------- */
  /* Same 4:5 frame and border as .hero-photo so the two heroes sit at the same
     weight, but the artwork carries its own ink ground and is drawn to the
     frame, so it is contained rather than cropped. */
  .hero-figure{
    aspect-ratio:4/5;border:1px solid var(--ink);background:var(--ink);
    overflow:hidden;display:flex;
  }
  .hero-figure img{width:100%;height:100%;object-fit:contain;display:block;}

  /* ---------- FRAMEWORK FIGURE ---------- */
  /* The cohort's subject drawn rather than photographed: volume of work falls
     away down the three bands while the weight concentrates, ending on the one
     copper mark. Palette and type come from the same tokens as the page. */
  .framework-fig{width:100%;height:100%;display:block;}
  .framework-fig .fw-label{
    font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;
    letter-spacing:2.2px;fill:var(--sand);
  }
  .framework-fig .fw-marks rect{fill:var(--sand);}
  .framework-fig .fw-marks--faint rect{opacity:0.3;}
  .framework-fig .fw-marks--mid rect{opacity:0.62;}
  .framework-fig .fw-rule{stroke:var(--ivory);stroke-opacity:0.16;stroke-width:1;}
  .framework-fig .fw-decide{fill:var(--copper);}

  /* ---------- PROOF STORIES ON LIGHT ---------- */
  /* The same two stories run on the homepage with no container at all. Boxing
     them here made one piece of content look like two different things across
     the site, and the box was doing nothing the grid was not already doing. */
  .proof-pair--light{border-top-color:var(--stone);}
  .proof-pair--light .proof p{color:#3f3b34;}
  .proof-pair--light .proof:last-child p{max-width:46ch;}

  /* ---------- ENROL: ONE DOMINANT ACTION ---------- */
  /* The price is the loudest thing here, which is right, but the button that
     acts on it was a medium control buried between two lede-sized paragraphs.
     Full width, large, and the prose around it steps back to supporting size. */
  .btn-enrol{
    width:100%;margin:var(--space-md) 0 var(--space-sm);
    padding:var(--ctrl-lg-pad);min-height:var(--ctrl-lg-min);font-size:1rem;
  }
  .enrol-reassure{
    margin:var(--space-lg) 0 0;font-size:0.9375rem;line-height:1.6;
    color:var(--panel-muted);max-width:52ch;
  }
  .enrol-note{margin:0;font-size:0.8125rem;color:var(--panel-muted);}

  /* ---------- SPEC TABLE COLUMNS ---------- */
  /* Label cells wrapped to two lines while their neighbours took one, which
     broke the row rhythm. A fixed ratio settles it. */
  .spec td:first-child{width:34%;}
  .spec td.when,.spec th:first-child{width:88px;}

  /* ---------- SPEC LIST ---------- */
  /* Label and description, not rows and columns: a table asserted a grid
     relationship the content does not have, and put two identical tables
     back to back. Hairlines carry the separation instead of table chrome. */
  .spec-list{margin:0;}
  .spec-row{
    display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);
    gap:var(--space-md);padding:var(--space-md) 0;
    border-bottom:1px solid rgba(246,241,232,0.14);
  }
  .spec-row:first-child{padding-top:0;}
  .spec-row:last-child{border-bottom:none;padding-bottom:0;}
  @media (max-width:640px){
    .spec-row{grid-template-columns:1fr;gap:var(--space-2xs);}
  }
  .spec-row dt{margin:0;font-weight:700;color:var(--ivory);font-size:1rem;}
  .spec-row dd{margin:0;color:var(--panel-muted);font-size:0.9375rem;line-height:1.6;}
  /* Light-ground fallback, should this list ever sit outside a dark band. */
  section:not(.panel-band) .spec-row{border-bottom-color:var(--stone);}
  section:not(.panel-band) .spec-row dt{color:var(--ink);}
  section:not(.panel-band) .spec-row dd{color:#3f3b34;}

  /* ---------- THE FOUR WEEKS ---------- */
  /* This one genuinely is a sequence, so it is numbered and connected. The
     rule between markers is the four weeks passing. */
  .weeks{list-style:none;margin:0;padding:0;}
  .weeks li{
    position:relative;padding:0 0 var(--space-lg) 48px;
  }
  .weeks li:last-child{padding-bottom:0;}
  /* The connecting line stops at the last marker rather than running past it. */
  .weeks li:not(:last-child)::before{
    content:"";position:absolute;left:2px;top:16px;bottom:0;
    width:1px;background:var(--stone);
  }
  .week-no{
    display:block;margin-bottom:6px;
    font-family:'Manrope',sans-serif;font-size:0.75rem;font-weight:700;
    letter-spacing:var(--track-label);text-transform:uppercase;
    color:var(--copper-text);
  }
  .weeks li p{margin:0;font-size:1rem;line-height:1.65;color:#3f3b34;max-width:56ch;}

  /* ---------- MID-PAGE ACTION ---------- */
  /* Four sections ran between the hero CTA and the enrol panel with no way to
     act. This sits at the point the offer has just been explained in full. */
  .weeks-act{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);
    margin-top:var(--space-xl);padding-top:var(--space-lg);
    border-top:1px solid var(--stone);
  }
  .weeks-act-note{font-size:0.875rem;color:#6b6256;}

  /* ---------- TIMELINE MOTION ---------- */
  /* The one place on this page where motion means something rather than
     decorating: the rule IS the four weeks passing, so it draws downward from
     each marker instead of simply appearing. One sequence per week - marker
     lands, line advances - riding the stagger the reveal observer already
     applies, so week 1 completes before week 2 begins.

     Every hidden state is scoped to .reveal-ready, which script.js adds only
     after it has confirmed motion is allowed, an observer exists, and there
     are targets. If any of that fails the timeline renders whole. */
  .weeks li::after{
    content:"";position:absolute;left:0;top:5px;
    width:5px;height:5px;background:var(--copper);
  }
  .reveal-ready .weeks li::after{transform:scale(0);transform-origin:center;}
  .reveal-ready .weeks li.is-in::after{
    transform:scale(1);
    transition:transform 220ms cubic-bezier(0.16,1,0.3,1);
  }
  .reveal-ready .weeks li:not(:last-child)::before{transform:scaleY(0);transform-origin:top;}
  .reveal-ready .weeks li.is-in:not(:last-child)::before{
    transform:scaleY(1);
    /* Starts after the marker has landed, so the line reads as leaving it. */
    transition:transform 520ms cubic-bezier(0.16,1,0.3,1) 140ms;
  }
  /* Belt and braces: the observer already bails under reduced motion, but if
     .reveal-ready is ever set another way nothing may stay collapsed. */
  @media (prefers-reduced-motion:reduce){
    .reveal-ready .weeks li::after,
    .reveal-ready .weeks li.is-in::after,
    .reveal-ready .weeks li:not(:last-child)::before,
    .reveal-ready .weeks li.is-in:not(:last-child)::before{
      transform:none;transition:none;
    }
  }

  /* ---------- TIMELINE MOTION PATH ---------- */
  /* The spine is built and measured in JS, because the marker positions move
     with every wrap of the copy. Until .weeks-wrap gains .is-pathed the SVG
     and token stay hidden and the CSS rule from the block above is what
     renders - so no JS, old browser or reduced motion all leave a complete,
     static timeline rather than an empty column. */
  .weeks-wrap{position:relative;}
  .weeks-path,.weeks-token{display:none;}
  .is-pathed .weeks-path{
    display:block;position:absolute;left:0;top:0;
    width:24px;height:100%;overflow:visible;pointer-events:none;
  }
  .is-pathed .weeks-spine{fill:none;stroke:var(--stone);stroke-width:1;}
  .is-pathed .weeks-trail{fill:none;stroke:var(--copper);stroke-width:1.5;stroke-linecap:round;}
  .is-pathed .weeks-token{
    display:block;position:absolute;left:0;top:0;
    width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
    background:var(--copper);pointer-events:none;
  }
  /* The straight CSS rule steps aside once the real path is drawn. */
  .is-pathed .weeks li:not(:last-child)::before{display:none;}
  /* Markers stay put but only take colour once the token has reached them. */
  .is-pathed .weeks li::after{background:var(--stone);transform:none;}
  .is-pathed .weeks li.reached::after{
    background:var(--copper);
    transition:background 200ms cubic-bezier(0.16,1,0.3,1);
  }

  /* ---------- ARTEFACT FIGURE (workshop hero) ---------- */
  /* The cohort hero draws its framework; this draws what you walk away with.
     Same vocabulary - ink ground, sand blocks, one copper accent - so the two
     landing pages read as a pair rather than two separate ideas. */
  .artefact-fig{width:100%;height:100%;display:block;}
  .artefact-fig .af-label{
    font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;
    letter-spacing:2.2px;fill:var(--sand);
  }
  .artefact-fig .af-stack rect{fill:none;stroke:var(--sand);stroke-opacity:0.42;stroke-width:1;}
  .artefact-fig .af-final{fill:var(--copper);}
  .artefact-fig .af-name{
    font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;fill:var(--panel-text);
  }
  .artefact-fig .af-name--final{fill:var(--white);font-weight:700;}


  /* ---------- REGISTER: COPY LEFT, FORM RIGHT ---------- */
  /* The same split the homepage uses for the speaking enquiry, so a form on
     this site always sits beside its reason rather than under it. */
  .register-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
  @media (max-width:900px){ .register-grid{grid-template-columns:1fr;gap:32px;} }

  /* ---------- ARTEFACT FIGURE (interactive) ---------- */
  /* Was an inline SVG, which cannot hold a button. These are real controls:
     focusable, keyboard-operable, state announced. Choosing one names the
     artefact, so the interaction reports something instead of only looking
     interactive. */
  .artefacts-fig{
    aspect-ratio:auto;display:flex;flex-direction:column;
    gap:var(--space-sm);padding:clamp(24px,3vw,34px);
  }
  .af-label{
    margin:0;font-family:'Manrope',sans-serif;font-size:0.75rem;font-weight:700;
    letter-spacing:var(--track-label);text-transform:uppercase;color:var(--sand);
  }
  .af-list{display:flex;flex-direction:column;gap:10px;}
  .af-item{
    display:block;width:100%;text-align:left;
    padding:14px 16px;min-height:var(--ctrl-sm-min);
    font-family:'Manrope',sans-serif;font-size:0.9375rem;font-weight:600;
    color:var(--panel-text);background:transparent;
    border:1px solid rgba(246,241,232,0.28);border-radius:var(--radius);
    cursor:pointer;
    transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
  }
  .af-item:hover{border-color:var(--sand);background:rgba(246,241,232,0.06);}
  .af-item:focus-visible{outline:2px solid var(--sand);outline-offset:2px;}
  .af-item:active{background:rgba(246,241,232,0.12);}
  .af-item[aria-pressed="true"]{
    background:var(--copper);border-color:var(--copper);
    color:var(--white);font-weight:700;
  }
  .af-item[aria-pressed="true"]:hover{background:var(--copper-dark);border-color:var(--copper-dark);}
  .af-desc{
    margin:0;font-size:0.875rem;line-height:1.55;color:var(--panel-muted);
    min-height:2.6em; /* holds its height so choosing does not shift the column */
  }
  @media (prefers-reduced-motion:reduce){ .af-item{transition:none;} }


  /* ---------- FIELD-LEVEL ERRORS ---------- */
  /* The form already had one alert for a failed submission; these are the
     per-field messages. Colour is never the only signal - the message itself
     says what is wrong, and the border thickens as well as changing hue. */
  .field-error{
    margin:6px 0 0;font-size:0.8125rem;font-weight:600;line-height:1.45;
    color:var(--error-text);
  }
  .form-row input[aria-invalid="true"],
  .form-row select[aria-invalid="true"],
  .form-row textarea[aria-invalid="true"]{
    border-color:var(--error);border-width:2px;
    padding:12px 13px; /* holds the box size against the thicker border */
  }
  .form-row input[aria-invalid="true"]:focus,
  .form-row select[aria-invalid="true"]:focus,
  .form-row textarea[aria-invalid="true"]:focus{border-color:var(--error);}
  /* On the dark register panel the light-ground error red would drop below
     contrast, so it takes the tint that reads there. */
  .panel-band .field-error{color:var(--error-on-panel);}

  /* ---------- ARTEFACT CARD MOTION ---------- */
  /* One copper block travels between the four items instead of four
     backgrounds cross-fading. Only translateY animates, so it composites on
     the GPU and never touches layout. */
  .af-list{position:relative;}
  .af-marker{
    position:absolute;left:0;top:0;width:3px;
    background:var(--copper-dark);
    z-index:2;pointer-events:none;
  }
  /* Once the marker exists it owns the fill, so the pressed item only changes
     its text. Without this the two would double up during the travel. */
  .af-list.has-marker .af-item{position:relative;z-index:1;background:transparent;}
  .af-list.has-marker .af-item[aria-pressed="true"]{
    background:var(--copper);border-color:var(--copper);color:var(--white);
  }
  .af-list.has-marker .af-item[aria-pressed="true"]:hover{
    background:var(--copper-dark);border-color:var(--copper-dark);
  }
  /* The item being left keeps its border until the marker has gone, so the
     row never looks empty mid-travel. */
  .af-list.has-marker .af-item{border-color:rgba(246,241,232,0.28);}

  .af-desc{transition:opacity 140ms ease-out;}
  .af-desc.is-swapping{opacity:0;}

  /* Entrance: the four arrive as a short sequence rather than all at once. */
  .reveal-ready .af-item{opacity:0;transform:translateY(8px);}
  .reveal-ready .artefacts-fig.is-in .af-item{
    opacity:1;transform:none;
    transition:opacity 420ms cubic-bezier(0.16,1,0.3,1),transform 420ms cubic-bezier(0.16,1,0.3,1);
  }
  .reveal-ready .artefacts-fig.is-in .af-item:nth-child(2){transition-delay:60ms;}
  .reveal-ready .artefacts-fig.is-in .af-item:nth-child(3){transition-delay:120ms;}
  .reveal-ready .artefacts-fig.is-in .af-item:nth-child(4){transition-delay:180ms;}
  .reveal-ready .artefacts-fig.is-in .af-item:nth-child(5){transition-delay:240ms;}

  @media (prefers-reduced-motion:reduce){
    .af-marker,.af-desc,.af-item{transition:none !important;}
    .reveal-ready .af-item{opacity:1;transform:none;}
  }

  /* ---------- ARTEFACT CARD: AMBIENT FRAME ---------- */
  /* First attempt animated the card itself. Testing killed it: a container that
     never stops moving makes its own buttons an unstable target, and no
     hover-to-pause can help because the instability is there during the
     approach, before any pointer event fires.
     So the motion moved off the controls. A hairline frame rises and falls
     behind the card; the card, and everything you click in it, never moves. */
  @keyframes af-drift{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-8px); }
  }
  .artefacts-fig{ position:relative; }
  .artefacts-fig::after{
    content:"";position:absolute;inset:-10px -10px 4px;
    border:1px solid var(--sand);opacity:0.16;
    pointer-events:none;
    animation:af-drift 7s ease-in-out infinite;
  }
  @media (prefers-reduced-motion:reduce){
    .artefacts-fig::after{ animation:none; }
  }

  /* ---------- TIMELINE: PROGRESSIVE READ-THROUGH ---------- */
  /* The token already reports position; these make the steps behind it read as
     covered ground. Only the label changes, so the body copy never dims. */
  .is-pathed .weeks .week-no{ color:#6b6256; transition:color 260ms cubic-bezier(0.16,1,0.3,1); }
  .is-pathed .weeks li.reached .week-no{ color:var(--copper-text); }
  @media (prefers-reduced-motion:reduce){
    .is-pathed .weeks .week-no{ transition:none; }
  }