/* Alfurqan Institute — brand system v2
   Navy #111B3A · Gold #C79A49 · Off White #F7F3EB · Sand #E9E1D1 · Charcoal #23242A
   Ratio: ~60% off white/sand, 25% navy, 10% charcoal text, 5% gold. Gold is small on purpose. */

:root{
  --navy:#111B3A; --gold:#C79A49; --off:#F7F3EB; --sand:#E9E1D1; --char:#23242A;
  --navy-80:rgba(17,27,58,.80); --navy-55:rgba(17,27,58,.55); --line:rgba(17,27,58,.14);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --arabic:"Amiri","Scheherazade New",serif;
  --wrap:1120px; --r:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--off);color:var(--char);font-family:var(--sans);
  font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

h1,h2,h3,.display{font-family:var(--serif);font-weight:700;color:var(--navy);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.16rem;line-height:1.3}
p{margin:0 0 1.1em;max-width:68ch}
.lead{font-size:1.1rem;color:var(--navy-80)}
.ar{font-family:var(--arabic);font-size:1.5em;line-height:2;direction:rtl}

/* kicker: H3 level, gold, letterspaced, with the gold rule above it */
.kicker{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.rule{width:64px;height:3px;background:var(--gold);border:0;margin:0 0 1.2rem}
/* a kicker that is also a heading, for the outline, looks the same as the plain one */
h2.kicker{line-height:inherit}

/* The header is sticky, so an in-page link (/programs#foundations) would land its target
   under it. Offset every anchor target by the header height (83px at most) plus a gap. */
[id]{scroll-margin-top:100px}

/* ---- header ---- */
header.site{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--off)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
/* The logo is the owner's supplied artwork as an <img>, never retyped. Sources and
   colourways live in brand/logo/. The header uses the navy colourway arranged
   horizontally, the footer the stacked navy colourway. */
.brandmark{display:inline-block;flex:none;line-height:0;text-decoration:none}
.brandmark img{display:block}
header.site .brandmark{flex:0 1 auto;min-width:0}
header.site .brandmark img{width:236px;height:auto;max-width:100%}
/* Between the burger breakpoint and 1100px the full nav and a 236px logo do not
   both fit, and the nav links would wrap onto two lines. Give the nav a little less
   gap, the header button a little less padding and the logo a little less width
   there. The nav keeps its natural width, so near 861px the logo narrows instead of
   the links wrapping. */
@media (min-width:861px) and (max-width:1099px){
  header.site .brandmark img{width:172px}
  header.site nav.main{gap:14px;flex:none}
  header.site nav.main .btn{padding:13px 20px}
}
footer.site .brandmark img{width:190px;height:auto}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{color:rgba(247,243,235,.86);text-decoration:none;font-size:.9rem;font-weight:500}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--gold)}
/* The header CTA is a gold pill: keep its navy label, which the nav link colour above would otherwise override. */
nav.main a.btn,nav.main a.btn:hover,nav.main a.btn[aria-current=page]{color:var(--navy)}
.burger{display:none;background:none;border:1px solid rgba(247,243,235,.32);color:var(--off);
  border-radius:var(--r);padding:9px 13px;font:inherit;font-size:.85rem;cursor:pointer}
@media (max-width:860px){
  nav.main{position:absolute;left:0;right:0;top:100%;background:var(--navy);flex-direction:column;
    align-items:stretch;gap:0;padding:6px 22px 18px;display:none;border-top:1px solid rgba(247,243,235,.14)}
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;border-bottom:1px solid rgba(247,243,235,.1);font-size:1rem}
  /* The CTA keeps its pill padding in the open menu instead of the flush link padding. */
  nav.main a.btn{margin-top:14px;padding:13px 22px;border-bottom:0;text-align:center}
  .burger{display:block}
}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:600;
  font-size:.92rem;padding:14px 26px;border-radius:var(--r);text-decoration:none;
  border:1px solid var(--gold);transition:opacity .15s}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
header.site .btn.ghost,.on-navy .btn.ghost{color:var(--off);border-color:rgba(247,243,235,.5)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:1.6rem 0 0}

/* ---- sections ---- */
section{padding:74px 0}
section.tight{padding:52px 0}
.on-navy{background:var(--navy);color:rgba(247,243,235,.88)}
.on-navy h1,.on-navy h2,.on-navy h3{color:var(--off)}
.on-navy .lead{color:rgba(247,243,235,.8)}
.on-navy a{color:var(--gold)}
/* A solid gold button on navy keeps its navy label; the link colour above made it gold on gold. */
.on-navy .btn:not(.ghost){color:var(--navy)}
.on-sand{background:var(--sand)}

.hero{background:var(--navy);color:var(--off);padding:86px 0 78px}
.hero h1{max-width:16ch}
.hero .lead{max-width:54ch}
/* The hero sits on navy, so its heading and lead need the light colours (they rendered navy on navy). */
.hero h1,.hero h2,.hero h3{color:var(--off)}
.hero .lead{color:rgba(247,243,235,.8)}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:2.2rem;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,235,.6)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:var(--off);border-top:3px solid var(--gold);padding:26px 24px}
.on-sand .card{background:var(--off)}
.on-navy .card{background:rgba(247,243,235,.05);border-top-color:var(--gold)}
.card h3{margin-bottom:.45em}
.card p{font-size:.95rem;margin-bottom:0;color:var(--navy-80)}
.on-navy .card p{color:rgba(247,243,235,.78)}
.num{font-family:var(--serif);font-size:.95rem;color:var(--gold);font-weight:700;
  display:block;margin-bottom:.5rem;letter-spacing:.05em}

/* ---- accordion: Adam's brief was less scrolling on mobile, everything reachable ---- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.08rem;font-weight:700;color:var(--navy)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.4rem;color:var(--gold);font-weight:400;line-height:1}
.acc details[open] summary::after{content:"\2013"}
.acc summary .tag{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}
.acc .body{padding:0 0 24px;max-width:70ch}
.acc .body p{font-size:.96rem}
.acc ul{margin:0 0 1em;padding-left:1.1em}
.acc li{margin-bottom:.4em;font-size:.96rem}

/* ---- data rows ---- */
.rows{border-top:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.row .t{font-weight:600;color:var(--navy);flex:1 1 240px}
.row .d{color:var(--navy-55);font-size:.93rem;flex:2 1 320px}
.row .v{font-family:var(--serif);color:var(--gold);font-weight:700;white-space:nowrap}

/* ---- unconfirmed marker: must be impossible to ship by accident ---- */
.tbc{display:inline-block;background:#FBE9C6;color:#6B4A05;border:1px dashed #B98A2E;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--r);text-transform:uppercase;
  white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Badges wrap at every width. They used to be nowrap with a 400px escape hatch and a
   three-selector whitelist for the contexts that needed wrapping, which missed any
   long marker in an ordinary <p>: at a 485px viewport the badge ran off the side and
   the whole page scrolled horizontally. Nowrap only ever helped a short badge, and a
   short badge does not wrap anyway. box-decoration-break keeps the dashed border and
   the sand fill intact on each line of one that does. */
.draftbar{background:#6B4A05;color:#FBE9C6;font-size:.8rem;text-align:center;
  padding:9px 22px;letter-spacing:.04em}
.draftbar a{color:#FBE9C6}

.quote{border-left:3px solid var(--gold);background:var(--sand);padding:24px 26px;margin:2rem 0}
.quote p{font-family:var(--serif);font-size:1.14rem;color:var(--navy);margin:0;font-style:italic}
.on-navy .quote{background:rgba(247,243,235,.06)}

footer.site{background:var(--navy);color:rgba(247,243,235,.7);padding:56px 0 30px;font-size:.9rem}
footer.site a{color:rgba(247,243,235,.82);text-decoration:none}
footer.site a:hover{color:var(--gold)}
footer.site h3{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-family:var(--sans);font-weight:600;margin-bottom:1rem}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:38px}
.fbot{border-top:1px solid rgba(247,243,235,.16);padding-top:22px;display:flex;
  flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.82rem;color:rgba(247,243,235,.55)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Hero pattern — layout taken from the reference site, colours
   and type from Volume 02. Pill buttons and the badge are the
   reference's shapes; panels keep our square corners and gold
   top rule so the two systems don't fight.
   ============================================================ */

.pill{display:inline-flex;align-items:center;gap:9px;background:var(--sand);
  border:1px solid rgba(199,154,73,.4);border-radius:999px;padding:8px 18px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 1.6rem}
.pill::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--gold);flex:none}
.on-navy .pill{background:rgba(247,243,235,.07);border-color:rgba(199,154,73,.5);color:rgba(247,243,235,.9)}

/* pill-shaped CTAs, per the reference */
.btn{border-radius:999px;padding:15px 30px}

.heroA{background:var(--off);padding:56px 0 74px;border-bottom:1px solid var(--line)}
/* THE FLOATING PAIR, the shape the owner's other site uses: two pills that sit
   over the page and never leave it, rather than a bar that slides in and out.
   Always visible was the ask, so there is no show or hide logic at all and
   nothing to go wrong on a screen size nobody tested.

   Centred on a phone, where a thumb reaches the middle of the bottom edge more
   easily than either corner. The safe-area inset keeps it above the iPhone
   home bar, and body padding keeps the footer out from under it. */
.floatcta{position:fixed;left:0;right:0;z-index:60;display:flex;justify-content:center;
  gap:10px;padding:0 16px;pointer-events:none;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.floatcta .btn{pointer-events:auto;border-radius:999px;min-height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(22,36,58,.26),0 2px 6px rgba(22,36,58,.14)}
.floatcta .fc-main{padding-left:30px;padding-right:30px;font-weight:700}
/* The second one is deliberately smaller and quieter: two buttons of equal
   weight floating over everything is two decisions, not one. */
.floatcta .fc-alt{padding-left:20px;padding-right:20px;background:#fff;
  border-color:var(--line);font-size:.92rem}

/* The wiggle. Still for five seconds, then a short shake, so it catches the
   eye on a page somebody has stopped scrolling rather than jiggling the whole
   time they are trying to read. Only the main button moves; the pair moving
   together would read as the page being broken. */
@keyframes afqWiggle{
  0%,86%,100%{transform:rotate(0) scale(1)}
  88%{transform:rotate(-3.5deg) scale(1.04)}
  90.5%{transform:rotate(3.5deg) scale(1.04)}
  93%{transform:rotate(-2.5deg) scale(1.02)}
  95.5%{transform:rotate(2deg) scale(1.02)}
  98%{transform:rotate(0) scale(1)}
}
.floatcta .fc-main{animation:afqWiggle 5.5s ease-in-out infinite;transform-origin:center}
/* Somebody who has asked their phone to stop animating things has asked for a
   reason, and a button that will not keep still is exactly what they turned
   off. It still floats; it just stops moving. */
@media (prefers-reduced-motion:reduce){.floatcta .fc-main{animation:none}}

/* Room at the foot of every page that carries the pair, so the last line of
   the footer is never underneath it. */
body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}

/* Named areas so the photo can sit beside the words on a wide screen and
   directly under the headline on a phone, without the markup order changing
   and without the image being duplicated. */
.heroA .cols{display:grid;gap:26px 48px;grid-template-columns:1.08fr .92fr;align-items:center;
  grid-template-areas:"say visual" "act visual"}
.heroA .say{grid-area:say}
.heroA .visual{grid-area:visual}
.heroA .act{grid-area:act}
@media (max-width:940px){
  .heroA .cols{grid-template-columns:1fr;gap:26px;grid-template-areas:"say" "visual" "act"}
}
.heroA h1{font-size:clamp(2.1rem,5.4vw,3.5rem);max-width:14ch;margin-bottom:.42em}
.heroA h1 em{font-style:italic;color:var(--gold);font-weight:700}
.heroA .lead{max-width:46ch;font-size:1.06rem}

/* six-up capability row under the CTAs */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px;
  margin:2.5rem 0 0;padding:0;list-style:none}
@media (max-width:760px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;
  font-weight:500;color:var(--navy);line-height:1.35}
.checks li::before{content:"";flex:none;width:17px;height:17px;margin-top:1px;border-radius:999px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6a8.4 8.4 0 100 16.8 8.4 8.4 0 000-16.8zm4.1 6.2l-4.9 5a.9.9 0 01-1.3 0L5.9 10.7a.9.9 0 111.3-1.3l1.4 1.4 4.2-4.3a.9.9 0 111.3 1.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6a8.4 8.4 0 100 16.8 8.4 8.4 0 000-16.8zm4.1 6.2l-4.9 5a.9.9 0 01-1.3 0L5.9 10.7a.9.9 0 111.3-1.3l1.4 1.4 4.2-4.3a.9.9 0 111.3 1.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.on-navy .checks li{color:rgba(247,243,235,.9)}

/* right-hand visual, with the small card overlapping its lower corner */
.visual{position:relative}
.visual .frame{background:var(--navy);aspect-ratio:4/3.4;display:flex;align-items:center;
  justify-content:center;padding:34px;text-align:center;color:rgba(247,243,235,.5);
  border-top:3px solid var(--gold)}
.visual .frame p{font-size:.84rem;letter-spacing:.06em;max-width:26ch;margin:0}
.visual .frame img{width:100%;height:100%;object-fit:cover}
.visual .frame:has(img){padding:0}
.visual .note{position:absolute;left:-14px;bottom:-22px;background:var(--off);
  border-left:3px solid var(--gold);padding:14px 20px;max-width:74%}
@media (max-width:940px){.visual .note{left:0;bottom:-16px}}
.visual .note b{display:block;font-family:var(--serif);color:var(--navy);font-size:1.02rem;line-height:1.2}
.visual .note span{display:block;font-size:.78rem;color:var(--navy-55);margin-top:4px}

/* FAQ reuses the accordion */
.faq{max-width:78ch}

/* ---- start here: two quizzes ---- */
button.btn{font-family:inherit;line-height:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.start-hero .wrap{max-width:860px;text-align:center}
.start-hero h1{max-width:none;margin-left:auto;margin-right:auto}
.start-hero .lead{margin:0 auto;max-width:52ch}

/* the two starts: navy panels with the gold top rule, one per quiz */
.paths{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  max-width:760px;margin:2.4rem auto 0;text-align:left}
.path{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin:0;
  font:inherit;text-align:left;cursor:pointer;background:var(--navy);color:var(--off);
  border:0;border-top:3px solid var(--gold);border-radius:0;padding:24px 24px 22px;transition:box-shadow .15s}
.path:hover{box-shadow:inset 0 0 0 1px rgba(199,154,73,.6)}
.path[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--gold)}
/* navy ring on the off-white hero, gold inset on the navy panel: both clear 3:1 */
.path:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:inset 0 0 0 2px var(--gold)}
.path-count{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.path-name{font-family:var(--serif);font-weight:700;font-size:1.75rem;line-height:1.15;color:var(--off)}
.path-desc{font-size:.92rem;line-height:1.5;color:rgba(247,243,235,.8)}
.path-go{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--gold)}

/* ---- placement quiz ---- */
.quiz-section{padding:48px 0 70px}
.quizwrap{max-width:700px;margin:0 auto;background:var(--off);border-top:3px solid var(--gold);
  padding:32px 34px 34px;min-height:430px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:600px){.quizwrap{padding:24px 20px 28px}}
.quizwrap h2{font-size:clamp(1.4rem,4vw,2rem)}
.quizwrap h2:focus{outline:none}
.quizwrap .lead{max-width:52ch}
/* the progress and result kicker carries real information here, so it takes text contrast */
.quizwrap .kicker{color:var(--navy-80)}
.quizwrap button:focus-visible,.quizwrap a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.quiz-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin:0 0 18px}
.quiz-label{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-80)}
.quiz-switch{background:none;border:0;padding:4px 0;font:inherit;font-size:.85rem;color:var(--navy);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.quiz-switch:hover{color:var(--gold)}
.quiz-progress{height:3px;background:var(--sand);margin:0 0 26px}
.quiz-progress span{display:block;height:100%;background:var(--gold);transition:width .25s ease}
.quiz-answers{display:grid;gap:10px;margin-top:1.7rem}
.quiz-answers button{width:100%;text-align:left;font:inherit;font-size:.95rem;font-weight:500;
  color:var(--navy);background:var(--sand);border:1px solid transparent;border-left:3px solid var(--sand);
  padding:16px 20px;cursor:pointer;transition:border-color .15s,background .15s}
.quiz-answers button:hover,.quiz-answers button:focus-visible,.quiz-answers button.picked{border-left-color:var(--gold);background:#efe7d6}
.quiz-foot{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:1.6rem}
.quiz-back{background:none;border:0;font:inherit;font-size:.86rem;color:var(--navy-80);
  cursor:pointer;padding:4px 0;margin:0}
.quiz-back:hover{color:var(--gold)}
@media (max-width:520px){.quizwrap .btns .btn{flex:1 1 100%;text-align:center}}
.quiz-note{font-size:.82rem;color:var(--navy-80);margin:1rem 0 0;overflow-wrap:anywhere}
.quiz-why{font-size:.97rem;color:var(--char);margin:0 0 .7em}
.quiz-also{font-size:.93rem;margin:.9rem 0 0}
.quiz-facts{margin:1.4rem 0 0;border-top:1px solid var(--line)}
.quiz-facts div{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:2px 18px;padding:11px 0;border-bottom:1px solid var(--line)}
.quiz-facts dt{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-80);padding-top:.3em}
.quiz-facts dd{margin:0;font-size:.95rem;color:var(--char)}
.quiz-facts dd b{font-family:var(--serif);font-size:1.15rem;color:var(--navy)}
@media (max-width:520px){.quiz-facts div{grid-template-columns:1fr}}
.quiz-callout{max-width:none;margin:1.3rem 0 0;border-left:3px solid var(--gold);background:var(--sand);
  padding:14px 18px;font-size:.93rem;color:var(--navy)}
/* markers inside narrow panels may wrap rather than push the panel sideways */

/* classes each quiz can match you to */
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.group-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:2.6rem 0 1.1rem}
.group-head h3{font-size:1.45rem;margin:0}
.card h4{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.16rem;line-height:1.3;margin:0 0 .45em}
.card .price{margin-top:.9rem;font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--navy)}
.card .price small{display:block;margin-top:2px;font-family:var(--sans);font-weight:400;font-size:.84rem;color:var(--navy-80)}

/* ---------------------------------------------------------------- course catalogue
   Name, a sentence or two, and an icon that opens the full course detail.
   The whole card is the link — an icon alone is a 24px tap target on a phone,
   and this list is read on a phone more than anywhere else. */
.courses{display:grid;gap:18px;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.coursecard{position:relative;display:flex;flex-direction:column;
  background:var(--off);border-top:2px solid var(--gold);padding:26px 26px 22px;
  text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease}
.on-sand .coursecard{background:#fff}
.coursecard:hover,.coursecard:focus-visible{transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(17,27,58,.10)}
.coursecard h3{font-family:var(--serif);color:var(--navy);margin:.5rem 0 .5em;
  padding-right:42px}
.coursecard p{color:var(--navy-80);font-size:.95rem;margin:0}
.coursecard .status{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-55)}
.coursecard .status.running{color:var(--gold)}
.coursecard .foot{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:1.5rem;padding-top:14px;border-top:1px solid var(--line)}
.coursecard .when{font-size:.84rem;color:var(--navy-55)}
.coursecard .more{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);
  transition:background .16s ease,color .16s ease}
.coursecard:hover .more,.coursecard:focus-visible .more{background:var(--gold);color:#fff}
.coursecard .more svg{width:15px;height:15px;display:block}

/* course detail pages: the term-by-term breakdown */
.term{border-top:1px solid var(--line);padding:26px 0 4px}
.term:last-of-type{border-bottom:1px solid var(--line);margin-bottom:.5rem}
.term > h3{font-family:var(--serif);font-size:1.3rem;color:var(--navy);margin:0 0 .35em}
.term > .termlead{color:var(--navy-80);max-width:68ch;margin:0 0 1.4rem}
.subj{margin:0 0 1.3rem;max-width:68ch}
.subj h4{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--navy);
  margin:0 0 .3em}
.subj p{margin:0;font-size:.95rem;color:var(--navy-80)}
.on-navy .subj h4{color:var(--off)}
.on-navy .subj p,.on-navy .term > .termlead{color:rgba(247,243,235,.78)}
.on-navy .term,.on-navy .term:last-of-type{border-color:rgba(247,243,235,.16)}
.on-navy .term > h3{color:var(--off)}

/* ---------------------------------------------------------------- registration form */
.reg{max-width:34rem;margin-top:2rem}
.reg label{display:block;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.04em;color:var(--navy);margin:1.3rem 0 .45rem}
.reg label .opt{font-weight:400;color:var(--navy-55);letter-spacing:0}
.reg input,.reg select{width:100%;font:inherit;font-size:1rem;color:var(--navy);
  background:var(--off);border:1px solid var(--line);border-radius:0;padding:12px 14px}
.on-sand .reg input,.on-sand .reg select{background:#fff}
.reg input:focus,.reg select:focus{outline:2px solid var(--gold);outline-offset:1px;
  border-color:var(--gold)}
.reg button{margin-top:1.8rem}
.reg button[disabled]{opacity:.55;cursor:default}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.reg .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin:1rem 0 0;font-size:.92rem;color:var(--navy-55);min-height:1.4em}
.formnote.good{color:var(--gold);font-weight:600}
.formnote.bad{color:#9a2f2f;font-weight:600}
.fineprint{margin-top:1.6rem;font-size:.86rem;color:var(--navy-55);max-width:44rem}

/* 29 Sep 2026: a photograph in the hero frame shows whole, never cropped */
.visual .frame.photo{aspect-ratio:auto}
.visual .frame.photo img{height:auto;display:block}
.visual .frame.photo{position:relative}
.visual .frame .ai-note{position:absolute;top:8px;right:8px;max-width:62%;background:rgba(17,27,58,.74);color:var(--off);font-size:.66rem;line-height:1.3;padding:5px 8px;border-radius:3px;text-align:right}
/* Until the centre has its own photograph, the hero frame carries the logo */
.visual .frame.brand{padding:34px}
.visual .frame.brand img{width:58%;height:auto;object-fit:contain}

/* 29 Sep 2026: the quiz ends in the registration form, not an email button */
.quiz-reg{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.quiz-reg h3{margin:0 0 .35rem}
.quiz-reg > p:first-of-type{margin-top:0}

/* 30 Sep 2026: homepage banner for new courses */
.announce{background:var(--gold);color:var(--navy);padding:12px 0}
.announce p{margin:0;font-size:.95rem;line-height:1.5}
.announce-tag{display:inline-block;background:var(--navy);color:var(--off);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;margin-right:8px;vertical-align:1px}
.announce a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}