:root{
  --bg:#E4E4E1;
  --card:#FFFFFF;
  --ink:#000000;
  --body:#3D3D3B;
  --muted:#6E6E6B;
  --orange:#FFA400;
  --line:rgba(0,0,0,.12);
  --display:"Anton",Impact,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--text);background:var(--bg);color:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
section{padding:54px 0}

h2{
  font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(32px,7.5vw,52px);line-height:1;letter-spacing:.005em;
  text-transform:uppercase;
}
h3{font-family:var(--display);font-weight:400;color:var(--ink);font-size:23px;line-height:1.1;text-transform:uppercase}
.lede{color:var(--muted);max-width:60ch;margin-top:12px;font-size:16.5px}
.rule{width:64px;height:5px;background:var(--orange);margin-bottom:18px}

/* Hero */
header{padding:52px 0 40px}
.eyebrow{font-size:15px;color:var(--muted);margin-bottom:16px}
h1{
  font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(38px,9.6vw,78px);line-height:.94;text-transform:uppercase;
  max-width:14ch;position:relative;
}
h1::after{content:"";position:absolute;right:-4px;top:6px;bottom:6px;width:9px;background:var(--orange);display:none}
@media(min-width:760px){h1::after{display:block;right:auto;margin-left:16px;position:static;height:auto}}
.hero-bar{display:flex;gap:16px;align-items:stretch}
.hero-bar .accent{width:9px;background:var(--orange);flex:none}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
nav a{
  font-size:14px;font-weight:600;text-decoration:none;color:#fff;background:var(--ink);
  padding:9px 17px;border-radius:99px;transition:background .18s,color .18s;
}
nav a:hover{background:var(--orange);color:var(--ink)}
nav a.alt{background:var(--orange);color:var(--ink)}
nav a.alt:hover{background:var(--ink);color:#fff}
.res.marker{border-left:5px solid var(--orange)}

/* Pills + labels */
.tag{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:4px 12px;border-radius:4px}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* Roadmap */

/* Sessions */
details.session{background:var(--card);border-radius:var(--r);margin-bottom:13px;overflow:hidden}
summary{padding:20px 22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.s-label{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.chev{flex:none;width:11px;height:11px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
details[open] .chev{transform:rotate(-135deg)}
.body{padding:4px 22px 24px}
.body h5{font-size:14px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;margin:24px 0 10px;display:flex;align-items:center;gap:8px}
.body h5::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.body h5:first-child{margin-top:8px}
.body ul{list-style:none;display:grid;gap:8px}
.body li{padding-left:18px;position:relative;font-size:15.5px;color:var(--body)}
.body li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--orange)}
.body li b{color:var(--ink);font-weight:700}

.btn-row{margin:0}
.btn{
  font-family:var(--text);font-size:14.5px;font-weight:700;padding:12px 24px;border:0;border-radius:99px;
  background:var(--ink);color:#fff;text-decoration:none;display:inline-block;margin-top:20px;transition:background .18s,color .18s;
}
.btn:hover{background:var(--orange);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Video slots */
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;background:#CFCFCC;display:block;padding:0;border:0;cursor:pointer;font-family:var(--text)}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video .play span{width:56px;height:56px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
.video .play span::after{content:"";border-left:15px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video iframe{width:100%;height:100%;border:0;display:block}
.video:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.slot{
  aspect-ratio:16/9;width:100%;border-radius:12px;border:2px dashed #B9B9B5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:20px;
}
.slot .t{font-family:var(--display);font-size:19px;text-transform:uppercase;color:var(--ink)}
.slot .s{font-size:14px;color:var(--muted);max-width:34ch}

/* What is in here */
/* What is in here. Nine near-identical cards read as a wall, so each one
   carries an icon: it gives the eye something to land on and makes the list
   scannable rather than something to read through. */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:26px}
.incl-item{background:var(--card);border-radius:var(--r);padding:22px 22px 24px}
.incl-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
  background:var(--ink);color:var(--orange);margin-bottom:14px}
.incl-ico svg{width:22px;height:22px}
.incl-item:nth-child(3n+2) .incl-ico{background:var(--orange);color:var(--ink)}
.incl-item h4{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:7px}
.incl-item p{font-size:14.5px;color:var(--muted);margin:0}
@media (max-width:560px){
  .incl{gap:12px}
  .incl-item{padding:18px 18px 20px;display:grid;grid-template-columns:42px 1fr;column-gap:14px}
  .incl-ico{margin-bottom:0;grid-row:span 2}
  .incl-item h4{font-size:15.5px;margin-bottom:4px}
  .incl-item p{font-size:13.5px}
}

/* Home dashboard. One lead tile into the classroom, two smaller ones for the
   things people ask about that sit outside the programme. */
.dash{padding:30px 0 4px}
.dash-hi{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.dash h1{font-size:clamp(28px,3.7vw,40px);max-width:20ch}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.tile{grid-column:span 1;display:grid;grid-template-columns:1.15fr .85fr;background:var(--card);
  border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.13)}
.tile-lead{grid-column:1/-1}
.tile-txt{padding:26px 26px 28px;display:flex;flex-direction:column;align-items:flex-start}
.tile-kicker{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.tile h2{font-size:clamp(21px,2.4vw,29px);margin-bottom:9px}
.tile-txt p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.tile-btn{margin-top:auto;display:inline-block;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;
  padding:10px 20px;border-radius:99px}
.tile:hover .tile-btn{background:var(--orange);color:var(--ink)}
.tile-img{position:relative;min-height:170px;background:#DBDBD8}
.tile-img.shopimg{background:#EFEFEC}
.tile-img.shopimg img{object-fit:contain;padding:18px}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-lead .tile-img{min-height:270px}
@media (max-width:820px){
  .tiles{grid-template-columns:1fr}
  .tile{grid-template-columns:1fr}
  .tile-img{min-height:190px;order:-1}
  .tile-lead .tile-img{min-height:210px}
}

/* The journey. Six parts, not eighteen modules: the home page works at a
   different altitude from the classroom, or it is just the classroom again in
   miniature. Left to right, as one band, so it reads as a progression and
   costs a fraction of the screen a stacked list would. Below 860px it becomes
   a swipeable row rather than a tall column, for the same reason. */
.jtrack{list-style:none;margin:34px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.jtrack::before{content:"";position:absolute;left:8.33%;right:8.33%;top:21px;height:2px;background:var(--line)}
.jstop{position:relative;text-align:center;padding:0 2px}
.jnum{position:relative;z-index:1;display:block;width:44px;height:44px;margin:0 auto 13px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--display);font-size:20px;line-height:44px;text-align:center;
  box-shadow:0 0 0 6px var(--bg)}
.jstop:nth-child(3n+2) .jnum{background:var(--orange);color:var(--ink)}
.jmeta{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:5px}
.jstop h3{font-size:15.5px;line-height:1.15;margin-bottom:6px;text-transform:none;font-family:var(--text);font-weight:700}
.jout{font-size:13px;color:var(--muted);margin:0;line-height:1.4}
.jfoot{margin-top:30px}

/* Small screens show all six stages at once. An earlier version scrolled
   sideways, but two cards filled the width and only 2px of the third showed,
   so it read as a two step journey with nothing to suggest otherwise. A grid
   keeps every stage visible and still costs a fraction of a stacked list.
   The connecting line is drawn per stage and stops at the end of each row. */
@media (max-width:860px){
  .jtrack{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
  .jtrack::before{display:none}
  .jstop::after{content:"";position:absolute;top:21px;height:2px;background:var(--line);
    left:calc(50% + 22px);right:calc(-50% + 10px)}
  .jstop:nth-child(3n)::after{display:none}
}
@media (max-width:560px){
  .jtrack{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .jstop:nth-child(3n)::after{display:block}
  .jstop:nth-child(2n)::after{display:none}
  .jstop h3{font-size:14.5px}
  .jout{font-size:12.5px}
}

/* Dates */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:26px}
.date-card{background:var(--card);border-radius:var(--r);padding:22px;display:flex;gap:18px;align-items:flex-start}
.date-card .d{font-family:var(--display);font-size:44px;line-height:.86;color:var(--ink);flex:none;text-align:center}
.date-card .d small{display:block;font-family:var(--text);font-size:13px;font-weight:600;color:var(--muted);margin-top:5px}
.date-card h4{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.date-card p{font-size:14.5px;color:var(--muted)}

/* Library */
.books{display:grid;gap:14px;margin-top:22px}
.book{background:var(--card);border-radius:var(--r);padding:18px;display:flex;gap:18px;align-items:center}
/* Book covers in the reading list. Scoped to .book on purpose: the classroom
   cards and the step heroes also use .cover, and an unscoped width here
   squashes every one of them. */
.book .cover{
  width:86px;flex:none;aspect-ratio:2/3;border-radius:4px;overflow:hidden;
  background:linear-gradient(150deg,#D2D2CE,#BFBFBB);
  box-shadow:0 3px 12px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
}
.book .cover img{width:100%;height:100%;object-fit:cover;display:block}
.book .cover::after{content:none}
.book h4{font-size:18px;font-weight:700;color:var(--ink);line-height:1.22;margin-bottom:3px}
.book p{font-size:14.5px;color:var(--muted)}
.book a{display:inline-block;margin-top:11px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--orange);padding-bottom:1px}

.lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px;margin-top:22px}
.res{background:var(--card);border-radius:var(--r);padding:16px}
.res h4{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.25;margin:13px 0 3px}
.res p{font-size:14px;color:var(--muted)}


/* Directory */
.sp{background:var(--card);border-radius:14px;padding:18px 19px;border-left:5px solid var(--orange)}
.sp .name{font-family:var(--display);font-size:18px;text-transform:uppercase;color:var(--ink);margin-bottom:4px;line-height:1.1}
.sp .talk{font-size:14.5px;color:var(--muted);font-style:italic}
.handles{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.handles a{
  font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);
  background:#EFEFEC;padding:6px 12px;border-radius:99px;transition:background .16s,color .16s;
}
.handles a:hover{background:var(--orange)}
.handles a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.handles .none{font-size:13px;color:#9A9A96;padding:6px 0}
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin-top:22px}
.cr{background:var(--card);border-radius:14px;padding:17px 18px}
.cr .role{font-size:12.5px;font-weight:600;color:var(--orange);margin-bottom:5px}
.cr .who{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.cr .what{font-size:14px;color:var(--muted)}

.speakers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:24px}

/* Steps */
ol.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:24px}
ol.steps li{counter-increment:s;background:var(--card);border-radius:var(--r);padding:22px}
ol.steps li::before{content:"Step " counter(s);display:inline-block;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:99px;margin-bottom:12px}
ol.steps h4{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:7px}
ol.steps p{font-size:15.5px;color:var(--body)}
.flag{margin-top:11px;font-size:14.5px;font-weight:600;color:var(--ink);border-left:4px solid var(--orange);padding-left:12px}

/* Gate */
#gate{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#gate .panel{max-width:400px;width:100%;text-align:left}
#gate .brand{font-family:var(--display);font-size:clamp(30px,8vw,44px);line-height:.96;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
#gate .sub{font-size:15.5px;color:var(--muted);margin-bottom:24px}
#gate .row{display:flex;gap:9px}
#gate input{
  flex:1;font-family:var(--text);font-size:16px;padding:14px 16px;border:2px solid var(--ink);
  border-radius:99px;background:#fff;color:var(--ink);outline:none;letter-spacing:.06em;min-width:0;
}
#gate input:focus{border-color:var(--orange)}
#gate button{
  font-family:var(--text);font-size:15px;font-weight:700;padding:14px 26px;border:0;border-radius:99px;
  background:var(--ink);color:#fff;cursor:pointer;flex:none;
}
#gate button:hover{background:var(--orange);color:var(--ink)}
#gate .err{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink);border-left:4px solid var(--orange);padding-left:12px;display:none}
#gate .err.show{display:block}
body.locked{overflow:hidden}

/* Hero portrait */
.hero{display:grid;gap:26px;align-items:center}
@media(min-width:720px){.hero{grid-template-columns:1.15fr .85fr;gap:36px}}
.portrait{border-radius:var(--r);overflow:hidden;background:#E9E9E6;position:relative;aspect-ratio:16/9;max-width:460px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;filter:grayscale(1)}
.portrait .cap{position:absolute;left:0;bottom:18px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:7px 16px}
.portrait .cap b{color:var(--orange);font-weight:700}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.quote-card{background:var(--card);border-radius:var(--r);padding:24px;display:grid;gap:14px;align-content:start}
.quote-card p{font-size:16px;color:var(--body)}
.quote-card .attrib{margin-bottom:2px}
.quote-card .belief{
  font-family:var(--display);font-size:22px;line-height:1.14;text-transform:uppercase;
  color:var(--ink);border-left:6px solid var(--orange);padding-left:16px;
}

/* Contact */
.contact{background:var(--ink);border-radius:var(--r);padding:30px;margin-top:26px;color:#fff}
.contact h3{color:#fff;margin-bottom:6px}
.contact p.sub{color:#B4B4B0;font-size:15px;margin-bottom:20px}
.contact ul{list-style:none;display:grid;gap:12px}
.contact li{font-size:16px}
.contact a{color:#fff;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px}
.contact .lbl{display:block;font-size:12.5px;color:#9E9E9A;margin-bottom:2px}

/* Rail sub-items, shown only while their group is open. */
.rail .sitenav a.subitem{margin-left:30px;padding:8px 12px;font-size:13.5px;font-weight:600;
  color:var(--muted);border-left:2px solid var(--line);border-radius:0 10px 10px 0}
.rail .sitenav a.subitem:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.rail .sitenav a.subitem[aria-current="page"]{background:transparent;color:var(--ink);border-left-color:var(--orange)}

/* Affiliate page */
.afgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;margin-top:26px}
.afbig{background:var(--ink);color:#fff;border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;justify-content:center}
.afnum{font-family:var(--display);font-size:clamp(52px,8vw,78px);line-height:.9;color:var(--orange)}
.aflabel{font-size:15px;font-weight:700;margin-top:8px}
.afsub{font-size:14.5px;color:#B9B9B4;margin-top:14px}
.afsub b{color:#fff}
.aflist{display:grid;gap:2px;background:var(--line);border-radius:var(--r);overflow:hidden}
.afrow{background:var(--card);padding:16px 20px}
.afrow h4{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.afrow p{font-size:14px;color:var(--muted);margin:0}
.afwho{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
.afcard{background:var(--card);border-radius:var(--r);padding:22px;border-top:4px solid var(--orange)}
.afcard h4{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.afcard p{font-size:14.5px;color:var(--muted);margin:0}
.afrules{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.afrules li{background:var(--card);border-radius:14px;padding:15px 18px 15px 46px;position:relative;font-size:14.5px;color:var(--body)}
.afrules li::before{content:"";position:absolute;left:20px;top:21px;width:9px;height:9px;background:var(--orange);border-radius:2px}
.afmore{margin-top:26px}
/* Certification steps */
.cpdsteps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.cpdsteps li{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;
  background:var(--card);border-radius:var(--r);padding:20px 22px}
.cnum{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;
  font-family:var(--display);font-size:19px;line-height:40px;text-align:center}
.cpdsteps li:nth-child(2n) .cnum{background:var(--orange);color:var(--ink)}
.cpdsteps h3{font-family:var(--text);font-weight:700;font-size:17.5px;text-transform:none;margin-bottom:4px}
.cpdsteps p{font-size:14.5px;color:var(--muted);margin:0}
@media (max-width:720px){.afgrid{grid-template-columns:1fr}}


/* The three claims under "The work". These had no styling at all, so they
   stacked as bare text. */
.assets{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:26px}
.asset{background:var(--card);border-radius:var(--r);padding:22px;border-top:4px solid var(--orange)}
.asset h4{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:7px}
.asset p{font-size:14.5px;color:var(--muted);margin:0}
#credentials .ctx{margin-top:26px}

/* Ife's books. Each cover sits on a white tile: the shop images are shot on
   white, so they read as cut out without any editing. Scoped to .bookcard so
   it cannot collide with the .asset cards used elsewhere on the page. */
#books h2{margin-bottom:12px}
#books .lede{margin-bottom:32px}
.booklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.bookcard{display:grid;grid-template-columns:118px 1fr;gap:20px;background:var(--card);
  border-radius:var(--r);padding:24px}
.bookshot{background:#fff;border-radius:10px;overflow:hidden;aspect-ratio:2/3;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.10)}
.bookshot img{width:100%;height:100%;object-fit:contain;display:block}
.bookbody{display:flex;flex-direction:column;align-items:flex-start}
.bookbody h4{font-size:17.5px;font-weight:700;color:var(--ink);line-height:1.22;margin-bottom:5px}
.bprice{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px}
.bookbody>p:not(.bprice){font-size:14.5px;color:var(--muted);margin:0 0 18px}
.bookbody .btn{margin-top:auto}
@media (max-width:560px){.bookcard{grid-template-columns:92px 1fr;gap:16px;padding:18px}}

/* Shared: small orange kicker, and square-bulleted lists. */
.fk{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.tick{list-style:none;padding:0;margin:0}
.tick li{position:relative;padding-left:20px}
.tick li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--orange);border-radius:2px}

/* Module 02, the two preparation columns */
.prep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.prepcol{background:var(--card);border-radius:var(--r);padding:26px}
.prepcol h3{font-size:24px;margin:4px 0 12px}
.prepcol>p{font-size:15px;color:var(--muted);margin-bottom:18px}
.prepcol .tick li{font-size:15px;color:var(--muted);margin-bottom:12px}
.prepcol .tick li b{color:var(--ink)}
.people{list-style:none;padding:0;margin:0}
.people li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.people li:last-child{border-bottom:0}
.people b{font-size:15.5px;color:var(--ink)}
.people span{font-size:14px;color:var(--muted);text-align:right}
.prepnote{font-size:14.5px;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.prepnote a{color:var(--ink);font-weight:600;border-bottom:2px solid var(--orange);text-decoration:none}
@media (max-width:760px){.prep{grid-template-columns:1fr}}

footer{padding:30px 0 54px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:600px){
  .book{gap:14px}
  .book .cover{width:70px}
  .date-card{gap:14px}
}

/* App shell. A fixed rail on the left holds the brand, the four shortcuts and
   a progress read-out, so every page opens inside the course rather than on a
   website. Below 900px the rail becomes a normal bar across the top. */
:root{--rail:238px}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  background:#DCDCD9;border-right:1px solid var(--line);overflow-y:auto}
.rail-in{padding:24px 16px 20px;display:flex;flex-direction:column;min-height:100%}
.rail .mark{display:block;font-family:var(--display);font-weight:400;font-size:17px;line-height:1.1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:0 8px;margin-bottom:26px}
.rail .mark::before{content:"";display:block;width:26px;height:5px;background:var(--orange);margin-bottom:11px}
.rail .sitenav{display:block;padding:0}
.rail .navrow{display:flex;flex-direction:column;gap:3px}
.rail .sitenav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--body);background:transparent;text-decoration:none;transition:background .15s,color .15s}
.rail .sitenav a svg{width:19px;height:19px;flex:none;opacity:.75}
.rail .sitenav a:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.rail .sitenav a[aria-current="page"]{background:var(--ink);color:#fff}
.rail .sitenav a[aria-current="page"] svg{opacity:1;color:var(--orange)}
.rail-prog{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.45}
.rail-prog b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.rail-prog:empty{display:none}
body{padding-left:var(--rail)}
body.locked{padding-left:0}
body.locked .wrap,body.locked .rail{display:none}

/* Built by nav.js, only used below 900px. */
.mobbar,.navscrim{display:none}

@media (max-width:900px){
  body{padding-left:0;padding-top:54px}

  .mobbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:70;display:flex;align-items:center;gap:12px;
    padding:0 14px;background:rgba(220,220,217,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
  .mobbar .mark{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.01em;
    text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .railbtn{width:38px;height:38px;flex:none;border:0;border-radius:10px;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
  .railbtn:hover{background:rgba(0,0,0,.06)}
  .railbtn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
  .railbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

  /* The drawer is the same rail, off canvas until it is asked for. */
  .rail{width:272px;transform:translateX(-100%);transition:transform .22s ease;z-index:80;
    box-shadow:0 0 40px rgba(0,0,0,.22)}
  body.nav-open .rail{transform:none}
  .navscrim{display:block;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.nav-open .navscrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  body.locked{padding-top:0}
  body.locked .mobbar,body.locked .navscrim{display:none}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .rail,.navscrim{transition:none}
}

/* Site nav */
.sitenav{display:flex;flex-wrap:wrap;gap:8px;padding:22px 0 0}
.sitenav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);background:#DBDBD8;padding:9px 17px;border-radius:99px;transition:background .18s,color .18s}
.sitenav a:hover{background:var(--ink);color:#fff}
.sitenav a[aria-current="page"]{background:var(--orange);color:var(--ink)}
.sitenav a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Home cards */
.pagelead{padding:28px 0 8px}
.pagelead h1{font-size:clamp(34px,8vw,60px)}


/* Meet Ife */
.meet{max-width:560px;margin:26px 0 4px}
.meet .video{border-radius:12px}
.vcap{font-size:14.5px;color:var(--muted);margin-top:10px}

/* Photography */
.band{border-radius:var(--r);overflow:hidden;margin:28px 0 6px;background:#D6D6D3}
.band img{width:100%;height:auto;display:block}
.split{display:grid;gap:22px;align-items:center;margin-top:26px}
@media(min-width:760px){.split{grid-template-columns:1fr 1fr;gap:32px}}
.split .shot{border-radius:var(--r);overflow:hidden;background:#E9E9E6;aspect-ratio:3/2}
.split .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.cohortshot{border-radius:14px;overflow:hidden;background:#D6D6D3;margin-bottom:14px;aspect-ratio:16/9}
.cohortshot img{width:100%;height:100%;object-fit:cover;display:block}
/* Book page */
.bookhero{display:grid;gap:26px;align-items:start}
@media(min-width:760px){.bookhero{grid-template-columns:.8fr 1.2fr;gap:40px}}
/* Book mockup. The cover keeps its own proportions: width is capped and
   height is auto, so the artwork can never be stretched or cropped. */
.mock{position:relative;width:100%;max-width:330px;margin:0 auto;perspective:1600px}
.mock .shell{position:relative;border-radius:3px 8px 8px 3px;overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.14);background:#fff}
.mock img{display:block;width:100%;height:auto}
.mock .spine{position:absolute;left:0;top:0;bottom:0;width:17px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.13) 34%,rgba(0,0,0,.03) 68%,transparent 100%)}
.mock .gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,0) 62%,rgba(255,255,255,.30) 78%,rgba(255,255,255,0) 92%)}
.mock .edge{position:absolute;top:7px;bottom:7px;right:-5px;width:5px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(180deg,#F2F2EF 0 2px,#DCDCD8 2px 3px)}
.backcover{border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#fff}
.backcover img{display:block;width:100%;height:auto}
.blurb-grid{display:grid;gap:22px;margin-top:26px}
@media(min-width:760px){.blurb-grid{grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}}
.badge{display:inline-block;background:var(--orange);color:var(--ink);font-size:13px;font-weight:700;padding:7px 16px;border-radius:99px;margin-bottom:16px}
.pull{background:var(--card);border-radius:var(--r);padding:26px;border-left:6px solid var(--orange);margin-top:26px}
.pull p{font-family:var(--display);font-size:clamp(20px,4.4vw,27px);line-height:1.14;text-transform:uppercase;color:var(--ink)}
.pull .by{font-family:var(--text);font-size:14.5px;font-weight:600;color:var(--muted);text-transform:none;margin-top:12px}
.clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.clients span{font-size:13.5px;font-weight:600;background:#EFEFEC;padding:7px 14px;border-radius:99px;color:var(--ink)}

/* Confidence page */
.star{display:grid;gap:24px;align-items:center;margin-top:28px}
@media(min-width:760px){.star{grid-template-columns:1fr 1fr;gap:36px}}
.starshot{border-radius:var(--r);overflow:hidden;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:18px}
.starshot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.affirm{display:grid;gap:10px;margin-top:22px;padding:0}
.affirm li{list-style:none;font-family:var(--display);font-size:clamp(19px,4vw,25px);text-transform:uppercase;color:var(--ink);background:var(--card);border-left:6px solid var(--orange);border-radius:8px;padding:14px 18px;line-height:1.1}
.price{font-family:var(--display);font-size:38px;color:var(--ink);line-height:1}
.price small{font-family:var(--text);font-size:14px;font-weight:600;color:var(--muted);display:block;margin-top:6px;text-transform:none}

/* Speaker cards */
.speakergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.speaker{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.speaker .shot{position:relative;aspect-ratio:3/4;background:#E9E9E6;display:flex;align-items:center;justify-content:center}
.speaker .ini{font-family:var(--display);font-size:44px;color:#fff;opacity:.7;letter-spacing:.02em}
.speaker .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.speaker .sbody{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.speaker .name{font-family:var(--display);font-size:18px;text-transform:uppercase;color:var(--ink);line-height:1.08;margin-bottom:4px}
.speaker .talk{font-size:14.5px;color:var(--muted);font-style:italic;margin-bottom:12px}
.speaker .reel{aspect-ratio:16/9;border-radius:10px;margin-bottom:12px}
.speaker .pending-reel{font-size:13px;color:#9A9A96;border:1px dashed #C6C6C2;border-radius:8px;padding:9px 12px;text-align:center;margin-bottom:12px}
.pending-note{font-size:13.5px;color:var(--muted);margin-top:20px}
.speaker .talk-pending{font-size:14.5px;color:#9A9A96;font-style:italic;margin-bottom:10px}
/* Marks the first person ever to come through the programme. */
.og{display:inline-block;vertical-align:2px;margin-left:7px;background:var(--orange);color:var(--ink);
  font-family:var(--text);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  padding:3px 7px;border-radius:5px;cursor:help}
.speaker .video{margin:10px 0 12px;aspect-ratio:16/9;border-radius:10px}
/* A self-hosted clip, as opposed to an embedded showreel. */
.reelvid{width:100%;aspect-ratio:16/9;border-radius:10px;background:#DBDBD8;display:block;margin:10px 0 12px}
.speaker .handles{margin-top:auto}

/* Advisor cards */
.advisor{background:var(--card);border-radius:var(--r);padding:24px;margin-bottom:16px}
.advisor .role{font-size:12.5px;font-weight:700;color:var(--orange);margin-bottom:6px;letter-spacing:.03em}
.advisor h3{margin-bottom:8px}
.advisor .video{margin:16px 0 4px;border-radius:12px}
.advisor p{font-size:15.5px;color:var(--body);margin-bottom:10px}
.advisor .handles{margin-top:12px}
.buybook{display:flex;gap:14px;align-items:center;background:#F4F4F1;border-radius:12px;padding:13px;margin-top:12px}
.buybook img{width:74px;height:auto;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.18);flex:none}
.buybook .bt{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:3px}
.buybook .bd{font-size:13.5px;color:var(--muted);margin-bottom:0}
.buybook a{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--orange)}
.guestbio{background:#F4F4F1;border-radius:12px;padding:15px;margin-top:12px}
.guestbio p{font-size:14.5px;color:var(--body);margin:0}
.guestbio .bd{font-size:14px;color:var(--muted)}
.guestbio a{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--orange)}

/* Portrait video, for clips shot on a phone */
.video.portrait{aspect-ratio:9/16;max-width:330px;margin-left:0}
.advisor .video.portrait{border-radius:12px}

/* Two-tier navigation, rendered by nav.js */
.sitenav{display:block;padding:22px 0 0}
.navrow{display:flex;flex-wrap:wrap;gap:8px}
.navrow a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);background:#DBDBD8;padding:9px 17px;border-radius:99px;transition:background .18s,color .18s,border-color .18s}
.navrow a:hover{background:var(--ink);color:#fff}
.navrow a[aria-current="page"]{background:var(--orange);color:var(--ink)}
.navrow a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.subnav{margin-top:9px}
.subnav a{font-size:13px;font-weight:600;background:transparent;color:var(--muted);padding:6px 13px;border:1.5px solid #CFCFCC}
.subnav a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Why a page is here */
.ctx{background:#F4F4F1;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:15px 17px;margin-top:16px}
.ctx p{font-size:14.5px;color:var(--body);margin:0}
.ctx .lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}

/* Session index, progress and pager */
.sesindex{position:sticky;top:0;z-index:6;background:var(--bg);display:flex;flex-wrap:wrap;gap:7px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:20px}
.sesindex a{font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);background:#DBDBD8;padding:7px 13px;border-radius:99px;transition:background .18s,color .18s}
.sesindex a:hover{background:var(--orange)}
.sesindex a.is-done{background:var(--ink);color:#fff}
.pager{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding-top:15px;border-top:1px solid var(--line)}
.pager a{font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2.5px solid var(--orange)}
.pager span{font-size:14px;color:#9A9A96}
.done{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.done input{width:18px;height:18px;accent-color:var(--orange);cursor:pointer;margin:0}
.progress{background:var(--card);border-radius:var(--r);padding:20px 22px;margin-top:22px}
.progress .pt{font-size:15px;font-weight:700;color:var(--ink)}
.progress .ps{font-size:14px;color:var(--muted);margin-top:4px}
.progbar{height:9px;background:#DBDBD8;border-radius:99px;overflow:hidden;margin-top:13px}
.progbar i{display:block;height:100%;width:0;background:var(--orange);border-radius:99px;transition:width .35s}

/* The path, on Start here */
.pathstep{display:flex;gap:16px;background:var(--card);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.pathstep .n{font-family:var(--display);font-size:30px;line-height:1;color:var(--orange);flex:none;width:42px}
.pathstep h3{margin-bottom:6px}
.pathstep p{font-size:15px;color:var(--body);margin-bottom:10px}
.pathstep a.go{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--orange)}

/* Cohort accordions on the graduates page */
.cohort{background:var(--card);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.cohort>summary{cursor:pointer;display:block;list-style:none}
.cohort>summary::-webkit-details-marker{display:none}
.cohort>summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.cohortshot{aspect-ratio:16/9;overflow:hidden;background:#DBDBD8}
.cohortshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.cohort>summary:hover .cohortshot img{transform:scale(1.02)}
.cohortbar{display:flex;align-items:center;gap:13px;padding:17px 20px}
.cohortbar .ct{font-family:var(--display);font-weight:400;font-size:20px;text-transform:uppercase;color:var(--ink);line-height:1}
.cohortbar .cm{font-size:14px;color:var(--muted)}
.cohortbar .chev{margin-left:auto}
.cohortbody{padding:0 20px 20px}
.cohort-static{background:var(--card);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.cohort-static .cohortbar .cm{color:#9A9A96}

/* Classroom grid and step covers */
/* The classroom grid. One uniform three-across grid holding the twelve steps
   and the resources, in the order someone actually needs them. Resources sit
   between the steps rather than on a shelf of their own, so nothing has to be
   hunted for. Part dividers are deliberately thin: they mark the arc without
   breaking the rhythm of the tiles. */
.roomlead{padding:22px 0 0}
.roomlead .progress{padding:13px 18px 15px;margin-top:0}
.roomlead .progress .ps{margin-top:0}
.roomlead .progbar{margin-top:9px;height:7px}
.prog-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.roomgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:10px 0 54px}
.partrule{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:22px 0 2px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.partrule i{flex:1 1 auto;height:1px;background:var(--line)}
.partrule span{flex:none}
.partrule .wk{color:var(--orange)}
.partrule:first-child{margin-top:6px}
.pace{background:var(--card);border-left:4px solid var(--orange);border-radius:0 var(--r) var(--r) 0;padding:15px 20px;margin-top:14px}
.pace p{font-size:14.5px;color:var(--muted);margin:0}
.pace b{color:var(--ink)}
@media (max-width:560px){.partrule{gap:9px;font-size:10.5px;letter-spacing:.1em}}
.modnote{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:860px){.roomgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.roomgrid{grid-template-columns:1fr}}

.classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:22px}
.progress + h2{margin-top:34px}

/* Phases. The twelve steps are the same twelve, but grouped and named so the
   arc is visible without counting cards. */
.phaseblock{margin-top:46px}
.phaseblock:first-of-type{margin-top:30px}
.phasenum{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.phaseblock h2{font-size:clamp(26px,4vw,34px);margin-bottom:6px}
.phaseline{font-size:15.5px;color:var(--muted);max-width:60ch;margin:0}
.phaseblock .classgrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:722px;margin-top:18px}
.alongside{max-width:722px}

/* Pins an optional resource to the point in the path where it earns its place. */
.alongside{margin-top:14px;font-size:14.5px;color:var(--muted);background:#F4F4F1;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:13px 16px}
.alongside a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange)}

/* The two orientation cards carry a word rather than a number. */
#before .cover .num{font-size:clamp(24px,3.6vw,32px)}
.modcard{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.modcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.13)}
.modcard:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* The card cover is a full-width banner, like a course thumbnail. The step
   number is the artwork, so the title is not printed twice on one card.
   To swap in a designed image, drop an <img> inside the .cover div. */
.cover{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:16px 18px}
.cover::after{content:"";position:absolute;right:-32px;top:-32px;width:106px;height:106px;background:var(--orange);opacity:.15;transform:rotate(45deg)}
.cover .num{position:relative;z-index:1;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,5vw,42px);line-height:.88;color:#fff}
.cover .num b{display:block;font-family:var(--text);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.cover .ct{position:relative;z-index:1;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.03;text-transform:uppercase;color:#fff}
.cover.alt{background:var(--orange)}
.cover.alt .num,.cover.alt .ct{color:var(--ink)}
.cover.alt .num b{color:var(--ink);opacity:.62}
.cover.alt::after{background:var(--ink);opacity:.13}
.cover.pale{background:#DBDBD8}
.cover.pale .num,.cover.pale .ct{color:var(--ink)}
.cover.pale .num b{color:#6E6E6B}
.cover.pale::after{background:var(--orange);opacity:.3}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.72))}

/* Shelf cards carry no step number, so the cover is a shorter colour band. */
.shelfgrid .cover{aspect-ratio:16/6}
.modbody{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1 1 auto}
.modbody h3{font-size:16px;margin-bottom:5px}
.modbody p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.modbody p:last-child{margin-bottom:0}
.modbar{position:relative;height:20px;background:#EDEDEA;border-radius:99px;margin-top:auto;overflow:hidden}
.modbar i{position:absolute;inset:0 auto 0 0;display:block;height:100%;width:0;background:var(--orange);border-radius:99px;transition:width .25s}
.modbar span{position:relative;z-index:1;display:block;line-height:20px;padding-left:10px;font-size:11.5px;font-weight:700;color:var(--body)}
.modcard.is-done .modbar i{width:100%}
.modcard.is-done .modbody h3::after{content:" \2713";color:var(--orange)}

/* The one to open next. */
.modcard.is-next{box-shadow:0 0 0 2.5px var(--orange)}
.modcard.is-next:hover{box-shadow:0 0 0 2.5px var(--orange),0 10px 26px rgba(0,0,0,.13)}
.modcard.is-next .cover::before{content:"Next up";position:absolute;z-index:2;top:12px;right:12px;
  font-family:var(--text);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:#fff;color:var(--ink);padding:5px 10px;border-radius:99px}
.shelfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:20px}

/* Phones. This block has to sit after the card rules above, not up with the
   other media query, or the aspect ratios there simply overwrite it. */
@media (max-width:600px){
  .phaseblock .classgrid{grid-template-columns:1fr}
  .cover{aspect-ratio:16/5}
  .shelfgrid .cover{aspect-ratio:16/4}
  .stephero .cover{min-height:120px;padding:20px}
}

/* Step page furniture */
.stephero{background:var(--card);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.stephero .cover{aspect-ratio:auto;min-height:152px;padding:26px 28px;justify-content:flex-end}
.stephero .cover .num{font-family:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--orange);margin-bottom:11px}
.stephero .cover.alt .num{color:var(--ink);opacity:.62}
.stephero .cover.pale .num{color:#6E6E6B}
.stephero .cover .ct{font-size:clamp(24px,4.4vw,38px)}
.stepnavbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.stepnavbar a{font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2.5px solid var(--orange)}
.stepnavbar span{font-size:14px;color:#9A9A96}
.modfoot{padding:8px 0 54px}
.backlink{display:inline-block;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;margin-bottom:14px}
.backlink:hover{color:var(--ink)}

/* Podcast link used where a speaker has no showreel */
.reel-link{display:flex;flex-direction:column;justify-content:center;aspect-ratio:16/9;border-radius:10px;background:var(--ink);color:#fff;text-decoration:none;padding:14px 16px;margin-bottom:12px;transition:background .18s}
.reel-link:hover{background:var(--orange);color:var(--ink)}
.reel-link .rl-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:5px}
.reel-link:hover .rl-k{color:var(--ink)}
.reel-link .rl-t{font-family:var(--display);font-size:18px;text-transform:uppercase;line-height:1.05}

/* Small headshot inside an advisor card */
.advisor .mug{width:92px;height:92px;border-radius:14px;overflow:hidden;background:#DBDBD8;margin-bottom:14px}
.advisor .mug img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.advisor .a-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}