/* Bridge Academy public site (www). Customer-facing brand register:
   navy / turquoise / orange, Poppins, light ground. The departures board is
   the one dark surface and the spine of the whole site. */
:root{
  --navy:#012169;--navy-2:#001A54;--deep:#06122E;--deep-2:#0C1D4A;--deep-3:#101B3F;--line-d:#1B2C5C;
  --paper:#FBFCFE;--surface:#FFFFFF;--tint:#EFF1F7;--tint-2:#E0E4F0;--hair:#EEF1F8;
  --ink:#0B1B3A;--muted:#4A5578;--soft:#97A4CC;--on-dark:#F4F6FB;--on-dark-2:#C2CAE0;
  --turq:#00B4D8;--turq-t:#006E85;--turq-tint:#E6F7FB;
  --orange:#FF8A00;--orange-t:#B36200;--on-orange:#2B1400;--orange-tint:#FFF4E5;
  --ok:#0F7A58;--warn:#C0322F;
  --r:16px;--r-sm:10px;--pill:999px;--stick:66px;
  /* reveal motion, one set of numbers for the whole site (S427). The travel
     distance does more for the glide than the duration: 28 px reads as arrival
     where 10 px read as a flicker. 300 ms keeps the DESIGN.md ceiling. */
  --rv-dur:300ms;--rv-dist:28px;--rv-stag:90ms;
  --ease:cubic-bezier(.23,1,.32,1);--spring:cubic-bezier(.34,1.3,.64,1);--smooth:cubic-bezier(.25,.46,.45,.94);
  --wrap:1120px;
  --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:17px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:clamp(34px,5.4vw,58px);
}
*{box-sizing:border-box}
/* the hidden attribute must beat every author display: the live pill and the
   ghost buttons set their own display, which otherwise wins and paints an
   empty pill every Friday */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Poppins','Noto Sans Myanmar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.mm{font-family:'Noto Sans Myanmar','Poppins',system-ui,sans-serif;line-height:1.9}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media (min-width:720px){.wrap{padding:0 32px}}
/* navy ring on the light ground (14:1); turquoise only on the dark surfaces,
   where it clears 6:1. The old turquoise-on-paper ring measured 2.4:1. */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
.board :focus-visible,.ftr :focus-visible,.cta :focus-visible,.fees :focus-visible,.rung-dark:focus-visible,.pcard-navy :focus-visible{outline-color:var(--turq)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus-visible{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--pill);font-weight:600;text-decoration:none}

/* ── buttons ─────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--pill);font:inherit;font-weight:600;font-size:var(--fs-md);text-decoration:none;cursor:pointer;border:1.5px solid transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .26s var(--spring),background-color .18s var(--smooth),color .18s var(--smooth),border-color .18s var(--smooth)}
.btn:active{transform:scale(.96);transition:transform .11s var(--ease)}
.btn-primary{background:var(--orange);color:var(--on-orange)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{border-color:var(--tint-2);color:var(--navy);background:var(--surface)}
.btn-ghost-dark{border-color:#3A4E8C;color:#fff;background:transparent}
.btn[disabled]{opacity:.6;cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#FF9A24}
  .btn-navy:hover{background:var(--navy-2)}
  .btn-ghost:hover{border-color:var(--navy);background:var(--tint)}
  .btn-ghost-dark:hover{border-color:#fff}
}

/* ── header ──────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,252,254,.86);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s var(--smooth);padding-top:env(safe-area-inset-top)}
.hdr.scrolled,.hdr.open{border-bottom-color:var(--hair)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--navy)}
.brand img{height:34px;width:auto;aspect-ratio:386/140}
.nav-links{display:none;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-decoration:none;border-radius:var(--r-sm);transition:color .18s var(--smooth)}
.nav-links a[aria-current="page"]{color:var(--navy)}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--orange)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--navy)}}
.nav-cta{display:none}
.menu-btn{position:relative;width:44px;height:44px;border:0;background:transparent;color:var(--navy);border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menu-btn svg{width:24px;height:24px}
.menu-btn .x{display:none}
.hdr.open .menu-btn .x{display:block}.hdr.open .menu-btn .h{display:none}
.mobile-menu{display:none;border-top:1px solid var(--hair);background:var(--paper);padding:8px 20px 20px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);font-size:var(--fs-lg)}
.mobile-menu a:not(.btn)::after{content:'';width:8px;height:8px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(-45deg);margin-right:6px}
.mobile-menu a[aria-current="page"]::after{border-color:var(--orange)}
.mobile-menu a[aria-current="page"]{color:var(--navy)}
.mobile-menu .btn{margin-top:14px;width:100%}
.hdr.open .mobile-menu{display:block;animation:menuIn .22s var(--ease) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:860px){
  .nav-links{display:flex}.nav-cta{display:inline-flex}.menu-btn{display:none}.hdr.open .mobile-menu{display:none}
}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding:56px 0 34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-t)}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--turq)}
.hero h1{font-size:var(--fs-3xl);font-weight:700;color:var(--navy);margin-top:18px;max-width:14ch}
/* the headline rises out of its own mask, one sentence at a time. the padding
   and the equal negative margin give the descenders somewhere to live: without
   them overflow:hidden shaves the tail off every g, p and y. */
.rise{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rise>span{display:inline-block;animation:riseIn .62s var(--ease) both;animation-delay:.06s}
.rise+.rise>span{animation-delay:.16s}
@keyframes riseIn{from{transform:translateY(106%)}to{transform:none}}
/* the bridge under the headline, drawn once the second line has landed */
.hero-line{display:block;margin-top:12px;overflow:visible}
.hero-line path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:190;stroke-dashoffset:190;animation:draw .8s var(--ease) .44s both}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lede{font-size:var(--fs-lg);color:var(--muted);margin-top:18px;max-width:52ch}
.hero .mm{color:var(--muted);margin-top:10px;max-width:52ch;font-size:var(--fs-md)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.now-pill{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:18px;min-height:40px;padding:6px 14px 6px 10px;border-radius:var(--pill);background:var(--orange-tint);color:var(--orange-t);font-size:var(--fs-sm);font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .26s var(--spring),border-color .18s var(--smooth)}
.now-pill::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.now-pill:active{transform:scale(.97)}
.now-pill.docking{animation:dock .46s var(--spring) both}
@keyframes dock{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.now-pill .live-dot{background:var(--orange)}
.now-pill.is-next{background:var(--turq-tint);color:var(--turq-t)}.now-pill.is-next .live-dot{background:var(--turq);animation:none}
@media (hover:hover) and (pointer:fine){.now-pill:hover{border-color:currentColor}}
.reveal{animation:fadeUp var(--rv-dur) var(--ease) both}
.reveal-2{animation-delay:.06s}.reveal-3{animation-delay:.12s}.reveal-4{animation-delay:.18s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (min-width:720px){.hero{padding:84px 0 48px}}

/* ── departures board ────────────────────────────────────── */
.board-wrap{padding:0 0 64px}
.board{background:var(--deep);color:var(--on-dark);border-radius:22px;padding:22px 18px 18px;position:relative;overflow:hidden;scroll-margin-top:calc(var(--stick) + 12px + env(safe-area-inset-top))}
.board-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.board-hd h2{font-size:var(--fs-xl);font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);animation:blink 1.8s var(--smooth) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.board-clock{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);color:var(--soft);line-height:1.5;font-variant-numeric:tabular-nums}
.board-clock b{display:inline;color:#fff;font-weight:500;font-size:var(--fs-lg);margin-right:8px}
.board-cols,.board-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:6px 10px;align-items:center}
/* space for four rows before the feed lands, so the page does not jump */
.board-body{min-height:280px}
.board-cols{display:none;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--soft);padding:6px 0 10px;border-bottom:1px solid var(--line-d)}
.board-row{padding:12px 6px;margin:0 -6px;border-bottom:1px solid var(--line-d);grid-template-areas:"time class class" "sub sub status";text-decoration:none;color:inherit;border-radius:10px;transition:background-color .18s var(--smooth)}
.board-row.is-in{background:rgba(255,138,0,.07)}
.board-row:focus-visible{outline:3px solid var(--turq);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.board-row:hover{background:rgba(255,255,255,.05)}.board-row.is-in:hover{background:rgba(255,138,0,.11)}}
.board-row:last-child{border-bottom:0}
.col-status{perspective:300px}
.col-time{grid-area:time}.col-class{grid-area:class;min-width:0;overflow:hidden}.col-status{grid-area:status;justify-self:end}
.col-sub{grid-area:sub;font-size:11px;color:var(--soft);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-mode,.col-seats{display:none}
.fl{display:inline-block;width:.68em;height:1.45em;line-height:1.45em;text-align:center;background:var(--deep-3);color:#F4F6FB;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;border-radius:3px;margin-right:1.5px;position:relative;overflow:hidden;vertical-align:middle}
.fl::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(6,18,46,.6)}
.fl.f{animation:flap .1s linear}
@keyframes flap{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
.fl-word{white-space:nowrap;perspective:420px}
.st{display:inline-block;transform-origin:50% 50%;font-size:11px;font-weight:600;letter-spacing:.06em;padding:4px 9px;border-radius:var(--pill);white-space:nowrap;transition:background-color .3s var(--smooth)}
.st.st-flip{animation:stFlip .42s var(--smooth)}
@keyframes stFlip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.st-in{background:var(--orange);color:var(--on-orange)}
.st-board{background:#FFD08A;color:var(--on-orange)}
.st-ontime{background:var(--turq);color:var(--deep)}
.st-done{background:#3A4E8C;color:var(--on-dark)}
.st-full{background:#8A97BC;color:var(--deep)}
.st-sched{background:var(--tint-2);color:var(--deep)}
.board-empty{padding:26px 6px;color:var(--on-dark-2);font-size:var(--fs-md)}
.board-ft{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:var(--fs-sm);color:var(--on-dark-2)}
.board-ft a{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.board-ft a svg{transition:transform .26s var(--spring)}
@media (hover:hover) and (pointer:fine){.board-ft a:hover svg{transform:translateX(3px)}}
.board-live{font-variant-numeric:tabular-nums}
.board-note{margin-top:12px;font-size:var(--fs-sm);color:var(--on-dark-2);background:var(--deep-2);border-radius:var(--r-sm);padding:10px 14px;max-width:66ch}
/* the line under the board: where and when the school is open */
.board-under{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding:0 6px;font-size:var(--fs-sm);color:var(--muted)}
.board-under b{color:var(--navy);font-weight:600}
.board-under a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;position:relative;display:inline-block}
.board-under a::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
@media (min-width:720px){
  .board{padding:28px 30px 24px}
  .board-cols{display:grid}
  .board-cols,.board-row{grid-template-columns:76px minmax(0,1fr) 96px 88px 108px;gap:14px}
  .board-row{grid-template-areas:none;min-height:60px}
  .col-time,.col-class,.col-status{grid-area:auto}.col-status{justify-self:start}
  .col-sub{display:none}
  .col-mode,.col-seats{display:block}
  .fl{font-size:17px}
  .board-clock{text-align:right}
  .board-clock b{display:block;margin:0}
  .board-body{min-height:240px}
}
.board.is-preview .board-hd h2 .live-dot{background:var(--turq)}

/* full timetable page: several boards */
.board + .board{margin-top:18px}
.board-title{font-size:var(--fs-lg);font-weight:600;color:#fff;margin:0 0 4px}
.board-sub{font-size:var(--fs-sm);color:var(--soft);margin-bottom:10px}

/* ── the people row (About) ───────────────────────────────── */
.people{display:grid;gap:12px;margin-top:20px}
.person{background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);padding:16px;display:flex;gap:14px;align-items:flex-start}
.person .mono{flex:none;width:46px;height:46px;border-radius:50%;background:var(--tint);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-lg);letter-spacing:.02em}
.person b{display:block;font-weight:600;color:var(--navy);font-size:var(--fs-lg)}
.person .role{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.person p{margin-top:10px;color:var(--ink)}
.person-lead{border-color:var(--navy);align-items:center}
.person-lead .mono{width:56px;height:56px;background:var(--navy);color:#fff;font-size:var(--fs-xl)}
.portrait{flex:none;width:124px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--tint)}
@media (min-width:720px){.portrait{width:232px}}
.person-lead .said{margin-top:10px;font-size:var(--fs-xl);font-weight:600;color:var(--navy);line-height:1.3}
@media (min-width:720px){.person-lead .said{font-size:var(--fs-2xl)}}
@media (min-width:720px){
  .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .person-lead{grid-column:1/-1}
}

/* ── sections ────────────────────────────────────────────── */
.sec{padding:56px 0}
.sec-dark{background:var(--navy);color:#fff}
.sec-tint{background:var(--tint)}
.sec-h{max-width:60ch}
.sec-h h2{font-size:var(--fs-2xl);font-weight:700;color:var(--navy)}
.sec-dark .sec-h h2{color:#fff}
.sec-h p{margin-top:10px;color:var(--muted);font-size:var(--fs-md)}
.sec-dark .sec-h p{color:var(--on-dark-2)}
@media (min-width:720px){.sec{padding:80px 0}.sec-h h2{font-size:36px}}

/* one lesson, ten sections: the real shape of every ninety minutes */
.lesson{margin-top:28px}
.lesson ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:sec}
.lesson li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 14px;background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r-sm)}
.lesson li::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:var(--fs-sm);font-weight:500;color:var(--turq-t)}
.lesson li b{display:block;font-weight:600;color:var(--navy);font-size:var(--fs-md)}
.lesson li span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.lesson .lesson-end{margin-top:14px;font-size:var(--fs-sm);color:var(--muted);max-width:62ch}
@media (min-width:720px){.lesson ol{grid-template-columns:repeat(2,1fr);gap:10px 16px}}

.photos{display:grid;gap:14px;margin-top:28px}
.photo{border-radius:var(--r);overflow:hidden;background:var(--tint-2)}
.photo img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover}
.photo figcaption{padding:12px 4px 0}
.photo figcaption b{display:block;font-weight:600;color:var(--navy);font-size:var(--fs-lg)}
.photo figcaption span{color:var(--muted);font-size:var(--fs-sm)}
@media (min-width:720px){.photos{grid-template-columns:repeat(3,1fr);gap:18px}}

/* ladder */
.ladder{display:grid;gap:12px;margin-top:28px}
.rung{position:relative;display:block;background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);padding:18px;text-decoration:none;color:inherit;transition:transform .2s var(--ease),border-color .2s var(--smooth)}
.rung:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.rung:hover{transform:translateY(-3px);border-color:var(--navy)}}
.rung .lv{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--turq-t);background:var(--turq-tint);padding:3px 9px;border-radius:var(--pill)}
.rung h3{font-size:var(--fs-xl);font-weight:600;color:var(--navy);margin-top:12px}
.rung p{color:var(--muted);font-size:var(--fs-sm);margin-top:6px;min-height:2.6em}
.rung .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--muted)}
.rung .meta>span:first-child{white-space:nowrap}
.rung .price{max-width:78%;min-width:9ch;min-height:3.2em;color:var(--orange-t);font-weight:600;text-align:right}
.rung .price .amt{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.rung .price .unit{font-size:var(--fs-xs);font-weight:600}
.rung .price small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-xs);margin-top:2px}
.rung-dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.rung-dark h3{color:#fff}.rung-dark p,.rung-dark .meta{color:var(--on-dark-2)}
.rung-dark .lv{background:#1C3C8C;color:#BFE9F4}.rung-dark .price{color:#FFC061}.rung-dark .price small{color:var(--on-dark-2)}
.rung-dark .meta{border-top-color:#1C3C8C}
@media (min-width:720px){.ladder{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1000px){.ladder{grid-template-columns:repeat(4,1fr)}.ladder.l3{grid-template-columns:repeat(3,1fr)}}

/* cta band */
.cta{border-radius:22px;background:var(--navy);color:#fff;padding:36px 24px;text-align:center}
.cta h2{font-size:var(--fs-2xl);font-weight:700}
.cta p{margin-top:12px;color:var(--on-dark-2);max-width:56ch;margin-left:auto;margin-right:auto}
.cta .hero-cta{justify-content:center}
.cta .cta-line{margin-top:14px;font-size:var(--fs-md);color:#fff;font-weight:600}
.cta .cta-line[hidden]{display:none}
@media (min-width:720px){.cta{padding:56px 40px}.cta h2{font-size:36px}}

/* classes sub nav: sticky under the header, scrolls sideways on phones, highlights the section in view */
.subnav{position:sticky;top:66px;z-index:40;background:rgba(251,252,254,.86);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair);margin-top:8px}
.subnav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--pill);font-size:var(--fs-sm);font-weight:600;color:var(--navy);background:var(--tint);text-decoration:none;transition:background-color .18s var(--smooth),color .18s var(--smooth),transform .26s var(--spring)}
.subnav a:active{transform:scale(.96)}
.subnav a.on{background:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.subnav a:hover{background:var(--tint-2)}.subnav a.on:hover{background:var(--navy-2)}}

/* program detail (classes page) */
.prog{scroll-margin-top:140px;display:grid;gap:16px;padding:36px 0;border-top:1px solid var(--tint-2)}
.prog:first-of-type{border-top:0}
.prog-head .stage{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-t)}
.prog-head h2{font-size:var(--fs-2xl);font-weight:700;color:var(--navy);margin-top:6px}
.prog-head .lv{color:var(--muted);font-weight:600;margin-top:6px;font-size:var(--fs-md)}
.prog-head p{margin-top:14px;color:var(--ink);max-width:60ch}
.prog-head .mm{margin-top:10px;color:var(--muted);max-width:60ch;font-size:var(--fs-sm)}
.prog-grid{display:grid;gap:12px}
.pcard{background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);padding:18px}
.pcard h3{font-size:var(--fs-md);font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px}
.pcard h3 svg{width:18px;height:18px;color:var(--turq-t)}
.pcard ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:var(--fs-sm)}
.pcard li+li{margin-top:4px}
.pcard p{margin-top:8px;color:var(--muted);font-size:var(--fs-sm)}
.pcard dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:var(--fs-sm)}
.pcard dt{color:var(--muted)}.pcard dd{margin:0;font-weight:600;color:var(--ink)}
.pcard-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.pcard-navy h3,.pcard-navy dd{color:#fff}.pcard-navy h3 svg{color:#BFE9F4}.pcard-navy dt,.pcard-navy p{color:var(--on-dark-2)}
.pcard-navy .price{margin-top:10px;color:#FFC061}
.pcard-navy .price .amt{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.1}
.pcard-navy .price .unit{font-size:var(--fs-sm);font-weight:600}
.pcard-navy .price small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--on-dark-2);margin-top:4px}
.pcard-navy .facts{margin-top:10px;font-size:var(--fs-xs);color:var(--on-dark-2);padding-top:10px;border-top:1px solid #1C3C8C}
/* the lens: one segmented control, the whole page re-prices */
.lens-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.lens-bar .lbl{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.lens{display:inline-flex;gap:2px;padding:3px;background:var(--tint);border-radius:var(--pill)}
.lens button{position:relative;min-height:40px;padding:8px 14px;border:0;border-radius:var(--pill);background:transparent;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .18s var(--smooth),color .18s var(--smooth),transform .26s var(--spring)}
.lens button::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.lens button:active{transform:scale(.96)}
.lens button.on{background:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.lens button:not(.on):hover{color:var(--navy)}}
.price .amt{transition:opacity .18s var(--smooth)}
.prog-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (min-width:860px){.prog{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:32px;padding:56px 0}.prog-grid{grid-template-columns:repeat(2,1fr)}}

/* about + contact */
.about-grid{display:grid;gap:24px;margin-top:28px}
.about-grid p+p{margin-top:12px}
.facts{display:grid;gap:10px}
.fact{background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);padding:16px 18px}
.fact b{display:block;color:var(--navy);font-weight:600}
.fact span{color:var(--muted);font-size:var(--fs-sm)}
.about-grid p{max-width:62ch}
@media (min-width:860px){.about-grid{grid-template-columns:1.3fr 1fr;gap:40px}}
/* questions people ask at the desk */
.faq{display:grid;gap:8px;margin-top:24px;max-width:72ch}
.faq details{background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r-sm)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:12px 16px;font-weight:600;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:600;color:var(--turq-t);flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq p{padding:0 16px 14px;color:var(--muted);font-size:var(--fs-sm);max-width:62ch}
.faq p+p{padding-top:0;margin-top:-6px}
.reviews{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.contact{display:grid;gap:20px;margin-top:28px}
.contact-list{display:grid;gap:10px}
.contact-list a,.contact-list div{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.contact-list svg{width:22px;height:22px;color:var(--turq-t);flex:none}
.contact-list b{display:block;font-weight:600;color:var(--navy);font-size:var(--fs-md)}
.contact-list span{color:var(--muted);font-size:var(--fs-sm)}
form.enq{background:var(--surface);border:1px solid var(--tint-2);border-radius:var(--r);padding:20px}
form.enq label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy);margin:14px 0 6px}
form.enq label:first-of-type{margin-top:0}
form.enq input,form.enq select,form.enq textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--tint-2);border-radius:12px;background:var(--paper);font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .18s var(--smooth),box-shadow .18s var(--smooth)}
form.enq select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5578' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
form.enq [aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 3px rgba(226,75,74,.15)}
form.enq textarea{min-height:110px;resize:vertical}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(1,33,105,.12)}
form.enq .btn{width:100%;margin-top:18px}
.form-msg{margin-top:12px;font-size:var(--fs-sm);min-height:1.4em}
.form-msg.ok{color:var(--ok)}.form-msg.err{color:var(--warn)}
@media (min-width:860px){.contact{grid-template-columns:1fr 1.2fr;gap:32px}}

/* footer */
.ftr{background:var(--deep);color:var(--on-dark-2);padding:48px 0 calc(32px + env(safe-area-inset-bottom));margin-top:24px}
.ftr-grid{display:grid;gap:28px}
.ftr img{height:38px;width:auto;aspect-ratio:386/140}
.ftr h4{margin:0 0 10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ftr p,.ftr a{font-size:var(--fs-sm);color:var(--on-dark-2);text-decoration:none;line-height:1.7}
.ftr a{position:relative;display:inline-block}
.ftr a::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr-bottom{margin-top:36px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--soft)}
@media (min-width:720px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--deep);color:#fff;padding:12px 18px;border-radius:var(--pill);font-size:var(--fs-sm);pointer-events:none;transition:transform .25s var(--ease),opacity .25s var(--smooth);z-index:60;max-width:calc(100vw - 32px)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* reveal on scroll: only when JS is present, once, transform + opacity, 280 ms, staggered by --i */
.js .rv{opacity:0;transform:translateY(var(--rv-dist))}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--rv-dur) var(--smooth),transform var(--rv-dur) var(--ease);transition-delay:var(--rv-delay,calc(var(--i,0) * var(--rv-stag)))}

/* Cross-document page transitions (Safari 18+, Chrome 126+). The header is
   held still, so the chrome reads as one surface you keep while the content
   under it changes. The outgoing page fades; the incoming one fades AND rises,
   the same direction every card on the site travels, so arriving on a page
   feels like the start of it laying itself out rather than a cut.
   A browser without view transitions simply navigates, which is no worse than
   before, and a slow connection skips the transition rather than delaying it. */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
/* 14px, not the 28px a card travels: a whole page moving that far reads as a
   shove. Written as a literal on purpose. Custom properties inherit into the
   view-transition pseudo tree in theory, but an unresolved var() would drop
   the transform silently and leave the flat crossfade this replaces. */
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
::view-transition-old(root){animation:vtOut .2s var(--smooth) both}
::view-transition-new(root){animation:vtIn var(--rv-dur) var(--ease) both}
::view-transition-old(hdr),::view-transition-new(hdr){animation:none}

@media (prefers-contrast:more){.st,.rung .lv,.now-pill{outline:1px solid currentColor}}
@media print{.hdr,.ftr,.mobile-menu,.subnav,.toast{display:none}.board{background:#fff;color:#000}.fl{background:#eee;color:#000}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .now-pill,.subnav a,.board-row,.board-ft a svg{transition:none}
  .reveal,.reveal-2,.reveal-3,.reveal-4{animation:none}
  .rise>span,.rise+.rise>span{animation:none}
  .hero-line path{animation:none;stroke-dashoffset:0}
  .now-pill.docking{animation:none}
  .st.st-flip{animation:none}
  .fl.f{animation:none}
  .live-dot{animation:none}
  .btn,.rung,.menu-btn{transition:none}
  .hdr.open .mobile-menu{animation:none}
  .toast{transform:translate(-50%,0);transition:opacity .2s var(--smooth)}
}

main[tabindex="-1"]:focus{outline:none}