/* About page styles.
   Moved out of the <style> block in templates/about.html so the browser can
   fetch it in parallel and cache it between visits (the page HTML carries a
   csrftoken, so it is never cacheable). Rules are VERBATIM and in their original
   order: several of them rely on coming after an equally specific rule, so do
   not sort, merge or tidy anything here. */
  /* Accent lives in one place — flip cyan->gold here if ever wanted. */
  .about-page{ --abt-accent:#5bc3f9; --abt-accent-rgb:91,195,249; }
  /* Every heading in the page content uses Oxanium, the founder section's face (owner
     2026-09-14). One rule, scoped to main so the nav and footer keep theirs; at (0,1,2) it
     outranks the per-heading class rules below that name the display face. */
  .about-page main :is(h1,h2,h3){ font-family:'Oxanium',var(--font-display),system-ui,sans-serif; }

  body.about-page{ height:auto; min-height:100vh; }
  .about-page main{ overflow-x:clip; }
  .about-page .landing-nav{ position:sticky; top:0; z-index:50; }

  /* ===== Backdrop — one solid ground, the same #050810 as the founder section
     (owner 2026-09-14: no grid anywhere on this page, desktop included). Sections
     that want atmosphere bring their own soft glow. */
  .about-page::before{
    content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:#050810;
  }

  /* ===== Shared primitives ===== */
  .abt{ max-width:78rem; margin:0 auto; padding:0 1.1rem; }
  .abt-relative{ position:relative; }
  .abt-eyebrow{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-display); font-size:.68rem; font-weight:800;
    letter-spacing:.26em; text-transform:uppercase; color:var(--abt-accent);
    border:1px solid rgba(var(--abt-accent-rgb),.28); background:rgba(var(--abt-accent-rgb),.08);
    padding:.5rem .95rem; border-radius:999px;
  }
  .abt-eyebrow::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--abt-accent); box-shadow:0 0 10px var(--abt-accent);
  }
  .abt-h{
    font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.08;
    letter-spacing:-.01em; margin:1.1rem 0 0; overflow-wrap:anywhere;
  }
  .abt-h-grad{
    background:linear-gradient(100deg,#fff 0%,#cfe9fb 38%,var(--abt-accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .abt-lead{ color:#c4cde0; font-size:1.02rem; line-height:1.65; margin:1rem 0 0; }
  .abt-lead-link{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .15s; }
  .abt-lead-link:hover{ border-bottom-color:#fff; }

  .abt-section{ padding:clamp(3.5rem,8vw,5.5rem) 0 0; position:relative; }

  /* ===== Section hairlines =====
     A 1px rule at the top of each section. Brightest in the middle and fading
     to nothing at both ends, so it reads as a seam in the page rather than as
     a drawn border — a flat full-width line would cut the layout into stacked
     boxes, which is the opposite of what a divider is for here.

     Drawn as a pseudo-element rather than markup: it is decoration, and an
     empty <div> between every section is three more things to keep in sync
     and three more nodes for a screen reader to step over. */
  .abt-section::before,
  .abt-ruled::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(72rem, calc(100% - 2.2rem)); height:1px; pointer-events:none;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(var(--abt-accent-rgb),.05) 14%,
      rgba(var(--abt-accent-rgb),.30) 50%,
      rgba(var(--abt-accent-rgb),.05) 86%,
      transparent 100%);
  }
  .abt-ruled{ position:relative; padding-top:clamp(3.5rem,8vw,5.5rem); }
  .abt-section-head{ text-align:center; max-width:48rem; margin:0 auto; }
  .abt-section-head .abt-eyebrow{ margin:0 auto; }
  .abt-section-head .abt-lead{ margin:.85rem auto 0; max-width:44rem; }
  .abt-team-head{ max-width:50rem; }
  /* Two lines, the second in the gradient: "team." was left alone on a line at desktop widths. */
  .abt-team-head .abt-h{ text-wrap:balance; }
  .abt-team-head .abt-h .abt-h-grad{ display:block; background:none; -webkit-text-fill-color:currentColor; color:var(--abt-accent); }
  @media (max-width:480px){ .abt-team-meet{ letter-spacing:.14em; font-size:.66rem; } }
  /* "Meet the team behind your training." hands the reader to the cards below it. */
  .abt-team-meet{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin:1.7rem auto 0; font-family:var(--font-display); font-weight:800;
    font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  }
  .abt-team-meet::before,
  .abt-team-meet::after{ content:""; width:clamp(24px,5vw,56px); height:1px; background:rgba(var(--abt-accent-rgb),.45); }
  .abt-team-head + .abt-team{ margin-top:1.9rem; }

  /* ===== OUR APPROACH (owner 2026-09-14): left-aligned opening, four product cards, one real
     lap review as the centrepiece, a closing statement. Scoped to .abt-apr. ===== */
  .abt-apr-head .abt-h{ text-wrap:balance; }
  /* Solid blue second line, like "Where it started" (owner 2026-09-14). */
  .abt-apr-head .abt-h .abt-h-grad{ display:block; background:none; -webkit-text-fill-color:currentColor; color:var(--abt-accent); }

  .abt-apr-cards{
    list-style:none; margin:clamp(1.8rem,4vw,2.6rem) 0 0; padding:0;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.4vw,1rem);
  }
  @media (max-width:1100px){ .abt-apr-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){ .abt-apr-cards{ grid-template-columns:minmax(0,1fr); } }
  .abt-apr-card{
    display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:1rem;
    border:1px solid rgba(var(--abt-accent-rgb),.18);
    background:linear-gradient(180deg,rgba(13,20,34,.92),rgba(8,13,24,.96));
  }
  .abt-apr-card > img{
    display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    border-bottom:1px solid rgba(var(--abt-accent-rgb),.14);
  }
  .abt-apr-card-body{ display:flex; flex-direction:column; gap:.4rem; flex:1; padding:1rem 1.05rem 1.15rem; }
  .abt-apr-kind{
    margin:0; font-family:var(--font-display); font-weight:800; font-size:.62rem;
    letter-spacing:.2em; text-transform:uppercase; color:var(--abt-accent);
  }
  .abt-apr-card h3{ margin:0; font-weight:800; font-size:1.08rem; line-height:1.22; color:#fff; }
  .abt-apr-say{ margin:0; font-size:.93rem; line-height:1.55; color:#C4CDE0; }
  .abt-apr-note{
    margin:auto 0 0; padding-top:.65rem; border-top:1px solid rgba(120,148,210,.12);
    font-size:.8rem; line-height:1.5; color:#8A97B0;
  }
  .abt-apr-say + .abt-apr-note{ margin-top:.55rem; }
  .abt-apr-card{ transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .3s; }
  .abt-apr-card > img{ transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .35s; }
  .abt-apr-card:hover{
    transform:translateY(-4px); border-color:rgba(var(--abt-accent-rgb),.45);
    box-shadow:0 26px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(var(--abt-accent-rgb),.12),0 0 42px -14px rgba(var(--abt-accent-rgb),.32);
  }
  .abt-apr-card:hover > img{ transform:scale(1.045); filter:brightness(1.08); }
  @media (prefers-reduced-motion:reduce){
    .abt-apr-card,.abt-apr-card > img{ transition:none; }
    .abt-apr-card:hover,.abt-apr-card:hover > img{ transform:none; }
  }

  .abt-apr-review{ margin-top:clamp(2.4rem,5vw,3.6rem); display:grid; gap:clamp(1rem,2.4vw,1.5rem); }
  .abt-apr-review-intro{ max-width:46rem; }
  .abt-apr-review-intro h3{
    margin:.5rem 0 0; font-weight:800; font-size:clamp(1.3rem,2.3vw,1.8rem); line-height:1.16;
    color:#fff; text-wrap:balance;
  }
  .abt-apr-review-intro p:last-child{ margin:.75rem 0 0; color:#B8C2D6; font-size:clamp(.95rem,1.1vw,1.03rem); line-height:1.68; }
  .abt-apr-review-body{
    display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:clamp(1rem,2.6vw,2rem);
    align-items:center; padding:clamp(.9rem,1.8vw,1.35rem); border-radius:1.25rem;
    border:1px solid rgba(var(--abt-accent-rgb),.34);
    background:linear-gradient(180deg,rgba(9,24,42,.92),rgba(6,13,26,.96));
    box-shadow:0 0 0 1px rgba(var(--abt-accent-rgb),.08),0 30px 80px -40px rgba(0,0,0,.8),0 0 70px -24px rgba(var(--abt-accent-rgb),.28);
  }
  @media (max-width:900px){ .abt-apr-review-body{ grid-template-columns:minmax(0,1fr); } }
  .abt-apr-frame{ margin:0; min-width:0; }
  .abt-apr-player{
    position:relative; aspect-ratio:16/9; border-radius:.85rem; overflow:hidden;
    background:#060b15; border:1px solid rgba(255,255,255,.1);
  }
  .abt-apr-facade{
    position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
    background:none; cursor:pointer; display:block;
  }
  .abt-apr-facade img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .35s;
  }
  .abt-apr-facade:hover img{ transform:scale(1.03); filter:brightness(1.06); }
  .abt-apr-facade:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
  .abt-apr-play{
    position:absolute; left:50%; top:50%; z-index:2; width:clamp(58px,5.6vw,80px); aspect-ratio:1;
    border-radius:50%; display:grid; place-items:center; transform:translate(-50%,-50%);
    background:var(--abt-accent); transition:transform .2s;
    box-shadow:0 0 0 7px rgba(var(--abt-accent-rgb),.2),0 14px 40px rgba(var(--abt-accent-rgb),.45);
  }
  .abt-apr-play svg{ width:40%; height:40%; fill:#061423; margin-left:8%; }
  .abt-apr-facade:hover .abt-apr-play{ transform:translate(-50%,-50%) scale(1.08); }
  .abt-apr-playlabel{
    position:absolute; left:50%; top:calc(50% + clamp(42px,4.2vw,58px)); z-index:2; transform:translateX(-50%);
    white-space:nowrap; font-weight:700; font-size:.88rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.85);
  }
  .abt-apr-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  @media (prefers-reduced-motion:reduce){
    .abt-apr-facade img,.abt-apr-play{ transition:none; }
    .abt-apr-facade:hover img{ transform:none; }
  }
  .abt-apr-frame figcaption{
    display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem;
    margin-top:.7rem; font-size:.82rem; color:#B8C2D6;
  }
  .abt-apr-frame figcaption i{ display:inline-block; width:18px; height:3px; border-radius:2px; margin-right:.45rem; vertical-align:middle; }
  .abt-apr-g{ background:#22C55E; }
  .abt-apr-y{ background:#F5B041; }
  .abt-apr-frame figcaption em{ flex-basis:100%; font-style:normal; font-size:.75rem; letter-spacing:.03em; color:#7C8AA4; }
  .abt-apr-notes-wrap{ min-width:0; }
  .abt-apr-notes{ margin:0; display:flex; flex-direction:column; gap:1rem; }
  .abt-apr-notes div{ padding:.1rem 0 .1rem 1rem; border-left:2px solid rgba(var(--abt-accent-rgb),.55); }
  .abt-apr-notes dt{
    font-family:var(--font-display); font-weight:800; font-size:.66rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--abt-accent);
  }
  .abt-apr-notes dd{ margin:.4rem 0 0; font-size:.97rem; line-height:1.58; color:#E3E9F3; }
  .abt-apr-notes dd span{ display:block; margin-top:.5rem; font-size:.84rem; line-height:1.5; color:#8A97B0; }

  /* ===== Who it's for (media/who-its-for-handover, owner 2026-09-14) =====
     Palette and type verbatim from the handover, scoped to the section. */
  .abt-wif{
    --disp:'Oxanium',var(--font-display),system-ui,sans-serif;
    --blue:#5BC3F9; --blue-rgb:91,195,249; --bg:#050810;
    --line-2:rgba(120,148,210,.20); --dim:#B8C2D6;
    --rest:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));
    --raised:linear-gradient(180deg,rgba(16,32,56,.82),rgba(7,14,26,.86));
    position:relative; overflow-x:clip; margin-top:clamp(3.5rem,8vw,5.5rem);
    padding-bottom:clamp(30px,3.6vw,54px); background:var(--bg); color:#F0F3F8;
  }
  .abt-wif-wrap{ position:relative; z-index:2; max-width:82rem; margin:0 auto; padding:0 clamp(16px,3vw,40px); }
  .abt-wif-lbl{ font-family:var(--disp); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.1em; line-height:1.4; }

  .abt-wif-band{ position:relative; isolation:isolate; min-height:clamp(300px,34vw,470px); display:flex; align-items:flex-end; overflow:hidden; }
  .abt-wif-band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:44% 62%; z-index:-2; }
  /* The photo's fade into the page ends on the section's own background; change both together. */
  .abt-wif-band::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg,rgba(5,8,16,.66) 0%,rgba(5,8,16,.24) 26%,rgba(5,8,16,.72) 62%,var(--bg) 100%);
  }
  /* width:100% is load-bearing: as a flex item the wrap would shrink to its content and
     margin:0 auto would centre that box, breaking the gutter shared with the copy below. */
  .abt-wif-band .abt-wif-wrap{ width:100%; padding-top:clamp(40px,7vw,110px); padding-bottom:clamp(14px,1.7vw,26px); }
  .abt-wif-eye{ display:inline-flex; align-items:center; gap:9px; color:var(--blue); text-shadow:0 2px 14px rgba(0,0,0,.9); }
  .abt-wif-eye i{ width:22px; height:1px; background:currentColor; }
  .abt-wif-band h2{
    margin:clamp(10px,1.2vw,16px) 0 0; font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
    text-wrap:balance; font-size:clamp(27px,4.3vw,60px); line-height:1.0; color:#fff; max-width:23ch;
    text-shadow:0 3px 26px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7);
  }
  .abt-wif-band h2 span{ color:var(--blue); }

  .abt-wif-body{ margin-top:clamp(20px,2.4vw,36px); }
  .abt-wif-spec{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.5vw,20px); }
  .abt-wif-pos{
    position:relative; margin:0; padding:clamp(16px,1.8vw,26px); border:1px solid var(--line-2);
    border-radius:14px; background:var(--rest);
    transition:border-color .28s,transform .28s,background .28s,box-shadow .3s;
  }
  .abt-wif-pos::before{
    content:""; position:absolute; left:clamp(16px,1.8vw,26px); top:0; width:clamp(26px,3vw,40px); height:2px;
    background:linear-gradient(90deg,var(--blue),rgba(var(--blue-rgb),0));
  }
  .abt-wif-pos:hover{ transform:translateY(-3px); border-color:rgba(var(--blue-rgb),.4); background:var(--raised); box-shadow:0 34px 70px -42px #000; }
  .abt-wif-pos p{
    margin:0; font-family:var(--disp); font-weight:600; font-size:clamp(16px,1.62vw,24px);
    line-height:1.28; letter-spacing:-.012em; color:#fff; text-wrap:pretty;
  }
  .abt-wif-close{
    display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:clamp(18px,2.8vw,46px); align-items:start;
    margin-top:clamp(16px,2vw,28px); padding-top:clamp(18px,2.2vw,32px); border-top:1px solid var(--line-2);
  }
  .abt-wif-thesis{ margin:0; font-size:clamp(15px,1.34vw,20px); line-height:1.6; color:var(--dim); text-wrap:pretty; }
  .abt-wif-thesis b{ color:#fff; font-weight:600; }
  .abt-wif-ask{ padding-left:clamp(14px,1.6vw,22px); border-left:2px solid var(--blue); }
  .abt-wif-k{ display:block; color:var(--blue); margin-bottom:9px; }
  .abt-wif-ask p{ margin:0; font-size:clamp(14px,1.1vw,16.5px); line-height:1.62; color:var(--dim); text-wrap:pretty; }
  .abt-wif-ask p b{
    display:block; margin-top:9px; font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.25vw,18.5px);
    letter-spacing:-.01em; line-height:1.3; color:#fff;
  }
  @media (max-width:860px){
    .abt-wif-band{ min-height:clamp(260px,54vw,380px); }
    .abt-wif-band > img{ object-position:40% 64%; }
    .abt-wif-spec{ grid-template-columns:minmax(0,1fr); }
    .abt-wif-close{ grid-template-columns:minmax(0,1fr); gap:clamp(16px,3vw,22px); }
  }
  @media (prefers-reduced-motion:reduce){ .abt-wif-pos{ transition:none; } .abt-wif-pos:hover{ transform:none; } }


  /* Big faded vertical section watermark (desktop only). */
  .abt-watermark{
    position:absolute; left:.25rem; top:50%;
    transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(3.5rem,7vw,6.5rem); letter-spacing:.08em;
    color:rgba(255,255,255,.035); white-space:nowrap;
    pointer-events:none; user-select:none; z-index:0;
  }
  @media (max-width:1180px){ .abt-watermark{ display:none; } }

  /* ===== HERO (media/aabout/about-handover, owner 2026-09-14) =====
     Palette and type verbatim from the handover, scoped to .abt-hx. The eyebrow stays the
     page's own pill so every eyebrow on /about/ is the same size (owner, same day). */
  .abt-dot{ color:#ff4a6e; -webkit-text-fill-color:#ff4a6e; }
  .abt-hx{
    --disp:'Oxanium',var(--font-display),system-ui,sans-serif;
    --blue:#5BC3F9; --blue-rgb:91,195,249; --red:#E21429; --bg:#050810; --bg-2:#070c17;
    --line-2:rgba(120,148,210,.20); --line-3:rgba(120,148,210,.34); --dim:#B8C2D6; --muted:#7C8AA4;
    --rest:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));
    --raised:linear-gradient(180deg,rgba(16,32,56,.82),rgba(7,14,26,.86));
    position:relative; overflow-x:clip; padding:clamp(26px,3.2vw,52px) 0 clamp(24px,3vw,44px);
    background:radial-gradient(ellipse 54% 58% at 8% 18%,rgba(var(--blue-rgb),.10),transparent 66%),
               /* light blue, not red (owner 2026-09-15): the glow in the lower right under the photo */
               radial-gradient(ellipse 40% 46% at 96% 88%,rgba(var(--blue-rgb),.08),transparent 70%),var(--bg);
    color:#F0F3F8;
  }
  .abt-hx-wrap{ position:relative; z-index:2; max-width:84rem; margin:0 auto; padding:0 clamp(16px,3vw,40px); }
  .abt-hx-top{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(20px,3.4vw,58px); align-items:center; }
  .abt-hx-copy .abt-eyebrow{ margin:0; }
  .abt-hx-h{
    margin:clamp(14px,1.5vw,20px) 0 0; font-family:var(--disp); font-weight:800; letter-spacing:-.025em;
    text-wrap:balance; font-size:clamp(32px,4.7vw,66px); line-height:.98; text-transform:uppercase; color:#fff;
  }
  .abt-hx-h em{ font-style:normal; color:var(--blue); }
  /* The full stop after "measurably faster" is blue like the words (owner 2026-09-15; it was red). */
  .abt-hx-h b{ font-weight:800; color:var(--blue); }
  /* Inter declared here, not inherited, so a host stylesheet can't change the paragraph's face. */
  .abt-hx-lede{
    margin:clamp(14px,1.6vw,22px) 0 0; font-family:'Inter',var(--font-sans),system-ui,sans-serif;
    font-size:clamp(14.5px,1.16vw,17.5px); line-height:1.64; color:var(--dim); max-width:56ch; text-wrap:pretty;
  }
  .abt-hx-lede b{ color:#fff; font-weight:600; }
  .abt-hx-lede a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(var(--blue-rgb),.4); transition:color .2s,border-color .2s; }
  .abt-hx-lede a:hover{ color:#fff; border-bottom-color:var(--blue); }

  .abt-hx-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,2vw,28px); }
  .abt-hx-btn{
    display:inline-flex; align-items:center; gap:10px; height:clamp(46px,3.6vw,54px); padding:0 clamp(18px,1.8vw,26px);
    border-radius:10px; font-family:var(--disp); font-weight:700; font-size:clamp(14px,1.12vw,16.5px);
    letter-spacing:-.005em; text-decoration:none;
    transition:transform .2s,filter .2s,border-color .2s,background .2s,box-shadow .25s;
  }
  .abt-hx-btn svg{ width:17px; height:17px; flex:0 0 auto; }
  .abt-hx-btn .abt-hx-ar{ width:14px; height:14px; }
  .abt-hx-btn-p{ background:linear-gradient(100deg,#F4372C,var(--red)); color:#fff; box-shadow:0 16px 40px -16px rgba(226,20,41,.75); }
  .abt-hx-btn-p:hover{ transform:translateY(-2px); filter:brightness(1.08); color:#fff; box-shadow:0 20px 46px -14px rgba(226,20,41,.85); }
  .abt-hx-btn-s{ border:1px solid var(--line-3); background:var(--rest); color:#F0F3F8; }
  .abt-hx-btn-s:hover{ transform:translateY(-2px); border-color:rgba(var(--blue-rgb),.5); background:var(--raised); color:#fff; }

  .abt-hx-shot{ position:relative; margin:0; }
  .abt-hx-fr{
    position:relative; border-radius:16px; overflow:hidden; background:var(--bg-2);
    border:1px solid var(--line-2); box-shadow:0 60px 120px -58px #000;
  }
  /* height:auto is load-bearing: the img's height attribute acts as a definite height, and with
     both dimensions definite aspect-ratio is ignored and the frame renders portrait. */
  .abt-hx-fr img{
    display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 50%;
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
  }
  .abt-hx-shot:hover .abt-hx-fr img{ transform:scale(1.03); }
  .abt-hx-fr::after{ content:""; position:absolute; inset:0; background:linear-gradient(178deg,transparent 56%,rgba(5,8,16,.8) 96%); }
  .abt-hx-edge{ position:absolute; inset:0; border-radius:16px; pointer-events:none; z-index:3; box-shadow:inset 0 0 0 1px rgba(var(--blue-rgb),.14); }
  .abt-hx-tick{ position:absolute; z-index:4; top:0; left:clamp(14px,1.5vw,22px); width:2px; height:clamp(30px,3.6vw,52px); background:linear-gradient(180deg,var(--blue),transparent); }

  .abt-hx-proof{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(22px,2.6vw,40px);
    border:1px solid var(--line-2); border-radius:14px; background:var(--rest); overflow:hidden;
  }
  .abt-hx-st{ position:relative; padding:clamp(15px,1.7vw,24px) clamp(14px,1.6vw,22px); transition:background .26s; }
  .abt-hx-st + .abt-hx-st::before{ content:""; position:absolute; left:0; top:clamp(12px,1.4vw,20px); bottom:clamp(12px,1.4vw,20px); width:1px; background:var(--line-2); }
  .abt-hx-st:hover{ background:rgba(var(--blue-rgb),.05); }
  .abt-hx-n{ display:block; font-family:var(--disp); font-weight:800; font-size:clamp(27px,3.5vw,50px); line-height:1; letter-spacing:-.035em; color:#fff; font-variant-numeric:tabular-nums; }
  .abt-hx-n i{ font-style:normal; color:var(--blue); }
  .abt-hx-k{ display:block; margin-top:9px; font-family:var(--disp); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.1em; line-height:1.4; color:var(--muted); }
  .abt-hx-st:hover .abt-hx-k{ color:var(--dim); }

  @media (max-width:940px){
    .abt-hx-top{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,28px); }
    .abt-hx-shot{ order:-1; }
    .abt-hx-fr img{ object-position:50% 44%; }
    .abt-hx-proof{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .abt-hx-st:nth-child(3),.abt-hx-st:nth-child(4){ border-top:1px solid var(--line-2); }
    .abt-hx-st:nth-child(3)::before{ display:none; }
  }
  @media (max-width:520px){
    .abt-hx-btn{ width:100%; justify-content:center; }
  }
  @media (prefers-reduced-motion:reduce){
    .abt-hx-btn,.abt-hx-fr img,.abt-hx-st{ transition:none; }
    .abt-hx-btn:hover,.abt-hx-shot:hover .abt-hx-fr img{ transform:none; }
  }

  .abt-cta-row{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
  .abt-cta-left{ justify-content:flex-start; }
  .abt-cta-primary{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-family:var(--font-display); font-weight:900; font-size:1rem; letter-spacing:.05em;
    color:#fff; text-decoration:none; padding:1rem 1.8rem; border-radius:.85rem;
    background:linear-gradient(100deg,#ff2a39,#ff5a2a);
    filter:drop-shadow(0 10px 26px rgba(227,38,54,.42));
    transition:transform .18s ease, filter .18s ease;
  }
  .abt-cta-primary:hover{ transform:translateY(-1px); filter:drop-shadow(0 14px 34px rgba(227,38,54,.7)) brightness(1.05); }
  .abt-cta-primary svg{ width:1.15rem; height:1.15rem; flex:none; }
  .abt-cta-secondary{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-display); font-weight:700; font-size:.88rem; letter-spacing:.06em;
    color:#cfe6fb; text-decoration:none; padding:.95rem 1.4rem; border-radius:.85rem;
    border:1px solid rgba(var(--abt-accent-rgb),.35); background:rgba(10,16,28,.65);
    transition:border-color .18s ease, color .18s ease;
  }
  .abt-cta-secondary:hover{ border-color:rgba(var(--abt-accent-rgb),.75); color:#fff; }
  .abt-cta-secondary svg{ width:1.15rem; height:1.15rem; flex:none; }

  /* ===== WHY WE BUILT IT — copy left, the four-step loop right ===== */
  .abt-why{
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
    gap:clamp(1.5rem,4vw,3rem); align-items:center;
  }
  @media (max-width:1080px){ .abt-why{ grid-template-columns:1fr; } }
  .abt-why-h{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin:.9rem 0 0; }
  .abt-why .abt-lead{ margin:1rem 0 0; font-size:.96rem; max-width:34rem; }
  /* No dot on this eyebrow: it is a section label, not a live-status pill. */
  .abt-eyebrow-plain{
    border:0; background:none; padding:0; letter-spacing:.2em; font-size:.66rem;
  }
  .abt-eyebrow-plain::before{ display:none; }

  .abt-loop{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.6rem,1.4vw,1rem);
  }
  @media (max-width:720px){ .abt-loop{ grid-template-columns:1fr 1fr; } }
  .abt-loop-card{
    position:relative; text-align:center; padding:1.4rem 1rem 1.5rem;
    border-radius:1rem; border:1px solid rgba(var(--abt-accent-rgb),.20);
    background:linear-gradient(180deg,rgba(var(--abt-accent-rgb),.07),rgba(8,14,26,.5));
  }
  /* The same hover as the "Our approach" cards (owner 2026-09-14): lift, blue edge, glow. */
  .abt-loop-card{ transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .3s; }
  .abt-loop-card .abt-loop-ico{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }
  .abt-loop-card:hover{
    transform:translateY(-4px); border-color:rgba(var(--abt-accent-rgb),.45);
    box-shadow:0 26px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(var(--abt-accent-rgb),.12),0 0 42px -14px rgba(var(--abt-accent-rgb),.32);
  }
  .abt-loop-card:hover .abt-loop-ico{ transform:scale(1.08); }
  @media (prefers-reduced-motion:reduce){
    .abt-loop-card,.abt-loop-card .abt-loop-ico{ transition:none; }
    .abt-loop-card:hover,.abt-loop-card:hover .abt-loop-ico{ transform:none; }
  }
  /* The arrow between steps, drawn on the card rather than as extra markup —
     a chevron element between list items would be read aloud by screen
     readers as content, and it is pure decoration. */
  .abt-loop-card + .abt-loop-card::before{
    content:"→"; position:absolute; left:calc(-.5 * clamp(.6rem,1.4vw,1rem) - .38rem);
    top:50%; transform:translateY(-50%);
    font-size:1rem; color:rgba(var(--abt-accent-rgb),.55); pointer-events:none;
  }
  @media (max-width:720px){ .abt-loop-card + .abt-loop-card::before{ display:none; } }
  .abt-loop-ico{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.9rem; height:2.9rem; border-radius:.85rem; margin-bottom:.85rem;
    color:var(--abt-accent);
    border:1px solid rgba(var(--abt-accent-rgb),.28); background:rgba(var(--abt-accent-rgb),.10);
  }
  .abt-loop-ico svg{ width:1.5rem; height:1.5rem; }
  /* Repeat closes the loop, so it carries the brand red — the cycle is the
     product, not any single step in it. */
  .abt-loop-last .abt-loop-ico{
    color:#ff5a68; border-color:rgba(255,90,104,.32); background:rgba(255,90,104,.10);
  }
  .abt-loop-card h3{
    font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:#fff; margin:0;
  }
  .abt-loop-card p{ font-size:.84rem; line-height:1.5; color:#93a5bd; margin:.5rem 0 0; }

  /* ===== Stats band ===== */
  .abt-stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
    margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding:1.25rem clamp(1.25rem,3vw,2rem);
    border-radius:1rem; border:1px solid rgba(var(--abt-accent-rgb),.18);
    background:linear-gradient(180deg,rgba(var(--abt-accent-rgb),.05),rgba(var(--abt-accent-rgb),.01));
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  @media (max-width:760px){ .abt-stats{ grid-template-columns:1fr 1fr; gap:.85rem; } }
  .abt-stat{ text-align:center; padding:.4rem .25rem; }
  .abt-stat b{ display:block; font-family:var(--font-display); font-weight:900;
    font-size:clamp(1.6rem,3.5vw,2.1rem); color:#fff; line-height:1; }
  .abt-stat span{ display:block; font-family:var(--font-display); font-weight:700;
    font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#9fb0c9; margin-top:.5rem; }

  /* ===== Instructor cards ===== */
  /* Auto-scrolling circular team marquee (mirrors the homepage partner strip):
     two identical card sets in a track, translateX -50% for a seamless loop,
     edge-fade mask, and a JS hover-slow. */
  .abt-team{ margin-top:2.6rem; overflow:hidden; padding:.3rem 0 .6rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .abt-team-track{ display:flex; width:max-content; }
  /* Added by JS once the second set exists -- see the note on the markup. */
  .abt-team-track.is-looping{ animation:abtTeamScroll 30s linear infinite; }
  /* Five 19rem cards need 1616px and the column is 1213px, so at any instant
     one or two are clipped at the edges -- inherent to a marquee, and the
     reason a reader who wants to actually READ a card needs a way to stop it.
     The stylesheet has claimed a "JS hover-slow" since this section shipped;
     there was never any such JS. This is it, and it needs none: pausing the
     animation leaves every card exactly where it is. `focus-within` covers
     the keyboard, since the cards contain links. */
  .abt-team:hover .abt-team-track.is-looping,
  .abt-team:focus-within .abt-team-track.is-looping{ animation-play-state:paused; }
  .abt-team-set{ display:flex; align-items:stretch; }
  @keyframes abtTeamScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  /* These ids are the targets of `/about/#<slug>`, which every guide byline
     links to and which each coach's Person @id in the JSON-LD above declares.
     They were declared in schema and linked from 47 pages before anything on
     the page actually carried them. */
  .abt-tcard{ scroll-margin-top:5rem; 
    position:relative; flex:0 0 19rem; margin-right:1.2rem; align-self:stretch;
    border:1px solid rgba(var(--abt-accent-rgb),.16); border-radius:1.1rem;
    padding:1.6rem 1.4rem 1.4rem; text-align:center;
    background:linear-gradient(180deg,rgba(13,20,34,.92),rgba(9,14,26,.96));
    box-shadow:0 24px 60px -32px rgba(0,0,0,.7);
  }
  @media (max-width:920px){ .abt-tcard{ flex:0 0 min(82vw,20rem); } }
  @media (prefers-reduced-motion:reduce){
    .abt-team{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
    .abt-team-track, .abt-team-track.is-looping{ animation:none; }
    .abt-team-set + .abt-team-set{ display:none; }
  }
  .abt-tbadge{
    position:absolute; top:1rem; right:1rem;
    font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.14em;
    text-transform:uppercase; color:#cfe6fb;
    padding:.35rem .6rem; border-radius:999px;
    border:1px solid rgba(var(--abt-accent-rgb),.3); background:rgba(10,16,28,.7);
  }
  .abt-tphoto{
    width:clamp(8rem,42%,10rem); aspect-ratio:1; margin:.4rem auto 1.1rem;
    border-radius:50%; overflow:hidden; border:2px solid rgba(var(--abt-accent-rgb),.35);
    box-shadow:0 0 0 6px rgba(var(--abt-accent-rgb),.06), 0 14px 30px rgba(0,0,0,.5);
    background:radial-gradient(circle at 50% 30%, rgba(var(--abt-accent-rgb),.12), rgba(7,12,22,.9));
  }
  .abt-tphoto img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
  .abt-tname{ font-family:var(--font-display); font-weight:900; color:#fff; font-size:1.3rem; margin:0; }
  .abt-trole{ color:var(--abt-accent); font-weight:700; font-size:.82rem; margin:.3rem 0 1.1rem; }
  .abt-tlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
  .abt-tlist li{
    display:flex; align-items:flex-start; gap:.6rem;
    color:#dfe6f2; font-size:.86rem; line-height:1.4;
    padding:.6rem .8rem; border-radius:.6rem;
    background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05);
  }
  .abt-tlist li svg{ width:.95rem; height:.95rem; color:var(--abt-accent); flex:none; margin-top:.12rem; }
  /* Phones (owner 2026-09-14): the moving carousel rendered empty on iPhone (a masked,
     transformed marquee). Below 760px the team is a still, stacked list like the homepage's
     coach cards: photo on the left, name and role on the right. about_impact.js still clones
     the second set for the desktop loop; it is hidden here, and the loop is switched off. */
  @media (max-width:760px){
    .abt-team{ overflow:visible; -webkit-mask-image:none; mask-image:none; padding:0; }
    .abt-team-track,
    .abt-team-track.is-looping{ display:block; width:auto; animation:none; transform:none; }
    .abt-team-set{ flex-direction:column; gap:.75rem; }
    .abt-team-set + .abt-team-set{ display:none; }
    .abt-tcard{
      flex:none; margin:0; display:grid; grid-template-columns:7.2rem minmax(0,1fr); grid-template-rows:1fr 1fr;
      column-gap:1rem; padding:0; text-align:left; overflow:hidden; border-radius:16px; min-height:7.6rem;
    }
    .abt-tbadge,
    .abt-tlist{ display:none; }
    .abt-tphoto{
      grid-column:1; grid-row:1 / span 2; width:100%; height:100%; aspect-ratio:auto;
      margin:0; border-radius:0; border:0; box-shadow:none;
    }
    /* Leo and Matteo's carousel photos are round cut-outs; on phones they get the homepage's
       rectangular photos through <picture>, so every card's photo fills its frame. */
    .abt-tphoto picture{ display:block; width:100%; height:100%; }
    .abt-tphoto img{ object-position:center 20%; }
    .abt-tname{ grid-column:2; grid-row:1; align-self:end; padding-right:.9rem; font-size:1.15rem; }
    .abt-trole{ grid-column:2; grid-row:2; align-self:start; margin:.3rem 0 0; padding-right:.9rem; font-size:.85rem; line-height:1.35; }
  }

  /* ===== Founder ===== */
  .abt-founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:1.4rem; margin-top:2.6rem; align-items:stretch; }
  @media (max-width:880px){ .abt-founder{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto; } }
  .abt-founder-photo{
    position:relative; border-radius:1.2rem; overflow:hidden; min-height:22rem;
    border:1px solid rgba(var(--abt-accent-rgb),.18);
    background:radial-gradient(70% 60% at 50% 18%, rgba(var(--abt-accent-rgb),.16), rgba(7,11,20,.96) 70%);
    display:flex; align-items:flex-end; justify-content:center;
  }
  .abt-founder-photo img{ width:92%; height:auto; max-height:30rem; object-fit:contain; display:block; filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
  .abt-founder-photo .abt-tbadge{ z-index:2; }
  .abt-founder-card{
    border:1px solid rgba(var(--abt-accent-rgb),.18); border-radius:1.2rem; padding:clamp(1.5rem,3vw,2.1rem);
    background:linear-gradient(180deg,rgba(13,20,34,.92),rgba(9,14,26,.96));
  }
  .abt-founder-card h3{ font-family:var(--font-display); font-weight:900; color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin:0; }
  .abt-founder-card .abt-trole{ font-size:.95rem; margin:.35rem 0 1.1rem; }
  .abt-founder-bio{ color:#c4cde0; font-size:.98rem; line-height:1.7; margin:.7rem 0 1.3rem; }
  .abt-statrows{ list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
  .abt-statrows li{
    display:flex; align-items:center; gap:.7rem; color:#e6ecf7; font-size:.92rem; font-weight:500;
    padding:.8rem 1rem; border-radius:.7rem;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  }
  .abt-statrows li b{ font-family:var(--font-display); font-weight:900; color:var(--abt-accent); font-size:1.05rem; }
  .abt-statrows li svg{ width:1.05rem; height:1.05rem; color:var(--abt-accent); flex:none; }

  /* ===== OUR IMPACT — the YouTube channel =====
     Built from media/design_handoff_about_impact. Two deliberate departures
     from that spec, both agreed with the owner before building:

     1. TYPOGRAPHY. The prototype is Archivo + IBM Plex; this is Orbitron +
        Inter, the pairing the rest of the page uses. The spec warned not to
        ship a page with two type systems, and since every other heading on
        About is Orbitron, importing Archivo for one section would have
        created exactly that. Its size and tracking values were tuned for
        Archivo, which is far narrower — so they are NOT copied across. The
        headline uses this page's own `.abt-h` scale instead of the spec's
        clamp(31px,4.7vw,62px)/-.025em, which in Orbitron would run off the
        line.
     2. NUMERALS. The spec wanted Plex Mono so the three figures column-align.
        Without Plex, the figures use Orbitron to match the page's other stat
        rows — but a proportional face makes a count-up animation jitter as
        digit widths change, so `tabular-nums` plus a reserved `min-width`
        holds the row still while it counts. See about_impact.js.

     Colour, layout, motion, copy and every figure follow the spec exactly.
     The YouTube red is scoped to .abt-imp so it cannot leak into the section
     dividers either side, which read --abt-accent-rgb. */
  .abt-imp{
    --yt:#FF0033; --yt-rgb:255,0,51; --imp-green:#2BD17E;
    position:relative; overflow:hidden;
    padding:clamp(70px,8vw,104px) 0 clamp(76px,8vw,108px);
  }
  /* The section brings its own background layers, so it opts OUT of the
     shared .abt-section top divider rather than drawing two rules. */
  .abt-imp::before{ content:none; }
  .abt-imp-glow{ position:absolute; inset:0; pointer-events:none; }
  .abt-imp-glow{
    background:radial-gradient(820px 420px at 50% 62%,rgba(var(--yt-rgb),.11),transparent 66%),
               radial-gradient(700px 340px at 50% 0%,rgba(var(--abt-accent-rgb),.06),transparent 62%);
  }
  .abt-imp-in{ position:relative; z-index:2; }

  /* Reveal. Starts VISIBLE and is hidden by JS only once it has confirmed it
     can hide it — see about_impact.js. A CSS-first opacity:0 leaves the whole
     section invisible for anyone whose JS never runs. */
  .abt-imp-rev.abt-imp-armed{ opacity:0; transform:translateY(24px); }
  .abt-imp-rev{ transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1); }
  .abt-imp-rev.abt-imp-in-view{ opacity:1; transform:none; }
  .abt-imp-d1{ transition-delay:.09s; } .abt-imp-d2{ transition-delay:.18s; } .abt-imp-d3{ transition-delay:.27s; }
  @media (prefers-reduced-motion:reduce){
    .abt-imp-rev,.abt-imp-rev.abt-imp-armed{ opacity:1 !important; transform:none !important; transition:none; }
  }

  .abt-imp-head{ text-align:center; max-width:900px; margin:0 auto; }
  .abt-imp-head .abt-h{ margin:1.1rem 0 0; }
  .abt-imp-head .abt-h span{
    background:none; -webkit-text-fill-color:currentColor; color:var(--abt-accent);
  }
  .abt-imp-head .abt-h{ text-wrap:balance; }
  .abt-imp-head .abt-h span{ display:block; text-wrap:balance; }

  /* ── the story (owner 2026-09-14): first-person prose beside three channel stills ── */
  .abt-imp-story{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(32px,5vw,72px); align-items:center;
    max-width:1040px; margin:clamp(34px,4vw,54px) auto 0;
  }
  .abt-imp-prose p{
    margin:0 0 1.05rem; color:#B8C2D6;
    font-size:clamp(15px,1.15vw,17px); line-height:1.72; text-wrap:pretty;
  }
  .abt-imp-prose p:first-child{ color:#DCE3F0; font-size:clamp(16px,1.3vw,18.5px); }
  .abt-imp-prose p:last-child{ margin-bottom:0; }
  /* The channel name in the story, in the heading's blue (owner 2026-09-14). */
  .abt-imp-prose .abt-lead-link{ color:var(--abt-accent); border-bottom-color:rgba(var(--abt-accent-rgb),.45); }
  .abt-imp-prose .abt-lead-link:hover{ border-bottom-color:var(--abt-accent); }

  .abt-imp-reelwrap{ margin:0; }
  .abt-imp-reel{ list-style:none; margin:0; padding:0; position:relative; aspect-ratio:16/13.2; }
  .abt-imp-still{
    position:absolute; width:72%;
    transition:transform .5s cubic-bezier(.2,.7,.3,1), z-index 0s .25s;
  }
  .abt-imp-still a{
    display:block; position:relative; overflow:hidden; border-radius:12px; text-decoration:none;
    border:1px solid rgba(255,255,255,.14); background:#0b111d;
    box-shadow:0 24px 54px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.35);
  }
  .abt-imp-still a::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,transparent 42%,rgba(5,8,16,.9));
  }
  .abt-imp-still img{
    display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    filter:saturate(.78) brightness(.84); transition:filter .35s;
  }
  .abt-imp-still-yt{
    position:absolute; left:10px; top:10px; z-index:1; width:28px; height:20px; border-radius:6px;
    background:var(--yt); box-shadow:0 4px 12px rgba(var(--yt-rgb),.45);
  }
  .abt-imp-still-yt::after{
    content:""; position:absolute; left:11px; top:6px;
    border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #fff;
  }
  .abt-imp-still-t{
    position:absolute; left:12px; right:12px; bottom:10px; z-index:1;
    font-size:12.5px; font-weight:700; line-height:1.3; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.75);
  }
  .abt-imp-still-1{ left:0; top:2%; transform:rotate(-5deg); z-index:1; }
  .abt-imp-still-2{ right:0; top:27%; transform:rotate(4deg); z-index:2; }
  .abt-imp-still-3{ left:11%; bottom:1%; transform:rotate(-1.5deg); z-index:3; }
  .abt-imp-still:hover,
  .abt-imp-still:focus-within{ transform:rotate(0) translateY(-6px) scale(1.03); z-index:5; transition-delay:0s; }
  .abt-imp-still:hover img,
  .abt-imp-still:focus-within img{ filter:none; }
  .abt-imp-still a:focus-visible{ outline:2px solid var(--abt-accent); outline-offset:3px; }
  .abt-imp-reelcap{
    margin:18px 0 0; text-align:center; font-size:11px; font-weight:700;
    letter-spacing:.2em; text-transform:uppercase; color:#6F7C95;
  }
  @media (prefers-reduced-motion:reduce){ .abt-imp-still,.abt-imp-still img{ transition:none; } }
  /* The eyebrow's dot pulses here, per the spec. The page's own .abt-eyebrow
     already draws the dot, so this only adds the animation. */
  .abt-imp .abt-eyebrow::before{ animation:abt-imp-blip 2.6s ease-in-out infinite; }
  @keyframes abt-imp-blip{ 50%{ opacity:.3; } }
  @media (prefers-reduced-motion:reduce){ .abt-imp .abt-eyebrow::before{ animation:none; } }

  /* ── channel module ── */
  .abt-imp-channel{ position:relative; max-width:1040px; margin:clamp(40px,4.6vw,64px) auto 0; }
  /* The channel's own glow now that no player sits above the box. */
  .abt-imp-channel::before{
    content:""; position:absolute; left:10%; right:10%; top:-10%; bottom:-30%;
    border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,rgba(var(--yt-rgb),.22),transparent 72%);
    filter:blur(48px);
  }
  /* The YouTube tab: attached to the top edge of the channel box, overlapping its top
     border by 1px so the two read as one object. Play icon plus a plain bold wordmark. */
  .abt-imp-ytab{
    position:relative; z-index:5; display:flex; align-items:center; gap:10px;
    width:max-content; margin:0 auto -1px; padding:11px 24px 10px;
    border:1px solid rgba(120,148,210,.20); border-bottom:0; border-top-color:rgba(255,255,255,.14);
    border-radius:14px 14px 0 0;
    background:linear-gradient(180deg,rgba(22,30,49,.97),rgba(17,24,40,.94));
    color:#fff; text-decoration:none;
    font-family:var(--font-sans),Roboto,Arial,sans-serif; font-weight:700; font-size:19px; letter-spacing:-.035em; line-height:1;
  }
  .abt-imp-ytab-logo{
    width:32px; height:auto; flex:none; display:block;
    filter:drop-shadow(0 0 12px rgba(var(--yt-rgb),.5)); transition:transform .2s;
  }
  .abt-imp-ytab:hover{ color:#fff; }
  .abt-imp-ytab:hover .abt-imp-ytab-logo{ transform:scale(1.08); }
  .abt-imp-ytab:focus-visible{ outline:2px solid var(--abt-accent); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){ .abt-imp-ytab-logo{ transition:none; } .abt-imp-ytab:hover .abt-imp-ytab-logo{ transform:none; } }

  /* ── identity bar ── */
  .abt-imp-idbar{
    position:relative; z-index:4; display:flex; align-items:center; flex-wrap:wrap;
    gap:clamp(16px,2.2vw,28px);
    margin:0 clamp(8px,1.6vw,26px);
    padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,26px);
    border:1px solid rgba(120,148,210,.20); border-top-color:rgba(255,255,255,.12);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(17,24,40,.94),rgba(8,13,24,.92));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 30px 70px rgba(0,0,0,.6);
  }
  /* The channel badge, inside the bar (it used to climb out over the removed player). */
  .abt-imp-logo{
    flex:0 0 auto; align-self:center; display:block;
    width:clamp(74px,8vw,104px); aspect-ratio:1;
    border-radius:50%; overflow:hidden;
    box-shadow:0 18px 44px rgba(0,0,0,.66),0 0 0 4px rgba(8,13,24,.95),
               0 0 34px rgba(var(--yt-rgb),.24);
    transition:transform .25s,box-shadow .25s;
  }
  .abt-imp-logo:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 22px 52px rgba(0,0,0,.7),0 0 0 4px rgba(8,13,24,.95),
               0 0 46px rgba(var(--yt-rgb),.42);
  }
  .abt-imp-logo img{ width:100%; height:100%; display:block; object-fit:cover; }
  @media (prefers-reduced-motion:reduce){ .abt-imp-logo{ transition:none; } .abt-imp-logo:hover{ transform:none; } }

  .abt-imp-idtext{ flex:1 1 240px; min-width:0; }
  .abt-imp-idtext b{
    display:block; font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(17px,1.7vw,22px); line-height:1.14; overflow-wrap:anywhere;
  }
  .abt-imp-handle{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin-top:6px; font-size:13.5px; color:#7C8AA4;
  }
  .abt-imp-handle em{ font-style:normal; font-weight:600; color:#B8C2D6; }
  .abt-imp-sep{ color:#4A5570; }
  .abt-imp-free{
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.13em;
    color:#8ce0b4; border:1px solid rgba(43,209,126,.3); background:rgba(43,209,126,.07);
    border-radius:999px; padding:4px 9px; white-space:nowrap;
  }
  .abt-imp-free i{ width:4px; height:4px; border-radius:50%; background:var(--imp-green); box-shadow:0 0 8px var(--imp-green); }

  .abt-imp-stats{ flex:0 0 auto; display:flex; gap:clamp(16px,2.4vw,34px); }
  .abt-imp-stats b{
    display:block; font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(18px,2vw,25px); line-height:1; letter-spacing:-.01em;
    /* Holds the row still while the figures count up: tabular figures where
       the face has them, and a reserved box so a narrower digit cannot
       collapse the column mid-tween. */
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
    min-width:4.4ch;
  }
  .abt-imp-stats span{
    display:block; margin-top:5px; font-family:var(--font-display); font-weight:700;
    font-size:9.5px; letter-spacing:.11em; color:#7C8AA4;
  }
  .abt-imp-sub{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-display); font-weight:900; font-size:11.5px; letter-spacing:.06em;
    color:#fff; padding:15px 24px; border-radius:11px;
    background:linear-gradient(180deg,#ff2244,#c9001c);
    box-shadow:0 16px 40px rgba(var(--yt-rgb),.3),inset 0 1px 0 rgba(255,255,255,.24);
    transition:filter .2s,transform .2s;
  }
  .abt-imp-sub:hover{ color:#fff; filter:brightness(1.1); transform:translateY(-1px); }
  .abt-imp-sub svg{ width:15px; height:15px; fill:currentColor; flex:none; }
  @media (prefers-reduced-motion:reduce){ .abt-imp-sub{ transition:none; } .abt-imp-sub:hover{ transform:none; } }

  .abt-imp-covers{ margin:26px auto 0; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  /* `span, a` on BOTH rules, not just the first. Four of these chips became
     links to the guide that covers them; styling only the span would have left
     those four unstyled and dotless while their neighbours kept the pill. */
  .abt-imp-covers span,
  .abt-imp-covers a{
    font-size:12.5px; font-weight:500; color:#7C8AA4;
    border:1px solid rgba(120,148,210,.10); border-radius:999px;
    padding:7px 14px; background:rgba(10,19,34,.5);
  }
  .abt-imp-covers span::before,
  .abt-imp-covers a::before{
    content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
    background:var(--yt); margin-right:8px; vertical-align:middle;
  }
  /* The linked chips read as links: brighter, and they respond. The unlinked
     ones stay flat, which is the honest signal — there is no guide behind
     "Racecraft" yet, so it should not look clickable. */
  .abt-imp-covers a{ color:#A9B6CC; text-decoration:none; border-color:rgba(120,148,210,.22); transition:color .15s, border-color .15s; }
  .abt-imp-covers a:hover{ color:#E6ECF7; border-color:rgba(120,148,210,.45); }

  @media (max-width:1040px){ .abt-imp-sub{ flex:1 1 100%; justify-content:center; } }
  @media (max-width:860px){
    .abt-imp-idbar{ margin:0; gap:14px; justify-content:center; text-align:center; }
    .abt-imp-logo{ align-self:center; }
    .abt-imp-idtext{ flex:1 1 100%; }
    .abt-imp-handle{ justify-content:center; }
    .abt-imp-sep{ display:none; }
    .abt-imp-stats{ flex:1 1 100%; justify-content:space-around; padding-top:6px; border-top:1px solid rgba(120,148,210,.10); }
  }
  @media (max-width:860px){
    .abt-imp-story{ grid-template-columns:minmax(0,1fr); gap:26px; }
    .abt-imp-reel{
      aspect-ratio:auto; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
      margin:0 -1.1rem; padding:6px 1.1rem 12px; scrollbar-width:none;
    }
    .abt-imp-reel::-webkit-scrollbar{ display:none; }
    .abt-imp-still{
      position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto;
      flex:0 0 min(78%,320px); transform:none; scroll-snap-align:start;
    }
    .abt-imp-still:hover,
    .abt-imp-still:focus-within{ transform:none; }
    .abt-imp-still img{ filter:none; }
    .abt-imp-reelcap{ margin-top:8px; }
  }

  /* ===== Why I built the Academy (media/why-i-built-handover, owner 2026-09-14) =====
     Palette and type verbatim from the handover, scoped to the section so none of it
     leaks into the page. Oxanium first, the site's display face as the fallback. */
  .abt-wib{
    --disp:'Oxanium',var(--font-display),system-ui,sans-serif;
    --blue:#5BC3F9; --blue-rgb:91,195,249; --bg:#050810; --bg-2:#070c17;
    --line-2:rgba(120,148,210,.20); --line-3:rgba(120,148,210,.34);
    --dim:#B8C2D6; --muted:#7C8AA4;
    position:relative; overflow-x:clip; padding:clamp(30px,3.6vw,58px) 0;
    background:radial-gradient(ellipse 58% 62% at 18% 44%,rgba(var(--blue-rgb),.09),transparent 68%),var(--bg);
    color:#F0F3F8;
  }
  .abt-wib-in{ position:relative; z-index:2; max-width:82rem; margin:0 auto; padding:0 clamp(16px,3vw,40px); }
  .abt-wib-duo{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(18px,3.2vw,54px); align-items:center; }
  .abt-wib-lbl{ font-family:var(--disp); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.1em; line-height:1.4; }

  .abt-wib-shot{ position:relative; margin:0; }
  .abt-wib-fr{
    position:relative; border-radius:16px; overflow:hidden; background:var(--bg-2);
    border:1px solid var(--line-2); box-shadow:0 60px 120px -60px #000;
  }
  .abt-wib-fr img{
    display:block; width:100%; height:auto; aspect-ratio:709/945; object-fit:cover; object-position:52% 40%;
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
  }
  .abt-wib-shot:hover .abt-wib-fr img{ transform:scale(1.028); }
  .abt-wib-fr::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(178deg,transparent 52%,rgba(5,8,16,.78) 92%),linear-gradient(96deg,rgba(5,8,16,.34),transparent 46%);
  }
  .abt-wib-edge{ position:absolute; inset:0; border-radius:16px; pointer-events:none; z-index:3; box-shadow:inset 0 0 0 1px rgba(var(--blue-rgb),.14); }
  .abt-wib-plate{
    position:absolute; z-index:4; left:clamp(14px,1.5vw,22px); right:clamp(14px,1.5vw,22px); bottom:clamp(14px,1.5vw,22px);
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  }
  .abt-wib-nm{ font-family:var(--disp); font-weight:800; font-size:clamp(16px,1.5vw,21px); letter-spacing:-.01em; line-height:1.15; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.8); }
  .abt-wib-rl{ margin-top:4px; display:block; color:var(--blue); }
  .abt-wib-yr{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); white-space:nowrap; padding-bottom:3px; }
  .abt-wib-tick{ position:absolute; z-index:4; top:0; left:clamp(14px,1.5vw,22px); width:2px; height:clamp(34px,4vw,58px); background:linear-gradient(180deg,var(--blue),transparent); }

  .abt-wib-say{ min-width:0; }
  .abt-wib-eye{ display:inline-flex; align-items:center; gap:9px; color:var(--blue); }
  .abt-wib-eye i{ width:22px; height:1px; background:currentColor; }
  .abt-wib-say h2{
    margin:clamp(12px,1.3vw,18px) 0 0; font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
    text-wrap:balance; font-size:clamp(30px,4.1vw,58px); line-height:1.01; color:#fff;
  }
  .abt-wib-say h2 span{ color:var(--blue); }
  .abt-wib-rule{ width:clamp(54px,6vw,86px); height:2px; margin:clamp(16px,1.8vw,26px) 0; background:linear-gradient(90deg,var(--blue),rgba(var(--blue-rgb),0)); }
  .abt-wib-say p{ margin:0; font-size:clamp(15px,1.28vw,19.5px); line-height:1.66; color:var(--dim); max-width:50ch; text-wrap:pretty; }
  .abt-wib-say p b{ color:#fff; font-weight:600; }
  .abt-wib-sig{
    display:flex; align-items:center; gap:clamp(12px,1.3vw,18px);
    margin-top:clamp(20px,2.2vw,32px); padding-top:clamp(16px,1.8vw,24px); border-top:1px solid var(--line-2);
  }
  .abt-wib-dash{ flex:0 0 auto; width:clamp(20px,2.4vw,34px); height:1px; background:var(--line-3); }
  /* The signature (owner 2026-09-14), in the system cursive stack the old founder section used:
     no webfont, so the exact hand varies by device. A slight rotation and glow so it reads as ink. */
  .abt-wib-sign{
    display:block; font-family:'Segoe Script','Bradley Hand','Snell Roundhand','Brush Script MT',cursive;
    font-weight:400; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:0; color:#e8f1fb;
    transform:rotate(-3deg); transform-origin:left center; text-shadow:0 0 18px rgba(var(--blue-rgb),.22);
  }
  .abt-wib-who{ font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.28vw,18px); letter-spacing:-.008em; color:#fff; }
  .abt-wib-who em{ font-style:normal; display:block; margin-top:3px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

  @media (max-width:900px){
    .abt-wib-duo{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,28px); }
    .abt-wib-shot{ max-width:min(420px,100%); }
    .abt-wib-fr img{ aspect-ratio:4/3; object-position:52% 34%; }
  }
  @media (prefers-reduced-motion:reduce){
    .abt-wib-fr img{ transition:none; }
    .abt-wib-shot:hover .abt-wib-fr img{ transform:none; }
  }

  /* ===== iRacing results (media/handover-iracing, owner 2026-09-15) =====
     Palette, type and layout verbatim from the handover, scoped to .abt-irr so nothing
     leaks. Display Oxanium, eyebrows Orbitron, body Inter, all self-hosted. The handover's
     h1 is an h2 here: the page's one h1 is the hero. overflow:clip, not hidden, so the
     section never becomes a scroll container (the page convention, see .abt-wib). */
  .abt-irr{
    --disp:'Oxanium',var(--font-display),system-ui,sans-serif; --eyebrow:'Orbitron',sans-serif; --body:'Inter',system-ui,sans-serif;
    --blue:#5BC3F9; --blue-rgb:91,195,249; --blue-dim:#2e7fb0; --bg:#050810;
    --line-2:rgba(120,148,210,.20); --line-3:rgba(120,148,210,.34);
    --text:#F0F3F8; --dim:#B8C2D6; --muted:#7C8AA4;
    --rest:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));
    position:relative; overflow:clip; isolation:isolate; background:var(--bg); color:var(--text); font-family:var(--body);
  }
  /* The blue tint is the filter; swap the photo and the tint holds. */
  .abt-irr-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
    filter:sepia(1) hue-rotate(185deg) saturate(2.2) brightness(.62); }
  .abt-irr::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,16,.72) 0%,rgba(5,8,16,.86) 45%,rgba(5,8,16,.96) 100%),
      radial-gradient(ellipse 50% 60% at 10% 20%,rgba(var(--blue-rgb),.12),transparent 70%); }
  .abt-irr-in{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:48px 48px 32px; }

  .abt-irr-top{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start; }
  .abt-irr-eye{ display:flex; align-items:center; gap:14px; margin:0; font-family:var(--eyebrow); font-weight:700; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); }
  .abt-irr-eye::before{ content:""; width:34px; height:1.5px; background:var(--blue); }
  .abt-irr h2{ margin:22px 0 0; font-family:var(--disp); font-weight:800; font-size:44px; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; color:#fff; }
  .abt-irr h2 em{ font-style:normal; color:var(--blue); }
  .abt-irr-lede{ margin:18px 0 0; font-size:16px; line-height:1.55; color:var(--dim); max-width:58ch; text-wrap:pretty; }
  .abt-irr-lic{ display:block; width:340px; max-width:100%; height:272px; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); }

  .abt-irr-stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:30px; }
  .abt-irr-card{ position:relative; background:var(--rest); border:1px solid var(--line-2); border-radius:12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; }
  /* HOVER (owner 2026-09-15: "a nice effect"). The card lifts a few px, its border and
     a soft glow pick up the section blue, a light bar draws across the top edge from the
     middle, and the icon turns blue. On the charts the bars brighten and the rating
     marker goes solid. Inset from the corners so the 12px radius never cuts the bar;
     no overflow:hidden, which would clip the chart's marker labels. */
  .abt-irr-card::after{ content:""; position:absolute; top:-1px; left:18px; right:18px; height:2px; border-radius:2px; pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--blue),transparent); transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .abt-irr-card:hover{ transform:translateY(-4px); border-color:rgba(var(--blue-rgb),.42);
    background:linear-gradient(180deg,rgba(16,32,56,.78),rgba(7,14,26,.84));
    box-shadow:0 22px 44px -22px rgba(var(--blue-rgb),.45), 0 0 0 1px rgba(var(--blue-rgb),.08); }
  .abt-irr-card:hover::after{ transform:scaleX(1); }
  .abt-irr-card svg{ transition:color .35s ease; }
  .abt-irr-card:hover .abt-irr-st > svg,
  .abt-irr-st:hover > svg,
  .abt-irr-card:hover .abt-irr-chh svg{ color:var(--blue); }
  .abt-irr-plot .b{ transition:filter .35s ease; }
  .abt-irr-card:hover .abt-irr-plot .b{ filter:brightness(1.25) saturate(1.1); }
  .abt-irr-card:hover .abt-irr-plot .m{ stroke-dasharray:none; }
  .abt-irr-card:hover .abt-irr-mark{ color:var(--blue); }
  @media (prefers-reduced-motion:reduce){
    .abt-irr-card,.abt-irr-card::after,.abt-irr-plot .b{ transition:none; }
    .abt-irr-card:hover{ transform:none; }
  }
  .abt-irr-st{ position:relative; padding:20px 20px 18px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:start; }
  .abt-irr-n{ display:block; font-family:var(--disp); font-weight:800; font-size:40px; line-height:1; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
  .abt-irr-n small{ font-size:26px; letter-spacing:0; }
  /* "PERCENTILE" and the charts' "TOP x%" use the founder section's label face exactly
     (.abt-wib-lbl: Oxanium 700, 13px, uppercase, .1em), not the handover's Orbitron
     (owner 2026-09-15). */
  .abt-irr-k{ display:block; margin-top:8px; font-family:var(--disp); font-weight:700; font-size:13px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); }
  .abt-irr-c{ grid-column:1/-1; margin-top:10px; font-size:13px; color:var(--dim); }
  .abt-irr-c.abt-irr-big{ grid-column:auto; margin-top:4px; font-size:15px; color:var(--text); }
  .abt-irr-st > svg{ width:30px; height:30px; margin-top:4px; color:var(--muted); }

  .abt-irr-grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px; gap:14px; margin-top:14px; }
  /* A column, plot pushed down: where one chart's title wraps and the other's does not
     (narrow desktops, as in the handover), the two plots and footers still line up. */
  .abt-irr-ch{ padding:16px 18px 14px; min-width:0; display:flex; flex-direction:column; }
  .abt-irr-ch .abt-irr-plot{ margin-top:auto; padding-top:10px; }
  /* .12em, down from the handover's .18em: the TOP figure grew to the founder label's
     13px, and at 1440 "FORMULA CAR IRATING DISTRIBUTION" went to two lines. */
  .abt-irr-chh{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--eyebrow); font-weight:700; font-size:10px; letter-spacing:.12em; color:var(--text); }
  .abt-irr-chh svg{ flex:0 0 22px; width:22px; height:22px; color:var(--dim); }
  .abt-irr-chh b{ margin-left:auto; font-family:var(--disp); font-weight:700; font-size:13px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); white-space:nowrap; }
  .abt-irr-plot{ display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }
  .abt-irr-plot .g{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3; }
  .abt-irr-plot .ax{ stroke:var(--line-3); stroke-width:1; }
  .abt-irr-plot .t{ fill:var(--muted); font:500 8.5px var(--body); }
  .abt-irr-plot .m{ stroke:var(--blue); stroke-width:1.2; stroke-dasharray:3 3; }
  .abt-irr-plot .d{ fill:var(--blue); stroke:var(--bg); stroke-width:2; }
  .abt-irr-plot .mv{ fill:#fff; font:700 12px var(--disp); }
  .abt-irr-plot .mp{ fill:var(--blue); font:600 8.5px var(--body); }
  .abt-irr-f{ margin:8px 0 0; font-size:11px; color:var(--muted); }

  .abt-irr-q{ margin:0; padding:20px 22px; display:flex; flex-direction:column; }
  .abt-irr-mark{ font-family:var(--disp); font-weight:800; font-size:44px; line-height:.6; color:var(--blue-dim); opacity:.9; }
  .abt-irr-q p{ margin:14px 0 0; font-size:15.5px; line-height:1.5; font-style:italic; color:var(--text); text-wrap:pretty; }
  .abt-irr-by{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:12px; font-family:var(--eyebrow); font-weight:700; font-size:9.5px; letter-spacing:.3em; font-style:normal; color:var(--dim); }
  .abt-irr-by::before{ content:""; width:34px; height:1.5px; background:var(--blue); }

  .abt-irr-foot{ display:flex; align-items:center; gap:20px; margin-top:30px; padding-top:20px; border-top:1px solid var(--line-2); }
  .abt-irr-logo{ display:block; height:30px; width:auto; }
  .abt-irr-sep{ width:1px; height:26px; background:var(--line-3); }
  .abt-irr-tg{ font-family:var(--eyebrow); font-weight:700; font-size:9.5px; letter-spacing:.3em; color:var(--muted); }

  @media (max-width:1180px){
    .abt-irr-top{ grid-template-columns:minmax(0,1fr) 300px; }
    .abt-irr-lic{ width:300px; height:240px; }
    .abt-irr-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .abt-irr-grid2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .abt-irr-q{ grid-column:1/-1; }
  }
  @media (max-width:820px){
    .abt-irr-in{ padding:36px 22px 26px; }
    .abt-irr-top{ grid-template-columns:minmax(0,1fr); }
    .abt-irr-lic{ width:280px; height:224px; margin:0 auto; }
    .abt-irr h2{ font-size:34px; }
    .abt-irr-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .abt-irr-grid2{ grid-template-columns:minmax(0,1fr); }
    .abt-irr-foot{ flex-wrap:wrap; }
    /* With the note gone the tagline wraps under the logo on phones, which left the
       vertical separator dangling beside the logo with nothing after it. */
    .abt-irr-sep{ display:none; }
  }
  /* Not in the handover (it stops at 820): a 360px phone cannot fit 40px numerals
     two-up or the tracked chart header on one line. */
  @media (max-width:420px){
    .abt-irr h2{ font-size:30px; }
    .abt-irr-st{ padding:16px 14px 14px; }
    .abt-irr-n{ font-size:32px; }
    .abt-irr-n small{ font-size:21px; }
    .abt-irr-chh{ flex-wrap:wrap; letter-spacing:.12em; }
    .abt-irr-tg{ letter-spacing:.2em; }
  }

  /* ===== From driver to coach (media/handover-coaching, owner 2026-09-15) =====
     The coaching track record, between "Where it started" and "The team". Palette, type
     and layout verbatim from the handover, scoped to .abt-cr; same background recipe as
     the iRacing results section so the two read as a pair. h1 -> h2 (the hero owns the
     page's h1). overflow:clip, not hidden (page convention). The cards take the same
     hover as the iRacing cards, so the neighbouring sections behave alike. */
  .abt-cr{
    --disp:'Oxanium',var(--font-display),system-ui,sans-serif; --eyebrow:'Orbitron',sans-serif; --body:'Inter',system-ui,sans-serif;
    --blue:#5BC3F9; --blue-rgb:91,195,249; --gold:#F5B041; --bg:#050810; --panel:#0A1322;
    --line-2:rgba(120,148,210,.20); --line-3:rgba(120,148,210,.34);
    --text:#F0F3F8; --dim:#B8C2D6; --muted:#7C8AA4;
    --rest:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));
    --raised:linear-gradient(180deg,rgba(16,32,56,.82),rgba(7,14,26,.86));
    position:relative; overflow:clip; isolation:isolate; background:var(--bg); color:var(--text); font-family:var(--body);
  }
  .abt-cr-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%;
    filter:sepia(1) hue-rotate(185deg) saturate(2.2) brightness(.62); }
  .abt-cr::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,16,.72) 0%,rgba(5,8,16,.86) 45%,rgba(5,8,16,.96) 100%),
      radial-gradient(ellipse 50% 60% at 10% 20%,rgba(var(--blue-rgb),.12),transparent 70%); }
  .abt-cr-in{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:56px 48px 44px; }

  .abt-cr-top{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:56px; align-items:stretch; }
  .abt-cr-lead{ display:flex; flex-direction:column; min-width:0; }
  .abt-cr-eye{ display:flex; align-items:center; gap:14px; margin:0; font-family:var(--eyebrow); font-weight:700; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); }
  .abt-cr-eye::before{ content:""; width:34px; height:1.5px; background:var(--blue); }
  .abt-cr h2{ margin:22px 0 0; font-family:var(--disp); font-weight:800; font-size:44px; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; color:#fff; }
  .abt-cr h2 em{ font-style:normal; color:var(--blue); }
  .abt-cr-lede{ margin:18px 0 0; font-size:16px; line-height:1.6; color:var(--dim); max-width:54ch; text-wrap:pretty; }
  .abt-cr-lede b{ color:#fff; font-weight:600; }
  /* "real-life" never splits at its hyphen (owner: "real life its important"; at 1440 it
     broke into "real-" / "life F4"). A span rather than U+2011, so copy and search keep a
     plain hyphen. */
  .abt-cr-nw{ white-space:nowrap; }

  .abt-cr-stars{ color:var(--gold); font-size:17px; letter-spacing:2px; line-height:1; }
  .abt-cr-revs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:auto; padding-top:22px; }
  .abt-cr-rv{ margin:0; padding:12px 16px; display:flex; flex-direction:column; }
  .abt-cr-rv .abt-cr-stars{ font-size:11px; letter-spacing:1.5px; }
  .abt-cr-rv p{ margin:8px 0 0; font-size:13.5px; line-height:1.45; font-style:italic; color:var(--text); text-wrap:pretty; }
  .abt-cr-who{ margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12px; font-style:normal; color:var(--muted); }
  .abt-cr-who b{ font-weight:600; color:var(--dim); }
  .abt-cr-av{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--panel); border:1px solid var(--line-3); display:grid; place-items:center;
    font-family:var(--disp); font-weight:700; font-size:11px; color:var(--blue); }

  .abt-cr-card{ position:relative; background:var(--rest); border:1px solid var(--line-2); border-radius:12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
  .abt-cr-rc{ align-self:start; padding:24px 26px; border-radius:14px; border-color:var(--line-3); background:var(--raised);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 80px rgba(0,0,0,.45); }
  .abt-cr-card::after{ content:""; position:absolute; top:-1px; left:18px; right:18px; height:2px; border-radius:2px; pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--blue),transparent); transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .abt-cr-card:hover{ transform:translateY(-4px); border-color:rgba(var(--blue-rgb),.42); box-shadow:0 22px 44px -22px rgba(var(--blue-rgb),.45), 0 0 0 1px rgba(var(--blue-rgb),.08); }
  .abt-cr-rc:hover{ box-shadow:0 30px 80px rgba(0,0,0,.45), 0 22px 44px -22px rgba(var(--blue-rgb),.45); }
  .abt-cr-card:hover::after{ transform:scaleX(1); }

  .abt-cr-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .abt-cr-fv{ display:inline-flex; font-family:var(--body); font-weight:800; font-size:22px; letter-spacing:-.045em; line-height:1; color:#fff; text-decoration:none; }
  .abt-cr-fv:hover{ color:#fff; }
  .abt-cr-fv i{ font-style:normal; color:#1DBF73; }
  .abt-cr-pill{ font-family:var(--eyebrow); font-weight:700; font-size:9px; letter-spacing:.22em; color:var(--blue); white-space:nowrap;
    border:1px solid rgba(var(--blue-rgb),.45); background:rgba(var(--blue-rgb),.1); border-radius:999px; padding:6px 10px; }
  .abt-cr-sub{ margin:6px 0 0; font-size:12px; color:var(--muted); }
  .abt-cr-score{ display:flex; align-items:center; gap:18px; margin-top:22px; }
  .abt-cr-n{ font-family:var(--disp); font-weight:800; font-size:64px; line-height:.9; letter-spacing:-.04em; color:#fff; }
  .abt-cr-c{ margin-top:7px; font-size:13px; color:var(--dim); }
  .abt-cr-dist{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px; }
  .abt-cr-dist li{ display:grid; grid-template-columns:46px 1fr 26px; gap:10px; align-items:center; font-size:12px; color:var(--muted); }
  .abt-cr-bar{ display:block; height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
  .abt-cr-bar i{ display:block; height:100%; width:0; border-radius:3px; background:var(--blue); }
  .abt-cr-bar.abt-cr-full i{ width:100%; }
  .abt-cr-dist b{ text-align:right; font-weight:600; color:var(--dim); }
  .abt-cr-brk{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2); }
  .abt-cr-brk b{ display:block; font-family:var(--disp); font-weight:700; font-size:21px; line-height:1; color:#fff; }
  .abt-cr-brk span{ display:block; margin-top:5px; font-size:11px; line-height:1.3; color:var(--muted); }
  .abt-cr-btn{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; height:44px; border-radius:10px;
    border:1px solid rgba(var(--blue-rgb),.5); background:rgba(var(--blue-rgb),.12); color:var(--blue); text-decoration:none;
    font-family:var(--disp); font-weight:700; font-size:14.5px; letter-spacing:.01em; transition:background .2s,border-color .2s,color .2s,transform .2s; }
  .abt-cr-btn:hover{ background:rgba(var(--blue-rgb),.22); border-color:var(--blue); color:#fff; transform:translateY(-1px); }

  .abt-cr-tl{ list-style:none; margin:40px 0 0; padding:30px 0 0; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
  .abt-cr-tl::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg,var(--line-3) 0%,var(--line-3) 60%,rgba(var(--blue-rgb),.7) 100%); }
  .abt-cr-nd{ position:relative; }
  .abt-cr-nd::before{ content:""; position:absolute; left:0; top:-35px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line-3); }
  .abt-cr-nd.abt-cr-on::before{ background:var(--blue); border-color:var(--blue); box-shadow:0 0 14px var(--blue); }
  .abt-cr-k{ display:block; font-family:var(--eyebrow); font-weight:700; font-size:9.5px; letter-spacing:.28em; color:var(--muted); }
  .abt-cr-on .abt-cr-k{ color:var(--blue); }
  .abt-cr-nd h3{ margin:10px 0 0; font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em; color:#fff; }
  .abt-cr-nd p{ margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--dim); max-width:36ch; text-wrap:pretty; }
  .abt-cr-nd p b{ color:#fff; font-weight:600; }

  /* 1140, not the handover's 1100: between 1101 and 1139 the left column is too narrow for
     the lede, and the review cards overhung the rating card by 19px (measured). */
  @media (max-width:1140px){
    .abt-cr-top{ grid-template-columns:minmax(0,1fr); gap:36px; }
    .abt-cr-rc{ max-width:480px; }
  }
  @media (max-width:820px){
    .abt-cr-in{ padding:40px 22px 36px; }
    .abt-cr h2{ font-size:34px; }
    .abt-cr-revs{ grid-template-columns:minmax(0,1fr); }
    .abt-cr-tl{ grid-template-columns:minmax(0,1fr); gap:22px; padding-top:0; }
    .abt-cr-tl::before,.abt-cr-nd::before{ display:none; }
    .abt-cr-nd{ border-left:1px solid var(--line-2); padding-left:16px; }
    .abt-cr-nd.abt-cr-on{ border-color:var(--blue); }
  }
  /* Not in the handover (it stops at 820): a 360px phone. */
  @media (max-width:420px){
    .abt-cr h2{ font-size:30px; }
    .abt-cr-rc{ padding:20px 18px; }
    .abt-cr-n{ font-size:54px; }
    .abt-cr-brk b{ font-size:18px; }
  }
  @media (prefers-reduced-motion:reduce){
    .abt-cr-card,.abt-cr-card::after,.abt-cr-btn{ transition:none; }
    .abt-cr-card:hover,.abt-cr-btn:hover{ transform:none; }
  }

  /* ===== Final CTA ===== */
  .abt-cta-block{
    margin:clamp(4rem,9vw,6rem) auto 3rem; padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem);
    border-radius:1.25rem; text-align:center; max-width:56rem;
    border:1px solid rgba(var(--abt-accent-rgb),.25);
    background:radial-gradient(60rem 24rem at 50% -10rem, rgba(var(--abt-accent-rgb),.14), transparent 62%),
               linear-gradient(180deg,rgba(13,17,28,.94),rgba(7,10,18,.97));
    box-shadow:0 32px 80px -32px rgba(0,0,0,.7);
  }
  .abt-cta-block .abt-lead{ margin:.9rem auto 1.7rem; max-width:38rem; }
  .abt-cta-block .abt-cta-row{ margin-top:0; }

  .landing-footer{ position:relative; z-index:1; margin-top:0; }