body{margin:0;background:#fff;color:#111;font-family:'Archivo',sans-serif}
a{color:#1d3fd1}a:hover{color:#0f2690}
img{display:block}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1600px;margin:0 auto;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}

@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.line{display:block;overflow:hidden}
.line>span{display:block;animation:rise .7s cubic-bezier(.2,.7,.1,1) both}
.line:nth-child(2)>span{animation-delay:.12s}
.ring{animation:spin 22s linear infinite;transform-origin:50% 50%}
.track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.fade{animation:fadeup .7s .35s ease-out both}
.zoom{overflow:hidden}
.zoom img{transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.zoom:hover img{transform:scale(1.04)}
.cert img{transition:transform .3s}.cert:hover img{transform:translateY(-4px)}
.cert:focus-visible{outline:2px solid #9db0ff;outline-offset:4px}
a:focus-visible{outline:2px solid #111;outline-offset:3px}
.ring:hover,.track:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.line>span,.ring,.track,.fade,.feat img{animation:none}.zoom img{transition:none}}

/* nav + footer */
.nav{border-bottom:2px solid #111;padding:8px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase}
.nav-name{font-weight:500}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.nav a{color:#111;text-decoration:none}
.nav a.cta{color:#1d3fd1}
.foot{border-top:2px solid #111;padding:10px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase}

/* hero */
.hero{padding-top:48px;padding-bottom:0}
.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:32px clamp(32px,6vw,112px)}
.hero h1{font-weight:900;font-size:clamp(56px,11vw,168px);line-height:.88;letter-spacing:-.025em;word-spacing:.12em;text-transform:uppercase}
.hero-title{min-width:0}
.hero-sub{margin-top:clamp(14px,1.6vw,24px);font-family:'IBM Plex Mono',monospace;font-size:clamp(12px,1.1vw,15px);line-height:1.5;text-transform:uppercase;color:#111;font-weight:700}
.dot{color:#1d3fd1}
.emblem{position:relative;overflow:hidden;border-radius:50%;width:260px;height:260px;flex:0 0 auto;margin-left:auto;margin-right:clamp(0px,5vw,96px)}
.emblem svg{position:absolute;inset:0;width:100%;height:100%}
.ring-text{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:3px;fill:#111}
.emblem-img{position:absolute;left:19.23%;top:19.23%;width:61.54%;height:61.54%;border-radius:50%;overflow:hidden;border:2px solid #111;background:#fff}
.emblem-img img{width:100%;height:100%;object-fit:contain}
@media (min-width:640px) and (max-width:1023.98px){.hero-top{flex-wrap:nowrap}.emblem{width:200px;height:200px;margin-right:0}}
@media (max-width:639.98px){.emblem{width:140px;height:140px;margin:0 0 0 auto}}
.hero-intro{display:flex;flex-wrap:wrap;gap:32px;margin-top:36px;padding-bottom:32px;border-bottom:2px solid #111}
.hero-text{flex:2 1 460px;display:flex;flex-direction:column;gap:14px}
.hero-intro p{font-size:22px;line-height:1.45;font-weight:500}
.facts{flex:0 1 auto;margin-left:auto;align-self:flex-start;display:grid;grid-template-columns:110px auto;column-gap:16px;row-gap:8px;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase}
.facts dt{color:#666;font-weight:700}

/* photos */
.photos{display:grid;grid-template-columns:.75fr 1fr 1.25fr;gap:16px;margin-top:16px}
.photos figure{min-width:0}
.photos img{width:100%;height:clamp(420px,40vw,660px);object-fit:cover}
.photo-posed{object-position:50% 20%}
.photo-pro{object-position:30% 50%}
.photo-stage{object-position:60% 30%}
@media (max-width:1023.98px){
  .photos{grid-template-columns:1fr 1fr}
  .photos figure:last-child{grid-column:1/-1}
  .photos img{height:420px}
  .photos .photo-stage{height:auto;aspect-ratio:16/9}
}
@media (max-width:767.98px){
  .photos{grid-template-columns:1fr 1fr}
  .photos figure:first-child{grid-column:1/-1}
  .photos img{height:220px}
  .photos .photo-posed{height:auto;aspect-ratio:4/5;object-position:50% 25%}
  .photos .photo-stage{height:220px}
  .photos figure:last-child{grid-column:auto}
}

/* stats */
.stats{padding-top:16px;padding-bottom:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-bottom:2px solid #111}
.stats>*{padding:20px 20px 24px 0;display:flex;flex-direction:column;gap:6px}
.stats strong{font-size:20px}
.stats span{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#555}

/* marquee */
.marquee{background:#1d3fd1;color:#fff;overflow:hidden;margin-top:64px;padding:20px 0}
.track{font-weight:900;font-size:36px;text-transform:uppercase;letter-spacing:-.5px;gap:40px;white-space:nowrap}
.track .sep{color:#9db0ff}

/* sections */
.section{padding-top:96px;padding-bottom:96px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.sec-head.loose{margin-bottom:32px}
.sec-head h2,.about h2{font-weight:900;font-size:clamp(36px,5vw,64px);letter-spacing:-.03em;word-spacing:.12em;text-transform:uppercase}
.tag{font-weight:400;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase}

.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));border-top:2px solid #111}
.method li{padding:28px 28px 28px 0;border-bottom:1px solid #111;display:flex;flex-direction:column;gap:10px}
.num{font-family:'IBM Plex Mono',monospace;color:#1d3fd1}
.method h3{font-size:28px;font-weight:700}
@media (min-width:1024px){.method{grid-template-columns:repeat(3,minmax(0,1fr))}.method li{padding-right:24px}.method h3{font-size:clamp(22px,1.8vw,28px)}}

.audience-bg{background:#f2f2ee;padding:96px clamp(16px,3vw,40px)}
.audience-bg>div{max-width:1600px;margin:0 auto}
.audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.audience li{background:#fff;border:2px solid #111;padding:28px;display:flex;flex-direction:column;gap:10px}
.audience li.hl{background:#1d3fd1;color:#fff}
.audience h3{font-weight:700;font-size:24px}
.audience p{color:#444;line-height:1.55}
.audience .hl p{color:inherit}

.about{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.about-text{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:20px}
.about h2{line-height:.95}
.about-text p{font-size:19px;line-height:1.65;color:#333}
.about-photos{flex:1 1 420px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.about-photos .wide{grid-column:span 2}
.about-photos img{width:100%;height:300px;object-fit:cover}
@media (min-width:1024px){.about-photos{order:-1}}

/* section dividers run edge to edge: border-image outset reaches both screen edges */
.hero-intro,.stats{border-image:linear-gradient(#111,#111) 2/0 0 2px/0 100vmax}
#about{border-top:2px solid #111;border-image:linear-gradient(#111,#111) 2/2px 0 0/0 100vmax}
.swipe{display:none}

/* classes */
.classes{border-top:2px solid #111;border-image:linear-gradient(#111,#111) 2/2px 0 0/0 100vmax}
.sessions{border-top:2px solid #111;margin:12px 0 8px}
.session{width:100%;display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:16px;padding:22px 0;background:none;border:0;border-bottom:1px solid #111;text-align:left;font:inherit;color:#111;cursor:pointer}
.session .t{font-size:26px;font-weight:700}
.session .tag{font-size:12px;color:#555}
.session:hover .t{color:#1d3fd1}
.session:focus-visible{outline:2px solid #111;outline-offset:4px}
.feat{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.feat img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 35%;border:2px solid #111;box-sizing:border-box}
.feat img.swap{animation:swap .4s ease both}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.feat figcaption{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;color:#555}

/* credentials */
.creds{background:#111;color:#fff;padding:96px clamp(16px,3vw,40px)}
.creds-in{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.creds-list{flex:1 1 460px;min-width:0}
.creds .tag{display:block;margin-bottom:24px;color:#9db0ff}
.timeline{border-top:1px solid #444}
.timeline li{display:block;border-bottom:1px solid #444;padding:20px 0}
.what{display:block;font-size:22px;font-weight:700}
.where{display:block;color:#bbb;margin-top:4px;line-height:1.45}
.certs{flex:1 1 400px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cert{padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;display:flex;flex-direction:column;gap:10px;font:inherit}
.cert img{width:100%;height:clamp(240px,28vw,380px);object-fit:cover;background:#fff}
.cert img.top{object-position:top}
.cert img.face{object-position:50% 12%}
.cert span{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;color:#bbb}

/* contact */
.contact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.contact-text{display:flex;flex-direction:column;gap:20px}
.contact h2{font-weight:900;font-size:clamp(44px,7vw,96px);line-height:.92;letter-spacing:-.03em;word-spacing:.12em;text-transform:uppercase}
.contact p{font-size:18px;color:#444}
.mail{background:#1d3fd1;color:#fff;padding:18px 28px;font-family:'IBM Plex Mono',monospace;font-size:15px;text-decoration:none}
.mail:hover{color:#fff}
#contact{background:#111;color:#fff;box-shadow:0 0 0 100vmax #111;clip-path:inset(0 -100vmax)}
#contact p{color:#bbb}
#contact .dot{color:#9db0ff}
#contact .mail{background:#9db0ff;color:#111}
#contact .mail:hover{background:#fff;color:#111}
#contact .mail:focus-visible{outline-color:#fff}

/* lightbox */
dialog{box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:transparent;padding:56px 16px 24px;align-items:center;justify-content:center;cursor:zoom-out}
dialog[open]{display:flex}
dialog::backdrop{background:rgba(10,10,10,.92)}
dialog img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:auto}
.close{position:absolute;top:12px;right:16px;min-width:44px;min-height:44px;padding:10px 16px;background:#fff;color:#111;border:2px solid #111;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase;cursor:pointer}

/* smooth scrolling + scroll reveal (native, no JS; skipped where unsupported or reduced motion) */
section{scroll-margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline:view()){
    .section h2,.method li,.sessions li,.audience li,.about-photos figure,.timeline li,.certs button,.contact-text,.photos figure:last-child{
      animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    @keyframes reveal{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
  }
}

/* accessibility: skip link, 24px targets, pause control (WCAG 2.4.1, 2.5.8, 2.2.2) */
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:#1d3fd1;color:#fff;padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase}
.skip:focus{top:12px}
.nav a,.motion{display:inline-flex;align-items:center;box-sizing:border-box;padding:0;min-height:44px}
.motion{background:none;border:0;color:#111;font:inherit;line-height:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.motion:focus-visible{outline:2px solid #111;outline-offset:3px}
#content:focus{outline:none}
.paused .ring,.paused .track{animation-play-state:paused}

/* mobile menu (below 768px; links stay visible without JS) */
.nav-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;color:#111;cursor:pointer}
.nav-btn:focus-visible{outline:2px solid #111;outline-offset:2px}
.nav-btn .x,.nav-btn[aria-expanded=true] .bars{display:none}
.nav-btn[aria-expanded=true] .x{display:inline}
@keyframes menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:767.98px){
  .js .nav{position:relative;flex-wrap:nowrap;padding-top:8px;padding-bottom:8px}
  .js .nav-btn{display:inline-flex;margin-right:-10px}
  .js .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:5;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:2px solid #111;border-bottom:2px solid #111}
  .js .nav-links.open{display:flex}
  .js .nav-links a{display:flex;align-items:center;min-height:48px;padding:0 clamp(16px,3vw,40px);border-bottom:1px solid #111}
  .js .nav-links a:last-child{border-bottom:0}
  .js .nav-links a:focus-visible{outline-offset:-4px}
}
@media (max-width:767.98px) and (prefers-reduced-motion:no-preference){.js .nav-links.open{animation:menu .18s ease-out}}

/* small phones */
@media (max-width:639.98px){
  .hero{padding-top:32px}
  .hero-intro p{font-size:19px}
  .marquee{margin-top:40px}
  .about{gap:32px}
  .session{grid-template-columns:28px 1fr auto;gap:10px;padding:18px 0}
  .session .tag{font-size:11px}
  .session .t{font-size:20px}

  .what{font-size:18px}
  .about-photos img{height:auto;aspect-ratio:3/4}
  .about-photos .wide img{aspect-ratio:3/2}
  .stats{grid-template-columns:1fr}
  .stats>*{padding:14px 0}
  .stats>*+*{border-top:1px solid #111}
  .mail{box-sizing:border-box;width:100%;text-align:center}
}
@media (max-height:500px){.feat img{align-self:flex-start;max-height:85svh;width:auto;max-width:100%}}
/* tablet and below */
@media (max-width:1023.98px){
  .feat{max-width:520px}
  .cert img{height:auto;aspect-ratio:3/4;object-position:top}
  .certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certs .cert:first-child{grid-column:1/-1}
  .certs .cert:first-child img{aspect-ratio:4/3}
  .facts{grid-template-columns:104px auto}
}
@media (min-width:640px) and (max-width:1023.98px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1149.98px){.audience{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* memory feats (recall test); answers are JS-rendered, so hide the app without JS */
html:not(.js) .feats-rows,html:not(.js) .feats-board{display:none}
.feats-in{display:flex;flex-wrap:wrap;gap:48px;align-items:stretch}
.feats-side{flex:1 1 380px;min-width:0}
.feats-side h2{margin:16px 0 20px;font-weight:900;font-size:clamp(36px,5vw,64px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.feats-side>p{margin-bottom:32px;font-size:19px;line-height:1.6;color:#333}
.feats-rows{border-top:2px solid #111}
.frow{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;padding:20px 0;background:none;border:0;border-bottom:1px solid #111;text-align:left;font:inherit;color:#111;cursor:pointer}
.frow:hover .ft,.frow[aria-pressed=true] .ft{color:#1d3fd1}
.frow[aria-pressed=true] .fn{background:#1d3fd1;color:#fff}
.frow:focus-visible,.feats-tog:focus-visible,.fq:focus-visible,.fscroll:focus-visible{outline:2px solid #111;outline-offset:4px}
.fn{box-sizing:border-box;min-width:96px;padding:4px 10px;border:2px solid #111;text-align:center;font-weight:900;font-size:40px;line-height:1;letter-spacing:-1px}
.ft{font-size:24px;font-weight:700}
.feats-board{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;box-sizing:border-box;background:#fff;border:2px solid #111;padding:clamp(16px,2.5vw,32px)}
.feats-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.feats-head h3{font-size:22px;font-weight:900;text-transform:uppercase}
.feats-btns{display:flex;flex-wrap:wrap;gap:8px}
.feats-tog{min-width:44px;min-height:44px;padding:0 18px;background:#1d3fd1;color:#fff;border:0;font:500 13px 'IBM Plex Mono',monospace;text-transform:uppercase;cursor:pointer}
.feats-tog:focus-visible{outline-color:#111}
#feats [hidden]{display:none}
/* board fills the height of the left column when side by side; panels grow so the pager sits at the bottom */
#feats-stage,#feats-stage>div{flex:1;display:flex;flex-direction:column}
/* masked cell: black, text hidden; revealed by hover, a tap (.show) or Reveal all (.all) */
.fm{background:#111;color:transparent;cursor:default}
.fm.show{background:transparent;color:#1d3fd1}
@media (hover:hover){.fm:hover{background:transparent;color:#1d3fd1}}
.all .fm{background:transparent;color:#111}
.all .fm:hover,.all .fm.show{color:#1d3fd1}
/* random colours: black is a real answer, so the mask is light grey with a ?; revealed = its colour plus a name chip (not colour alone) */
.fk{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #111;background:#d9d9d4;color:#444;font:700 clamp(14px,2vw,22px) 'IBM Plex Mono',monospace}
.fkn{position:absolute;opacity:0;padding:1px 4px;background:#fff;color:#111;font:500 10px/1.3 'IBM Plex Mono',monospace}
.fm.fk.show,.all .fm.fk{background:var(--c);color:#111}
.fm.fk.show .fq-,.all .fk .fq-{opacity:0}
.fm.fk.show .fkn,.all .fk .fkn{opacity:1}
@media (hover:hover){.fm.fk:hover{background:var(--c);color:#111}.fk:hover .fq-{opacity:0}.fk:hover .fkn{opacity:1}}
@media (prefers-reduced-motion:no-preference){html:not(.paused) .fm,html:not(.paused) .fn{transition:background .2s,color .2s}}
.fbin{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;font:clamp(9px,1vw,14px) 'IBM Plex Mono',monospace;text-align:center}
.fbin .fm{padding:3px 0}
.frd,.frc{flex:1;display:grid;gap:4px}
.frd{grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:minmax(30px,1fr);font:700 clamp(14px,2.2vw,28px) 'IBM Plex Mono',monospace;text-align:center}
.frd .fm{display:flex;align-items:center;justify-content:center}
.frc{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(52px,1fr)}
@media (min-width:640px){.fkn{font-size:12px}}
/* shuffled deck: 3D flip cards. .fcd is the hit target; .fci flips; back and face are stacked with backface-visibility */
.frk{flex:1;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px;align-content:start}
.fm.fcd{position:relative;container-type:size;aspect-ratio:5/7;perspective:400px;background:none;contain:layout paint style}
.fci{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fcd.show .fci,.all .fcd .fci{transform:rotateY(180deg)}
@media (hover:hover){.fcd:hover .fci{transform:rotateY(180deg)}}
/* Safari can paint the back face through the front during 3D flips, so hide whichever side faces away (swapped at the half-way point when animating) */
.fcf{visibility:hidden}
.fcd.show .fck,.all .fcd .fck{visibility:hidden}
.fcd.show .fcf,.all .fcd .fcf{visibility:visible}
@media (hover:hover){.fcd:hover .fck{visibility:hidden}.fcd:hover .fcf{visibility:visible}}
.fck,.fcf{position:absolute;inset:0;box-sizing:border-box;border:1.5px solid #111;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fck{background:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 6px),#1d3fd1}
.fck::before{content:'';position:absolute;inset:3px;border:1px solid rgba(255,255,255,.9);border-radius:3px}
.fck::after{content:'';position:absolute;left:50%;top:50%;width:34cqw;height:34cqw;transform:translate(-50%,-50%) rotate(45deg);background:#1d3fd1;border:1px solid #fff}
.fcf{transform:rotateY(180deg);background:#fff;color:#111;font-family:'Archivo',sans-serif}
.fcd.r .fcf{color:#c62828}
.fcp{position:absolute;top:max(4px,6cqw);right:max(4px,7cqw);padding:0 2px;border-radius:2px;font:500 max(10px,17cqw)/1.1 'IBM Plex Mono',monospace;color:#fff;background:#1d3fd1}
.fcf .fcp{color:#555;background:none;padding:0}
.fcs{position:absolute;top:max(3px,6cqw);left:max(4px,9cqw);font-weight:800;font-size:max(11px,26cqw);line-height:1;text-align:center}
.fcg{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:max(16px,50cqw);line-height:1;transform:translateY(-35%)}
.fvh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  html:not(.paused) .fci{transition:transform .4s ease}
  html:not(.paused) .fck,html:not(.paused) .fcf{transition:visibility 0s linear .2s}
  html:not(.paused) .all .fci,html:not(.paused) .deal .fci{transition-delay:calc(min(var(--i),26) * 12ms)}
  html:not(.paused) .all .fck,html:not(.paused) .all .fcf,html:not(.paused) .deal .fck,html:not(.paused) .deal .fcf{transition-delay:calc(.2s + min(var(--i),26) * 12ms)}
}
.fpi-wrap{flex:1;container-type:inline-size;display:flex;flex-direction:column;gap:12px}
.fpi-3{font:700 clamp(15px,1.7vw,28px) 'IBM Plex Mono',monospace;color:#1d3fd1}
.fpi{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:space-between;justify-items:center;gap:6px;font:clamp(13px,4.5cqw,22px) 'IBM Plex Mono',monospace}
.fpi>*{padding:.2em .5em}
@container (min-width:520px){.fpi{grid-template-columns:repeat(5,minmax(0,1fr));font-size:clamp(11px,2.4cqw,28px)}}
.fscroll{flex:1;display:flex;flex-direction:column;overflow-x:auto}
.fpt{flex:1;container-type:inline-size;display:grid;min-width:540px;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,minmax(40px,1fr)) 14px repeat(2,minmax(40px,1fr));gap:3px}
.fcell{border:1px solid #111;padding:3px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;text-align:center}
.fnum{font:max(10px,calc(100cqw / 18 * .26)) 'IBM Plex Mono',monospace;color:#555;text-align:left}
.fcell .fm{font-size:max(12px,calc(100cqw / 18 * .42));font-weight:900;padding:2px 0;flex:1;display:flex;align-items:center;justify-content:center}
.fsearch{display:block;margin-bottom:6px;font:12px 'IBM Plex Mono',monospace;text-transform:uppercase;color:#555}
.fq{box-sizing:border-box;width:100%;max-width:420px;min-height:44px;padding:0 12px;border:2px solid #111;border-radius:0;font:15px 'IBM Plex Mono',monospace}
.fcc{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:60px;gap:0 28px;margin-top:16px}
.fcc.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fr{box-sizing:border-box;height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;line-height:1.2;border-bottom:1px solid #ccc}
.fr.ghost{visibility:hidden}
.fpager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.fpg{min-width:44px;min-height:44px;padding:0 18px;background:#fff;color:#111;border:2px solid #111;font:500 13px 'IBM Plex Mono',monospace;text-transform:uppercase;cursor:pointer}
.fpg:hover:not(:disabled){background:#111;color:#fff}
.fpg:disabled{color:#767676;border-color:#767676;cursor:not-allowed}
.fpg:focus-visible{outline:2px solid #111;outline-offset:3px}
.fpage{font:12px 'IBM Plex Mono',monospace;text-transform:uppercase;color:#555}
.fcn{font-weight:700}
.fr .fm{font:14px/1.2 'IBM Plex Mono',monospace;padding:2px 6px;text-align:right}
@media (max-width:639.98px){
  .frow{gap:14px;padding:16px 0}
  .fn{min-width:84px;font-size:32px}
  .ft{font-size:20px}
  .feats-side>p{font-size:17px}
  .fbin{gap:2px}
  .frk{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .fpi{gap:4px}
  .fcc{grid-auto-rows:48px}
  .fr{height:48px;padding:3px 0;gap:8px;font-size:13px;line-height:1.15}
  .fr .fm{font-size:12px}
  .fcc{margin-top:12px}
  .fpager{padding-top:14px}
}

@media (max-width:479.98px){.frk{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* side by side from ~1130px: fewer, bigger cards so the grid roughly fills the board height */
@media (min-width:1130px){.frk{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media (min-width:1240px){.frk{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media (min-width:1330px){.frk{grid-template-columns:repeat(11,minmax(0,1fr))}}
@media (min-width:1480px){.frk{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (min-width:1760px){.frk{grid-template-columns:repeat(13,minmax(0,1fr))}}
/* phones and small tablets: tighter sections, swipe rows, compact hero emblem, classes, certificates */
@media (max-width:767.98px){
  .section{padding-top:56px;padding-bottom:56px}
  .audience-bg,.creds{padding-top:56px;padding-bottom:56px}
  .swipe{display:block;margin-left:auto;font:12px 'IBM Plex Mono',monospace;text-transform:uppercase;color:#555}
  .swipe-row{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .swipe-row:focus-visible{outline:2px solid #111;outline-offset:2px}
  .audience{display:flex;width:max-content;min-width:100%}
  .audience li{flex:0 0 min(78vw,300px);box-sizing:border-box;scroll-snap-align:start;animation:none}
  .method{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method li{padding:16px 12px 16px 0}
  .method h3{font-size:20px}
  .audience{gap:12px}
  .hero-top{flex-wrap:nowrap;gap:16px}
  .hero-title{flex:1 1 0}
  .hero h1{font-size:clamp(34px,11vw,48px)}
  .emblem{flex:0 0 clamp(80px,26vw,104px);width:auto;height:auto;aspect-ratio:1;margin:0 0 0 auto}
  .facts{margin-left:0}
  .emblem svg{display:none}
  .emblem-img{inset:0;width:auto;height:auto}
  .classes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 16px;align-items:start}
  .classes .about-text{display:contents}
  .classes .about-text>:not(.sessions){grid-column:1/-1;margin-bottom:20px}
  .classes .sessions{grid-column:2;grid-row:5;margin:0}
  .classes .feat{grid-column:1;grid-row:5;max-width:none}
  .session{grid-template-columns:auto 1fr;gap:8px;padding:6px 0;min-height:48px;align-items:center}
  .session .t{font-size:clamp(15px,3.4vw,20px);line-height:1.2}
  .session .tag{display:none}
  .session[aria-pressed=true] .t{color:#1d3fd1}
  .creds-in{gap:28px}
  .timeline li{padding:12px 0}
  .creds .tag{margin-bottom:16px}
  .cert img{aspect-ratio:4/3;height:auto}
}

/* tablets (768-1023px): compact two-column layouts, tighter sections */
@media (min-width:768px) and (max-width:1023.98px){
  .section{padding-top:72px;padding-bottom:72px}
  .audience-bg,.creds{padding-top:72px;padding-bottom:72px}
  .marquee{margin-top:40px;padding:16px 0}

  .hero{padding-top:36px}
  .hero-intro{margin-top:28px;padding-bottom:24px}
  .hero-text{flex:1 1 300px}
  .facts{flex:0 0 auto}

  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats>*{padding:16px 16px 18px 0}
  .stats strong{font-size:17px}

  .feats-in{gap:28px}
  .feats-side h2{margin:12px 0 14px}
  .feats-side>p{margin-bottom:20px;font-size:18px}
  .feats-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
  .frow{padding:12px 0;gap:14px}
  .fn{min-width:84px;font-size:32px}
  .ft{font-size:20px}

  .creds-in{flex-wrap:nowrap;gap:32px;align-items:flex-start}
  .creds-list{flex:1.15 1 0}
  .certs{flex:1.25 1 0}
  .timeline li{padding:12px 0}
  .creds .tag{margin-bottom:16px}
  .what{font-size:19px}
  .cert img{aspect-ratio:3/4}

  .method{grid-template-columns:repeat(3,minmax(0,1fr))}
  .method li{padding:20px 20px 20px 0}
  .method h3{font-size:22px}
  .audience{gap:12px}
  .audience li{padding:20px}
  .audience h3{font-size:21px}

  .classes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:stretch}
  .classes .about-text{display:contents}
  .classes .about-text>:not(.sessions){grid-column:1/-1;margin-bottom:16px}
  .classes .sessions{margin:0;display:flex;flex-direction:column}
  .classes .sessions li{flex:1;display:flex}
  .classes .feat{max-width:none}
  .session{grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:10px 0}
  .session .tag{display:none}
  .session .t{font-size:22px}
  .session[aria-pressed=true] .t{color:#1d3fd1}

  .about{gap:28px}
  .about-text{flex-basis:100%}
  .about-photos{flex-basis:100%;grid-template-columns:1.6fr 1fr 1fr}
  .about-photos .wide{grid-column:auto}
  .about-photos img{height:280px}
}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* stats line up with the photo columns (.75fr 1fr 1.25fr, 16px gaps); the last photo column holds two stats */
@media (min-width:1024px){.stats{--u:calc((100% - 32px) / 3);grid-template-columns:calc(var(--u) * .75) var(--u) calc((var(--u) * 1.25 - 16px) / 2) calc((var(--u) * 1.25 - 16px) / 2);column-gap:16px}.stats>*{padding-right:0}}
/* desktop feats: compact 2-column set list so the section is shorter */
@media (min-width:1024px){
  .feats-side{flex-basis:460px}
  .feats-side h2{margin:12px 0 16px}
  .feats-side>p{margin-bottom:20px;font-size:17px;line-height:1.55}
  .feats-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .frow{gap:12px;padding:12px 0}
  .fn{min-width:72px;font-size:28px;padding:3px 8px}
  .ft{font-size:17px;line-height:1.2}
}