/* ============================================================
   Al-Birr — shared design system
   Newsreader (headings) · Hanken Grotesk (body)
   Navy #0C1E33 · Brass #B8912E · Deep Green #1E4034 · Parchment #F6F1E8
   ============================================================ */
:root{
  --ink:#0C1E33; --ink-2:#12293F; --navy-deep:#0A1826;
  --gold:#B8912E; --gold-soft:#C9A65A; --green:#1E4034; --green-2:#24503F;
  --cream:#F6F1E8; --cream-2:#EFE8DA; --paper:#FCFAF5; --line:#E0D8C7;
  --line-ink:rgba(255,255,255,.14);
  --body:#26313B; --muted:#5C6873; --muted-ink:rgba(233,239,245,.64);
  --shadow:0 1px 2px rgba(12,30,51,.05), 0 10px 30px rgba(12,30,51,.08);
  --shadow-lg:0 2px 6px rgba(12,30,51,.07), 0 26px 60px rgba(12,30,51,.14);
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --maxw:1200px; --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);color:var(--body);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.62;overflow-x:clip}
::selection{background:var(--gold);color:#fff}
/* ---- accessibility ---- */
.skip-link{position:fixed;left:-9999px;top:10px;z-index:200;background:var(--ink);color:#fff;padding:11px 20px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.nav-link:focus-visible,.filter-pill:focus-visible{outline-offset:3px}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help;text-decoration-thickness:1px}
.form .invalid{border-color:#d9694f!important;box-shadow:0 0 0 1px #d9694f}
/* ---- Vercel Web Interface Guidelines refinements ---- */
html{-webkit-text-size-adjust:100%}
a,button,.btn,input,select,textarea,summary,.filter-pill{touch-action:manipulation}
*{-webkit-tap-highlight-color:transparent}
h1,h2,h3{text-wrap:balance}
.lead,.hero .sub,.page-hero .sub{text-wrap:pretty}
.trust .n,.stat-list .big,.story .g,.cred .c b,.fee h3,.tbl .num,.testi-card .quote{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.1;letter-spacing:-.015em}
h2{font-size:clamp(30px,4.2vw,48px);margin-bottom:20px}
h3{font-size:clamp(20px,2.3vw,27px)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--gold)}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted);line-height:1.55;max-width:60ch}
/* Reveal-on-scroll is gated behind html.js so content is NEVER hidden without JS
   (in-app browsers / JS-off show it immediately). The JS also has a safety net. */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
/* Count-up figures (hero proof): hidden until JS animates them; JS-off shows final value. */
html.js .countup{opacity:0;transition:opacity .5s ease}
html.js .countup.in{opacity:1}
section{padding:88px 0;position:relative}
.center-head{max-width:720px;margin:0 auto 46px;text-align:center}
/* Tablets sit between the desktop and phone rhythms; without this step they
   kept the full desktop padding on a much narrower column. */
@media(max-width:860px){section{padding:66px 0}}
.center-head .eyebrow{justify-content:center}
.center-head .lead{margin:0 auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:10px;transition:.25s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#a67f24;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost-light:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1EB955;transform:translateY(-1px)}
.btn-whatsapp svg{width:19px;height:19px;fill:currentColor}
.arrow{transition:transform .25s}.btn:hover .arrow{transform:translateX(3px)}

/* announcement bar (intake window) — one component, rendered site-wide by app.js */
.announce{position:fixed;top:0;left:0;right:0;z-index:70;background:linear-gradient(90deg,var(--gold),var(--gold-2,#caa23f));color:#241a05;display:flex;align-items:center;justify-content:center;min-height:42px}
.announce-in{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:8px 46px;text-align:center;color:inherit;text-decoration:none}
.announce-txt{font-size:14px;font-weight:600;letter-spacing:.005em}
.announce-txt b{font-weight:700}
.announce-btn{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:6px 15px;border-radius:100px;white-space:nowrap;transition:background .18s,transform .18s}
.announce-arw{transition:transform .18s}
.announce-in:hover .announce-btn{background:var(--navy-deep,#0a1826)}
.announce-in:hover .announce-arw{transform:translateX(3px)}
.announce-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:#241a05;font-size:22px;line-height:1;cursor:pointer;opacity:.55;padding:2px 8px;border-radius:8px;transition:opacity .15s,background .15s}
.announce-x:hover{opacity:1;background:rgba(36,26,5,.1)}
html.has-announce header.site{top:var(--ann-h,42px)}

/* In-page anchors (#day, #results, #curriculum, #fees, #faq, the nav sub-items)
   scrolled their target flush to the viewport top, so the fixed header — and the
   announcement bar above it — covered the section's eyebrow and part of its
   heading. Mirrors the offset rule above so a dismissed bar collapses the gap. */
section[id],[id].anchor-off{scroll-margin-top:84px}
html.has-announce section[id],html.has-announce [id].anchor-off{scroll-margin-top:calc(var(--ann-h,42px) + 84px)}
@media(max-width:560px){.announce-in{gap:10px;padding:8px 42px}.announce-txt{font-size:13px}.announce-btn{padding:5px 13px}}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:80;transition:.35s;border-bottom:1px solid transparent}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:.35s}
header.site.scrolled{background:rgba(246,241,232,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
header.site.scrolled .bar{padding:12px 40px}
.logo{font-family:var(--serif);font-weight:600;font-size:22px;color:#fff;display:flex;align-items:center;gap:10px;transition:color .3s}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
header.site.scrolled .logo{color:var(--ink)}
/* logo lockup: monogram (light over navy, dark on cream) + text wordmark */
.logo{gap:11px}
.logo-mark{height:42px;width:auto;display:block}
.logo .logo-mark-dark{display:none}
header.site.scrolled .logo .logo-mark-light{display:none}
header.site.scrolled .logo .logo-mark-dark{display:block}
.logo-txt{display:flex;flex-direction:column;line-height:1.05}
.logo-name{font-family:var(--serif);font-weight:600;font-size:23px;color:#fff;letter-spacing:-.01em}
.logo-sub{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-top:3px}
header.site.scrolled .logo-name{color:var(--ink)}
header.site.scrolled .logo-sub{color:var(--gold)}
footer.site .logo-mark{height:46px}
footer.site .logo-name{color:#fff}
footer.site .logo-sub{color:var(--gold-soft)}
@media(max-width:640px){.logo-mark{height:36px}.logo-name{font-size:20px}.logo-sub{font-size:8px}}
.navmenu{display:flex;align-items:center;gap:30px}
.navmenu a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85);opacity:1;transition:color .2s}
.navmenu a:hover,.navmenu a.active{color:var(--gold-soft)}
header.site.scrolled .navmenu a{color:var(--ink)}
header.site.scrolled .navmenu a:hover,header.site.scrolled .navmenu a.active{color:var(--gold)}
.navmenu .btn{padding:10px 18px;font-size:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
header.site.scrolled .burger span,body.lock .burger span{background:var(--ink)}
/* burger animates to an X while the menu is open (a clear close affordance) */
body.lock .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.lock .burger span:nth-child(2){opacity:0}
body.lock .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* header variant for light (non-hero) pages: dark text from the start */
header.site.on-light .logo{color:var(--ink)}
header.site.on-light .navmenu a{color:var(--ink)}
header.site.on-light .burger span{background:var(--ink)}

@media(max-width:940px){
  /* Never let the header become a containing block on mobile: it carries backdrop-filter
     when scrolled, which would clamp the position:fixed menu panel to the header box and
     flash a broken menu. Dropping the blur here keeps the panel viewport-relative. */
  header.site.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .navmenu{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:40px;transform:translateX(100%);visibility:hidden;transition:transform .4s,visibility 0s .4s;box-shadow:var(--shadow-lg)}
  .navmenu.open{transform:none;visibility:visible;transition:transform .4s,visibility 0s}
  .navmenu a{font-size:20px;font-family:var(--serif);color:var(--ink)}
  header.site.scrolled .navmenu a{color:var(--ink)}
  .burger{display:flex;z-index:90}
  /* scroll-lock: position:fixed (not just overflow:hidden) so the page behind can't scroll
     on iOS; the scroll position is preserved and restored in app.js setMenu(). */
  body.lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
}

/* page hero (inner pages — compact navy banner) */
.page-hero{background:linear-gradient(170deg,var(--navy-deep),var(--ink) 78%);color:#fff;padding:176px 0 90px;position:relative;overflow:hidden}
.page-hero .glow{position:absolute;inset:0;background:radial-gradient(56% 60% at 84% 6%,rgba(201,166,90,.12),transparent 58%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero .eyebrow::before{background:var(--gold-soft)}
.page-hero h1{color:#fff;font-size:clamp(38px,5.4vw,64px);line-height:1.03;letter-spacing:-.025em;max-width:18ch;font-weight:500}
.page-hero h1 em{font-style:italic;color:var(--gold-soft)}
.page-hero .sub{margin-top:22px;font-size:clamp(17px,1.9vw,20px);color:rgba(233,239,245,.8);max-width:56ch}

/* home hero (tall) */
.hero{background:linear-gradient(175deg,var(--navy-deep),var(--ink) 72%);color:#fff;padding:186px 0 120px;position:relative;overflow:hidden}
.hero .glow{position:absolute;inset:0;background:radial-gradient(58% 48% at 84% 8%,rgba(201,166,90,.13),transparent 58%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;font-size:clamp(40px,6.6vw,80px);line-height:1.02;letter-spacing:-.03em;max-width:16ch;font-weight:500}
.hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.hero .sub{margin-top:26px;font-size:clamp(17px,2vw,21px);color:rgba(233,239,245,.8);max-width:56ch;line-height:1.55}
.hero .cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero .chips{margin-top:42px;display:flex;gap:12px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:9px 18px;font-size:14px;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:9px}
.chip .tick{color:var(--gold-soft);font-weight:700}
/* Split hero — copy on the left, the "less than half the day" differentiator as a card on the right. */
.hero-split .hs-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero-split h1{font-size:clamp(34px,4.6vw,60px);max-width:none}
.hero-split .sub{font-size:clamp(16px,1.7vw,19px);margin-top:22px}
.hs-card{background:rgba(201,166,90,.08);border:1px solid rgba(201,166,90,.3);border-radius:16px;padding:28px 30px}
.hs-big{font-family:var(--serif);font-size:clamp(30px,3.1vw,40px);color:var(--gold-soft);line-height:1.04;letter-spacing:-.01em}
.hs-big .hs-sub{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(233,239,245,.72);margin-top:8px;letter-spacing:0}
.hs-bars{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.hs-bar-l{display:block;font-size:11.5px;color:rgba(233,239,245,.66);margin-bottom:6px}
.hs-trk{height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.hs-trk>span{display:block;height:100%;border-radius:4px;background:var(--gold-soft)}
.hs-trk-alt>span{background:rgba(255,255,255,.32)}
.hs-proof{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.hs-proof-row{display:flex;align-items:baseline;gap:12px}
.hs-proof-row b{flex:0 0 auto;min-width:78px;font-weight:700;font-size:15.5px;color:var(--gold-soft);letter-spacing:-.01em}
.hs-proof-row span{font-size:13px;color:rgba(233,239,245,.72);line-height:1.35}
@media(max-width:860px){.hero-split .hs-grid{grid-template-columns:1fr;gap:34px}.hero-split h1{font-size:clamp(34px,9vw,52px)}.hs-card{max-width:440px}}

/* backgrounds */
.bg-cream-2{background:var(--cream-2)}
.bg-paper{background:var(--paper)}
.ink-sec{background:linear-gradient(180deg,var(--ink),var(--navy-deep));color:#fff}
.ink-sec h2,.ink-sec h3,.ink-sec h4{color:#fff}
.ink-sec .lead{color:rgba(233,239,245,.72)}
.ink-sec .eyebrow{color:var(--gold-soft)}.ink-sec .eyebrow::before{background:var(--gold-soft)}

/* trust band */
/* A slim stat rail: hairline frame, short centred dividers (not full-height walls),
   the numbers carry the weight. The chrome recedes so the stats land. */
.trust{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.trust .cell{position:relative;padding:20px 22px;text-align:center}
.trust .cell + .cell::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:30px;background:var(--line)}
.trust .n{font-family:var(--serif);font-size:clamp(23px,2.6vw,30px);color:var(--ink);line-height:1;letter-spacing:-.01em}
.trust .l{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.4}
/* Featured stat — signalled by colour + a slim under-half bar, never a filled block. */
.trust .cell.feature .n{color:var(--gold)}
.trust .daybar{margin:11px auto 0;max-width:100px;height:5px;border-radius:3px;background:var(--cream-2);overflow:hidden}
.trust .daybar > span{display:block;height:100%;background:var(--gold);border-radius:3px}
.trust .cell.feature .n .lt{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;line-height:1}
/* USP claim band — the shorter-day fact, stated in full and emphasised. */
.claim{background:var(--cream-2);border-bottom:1px solid var(--line)}
.claim .wrap{max-width:940px;text-align:center;padding-top:52px;padding-bottom:52px}
.claim-line{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,40px);line-height:1.25;color:var(--ink)}
.claim-line em{font-style:italic;color:var(--gold)}
/* Stat band — "the trade": the outcome (results) set against the time (half the day). */
.trade{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trade .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.trade .tcol{padding:26px 34px}
.trade .tcol-out{border-right:1px solid var(--line)}
.trade .tcol-time{background:linear-gradient(180deg,rgba(184,145,46,.06),rgba(184,145,46,0))}
.trade .tcap{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.trade .tstats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content 1fr;column-gap:14px;row-gap:14px;align-items:baseline}
.trade .tstats li{display:contents}
.trade .tstats .tn{font-family:var(--serif);font-size:25px;color:var(--ink);line-height:1;letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums}
.trade .tstats .td{font-size:13px;color:var(--muted);line-height:1.35}
.trade .tbig{font-family:var(--serif);font-size:clamp(28px,3.4vw,37px);color:var(--gold);line-height:1.05;letter-spacing:-.01em}
.trade .tbig .tbig-sub{display:block;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--muted);margin-top:6px;letter-spacing:0}
.trade .tbars{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.trade .tbar-l{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.trade .trk{height:7px;border-radius:4px;background:var(--cream-2);overflow:hidden}
.trade .trk>span{display:block;height:100%;background:var(--gold);border-radius:4px}
.trade .trk-alt>span{background:#B4B2A9}
@media(max-width:760px){.trade .wrap{grid-template-columns:1fr}.trade .tcol{padding:22px 24px}.trade .tcol-out{border-right:none;border-bottom:1px solid var(--line)}}
@media(max-width:800px){.trust .wrap{grid-template-columns:1fr 1fr}.trust .cell + .cell::before{display:none}.trust .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.trust .cell:nth-child(2n){border-right:none}.trust .cell:nth-child(n+3){border-bottom:none}}

/* two-col split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.top{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.two{grid-template-columns:1fr 1fr}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.cards,.cards.four{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);transition:.35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ic{width:44px;height:44px;border-radius:11px;background:rgba(184,145,46,.12);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px;margin-bottom:18px}
.card .avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;isolation:isolate;display:block;margin-bottom:16px;box-shadow:0 0 0 2px rgba(184,145,46,.45),0 4px 14px rgba(0,0,0,.12);background:rgba(184,145,46,.08)}
/* Per-image focal point + zoom via --fx/--fy/--zoom inline vars (default = center-top, no zoom). */
.card .avatar img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,0%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,0%)}
/* Student "voices" cards — equal-height boxes across every row (symmetry). */
#voices .cards{grid-auto-rows:1fr}
.card h3{font-size:21px;margin-bottom:9px}
.card p{font-size:15px;color:var(--muted)}
.card .step-n{font-family:var(--serif);font-size:36px;color:var(--gold);line-height:1;margin-bottom:12px}

/* prose (article-style content) */
.prose{max-width:70ch}
.prose p{font-size:16.5px;color:var(--body);margin-bottom:18px}
.prose p.big{font-size:19px;color:var(--ink);font-family:var(--serif);line-height:1.5}
.prose h3{margin:32px 0 12px}
.prose ul{list-style:none;margin:18px 0}
.prose li{font-size:16px;color:var(--body);padding-left:26px;position:relative;margin-bottom:12px}
.prose li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* timetable bars */
.day-vis{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.bar-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.bar-row .tag{width:112px;font-size:13.5px;font-weight:600;color:var(--ink);flex-shrink:0}
.bar-track{flex:1;height:34px;background:var(--cream-2);border-radius:8px;overflow:hidden;display:flex}
.bar-fill{height:100%;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap}
.day-note{margin-top:20px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}

/* data table */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px}
.tbl th{background:var(--cream-2);font-weight:600;color:var(--ink);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.tbl td{color:var(--body)}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{font-family:var(--serif);font-size:20px;color:var(--gold)}
@media(max-width:640px){.tbl th,.tbl td{padding:12px 14px;font-size:14px}}
/* The results table is 454px of columns. On a phone it was overflowing its
   container by 86px and the overspill was being clipped by body overflow-x,
   so the right-hand columns could not be reached at all. Scroll it instead. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .tbl-scroll{margin-inline:-22px;padding-inline:22px}
  .tbl-scroll .tbl{min-width:420px}
}

/* results stat list + story (home + results) */
.result-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:stretch}
@media(max-width:860px){.result-grid{grid-template-columns:1fr}}
.story{background:linear-gradient(160deg,var(--ink),var(--navy-deep));color:#fff;border-radius:var(--r);padding:38px;display:flex;flex-direction:column;justify-content:center}
.story .q{font-family:var(--serif);font-size:24px;line-height:1.3;color:#fff}
.story .grades{display:flex;gap:10px;margin:22px 0}
.story .g{width:52px;height:52px;border-radius:10px;background:rgba(201,166,90,.16);border:1px solid rgba(201,166,90,.3);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;color:var(--gold-soft)}
.story .who{font-size:13.5px;color:var(--muted-ink);letter-spacing:.04em}
.stat-list{display:flex;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat-list .item{padding:26px 30px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:20px}
.stat-list .item:last-child{border-bottom:none}
.stat-list .big{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1;min-width:118px}
.stat-list .d{font-size:15px;color:var(--body)}
.stat-list .d b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}

/* purpose green */
.purpose{background:linear-gradient(165deg,var(--green),var(--green-2));color:#fff}
.purpose h2,.purpose h3{color:#fff}
.purpose .lead{color:rgba(233,241,235,.82)}
.purpose .eyebrow{color:var(--gold-soft)}.purpose .eyebrow::before{background:var(--gold-soft)}
.purpose .plist{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.purpose .p{border-top:1px solid rgba(255,255,255,.18);padding-top:16px}
.purpose .p h4{color:#fff;font-size:18px;margin-bottom:6px}
.purpose .p span{font-size:14.5px;color:rgba(233,241,235,.78)}
@media(max-width:640px){.purpose .plist{grid-template-columns:1fr}}
.purpose-quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,32px);line-height:1.28;color:#fff;max-width:22ch}

/* tags */
.globe-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.globe-tags .t{background:var(--cream-2);border:1px solid var(--line);border-radius:24px;padding:8px 18px;font-size:14px;color:var(--ink);font-weight:500}

/* steps */
.steps{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-ink)}
.step .num{font-family:var(--serif);font-size:20px;color:var(--gold-soft);min-width:30px}
.step .t{font-weight:600;color:#fff;margin-bottom:3px}
.step .s{font-size:14px;color:var(--muted-ink)}

/* light steps (on light bg) */
.steps.light .step{border-bottom-color:var(--line)}
.steps.light .num{color:var(--gold)}
.steps.light .t{color:var(--ink)}
.steps.light .s{color:var(--muted)}

/* admissions form */
.admit{background:linear-gradient(175deg,var(--navy-deep),var(--ink));color:#fff}
.admit h2{color:#fff}.admit .lead{color:rgba(233,239,245,.8)}
.admit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:860px){.admit-grid{grid-template-columns:1fr;gap:40px}}
.form{background:rgba(255,255,255,.05);border:1px solid var(--line-ink);border-radius:var(--r);padding:30px}
.form h3{color:#fff;margin-bottom:6px}
.form p{font-size:14px;color:var(--muted-ink);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:rgba(233,239,245,.7);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line-ink);background:rgba(255,255,255,.06);color:#fff;font-family:var(--sans);font-size:15px}
.field input::placeholder,.field textarea::placeholder{color:rgba(233,239,245,.4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-soft)}
.form .btn-gold{width:100%;justify-content:center;margin-top:6px}
.form .fine{font-size:12px;color:var(--muted-ink);margin-top:14px;text-align:center}

/* fees cards */
.fees{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.fees{grid-template-columns:1fr}}
.fee{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.fee.feature{background:linear-gradient(160deg,var(--ink),var(--navy-deep));color:#fff;border-color:transparent}
.fee .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.fee.feature .k{color:var(--gold-soft)}
.fee h3{margin-bottom:10px}.fee.feature h3{color:#fff}
.fee p{font-size:15px;color:var(--muted)}.fee.feature p{color:var(--muted-ink)}

/* team grid */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.member{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.member .av{width:80px;height:80px;border-radius:50%;background:var(--cream-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;color:var(--gold);margin-bottom:16px}
/* When a real headshot exists (data-photo resolves), app.js adds .has-photo and fills the circle;
   the initials stay as the graceful fallback until then. See images/README.md. */
.member .av.has-photo{color:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;border-color:var(--gold-soft)}
.member h4{font-size:19px;margin-bottom:3px}
.member .role{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:10px}
.member p{font-size:14px;color:var(--muted)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--serif);font-size:20px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{color:var(--gold);font-size:24px;transition:.2s;font-family:var(--sans)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{margin-top:14px;font-size:15.5px;color:var(--muted);max-width:70ch}

/* callout strip */
.callout{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 34px}
.callout .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.callout p{font-size:16px;color:var(--body)}

/* footer */
footer.site{background:var(--navy-deep);color:#fff;padding:72px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
footer.site .logo{color:#fff}
footer.site h4{color:rgba(255,255,255,.9);font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
footer.site a{display:block;font-size:14.5px;color:rgba(233,239,245,.62);margin-bottom:10px;transition:.2s}
footer.site a:hover{color:var(--gold-soft)}
footer.site .about{font-size:14.5px;color:rgba(233,239,245,.62);margin-top:16px;max-width:34ch}
.foot-base{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-ink);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted-ink)}
footer.site .foot-base a{display:inline;color:inherit;margin:0}
footer.site .foot-base a:hover{color:var(--gold-soft)}
.foot-base .legal{display:inline-flex;gap:22px;flex-wrap:wrap}
footer.site .socials{margin-top:26px}

/* Tablet step for the heroes. This has to sit after the base .hero and
   .page-hero rules: same specificity, so source order decides, and in the
   earlier block it was being overridden and silently did nothing. */
@media(max-width:860px){
  .hero{padding:158px 0 96px}
  .page-hero{padding:150px 0 62px}
}

@media(max-width:640px){
  .wrap{padding:0 22px}
  section{padding:52px 0}
  .center-head{margin-bottom:32px}
  header.site .bar{padding:16px 22px}
  header.site.scrolled .bar{padding:12px 22px}
  .hero{padding:130px 0 72px}
  .page-hero{padding:124px 0 56px}
  .trust .cell{padding:18px 14px}
  /* Most of a phone's dead space is the run-up to a section's own content,
     not the gap between sections. These are the four worst offenders. */
  .purpose .plist{margin-top:28px}
  .testi-grid{margin-top:28px}
  .day-vis .day-parts{margin-top:14px}
  .global-band .globe-tags{margin-top:16px}
}

/* ============================================================
   Two-level navigation (rendered by app.js into #menu)
   ============================================================ */
.navmenu .nav-list{display:flex;align-items:center;gap:2px;list-style:none}
.navmenu .nav-item{position:relative}
.navmenu .nav-link{display:flex;align-items:center;gap:7px;padding:9px 14px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85);border-radius:8px;transition:color .2s;white-space:nowrap}
.navmenu .nav-item.is-active>.nav-link,.navmenu .nav-link:hover{color:var(--gold-soft)}
header.site.scrolled .navmenu .nav-link{color:var(--ink)}
header.site.scrolled .navmenu .nav-item.is-active>.nav-link,header.site.scrolled .navmenu .nav-link:hover{color:var(--gold)}
.navmenu .caret{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .2s}
.navmenu .nav-exp{display:none}
.navmenu .nav-panel{position:absolute;top:100%;left:0;padding-top:12px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:5}
.navmenu .nav-panel-inner{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px}
.navmenu .nav-item.has-children:hover .nav-panel,.navmenu .nav-item.has-children:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
.navmenu .nav-sub{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 14px;border-radius:8px;font-size:14.5px;color:var(--body)}
.navmenu .nav-sub:hover{background:var(--cream-2);color:var(--ink)}
.navmenu .nav-sub.soon{color:var(--muted);pointer-events:none}
.navmenu .soon-badge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:2px 8px}
.navmenu .nav-cta{margin-left:8px}
.navmenu .nav-cta .btn{padding:10px 18px;font-size:14px}
@media(max-width:940px){
  .navmenu .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .navmenu .nav-item{width:100%;border-bottom:1px solid var(--line)}
  .navmenu .nav-link{color:var(--ink);font-family:var(--serif);font-size:20px;padding:14px 6px}
  header.site.scrolled .navmenu .nav-link{color:var(--ink)}
  .navmenu .caret{display:none}
  .navmenu .nav-exp{display:block;position:absolute;right:2px;top:11px;width:38px;height:38px;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer}
  .navmenu .nav-exp::before,.navmenu .nav-exp::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:.25s}
  .navmenu .nav-exp::after{transform:translate(-50%,-50%) rotate(90deg)}
  .navmenu .nav-item.open .nav-exp::after{transform:translate(-50%,-50%) rotate(0)}
  /* accordion via max-height: domain-appropriate, user-triggered submenu (grid-rows fails to expand inside this flex column) */
  .navmenu .nav-panel{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .navmenu .nav-panel-inner{background:none;border:none;box-shadow:none;padding:0 0 6px 10px}
  .navmenu .nav-item.open .nav-panel{max-height:500px}
  .navmenu .nav-sub{font-size:16px;font-family:var(--sans);padding:10px}
  .navmenu .nav-cta{margin:16px 0 0;border-bottom:none}
  .navmenu .nav-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   Testimonials carousel
   ============================================================ */
.carousel{position:relative;overflow:hidden;padding:0 8px}
.carousel-track{display:flex;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.testi{min-width:100%;padding:8px;box-sizing:border-box}
.testi-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:44px;box-shadow:var(--shadow);max-width:820px;margin:0 auto;text-align:center}
.testi-card .stars{color:var(--gold);letter-spacing:3px;margin-bottom:18px}
.testi-card .quote{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);line-height:1.4;color:var(--ink)}
.testi-card .who{margin-top:24px;font-size:14px;color:var(--muted)}
.testi-card .who b{color:var(--ink);display:block;font-size:15px;margin-bottom:2px}
.carousel-nav{display:flex;justify-content:center;gap:9px;margin-top:26px}
.carousel-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;cursor:pointer;transition:.25s;padding:0}
.carousel-dot.active{background:var(--gold);width:26px;border-radius:6px}
.carousel-arrow{position:absolute;top:44%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--shadow);z-index:2;font-size:18px}
.carousel-arrow:hover{border-color:var(--gold);color:var(--gold)}
.carousel-arrow.prev{left:-4px}.carousel-arrow.next{right:-4px}
@media(max-width:680px){.carousel-arrow{display:none}.testi-card{padding:30px}}
/* Testimonials band — featured (headline + quote) + supporting grid (buildTestimonials). Brand tokens. */
.testi-featured{max-width:760px;margin:0 auto;text-align:center}
.testi-featured .th{margin:0 0 16px;font-family:var(--serif);font-size:clamp(23px,3vw,33px);line-height:1.28;color:var(--ink)}
.testi-featured blockquote{margin:0;font-size:17px;line-height:1.65;color:var(--body)}
.testi-featured .stars{margin-top:22px;color:var(--gold);letter-spacing:3px;font-size:18px}
.testi-featured figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.testi-featured figcaption b{color:var(--ink);display:block;font-size:15px;margin-bottom:2px}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:44px}
.testi-mini{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.testi-mini .th{margin:0 0 10px;font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink)}
.testi-mini blockquote{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.testi-mini .stars{margin-top:auto;padding-top:18px;color:var(--gold);letter-spacing:2px;font-size:14px}
.testi-mini .stars + figcaption{margin-top:10px}
.testi-mini figcaption{margin-top:16px;font-size:13px;color:var(--muted)}
.testi-mini figcaption b{color:var(--ink);display:block;font-size:14px;margin-bottom:2px}

/* ============================================================
   Social links · newsletter · light form · logo strip
   ============================================================ */
.socials{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.socials a{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);transition:.25s;flex:0 0 auto}
.socials a svg{width:21px;height:21px;fill:currentColor;display:block}
.socials a:hover{color:var(--gold);transform:translateY(-2px)}
.socials.on-light a{color:var(--muted)}
.socials.on-light a:hover{color:var(--gold)}

.newsletter{display:flex;gap:10px;max-width:470px}
.newsletter input{flex:1;padding:13px 16px;border-radius:10px;border:1px solid var(--line-ink);background:rgba(255,255,255,.06);color:#fff;font-family:var(--sans);font-size:15px}
.newsletter input::placeholder{color:rgba(233,239,245,.45)}
.newsletter input:focus{outline:none;border-color:var(--gold-soft)}
@media(max-width:480px){.newsletter{flex-direction:column}}

.form.light{background:var(--paper);border-color:var(--line)}
.form.light h3{color:var(--ink)}
.form.light p,.form.light label,.form.light .fine{color:var(--muted)}
.form.light input,.form.light select,.form.light textarea{background:#fff;border-color:var(--line);color:var(--body)}
.form.light input::placeholder,.form.light textarea::placeholder{color:#9aa4ad}

/* login page */
.login-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:center;max-width:960px}
@media(max-width:820px){.login-grid{grid-template-columns:1fr;gap:36px;max-width:460px}}
.btn-google{width:100%;justify-content:center;gap:10px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600}
.btn-google:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-1px)}
.form.light .or{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--muted);font-size:12.5px}
.form.light .or::before,.form.light .or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-aside .eyebrow{color:var(--gold)}
.login-aside h2{font-size:27px;margin:6px 0 20px;max-width:15ch}
.login-perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.login-perks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--muted);line-height:1.5}
.login-perks li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,145,46,.14)}
.login-perks .pk{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:1px}

.logos{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.logos .lg{font-family:var(--serif);font-size:19px;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:12px 22px;background:var(--paper)}

/* ============================================================
   Insights hub: filters + content tiles + featured
   ============================================================ */
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.filter-pill{padding:9px 20px;border-radius:24px;border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;transition:.2s;font-family:var(--sans)}
.filter-pill:hover{border-color:var(--gold);color:var(--ink)}
.filter-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.tag-pill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 11px;border-radius:20px;display:inline-block}
.tag-event{background:rgba(184,145,46,.15);color:#8a6d1e}
.tag-webinar{background:rgba(30,64,52,.12);color:var(--green)}
.tag-article{background:rgba(12,30,51,.09);color:var(--ink)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.35s;display:flex;flex-direction:column}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile .thumb{height:140px;display:flex;align-items:flex-end;padding:16px;position:relative}
.tile .thumb .ic{font-size:32px;color:rgba(255,255,255,.92)}
.tile .thumb .up{position:absolute;top:14px;right:14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);padding:3px 9px;border-radius:20px}
.thumb-event{background:linear-gradient(150deg,var(--ink),var(--navy-deep))}
.thumb-webinar{background:linear-gradient(150deg,var(--green),var(--green-2))}
.thumb-article{background:linear-gradient(150deg,#38485c,var(--ink))}
.tile .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tile .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.tile h3{font-size:19px;line-height:1.2}
.tile p{font-size:14.5px;color:var(--muted);flex:1;margin:0}
.tile .cta{font-size:14px;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:6px}
.tile.hide{display:none}

.featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);margin-bottom:46px}
.featured .art{background:linear-gradient(150deg,var(--ink),var(--navy-deep));color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:center;min-height:300px;position:relative;overflow:hidden}
.featured .art .glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 85% 12%,rgba(201,166,90,.16),transparent 60%)}
.featured .art>*{position:relative;z-index:1}
.featured .art .tag-pill{align-self:flex-start;margin-bottom:18px;background:rgba(201,166,90,.2);color:var(--gold-soft)}
.featured .art h2{color:#fff;margin-bottom:12px}
.featured .art p{color:rgba(233,239,245,.82);font-size:15.5px;max-width:44ch}
.featured .side{padding:46px;background:var(--cream-2);display:flex;flex-direction:column;justify-content:center;gap:18px}
.featured .side .row{display:flex;gap:14px;align-items:baseline}
.featured .side .row .k{font-family:var(--serif);font-size:22px;color:var(--gold);min-width:64px}
.featured .side .row .v{font-size:15px;color:var(--body)}
@media(max-width:760px){.featured{grid-template-columns:1fr}.featured .art,.featured .side{padding:34px}}

/* credibility strip (homepage) */
.cred{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cred .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0}
.cred .c{padding:30px;text-align:center;border-right:1px solid var(--line)}
.cred .c:last-child{border-right:none}
.cred .c b{font-family:var(--serif);color:var(--ink);font-size:17px;display:block;margin-bottom:4px}
.cred .c span{font-size:14px;color:var(--muted)}
@media(max-width:760px){.cred .wrap{grid-template-columns:1fr}.cred .c{border-right:none;border-bottom:1px solid var(--line);padding:22px}.cred .c:last-child{border-bottom:none}}

/* ── Photography ─────────────────────────────────────────────────────────────
   Brought across from the Claude Design homepage: real photographs in place of
   glyph-only cards, and a landscape behind the purpose band. Brand colours and
   type are unchanged; the photographs do the brightening. */

.card .shot{margin-top:18px;border-radius:12px;overflow:hidden;aspect-ratio:16/10;position:relative}
.card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.card:hover .shot img{transform:scale(1.05)}



@media (prefers-reduced-motion:reduce){
  .card .shot img{transition:none}
}

/* ── Brighter grounds ────────────────────────────────────────────────────────
   A shade more light in the paper and creams. Brand hues unchanged. */
:root{ --paper:#FDFBF7; --cream:#FAF6EE; --cream-2:#F4EDE0; }

/* ── Hero: one photograph, composed ──────────────────────────────────────────
   The banner carries a single image with the lesson reading off it — the live
   badge, the tutorial caption, the grades chip — so the picture is part of the
   proof rather than decoration beside it. */

.hero .glow{background:
  radial-gradient(58% 48% at 84% 8%,rgba(201,166,90,.20),transparent 58%),
  radial-gradient(40% 40% at 8% 92%,rgba(36,80,63,.35),transparent 60%)}

.live-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;max-width:100%;
  padding:8px 16px 8px 12px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:rgba(233,239,245,.92);background:rgba(255,255,255,.07);
  border:1px solid rgba(201,166,90,.32);backdrop-filter:blur(8px)}
.live-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--gold-soft);flex:none}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold-soft);
  animation:hpulse 2s ease-out infinite}
@keyframes hpulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(2.4);opacity:0}}

.hs-copy .hs-proof{margin-top:40px;padding-top:22px;flex-direction:row;flex-wrap:wrap;gap:30px;
  border-top:1px solid rgba(255,255,255,.14)}
.hs-copy .hs-proof-row{flex-direction:column;align-items:flex-start;gap:5px}
.hs-copy .hs-proof-row b{font-family:var(--serif);font-weight:400;font-size:27px;min-width:0;
  color:var(--gold-soft);line-height:1}
.hs-copy .hs-proof-row span{font-size:12.5px}

/* ── Feature cards: tinted, photograph-anchored ──────────────────────────── */
#offer .cards .card{display:flex;flex-direction:column;border-color:transparent;
  box-shadow:0 1px 2px rgba(12,30,51,.04),0 14px 36px rgba(12,30,51,.07)}
#offer .cards .card:nth-child(1){background:#F8F1DF}
#offer .cards .card:nth-child(2){background:#EAF0EA}
#offer .cards .card:nth-child(3){background:var(--cream-2)}
#offer .cards .card .ic{background:rgba(255,255,255,.72)}
#offer .cards .card p{color:var(--body)}
#offer .cards .card .shot{margin-top:auto;padding-top:22px;aspect-ratio:auto}
#offer .cards .card .shot img{position:static;aspect-ratio:4/3;border-radius:12px;display:block}

@media (max-width:900px){
}
@media (prefers-reduced-motion:reduce){
  .live-dot::after{animation:none}
}

/* ── Atmosphere bands ────────────────────────────────────────────────────────
   The quiet treatment: a landscape dimmed almost to texture, a slow gold
   geometric motif, and numbered hairline cards over the top. The photograph is
   atmosphere here, never content. */

.motif{position:absolute;top:50%;right:-150px;translate:0 -50%;width:min(62vw,620px);height:auto;
  pointer-events:none;color:var(--gold-soft);opacity:.14;animation:abspin 140s linear infinite}
.motif-ink{color:var(--ink);opacity:.07;right:auto;left:-180px}
@keyframes abspin{to{transform:rotate(360deg)}}

.purpose .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:.15;filter:saturate(.45);pointer-events:none}
.purpose .wrap{position:relative;z-index:2}
.purpose .split{align-items:center}
.purpose .lead{margin-bottom:0}

.purpose .plist{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:62px}
.purpose .p{border-top:0;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:26px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(2px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,background .4s}
.purpose .p:hover{transform:translateY(-6px);border-color:rgba(201,166,90,.5);
  background:rgba(255,255,255,.07)}
.purpose .p .n{display:block;font-family:var(--serif);font-size:29px;line-height:1;
  color:var(--gold-soft);margin-bottom:14px}
.purpose .p h4{margin-bottom:8px}

/* the promise band, on a ground drawn from the navy rather than a new hue */
.promise-band{background:#E9EEF4;overflow:hidden}
.promise-band .card{background:rgba(255,255,255,.78);border-color:rgba(12,30,51,.07)}
.promise-band .card:hover{transform:translateY(-6px) rotate(-.6deg)}
.promise-band .card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.promise-band .card .ic{background:var(--green);color:#fff}

@media (max-width:900px){
  .purpose .plist{grid-template-columns:1fr 1fr;margin-top:40px}
  .motif{width:90vw;right:-40vw}
  .motif-ink{left:-50vw}
}
@media (max-width:560px){ .purpose .plist{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .motif{animation:none} }

/* the same quiet treatment on the light band: the photograph has to sit much
   further back on a pale ground, with a scrim so the cards keep their edge */
.promise-band .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 55%;opacity:.30;filter:saturate(.45) contrast(.95);pointer-events:none}
.promise-band .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#E9EEF4 0%,rgba(233,238,244,.42) 34%,rgba(233,238,244,.78) 100%)}
.promise-band .wrap{position:relative;z-index:2}
.promise-band .card{background:rgba(255,255,255,.86);backdrop-filter:blur(3px)}

/* ── Hero: one photograph across the top ─────────────────────────────────────
   Sharp on the right where the student is, dissolving left into the navy so
   the headline keeps clean ground. Same blending idea as the bands below. */

.hero-photo{min-height:clamp(540px,76vh,740px);display:flex;align-items:center;isolation:isolate}
.hero-photo .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:76% 44%;z-index:0}
.hero-photo .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,
    var(--navy-deep) 0%, var(--navy-deep) 24%, rgba(10,24,38,.94) 38%,
    rgba(10,24,38,.72) 52%, rgba(10,24,38,.34) 70%, rgba(10,24,38,.10) 86%, rgba(10,24,38,.04) 100%),
  linear-gradient(180deg, rgba(10,24,38,.58) 0%, rgba(10,24,38,0) 26%,
    rgba(10,24,38,0) 68%, rgba(10,24,38,.52) 100%)}
.hero-photo .glow{z-index:1}
.hero-photo .wrap{position:relative;z-index:2;width:100%}
@media (min-width:901px){ .hero-photo .hs-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)} }

@media (max-width:900px){
  .hero-photo{min-height:0}
  .hero-photo .hero-bg{object-position:72% 26%}
  .hero-photo .hero-scrim{background:
    linear-gradient(180deg, rgba(10,24,38,.62) 0%, rgba(10,24,38,.86) 34%,
      var(--navy-deep) 62%, var(--navy-deep) 100%)}
}

/* ── Results and global: the same treatment, carried through ─────────────── */

.results-band{overflow:hidden}
.results-band .motif{opacity:.05;right:auto;left:-200px;width:min(52vw,520px)}
.results-band .wrap{position:relative;z-index:2}
.results-band .stat-list{display:grid;gap:12px;background:none;border:0;border-radius:0;overflow:visible}
.results-band .stat-list .item{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;align-items:center;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.results-band .stat-list .item:hover{transform:translateY(-5px);box-shadow:var(--shadow);
  border-color:rgba(184,145,46,.42)}

.story{position:relative;overflow:hidden}
.story .motif{top:-78px;right:-78px;left:auto;translate:0 0;width:300px;opacity:.2;
  color:var(--gold-soft);animation-duration:90s}
.story .who,.story .q,.story .grades,.story p{position:relative;z-index:2}

.global-band{background:var(--cream);overflow:hidden}
.global-band .motif{opacity:.11;right:-190px}
.global-band .wrap{position:relative;z-index:2}
.global-band .cards .card{background:rgba(255,255,255,.82);border-color:rgba(12,30,51,.07);
  backdrop-filter:blur(3px)}
.global-band .cards .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.global-band .card .ic{background:var(--green);color:#fff}
.global-band .globe-tags .t{background:rgba(255,255,255,.78);border-color:rgba(12,30,51,.08)}

@media (max-width:620px){
  .results-band .stat-list .item{flex-direction:column;align-items:flex-start;gap:10px}
  .results-band .stat-list .big{min-width:0}
}

/* .cards.two never collapsed on mobile — .cards.two outranks .cards inside the
   860px query at line 240, so the global cards ran off the right edge. */
@media (max-width:860px){ .cards.two{grid-template-columns:1fr} }

/* ── The day, in hours: the three parts of a week ─────────────────────────── */
.day-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.day-parts .dp{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.day-parts .dp b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:6px}
.day-parts .dp span{font-size:13.5px;line-height:1.5;color:var(--body)}
@media (max-width:860px){ .day-parts{grid-template-columns:1fr} }

/* the day-vis column must be allowed to shrink: the bar labels were forcing a
   min-content width that pushed the whole column past the viewport on phones */
.split > .day-vis{min-width:0}
.bar-track{min-width:0}
.bar-fill{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Inner-page banners: the homepage blend, shorter ─────────────────────────
   Same markup as the homepage hero (hero-bg + hero-scrim); the page-hero is
   just not as tall. Per-page framing goes on the img's object-position. */
.page-hero.hero-photo{min-height:clamp(420px,54vh,580px);display:flex;align-items:center;isolation:isolate}
.page-hero.hero-photo .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:0}
.page-hero.hero-photo .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-deep) 26%, rgba(10,24,38,.94) 40%,
    rgba(10,24,38,.70) 54%, rgba(10,24,38,.32) 72%, rgba(10,24,38,.10) 88%, rgba(10,24,38,.04) 100%),
  linear-gradient(180deg, rgba(10,24,38,.56) 0%, rgba(10,24,38,0) 28%, rgba(10,24,38,0) 70%, rgba(10,24,38,.48) 100%)}
.page-hero.hero-photo .glow{z-index:1}
.page-hero.hero-photo .wrap{width:100%}
@media (max-width:900px){
  .page-hero.hero-photo{min-height:0}
  .page-hero.hero-photo .hero-bg{object-position:70% 30%}
  .page-hero.hero-photo .hero-scrim{background:
    linear-gradient(180deg, rgba(10,24,38,.60) 0%, rgba(10,24,38,.86) 34%, var(--navy-deep) 62%, var(--navy-deep) 100%)}
}

/* ── Footer: the boys playing football, blended ──────────────────────────────
   CSS-only, so every page gets it and nothing in app.js changes. The photo
   sits to the right under a scrim that stays navy on the left, where the
   wordmark and the "about" line are, and never drops below ~55% navy on the
   right, because the link columns run right across it. */
footer.site{position:relative;isolation:isolate;overflow:hidden;background:
  linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-deep) 28%, rgba(10,24,38,.92) 46%,
    rgba(10,24,38,.74) 68%, rgba(10,24,38,.58) 100%),
  linear-gradient(180deg, rgba(10,24,38,.78) 0%, rgba(10,24,38,.18) 42%, rgba(10,24,38,.55) 100%),
  url(images/football-oxford.jpg) right 42% / cover no-repeat var(--navy-deep)}
@media (max-width:900px){
  footer.site{background:
    linear-gradient(180deg, rgba(10,24,38,.90) 0%, rgba(10,24,38,.80) 50%, rgba(10,24,38,.92) 100%),
    url(images/football-oxford-800.jpg) 60% 40% / cover no-repeat var(--navy-deep)}
}

/* generalise the day-vis fix: a 1fr track is minmax(auto,1fr), so any child
   with wide min-content blows the column out on phones. Let them all shrink. */
.split > *{min-width:0}

/* the stat list's numeral column (min-width 118px) crushes the label on
   phones wherever it appears, not only inside .results-band: stack it */
@media (max-width:620px){
  .stat-list .item{flex-direction:column;align-items:flex-start;gap:10px}
  .stat-list .big{min-width:0}
}

/* ── Photo band (light): a photograph far back behind a section's cards ────
   The promise band's treatment, made reusable: cream ground, the picture at
   ~24% and desaturated, a scrim fading from the ground colour so cards keep
   their edge. Markup: <img class="backdrop"> + <span class="scrim"> first. */
.photo-band{position:relative;background:var(--cream-2);overflow:hidden}
.photo-band .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;opacity:.24;filter:saturate(.35) contrast(.92);pointer-events:none}
.photo-band .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--cream-2) 0%,rgba(244,237,224,.42) 34%,rgba(244,237,224,.78) 100%)}
.photo-band .wrap{position:relative;z-index:2}
.photo-band .card{background:rgba(255,255,255,.86);border-color:rgba(12,30,51,.07);backdrop-filter:blur(3px)}
.photo-band .card .ic{background:var(--green);color:#fff}

/* ── Scene: a full-strength photograph as the section ────────────────────────
   The Apple move. The picture is the band, at full opacity; a vertical scrim
   keeps the headline on navy; the cards are frosted glass floating over it;
   the image drifts a little with scroll (app.js, [data-parallax]). */
.scene{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  min-height:clamp(620px,88vh,860px);display:flex;align-items:center}
.scene .backdrop{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;object-position:50% 58%;
  z-index:0;will-change:transform}
.scene .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg, rgba(10,24,38,.78) 0%, rgba(10,24,38,.42) 38%, rgba(10,24,38,.28) 62%, rgba(10,24,38,.70) 100%)}
.scene .wrap{position:relative;z-index:2;width:100%}
.scene .eyebrow{color:var(--gold-soft)}.scene .eyebrow::before{background:var(--gold-soft)}
.scene h2{color:#fff;text-shadow:0 2px 24px rgba(6,16,28,.45)}
.scene .lead{color:rgba(233,239,245,.86)}
.scene .cards .card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 20px 60px rgba(6,16,28,.35);color:#fff;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .45s,border-color .45s}
.scene .cards .card:hover{transform:translateY(-6px);background:rgba(255,255,255,.16);border-color:rgba(201,166,90,.55)}
.scene .cards .card h3{color:#fff}
.scene .cards .card p{color:rgba(233,239,245,.82)}
.scene-note{font-size:12.5px;color:rgba(233,239,245,.66);margin-top:18px;text-align:center}
@media (max-width:900px){
  .scene{min-height:0;padding:88px 0}
  .scene .backdrop{object-position:50% 50%}
}
@media (prefers-reduced-motion:reduce){ .scene .backdrop{inset:0;height:100%;transform:none !important} }

/* scene: the tier-head / tier-note pattern (tech-requirements) inverted too,
   and the kit-card icon tiles turned to glass with the gold stroke kept */
.scene .tier-head .k{color:var(--gold-soft)}
.scene .tier-head h3{color:#fff;text-shadow:0 2px 24px rgba(6,16,28,.45)}
.scene .tier-note{color:rgba(233,239,245,.82)}
.scene .cards.kit .card .ic{background:rgba(255,255,255,.14);color:var(--gold-soft)}
.scene .backdrop.center{object-position:50% 40%}

/* the day panel: wider than the text column on desktop, and its three parts
   as full-width rows (title | text) so nothing wraps a word per line */
@media (min-width:901px){ #day .split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} }
.day-parts{grid-template-columns:1fr;gap:10px}
.day-parts .dp{display:grid;grid-template-columns:168px 1fr;gap:16px;align-items:baseline;padding:14px 18px}
.day-parts .dp b{margin-bottom:0;font-size:17px;line-height:1.2}
.day-parts .dp b em{display:block;font-style:italic;font-weight:400;font-size:14px;color:var(--green)}
@media (max-width:620px){ .day-parts .dp{grid-template-columns:1fr;gap:6px} }

/* the row that is Al-Birr's: the bar's navy, so the colour code carries down */
.day-parts .dp-ours{background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 14px 34px rgba(12,30,51,.18)}
.day-parts .dp-ours b{color:#fff}
.day-parts .dp-ours b em{color:var(--gold-soft)}
.day-parts .dp-ours span{color:rgba(233,239,245,.86)}
.day-parts .dp b small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--gold-soft);margin-bottom:6px}

/* ---- About: the ethos scene (full-strength evening photo, copy over the dark left, values as glass cards) ---- */
.ethos{min-height:clamp(600px,78vh,760px);align-items:stretch}
.ethos .backdrop{object-position:74% 50%}
.ethos .scrim{background:
  linear-gradient(90deg, rgba(10,24,38,.94) 0, rgba(10,24,38,.86) calc(max(50%, 640px) - 40px), rgba(10,24,38,.3) calc(max(50%, 640px) + 260px), rgba(10,24,38,.08) 100%),
  linear-gradient(180deg, rgba(10,24,38,.20) 0%, rgba(10,24,38,0) 35%, rgba(10,24,38,.62) 100%)}
.ethos .wrap{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding-top:96px;padding-bottom:64px;min-height:inherit}
.ethos-copy{max-width:600px}
.ethos-copy .lead{margin-bottom:0}
.ethos-values{gap:16px}
.ethos-values .card{padding:26px 26px 28px}
.ethos-values .card .n{display:block;font-family:var(--serif);font-size:30px;line-height:1;color:var(--gold-soft);margin-bottom:14px}
.ethos-values .card h3{font-size:22px;margin-bottom:8px}
.ethos-values .card p{font-size:15px;line-height:1.55;margin:0}
@media (max-width:1024px){ .ethos-values{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  .ethos{min-height:0;padding:0}
  .ethos .wrap{padding-top:88px;padding-bottom:56px;gap:40px}
  .ethos .backdrop{object-position:70% 50%}
  .ethos .scrim{background:linear-gradient(180deg, rgba(10,24,38,.92) 0%, rgba(10,24,38,.74) 42%, rgba(10,24,38,.88) 100%)}
}
@media (max-width:620px){ .ethos-values{grid-template-columns:1fr} }

/* ---- Admissions: the programme as a banner-style scene (photo sharp on the right, copy and cards on the navy). The only photograph below the banner, by Asif's decision. ---- */
.prog-scene{min-height:0;padding:96px 0}
.prog-scene .backdrop{object-position:100% 36%}
.prog-scene .scrim{background:
  linear-gradient(90deg,rgba(10,24,38,.98) 0,rgba(10,24,38,.96) calc(max(50% + 96px, 736px) - 10px),rgba(10,24,38,.84) calc(max(50% + 96px, 736px) + 110px),rgba(10,24,38,.24) calc(max(50% + 96px, 736px) + 380px),rgba(10,24,38,.12) 100%),
  linear-gradient(180deg,rgba(10,24,38,.35) 0%,rgba(10,24,38,0) 30%,rgba(10,24,38,0) 70%,rgba(10,24,38,.5) 100%)}
.prog-grid{display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%)}
.prog-copy .lead{margin-bottom:34px}
.prog-cards{grid-template-columns:1fr 1fr;gap:16px}
.prog-cards .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 14px 40px rgba(4,12,24,.35)}
.prog-cards .card .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:12px}
.prog-cards .card p{margin-bottom:12px;color:rgba(233,239,245,.88)}
.prog-cards .card .subjects{font-size:14px;color:rgba(233,239,245,.7);margin:0}
@media (max-width:1024px){ .prog-grid{grid-template-columns:minmax(0,70%) minmax(0,30%)} }
@media (max-width:900px){
  .prog-scene{padding:80px 0}
  .prog-scene .backdrop{object-position:70% 30%}
  .prog-scene .scrim{background:linear-gradient(180deg,rgba(10,24,38,.94) 0%,rgba(10,24,38,.9) 55%,rgba(10,24,38,.96) 100%)}
  .prog-grid{grid-template-columns:1fr}
  .prog-cards{grid-template-columns:1fr}
}
@media (max-width:900px){
  .prog-scene{padding:80px 0}
}

/* ---- Results: "Honest by design" over a dimmed photograph (the closing band stays the plain navy block, by Asif's decision) ---- */
.report-band .backdrop{object-position:50% 42%}
.report-band .prose li{color:var(--body)}
}

/* ---- Student life: the voices keep the circle, made larger and quieter: a 116px portrait in a soft brass ring, slightly desaturated so it sits in the card ---- */
.card.voice{display:flex;flex-direction:column}
.card.voice .shot{position:relative;margin:0 0 18px;width:116px;height:116px;border-radius:50%;overflow:hidden;aspect-ratio:1/1;box-shadow:0 0 0 1px rgba(184,145,46,.45),0 0 0 6px rgba(184,145,46,.08),0 10px 26px rgba(12,30,51,.12)}
.card.voice .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,18%);filter:saturate(.82);transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card.voice .shot::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.card.voice:hover .shot img{transform:scale(1.04)}
.card.voice h3{margin:0;font-size:19px}

/* ── Mobile tap targets ──────────────────────────────────────────────────────
   Phones are 60-70% of traffic. Measured at 390px, these controls came in at
   21-28px: the announcement dismiss, the burger (the primary nav control), the
   footer social icons and the footer links. WCAG 2.2 asks for 24x24 minimum
   and both platform guidelines for 44x44.

   Everything here grows by padding or min-size only, so nothing reflows. The
   footer links go to ~37px rather than 44px on purpose: twelve links at 44px
   would add roughly 250px to every page, which works against the tighter
   rhythm. The icon-only and chrome controls, which have no width to
   compensate, do get the full 44px. */
@media(max-width:640px){
  .announce-x{right:4px;padding:0;width:44px;height:44px;display:grid;place-items:center}
  .burger{padding:11px 6px;min-height:44px;min-width:44px;justify-content:center;align-items:center}
  .socials{gap:2px}
  .socials a{width:44px;height:44px}
  .legal a{display:inline-block;padding:11px 8px}
  .foot-grid a{display:inline-block;padding:7px 0}
  .tile .cta{padding:10px 0}
}