/* ============================================================
   FRENBRIDGE — FRENBRIDGE LEARNING HUB
   Design system: warm academic editorial.
   Navy + cream + gold, red reserved for action.
   Fraunces (display) / Work Sans (body) / IBM Plex Mono (labels)
   ============================================================ */

:root{
  --navy:#16233F;
  --navy-deep:#0D1729;
  --navy-soft:#26375C;
  --cream:#FAF5EC;
  --cream-2:#F2EADB;
  --surface:#FFFDF8;
  --red:#B5342A;
  --red-deep:#8E2620;
  --gold:#C89B3C;
  --gold-2:#E3C480;
  --ink:#1C1B19;
  --muted:rgba(28,27,25,0.70);
  --white:#FFFFFF;
  --line:rgba(22,35,63,0.13);
  --line-strong:rgba(22,35,63,0.24);
  --line-w:3px;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  --sh-sm:0 1px 2px rgba(22,35,63,0.05);
  --sh-md:0 1px 2px rgba(22,35,63,0.04), 0 10px 24px -16px rgba(22,35,63,0.30);
  --sh-lg:0 2px 4px rgba(22,35,63,0.04), 0 24px 48px -24px rgba(22,35,63,0.38);

  --ease:cubic-bezier(0.22, 0.61, 0.36, 1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
h1,h2,h3,h4,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--navy);
  line-height:1.14;
}
p{text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold-2); color:var(--navy-deep);}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:4px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:500;
}
/* eyebrow with the little rule in front, used above section titles */
.eyebrow.dashed{display:inline-flex; align-items:center; gap:12px;}
.eyebrow.dashed::before{content:""; width:26px; height:2px; background:var(--gold); border-radius:2px;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--navy); color:var(--cream); padding:12px 20px;
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; text-decoration:none;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}

/* ============ TOP NAV ============ */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,245,236,0.88);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw; gap:20px;
}
.brand{
  font-family:'Fraunces', serif; font-weight:600;
  color:var(--navy); text-decoration:none;
  font-size:1.12rem; letter-spacing:0.01em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:11px; flex:none;
}
.brand-text b{color:var(--red); font-weight:inherit;}
.brand-mark{height:38px; width:auto; display:block; flex:none;}

.nav-links{display:flex; align-items:center; gap:6px; flex:1; justify-content:center;}
.nav-link{
  position:relative; padding:9px 16px; text-decoration:none; white-space:nowrap;
  font-size:0.95rem; color:var(--navy); opacity:0.72;
  border-radius:var(--r-pill); transition:opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-link:hover{opacity:1; background:rgba(22,35,63,0.05);}
.nav-link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s var(--ease);
}
.nav-link.active{opacity:1; color:var(--red); font-weight:500;}
.nav-link.active::after{transform:scaleX(1);}

.nav-right{display:flex; align-items:center; gap:10px; flex:none;}
.nav-cta{
  font-family:'Work Sans', sans-serif; font-size:0.92rem; font-weight:500;
  background:var(--red); color:var(--white);
  padding:12px 24px; text-decoration:none; white-space:nowrap;
  border:1px solid var(--red); border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);
  transition:background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-cta:hover{background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-1px); box-shadow:var(--sh-md);}

.nav-toggle{
  display:none; width:44px; height:40px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:transparent; padding:0;
  align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{display:block; width:18px; height:1.5px; background:var(--navy); position:relative;}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--navy);
  transition:transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:940px){
  .nav-toggle{display:flex;}
  .site-nav{flex-wrap:wrap;}
  .nav-links{
    order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:2px;
    justify-content:flex-start; padding:10px 0 6px; display:none;
  }
  .site-nav.open .nav-links{display:flex;}
  .nav-link{padding:12px 14px; border-radius:var(--r-sm); font-size:1rem;}
  .nav-link::after{display:none;}
  .nav-link.active{background:rgba(181,52,42,0.08);}
  .nav-cta{padding:10px 18px; font-size:0.86rem;}
}
@media (max-width:600px){
  .brand-text{display:none;}
  .brand-mark{height:32px;}
}

/* ============ LAYOUT ============ */
section{padding:96px 10vw 88px; position:relative;}
@media (max-width:980px){ section{padding:64px 7vw 58px;} }
.max{max-width:1180px; margin:0 auto;}
.band{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band-navy{background:var(--navy-deep); color:var(--cream);}
.band-navy h2,.band-navy h3{color:var(--cream);}
.band-navy .eyebrow{color:var(--gold-2);}

.page-hero{
  padding-top:74px; padding-bottom:62px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 78% 12%, rgba(200,155,60,0.16), transparent 58%),
    radial-gradient(ellipse at 8% 92%, rgba(22,35,63,0.07), transparent 52%),
    var(--cream);
}
.breadcrumb{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.09em; text-transform:uppercase; opacity:0.55; margin-bottom:20px;
}
.breadcrumb a{text-decoration:none; border-bottom:1px solid currentColor;}

.sec-head{margin-bottom:52px; max-width:62ch;}
.sec-head h2{font-size:clamp(2rem, 4vw, 3rem); margin-top:14px;}
.sec-head p{margin-top:16px; color:var(--muted); font-size:1.02rem;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ============ BUTTONS ============ */
.btn{
  font-family:'Work Sans', sans-serif; font-size:0.95rem; font-weight:500;
  padding:14px 28px; border-radius:var(--r-pill); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  border:1px solid var(--navy); background:transparent; color:var(--navy);
  transition:background 0.2s var(--ease), color 0.2s var(--ease),
             border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--navy); color:var(--cream); box-shadow:var(--sh-sm);}
.btn-primary:hover{background:var(--navy-soft); border-color:var(--navy-soft); box-shadow:var(--sh-md);}
.btn-red{background:var(--red); border-color:var(--red); color:var(--white); box-shadow:var(--sh-sm);}
.btn-red:hover{background:var(--red-deep); border-color:var(--red-deep); box-shadow:var(--sh-md);}
.btn-outline:hover{background:var(--navy); color:var(--cream);}
.btn-ghost{border-color:var(--line-strong); background:var(--surface);}
.btn-ghost:hover{border-color:var(--navy); background:var(--surface);}
.btn-sm{padding:10px 20px; font-size:0.88rem;}
.band-navy .btn-outline{border-color:rgba(250,245,236,0.5); color:var(--cream);}
.band-navy .btn-outline:hover{background:var(--cream); color:var(--navy);}

/* ============ HOME HERO ============ */
.hero{
  padding-top:76px; padding-bottom:80px;
  background:
    radial-gradient(ellipse at 88% 6%, rgba(200,155,60,0.20), transparent 54%),
    radial-gradient(ellipse at 4% 88%, rgba(181,52,42,0.07), transparent 50%),
    var(--cream);
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:64px; align-items:center;}
.hero-copy{min-width:0;}
.hero-kicker{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.hero-kicker .rule{width:40px; height:2px; background:var(--gold); border-radius:2px;}
.hero h1{font-size:clamp(2.3rem, 4.6vw, 4.05rem); max-width:15ch;}
.hero h1 em{font-style:italic; color:var(--red);}
.hero-sub{margin-top:26px; max-width:50ch; font-size:1.13rem; color:var(--muted);}
.hero-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero-trust{
  margin-top:30px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.hero-trust b{color:var(--navy); font-weight:500;}

/* hero image, framed with an offset gold plate behind it */
.hero-media{position:relative; justify-self:end; width:100%; max-width:520px;}
.hero-media::before{
  content:""; position:absolute; inset:22px -20px -20px 22px;
  border:1.5px solid var(--gold); border-radius:var(--r-lg); opacity:0.55; pointer-events:none;
}
.hero-media img{
  position:relative; width:100%; height:auto; aspect-ratio:4/3.4; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); background:var(--cream-2);
}
.hero-badge{
  position:absolute; left:-18px; bottom:26px; z-index:2;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px; box-shadow:var(--sh-md); max-width:210px;
}
.hero-badge .hb-num{font-family:'Fraunces', serif; font-size:1.5rem; color:var(--navy); line-height:1.1;}
.hero-badge .hb-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted); margin-top:4px;
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-media{justify-self:start; max-width:100%;}
  .hero-media::before{inset:16px -12px -12px 16px;}
  .hero-badge{left:auto; right:14px; bottom:-14px;}
}

.hero-plate{
  margin-top:66px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); overflow:hidden;
}
.plate-item{padding:24px 26px; border-right:1px solid var(--line);}
.plate-item:last-child{border-right:none;}
.plate-num{font-family:'Fraunces', serif; font-size:1.75rem; color:var(--navy); line-height:1.15;}
.plate-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted); margin-top:5px;
}
@media (max-width:860px){
  .hero-plate{grid-template-columns:1fr;}
  .plate-item{border-right:none; border-bottom:1px solid var(--line);}
  .plate-item:last-child{border-bottom:none;}
}
@media (max-width:420px){
  .hero-plate{grid-template-columns:1fr;}
  .plate-item{border-right:none; border-bottom:1px solid var(--line);}
  .plate-item:last-child{border-bottom:none;}
}

.mini-hero h1{font-size:clamp(2.2rem, 5vw, 3.5rem); max-width:20ch;}
.mini-hero .hero-sub{margin-top:18px;}

/* ============ DAILY DESK ============ */
.daily-desk{
  position:relative; overflow:hidden; padding:104px 0;
  background:
    linear-gradient(115deg, rgba(22,35,63,0.035) 1px, transparent 1px) 0 0/30px 30px,
    var(--cream-2);
}
.daily-desk::before{
  content:""; position:absolute; width:420px; height:420px; right:-180px; top:-170px;
  border:1px solid rgba(200,155,60,0.28); border-radius:50%; box-shadow:0 0 0 55px rgba(200,155,60,0.05);
}
.daily-heading{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,0.62fr); gap:56px; align-items:end; margin-bottom:36px; position:relative;}
.daily-heading h2{font-size:clamp(2rem,4vw,3.25rem); margin-top:14px; max-width:14ch;}
.daily-heading p{color:var(--muted); font-size:1rem; max-width:48ch; padding-bottom:8px;}
.daily-layout{display:grid; grid-template-columns:minmax(300px,0.78fr) minmax(0,1.72fr); gap:22px; position:relative; align-items:stretch;}
.daily-label{font-family:'IBM Plex Mono',monospace; font-size:.65rem; line-height:1; letter-spacing:.12em; text-transform:uppercase;}
.word-card{background:var(--navy); color:var(--cream); border-radius:var(--r-lg); padding:34px; min-height:520px; display:flex; flex-direction:column; box-shadow:var(--sh-lg); position:relative; overflow:hidden;}
.word-card::after{content:"MOT"; position:absolute; right:-10px; bottom:-36px; font-family:'Fraunces',serif; font-size:9rem; font-weight:600; letter-spacing:-.08em; color:rgba(250,245,236,.04); pointer-events:none;}
.word-card-top{display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--gold-2);}
.word-card-top time{font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:rgba(250,245,236,.58);}
.word-main{display:flex; align-items:center; gap:10px; margin-top:54px; position:relative; z-index:1;}
.word-article{font-family:'Fraunces',serif; font-style:italic; font-size:1.1rem; color:var(--gold-2); align-self:flex-start; padding-top:7px;}
.word-main h3{font-family:'Fraunces',serif; font-size:clamp(2.8rem,5vw,4.6rem); line-height:.95; color:var(--cream); font-weight:500; letter-spacing:-.04em; overflow-wrap:anywhere;}
.word-audio{margin-left:auto; flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(250,245,236,.24); color:var(--cream); background:rgba(250,245,236,.06); transition:transform .2s var(--ease),background .2s var(--ease);}
.word-audio:hover{transform:scale(1.06); background:rgba(250,245,236,.14);}
.word-audio:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px;}
.word-audio svg{width:19px; height:19px; fill:currentColor;}
.word-pronunciation{margin-top:14px; color:rgba(250,245,236,.5); font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em;}
.word-meaning{font-family:'Fraunces',serif; color:var(--gold-2); font-size:1.15rem; margin-top:24px;}
.word-note{color:rgba(250,245,236,.72); font-size:.9rem; margin-top:10px; max-width:36ch;}
.word-example{margin-top:auto; padding-top:28px; border-top:1px solid rgba(250,245,236,.16); position:relative; z-index:1;}
.word-example span{font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,245,236,.45);}
.word-example p{font-family:'Fraunces',serif; font-size:1.08rem; margin-top:8px; color:var(--cream);}
.word-example small{display:block; margin-top:5px; color:rgba(250,245,236,.55); font-size:.75rem;}
.news-desk{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-sm);}
.news-desk-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:25px; border-bottom:1px solid var(--line);}
.news-desk-head .daily-label{color:var(--red);}
.news-desk-head h3{font-size:1.65rem; margin-top:8px;}
.news-status{display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding-top:4px; white-space:nowrap;}
.news-status i{display:block; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(200,155,60,.13);}
.news-status.is-live i{background:#299766; box-shadow:0 0 0 4px rgba(41,151,102,.13);}
.news-status.is-error i{background:var(--red); box-shadow:none;}
.news-columns{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.news-country{padding:27px 25px 2px 0; min-width:0;}
.news-country + .news-country{border-left:1px solid var(--line); padding-left:25px; padding-right:0;}
.country-heading{display:flex; gap:12px; align-items:center; margin-bottom:20px;}
.country-flag{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--cream-2); border:1px solid var(--line); font-size:1.15rem;}
.country-heading span:not(.country-flag){display:block; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.55rem; color:var(--muted);}
.country-heading h4{font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600; color:var(--navy); margin-top:2px;}
.news-item{display:block; color:inherit; text-decoration:none; padding:16px 0; border-top:1px solid var(--line);}
.news-item:first-child{border-top:none; padding-top:3px;}
.news-item-title{font-family:'Fraunces',serif; color:var(--navy); font-size:1rem; line-height:1.35; transition:color .2s var(--ease);}
.news-item:hover .news-item-title{color:var(--red);}
.news-item-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:.55rem; line-height:1.35; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;}
.news-item-meta b{color:var(--navy-soft); font-weight:500;}
.news-empty{padding:26px 0; color:var(--muted); font-size:.85rem; line-height:1.6;}
.news-empty a{color:var(--red); text-decoration:underline; text-underline-offset:3px;}
.news-footnote{border-top:1px solid var(--line); padding-top:16px; margin-top:16px; font-size:.68rem; color:var(--muted);}
.news-skeleton{padding:15px 0; border-top:1px solid var(--line);}
.news-skeleton:first-child{border-top:none;}
.news-skeleton span{display:block; height:9px; margin-top:8px; border-radius:10px; background:linear-gradient(90deg,var(--cream-2),rgba(200,155,60,.13),var(--cream-2)); background-size:220% 100%; animation:dailyShimmer 1.6s infinite;}
.news-skeleton span:nth-child(1){width:92%; height:12px;}.news-skeleton span:nth-child(2){width:72%; height:12px;}.news-skeleton span:nth-child(3){width:42%;}
/* Fil direct — the moving headline strip at the top of the page, fed by /api/daily-brief. */
.fil-ticker{
  display:flex; align-items:stretch; gap:0; width:100%; min-width:0; overflow:hidden;
  background:var(--navy); color:var(--cream); border-bottom:1px solid rgba(250,245,236,.12);
}
.fil-ticker[hidden]{display:none;}
.fil-ticker-head{display:flex; align-items:center; gap:9px; flex:0 0 auto; padding:0 18px 0 max(18px,5vw); background:var(--red); color:var(--cream);}
.fil-ticker-head .daily-label{white-space:nowrap; font-size:.6rem;}
.fil-ticker-pulse{width:7px; height:7px; border-radius:50%; background:var(--gold-2); animation:filPulse 1.9s infinite;}
.fil-ticker-viewport{flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center; padding:11px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
.fil-ticker-track{display:flex; align-items:center; flex:0 0 auto; width:max-content; animation:filScroll var(--fil-duration,52s) linear infinite;}
/* Nothing is worth scrolling until the day's headlines have actually landed. */
.fil-ticker:not(.is-ready) .fil-ticker-track{animation:none;}
.fil-ticker-placeholder{font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(250,245,236,.5);}
.fil-ticker:hover .fil-ticker-track,
.fil-ticker:focus-within .fil-ticker-track{animation-play-state:paused;}
.fil-ticker.is-paused .fil-ticker-track{animation-play-state:paused;}
.fil-ticker-item{display:inline-flex; align-items:baseline; gap:9px; padding:0 26px; color:inherit; text-decoration:none; white-space:nowrap; border-left:1px solid rgba(250,245,236,.16);}
.fil-ticker-item:first-child{border-left:0;}
.fil-ticker-flag{font-size:.9rem;}
.fil-ticker-origin{font-family:'IBM Plex Mono',monospace; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2);}
.fil-ticker-title{font-family:'Fraunces',serif; font-size:.9rem; color:var(--cream); transition:color .2s var(--ease);}
.fil-ticker-item:hover .fil-ticker-title,
.fil-ticker-item:focus-visible .fil-ticker-title{color:var(--gold-2);}
.fil-ticker-item:focus-visible{outline:2px solid var(--gold-2); outline-offset:-4px;}
.fil-ticker-source{font-family:'IBM Plex Mono',monospace; font-size:.55rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(250,245,236,.5);}
.fil-ticker-toggle{flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:0 max(16px,5vw) 0 16px; font-family:'IBM Plex Mono',monospace; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,245,236,.66); background:rgba(250,245,236,.05); border:0; border-left:1px solid rgba(250,245,236,.16); transition:color .2s var(--ease), background .2s var(--ease);}
.fil-ticker-toggle:hover{color:var(--cream); background:rgba(250,245,236,.12);}
.fil-ticker-toggle:focus-visible{outline:2px solid var(--gold-2); outline-offset:-3px;}
.fil-ticker-toggle-icon{width:8px; height:9px; border-left:2.5px solid currentColor; border-right:2.5px solid currentColor;}
.fil-ticker.is-paused .fil-ticker-toggle-icon{width:0; height:0; border:5px solid transparent; border-left:8px solid currentColor; border-right:0;}
@keyframes filScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes filPulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);}}
@media (max-width:680px){
  /* The flags and country names inside each headline carry the origin, so the bar keeps
     its label in the accessibility tree but drops it visually to stay one row tall. */
  .fil-ticker-head{padding:0 13px 0 max(13px,4vw);}
  .fil-ticker-head .daily-label{font-size:0; letter-spacing:0;}
  .fil-ticker-viewport{padding:10px 0;}
  .fil-ticker-item{padding:0 18px;}
  .fil-ticker-title{font-size:.85rem;}
  .fil-ticker-toggle{padding:0 max(14px,4vw) 0 14px;}
  .fil-ticker-toggle span:not(.fil-ticker-toggle-icon){font-size:0;}
}
.daily-noscript{margin-top:18px; padding:12px 16px; border-left:3px solid var(--red); background:var(--surface); color:var(--muted);}
@keyframes dailyShimmer{to{background-position:-220% 0;}}
@media (max-width:980px){.daily-layout{grid-template-columns:1fr;}.word-card{min-height:440px;}.daily-heading{grid-template-columns:1fr; gap:16px;}.daily-heading h2{max-width:none;}.daily-heading p{padding:0;}}
@media (max-width:680px){.daily-desk{padding:78px 0;}.news-columns{grid-template-columns:1fr;}.news-country{padding:24px 0 6px;}.news-country + .news-country{border-left:0; border-top:1px solid var(--line); padding:27px 0 6px;}.news-desk,.word-card{padding:24px;}.word-main{margin-top:42px;}.word-main h3{font-size:2.8rem;}.news-desk-head{align-items:flex-start;}.news-status{font-size:0;}.news-status i{margin-top:2px;}}
@media (prefers-reduced-motion:reduce){
  .news-skeleton span{animation:none;}
  .fil-ticker-pulse{animation:none;}
  .fil-ticker-track{animation:none;}
  .fil-ticker-viewport{overflow-x:auto;}
}

/* ============ MEET YOUR TUTOR ============ */
.tutor-lead{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:66px; align-items:center;}
@media (max-width:940px){.tutor-lead{grid-template-columns:1fr; gap:40px;}}
.tutor-frame{position:relative; max-width:440px; width:100%;}
.tutor-frame::before{
  content:""; position:absolute; inset:-18px -18px 22px 22px;
  background:var(--gold); opacity:0.16; border-radius:var(--r-lg); pointer-events:none;
}
.tutor-frame img{
  position:relative; width:100%; height:auto; aspect-ratio:3/3.6; object-fit:cover; object-position:center 16%;
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); background:var(--cream-2);
}
.tutor-credential{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 22px;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--navy);
}
.tutor-credential span{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 14px; box-shadow:var(--sh-sm);
}
.tutor-lead h2{font-size:clamp(1.9rem, 3.6vw, 2.85rem);}
.tutor-lead p{color:var(--muted); margin-bottom:18px; max-width:58ch;}
.tutor-skills{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px;}
.tutor-skills li{
  list-style:none; font-size:0.83rem; color:var(--navy);
  background:rgba(200,155,60,0.14); border-radius:var(--r-pill); padding:6px 14px;
}

/* the fuller profile block used on the About page */
.tutor-profile{display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:66px; align-items:start;}
.tutor-profile-media{display:grid; gap:30px;}
.tutor-bio p{margin-bottom:20px; max-width:62ch; color:var(--muted);}
.tutor-bio p:first-child{font-size:1.06rem;}
@media (max-width:900px){
  .tutor-profile{grid-template-columns:1fr; gap:38px;}
  .tutor-profile-media{gap:26px;}
}
/* portrait card (kept for the About page) */
.tutor-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 14px 0; position:relative; max-width:420px; width:100%; box-shadow:var(--sh-md);
}
.tutor-photo{border-radius:var(--r-md); overflow:hidden; background:var(--cream-2);}
.tutor-photo img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 18%;}
.tutor-meta{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 6px 18px;}
.tutor-name{font-family:'Fraunces', serif; font-size:1.05rem; color:var(--navy); line-height:1.2;}
.tutor-role{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--red);}
@media (max-width:900px){.tutor-card{max-width:330px;}}

/* ============ COURSE CARDS — the learning pathway ============ */
.pathway-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
@media (max-width:1000px){.pathway-grid{grid-template-columns:repeat(2,1fr); gap:22px;}}
@media (max-width:680px){.pathway-grid{grid-template-columns:1fr;}}

.course-card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-md); transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.course-card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg);}
.cc-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--navy);}
.cc-media img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease);}
.course-card:hover .cc-media img{transform:scale(1.04);}
.cc-flag{
  position:absolute; top:12px; left:12px; z-index:1;
  background:rgba(250,245,236,0.94); color:var(--navy);
  font-family:'IBM Plex Mono', monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--r-pill); box-shadow:var(--sh-sm);
}
.cc-flag.open{background:var(--red); color:var(--white);}
.cc-body{padding:22px 24px 0; display:flex; flex-direction:column; flex:1;}
.cc-meta{
  font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.cc-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--gold); display:inline-block;}
.cc-body h3{font-size:1.28rem; margin:12px 0 10px;}
.cc-desc{font-size:0.92rem; color:var(--muted); flex:1;}
.cc-tutor{
  margin-top:16px; font-size:0.83rem; color:var(--navy); opacity:0.82;
  display:flex; align-items:center; gap:8px;
}
.cc-tutor .cc-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:center 15%;
  border:1px solid var(--line); flex:none;
}
.cc-tutor .cc-mark{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--cream-2); border:1px solid var(--gold);
}
.cc-tutor .cc-mark svg{
  width:15px; height:15px; fill:none; stroke:var(--navy); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.cc-foot{
  margin-top:18px; padding:16px 24px 20px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-left:-24px; margin-right:-24px;
}
.cc-price .cc-plan{
  font-family:'IBM Plex Mono', monospace; font-size:0.58rem; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--muted); display:block;
}
.cc-price .cc-amount{font-family:'Fraunces', serif; font-size:1.3rem; color:var(--navy);}
.cc-price .cc-per{font-size:0.75rem; color:var(--muted);}
.cc-actions{display:flex; align-items:center; gap:8px;}

/* course card — inline "Details" disclosure (courses page) */
.cc-details{margin:0 -24px; border-top:1px solid var(--line);}
.cc-foot:has(+ .cc-details){padding-bottom:16px;}
.cc-details summary{
  list-style:none; cursor:pointer; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--navy); transition:background 0.2s var(--ease), color 0.2s var(--ease);
}
.cc-details summary::-webkit-details-marker{display:none;}
.cc-details summary:hover{background:rgba(22,35,63,0.035);}
.cc-details summary:focus-visible{outline:2px solid var(--gold); outline-offset:-3px;}
.cc-details summary .faq-sign{width:14px; height:14px;}
.cc-details summary .faq-sign::before{top:6px; width:14px;}
.cc-details summary .faq-sign::after{left:6px; height:14px;}
.cc-details[open]{background:var(--cream-2);}
.cc-details[open] summary{color:var(--red);}
.cc-details[open] .faq-sign::after{transform:scaleY(0); opacity:0;}
.cc-panel{padding:2px 24px 22px;}
.cc-panel p{font-size:0.87rem; color:var(--muted);}
.cc-panel b{color:var(--navy);}
.cc-panel ul{list-style:none; margin:14px 0 0; display:grid; gap:9px;}
.cc-panel li{position:relative; padding-left:19px; font-size:0.87rem; color:var(--muted); line-height:1.5;}
.cc-panel li::before{
  content:""; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%; border:1.5px solid var(--gold);
}
.cc-note{
  margin-top:16px; padding-left:13px; border-left:2px solid var(--gold);
  font-size:0.81rem !important; color:var(--navy); opacity:0.75;
}

/* ============ HIGHLIGHTS ============ */
.highlight-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:940px){.highlight-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.highlight-grid{grid-template-columns:1fr;}}
.highlight{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px 28px; box-shadow:var(--sh-sm);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.highlight:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:rgba(200,155,60,0.55);}
.highlight .hl-icon{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(200,155,60,0.16); color:var(--navy); margin-bottom:16px;
}
.highlight .hl-icon svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;}
.highlight h3{font-size:1.1rem; margin-bottom:8px;}
.highlight p{font-size:0.9rem; color:var(--muted);}

/* ============ TESTIMONIALS ============ */
.tstm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:940px){.tstm-grid{grid-template-columns:1fr; max-width:620px; margin:0 auto;}}
.tstm-card{
  background:var(--navy); color:var(--cream); border-radius:var(--r-lg);
  padding:30px 28px 26px; display:flex; flex-direction:column;
  box-shadow:var(--sh-md); transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.tstm-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg);}
.tstm-mark{font-family:'Fraunces', serif; font-size:2.6rem; line-height:0.7; color:var(--gold-2); margin-bottom:18px;}
.tstm-card blockquote{font-size:1rem; line-height:1.7; opacity:0.94; flex:1;}
.tstm-who{display:flex; align-items:center; gap:12px; margin-top:26px;}
.tstm-initial{
  width:40px; height:40px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:'Fraunces', serif; font-size:1rem;
}
.tstm-name{font-weight:500; font-size:0.94rem;}
.tstm-role{font-family:'IBM Plex Mono', monospace; font-size:0.63rem; letter-spacing:0.08em;
  text-transform:uppercase; opacity:0.6; margin-top:2px;}

/* ============ FAQ ============ */
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;}}
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); overflow:hidden; transition:border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.faq-item[open]{border-color:var(--gold); box-shadow:var(--sh-md);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:500; color:var(--navy); font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:rgba(22,35,63,0.025);}
.faq-sign{position:relative; width:18px; height:18px; flex:none;}
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; background:var(--gold); border-radius:2px;
  transition:transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq-sign::before{left:0; top:8px; width:18px; height:2px;}
.faq-sign::after{left:8px; top:0; width:2px; height:18px;}
.faq-item[open] .faq-sign::after{transform:scaleY(0); opacity:0;}
.faq-answer{padding:0 22px 22px; color:var(--muted); font-size:0.94rem;}
.faq-answer p + p{margin-top:12px;}
.faq-answer a{color:var(--red);}

/* ============ CARD LINK ROWS ============ */
.card-link{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 26px; text-decoration:none; margin-bottom:12px; box-shadow:var(--sh-sm);
  transition:transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card-link:hover{transform:translateX(4px); box-shadow:var(--sh-md); border-color:rgba(200,155,60,0.6);}
.card-link .cl-title{font-family:'Fraunces', serif; font-size:1.22rem; color:var(--navy);}
.card-link .cl-sub{font-size:0.86rem; color:var(--muted); margin-top:4px;}
.card-link .cl-arrow{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--red);}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:66px; align-items:start;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr; gap:36px;}}
.about-body p{margin-bottom:18px; max-width:56ch; color:var(--muted);}
.brand-lockup{margin-bottom:26px;}
.brand-lockup img{width:230px; height:auto; max-width:60%;}
@media (max-width:700px){.brand-lockup img{width:170px; max-width:52%;}}
.stamp{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; box-shadow:var(--sh-md);
}
.stamp-row{display:flex; justify-content:space-between; gap:18px; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:0.92rem;}
.stamp-row:last-child{border-bottom:none;}
.stamp-row span:first-child{font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); flex:none;}
.stamp-row span:last-child{text-align:right; color:var(--navy);}

/* ============ DIRECTED PROMPTS ============ */
.prompt-list{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-bottom:48px; box-shadow:var(--sh-sm);
}
.prompt-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 26px; text-decoration:none; border-bottom:1px solid var(--line);
  transition:background 0.2s var(--ease);
}
.prompt-row:last-child{border-bottom:none;}
.prompt-row:hover{background:rgba(200,155,60,0.09);}
.prompt-row:hover .prompt-a{color:var(--red);}
.prompt-q{font-family:'Fraunces', serif; font-style:italic; font-size:1.06rem; color:var(--navy);}
.prompt-a{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--muted); transition:color 0.2s var(--ease);}
@media (max-width:700px){.prompt-row{flex-direction:column; align-items:flex-start; gap:8px;}}

/* ============ COURSE LIST (compact table view) ============ */
.course-list{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
}
.course-row{display:grid; grid-template-columns:78px 1.4fr 1fr 130px 150px; gap:24px; align-items:center;
  padding:24px 26px; border-bottom:1px solid var(--line); transition:background 0.2s var(--ease);}
.course-row:last-child{border-bottom:none;}
.course-row:hover{background:rgba(200,155,60,0.08);}
@media (max-width:900px){.course-row{grid-template-columns:1fr; gap:10px; padding:22px;}}
.course-code{font-family:'IBM Plex Mono', monospace; color:var(--red); font-size:0.82rem;}
.course-title{font-family:'Fraunces', serif; font-size:1.24rem; color:var(--navy);}
.course-desc{font-size:0.9rem; color:var(--muted);}
.course-price{font-family:'IBM Plex Mono', monospace; font-size:0.85rem; text-align:right; color:var(--navy);}
@media (max-width:900px){.course-price{text-align:left;}}
.course-book{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.04em;
  text-transform:uppercase; text-align:right; text-decoration:underline; white-space:nowrap; color:var(--red);}
@media (max-width:900px){.course-book{text-align:left;}}

/* ============ STORE ============ */
.store-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px;}
.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 22px 22px; display:flex; flex-direction:column; min-height:240px; box-shadow:var(--sh-sm);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.product:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.product-mark{
  width:100%; height:110px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:2.4rem; color:var(--navy); margin-bottom:18px;
  background:linear-gradient(145deg, rgba(200,155,60,0.18), rgba(22,35,63,0.06));
}
.product-title{font-weight:500; color:var(--navy); font-size:0.98rem;}
.product-cat{font-family:'IBM Plex Mono', monospace; font-size:0.63rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.08em; margin:6px 0 14px;}
.product-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.product-price{font-family:'IBM Plex Mono', monospace; font-size:0.9rem; color:var(--navy);}
.add-btn{
  background:transparent; border:1px solid var(--line-strong); color:var(--navy); font-size:0.72rem;
  padding:9px 14px; border-radius:var(--r-pill); font-family:'Work Sans', sans-serif; font-weight:500;
  transition:background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.add-btn:hover{background:var(--navy); color:var(--cream); border-color:var(--navy);}
.add-btn.added{background:var(--red); border-color:var(--red); color:var(--white);}
.cart-bar{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:24px; padding:18px 24px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
}

/* ============ FORMS / BOOKING ============ */
.booking-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:66px;}
@media (max-width:900px){.booking-wrap{grid-template-columns:1fr; gap:40px;}}
.field{margin-bottom:20px;}
.field label{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.66rem;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:12px 14px; font-family:'Work Sans', sans-serif; font-size:1rem; color:var(--ink);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--red); outline:none; box-shadow:0 0 0 3px rgba(181,52,42,0.12);
}
.field input::placeholder, .field textarea::placeholder{color:rgba(28,27,25,0.45);}

/* Forms sitting on the navy panel (enrolment). Typed letters and numbers
   must stay legible, so the field itself goes dark and the text goes cream. */
.form-on-dark .field label{color:rgba(250,245,236,0.72);}
.form-on-dark .field input,
.form-on-dark .field select,
.form-on-dark .field textarea{
  background:var(--navy-deep); border-color:rgba(250,245,236,0.34); color:var(--cream);
  color-scheme:dark;
}
.form-on-dark .field input::placeholder,
.form-on-dark .field textarea::placeholder{color:rgba(250,245,236,0.52);}
.form-on-dark .field select option{background:var(--navy-deep); color:var(--cream);}
.form-on-dark .field input:focus,
.form-on-dark .field select:focus,
.form-on-dark .field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,155,60,0.28);
}
.form-on-dark .field input:-webkit-autofill,
.form-on-dark .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px var(--navy-deep) inset;
  caret-color:var(--cream);
}
.form-on-dark .form-note{color:rgba(250,245,236,0.72);}
.field-row{display:flex; gap:18px; flex-wrap:wrap;}
.field-row .field{flex:1; min-width:180px;}
.form-note{font-size:0.8rem; color:var(--muted); margin-top:18px; max-width:46ch;}
.confirm-box{
  display:none; background:rgba(200,155,60,0.12); border:1px solid var(--gold);
  border-radius:var(--r-md); padding:18px 22px; margin-top:22px; font-size:0.92rem;
}
.confirm-box.show{display:block;}
.schedule-plate{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-md);
}
.schedule-head{
  background:var(--navy); color:var(--cream); padding:16px 22px;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase;
}
.schedule-row{display:flex; justify-content:space-between; gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--line); font-size:0.9rem;}
.schedule-row:last-child{border-bottom:none;}
.schedule-row .day{font-family:'Fraunces', serif; color:var(--navy); font-size:1.04rem;}
.schedule-row .time{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--muted); text-align:right;}

.pay-plate .schedule-head{background:var(--red);}
.pay-row .label{font-family:'IBM Plex Mono', monospace; font-size:0.65rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);}
.pay-row .value{font-family:'Fraunces', serif; color:var(--navy); font-size:1.02rem; text-align:right;}
.pay-row .value.acct{font-family:'IBM Plex Mono', monospace; font-size:1.1rem; letter-spacing:0.09em;
  color:var(--red); font-weight:500;}
.pay-foot{padding:16px 22px; border-top:1px solid var(--line); font-size:0.78rem;
  line-height:1.6; color:var(--muted);}
.pay-foot a{color:var(--red);}
@media (max-width:420px){
  .pay-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .pay-row .value{text-align:left;}
}

/* ============ LOGIN / STUDENT PORTAL ============ */
.auth-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
@media (max-width:900px){.auth-wrap{grid-template-columns:1fr; gap:38px;}}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 34px 32px; box-shadow:var(--sh-lg);
}
.auth-card h2{font-size:1.6rem;}
.auth-card > p{color:var(--muted); font-size:0.94rem; margin:10px 0 26px;}
.auth-list{list-style:none; display:grid; gap:14px; margin-top:26px;}
.auth-list li{display:flex; gap:12px; align-items:flex-start; font-size:0.94rem; color:var(--muted);}
.auth-list .tick{
  width:22px; height:22px; border-radius:50%; background:rgba(200,155,60,0.2); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px;
}
.auth-list .tick svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;}
.auth-recover{margin-top:28px; border-top:1px solid var(--line); padding-top:22px;}
.auth-recover summary{
  cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--red);
}
.auth-recover summary:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:var(--r-sm);}
.auth-recover > p{color:var(--muted); font-size:0.9rem; margin:14px 0 20px;}
.confirm-box[data-error]{background:rgba(181,52,42,0.09); border-color:var(--red);}
.pay-foot .btn{display:inline-flex; text-decoration:none;}
[hidden]{display:none !important;}

/* ============ ONLINE CLASSES ============ */
.online-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start;}
@media (max-width:900px){.online-grid{grid-template-columns:1fr; gap:32px;}}
.online-media{display:grid; gap:14px; align-content:start;}
.online-media img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--sh-md);}
.online-panel{display:flex; flex-direction:column;}
.online-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

/* ============ PHOTO STRIP ============ */
.photo-strip{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.ps-item{display:block; width:116px; height:116px; border-radius:var(--r-md); overflow:hidden;
  background:var(--navy); box-shadow:var(--sh-sm);}
.ps-item img{width:100%; height:100%; object-fit:cover; transition:transform 0.4s var(--ease), opacity 0.2s var(--ease);}
.ps-item:hover img{transform:scale(1.07); opacity:0.92;}
.ps-more{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.05em;
  text-transform:uppercase; margin-left:6px;}
.ps-more a{text-decoration:underline; color:var(--red);}
@media (max-width:600px){.ps-item{width:92px; height:92px;}}

/* ============ GALLERY ============ */
.gallery-grid{display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:132px; gap:12px;}
@media (max-width:800px){
  .gallery-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:94px; gap:8px;}
  .gallery-grid .g-tile.span2{grid-column:span 3;}
}
.g-tile{background:var(--navy); position:relative; overflow:hidden; display:flex; align-items:flex-end;
  padding:14px; border-radius:var(--r-md); box-shadow:var(--sh-sm);}
.g-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.45s var(--ease);}
.g-tile:hover img{transform:scale(1.06);}
.g-tile.contain img{object-fit:contain; background:var(--cream);}
.g-tile.contain::after{height:34%; background:linear-gradient(to top, rgba(13,23,41,0.72), transparent);}
.g-tile span{position:relative; z-index:1; color:var(--cream); font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem; letter-spacing:0.07em; text-transform:uppercase;}
.g-tile::after{content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:0;
  background:linear-gradient(to top, rgba(13,23,41,0.86), transparent);}
.g-tile.r{background:var(--red);}
.g-tile.c{background:var(--cream-2);}
.g-tile.c span{color:var(--navy); opacity:0.65;}
.g-tile.span2{grid-column:span 2;}
.g-tile.row2{grid-row:span 2;}

/* ============ BLOG ============ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; box-shadow:var(--sh-sm);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.blog-tag{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--red);}
.blog-card h2{font-size:1.18rem; margin:12px 0 10px;}
.blog-card p{font-size:0.9rem; color:var(--muted);}
.blog-read{display:inline-block; margin-top:16px; font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem; text-decoration:underline; color:var(--red);}

/* ============ CONTACT ============ */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:66px;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr; gap:40px;}}
.map-plate{border-radius:var(--r-lg); aspect-ratio:4/3.4; position:relative; overflow:hidden;
  background:var(--navy); box-shadow:var(--sh-md);}
.map-plate iframe{width:100%; height:100%; border:0; filter:grayscale(0.25) contrast(1.04);}
.contact-info p{margin-bottom:12px; font-size:0.95rem; color:var(--muted);}
.contact-info p strong{color:var(--navy); font-weight:500;}
.contact-info .eyebrow{margin-top:26px; display:block;}
.social-row{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.social-row a{
  width:42px; height:42px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--navy);
  background:var(--surface);
  transition:background 0.2s var(--ease), color 0.2s var(--ease),
             border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-row a svg{width:17px; height:17px; fill:currentColor; display:block;}
.social-row a:hover{transform:translateY(-2px);}
.social-row a.wa:hover{background:#25D366; border-color:#25D366; color:#fff;}
.social-row a.ig:hover{background:#C13584; border-color:#C13584; color:#fff;}
.social-row a.fb:hover{background:#1877F2; border-color:#1877F2; color:#fff;}
.social-row a.tt:hover{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ============ FOOTER ============ */
footer{background:var(--navy-deep); color:var(--cream); padding:66px 10vw 34px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px;}
footer .display{color:var(--cream); font-size:1.6rem;}
.foot-logo{display:inline-block; background:var(--cream); border-radius:var(--r-md); padding:14px 18px; line-height:0;}
.foot-logo img{width:170px; height:auto; display:block;}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col h2{font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold-2); opacity:0.85; margin-bottom:14px;}
.foot-col a, .foot-col p{display:block; font-size:0.88rem; opacity:0.82; margin-bottom:9px; text-decoration:none;}
.foot-col a{transition:opacity 0.2s var(--ease), color 0.2s var(--ease);}
.foot-col a:hover{opacity:1; color:var(--gold-2);}
.foot-col p.foot-acct{font-family:'IBM Plex Mono', monospace; letter-spacing:0.09em; opacity:1;}
.foot-social{display:flex; gap:10px; margin-top:16px;}
.foot-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(250,245,236,0.25);
  display:flex; align-items:center; justify-content:center; color:var(--cream); margin:0;
  transition:background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.foot-social a svg{width:16px; height:16px; fill:currentColor;}
.foot-social a:hover{background:rgba(250,245,236,0.12); border-color:var(--gold-2); transform:translateY(-2px);}
.foot-bottom{margin-top:48px; padding-top:22px; border-top:1px solid rgba(250,245,236,0.15);
  font-size:0.75rem; opacity:0.55; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ============ CHAT + WHATSAPP ============ */
.chat-bubble{position:fixed; bottom:26px; right:26px; z-index:200; width:56px; height:56px; border-radius:50%;
  background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(13,23,41,0.28); border:none; font-size:1.4rem; text-decoration:none;
  transition:transform 0.2s var(--ease);}
.chat-bubble:hover{transform:translateY(-2px) scale(1.03);}
.chat-panel{position:fixed; bottom:96px; right:26px; z-index:200; width:340px; max-width:calc(100vw - 36px);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); display:none; flex-direction:column;
  box-shadow:var(--sh-lg); overflow:hidden;}
.chat-panel.open{display:flex;}
.chat-head{background:var(--navy); color:var(--cream); padding:14px 18px; font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chat-close{background:none; border:none; color:var(--cream); font-size:1.2rem; line-height:1; padding:0 2px; opacity:0.7;}
.chat-close:hover{opacity:1;}
.chat-body{padding:16px 18px; font-size:0.86rem;}
.chat-log{max-height:min(46vh, 320px); overflow-y:auto; overscroll-behavior:contain;}
.chat-msg{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:10px; font-size:0.84rem; white-space:pre-wrap; line-height:1.55;}
.chat-msg.you{background:var(--navy); color:var(--cream); border-color:var(--navy); margin-left:36px;}
.chat-msg.note{background:transparent; border:none; border-left:2px solid var(--red); border-radius:0;
  padding:2px 0 2px 10px; font-size:0.78rem; opacity:0.7;}
.chat-msg a{color:inherit; text-decoration:underline;}
.chat-typing{display:flex; gap:4px; align-items:center;}
.chat-typing span{width:5px; height:5px; border-radius:50%; background:var(--navy); opacity:0.35; animation:chatDot 1.1s infinite;}
.chat-typing span:nth-child(2){animation-delay:0.18s;}
.chat-typing span:nth-child(3){animation-delay:0.36s;}
@keyframes chatDot{0%,60%,100%{opacity:0.25; transform:translateY(0);} 30%{opacity:0.9; transform:translateY(-3px);}}
.chat-chips{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px;}
.chat-chips[hidden]{display:none;}
.chat-chip{background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  color:var(--navy); padding:6px 11px; font-size:0.72rem;}
.chat-chip:hover{background:var(--navy); color:var(--cream); border-color:var(--navy);}
.chat-body form{display:flex; gap:8px; margin-top:6px;}
.chat-body input{flex:1; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:9px 11px; font-size:0.82rem; font-family:inherit; background:var(--surface);}
.chat-body button[type="submit"]{background:var(--navy); color:var(--cream); border:none;
  border-radius:var(--r-sm); padding:9px 14px; font-size:0.78rem;}
.chat-body button[type="submit"][disabled]{opacity:0.5;}
.chat-foot{margin:10px 0 0; font-size:0.66rem; line-height:1.45; opacity:0.55; font-family:'IBM Plex Mono', monospace;}
@media (max-width:520px){.chat-panel{right:12px; left:12px; width:auto; bottom:92px;}}
@media (prefers-reduced-motion:reduce){.chat-typing span{animation:none;}}

/* ============ REVIEWS — RATINGS & COMMENTS ============
   The stars are one component used in three places: the average on the summary
   plate, the score on a review card, and the radio group a visitor rates with.
   Filled stars are gold, empty ones are the same glyph at low opacity, so a row
   always has the same width whatever the score. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.stars{display:inline-flex; gap:2px; line-height:1; font-size:0.98rem; color:var(--gold);}
.stars .star{opacity:0.24;}
.stars .star.on{opacity:1;}
.stars.lg{font-size:1.6rem; gap:4px;}
/* On the navy cards the gold has to lift off the dark ground. */
.tstm-card .stars, .rv-card-dark .stars{color:var(--gold-2);}
.tstm-card .stars{margin-bottom:16px;}
.tstm-card .stars .star{opacity:0.3;}
.tstm-card .stars .star.on{opacity:1;}

/* the two-column top of reviews.html: the score on the left, the form on the right */
.rv-wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
@media (max-width:900px){.rv-wrap{grid-template-columns:1fr; gap:40px;}}

.rv-summary{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:30px 28px; position:sticky; top:104px;
}
@media (max-width:900px){.rv-summary{position:static;}}
.rv-score{display:flex; align-items:baseline; gap:10px;}
.rv-score-num{font-family:'Fraunces', serif; font-size:3.2rem; line-height:1; color:var(--navy);}
.rv-score-of{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);}
.rv-score-stars{margin-top:14px;}
.rv-count{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-top:12px;}
.rv-bars{margin-top:22px; display:grid; gap:7px;}
.rv-bar-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;}
.rv-bar-label{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--muted); white-space:nowrap;}
.rv-bar{height:7px; background:rgba(22,35,63,0.09); border-radius:var(--r-pill); overflow:hidden;}
.rv-bar-fill{height:100%; background:var(--gold); border-radius:var(--r-pill);
  transition:width 0.6s var(--ease);}
.rv-bar-n{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--muted); min-width:2ch; text-align:right;}
.rv-moderated{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:0.8rem; color:var(--muted);}

/* the list of published reviews */
.rv-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
@media (max-width:860px){.rv-grid{grid-template-columns:1fr;}}
.rv-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); padding:24px 24px 22px;
  transition:border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.rv-card:hover{border-color:var(--gold); box-shadow:var(--sh-md);}
.rv-card-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.rv-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:'Fraunces', serif; font-size:1rem;
}
.rv-who{min-width:0;}
.rv-name{font-weight:500; font-size:0.96rem; color:var(--navy);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rv-meta{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-top:3px;}
.rv-card-head .stars{margin-left:auto; flex:none;}
.rv-verified{
  font-family:'IBM Plex Mono', monospace; font-size:0.56rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--navy); background:rgba(200,155,60,0.22);
  border-radius:var(--r-pill); padding:3px 8px; font-weight:500;
}
.rv-comment{font-size:0.96rem; line-height:1.7; color:var(--ink); white-space:pre-line;}
.rv-chip{
  display:inline-block; margin-top:14px; font-family:'IBM Plex Mono', monospace;
  font-size:0.6rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:4px 10px;
}
/* the centre answering a review, in its own voice */
.rv-reply{
  margin-top:16px; padding:14px 16px; border-left:var(--line-w) solid var(--gold);
  background:rgba(200,155,60,0.09); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.rv-reply-who{font-family:'IBM Plex Mono', monospace; font-size:0.6rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
.rv-reply p{font-size:0.9rem; line-height:1.65;}
.rv-empty{
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r-md);
  padding:30px 28px; text-align:center; color:var(--muted); font-size:0.95rem;
}
.rv-empty a{color:var(--red); font-weight:500;}
.rv-band-foot{text-align:center; margin-top:34px;}
.rv-band-score{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:-18px 0 34px;
}
.rv-band-score .rv-count{margin-top:0;}

/* the star radio group in the form */
.rv-stars-field{border:none; margin-bottom:20px;}
.rv-stars-field legend{
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.rv-star-row{display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:4px;}
.rv-star-row input{position:absolute; opacity:0; width:1px; height:1px;}
.rv-star-row label{
  font-size:2rem; line-height:1; color:var(--gold); opacity:0.26; cursor:pointer;
  transition:opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
/* a checked star and every lower one fill — lower values follow in source order */
.rv-star-row input:checked ~ label{opacity:1;}
.rv-star-row:hover label:hover, .rv-star-row label:hover ~ label{opacity:1;}
.rv-star-row label:hover{transform:scale(1.08);}
.rv-star-row input:focus-visible + label{outline:2px solid var(--red); outline-offset:3px; border-radius:4px;}
.rv-star-readout{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em;
  color:var(--muted); margin-left:10px;
}

/* the coordinator's moderation panel — opened with ?moderate=1, key kept for the tab only */
.rv-mod{margin-top:56px; padding-top:40px; border-top:1px solid var(--line);}
.rv-mod-card{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:22px 24px; margin-bottom:16px;
}
.rv-mod-card .rv-comment{margin-top:12px;}
.rv-mod-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px;}
.rv-mod-actions .btn{padding:9px 16px; font-size:0.78rem;}
.rv-mod-reply{flex:1; min-width:220px; background:var(--white);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 12px;
  font-family:inherit; font-size:0.86rem;}
.rv-mod-note{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0; transform:translateY(20px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
/* children stagger in one after another once the parent is visible */
.stagger > *{opacity:0; transform:translateY(18px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);}
.stagger.in > *{opacity:1; transform:none;}
.stagger.in > *:nth-child(1){transition-delay:0.00s;}
.stagger.in > *:nth-child(2){transition-delay:0.07s;}
.stagger.in > *:nth-child(3){transition-delay:0.14s;}
.stagger.in > *:nth-child(4){transition-delay:0.21s;}
.stagger.in > *:nth-child(5){transition-delay:0.28s;}
.stagger.in > *:nth-child(6){transition-delay:0.35s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *{opacity:1; transform:none;}
}