.logo-img{height:36px;width:auto;display:block;transition:transform .35s var(--e)}
.brand:hover .logo-img,.hbrand:hover .logo-img{transform:scale(1.04)}
.logo-img.foot{height:34px}
.logo-white{height:34px;width:auto;display:block}
:root{
  /* ==== Palette taken directly from the Pinnacle logo ==== */
  --navy:#102F5A; --navy-d:#0A2143; --navy-l:#1B4680; --navy-xl:#2A5C9E;
  --orange:#FB7812; --orange-l:#FF9A45; --orange-d:#D45E06;
  --grey:#5D5E5F; --charcoal:#1A1919;

  --ink:#102F5A; --ink-2:#4A5A72; --muted:#8993A5;
  --blue:#102F5A; --blue-2:#1B4680; --blue-deep:#0A2143; --blue-tint:#E4EAF3;
  --orange-2:#FF9A45; --orange-deep:#D45E06; --orange-tint:#FDEBDA;
  --navy-2:#1B4680; --navy-soft:#1B4680;

  --glass:rgba(255,255,255,.60); --glass-brd:rgba(255,255,255,.78);
  --hair:rgba(16,47,90,.11);
  --r:20px; --r-lg:28px; --r-sm:14px;
  --blur:blur(24px) saturate(170%);
  --sh:0 8px 28px -10px rgba(16,47,90,.22), inset 0 1px 0 rgba(255,255,255,.85);
  --sh-lg:0 18px 44px -16px rgba(16,47,90,.32), inset 0 1px 0 rgba(255,255,255,.85);
  --wrap:1140px;
  --e:cubic-bezier(.4,0,.2,1);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI","Inter",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tab:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sf);color:var(--ink);font-size:16px;line-height:1.55;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;background:#EDF1F7;overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(36% 38% at 10% 12%, rgba(16,47,90,.42), transparent 68%),
    radial-gradient(30% 34% at 90% 8%, rgba(251,120,18,.34), transparent 66%),
    radial-gradient(44% 46% at 82% 72%, rgba(10,33,67,.36), transparent 70%),
    radial-gradient(38% 42% at 12% 86%, rgba(251,120,18,.20), transparent 70%),
    radial-gradient(30% 32% at 50% 46%, rgba(255,255,255,.5), transparent 62%);
  filter:blur(28px)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(237,241,247,.44)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.1;letter-spacing:-.025em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:8px}
::selection{background:var(--orange);color:#231603}

/* ---------- glass ---------- */
.glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:var(--sh);border-radius:var(--r);position:relative}
.glass-navy{background:linear-gradient(160deg,rgba(27,42,94,.90),rgba(16,47,90,.94));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 48px -18px rgba(8,15,40,.62), inset 0 1px 0 rgba(255,255,255,.18);
  border-radius:var(--r-lg);color:#fff;position:relative;overflow:hidden}

/* ---------- type helpers (per-section signatures) ---------- */
.kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;color:var(--blue-deep)}
.kicker::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--orange)}
.kicker.orange{color:var(--orange-deep)}
.kicker.light{color:#9DB0C9}.kicker.light::before{background:var(--orange-2)}
.shead{max-width:640px}
.shead h2{font-size:clamp(24px,2.9vw,34px);margin-top:14px}
.shead p{margin-top:12px;color:var(--ink-2);font-size:16px}
.shead.mid{margin:0 auto;text-align:center}
.shead.mid .kicker{justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:999px;border:none;cursor:pointer;line-height:1;
  transition:transform .25s var(--e),box-shadow .25s,background .25s,color .25s}
.btn svg{width:15px;height:15px;transition:transform .25s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-blue{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 8px 20px -8px rgba(16,47,90,.75), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-blue:hover svg{transform:translateX(3px)}
.btn-orange{background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#2a1b05;box-shadow:0 8px 20px -8px rgba(251,120,18,.75), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 8px 20px -10px rgba(16,47,90,.8)}
.btn-glass{background:rgba(255,255,255,.55);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);color:var(--ink);box-shadow:var(--sh)}
.btn-glass:hover{background:rgba(255,255,255,.72)}
.btn-glass.dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.btn-glass.dark:hover{background:rgba(255,255,255,.24)}
.alink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--blue);cursor:pointer}
.alink svg{width:14px;height:14px;transition:transform .25s var(--e)}
.alink:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
header.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:100;width:calc(100% - 22px);max-width:1680px}
.nav-in{display:flex;align-items:center;gap:18px;height:58px;padding:0 10px 0 16px;border-radius:18px;position:relative;
  background:rgba(255,255,255,.62);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:0 8px 24px -10px rgba(16,47,90,.24), inset 0 1px 0 rgba(255,255,255,.85)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand .mk{transition:transform .4s var(--e)}
.brand:hover .mk{transform:rotate(-8deg) scale(1.06)}
.brand small{display:block;font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav-links{display:flex;gap:6px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{padding:9px 17px;font-size:13.5px;font-weight:500;color:var(--ink-2);border-radius:10px;transition:.2s}
.nav-links a:hover{color:var(--navy);background:rgba(255,255,255,.6)}
.nav-links a.active{color:#fff;background:var(--blue);box-shadow:0 4px 12px -4px rgba(16,47,90,.7)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;width:40px;height:40px;border:none;background:rgba(255,255,255,.55);border-radius:11px;cursor:pointer;align-items:center;justify-content:center;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:17px;height:2px;background:var(--navy);border-radius:2px;transition:.25s}
.burger span::before{position:absolute;transform:translateY(-5.5px)}
.burger span::after{position:absolute;transform:translateY(5.5px)}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:rotate(45deg)}
body.menu-open .burger span::after{transform:rotate(-45deg)}

.view{display:none}
.view.active{display:block;animation:fade .45s var(--e)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section{padding-top:74px;padding-bottom:74px}
.section.tight{padding-top:52px;padding-bottom:52px}

/* ---------- HERO ---------- */
.hero{padding-top:118px;padding-bottom:64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.6);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);color:var(--navy);box-shadow:var(--sh)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--orange);display:block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(251,120,18,.6)}50%{box-shadow:0 0 0 6px rgba(251,120,18,0)}}
.hero h1{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-top:18px;max-width:16ch}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange-deep),var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:16px;font-size:16.5px;color:var(--ink-2);max-width:46ch;line-height:1.55}
.hero .cta{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
.hero-badges{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.hb{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.5);border:1px solid var(--glass-brd);color:var(--ink-2);transition:.25s;cursor:default}
.hb:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.hb svg{width:13px;height:13px;color:var(--blue)}

/* interactive summit panel */
.summit-card{padding:22px;border-radius:var(--r-lg)}
.summit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.summit-head .t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.summit{position:relative;height:172px;overflow:visible}
.summit svg{width:100%;height:100%;overflow:visible}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;background:none;border:none;cursor:pointer;padding:0;transition:.25s var(--e)}
.node i{width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);box-shadow:0 2px 8px rgba(16,47,90,.45);transition:.25s var(--e)}
.node:hover,.node.on{color:var(--blue-deep);transform:translate(-50%,-50%) scale(1.12)}
.node.on i{background:var(--blue);box-shadow:0 0 0 6px rgba(16,47,90,.18)}
.node.top i{border-color:var(--orange);background:var(--orange)}
.node.top{color:var(--orange-deep)}
.node.top.on i{box-shadow:0 0 0 7px rgba(251,120,18,.22)}
.k1{left:9%;top:84%}.k2{left:38%;top:62%}.k3{left:66%;top:40%}.k4{left:92%;top:14%}
.summit-info{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--blue-tint);border:1px solid rgba(16,47,90,.16);min-height:64px}
.summit-info b{font-size:13.5px;display:block;color:var(--navy)}
.summit-info span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:3px}

/* ---------- section: what we do (numbered tabs) ---------- */
.do-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.do{padding:22px;border-radius:var(--r);cursor:pointer;transition:transform .3s var(--e),box-shadow .3s;overflow:hidden;position:relative;text-align:left;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-brd);box-shadow:var(--sh)}
.do::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e)}
.do:hover,.do.on{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.do:hover::before,.do.on::before{transform:scaleY(1)}
.do.on{background:rgba(255,255,255,.78)}
.do .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:linear-gradient(160deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 6px 16px -6px rgba(16,47,90,.7);transition:transform .35s var(--e)}
.do:hover .ic{transform:rotate(-6deg) scale(1.06)}
.do.orange .ic{background:linear-gradient(160deg,var(--orange-2),var(--orange));box-shadow:0 6px 16px -6px rgba(251,120,18,.7);color:#2a1b05}
.do.navy .ic{background:linear-gradient(160deg,var(--navy-soft),var(--navy));box-shadow:0 6px 16px -6px rgba(16,47,90,.7)}
.do .ic svg{width:21px;height:21px}
.do .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.do h3{font-size:17px;margin-top:8px}
.do p{margin-top:7px;color:var(--ink-2);font-size:14px}
.do .alink{margin-top:14px}

/* ---------- section: open courses (navy) ---------- */
.oc-wrap{padding:32px}
.oc-wrap .shead h2{color:#fff}
.oc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.oc{display:flex;flex-direction:column;padding:18px;border-radius:16px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);transition:.3s var(--e);position:relative;overflow:hidden}
.oc:hover{background:rgba(255,255,255,.13);transform:translateY(-3px);border-color:rgba(251,120,18,.5)}
.oc .lv{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--orange-2);display:inline-flex;align-items:center;gap:6px}
.oc .lv::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
.oc h3{color:#fff;font-size:15.5px;margin-top:10px;line-height:1.3;font-weight:600}
.oc p{color:#A9B5C7;font-size:12.5px;margin-top:6px;flex:1}
.oc .book{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff;font-size:13px;
  align-self:flex-start;padding:8px 14px;border-radius:999px;background:rgba(251,120,18,.9);color:#2a1b05;transition:.25s}
.oc .book svg{width:12px;height:12px}
.oc .book:hover{background:var(--orange);transform:translateX(3px)}
.oc-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:24px}

/* ---------- section: why (interactive stat meters) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.why{padding:20px;border-radius:var(--r);text-align:left;cursor:default;transition:transform .3s var(--e);background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-brd);box-shadow:var(--sh)}
.why:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.why h3{font-size:15px}
.why p{margin-top:6px;color:var(--ink-2);font-size:13px}

/* ---------- accreditations ---------- */
.accreds{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.accred{display:flex;align-items:center;gap:11px;padding:13px 18px;border-radius:15px;transition:.3s var(--e);cursor:default;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-brd);box-shadow:var(--sh)}
.accred:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(16,47,90,.35)}
.accred .emb{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-tint);color:var(--blue-deep);transition:.3s}
.accred:hover .emb{background:var(--blue);color:#fff}
.accred .emb svg{width:19px;height:19px}
.accred b{font-size:13.5px;display:block;line-height:1.1}
.accred small{font-size:11.5px;color:var(--muted)}
.accred img{max-height:38px;width:auto}

/* ---------- reviews (interactive slider) ---------- */
.q{padding:22px;border-radius:var(--r);transition:transform .3s var(--e);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-brd);box-shadow:var(--sh)}
.q:hover{transform:translateY(-4px)}
.q .stars{color:var(--orange);letter-spacing:2px;font-size:12px;margin-top:10px}
.q blockquote{margin:10px 0 0;font-size:14.5px;line-height:1.5;font-weight:500}
.q .who{margin-top:14px;font-size:12px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta-final{padding:38px 32px;text-align:center;overflow:hidden}
.cta-final h2{font-size:clamp(22px,3vw,32px);color:#fff}
.cta-final p{color:#B7C3D6;margin-top:10px;font-size:15px}
.cta-final .cta{display:flex;gap:11px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.cta-final .rings{position:absolute;right:-60px;top:-60px;width:240px;height:240px;opacity:.25;pointer-events:none}

/* ---------- COURSES: grouped catalogue ---------- */
.ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:28px}
.search{position:relative;flex:1;min-width:220px;max-width:340px}
.search input{width:100%;padding:12px 40px 12px 40px;border-radius:999px;border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.62);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font:inherit;font-size:14.5px;color:var(--ink);box-shadow:var(--sh)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(16,47,90,.14)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search input::-ms-clear{display:none}
.search .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(16,47,90,.08);color:var(--ink-2);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:15px;line-height:1}
.search.has .clr{display:flex}
.segs{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.45);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.seg{padding:8px 14px;border-radius:10px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);transition:.2s}
.seg:hover{color:var(--navy)}
.seg.on{background:var(--navy);color:#fff;box-shadow:0 4px 10px -4px rgba(16,47,90,.6)}
.cat-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px;flex-wrap:wrap}
.cat-meta .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.cat-meta .exp{font-size:12.5px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer}

.groups{display:flex;flex-direction:column;gap:10px}
.group{border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:var(--sh);transition:box-shadow .3s}
.group.open{box-shadow:var(--sh-lg)}
.ghead{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;background:none;border:none;cursor:pointer;text-align:left}
.ghead .gic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.3s var(--e)}
.ghead .gic svg{width:19px;height:19px}
.group.open .ghead .gic{transform:scale(1.06)}
.ghead .gt{flex:1}
.ghead .gt b{font-size:15.5px;display:block;letter-spacing:-.02em}
.ghead .gt span{font-size:12.5px;color:var(--muted)}
.ghead .cnt{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:999px;background:rgba(16,47,90,.06);color:var(--ink-2)}
.ghead .chev{width:18px;height:18px;color:var(--muted);transition:transform .3s var(--e);flex:0 0 auto}
.group.open .chev{transform:rotate(180deg)}
.gbody{max-height:0;overflow:hidden;transition:max-height .4s var(--e)}
.glist{padding:0 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.crow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.5);
  border:1px solid transparent;cursor:pointer;text-align:left;transition:.22s var(--e);width:100%}
.crow:hover{background:#fff;border-color:rgba(16,47,90,.28);transform:translateX(3px)}
.crow .dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.crow .cn{font-size:13.5px;font-weight:500;flex:1;line-height:1.3}
.crow .arw{width:14px;height:14px;color:var(--muted);opacity:0;transition:.22s}
.crow:hover .arw{opacity:1;color:var(--blue);transform:translateX(2px)}
.empty{text-align:center;color:var(--muted);padding:40px;font-size:14px}

/* category colours */
.c-Safety{--c:#D45E06;--cb:#FBE7D6}
.c-Care{--c:#102F5A;--cb:#E3E9F2}
.c-Food{--c:#FB7812;--cb:#FDEEE0}
.c-Business{--c:#1B4680;--cb:#E6ECF5}
.c-Compliance{--c:#5D5E5F;--cb:#ECECEC}
.c-People{--c:#0A2143;--cb:#E0E5EE}
.c-Professional{--c:#D45E06;--cb:#F7EADC}
.gic{background:var(--cb);color:var(--c)}
.crow .dot{background:var(--c)}

/* ---------- split / panels ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin-top:34px}
.panel{padding:26px;border-radius:var(--r)}
.prose p{color:var(--ink-2);margin-top:14px;font-size:15.5px}
.checklist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.45);transition:.25s}
.checklist li:hover{background:#fff;transform:translateX(3px)}
.checklist svg{width:17px;height:17px;color:var(--orange-deep);flex:0 0 auto;margin-top:2px}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.stat{flex:1;min-width:100px;padding:18px;text-align:center;border-radius:var(--r);transition:.3s var(--e)}
.stat:hover{transform:translateY(-4px)}
.stat b{font-size:30px;font-weight:800;letter-spacing:-.03em;display:block;line-height:1;color:var(--blue)}
.stat.o b{color:var(--orange-deep)}
.stat span{font-size:12px;color:var(--muted);margin-top:6px;display:block}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:start;margin-top:32px}
.cinfo{padding:24px;border-radius:var(--r-lg)}
.cinfo h3{color:#fff;font-size:17px;margin-bottom:6px}
.il{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.il:last-child{border-bottom:none}
.il .i{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.25s}
.il:hover .i{background:var(--orange);color:#2a1b05}
.il .i svg{width:16px;height:16px;color:var(--orange-2);transition:.25s}
.il:hover .i svg{color:#2a1b05}
.il b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9DB0C9;display:block;margin-bottom:2px}
.il a,.il span{color:#fff;font-size:14px}
.il a:hover{color:var(--orange-2)}
.form-card{padding:26px;border-radius:var(--r-lg)}
.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.field label .req{color:var(--orange-deep)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(16,47,90,.14);
  background:rgba(255,255,255,.7);font:inherit;font-size:14.5px;color:var(--ink);appearance:none;transition:.2s}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(16,47,90,.14);background:#fff}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.selectwrap{position:relative}
.selectwrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.field .err{color:#b3261e;font-size:12px;margin-top:5px;display:none}
.field.bad input,.field.bad select{border-color:#D45E06;box-shadow:0 0 0 4px rgba(212,94,6,.12)}
.field.bad .err{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:2px 0 16px}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--blue)}
.open-redirect{display:none;border-radius:16px;padding:22px;text-align:center;margin-bottom:14px;background:var(--orange-tint);border:1px solid rgba(251,120,18,.35)}
.open-redirect.show{display:block;animation:fade .3s var(--e)}
.open-redirect h3{font-size:17px;color:var(--navy)}
.open-redirect p{color:var(--ink-2);margin-top:7px;font-size:13.5px}
.open-redirect .btn{margin-top:14px}
.success{display:none;text-align:center;padding:26px 10px}
.success.show{display:block;animation:fade .4s var(--e)}
.success .tick{width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 10px 22px -8px rgba(16,47,90,.6)}
.success .tick svg{width:28px;height:28px}
.success h3{font-size:20px}
.success p{color:var(--ink-2);margin-top:8px;font-size:14px}
.form-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px}

/* ---------- legal / faq ---------- */
.legal{max-width:720px;margin:0 auto;padding:30px}
.legal .updated{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px}
.legal .note{border-radius:12px;padding:14px 16px;margin-top:18px;font-size:13px;color:var(--ink-2);background:var(--orange-tint);border:1px solid rgba(251,120,18,.3)}
.legal h3{font-size:17px;margin:26px 0 0}
.legal p{margin-top:10px;color:var(--ink-2);font-size:15px}
.legal ul{margin-top:10px;padding-left:18px;color:var(--ink-2);font-size:15px}
.legal ul li{margin-bottom:7px}
.legal a{color:var(--blue);font-weight:600}
.faq{max-width:760px;margin:30px auto 0;display:flex;flex-direction:column;gap:9px}
.qa{padding:0 20px;overflow:hidden;border-radius:var(--r)}
.qa>button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:15px;
  color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa .pm{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue-tint);position:relative;transition:.25s}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--blue);left:50%;top:50%;transform:translate(-50%,-50%);transition:.25s;border-radius:2px}
.qa .pm::before{width:10px;height:2px}.qa .pm::after{width:2px;height:10px}
.qa.open .pm{background:var(--blue)}
.qa.open .pm::before,.qa.open .pm::after{background:#fff}
.qa.open .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s var(--e)}
.qa .ans p{padding-bottom:18px;color:var(--ink-2);font-size:14px}


/* ---------- funding + review ---------- */
.fund-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.fund{padding:24px;border-radius:var(--r);position:relative;overflow:hidden;transition:transform .3s var(--e)}
.fund:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.fund .tagline{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--blue-tint);color:var(--blue-deep)}
.fund.o .tagline{background:var(--orange-tint);color:var(--orange-deep)}
.fund h3{font-size:19px;margin-top:14px}
.fund .amt{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--blue);margin-top:10px;line-height:1}
.fund.o .amt{color:var(--orange-deep)}
.fund .amt small{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:5px}
.fund p{margin-top:12px;color:var(--ink-2);font-size:14.5px}
.fund ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.fund ul li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.fund ul li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--blue)}
.fund.o ul li svg{color:var(--orange-deep)}
.fund .btn{margin-top:16px}
.fund-note{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}

.review-band{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:26px;border-radius:var(--r-lg);margin-top:28px}
.review-band .qr{width:132px;height:132px;border-radius:14px;background:#fff;padding:8px;flex:0 0 auto;box-shadow:var(--sh)}
.review-band h3{font-size:19px;color:#fff}
.review-band p{color:#B7C3D6;font-size:14px;margin-top:8px;max-width:44ch}
.review-band .row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.gstars{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#D8E0EB;font-weight:600}
.gstars b{color:var(--orange-2);letter-spacing:2px}
@media(max-width:620px){.fund-grid{grid-template-columns:1fr}.review-band{grid-template-columns:1fr;text-align:center;justify-items:center}.review-band .row{justify-content:center}}


.ocmeta{display:flex;flex-direction:column;gap:5px;margin-top:11px}
.ocmeta span{display:flex;align-items:center;gap:8px;color:#C2CCDC;font-size:12.5px}
.ocmeta svg{width:13px;height:13px;color:var(--orange-2);flex:0 0 auto}
.ocnote{color:#96A2B5!important;font-size:11.5px!important;margin-top:9px!important;font-style:italic}
.ocfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.price small{display:block;font-size:10px;font-weight:500;color:#96A2B5;margin-top:3px;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.stat-c{padding:20px 16px;border-radius:var(--r);text-align:center;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-brd);box-shadow:var(--sh);transition:transform .3s var(--e)}
.stat-c:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.stat-c b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--blue)}
.stat-c.o b{color:var(--orange-deep)}
.stat-c span{display:block;font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.35}
.stats-src{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px}
.awards{padding:24px 26px;border-radius:var(--r-lg);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-top:28px}
.awards .trophy{width:56px;height:56px;border-radius:16px;background:linear-gradient(160deg,var(--orange-2),var(--orange));
  display:flex;align-items:center;justify-content:center;color:#2a1b05;flex:0 0 auto;box-shadow:0 8px 18px -8px rgba(251,120,18,.8)}
.awards .trophy svg{width:28px;height:28px}
.awards h3{color:#fff;font-size:19px}
.awards p{color:#B7C3D6;font-size:13.5px;margin-top:6px}
.awards .cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.awards .cats span{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#D8E0EB;transition:.25s}
.awards .cats span:hover{background:var(--orange);color:#2a1b05;border-color:var(--orange)}
.talks{padding:28px;border-radius:var(--r-lg);margin-top:28px;position:relative;overflow:hidden}
.talks .free{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;background:var(--orange);color:#2a1b05}
.talks h3{color:#fff;font-size:22px;margin-top:14px}
.talks p{color:#B7C3D6;font-size:14px;margin-top:10px;max-width:56ch}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.topic{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:600;color:#D8E0EB;transition:.25s var(--e)}
.topic:hover{background:rgba(251,120,18,.92);color:#2a1b05;border-color:var(--orange);transform:translateY(-2px)}
.topic svg{width:15px;height:15px;color:var(--orange-2);flex:0 0 auto;transition:.25s}
.topic:hover svg{color:#2a1b05}
.talks .zone{display:flex;align-items:flex-start;gap:11px;margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.talks .zone svg{width:17px;height:17px;color:var(--orange-2);flex:0 0 auto;margin-top:2px}
.talks .zone b{color:#fff;font-size:13.5px;display:block}
.talks .zone span{color:#A9B5C7;font-size:12.5px}
@media(max-width:620px){.stats{grid-template-columns:1fr 1fr}.awards{grid-template-columns:1fr;gap:14px}}


.oc{position:relative}
.poster{display:block;width:100%;padding:0;border:none;background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden;
  cursor:zoom-in;margin-bottom:14px;position:relative;line-height:0;aspect-ratio:16/10}
.poster img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--e)}
.poster:hover img{transform:scale(1.05)}
.poster .zoom{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:50%;
  background:rgba(16,47,90,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:.25s}
.poster:hover .zoom{opacity:1}
.poster .zoom svg{width:15px;height:15px}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,33,67,.86);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:28px}
.lightbox.on{display:flex;animation:fade .25s var(--e)}
.lightbox img{max-width:min(92vw,620px);max-height:90vh;border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.lightbox .x{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer}
.lightbox .x:hover{background:rgba(255,255,255,.26)}
.talk-poster{margin-top:18px;margin-bottom:0;aspect-ratio:16/7}
@media(max-width:620px){.poster{aspect-ratio:16/11}.talk-poster{aspect-ratio:16/9}}


.stars,.st{display:inline-flex;align-items:center;gap:2px;line-height:0}
.stars svg,.st svg{width:14px;height:14px;color:var(--orange)}
.free svg{width:14px;height:14px}
.lightbox .x svg,.search .clr svg,.sb .clr svg{width:16px;height:16px}
.lightbox .x{font-size:0}
.search .clr,.sb .clr{font-size:0}


.accred-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px;font-style:italic}

/* ============ reversible scroll animations ============ */
.reveal{opacity:0;will-change:opacity,transform;
  transition:opacity .62s var(--e) var(--d,0ms), transform .62s var(--e) var(--d,0ms)}
.reveal.rv-up{transform:translateY(28px)}
.reveal.rv-down{transform:translateY(-22px)}
.reveal.rv-left{transform:translateX(-30px)}
.reveal.rv-right{transform:translateX(30px)}
.reveal.rv-scale{transform:scale(.93)}
.reveal.rv-fade{transform:none}
.reveal.rv-tilt{transform:translateY(26px) rotate(-1.2deg)}
.reveal.in{opacity:1;transform:none}
/* horizontal slide-ins can push past the viewport on narrow screens — go vertical instead */
@media(max-width:760px){
  .reveal.rv-left,.reveal.rv-right{transform:translateY(24px)}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}


/* ================= HERO — diffused light + soft ribbons ================= */
.hero-bg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--bleed);
  z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg .bloom{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.hero-bg .b1{width:62vw;height:50vw;right:-10vw;top:-24vw;
  background:radial-gradient(circle at 50% 50%, rgba(122,172,244,.72), rgba(96,150,235,.28) 45%, transparent 72%);
  animation:float1 34s ease-in-out infinite}
.hero-bg .b2{width:58vw;height:48vw;left:-18vw;bottom:-26vw;
  background:radial-gradient(circle at 50% 50%, rgba(6,20,46,.85), rgba(6,20,46,.35) 52%, transparent 74%);
  animation:float2 40s ease-in-out infinite}
.hero-bg .b3{width:42vw;height:34vw;right:-2vw;bottom:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(251,120,18,.40), rgba(251,120,18,.12) 45%, transparent 70%);
  animation:float3 46s ease-in-out infinite}

/* long soft ribbons — abstract, no hard geometry */
.hero-bg .ribbons{position:absolute;inset:0;width:100%;height:100%}
.hero-bg .rb{fill:none;stroke-linecap:round;filter:blur(30px);opacity:.9}
.hero-bg .r1{stroke-width:110;animation:slide1 30s ease-in-out infinite}
.hero-bg .r2{stroke-width:80;animation:slide2 38s ease-in-out infinite}
.hero-bg .r3{stroke-width:56;filter:blur(22px);animation:slide3 44s ease-in-out infinite}
@keyframes slide1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-24px,14px,0)}}
@keyframes slide2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(28px,-16px,0)}}
@keyframes slide3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-18px,-10px,0)}}

.hero-bg .veil{position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,24,52,.72) 0%, rgba(8,24,52,.32) 34%, transparent 56%),
             linear-gradient(170deg, rgba(255,255,255,.06) 0%, transparent 38%),
             radial-gradient(130% 78% at 50% 122%, rgba(3,10,26,.62), transparent 62%)}
@keyframes float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3vw,2vw,0)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3vw,-2vw,0)}}
@keyframes float3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2vw,-1vw,0) scale(1.09)}}
@media(prefers-reduced-motion:reduce){.hero-bg .bloom,.hero-bg .rb{animation:none!important}}

/* ---------- SHARPER EDGES ON THE DARK BAND ---------- */
.hero .summit-card{background:rgba(10,28,58,.55);border:1px solid rgba(160,190,235,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 22px 48px -20px rgba(2,8,22,.85)}
.hero .summit-info,.hero .prog-info{background:rgba(255,255,255,.10);border:1px solid rgba(170,198,238,.30)}
.hero .pill{background:rgba(10,28,58,.5);border:1px solid rgba(170,198,238,.36);color:#E2EAF6}
.hero .hb{background:rgba(10,28,58,.45);border:1px solid rgba(170,198,238,.28);color:#D3DEEE}
.hero .btn-glass{background:rgba(10,28,58,.5);border:1px solid rgba(170,198,238,.42);color:#fff}
.hero-foot{border-top:1px solid rgba(170,198,238,.26)}
.hero-count .arw{background:rgba(200,218,245,.55)}
.hero-count .arw::after{border-color:rgba(200,218,245,.8)}
.hero-count .dot-btn{border:1.5px solid rgba(200,218,245,.45)}
.scroll-cue .mouse{border:1.6px solid rgba(200,218,245,.55)}
/* crisp seam where the band meets the page */
.hero::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:var(--bleed);height:1px;background:rgba(255,255,255,.16);z-index:0}


/* ================= SUB-PAGE HEADERS ================= */
.phead{position:relative;isolation:isolate;color:#fff;padding-top:150px;padding-bottom:44px;margin-bottom:0}
.phead::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--bleed);z-index:-2;
  background:linear-gradient(168deg,#15406F 0%,#11315C 42%,#0C2549 100%)}
.phead::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:var(--bleed);height:1px;
  background:rgba(255,255,255,.16);z-index:0}
.phead-bg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--bleed);z-index:-1;pointer-events:none;overflow:hidden}
.phead-bg .pb{position:absolute;border-radius:50%;filter:blur(70px)}
.phead-bg .pb1{width:46vw;height:30vw;right:-6vw;top:-14vw;
  background:radial-gradient(circle,rgba(122,172,244,.55),transparent 70%)}
.phead-bg .pb2{width:34vw;height:24vw;right:16vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(251,120,18,.26),transparent 70%)}
.phead-bg .pb3{width:40vw;height:28vw;left:-14vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(6,20,46,.7),transparent 72%)}
.phead-bg .pveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,52,.7) 0%,rgba(8,24,52,.25) 38%,transparent 60%)}
.phead .kicker{color:#9FB6DE}
.phead .kicker::before{background:var(--orange)}
.phead h2{color:#fff;font-size:clamp(28px,3.6vw,42px);margin-top:14px}
.phead p{color:#B7C6DE;margin-top:14px;max-width:62ch;font-size:16px}
/* breadcrumb */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#8FA1C2;margin-bottom:20px}
.crumb a{color:#B7C6DE;cursor:pointer}
.crumb a:hover{color:#fff}
.crumb svg{width:12px;height:12px;opacity:.6}
.crumb .cur{color:#fff;font-weight:600}
@media(max-width:620px){.phead{padding-top:118px;padding-bottom:32px}}

/* ================= MICRO-INTERACTIONS ================= */

/* scroll progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;z-index:200;width:0;
  background:linear-gradient(90deg,var(--navy),var(--orange));
  box-shadow:0 0 10px rgba(251,120,18,.5);transition:width .1s linear}

/* hero entrance */
.hero-in{opacity:0;transform:translateY(18px);animation:heroUp .8s var(--e) forwards}
.hero-in.d1{animation-delay:.05s}.hero-in.d2{animation-delay:.16s}
.hero-in.d3{animation-delay:.27s}.hero-in.d4{animation-delay:.38s}.hero-in.d5{animation-delay:.5s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* animated underline behind the highlighted word */
.hero h1 em{position:relative;display:inline-block}
.nobr{white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;bottom:.01em;height:.085em;width:100%;
  background:var(--orange);opacity:.30;border-radius:3px;transform:scaleX(0);transform-origin:left;
  animation:swipe .9s var(--e) .7s forwards}
@keyframes swipe{to{transform:scaleX(1)}}

/* button sheen sweep on hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s var(--e);pointer-events:none}
.btn:hover::after{left:150%}

/* card icon flourishes */
.do .ic,.tcard .ic{transition:transform .45s var(--e),box-shadow .35s}
.do:hover .ic{transform:rotate(-8deg) scale(1.1) translateY(-2px)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.accred:hover .emb{transform:rotate(-6deg) scale(1.08)}
.accred .emb{transition:transform .4s var(--e),background .3s,color .3s}

/* course row: dot grows into a bar (logo motif) */
.crow .dot{transition:transform .28s var(--e),border-radius .28s}
.crow:hover .dot{transform:scaleY(2.6) scaleX(1.15);border-radius:2px}

/* group header icon */
.ghead .gic{transition:transform .4s var(--e)}
.group.open .ghead .gic,.gh:hover .gic{transform:rotate(-6deg) scale(1.08)}

/* booking card lift + poster zoom already present; add price pulse */
.oc:hover .price,.bk-item:hover .pr2{transform:translateY(-2px);transition:transform .3s var(--e)}

/* count-up numbers */
.count-up{font-variant-numeric:tabular-nums}

/* nav link underline grow */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--orange);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--e)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active::after{transform:scaleX(0)}

/* pill + badge float */
.hb{transition:transform .3s var(--e),background .3s,color .3s}
.topic{cursor:default}

/* summit node gentle idle pulse on the summit marker */
.node.top i{animation:summitPulse 3.2s ease-in-out infinite}
@keyframes summitPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,120,18,.45)}50%{box-shadow:0 0 0 9px rgba(251,120,18,0)}}

/* review card quote mark drift */

/* tab bar active pip (mobile) */
.tab{position:relative}
.tab.on::before{content:"";position:absolute;top:0;left:50%;width:18px;height:3px;border-radius:0 0 3px 3px;
  background:var(--orange);transform:translateX(-50%) scaleX(0);animation:pip .35s var(--e) forwards}
@keyframes pip{to{transform:translateX(-50%) scaleX(1)}}

/* footer link chevron */
footer.site nav a{position:relative;padding-left:0;transition:padding-left .25s var(--e),color .2s}
footer.site nav a:hover{padding-left:10px}
footer.site nav a::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  border-right:1.6px solid var(--orange);border-bottom:1.6px solid var(--orange);
  transform:translateY(-60%) rotate(-45deg) scale(0);transition:transform .25s var(--e)}
footer.site nav a:hover::before{transform:translateY(-60%) rotate(-45deg) scale(1)}

@media(prefers-reduced-motion:reduce){
  .hero-in{opacity:1!important;transform:none!important;animation:none!important}
  .hero h1 em::after{animation:none!important;transform:scaleX(1)!important}
  .node.top i{animation:none!important}
  .btn::after{display:none}
  .progress-bar{display:none}
}


/* countdown chip + calendar */
.oc{position:relative}
.cd{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#D8E0EB}
.cd.soon{background:rgba(251,120,18,.92);color:#231603;border-color:transparent}
.cd.past{opacity:.55}
.ocacts{display:flex;align-items:center;gap:8px}
.cal{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#D8E0EB;transition:.25s var(--e);flex:0 0 auto}
.cal:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px)}
.cal svg{width:16px;height:16px}
.bk-item .cd{position:static;background:var(--orange-tint);color:var(--orange-deep);border-color:transparent;font-size:10px}
.bkf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:11px;
  border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.6);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.cal-btn svg{width:15px;height:15px;color:var(--orange-deep)}
.cal-btn:active{transform:scale(.98)}


/* ---------- accessibility ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 20px;border-radius:0 0 12px 0;
  background:var(--navy);color:#fff;font-weight:600;font-size:14px}
.skip:focus{left:0}
.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}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.lightbox:focus{outline:none}

/* ---------- print ---------- */
@media print{
  body{background:#fff!important;color:#000;font-size:11pt}
  body::before,body::after,.hero-bg,.progress-bar,header.nav,.tabs,.poster,.lightbox,
  .btn,.cal,.alink,.searchbar,.ctrl,.segs,.cmeta{display:none!important}
  .view{display:block!important}
  .glass,.glass-navy,.navy{background:#fff!important;color:#000!important;border:1px solid #ccc!important;box-shadow:none!important}
  .oc h3,.shead h2,h1,h2,h3,h4{color:#000!important}
  .oc p,.ocmeta span,p{color:#222!important}
  .reveal{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .group .gbody{max-height:none!important}
  .qa .ans{max-height:none!important}
}

.to-top{position:fixed;right:22px;bottom:22px;z-index:120;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(16,47,90,.7);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s var(--e),transform .3s var(--e),background .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--orange);color:#231603;transform:translateY(-3px)}
.to-top svg{width:19px;height:19px}
@media print{.to-top{display:none}}


/* ---- catalogue: flag subjects with bookable dates ---- */
.crow{position:relative}
.crow .dated{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;padding:4px 9px;border-radius:6px;background:var(--orange-tint);color:var(--orange-deep);
  border:1px solid rgba(251,120,18,.28);white-space:nowrap;flex:0 0 auto}
.crow .dated svg{width:11px;height:11px}
.crow:hover .dated{background:var(--orange);color:#231603;border-color:var(--orange)}
.crow .arw{margin-left:8px}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:10px 2px 0}
.legend .chipdemo{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;
  border-radius:6px;background:var(--orange-tint);color:var(--orange-deep);border:1px solid rgba(251,120,18,.28)}
.legend .chipdemo svg{width:11px;height:11px}

/* ---- review slider controls ---- */

/* ---- footer CTA strip ---- */
.foot-cta{position:relative;isolation:isolate;color:#fff;border-radius:var(--r-lg);overflow:hidden;
  padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(150deg,#15406F,#0C2549)}
.foot-cta .fc-bloom{position:absolute;inset:0;z-index:-1;pointer-events:none}
.foot-cta .fc-bloom span{position:absolute;border-radius:50%;filter:blur(60px)}
.foot-cta .fc-bloom .x1{width:38%;height:150%;right:-4%;top:-40%;background:radial-gradient(circle,rgba(122,172,244,.5),transparent 70%)}
.foot-cta .fc-bloom .x2{width:26%;height:130%;right:22%;bottom:-50%;background:radial-gradient(circle,rgba(251,120,18,.3),transparent 70%)}
.foot-cta h3{color:#fff;font-size:clamp(20px,2.4vw,28px);max-width:22ch}
.foot-cta p{color:#B7C6DE;font-size:14.5px;margin-top:8px;max-width:46ch}
.foot-cta .row{display:flex;gap:11px;flex-wrap:wrap}
.foot-cta .btn-glass{background:rgba(10,28,58,.5);border:1px solid rgba(170,198,238,.42);color:#fff}

/* ---------- footer ---------- */
footer.site{margin:44px 12px 12px;padding:34px 30px 22px;border-radius:var(--r-lg)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:30px}
.fbrand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.fblurb{margin-top:12px;color:var(--ink-2);font-size:13.5px;max-width:32ch;line-height:1.6}
footer.site h5{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
footer.site nav a{display:block;padding:5px 0;color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.2s}
footer.site nav a:hover{color:var(--blue);transform:translateX(3px)}
.fc div{margin-bottom:10px;font-size:13.5px}
.fc b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.fc a{color:var(--ink-2)}.fc a:hover{color:var(--blue)}
.fsoc{display:flex;gap:8px;margin-top:14px}
.fsoc a{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.55);border:1px solid var(--glass-brd);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.25s}
.fsoc a:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.fsoc svg{width:16px;height:16px}
.foot-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:var(--muted)}
.foot-bottom nav{display:flex;gap:18px}
.foot-bottom nav a{cursor:pointer}.foot-bottom nav a:hover{color:var(--blue)}


@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:flex}
  header.nav.open-menu .nav-links{display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;transform:none;
    background:rgba(255,255,255,.85);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    border:1px solid var(--glass-brd);border-radius:18px;padding:10px;gap:2px;box-shadow:var(--sh-lg)}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:26px}
  .do-grid,.oc-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .q{flex:0 0 calc(50% - 7px)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .section{padding-top:56px;padding-bottom:56px}
  .wrap{padding-left:16px;padding-right:16px}
  .hero{padding-top:100px;padding-bottom:10px}
  .do-grid,.oc-grid,.why-grid,.glist,.foot-grid,.field.two{grid-template-columns:1fr}
  .q{flex:0 0 86%}
  .oc-wrap,.cta-final,.legal,.form-card,.cinfo,footer.site{padding:22px 18px}
  footer.site{margin:32px 8px 10px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ================= SHARP PASS ================= */
:root{
  /* tighter geometry */
  --r:12px; --r-lg:16px; --r-sm:8px;
  /* far less blur — glass reads crisp, not milky */
  --blur:blur(10px) saturate(150%);
  --glass:rgba(255,255,255,.80);
  --glass-brd:rgba(16,47,90,.13);
  --hair:rgba(16,47,90,.14);
  /* tighter, more defined shadows */
  --sh:0 1px 0 rgba(16,47,90,.04), 0 4px 14px -6px rgba(16,47,90,.22);
  --sh-lg:0 1px 0 rgba(16,47,90,.05), 0 10px 26px -10px rgba(16,47,90,.30);
  /* higher-contrast text */
  --ink-2:#3B4A63; --muted:#6E7A90;
}
/* crisp text rendering */
body{overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{letter-spacing:-.028em}
img{image-rendering:auto}

/* remove the soft inner highlight that made panels look washed */
.glass{border:1px solid var(--glass-brd)}
.glass-navy,.navy{border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg)}

/* buttons: tighter radius, defined edge */
.btn{border-radius:8px;font-weight:600}
.btn-blue{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 12px -5px rgba(16,47,90,.6)}
.btn-orange{box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 4px 12px -5px rgba(251,120,18,.65)}
.btn-glass{background:#fff;border:1px solid var(--glass-brd)}
.pill{border-radius:999px;border:1px solid var(--glass-brd);background:#fff}

/* nav: crisper */
.nav-in{border-radius:12px;background:rgba(255,255,255,.88);border:1px solid var(--glass-brd);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 18px -8px rgba(16,47,90,.28)}
.nav-links a{border-radius:6px}
.nav-links a.active{border-radius:6px}

/* cards: hairline separation instead of glow */
.do,.why,.q,.tq,.accred,.stat-c,.mstat,.group,.fund,.qa,.cat,.bk-item,.subj,.crow{border-radius:var(--r)}
.oc{border-radius:var(--r);border:1px solid rgba(255,255,255,.16)}
.poster{border-radius:8px}
.tcard,.panel,.form-card,.cinfo,.legal,.fcard{border-radius:var(--r-lg)}

/* form fields: sharper */
.field input,.field select,.field textarea{border-radius:8px;border:1px solid rgba(16,47,90,.20);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(16,47,90,.14)}
.search input,.sb input{border-radius:8px;background:#fff;border:1px solid var(--glass-brd)}
.segs,.chips{border-radius:9px;background:rgba(255,255,255,.75);border:1px solid var(--glass-brd)}
.seg,.chip{border-radius:6px}

/* separators */
.gl .crow{border:1px solid rgba(16,47,90,.07);background:#fff}
.crow:hover{border-color:rgba(16,47,90,.28)}
.gbody .gl{border-top:1px solid var(--hair);padding-top:12px}

/* hero backdrop slightly crisper */


/* footer + misc */
footer.site{border-radius:var(--r-lg);border:1px solid var(--glass-brd)}
.to-top{border-radius:10px}
.cal{border-radius:8px}
.cd{border-radius:6px}
.tabs{border-top:1px solid var(--hair);background:rgba(255,255,255,.92)}
.hdr{background:rgba(255,255,255,.92)}
.lightbox img{border-radius:10px}
.info,.mtalks,.mawards,.rev-band,.oc-wrap,.cta,.cta-final,.talks,.awards,.review-band,.summit-card,.prog{border-radius:var(--r-lg)}


/* ================= HERO — full-bleed dark band ================= */
.hero{position:relative;isolation:isolate;overflow:visible;
  padding-top:170px;padding-bottom:0;color:#fff}
.hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:var(--bleed);z-index:-3;
  background:linear-gradient(168deg,#15406F 0%,#11315C 38%,#0C2549 72%,#081C39 100%)}

.hero .pill{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#D8E0EB;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero h1{color:#fff}
.hero h1 em{background:linear-gradient(100deg,#FF9A45,#FB7812);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em::after{background:var(--orange);opacity:.45}
.hero .sub{color:#B7C6DE}
.hero .hb{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#C6D2E6}
.hero .hb:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px)}
.hero .hb svg{color:var(--orange-2)}
.hero .btn-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff}
.hero .btn-glass:hover{background:rgba(255,255,255,.22)}
.hero .btn-blue{background:linear-gradient(180deg,#FF9A45,#FB7812);color:#231603;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 20px -8px rgba(251,120,18,.7)}
.hero .btn-blue:hover{filter:brightness(1.04)}
/* summit card sits on the dark band */
.hero .summit-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 50px -22px rgba(4,10,26,.75)}
.hero .summit-head .t{color:#8FA1C2}
.hero .prog-info,.hero .summit-info{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.hero .summit-info b{color:#fff}
.hero .summit-info span{color:#B7C6DE}
.hero .node{color:#93A5C4}
.hero .node i{background:#0F2A50;border-color:#6E90C8}
.hero .node.on{color:#fff}
.hero .node.on i{background:var(--orange-2);border-color:#fff}
/* bar skyline recoloured for the dark band */


/* hero footer strip — caption / scroll cue / counter */
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:52px;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.12)}
.hero-foot .cap{font-size:12.5px;color:#8FA1C2;max-width:38ch;line-height:1.5}
.hero-foot .cap b{color:#D8E0EB;font-weight:600}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:#8FA1C2}
.scroll-cue .mouse{width:22px;height:34px;border:1.6px solid rgba(255,255,255,.4);border-radius:12px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:var(--orange-2);transform:translateX(-50%);animation:wheel 1.9s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
.scroll-cue span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.scroll-cue:hover{color:#fff}
.hero-count{display:flex;align-items:center;gap:14px;color:#8FA1C2}
.hero-count .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.hero-count .arw{width:34px;height:1.5px;background:rgba(255,255,255,.35);position:relative}
.hero-count .arw::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.5px solid rgba(255,255,255,.55);border-right:1.5px solid rgba(255,255,255,.55);
  transform:translateY(-50%) rotate(45deg)}
.hero-count .num{font-size:38px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
.hero-count .num small{color:#5E7398;font-size:20px;font-weight:600}
.hero-count .dot-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:#fff;background:none;cursor:pointer;transition:.25s var(--e)}
.hero-count .dot-btn:hover{background:var(--orange);border-color:var(--orange);color:#231603;transform:translateY(-2px)}
.hero-count .dot-btn svg{width:15px;height:15px}

/* ================= SECTION 02 — centred feature block ================= */
.feature-lead{text-align:center;max-width:660px;margin:0 auto}
.feature-lead .mark{width:52px;height:52px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
  color:var(--navy)}
.feature-lead .mark svg{width:52px;height:52px}
.feature-lead .kicker{justify-content:center;color:var(--blue-deep)}
.feature-lead h2{font-size:clamp(26px,3.2vw,38px);margin-top:14px}
.feature-lead p{margin-top:14px;color:var(--ink-2);font-size:15.5px}

.hexgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;
  border:1px solid var(--hair)}
.hexcard{padding:44px 32px 40px;text-align:center;border-right:1px solid var(--hair);
  background:#fff;transition:background .3s var(--e),transform .3s var(--e);cursor:pointer;position:relative}
.hexcard:last-child{border-right:none}
.hexcard:hover{background:#FAFBFD;transform:translateY(-3px)}
.hexcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transition:transform .35s var(--e)}
.hexcard:hover::after{transform:scaleX(1)}
.hex{width:78px;height:86px;margin:0 auto 22px;position:relative;display:flex;align-items:center;justify-content:center}
.hex svg.shape{position:absolute;inset:0;width:100%;height:100%}
.hex .ico{position:relative;z-index:1;color:#fff;display:flex}
.hex .ico svg{width:30px;height:30px}
.hexcard h3{font-size:18px;letter-spacing:-.02em}
.hexcard p{margin-top:12px;color:var(--ink-2);font-size:14px;line-height:1.6}
.hexcard .more{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue)}
.hexcard .more svg{width:13px;height:13px;transition:transform .25s var(--e)}
.hexcard:hover .more svg{transform:translateX(4px)}

@media(max-width:960px){
  .hexgrid{grid-template-columns:1fr}
  .hexcard{border-right:none;border-bottom:1px solid var(--hair)}
  .hexcard:last-child{border-bottom:none}
  .hero-foot{flex-wrap:wrap;gap:16px}
  .hero-foot .cap{order:3;width:100%}
}
@media(max-width:620px){
  .hero{padding-top:132px}
  .hero-count .num{font-size:30px}
  .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){.scroll-cue .mouse::after{animation:none}}
.server-errors{background:#FDEBDA;border:1px solid rgba(251,120,18,.55);border-radius:8px;padding:14px 16px;
  margin-bottom:16px;font-size:13.5px;color:#8A3E06}
.server-errors ul{margin:8px 0 0;padding-left:18px}
.server-errors li{margin-bottom:4px}

/* ==================================================================
   HERO — inset panel over a full-bleed photograph
   Swap the photo in ONE place: --vhero-img below.
   ================================================================== */
:root{
  --vhero-img:url("../images/bg-in-house.jpg");
  --vh-pad:clamp(22px,4.4vw,64px);  /* content inset from the viewport edge */
  --vh-max:1920px;                  /* content max width on very wide screens */
}

.vhero{position:relative;min-height:100vh;min-height:100svh;
  display:flex;isolation:isolate}

/* edge-to-edge stage */
.vhero-panel{position:relative;z-index:1;flex:1;display:flex;
  width:100%;overflow:hidden;isolation:isolate}
.vhero-media{position:absolute;inset:0;z-index:0;
  background:var(--vhero-img) center/cover no-repeat;
  transition:opacity .55s var(--e)}
.vhero-media.b{opacity:0}
/* vignette only — the photo stays open in the middle, edges fall away */
.vhero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 54% at 50% 45%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,.50) 54%,
    rgba(0,0,0,.82) 78%,
    rgba(0,0,0,1) 100%)}

.vhero-body{position:relative;z-index:2;flex:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:1fr auto;
  gap:0 40px;
  width:100%;max-width:var(--vh-max);margin:0 auto;
  padding:calc(var(--vh-pad) + 74px) var(--vh-pad) calc(var(--vh-pad) + 6px);
  color:#fff}

/* ---- left copy ---- */
.vhero-copy{grid-column:1;grid-row:1;align-self:center;max-width:min(1160px,100%)}
.vloc{display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.86)}
.vloc svg{width:13px;height:13px;color:#fff}
.vhero-copy h1{margin-top:18px;font-size:clamp(34px,4.9vw,62px);line-height:1.05;
  font-weight:700;letter-spacing:-.034em;color:#fff;text-wrap:balance}
.vhero-copy p{margin-top:20px;max-width:460px;font-size:15px;line-height:1.62;
  color:rgba(255,255,255,.80)}

.vcta{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.vbtn{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 27px;border-radius:999px;background:#fff;color:var(--navy);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);transition:.25s var(--e)}
.vbtn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(0,0,0,.66)}
.vplay{display:inline-flex;align-items:center;gap:11px;background:none;border:0;
  color:#fff;font-size:13.5px;font-weight:500;cursor:pointer;padding:0;
  font-family:inherit;transition:.25s var(--e)}
.vplay-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.10);
  transition:.25s var(--e)}
.vplay-ic svg{width:17px;height:17px;margin-left:2px}
.vplay:hover .vplay-ic{background:rgba(255,255,255,.22);transform:scale(1.06)}

/* ---- right rail of course cards ---- */
.vhero-rail{--vcard-w:268px;
  grid-column:2;grid-row:1;align-self:center;position:relative;
  display:flex;gap:18px;align-items:center;
  margin-right:calc(var(--vh-pad) * -1 - 34px)}
.vslide{position:relative;flex:0 0 auto;width:var(--vcard-w);height:358px;border-radius:20px;
  overflow:hidden;box-shadow:0 22px 46px -20px rgba(0,0,0,.7);
  transition:.35s var(--e)}
.vslide{cursor:pointer}
.vslide:hover{transform:translateY(-4px)}
.vslide:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vslide img{width:100%;height:100%;object-fit:cover;display:block}
.vslide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.vslide{opacity:.62}
.vslide:first-child,.vslide.is-active{opacity:1}
/* only the front two cards are on stage; the rest wait their turn */
.vslide:nth-of-type(n+3){display:none}
.vslide-tag{position:absolute;left:19px;right:19px;bottom:18px;z-index:2;
  display:grid;grid-template-columns:18px 1fr;gap:3px 9px;align-items:center}
.vslide-tag svg{grid-row:1/3;width:18px;height:18px;color:#fff;align-self:start;margin-top:2px}
.vslide-tag b{font-size:15px;font-weight:600;color:#fff;line-height:1.25}
.vslide-tag i{font-size:12.5px;font-style:normal;color:rgba(255,255,255,.72);line-height:1.25}
.vnext{position:absolute;left:calc(var(--vcard-w) - 20px);top:50%;transform:translateY(-50%);z-index:3;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:0;cursor:pointer;background:#fff;color:var(--navy);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6);transition:.25s var(--e)}
.vnext svg{width:18px;height:18px}
.vnext:hover{transform:translateY(-50%) scale(1.1)}

/* ---- bottom value cards ---- */
.vvalues{grid-column:1;grid-row:2;display:flex;gap:18px;align-self:end;flex-wrap:wrap}
.vval{display:flex;gap:15px;max-width:372px;padding:21px 25px;border-radius:16px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.vval b{flex:0 0 auto;font-size:15.5px;font-weight:700;color:#fff;letter-spacing:-.01em}
.vval span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.76)}

/* ---- socials ---- */
.vsocial{grid-column:2;grid-row:2;align-self:end;justify-self:end;
  display:flex;gap:11px}
.vsocial a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.88);transition:.25s var(--e)}
.vsocial svg{width:19px;height:19px;display:block}
.vsocial a:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6);
  color:#fff;transform:translateY(-2px)}

/* ==================================================================
   HEADER — white while over the hero, original colours once scrolled
   ================================================================== */
header.nav,.nav-in,.logo-img,.nav-links a{
  transition:background-color .35s var(--e),border-color .35s var(--e),
             box-shadow .35s var(--e),color .35s var(--e),filter .35s var(--e),
             max-width .35s var(--e),top .35s var(--e)}

header.nav.on-hero{top:18px;width:100%;max-width:var(--vh-max)}
header.nav.on-hero .nav-in{height:64px;padding:0 var(--vh-pad);
  background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* the logo is a colour PNG — this renders it pure white */
header.nav.on-hero .logo-img{filter:brightness(0) invert(1)}

header.nav.on-hero .nav-links a{color:rgba(255,255,255,.82)}
header.nav.on-hero .nav-links a:hover{color:#fff;background:rgba(255,255,255,.13)}
header.nav.on-hero .nav-links a.active{color:#fff;background:rgba(255,255,255,.18);
  box-shadow:none}
header.nav.on-hero .nav-links a::after{background:#fff}
header.nav.on-hero .btn-blue{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.55);box-shadow:none}
header.nav.on-hero .btn-blue:hover{background:rgba(255,255,255,.15)}
header.nav.on-hero .burger span,
header.nav.on-hero .burger span::before,
header.nav.on-hero .burger span::after{background:#fff}

/* ---- responsive ---- */
@media (max-width:1080px){
  .vhero-rail{display:none}
  /* one column now, so the values and the social row each need their
     own row — both were pinned to grid-row 2 and collided */
  .vhero-body{grid-template-columns:minmax(0,1fr);
    grid-template-rows:1fr auto auto;row-gap:20px}
  .vhero-copy{grid-column:1;grid-row:1}
  .vvalues{grid-column:1;grid-row:2}
  .vsocial{grid-column:1;grid-row:3;justify-self:start;margin-top:0}
}
@media (max-width:720px){
  .vhero{min-height:100svh}
  .vhero-body{padding:calc(var(--vh-pad) + 70px) var(--vh-pad) var(--vh-pad);
    grid-template-rows:1fr auto;gap:28px}
  .vhero-copy h1{font-size:clamp(34px,9vw,46px)}
  .vhero-copy p{font-size:13.5px}
  .vvalues{flex-direction:column;gap:10px}
  .vval{max-width:none}
  .vcta{gap:14px}
  header.nav.on-hero{top:10px}
  header.nav.on-hero .nav-in{height:58px}
}
@media (prefers-reduced-motion:reduce){
  .vbtn,.vplay,.vplay-ic,.vnext,.vslide{transition:none}
}

.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(6,18,38,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal-in{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.vmodal-in iframe{width:100%;height:100%;border:0;display:block}
.vmodal-x{position:absolute;top:-38px;right:0;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:19px;line-height:1;cursor:pointer}
.vmodal-x:hover{background:rgba(255,255,255,.3)}

/* ==================================================================
   HERO LEGIBILITY
   The background photo cycles between dark and bright shots, so every
   white element carries its own shadow rather than relying on the
   vignette to supply contrast.
   ================================================================== */
:root{
  --vh-tsh:0 1px 3px rgba(0,0,0,.62), 0 2px 12px rgba(0,0,0,.38);
  --vh-tsh-lg:0 2px 5px rgba(0,0,0,.55), 0 6px 26px rgba(0,0,0,.42);
  --vh-dsh:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* --- headline block --- */
.vhero-copy h1{text-shadow:var(--vh-tsh-lg)}
.vhero-copy p,
.vloc{text-shadow:var(--vh-tsh)}
.vloc svg{filter:var(--vh-dsh)}

/* --- calls to action --- */
.vplay{text-shadow:var(--vh-tsh)}
.vplay-ic{box-shadow:0 2px 10px rgba(0,0,0,.45)}
.vplay-ic svg{filter:var(--vh-dsh)}
.vbtn{box-shadow:0 10px 26px -10px rgba(0,0,0,.75)}

/* --- course cards --- */
.vslide-tag b,
.vslide-tag i{text-shadow:var(--vh-tsh)}
.vslide-tag svg{filter:var(--vh-dsh)}

/* --- value cards --- */
.vval{box-shadow:0 6px 22px -10px rgba(0,0,0,.55)}
.vval b,
.vval span{text-shadow:var(--vh-tsh)}

/* --- socials --- */
.vsocial a{box-shadow:0 3px 12px rgba(0,0,0,.4)}
.vsocial svg{filter:var(--vh-dsh)}

/* --- header, while it is white over the hero --- */
header.nav.on-hero .logo-img{
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 2px 9px rgba(0,0,0,.4))}
header.nav.on-hero .btn-blue{text-shadow:var(--vh-tsh);box-shadow:0 3px 14px rgba(0,0,0,.35)}
header.nav.on-hero .burger{box-shadow:0 3px 12px rgba(0,0,0,.35)}

/* ==================================================================
   SYSTEM ALIGNMENT — carries the hero's design language into the rest
   of the page. Sections stay light (course lists, FAQs and legal text
   need to stay readable); what carries over is the geometry, the type
   scale, the tracking and the section rhythm.
   ================================================================== */
:root{
  --wrap:var(--vh-max);          /* identical to the hero's content width */
  --r:16px; --r-lg:22px; --r-sm:11px;   /* softer, matching the hero cards */

  /* the two remaining uploads, used as texture behind the dark bands */
  --photo-awards:url("../images/band-awards.jpg");
  --photo-cta:url("../images/band-cta.jpg");
}

/* content sits on the same fluid inset as the hero, so section headings
   line up with the hero headline on anything below ~1450px */
.wrap{padding-left:var(--vh-pad);padding-right:var(--vh-pad)}

/* the bar's own edges sit on the section content column — the same
   line the hero headline and the value cards start from — and it
   keeps that width in both its over-hero and scrolled states */
header.nav,
header.nav.on-hero{width:100%;max-width:calc(var(--wrap) - var(--vh-pad) * 2)}
.nav-in,
header.nav.on-hero .nav-in{padding-left:16px;padding-right:10px}

/* more generous vertical rhythm, in proportion to the taller hero */
.section{padding-top:clamp(64px,7.5vw,112px);padding-bottom:clamp(64px,7.5vw,112px)}
.section.tight{padding-top:clamp(46px,5vw,72px);padding-bottom:clamp(46px,5vw,72px)}

/* --- type: the hero headline is up to 86px, so section headings step up
       to match, with the same tight tracking --- */
.shead{max-width:760px}
.shead h2{font-size:clamp(30px,3.9vw,52px);line-height:1.06;letter-spacing:-.03em;margin-top:16px}
.shead p{margin-top:15px;font-size:17px;line-height:1.6}
.feature-lead h2{font-size:clamp(30px,3.9vw,52px);line-height:1.06;letter-spacing:-.03em}
.cta-final h2,.awards h3{letter-spacing:-.028em}

/* --- kicker: matches the hero's location line (sans, 600, wide tracking)
       rather than the old mono treatment --- */
.kicker{font-family:var(--sf);font-size:10.5px;font-weight:600;letter-spacing:.19em}
.kicker::before{width:18px}

/* --- buttons: same proportions as the hero's "Explore Courses" pill --- */
.btn{padding:13px 26px;font-size:14.5px;letter-spacing:-.01em}

/* --- dark bands pick up photographic texture, echoing the hero --- */
.awards.glass-navy{
  background:
    linear-gradient(155deg,rgba(10,28,58,.93),rgba(8,20,42,.96)),
    var(--photo-awards) center/cover no-repeat}
.cta-final.glass-navy{
  background:
    linear-gradient(155deg,rgba(10,28,58,.92),rgba(8,20,42,.96)),
    var(--photo-cta) center/cover no-repeat}

/* a vignette on the dark bands, same idea as the hero */
.awards.glass-navy,.cta-final.glass-navy{position:relative;overflow:hidden;isolation:isolate}
.awards.glass-navy::after,.cta-final.glass-navy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 58% at 50% 45%,
    rgba(0,0,0,0) 24%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.72) 100%)}

@media (max-width:720px){
  .shead h2,.feature-lead h2{font-size:clamp(27px,7.2vw,34px)}
  .shead p{font-size:15.5px}
}

/* ------------------------------------------------------------------
   Card language, carried over from the hero's course cards:
   the same 20px radius, hairline edge, soft lift and hover response.
   ------------------------------------------------------------------ */
.panel,
.stat,
.q,
.oc,
.why-grid > *,
.form-card,
.cinfo,
.summit-card{border-radius:20px}

.accred{border-radius:999px}

/* hero cards lift on hover — give the light cards the same behaviour */
.panel,.stat,.q,.accred,.hexcard,.summit-card{
  transition:transform .3s var(--e),box-shadow .3s var(--e),background .3s var(--e)}
.stat:hover,.q:hover,.accred:hover{transform:translateY(-3px)}

/* section headers get the hero's stacked rhythm: kicker, then a large
   tight headline, then a measured paragraph */
.shead .kicker,.feature-lead .kicker{margin-bottom:2px}
.shead p,.feature-lead p{max-width:62ch}

/* the "what we do" cards lose the hard divider in favour of the hero's
   separated-card treatment */
.hexcard{border-right:0;border-radius:20px;padding:40px 30px 36px}
.hexcard:hover{transform:translateY(-4px);
  box-shadow:0 22px 46px -22px rgba(16,47,90,.42)}
.hexgrid{gap:16px}

/* dark bands: primary action becomes the hero's white pill */
.oc-wrap .btn-orange,
.awards .btn-orange,
.cta-final .btn-orange,
.talks .btn-orange{background:#fff;color:var(--navy);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
.oc-wrap .btn-orange:hover,
.awards .btn-orange:hover,
.cta-final .btn-orange:hover,
.talks .btn-orange:hover{background:#fff;transform:translateY(-2px)}

/* ==================================================================
   EDITORIAL LAYOUT — fewer boxes.
   Card chrome (glass fill, border, shadow) is stripped from content
   blocks and replaced with whitespace, hairline rules and type
   hierarchy. Only the dark feature bands stay as contained panels,
   so they read as deliberate moments rather than more cards.
   ================================================================== */

/* --- kill the chrome, keep the structure --- */
.hexcard,
.why.glass,
.stat-c,
.accred,
.panel,
.stat,
.summit-card{
  background:none !important;
  border:0;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-radius:0}

/* --- 1. what we do: three open columns, rule above each --- */
.hexgrid{gap:0 44px}
.hexcard{text-align:left;padding:30px 0 0;border-top:1px solid var(--hair);
  border-right:0;align-items:flex-start}
.hexcard:hover{background:none;transform:none}
.hexcard .hex{margin:0 0 18px}
.hexcard h3{font-size:22px;letter-spacing:-.02em}
.hexcard p{margin-top:10px}
.hexcard .more{margin-top:16px}
.hexcard:hover .more{gap:11px}

/* --- 2. why: open columns under a shared rule --- */
.why-grid{gap:0 40px;margin-top:44px}
.why.glass{padding:28px 0 0;border-top:1px solid var(--hair)}
.why h3{font-size:17px;letter-spacing:-.015em}

/* --- 3. review stats: figures divided by hairlines, not cards --- */
.stats{gap:0;margin-top:38px}
.stat-c{padding:8px 26px;text-align:left;border-left:1px solid var(--hair)}
.stat-c:first-child{border-left:0;padding-left:0}
.stat-c:hover{transform:none}
.stat-c b{font-size:clamp(34px,3.6vw,46px);letter-spacing:-.035em}
.stat-c span{margin-top:8px;display:block}

/* --- 4. quotes: no card, just the mark and the words --- */

/* --- 5. accreditations: a plain row --- */
.accreds{gap:14px 40px}
.accred{padding:0;border-radius:0}
.accred:hover{transform:none;box-shadow:none}

/* --- 6. prose panels and checklists open up --- */
.panel{padding:0}
.checklist li{padding:12px 0;border-radius:0;background:none;
  border-bottom:1px solid var(--hair)}
.checklist li:hover{background:none;transform:none}
.checklist li:last-child{border-bottom:0}
.checklist{gap:0;margin-top:16px}

/* --- 7. about-page stat row --- */
.stat-row{gap:0}
.stat{padding:6px 24px;text-align:left;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0;padding-left:0}
.stat:hover{transform:none}

/* --- 8. progression sits open on the page --- */
.summit-card{padding:0}
.summit-head{padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:22px}

/* --- the dark bands remain contained: they are the punctuation --- */
.oc-wrap,.awards,.cta-final,.review-band,.talks{border-radius:var(--r-lg)}

@media (max-width:960px){
  .hexgrid,.why-grid{gap:0 28px}
  .stat-c,.stat{padding-left:18px;padding-right:18px}
}
@media (max-width:720px){
  .hexcard{padding-top:24px}
  .stats{grid-template-columns:1fr 1fr}
  .stat-c{border-left:0;border-top:1px solid var(--hair);padding:16px 0}
  .stat-c:first-child{border-top:0}
  .stat-row{flex-direction:column}
  .stat{border-left:0;border-top:1px solid var(--hair);padding:14px 0}
  .stat:first-child{border-top:0}
  .q{padding-right:0}
}

/* ==================================================================
   PER-SECTION LAYOUTS
   Each section gets its own composition rather than repeating
   "heading above an N-column grid".
   ================================================================== */

/* --- 01 Progression: asymmetric split, copy left, graphic right --- */
.lay-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.lay-split-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.07;
  letter-spacing:-.03em;margin-top:16px}
.lay-split-copy p{margin-top:16px;font-size:16.5px;line-height:1.6;
  color:var(--ink-2);max-width:44ch}

/* --- 02 What we do: numbered full-width rows, not a 3-up grid --- */
.lay-steps{display:block;margin-top:48px;border-top:1px solid var(--hair)}
.lay-step{display:grid;grid-template-columns:88px minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,56px);align-items:start;width:100%;
  padding:clamp(26px,3vw,40px) 0;border:0;border-bottom:1px solid var(--hair);
  background:none;text-align:left;cursor:pointer;
  transition:padding-left .35s var(--e),background .35s var(--e)}
.lay-step:hover{padding-left:14px;background:linear-gradient(90deg,rgba(16,47,90,.035),transparent 60%)}
.lay-step-n{font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--orange-deep);letter-spacing:.06em;padding-top:6px}
.lay-step .hex{display:none}
.lay-step h3{font-size:clamp(21px,2.3vw,30px);letter-spacing:-.025em;line-height:1.12}
.lay-step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.62}
.lay-step .more{margin-top:14px;display:inline-flex}

/* --- 03 Why: heading holds its own column beside the list --- */
.lay-aside{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,5vw,72px);align-items:start}
.lay-aside-head{position:sticky;top:104px}
.lay-aside-head h2{font-size:clamp(27px,3.2vw,42px);line-height:1.07;
  letter-spacing:-.03em;margin-top:14px}
.lay-aside-head p{margin-top:14px;color:var(--ink-2);font-size:16px;
  line-height:1.6;max-width:34ch}
.lay-aside .why-grid{grid-template-columns:1fr 1fr;gap:0 40px;margin-top:0}

/* --- 04 Open courses: heading and action share the top line --- */
.lay-bar{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.lay-bar .shead{margin-bottom:0}
.oc-wrap .oc-foot .btn-orange{display:none}   /* the CTA moved up to .lay-bar */

/* --- 05 Reviews: one lead figure, three stacked beside it --- */

@media (max-width:960px){
  .lay-split,.lay-aside{grid-template-columns:1fr;gap:34px}
  .lay-aside-head{position:static}
  .lay-aside .why-grid{grid-template-columns:1fr 1fr}
  .lay-step{grid-template-columns:56px 1fr;gap:18px}
  .lay-step p,.lay-step .more{grid-column:2}
}
@media (max-width:640px){
  .lay-aside .why-grid{grid-template-columns:1fr}
  .lay-step:hover{padding-left:0;background:none}
}

/* ==================================================================
   FULL-BLEED BANDS + the last four section layouts
   ================================================================== */

/* the bands are direct children of .view, so they already span the
   window — they only have to shed the section padding. No vw here:
   viewport units are not rescaled by the page zoom. */
.band-full{margin-left:0;margin-right:0;
  width:auto;max-width:none;padding-left:0;padding-right:0}
.band-dark{position:relative;isolation:isolate;
  background:linear-gradient(155deg,#0C2244,#081428);color:#fff}
.band-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 64% 58% at 50% 45%,
    rgba(0,0,0,0) 26%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.66) 100%)}
.band-in{width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(52px,6vw,88px) var(--vh-pad);
  border-radius:0;background:none;border:0;box-shadow:none}

/* the awards band keeps its photograph, now edge to edge */
.band-awards{
  background:linear-gradient(155deg,rgba(10,28,58,.93),rgba(8,20,42,.96)),
    var(--photo-awards) center/cover no-repeat}
.band-cta{
  background:linear-gradient(155deg,rgba(10,28,58,.92),rgba(8,20,42,.96)),
    var(--photo-cta) center/cover no-repeat}

/* --- A. Open courses: rail of dates inside the band --- */
.oc-wrap.band-in .lay-bar{margin-bottom:34px}
.oc-foot-note{margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}

/* --- B. Awards: copy left, numbered nominations right --- */
.lay-awards{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.lay-awards .trophy{width:52px;height:52px;color:var(--orange-2);flex:0 0 auto}
.lay-awards-copy h3{margin-top:12px;font-size:clamp(24px,2.8vw,38px);
  line-height:1.08;letter-spacing:-.03em;color:#fff}
.lay-awards-copy p{margin-top:14px;color:#B9C7DC;font-size:15.5px;line-height:1.6}
.lay-noms{list-style:none;margin:0;padding:0;
  columns:2;column-gap:40px}
.lay-noms li{display:flex;gap:14px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.13);font-size:15px;color:#E4EBF5;
  break-inside:avoid}
.lay-noms li span{font-family:var(--mono);font-size:11px;color:var(--orange-2);
  letter-spacing:.08em}

/* --- C. Leave a review: light and open, QR to the right --- */
.lay-review{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,72px);align-items:center;
  background:none;border:0;box-shadow:none;padding:0;color:inherit}
.lay-review h3{margin-top:12px;font-size:clamp(26px,3.2vw,42px);
  line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.lay-review p{margin-top:14px;color:var(--ink-2);font-size:16px;
  line-height:1.6;max-width:46ch}
.lay-review .row{margin-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lay-review .qr{width:clamp(132px,15vw,184px);height:auto;border-radius:14px;
  border:1px solid var(--hair);padding:10px;background:#fff}
.lay-review .gstars{color:var(--ink-2)}
.lay-review .gstars .stars{color:var(--orange)}

/* --- D. Final CTA: left-aligned, actions on the right --- */
.lay-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,60px);align-items:center;text-align:left}
.lay-cta .rings{opacity:.16}
.lay-cta-copy h2{margin-top:12px;font-size:clamp(28px,3.6vw,50px);
  line-height:1.06;letter-spacing:-.03em;color:#fff}
.lay-cta-copy p{margin-top:14px;color:#B9C7DC;font-size:16px;
  line-height:1.6;max-width:46ch}
.lay-cta .cta{margin:0;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:960px){
  .lay-awards{grid-template-columns:auto 1fr;gap:24px}
  .lay-noms{grid-column:1/-1;columns:1}
  .lay-review,.lay-cta{grid-template-columns:1fr;gap:28px}
  .lay-review .qr{justify-self:start}
  .lay-cta .cta{justify-content:flex-start}
}
@media (max-width:640px){
  .lay-awards{grid-template-columns:1fr}
  .lay-awards .trophy{width:40px;height:40px}
}

/* ==================================================================
   MINIMAL PASS — strip decoration that carries no information.
   Everything removed here is ornament: nothing that states a fact,
   labels a control, or is the only route to an action.
   ================================================================== */

/* the big hexagon above "One provider" — pure ornament */
.feature-lead .mark{display:none}
.feature-lead{text-align:left;max-width:60ch}

/* concentric rings behind the final CTA */
.cta-final .rings{display:none}

/* the trophy tile: the numbered list already says "six nominations" */
.lay-awards .trophy{display:none}
.lay-awards{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}

/* decorative quote glyph — the attribution already frames the quote */


/* the sweeping shine across every button */
.btn::after{display:none}

/* --- calmer surfaces --------------------------------------------- */
/* the blur/saturate glass effect is no longer doing any work now that
   the panels behind it are flat */
.glass,.btn-glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* hover motion reduced to something you notice only if you look for it */
.stat-c:hover,.accred:hover{transform:none}
.lay-step:hover{background:none;padding-left:10px}

/* --- rhythm ------------------------------------------------------- */
/* headings sit closer to the content they introduce, and sections
   breathe more between each other */
.shead p,.feature-lead p{margin-top:14px}
.shead{margin-bottom:6px}
.section{padding-top:clamp(72px,8vw,124px);padding-bottom:clamp(72px,8vw,124px)}

/* one weight of rule across the page */
.hair,.lay-steps,.lay-step,.checklist li{border-color:var(--hair)}

/* ==================================================================
   Section lead: headline left, standfirst right
   ================================================================== */
.feature-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px,5vw,80px);align-items:end;max-width:none;text-align:left}
.feature-lead .kicker{grid-column:1;grid-row:1;margin-bottom:14px;justify-content:flex-start;justify-self:start;text-align:left}
.feature-lead h2{grid-column:1;grid-row:2;margin-top:0}
.feature-lead p{grid-column:2;grid-row:2;margin-top:0;align-self:end;
  justify-self:end;max-width:80ch;font-size:16.5px;line-height:1.62;color:var(--ink-2)}

/* the same treatment for the plain section headers */
.shead-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px,5vw,80px);align-items:end;max-width:none}

/* ==================================================================
   Row action: appears at the right edge on hover
   ================================================================== */
.lay-step{position:relative;padding-right:clamp(0px,14vw,210px)}
.lay-step .more{position:absolute;right:0;top:50%;margin-top:0;
  transform:translateY(-50%) translateX(10px);opacity:0;
  transition:opacity .28s var(--e),transform .28s var(--e);
  pointer-events:none;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--orange-deep);
  display:inline-flex;align-items:center;gap:8px}
.lay-step .more svg{width:16px;height:16px}
.lay-step:hover .more,
.lay-step:focus-visible .more{opacity:1;transform:translateY(-50%) translateX(0)}

/* touch devices never hover — keep the action in the flow there */
@media (hover:none){
  .lay-step{padding-right:0}
  .lay-step .more{position:static;opacity:1;transform:none;pointer-events:auto;
    margin-top:14px}
}
@media (max-width:960px){
  .feature-lead{grid-template-columns:1fr;gap:16px 0}
  .feature-lead p{grid-column:1;grid-row:3;max-width:60ch}
  .lay-step{padding-right:0}
  .lay-step .more{position:static;opacity:1;transform:none;pointer-events:auto;
    margin-top:14px}
}

/* ==================================================================
   Kicker: no leading dash
   ================================================================== */
.kicker::before{display:none}
.kicker{gap:0}

/* ==================================================================
   Progression graphic — stop the level markers colliding.
   The nodes are absolutely positioned by percentage and their labels
   are nowrap, so in the narrower split column they ran into each
   other and "Accredited" centred past the right edge.
   ================================================================== */

/* more vertical room spreads the climb out */
.summit{height:clamp(190px,20vw,232px);margin-top:4px;padding:0}

/* pull the last marker in so a centred label still fits, and even the
   spacing between all four */
.k1{left:7%;top:86%}
.k2{left:35%;top:63%}
.k3{left:63%;top:39%}
.k4{left:87%;top:13%}

/* labels sit under the dot rather than above it, so a wide label never
   crosses the line into the marker above */
.node{flex-direction:column-reverse;gap:8px;font-size:11px;
  letter-spacing:-.005em;line-height:1}
.node i{width:13px;height:13px}

/* the top marker anchors its label right-of-centre so it stays inside */
.node.k4{align-items:center}
.node.k4 span{transform:translateX(-6px)}

/* the readout sits clear of the graphic */
.summit-info{margin-top:20px}
.summit-head{margin-bottom:16px}
.summit-head .t{font-family:var(--sf);font-size:10.5px;font-weight:600;
  letter-spacing:.19em;color:var(--orange-deep)}

/* the split needs the graphic column to keep its width; below that the
   two columns stack so the climb gets the full measure */
@media (max-width:1100px){
  .lay-split{grid-template-columns:1fr;gap:36px}
  .summit{height:210px}
}
@media (max-width:520px){
  .node{font-size:10px}
  .k1{left:6%}.k4{left:85%}
}

/* ==================================================================
   Progression markers sit ON the curve.

   The path is drawn in a 480x172 viewBox with preserveAspectRatio="none",
   so it stretches linearly to the box and viewBox units map straight to
   percentages. Its four anchor points are:

       (16,156)  ->  3.33% , 90.70%
       (185,88)  -> 38.54% , 51.16%
       (325,42)  -> 67.71% , 24.42%
       (464,12)  -> 96.67% ,  6.98%

   The dots now use exactly those, so they cannot drift off the line.
   ================================================================== */
.k1{left:3.33%;top:90.70%}
.k2{left:38.54%;top:51.16%}
.k3{left:67.71%;top:24.42%}
.k4{left:96.67%;top:6.98%}

/* The marker box is the dot alone (plus invisible padding for a usable
   hit target), so translate(-50%,-50%) centres the DOT on the anchor
   rather than centring the dot+label stack. */
.node{display:block;width:13px;height:13px;padding:10px;box-sizing:content-box;
  gap:0;line-height:0}
.node i{display:block;width:13px;height:13px;margin:0}

/* labels hang below their own dot, positioned independently so a wide
   label can never push the dot off the line */
.node span{position:absolute;top:calc(100% - 6px);left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:-.005em}

/* the end markers anchor their labels inward so nothing leaves the box */
.node.k1 span{left:0;transform:none;text-align:left}
.node.k4 span{left:auto;right:0;transform:none;text-align:right}

/* room under the last label, and for the first dot at the left edge */


@media (max-width:520px){
  .node span{font-size:10px}
  .node{padding:8px}
}

/* ==================================================================
   Progression graphic — refinement
   ================================================================== */
.summit{height:clamp(200px,21vw,244px);padding:0;margin-bottom:26px}

/* --- the track ---------------------------------------------------- */
/* the unfilled route reads as a faint guide; the drawn route is the
   gradient already defined in the markup */
.summit svg path:not(#route){stroke:rgba(16,47,90,.10);stroke-width:6}
.summit #route{stroke-width:3.5}

/* --- markers ------------------------------------------------------ */
/* hollow and quiet until chosen, then solid with a halo — so the
   selected step is obvious without needing extra chrome */
.node i{background:#fff;border:2px solid rgba(16,47,90,.32);
  box-shadow:none;transition:.28s var(--e)}
.node:hover i{border-color:var(--blue);transform:scale(1.16)}
.node.on i{background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 6px rgba(16,47,90,.12)}
.node.top i{border-color:rgba(212,94,6,.42)}
.node.top:hover i{border-color:var(--orange)}
.node.top.on i{background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 7px rgba(251,120,18,.16)}

/* --- labels ------------------------------------------------------- */
.node span{font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  transition:color .28s var(--e),font-weight .2s}
.node:hover span{color:var(--ink-2)}
.node.on span{color:var(--blue);font-weight:700}
.node.top.on span{color:var(--orange-deep)}

/* --- readout ------------------------------------------------------ */
/* open, with a rule instead of a tinted panel — consistent with the
   rest of the page now that the boxes are gone */
.summit-info{margin-top:6px;padding:20px 0 0;background:none;border:0;
  border-top:1px solid var(--hair);border-radius:0;min-height:78px}
.summit-info b{font-size:16.5px;letter-spacing:-.015em;color:var(--navy);
  line-height:1.25}
.summit-info span{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:7px}

/* the hint reads as a control cue, left-aligned with everything else */
.summit-head{margin-bottom:8px;justify-content:flex-start}
.summit-head .t{font-size:10px;letter-spacing:.2em;color:var(--muted)}

@media (max-width:520px){
  .summit{height:186px;padding:0;margin-bottom:22px}
  .node span{font-size:9.5px;letter-spacing:.09em}
}

/* ==================================================================
   Course rows: the description sits hard right, then slides left to
   make room for the action as it fades in on hover.
   ================================================================== */
:root{--step-shift:clamp(112px,11vw,176px)}

/* no permanently reserved gutter — the description owns the right edge
   until you hover the row */
.lay-step{padding-right:0}

.lay-step p{justify-self:end;max-width:38ch;
  transition:transform .32s var(--e)}

.lay-step:hover p,
.lay-step:focus-visible p{transform:translateX(calc(var(--step-shift) * -1))}

/* the action occupies the space the description just vacated */
.lay-step .more{right:0}

/* no hover on touch: keep the description where it is and put the
   action back in the flow */
@media (hover:none){
  .lay-step p{justify-self:start;transform:none}
  .lay-step:hover p{transform:none}
}
@media (max-width:960px){
  .lay-step p{justify-self:start;max-width:60ch;transform:none}
  .lay-step:hover p,.lay-step:focus-visible p{transform:none}
}

/* ==================================================================
   Open courses — header matches the section-lead pattern, and the
   four dates run as a single row.
   ================================================================== */

/* headline left, standfirst hard right — same as "Three ways" but on
   the dark band */
.lay-lead-dark{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px,5vw,80px);align-items:end;margin-bottom:38px}
.lay-lead-dark .kicker{margin-bottom:14px;justify-content:flex-start}
.lay-lead-dark h2{margin:0;font-size:clamp(30px,3.9vw,52px);line-height:1.06;
  letter-spacing:-.03em;color:#fff}
.lay-lead-dark p{margin:0;justify-self:end;align-self:end;max-width:44ch;
  font-size:16px;line-height:1.62;color:#B9C7DC}

/* one row, four across */
.oc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:0}

/* the CTA returns to the foot now that the header carries the standfirst */
.oc-wrap .oc-foot .btn-orange{display:inline-flex}

@media (max-width:1180px){
  /* below four-across, scroll the row rather than wrapping it */
  .oc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .oc-grid::-webkit-scrollbar{display:none}
  .oc-grid > *{flex:0 0 300px;scroll-snap-align:start}
}
@media (max-width:960px){
  .lay-lead-dark{grid-template-columns:1fr;gap:16px 0}
  .lay-lead-dark p{justify-self:start;max-width:60ch}
}
@media (max-width:640px){
  .oc-grid > *{flex:0 0 82%}
}

/* ==================================================================
   Course card footer — Book and Add-to-calendar align to each other,
   and every card's footer sits on the same line across the row.
   ================================================================== */

/* the note grows, so the footer is always pushed to the card's base:
   with four cards side by side their prices and buttons line up even
   when the titles run to different depths */
.oc{height:100%}
.oc .ocnote{flex:1 0 auto}
.ocfoot{margin-top:auto}

/* the two controls share a height and a centre line.
   margin-top on .book was fighting the row's align-items:center. */
.ocacts{align-items:center}
.oc .book{margin-top:0;align-self:center;height:36px;padding:0 16px;
  line-height:1;border-radius:999px}
.cal{width:36px;height:36px;flex:0 0 36px;align-self:center}

/* price baseline sits with them rather than riding high */
.ocfoot{align-items:center}

/* ==================================================================
   Tighter vertical rhythm + the Why heading no longer pins
   ================================================================== */

/* sections were clamp(72px,8vw,124px) — roughly a third shorter now */
.section{padding-top:clamp(48px,5vw,78px);padding-bottom:clamp(48px,5vw,78px)}
.section.tight{padding-top:clamp(34px,3.4vw,50px);padding-bottom:clamp(34px,3.4vw,50px)}

/* the dark bands carry their own padding */
.band-in{padding:clamp(40px,4.4vw,66px) var(--vh-pad)}

/* internal spacing comes down with it */
.lay-steps{margin-top:34px}
.lay-step{padding:clamp(20px,2.2vw,30px) 0}
.lay-lead-dark{margin-bottom:30px}
.why-grid{margin-top:0}
.accreds{margin-top:22px}
.stats-src{margin-top:14px}

/* the Why heading stays put — pinning it made it hang over the band
   above as the column scrolled past */
.lay-aside-head{position:static;top:auto}
.lay-aside{align-items:start;gap:clamp(26px,4vw,60px)}

/* full-bleed bands supply their own padding via .band-in; the section
   itself must add none, or the band grows a dark skirt below it */
.band-full{padding-top:0;padding-bottom:0}


/* ==================================================================
   Credentials strip — replaces the accreditation cards.
   No stand-in emblems: generic shield/tick/mortarboard icons only
   read as filler where a real certification mark belongs.
   ================================================================== */

.creds{display:flex;list-style:none;margin:0;padding:0;
  gap:clamp(22px,3.4vw,52px);flex-wrap:wrap;align-items:center}
.creds li{display:flex;flex-direction:column;gap:3px;
  padding-left:clamp(22px,3.4vw,52px);border-left:1px solid var(--hair)}
.creds b{font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.creds span{font-size:12.5px;color:var(--muted);letter-spacing:.01em}

@media (max-width:820px){
  .foot-strip{flex-direction:column;align-items:flex-start;gap:20px}
  .creds{gap:18px}
  .creds li{padding-left:18px}
}
@media (max-width:560px){
  .creds{flex-direction:column;align-items:flex-start;gap:14px}
  .creds li{padding-left:0;border-left:0}
}


/* ==================================================================
   Learner feedback — calmer: one row of figures, three quotes, no rail
   ================================================================== */

/* header takes the same split as the other sections */
.lay-lead-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px,5vw,80px);align-items:end;max-width:none}
.lay-lead-split .kicker{grid-column:1;grid-row:1;margin-bottom:14px;
  justify-content:flex-start}
.lay-lead-split h2{grid-column:1;grid-row:2;margin-top:0}
.lay-lead-split p{grid-column:2;grid-row:2;margin-top:0;
  justify-self:end;align-self:end;max-width:46ch}

.stats-src{margin-top:16px}

@media (max-width:900px){
  .lay-lead-split{grid-template-columns:1fr;gap:16px 0}
  .lay-lead-split p{justify-self:start;max-width:60ch}
}


/* ==================================================================
   Recognition / Review / Next step — final pass
   ================================================================== */

/* --- Recognition: two plain columns, no false ordering ------------ */
.lay-awards{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center}
.lay-awards-copy h3{margin-top:12px;font-size:clamp(26px,3vw,40px);
  line-height:1.08;letter-spacing:-.03em;color:#fff;max-width:20ch}
.lay-noms{columns:2;column-gap:clamp(28px,4vw,56px);margin:0;padding:0;
  list-style:none}
.lay-noms li{display:block;padding:12px 0;font-size:15.5px;color:#E4EBF5;
  border-bottom:1px solid rgba(255,255,255,.13);break-inside:avoid}

/* --- Leave a review ---------------------------------------------- */
.lay-review{align-items:center}
.lay-review .row{margin-top:24px;gap:18px}
.qr-block{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-block figcaption{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.lay-review .qr{width:clamp(128px,13vw,164px)}

/* --- Next step: one button, the phone as a quiet second option ---- */
.cta-tel{display:inline-flex;align-items:center;font-size:15px;font-weight:500;
  color:#B9C7DC;border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:2px;transition:.25s var(--e)}
.cta-tel:hover{color:#fff;border-color:#fff}
.lay-cta .cta{gap:22px;align-items:center}
.lay-cta-copy h2{max-width:18ch}

@media (max-width:900px){
  .lay-noms{columns:1}
  .lay-awards{grid-template-columns:1fr}
}

.glink{font-size:14.5px;font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--hair);padding-bottom:2px;transition:.25s var(--e)}
.glink:hover{color:var(--navy);border-color:var(--navy)}


/* ==================================================================
   INNER PAGES — About, Courses, Community, Work, Contact, Funding,
   Privacy, Terms. Same language as the home page: flat dark bands,
   split headers, no glass, no boxes.
   ================================================================== */

/* --- page header: a flat dark band, like the home page's bands ----- */
.phead{padding-top:clamp(118px,11vw,160px);
  padding-bottom:clamp(40px,4.6vw,64px)}
.phead::before{background:linear-gradient(155deg,#0C2244,#081428)}

/* the blurred colour blobs were the last of the old ornament */
.phead-bg{display:none}

/* the same vignette the hero and the bands use */
.phead::after{height:auto;top:0;bottom:0;z-index:-1;background:
  radial-gradient(ellipse 62% 58% at 50% 45%,
    rgba(0,0,0,0) 26%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.70) 100%)}

/* headline left, standfirst hard right — the home page's lead pattern */
.phead .wrap,.phead{position:relative}
.phead h2{font-size:clamp(30px,3.9vw,52px);line-height:1.06;
  letter-spacing:-.03em;margin-top:16px;max-width:20ch}
.phead p{margin-top:16px;font-size:16.5px;line-height:1.62;max-width:52ch}
.phead .kicker{color:#9FB6DE}

/* breadcrumb reads as navigation, quietly */
.crumb{font-size:12.5px;color:#8FA6C8;display:flex;align-items:center;gap:7px;
  margin-bottom:22px}
.crumb svg{width:13px;height:13px;opacity:.7}
.crumb a{color:#B7C6DE}
.crumb a:hover{color:#fff}
.crumb .cur{color:#fff}

/* --- dark panels match the home page's bands ---------------------- */
.glass-navy{background:linear-gradient(155deg,#0C2244,#081428);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;border-radius:var(--r-lg)}

/* --- light panels lose the glass, like the home page -------------- */
.glass{background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.split{gap:clamp(30px,5vw,72px)}
.prose p{font-size:16px;line-height:1.68;color:var(--ink-2)}

/* forms keep a surface — fields need an enclosing plane to read as
   one unit — but a flat one */
.form-card{background:#fff;border:1px solid var(--hair);
  box-shadow:none;border-radius:20px;padding:clamp(22px,3vw,34px)}

/* --- FAQ: rows, not cards ----------------------------------------- */
.qa{background:none;border:0;border-bottom:1px solid var(--hair);
  border-radius:0;padding:0;box-shadow:none}
.qa button{padding:20px 0;font-size:16.5px;letter-spacing:-.015em;
  background:none;width:100%;text-align:left}
.qa .ans{padding:0 0 4px}
.qa .ans p{font-size:15.5px;line-height:1.65;color:var(--ink-2);
  padding-bottom:18px}

/* --- community: the topic chips become a plain list --------------- */
.topic{background:none;border:0;border-radius:0;padding:0;
  font-size:14.5px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}

@media (max-width:720px){
  .topics{grid-template-columns:1fr}
  .phead h2{font-size:clamp(27px,7.4vw,34px)}
}


/* ==================================================================
   Course catalogue — qualifications per subject, and the online list
   ================================================================== */

/* --- subject rows expand to the qualifications they cover --------- */
.crow-wrap{border-bottom:1px solid var(--hair)}
.crow-wrap:last-child{border-bottom:0}
.crow{width:100%;background:none;border:0;cursor:pointer}
.qn{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);
  padding:2px 8px;border:1px solid var(--hair);border-radius:999px}
.crow-wrap.open .qn{color:var(--blue);border-color:rgba(16,47,90,.3)}
.crow .arw{transition:transform .3s var(--e)}
.crow-wrap.open .crow .arw{transform:rotate(90deg)}

.qbody{display:none;padding:2px 0 20px 30px}
.crow-wrap.open .qbody{display:block}
.qlist{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(24px,3vw,48px)}
.qlist li{break-inside:avoid;padding:7px 0;font-size:14px;line-height:1.45;
  color:var(--ink-2);border-bottom:1px solid var(--hair)}
.qenq{margin-top:16px;background:none;border:0;cursor:pointer;padding:0;
  font-size:14px;font-weight:600;color:var(--orange-deep);
  border-bottom:1px solid rgba(212,94,6,.4);font-family:inherit}
.qenq:hover{color:var(--orange);border-color:var(--orange)}

/* --- online catalogue -------------------------------------------- */
.online-meta{margin-top:22px;font-size:13px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.online-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:0 clamp(28px,3.4vw,52px);margin-top:10px}
.ol{padding:22px 0;border-top:1px solid var(--hair);display:flex;
  flex-direction:column}
.ol-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ol h3{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  line-height:1.3;margin:0}
.ol-price{flex:0 0 auto;font-size:15px;font-weight:700;color:var(--blue);
  letter-spacing:-.02em}
.ol-price.free{color:var(--orange-deep)}
.ol p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--ink-2);flex:1}
.ol-foot{display:flex;align-items:center;gap:18px;margin-top:14px}
.ol-fs,.ol-enq{font-size:13px;font-weight:600;background:none;border:0;padding:0;
  cursor:pointer;font-family:inherit;
  border-bottom:1px solid var(--hair);padding-bottom:2px;transition:.25s var(--e)}
.ol-fs{color:var(--ink-2)}
.ol-fs:hover{color:var(--navy);border-color:var(--navy)}
.ol-enq{color:var(--orange-deep);border-color:rgba(212,94,6,.4)}
.ol-enq:hover{color:var(--orange);border-color:var(--orange)}

@media (max-width:820px){
  .qlist{columns:1}
  .qbody{padding-left:18px}
  .online-grid{grid-template-columns:1fr}
}

.qnote{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--ink-2);
  padding-left:12px;border-left:2px solid var(--orange)}
.qlist:empty{display:none}

/* legal pages: readable measure, no panel */
.legal{max-width:74ch}
.legal h3{margin-top:26px;font-size:18px;letter-spacing:-.015em}
.legal p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-top:12px}
.legal .updated{font-size:13px;color:var(--muted)}

/* the hero panel must never be white-on-white if the remote photo fails */
.vhero-panel{background:#0C2244}
.vhero-media{background-color:#0C2244}

/* ==================================================================
   BRANDING — the Pinnacle mark leads the hero, and the header logo
   carries more weight (client feedback 1)
   ================================================================== */
.vbrand{width:auto;height:clamp(46px,4.6vw,64px);margin-bottom:26px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.5));
  max-width:100%}
.vhero-copy .vloc{margin-top:22px}
.logo-img{height:44px}
@media (max-width:720px){
  .vbrand{height:40px;margin-bottom:18px}
  .logo-img{height:36px}
}


/* ==================================================================
   QUALIFICATION LEVELS (client feedback 6)
   All six shown at once as cards. The tab list hid five levels behind
   a click and left the section reading as a wall of text; the levels
   are parallel, not a route, so there is no reason to reveal them
   one at a time.
   ================================================================== */
.lvls{margin-top:clamp(30px,3.4vw,46px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px)}

.lvl-card{padding:clamp(22px,2vw,30px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--hair);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e)}
.lvl-card:hover{transform:translateY(-3px);border-color:rgba(16,47,90,.16);
  box-shadow:0 20px 38px -26px rgba(16,47,90,.6)}

.lvl-code{display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--orange-deep);
  padding:5px 11px;border:1px solid rgba(212,94,6,.32);border-radius:999px}
.lvl-card h3{margin-top:15px;font-size:clamp(19px,1.6vw,23px);
  letter-spacing:-.022em;line-height:1.15;color:var(--navy)}
.lvl-card p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}

@media (max-width:1100px){ .lvls{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .lvls{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .lvl-card{transition:none}
  .lvl-card:hover{transform:none}
}


/* ==================================================================
   CLIENT FEEDBACK — supporting styles
   ================================================================== */

/* --- 10. funding ------------------------------------------------- */
.fund-sub{margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy)}
.fund .fund-sub + ul{margin-top:10px}
.fund-small{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.fund-cta-note{margin-top:12px;font-size:13px;font-weight:600;color:var(--ink-2)}
.fund .btn{margin-top:20px}

/* the disclaimer is the legally important part — give it weight */
.fund-important{margin-top:clamp(30px,4vw,52px);padding:26px 0 0;
  border-top:2px solid var(--navy)}
.fund-important h4{font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy)}
.fund-important p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--ink-2);
  max-width:78ch}
.fund-important b{color:var(--navy)}

/* --- 4. online courses page -------------------------------------- */
.online-how{padding:26px 0 30px;border-bottom:1px solid var(--hair)}
.online-how h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.online-how p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--ink-2);
  max-width:64ch}
.online-how .btn{margin-top:20px}
.online-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  font-size:14px;line-height:1.6;color:var(--ink-2)}
.online-note .alink{font-size:14px;padding:0;border:0;background:none;
  text-decoration:underline;text-underline-offset:3px}

/* --- 18. registered office + company number ---------------------- */
.foot-legal{font-size:12.5px;line-height:1.6;color:var(--ink-2);max-width:72ch}
.foot-legal b{color:var(--navy);font-weight:700}
.foot-legal-note{display:block;margin-top:4px;color:var(--muted)}

@media (max-width:720px){
  .fund-important{padding-top:20px}
  .online-how{padding:20px 0 24px}
}

/* --- 8. organisations we have trained (names, or logos with permission) --- */
.orgs{list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0}
.orgs li{display:flex;align-items:center;min-height:74px;padding:16px 22px 16px 0;
  border-top:1px solid var(--hair);font-size:15.5px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink)}
.org-logo{max-height:40px;width:auto;max-width:100%;
  filter:grayscale(1);opacity:.72;transition:.25s var(--e)}
.orgs li:hover .org-logo{filter:none;opacity:1}
.orgs-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:13px;line-height:1.6;color:var(--muted);max-width:76ch}

/* --- 7. approval badges (real artwork, supplied by the client) ------ */
.creds li{padding-left:0;border-left:0;flex-direction:row;align-items:center}
.cred-logo{height:clamp(38px,3.4vw,50px);width:auto;max-width:100%;display:block}
/* the Highfield file is a JPEG with a white background baked in, so every
   badge sits on a white plate — consistent, and each logo keeps the
   background its owner supplied */
.creds li{background:#fff;border:1px solid var(--hair);border-radius:12px;
  padding:14px 22px}
.creds{gap:14px;flex-wrap:wrap}
@media (max-width:560px){
  .creds{flex-direction:row;gap:10px}
  .creds li{padding:11px 13px}
  .cred-logo{height:32px}
}


/* the brand mark sits with the social links at the foot of the hero */
.vsocial{align-items:center}


@media (max-width:720px){
}

/* hero foot logo, with a hairline dividing it from the social links */

/* ==================================================================
   Burger menu over the hero
   The dropdown panel is a light frosted card, but while the header is
   in its over-hero state the links are white — giving white text on a
   white panel once the menu opens. When the menu is open the links
   revert to their normal dark treatment regardless of that state.
   ================================================================== */
header.nav.on-hero.open-menu .nav-links a{
  color:var(--ink-2);text-shadow:none}
header.nav.on-hero.open-menu .nav-links a:hover{
  color:var(--navy);background:rgba(16,47,90,.07)}
header.nav.on-hero.open-menu .nav-links a.active{
  color:#fff;background:var(--blue);
  box-shadow:0 4px 12px -4px rgba(16,47,90,.7)}
header.nav.on-hero.open-menu .nav-links a::after{background:var(--orange)}

/* the panel itself needs to be opaque enough to read against a photo */
header.nav.open-menu .nav-links{background:rgba(255,255,255,.97)}

/* the over-hero rule repaints all three burger bars white, and it sits
   later and more specific than the rule that hides the middle bar for
   the X — so the X kept a line through it. Re-hide it when open. */
body.menu-open header.nav.on-hero .burger span{background:transparent}

/* an expanded subject lays its qualifications across the full width of the
   group, instead of squeezing them into one of the list's two columns */
.glist > .crow-wrap.open{grid-column:1/-1}

/* community: reduced-rates banner — icon, label and copy, action on the
   right; a soft warm gradient and shadow instead of an outline */
.rate-banner-wrap{margin-top:clamp(28px,3.4vw,44px)}
.rate-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:18px 28px;padding:clamp(20px,2.4vw,30px) clamp(22px,2.8vw,36px);
  background:linear-gradient(120deg,#FFF7F0 0%,#FDE9D6 100%);
  border:0;border-radius:20px;
  box-shadow:0 18px 40px -26px rgba(212,94,6,.5)}
.rate-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;
  background:#fff;color:var(--orange-deep);
  box-shadow:0 8px 18px -10px rgba(212,94,6,.55)}
.rate-ic svg{width:25px;height:25px}
.rate-label{display:block;margin-bottom:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-deep)}
.rate-copy p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:64ch}
.rate-copy b{color:var(--navy);font-weight:700}
.rate-banner .btn{white-space:nowrap}
@media (max-width:760px){
  .rate-banner{grid-template-columns:auto minmax(0,1fr);gap:14px 16px}
  .rate-ic{width:46px;height:46px;border-radius:13px}
  .rate-banner .btn{grid-column:1/-1;justify-self:start}
}
/* legal pages: sub-sections (e.g. the cancellation policy's parts) and lists */
.legal .updated{margin-bottom:6px}
.legal h4{margin:20px 0 0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.legal ul{margin:10px 0 0;padding-left:20px}
.legal li{margin-top:8px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* the Free Talks flyer is a portrait poster: show it whole instead of
   cropping it into the wide strip the old teaser used */
.talk-poster{aspect-ratio:auto;width:min(100%,420px);margin-top:20px}
.talk-poster img{height:auto;object-fit:contain;object-position:center}

/* Free Talks: copy on the left, flyer on the right */
.talks{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3.4vw,48px);align-items:start;
  padding:clamp(24px,3vw,36px)}
.talks-copy{min-width:0}
.talks-cta{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}
.talks .talk-poster{margin-top:0;width:clamp(240px,26vw,340px)}
@media (max-width:900px){
  .talks{grid-template-columns:minmax(0,1fr);gap:22px}
  .talks .talk-poster{width:min(100%,380px)}
}

/* online courses search */
.online-search{margin-top:18px;max-width:420px}
.online-empty{padding:26px 0;color:var(--ink-2);font-size:15px}

/* ==================================================================
   PAGE HEADERS — a photograph behind the navy instead of a flat band.
   Each view sets --ph-img; the ::before inherits it, so there is one
   background rule rather than one per page. The navy stays as the
   background-colour, so a header is never blank if an image fails.
   ================================================================== */
.phead::before{
  background-color:#0C2244;
  background-image:
    linear-gradient(150deg,rgba(10,28,58,.66),rgba(8,20,42,.76)),
    var(--ph-img,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat}

/* the vignette eases off now the photo is meant to be seen */
.phead::after{background:
  radial-gradient(ellipse 64% 60% at 50% 45%,
    rgba(0,0,0,0) 32%, rgba(0,0,0,.22) 66%, rgba(0,0,0,.55) 100%)}

/* white text over a lighter band needs its own shadow */
.phead h2{text-shadow:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4)}
.phead p,.phead .kicker,.phead .crumb{text-shadow:0 1px 3px rgba(0,0,0,.55)}

#view-about    {--ph-img:url("../images/ph-about.jpg")}
#view-courses  {--ph-img:url("../images/ph-courses.jpg")}
#view-online   {--ph-img:url("../images/ph-online.jpg")}
#view-community{--ph-img:url("../images/ph-community.jpg")}
#view-funding  {--ph-img:url("../images/ph-funding.jpg")}
#view-work     {--ph-img:url("../images/ph-work.jpg")}
#view-contact  {--ph-img:url("../images/ph-contact.jpg")}
#view-privacy  {--ph-img:url("../images/ph-legal.jpg")}
#view-terms    {--ph-img:url("../images/ph-legal.jpg")}

/* ==================================================================
   The hero overlay now uses the same navy as the page headers, rather
   than black, so the home page and the inner pages read as one family.
   ================================================================== */
.vhero-veil{background:
  radial-gradient(ellipse 60% 54% at 50% 45%,
    rgba(10,28,58,0) 20%,
    rgba(10,28,58,.52) 54%,
    rgba(8,20,42,.84) 78%,
    rgba(8,20,42,1) 100%)}

/* the whole site renders a touch smaller, as at 95% browser zoom.
   Applied to the desktop site only — the app view is a fixed-height
   shell where scaling the viewport box misplaces its layers. */
:root{--zoom:0.93;
  /* a full-window width, pre-corrected for the zoom above */
  --bleed:calc(100vw / var(--zoom))}
html{zoom:var(--zoom)}

/* the navbar logo keeps its own colours over the hero as well; a soft
   halo lifts the navy wordmark off the photograph behind it */
header.nav.on-hero .logo-img{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9))
         drop-shadow(0 0 12px rgba(255,255,255,.55))
         drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* ==================================================================
   The navbar is visible at the top of the page too, not only once
   scrolled: the bar keeps its surface and its normal colours over the
   hero, so the logo needs no halo to stand out.
   ================================================================== */
header.nav.on-hero .nav-in{
  background:rgba(255,255,255,.88);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 18px -8px rgba(16,47,90,.28)}

header.nav.on-hero .logo-img{filter:none}

header.nav.on-hero .nav-links a{color:var(--ink-2);text-shadow:none}
header.nav.on-hero .nav-links a:hover{color:var(--navy);background:rgba(255,255,255,.6)}
header.nav.on-hero .nav-links a.active{color:#fff;background:var(--blue);
  box-shadow:0 4px 12px -4px rgba(16,47,90,.7)}
header.nav.on-hero .nav-links a::after{background:var(--orange)}


header.nav.on-hero .btn-blue{
  background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;border:0;
  text-shadow:none;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 12px -5px rgba(16,47,90,.6)}
header.nav.on-hero .btn-blue:hover{background:linear-gradient(180deg,var(--blue-2),var(--blue))}

header.nav.on-hero .burger{box-shadow:none}
header.nav.on-hero .burger span,
header.nav.on-hero .burger span::before,
header.nav.on-hero .burger span::after{background:var(--navy)}
body.menu-open header.nav.on-hero .burger span{background:transparent}

/* ==================================================================
   BRAND COLOUR IN THE HERO
   The hero was navy and white only. The orange is brought in on the
   things that should draw the eye — the main action, the location
   rule, the value-card labels and the card controls — rather than as
   a wash, so it reads as brand rather than decoration.
   ================================================================== */

/* the primary action carries the brand, matching .btn-orange elsewhere */
.vbtn{background:linear-gradient(180deg,var(--orange-2),var(--orange));
  color:#2a1b05;
  box-shadow:0 10px 26px -10px rgba(251,120,18,.85),
             inset 0 1px 0 rgba(255,255,255,.45)}
.vbtn:hover{background:linear-gradient(180deg,var(--orange-l),var(--orange));
  box-shadow:0 16px 34px -12px rgba(251,120,18,.9),
             inset 0 1px 0 rgba(255,255,255,.5)}

/* an orange rule leads the location line, as the kickers do elsewhere */
.vloc{gap:10px}
.vloc::before{content:"";width:22px;height:2px;border-radius:2px;
  background:var(--orange);flex:0 0 auto}
.vloc svg{display:none}

/* value-card labels pick up the light orange */
.vval b{color:var(--orange-2)}
.vval{border-color:rgba(251,120,18,.28)}

/* card controls: orange rather than plain white */
.vnext{background:var(--orange);color:#2a1b05;
  box-shadow:0 6px 16px -6px rgba(251,120,18,.8)}
.vnext:hover{background:var(--orange-l)}
.vslide.is-active{box-shadow:0 0 0 2px var(--orange),
  0 16px 32px -14px rgba(0,0,0,.75)}

/* socials warm up on hover instead of going plain white */
.vsocial a:hover{background:rgba(251,120,18,.22);
  border-color:rgba(251,120,18,.65);color:#fff}



/* ==================================================================
   WHY PINNACLE — a photograph carries the section instead of a
   sticky headline beside a block of text. The four points keep their
   hairline rows; the picture does the work the copy was doing.
   ================================================================== */
.lay-aside{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,66px)}
.why-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 28px 54px -32px rgba(16,47,90,.7)}
.why-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.lay-aside-head p{max-width:46ch}
.lay-aside .why-grid{grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,2.6vw,44px);margin-top:clamp(26px,3vw,42px)}

/* the icon stands alone now the progress rings are gone */
.why-ic{display:inline-flex;width:26px;height:26px;margin-bottom:12px;
  color:var(--orange-deep)}
.why-ic svg{width:26px;height:26px}
.why:hover .why-ic{animation:pop .5s var(--e)}

@media (max-width:960px){
  .lay-aside{grid-template-columns:1fr}
  .why-photo img{aspect-ratio:16/9}
}

/* ==================================================================
   LEARNER FEEDBACK — three review cards and a figure strip.
   ================================================================== */
.rev-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(28px,3.2vw,44px)}
.rev-cards .q{display:flex;flex-direction:column;gap:14px;margin:0;
  padding:clamp(22px,2vw,30px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--hair);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e)}
.rev-cards .q:hover{transform:translateY(-3px);border-color:rgba(16,47,90,.16);
  box-shadow:0 20px 38px -26px rgba(16,47,90,.6)}
.rev-cards .stars svg{width:16px;height:16px}
.rev-cards blockquote{flex:1;margin:0;font-size:16px;line-height:1.6;
  font-weight:500;color:var(--ink)}
.rev-cards .who{font-size:13px;color:var(--muted)}


@media (max-width:900px){
  .rev-cards{grid-template-columns:1fr;gap:14px}
}

/* ==================================================================
   Approvals moved out of the page and into the footer, where badges
   normally live: label left, marks right, above the legal line.
   ================================================================== */
.foot-strip{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--hair)}
.foot-strip .foot-legal{flex:1 1 380px}
.foot-strip .creds{flex:0 0 auto;justify-content:flex-end}
.foot-strip .cred-logo{height:clamp(32px,2.6vw,42px)}

/* ==================================================================
   INNER PAGES — About and Work With Us.
   About put its audience list in a panel beside the prose; it now sits
   across the full width under a photograph. Work With Us was a single
   dark card, and reads better as copy beside what to send.
   ================================================================== */
.about-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.about-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 28px 54px -32px rgba(16,47,90,.7)}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

.about-who{margin-top:clamp(34px,4vw,60px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--hair)}
.about-who-head{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.who-list{list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.who-list li{display:flex;gap:10px;align-items:flex-start;
  padding:0 clamp(16px,1.8vw,28px);border-left:1px solid var(--hair);
  font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.who-list li:first-child{border-left:0;padding-left:0}
.who-list svg{width:16px;height:16px;color:var(--orange-deep);flex:0 0 auto;margin-top:2px}

.work-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.work-copy h2{margin-top:14px;font-size:clamp(28px,3.4vw,44px);
  line-height:1.06;letter-spacing:-.03em}
.work-copy p{margin-top:14px;font-size:17px;line-height:1.62;
  color:var(--ink-2);max-width:48ch}
.work-copy .btn{margin-top:24px}
.work-send{padding-top:6px}

@media (max-width:1000px){
  .who-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .who-list li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:860px){
  .about-lead,.work-lead{grid-template-columns:1fr;gap:32px}
  .about-photo img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .who-list{grid-template-columns:1fr}
  .who-list li{border-left:0;padding-left:0}
}

/* ==================================================================
   ONLINE COURSES — the intro reads as a band, action on the right.
   ================================================================== */
.online-how{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:6px clamp(24px,4vw,64px);align-items:center;
  padding:clamp(20px,2.2vw,30px) 0 clamp(24px,2.6vw,34px)}
.online-how h3{grid-column:1;grid-row:1;align-self:end}
.online-how p{grid-column:1;grid-row:2;align-self:start;max-width:78ch}
.online-how .btn{grid-column:2;grid-row:1/3;justify-self:end;margin-top:0}

@media (max-width:760px){
  .online-how{grid-template-columns:1fr}
  .online-how .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}
}

/* About: the photo now stretches to the height of the copy instead of
   setting its own 4:5 height, which left a dead band above the prose. */
.about-lead{align-items:stretch}
.about-lead .prose{align-self:center}
.about-photo{position:relative;min-height:380px}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
@media (max-width:860px){
  .about-photo{min-height:0}
  .about-photo img{position:static;height:auto;aspect-ratio:16/9}
}


/* ==================================================================
   INNER PAGES, pass 2 — Courses, Community, Contact, Funding, Work,
   Online courses and the legal pages.
   ================================================================== */

/* --- Courses: the Open courses heading sat directly on the cards --- */
.oc-wrap .shead{margin-bottom:clamp(22px,2.4vw,34px)}

/* --- Community: the header copy moved down into "How we help" --- */
.help-lead{margin-top:14px;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.help-lead + .checklist{margin-top:18px}

/* --- Contact: the details card now runs the full height of the form --- */
.contact-grid{align-items:stretch}
.cinfo{display:flex;flex-direction:column}
.cinfo h3{flex:0 0 auto}
.cinfo .il{flex:1 1 0;align-items:center}

/* --- Funding: "Important" is a callout, not a stray paragraph block --- */
.fund-important{display:grid;grid-template-columns:minmax(120px,.16fr) minmax(0,1fr);
  gap:12px clamp(24px,4vw,64px);align-items:start;max-width:none;
  margin-top:clamp(30px,3.4vw,48px);
  padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);
  background:var(--orange-tint);border:1px solid rgba(251,120,18,.28)}
.fund-important h4{grid-column:1;grid-row:1/4;margin:0}
.fund-important p{grid-column:2;margin:0;max-width:80ch}
@media (max-width:760px){
  .fund-important{grid-template-columns:1fr}
  .fund-important h4,.fund-important p{grid-column:1;grid-row:auto}
}

/* --- Work With Us: the copy and checklist beside a photograph --- */
.work-lead{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center}
.work-main{display:grid;gap:clamp(26px,3vw,40px)}
.work-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 28px 54px -32px rgba(16,47,90,.7)}
.work-photo img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
@media (max-width:860px){ .work-photo img{aspect-ratio:16/9} }

/* --- Online courses: even card footers, long copy folds away --- */
.ol p.ol-d{flex:0 0 auto;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:5;overflow:hidden}
.ol p.ol-d.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.ol-more{align-self:flex-start;margin-top:8px;padding:0;border:0;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.ol-more:hover{color:var(--orange-deep)}
.ol-foot{margin-top:auto;padding-top:14px}

/* --- Legal pages: a contents list beside the text --- */
.legal-wrap{display:grid;grid-template-columns:minmax(190px,.26fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.legal-wrap .legal{max-width:78ch;margin:0;padding:0}
.legal h3{scroll-margin-top:110px}
.legal-toc{position:sticky;top:110px;display:flex;flex-direction:column}
.legal-toc-h{margin-bottom:10px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.legal-toc button{text-align:left;padding:8px 0 8px 14px;border:0;
  border-left:2px solid var(--hair);background:none;cursor:pointer;
  font:inherit;font-size:14px;line-height:1.35;color:var(--ink-2);
  transition:color .2s var(--e),border-color .2s var(--e)}
.legal-toc button:hover{color:var(--navy);border-left-color:var(--orange)}
@media (max-width:900px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-toc{display:none}
}

/* Contact details: with the card now the height of the form, the rows
   need presence rather than more space between small type. */
.cinfo{padding:clamp(24px,2.4vw,34px)}
.cinfo h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;margin-bottom:8px}
.cinfo .il{gap:16px;padding:0}
.cinfo .il .i{width:46px;height:46px;border-radius:14px}
.cinfo .il .i svg{width:20px;height:20px}
.cinfo .il b{font-size:10.5px;margin-bottom:5px}
.cinfo .il > div a,.cinfo .il > div > span{font-size:clamp(16px,1.35vw,19px);
  line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere}


/* --- client feedback, 2 Oct 2026 ------------------------------------ */
/* "Date available" now opens the booking, so it should look clickable */
.crow .dated{cursor:pointer}
.crow .dated:hover,.crow .dated:focus-visible{background:var(--orange);color:#231603;
  border-color:var(--orange);outline:none}
/* private-delivery line under the Open courses heading */
.oc-wrap .shead .oc-private{margin-top:12px;font-size:16px;line-height:1.6;color:#D3DDEC;max-width:none;opacity:1}
.alink.light{color:#fff;font:inherit;padding:0;border:0;background:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.alink.light:hover{color:var(--orange-2)}

/* security check on the enquiry form */
.cf-turnstile{margin:4px 0 14px}