/* GEA organizations page. Generated from the design handover (organizations.html). */

:root{
  /* --sec, --head-gap and --font are set once, in polish.css (loaded last) */
  --accent:#cf3a27;
  --accent-dark:#a92e1e;
  --logo-grey:#9c9da1;
  --ink:#232628;
  --ink-2:#50535a;
  --muted:#6b6e75;
  --line:#e6e7e8;
  --tint:#f7f7f8;   /* light enough for the brand red to pass 4.5:1 on it (4.57:1) */
  --tint-warm:#fef6f4;
  --dark:#232628;
  --dark-2:#2e3134;
  --on-dark:#d8d8dc;
  --white:#ffffff;
  --radius:22px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px -18px rgba(0,0,0,.25);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.45);
  --hdr:84px;
  --wrap:1280px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);font-size:16px;line-height:1.6;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea,summary{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent);color:#fff}
.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}
.skip{position:fixed;inset-inline-start:16px;inset-block-start:-60px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{inset-block-start:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* anchors and keyboard focus land below the fixed header (and above bottom bars), never under them */
html{scroll-padding-block:calc(var(--hdr) + 8px) 16px}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;text-decoration:none}
.logo svg{height:48px;width:auto;flex-shrink:0}
.lg1{fill:var(--logo-grey)}
.lg2{fill:var(--accent)}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 26px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .35s var(--ease),border-color .35s,background-color .35s,box-shadow .35s;will-change:transform}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease-out)}
.btn:hover::before{transform:none}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.btn:hover svg.arrow{transform:translateX(4px)}
[dir="rtl"] .btn svg.arrow{transform:scaleX(-1)}
[dir="rtl"] .btn:hover svg.arrow{transform:scaleX(-1) translateX(4px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 28px -12px rgba(207,58,39,.7)}
.btn-primary::before{background:var(--accent-dark)}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--ink);border-color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost::before{background:var(--accent)}
.btn-ghost:hover{color:#fff;border-color:var(--accent)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light::before{background:var(--accent)}
.btn-light:hover{color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light::before{background:#fff}
.btn-outline-light:hover{color:var(--ink);border-color:#fff}
.btn-sm{min-height:44px;padding-inline:20px;font-size:14px}
.link{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 2px no-repeat;transition:background-size .35s var(--ease-out),color .2s}
.link:hover{color:var(--accent-dark);background-size:calc(100% - 22px) 2px}
.link svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.link:hover svg{transform:translateX(3px)}
[dir="rtl"] .link svg{transform:scaleX(-1)}

/* ---------- header (floating) ---------- */
.progress-bar{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:120;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
[dir="rtl"] .progress-bar{transform-origin:100% 50%}
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;padding-block-start:0;transition:padding .45s var(--ease-out)}
.hdr-in{position:relative;display:flex;align-items:center;gap:20px;min-height:var(--hdr);max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);border-radius:0;border:1px solid transparent;transition:background-color .45s,box-shadow .45s,border-color .45s,border-radius .45s,min-height .45s var(--ease-out),max-width .45s var(--ease-out)}
.hdr.scrolled{padding-block-start:10px}
.hdr{transition:padding .45s var(--ease-out),transform .35s var(--ease-out)}
.hdr.tuck{transform:translateY(-110%)}
/* the script arrived late (slow connection): show what is on screen as it is, with no movement */
.instant *,.instant *::before,.instant *::after{transition:none!important;animation:none!important}
.hdr.scrolled .hdr-in{max-width:calc(var(--wrap) - 40px);min-height:68px;border-radius:22px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-color:rgba(230,231,232,.9);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
@media (max-width:1320px){.hdr.scrolled .hdr-in{margin-inline:12px;max-width:none}}
.hdr.scrolled .logo svg{height:42px}
.logo svg{transition:height .45s var(--ease-out)}
.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:11px;border-radius:10px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav a::after{content:"";position:absolute;inset-inline:11px;inset-block-end:8px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease-out)}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.lang{position:relative}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:10px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:var(--tint)}
.lang summary svg{width:18px;height:18px}
.lang ul{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:170px}
.lang li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-inline:12px;border-radius:8px;text-decoration:none;font-size:14px}
.lang li a:hover{background:var(--tint)}
.lang li a[aria-current="true"]{font-weight:600;color:var(--accent)}
.login{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:10px;text-decoration:none;font-weight:500;font-size:14.5px;white-space:nowrap}
.login:hover{color:var(--accent)}
/* HDRX START */
.acct{position:relative}
.acct summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:4px 8px 4px 4px;border-radius:999px;cursor:pointer;font-size:14.5px;font-weight:500;transition:background-color .2s}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover,.acct[open] summary{background:var(--tint)}
.acct .av{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.acct .chev{width:16px;height:16px;transition:transform .25s}
.acct[open] .chev{transform:rotate(180deg)}
.acct-m{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);z-index:5;min-width:230px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.acct-who{display:flex;flex-direction:column;padding:10px 12px 10px;margin-block-end:4px;border-block-end:1px solid var(--line)}
.acct-who b{font-weight:600;font-size:15px;line-height:1.3}
.acct-who span{font-size:12.5px;color:var(--muted)}
.acct-m a,.acct-m button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding-inline:12px;border:0;border-radius:10px;background:none;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;text-align:start}
.acct-m a:hover,.acct-m button:hover{background:var(--tint-warm);color:var(--accent)}
.acct-m svg{width:18px;height:18px;flex:none}
.acct-m form{margin:4px 0 0;padding-block-start:4px;border-block-start:1px solid var(--line)}
/* who sees what: guest by default; the server sets data-auth on <html> */
html[data-auth="learner"] .auth-guest,html[data-auth="admin"] .auth-guest{display:none!important}
html:not([data-auth="learner"]):not([data-auth="admin"]) .auth-user{display:none!important}
html:not([data-auth="admin"]) .auth-admin{display:none!important}
@media (max-width:640px){.acct .acct-n,.acct .chev{display:none}.acct summary{padding:4px}}
/* ---------- search all programs ---------- */
.srch-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--ink);transition:background-color .2s,color .2s}
.srch-btn:hover{background:var(--tint);color:var(--accent)}
.srch-btn svg{width:20px;height:20px}
dialog.srch{padding:0;border:0;margin:clamp(12px,8vh,90px) auto auto;width:min(680px,calc(100% - 24px));max-height:min(640px,calc(100dvh - 24px));border-radius:22px;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
dialog.srch[open]{display:flex;flex-direction:column}
dialog.srch::backdrop{background:rgba(35,38,40,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.srch-top{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-block-end:1px solid var(--line)}
.srch-top>svg{width:22px;height:22px;flex:none;color:var(--muted)}
.srch-top input{flex:1;min-width:0;min-height:48px;border:0;outline:none;background:none;font-size:17px;color:var(--ink)}
.srch-top input::-webkit-search-cancel-button{display:none}
.srch-x{flex:none;min-width:44px;min-height:44px;padding-inline:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.srch-x:hover{border-color:var(--ink-2)}
.srch-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 12px}
.srch-h{padding:12px 12px 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.srch-r{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.srch-r .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--tint-warm);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700}
.srch-r .ic svg{width:18px;height:18px}
.srch-r b{display:block;font-weight:600;font-size:15px;line-height:1.35}
.srch-r small{display:block;font-size:13px;color:var(--muted)}
.srch-r mark{background:none;color:var(--accent);font-weight:700}
.srch-r[aria-selected="true"],.srch-r:hover{background:var(--tint-warm)}
.srch-all{display:flex;align-items:center;gap:8px;min-height:48px;margin:6px 4px 0;padding-inline:12px;border-radius:12px;font-weight:600;color:var(--accent);text-decoration:none}
.srch-all:hover{background:var(--tint)}
.srch-all svg{width:18px;height:18px}
.srch-empty{padding:28px 16px;text-align:center;color:var(--ink-2)}
.srch-empty b{display:block;color:var(--ink);margin-block-end:4px}
.srch-go{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin-block-start:8px}
.srch-tips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px 8px}
.srch-tips button{min-height:44px;padding-inline:16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.srch-tips button:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){dialog.srch{margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}}
.acct .acct-n{display:none}
@media (max-width:420px){.lang .lang-t{display:none}.lang summary{padding-inline:12px;min-width:44px;justify-content:center}.hdr-tools{gap:2px}}
.ftr-legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.ftr-legal a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.ftr-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:360px){.hdr .logo svg{height:38px}.hdr .menu-btn{width:44px;height:44px}.hdr .hdr-in{gap:8px}}

/* desktop menu fits with the real Poppins font (it is wider than the fallback) */
@media (min-width:1200px){.hdr .nav a{padding-inline:9px}.hdr .hdr-in{gap:16px}}

/* HDRX END */
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
.menu-open .menu-btn .x{display:block}
.menu-open .menu-btn .bars{display:none}
.nav .only-mobile{display:none}
@media (max-width:1279px){
  .menu-btn{display:inline-flex}
  .hdr-tools{margin-inline-start:auto}
  .nav{position:absolute;inset-inline:var(--gutter);inset-block-start:calc(100% + 8px);max-height:calc(100dvh - var(--hdr) - 24px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg)}
  .hdr.scrolled .nav{inset-inline:0}
  .nav a{min-height:50px;font-size:16px;padding-inline:14px}
  .nav a::after{display:none}
  .nav a:hover{background:var(--tint-warm)}
  .js .nav{display:none}
  .js .menu-open .nav{display:flex;animation:drop .35s var(--ease-out)}
  .nav .only-mobile{display:flex}
  html:not(.js) .hdr{position:relative}
  html:not(.js) .nav{position:static;box-shadow:none;border:0;padding:0 0 12px;flex-basis:100%}
  html:not(.js) .hdr-in{flex-wrap:wrap}
}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .hdr-tools .btn,.hdr-tools .login{display:none}
  .logo svg{height:44px}
}

/* ---------- shared decorative bits (blobs, grid lines, kicker) ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.blob.b1{width:48vw;height:48vw;max-width:760px;max-height:760px;background:radial-gradient(circle at 30% 30%,rgba(207,58,39,.55),rgba(207,58,39,0) 70%);inset-inline-end:-10vw;inset-block-start:-14vw;animation:float1 18s ease-in-out infinite alternate}
.blob.b2{width:40vw;height:40vw;max-width:620px;max-height:620px;background:radial-gradient(circle,rgba(156,157,161,.55),rgba(156,157,161,0) 70%);inset-inline-start:-12vw;inset-block-end:-10vw;animation:float2 22s ease-in-out infinite alternate}
.blob.b3{width:28vw;height:28vw;max-width:440px;max-height:440px;background:radial-gradient(circle,rgba(186,170,230,.55),rgba(186,170,230,0) 70%);inset-inline-start:34%;inset-block-start:30%;animation:float3 16s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate(-6vw,8vh) scale(1.12)}}
@keyframes float2{to{transform:translate(8vw,-6vh) scale(1.1)}}
@keyframes float3{to{transform:translate(-5vw,-7vh) scale(.9)}}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%)}
.spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--sx,70%) var(--sy,40%),rgba(207,58,39,.10),transparent 60%);transition:opacity .4s;pointer-events:none}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-block-end:22px}
.kicker .pulse{position:relative;width:22px;height:22px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.kicker .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.2s var(--ease) infinite}
.kicker .pulse svg{width:12px;height:12px;color:#fff;position:relative;z-index:1}
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.2);opacity:0}}
/* ---------- section scaffolding ---------- */
.sec{position:relative;padding-block:var(--sec)}
.sec-tint{background:var(--tint)}
.sec-head{max-width:760px;margin-block-end:var(--head-gap)}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-block-end:16px}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.sec-head.center .eyebrow::after{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-.035em;font-weight:700}
.sec-head h2 em{font-style:normal;color:var(--accent)}
.sec-head p{margin-block-start:18px;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink-2);max-width:60ch}
.sec-head.center p{margin-inline:auto}

/* ---------- facts + academy cards (shared) ---------- */
.facts-inline{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fi{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:18px;background:var(--tint);border:1px solid var(--line)}
.fi .ic{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fi .ic svg{width:22px;height:22px}
.fi b{display:block;font-size:16.5px;font-weight:600;line-height:1.3}
.fi span.s{font-size:14px;color:var(--ink-2)}
.arrows{display:flex;gap:8px}
.arr{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s,color .25s}
.arr:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.arr svg{width:20px;height:20px}
[dir="rtl"] .arr svg{transform:scaleX(-1)}
.aca-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:clamp(260px,26vw,340px);aspect-ratio:3/4;border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;transform-style:preserve-3d;transition:transform .6s var(--ease-out),box-shadow .5s;box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
.aca-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease-out)}
.aca-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.94) 100%)}
.aca-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.aca-card:hover::after{opacity:1}
.aca-card:hover img{transform:scale(1.1)}
.aca-card:hover{box-shadow:0 34px 60px -30px rgba(207,58,39,.65)}
.aca-body{padding:22px}
.aca-body .ic{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;margin-block-end:14px}
.aca-body .ic svg{width:22px;height:22px}
.aca-body h3{font-size:1.28rem;line-height:1.2;letter-spacing:-.015em;font-weight:600}
.aca-body p{margin-block-start:6px;font-size:14px;color:#e4e4e8;line-height:1.5}
.aca-body .more{display:inline-flex;align-items:center;gap:8px;margin-block-start:14px;font-weight:600;font-size:14px;color:#fff}
.aca-body .more i{width:30px;height:30px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;transition:transform .4s var(--ease-out)}
.aca-body .more svg{width:15px;height:15px}
.aca-card:hover .more i{transform:rotate(-45deg)}
[dir="rtl"] .aca-body .more svg{transform:scaleX(-1)}
/* ---------- HOW IT WORKS (timeline) ---------- */
.tabs{position:relative;display:inline-flex;gap:4px;padding:6px;background:var(--tint);border:1px solid var(--line);border-radius:999px;margin-block-end:32px;max-width:100%}
.tabs .ind{position:absolute;inset-block:6px;border-radius:999px;background:var(--accent);transition:inset-inline-start .5s var(--ease-out),width .5s var(--ease-out);z-index:0}
.tab{position:relative;z-index:1;min-height:48px;padding-inline:24px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-weight:600;font-size:15px;white-space:nowrap;transition:color .35s}
.tab[aria-selected="true"]{color:#fff}
html:not(.js) .tab[aria-selected="true"]{background:var(--accent)}
@media (max-width:480px){.tabs{display:flex;width:100%}.tab{flex:1 1 0;min-width:0;padding-inline:10px;font-size:14px;white-space:normal;line-height:1.25}}
.tpanels{position:relative}
.js .tpanels{display:grid}
.js .tpanel{grid-area:1/1;transition:opacity .45s,visibility .45s}
.js .tpanel[hidden]{display:none}
.js .tpanel:not([hidden]){animation:siIn .5s var(--ease-out) both}
.tl{position:relative;display:grid;gap:18px;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.tl::before,.tl::after{content:"";position:absolute;inset-block-start:27px;inset-inline-start:28px;inset-inline-end:calc(100% / var(--n) - 28px);height:2px;border-radius:2px;background:var(--line)}
.tl::after{background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform .2s linear}
[dir="rtl"] .tl::after{transform-origin:100% 50%}
.tl-step{position:relative;z-index:1;padding-inline-end:6px}
.tl-dot{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink);margin-block-end:22px;transition:background-color .4s,border-color .4s,color .4s,transform .5s var(--ease-out),box-shadow .4s}
.tl-step h3{font-size:17px;font-weight:600;line-height:1.3;margin-block-end:6px}
.tl-step p{font-size:14.5px;color:var(--ink-2)}
.tl-step.on .tl-dot,.tl-step.past .tl-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.tl-step.on .tl-dot{transform:scale(1.12);box-shadow:0 0 0 8px rgba(207,58,39,.14)}
.tl-step .prog{display:none}
@media (max-width:860px){
  .tl{grid-template-columns:1fr;gap:0}
  .tl::before,.tl::after{inset-block-start:28px;inset-block-end:54px;inset-inline-start:27px;inset-inline-end:auto;width:2px;height:auto}
  .tl::after{transform-origin:50% 0;transform:scaleY(var(--f,0))}
  .tl-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding-block-end:26px}
  .tl-dot{grid-row:span 2;margin:0}
  .tl-step h3{margin-block-start:14px}
}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:40px 64px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.faq-side{position:sticky;inset-block-start:calc(var(--hdr) + 40px);align-self:start}}
.faq-side .sec-head{margin-block-end:28px}
.ask{display:flex;align-items:center;gap:16px;padding:20px;border-radius:22px;background:var(--tint);border:1px solid var(--line)}
.ask .ic{width:52px;height:52px;border-radius:16px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ask .ic svg{width:24px;height:24px}
.ask b{display:block;font-weight:600}
.ask a{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.ask a:hover{text-decoration:underline;text-underline-offset:4px}
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:22px;transition:border-color .3s,box-shadow .3s,background-color .3s}
.faq details:not([open]):hover{border-color:rgba(207,58,39,.45);background:var(--tint-warm)}
.faq details[open]{border-color:var(--accent);box-shadow:0 20px 40px -30px rgba(207,58,39,.6)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:18px 22px;cursor:pointer;font-weight:600;font-size:16.5px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{position:relative;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--tint);transition:background-color .3s,transform .4s var(--ease-out)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;inset-inline-start:11px;inset-block-start:16px;width:12px;height:2px;border-radius:2px;background:var(--accent);transition:transform .3s,background-color .3s}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--accent);transform:rotate(180deg)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:#fff}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:15.5px}
.faq .a a{color:var(--accent);font-weight:600}
.faq-more{margin-block-start:18px}

/* ---------- CLOSING BAND ---------- */
.close{position:relative;min-height:clamp(360px,50vh,500px);padding-block:var(--sec);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.close .bg{position:absolute;inset:-12% 0;z-index:-2}
.close .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(207,58,39,.96) 0%,rgba(207,58,39,.84) 45%,rgba(207,58,39,.3) 100%)}
[dir="rtl"] .close::before{background:linear-gradient(270deg,rgba(207,58,39,.96) 0%,rgba(207,58,39,.84) 45%,rgba(207,58,39,.3) 100%)}
@media (max-width:760px){.close::before{background:linear-gradient(180deg,rgba(207,58,39,.72),rgba(207,58,39,.95))}}
.close h2{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.04em;font-weight:700;max-width:14ch}
.close p{margin-block:20px 34px;font-size:clamp(1rem,1.4vw,1.2rem);color:#fff;max-width:44ch}
.close .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- FOOTER ---------- */
.ftr{position:relative;background:var(--dark);color:#fff;padding-block:clamp(48px,5.5vw,72px) 28px;overflow:hidden;isolation:isolate}
.ftr .big-mark{position:absolute;z-index:-1;inset-inline-end:-80px;inset-block-end:-120px;width:520px;opacity:.07;pointer-events:none}
.ftr-grid{display:grid;gap:36px 32px;grid-template-columns:minmax(0,1fr)}
.ftr-grid > *{min-width:0}
@media (min-width:640px){.ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1024px){.ftr-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.3fr)}}
.ftr h2{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;min-height:48px;display:flex;align-items:center;margin:0}
.ftr .brand p{margin-block-start:14px;color:var(--on-dark);font-size:15px;max-width:30ch}
.ftr ul li a,.ftr address a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--on-dark);font-size:15px;transition:color .2s}
.ftr ul li a:hover,.ftr address a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.ftr address{font-style:normal;color:var(--on-dark);font-size:15px;display:grid;gap:2px}
.ftr address > span{padding-block:10px}
.social{display:flex;gap:10px;margin-block-start:18px}
.social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease-out)}
.social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}
.social svg{width:18px;height:18px}
.nl p{color:var(--on-dark);font-size:15px;margin-block-end:12px}
.nl form{display:flex;flex-wrap:wrap;gap:8px}
.nl input{flex:1 1 180px;min-width:0;min-height:50px;padding-inline:18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-size:15px}
.nl input::placeholder{color:#b9babe}
.nl input:focus{outline:3px solid var(--accent);outline-offset:1px}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-block-start:40px;padding-block-start:22px;border-block-start:1px solid rgba(255,255,255,.12);font-size:14px;color:var(--on-dark)}

/* ---------- MOTION (only after JS adds .anim) ---------- */
.anim .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block-end:.12em;margin-block-end:-.12em}
.anim .rv-h .wi{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i) * 45ms)}
.anim .rv-h.in .wi{transform:none}
.anim .stg > *{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i) * 80ms)}
.anim .stg.in > *{opacity:1;transform:none}
.anim .clip{clip-path:inset(12% 12% 12% 12% round 30px);transition:clip-path 1.2s var(--ease-out)}
.anim .clip img{transform:scale(1.25);transition:transform 1.6s var(--ease-out)}
.anim .clip.in{clip-path:inset(0 0 0 0 round 30px)}
.anim .clip.in img{transform:none}
/* hero load-in */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker::before,.ticker::after{display:none}
  .ticker-track{width:auto;flex-wrap:wrap;justify-content:center}
  .ticker-set{flex-wrap:wrap;justify-content:center;gap:12px 28px;padding-inline:var(--gutter)}
  .ticker-set[aria-hidden="true"]{display:none}
}

/* ---------- motion diet (2026-10-05) ----------
   Fewer, calmer moves: word-by-word only on the page title (h1), short fades
   elsewhere, no floating blobs, no pulsing dots, no magnetic buttons, no
   parallax. Cheaper on low-end phones and easier on the eyes. */
.blob,.chooser-sec .glow{animation:none!important}
.kicker .pulse::after,.rail li.current .rail-dot::after{animation:none!important;opacity:0}
.anim .rv{transform:translateY(16px);transition-duration:.6s}
.anim .stg > *{transform:translateY(16px);transition-duration:.55s;transition-delay:calc(var(--i) * 45ms)}
.anim .rv-h:not(.split){opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.anim .rv-h:not(.split).in{opacity:1;transform:none}
/* endless decorative loops now run a few times and stop */
.anim .cert-wrap.in .cert::after,.anim .orbit,.anim .loc-media .pin,.anim .map .pin,.anim .status.open i,.anim .typing i,.anim .dash-t .live i,.anim .phx.now i{animation-iteration-count:3!important}

/* ===== polish.css: inlined here, last, so its rules win (the notes and GEA-UI-Rules.md cite it by this name) ===== */
/* ==========================================================================
   POLISH (2026-10-08): performance, spacing scale, clickable vs info-only.
   Loaded LAST on every page so these rules win.
   ========================================================================== */
/* ---------- performance (2026-10-08) ----------
   Measured while scrolling: the blurred background blobs and the blended
   grain caused most dropped frames. Blobs are already soft gradients, so the
   blur goes. Grain keeps its look without the costly blend mode. Buttons no
   longer each get their own GPU layer. */
.blob,.ph-bg .blob{filter:none!important;will-change:auto!important}
.blob.b3{background:radial-gradient(circle,rgba(207,58,39,.18),rgba(207,58,39,0) 70%)!important}
.grain{mix-blend-mode:normal!important}
.btn{will-change:auto!important}
/* small labels and buttons that sit on photos: a solid light background
   looks the same as frosted glass and costs nothing while scrolling */
.pc-media .lvl,.ladd,.ic,.kicker,.btn-ghost,.fact-card,.facts-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pc-media .lvl,.ladd:not([aria-pressed="true"]){background-color:rgba(255,255,255,.94)!important}
.kicker{background-color:rgba(255,255,255,.9)!important}
.fact-card,.facts-card{background-color:rgba(255,255,255,.95)!important}
/* card art: each card repaints on its own */
.clipbox{contain:paint}
/* phones and tablets: the sticky bars use a near-solid background instead of
   live blur, which is the most expensive effect while scrolling */
@media (max-width:999px),(hover:none){
  .hdr-in,.filterbar,.lbar,.la-tabs,.pnav,#pSave{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr.scrolled .hdr-in,.filterbar,.la-tabs,#pSave{background-color:rgba(255,255,255,.97)!important}
  .lbar,.pnav{background-color:#fff!important}
}

/* Fallback font sized like Poppins, so text does not jump when Poppins arrives */
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');font-weight:100 500;size-adjust:113%;ascent-override:92.9%;descent-override:31%;line-gap-override:8.8%}
@font-face{font-family:'Poppins Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold');font-weight:600 900;size-adjust:106%;ascent-override:99%;descent-override:33%;line-gap-override:9.4%}
:root{--font:'Poppins','Poppins Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}

/* ---------- spacing (2026-10-08) ----------
   One compact scale for every page. S grows with the screen: 32px on
   phones, about 40px on tablets, 56 to 64px on desktops. Between two sections there is
   always 2 x S of space (each section brings S above and below), whatever
   the background. A page header followed by a single body (FAQs, checkout,
   legal pages, 404) keeps 1 x S between them. */
:root{--sec:clamp(32px,2.4vw + 22px,64px);--head-gap:clamp(20px,2.2vw,36px)}
.ftr{padding-block-start:var(--sec)}
.faq-side .sec-head,.fp-side .sec-head{margin-block-end:var(--head-gap)}

/* ---------- clickable vs info-only (2026-10-08) ----------
   Clickable = rounded pill buttons (filled, or outlined with a border),
   pill filter chips, and cards that show an arrow. They react to hover.
   Info-only = small flat tags with square-ish corners (6px), no outline,
   no arrow, and they never react to hover. Never give an info label the
   pill shape. */
.kicker,.tag,.ptag,.skills li,.cr,.unis li,.pay .m,.vis-tags span,.pw,.b-tag,.status,.car-cap,.here,.badge,
.acas li,.marq-row span,.lvl,.cat,.uc-media .chip,.uc-media .lv,.ocard-tag,.start-cue,.la-meta-tag{
  border-radius:6px!important;box-shadow:none!important;cursor:default}
.kicker,.ptag,.skills li,.pay .m,.pw,.acas li,.marq-row span,.unis li,.vis-tags span{border-color:transparent!important;background-color:var(--tint)!important}
.b-tag{border-color:transparent!important}
.ptag.plain{background-color:var(--tint)!important}
.badge.solid{background:var(--tint-warm)!important;color:var(--accent-dark)!important}
.badge.line{box-shadow:none!important;background:var(--tint)!important}
a .kicker,a .tag,button .tag{cursor:pointer}
.uc-media .lv{background:#fff!important;color:var(--accent-dark)!important}
/* plain text links get an underline, so they never pass for normal text */
html .crumbs a,html .help a,html .terms a,html .la-p h3 a,html .toc a:not([aria-current]) b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(80,83,90,.45)}
html .crumbs a:hover,html .help a:hover,html .terms a:hover,html .la-p h3 a:hover{text-decoration-color:currentColor;color:var(--accent)}


/* ---------- page header: compact, and sized to the screen height (2026-10-08) ----------
   Laptops have short screens. The header now starts closer to the menu, the
   title also scales with screen height, and the picture on the right
   shrinks on shorter screens so the title, text and buttons fit on the
   first screen. */
html .page-hero{padding-block-start:calc(var(--hdr) + clamp(14px,2vw,30px))}
html .page-hero .crumbs ol{margin-block-end:6px}
html .page-hero h1{font-size:clamp(2.1rem,min(4.4vw,8.6vh),4.6rem)}
html .page-hero .lead{margin-block-start:18px}
html .page-hero .ctas{margin-block-start:24px}
@media (max-width:999px){
  .ph-grid>.ph-visual,.ph-grid>.ab-vis,.ph-grid>.uk-vis,.ph-grid>.org-vis,.ph-grid>.ic-vis,.ph-grid>.av,.ph-grid>.pv{zoom:.86}
}

/* ---------- page header: breadcrumb and label share one line (2026-10-08) ---------- */
@media (min-width:700px){
  html .page-hero .crumbs{display:inline-flex;vertical-align:middle;margin-inline-end:18px}
  html .page-hero .crumbs ol{margin-block-end:0}
}

/* ---------- full-screen page header (2026-10-08) ----------
   On desktops the header of every main page fills the screen exactly:
   nothing from the next section shows, and the header uses all the height
   it has. The script in hdrx.js adds .is-full and scales the content only
   when it would not fit. */
@media (min-width:1000px) and (min-aspect-ratio:1/1) and (hover:hover) and (pointer:fine){
  .page-hero.is-full{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block-end:clamp(20px,4vh,48px)}
  .page-hero.is-full>.wrap{width:100%}
}
/* tall desktop screens: use the extra height, a little bigger picture and text */
@media (min-width:1500px) and (min-height:880px) and (hover:hover) and (pointer:fine){
  .ph-grid>.ph-visual,.ph-grid>.ab-vis,.ph-grid>.uk-vis,.ph-grid>.org-vis,.ph-grid>.ic-vis,.ph-grid>.av,.ph-grid>.pv{zoom:1.1}
  html .page-hero .lead{font-size:1.3rem}
}
/* short desktop screens (laptops at 125 or 150% scaling): a slimmer menu bar leaves more room */
@media (min-width:1000px) and (max-height:700px){
  :root{--hdr:70px}
}

/* ---------- breadcrumb sits right under the menu (2026-10-08) ----------
   It has its own row at the top of the page header; the title block is
   centered in the space left below it. */
.page-hero .ph-top .crumbs ol{margin-block-end:0}
.page-hero .ph-top{margin-block-end:clamp(4px,1.2vh,14px)}
@media (min-width:1000px) and (min-aspect-ratio:1/1) and (hover:hover) and (pointer:fine){
  .page-hero.is-full{justify-content:flex-start}
  .page-hero.is-full>.ph-grid{flex:1;align-content:center}
}

/* ---------- one size for every section title (2026-10-08) ---------- */
:root{--h2:clamp(1.9rem,1.1rem + 2.3vw,3rem)}
.sec-head h2,.fp-side .sec-head h2,.aca-sec .sec-head h2,.aca-sec.is-pinned .sec-head h2,.close h2,.rel-head h2,.endband h2,.still h2,.p-txt h2,.xlink-txt h2{font-size:var(--h2)!important;line-height:1.08}

/* ---------- three title sizes for the whole site (2026-10-08) ----------
   h1  page header title (set above)
   h2  every section title, including program page parts, FAQ groups and
       the learner area: var(--h2)
   h3  sub-sections and large card titles: var(--h3)
   Legal pages use --h3 for their numbered parts (a document, not sections). */
:root{--h3:clamp(1.35rem,1.05rem + .9vw,1.85rem)}
.psec h2,.fq-gh h2,.la-h h2{font-size:var(--h2)!important;line-height:1.08;letter-spacing:-.03em}
.fstep-q,.lp-top h3,.topup h3,.b-card h3,.cta-tile b,.lx-panel h3,.opt h3,.wcard h3,.deliver h3,.enq-side h3,.amc h3,.plat h3,.wrow h3,.end h3,.loc-body h3,.prose h2{font-size:var(--h3)!important;line-height:1.2;letter-spacing:-.02em}
/* h4: titles inside cards, one size everywhere */
:root{--h4:clamp(1.05rem,.95rem + .3vw,1.2rem)}
.tl-step h3,.tl-step h4,.aca-body h3,.pc-body h3,.psec h3:not(.sub),.uc-body h3,.panel h3,.vc h3,.qs h3,article.pc h3,.sv-body h3,.rstep h3,.br h3,.sc h3{font-size:var(--h4)!important;line-height:1.3}
/* the short text under every section title */
.sec-head p{font-size:clamp(1rem,1.3vw,1.15rem)!important}
/* buttons: two sizes only, regular (52px) and small (44px) */
.btn:not(.btn-sm){min-height:52px!important;font-size:15px!important}

/* Odd last item in a two-column list spans the full row, so no hole is left */
@media (min-width:640px){.outs li:last-child:nth-child(odd){grid-column:1/-1}}

/* Academy "where to start" cards: leave room for the Add to list button so the label never hides under it */
.lhost.end .st-who{padding-inline-end:152px}
.st-who b{color:var(--ink)}

/* Innovation Centers map link on phones: "Directions" moves under the address instead of squeezing it */
@media (max-width:520px){.map{flex-wrap:wrap;row-gap:4px}.map>span:nth-child(2){flex:1;min-width:0}.map .go{flex-basis:100%;margin-inline-start:68px}}

/* Academies page header on phones: two photos in a row, then the facts card below them (no overlap) */
@media (max-width:640px){
  .page-hero .ph-visual:has(>.mosaic){min-height:0;display:grid;gap:16px}
  .page-hero .mosaic{position:relative;inset:auto;transform:rotate(-2deg);margin-inline:6px}
  .page-hero .mosaic .col:nth-child(2){margin-block-start:28px}
  .page-hero .mosaic figure:nth-child(n+2){display:none}
  .page-hero .facts-card{position:relative;inset:auto;width:100%;background:#fff}
}

/* Keyboard hint ("Press / to search") only where there is a keyboard */
@media (hover:none),(max-width:999px){.page-hero p.hint[aria-hidden="true"]{display:none}}

/* Contact, short laptop screens (under 780px tall): the "Quick answers" shortcuts step aside so the whole header still fits. FAQs stay one click away in the menu. */
@media (min-width:1000px) and (max-height:780px) and (hover:hover){.page-hero .quick{display:none}}

/* Contact form in the page header, short laptop screens: tighter inside spacing and a shorter message box,
   so the form is shown bigger (about 80% instead of 58% on a 1280x550 screen) */
@media (min-width:1000px) and (max-height:820px) and (hover:hover){
  .page-hero .form{padding:22px 26px}
  .page-hero .form .sub{margin-block:2px 12px}
  .page-hero .form .fset legend{margin-block-end:6px}
  .page-hero .form .frow+.frow,.page-hero .form .fset+.frow,.page-hero .form .frow+.ffield,.page-hero .form .ffield{margin-block-start:10px}
  .page-hero .form .fl textarea{min-height:84px}
  .page-hero .form .fsubmit{margin-block-start:14px}
}


/* ---------- QA pass, 9 Oct 2026 ---------- */
/* Text contrast (WCAG AA, 4.5:1 for small text) */
.root span.s{opacity:1!important}
.seg-b[aria-selected="true"] .n{background:#fff!important;color:var(--accent-dark)!important}
.status.open{color:var(--accent-dark)!important}
.lv-ring small,.step.cur span{opacity:1!important}
/* 404: the big number stays a faint watermark, also after the page-load animation */
.nf-num,.anim .page-hero.loaded .nf-num{opacity:.12!important;transform:none!important}

/* Log in, Create account, Reset password on short laptop screens: the photo follows the form's height
   and the form is a little tighter, so text stays full size and only a short scroll is needed */
@media (min-width:960px) and (max-height:820px){
  .lg-vis{min-height:0!important;align-self:stretch}
  .lg-card{padding:clamp(22px,2.4vw,32px) clamp(24px,2.8vw,36px)!important}
  .lg-card h1{font-size:clamp(1.8rem,2.5vw,2.3rem)!important}
  .lg-card .sub{margin-block:6px 14px!important}
  .lg-card .fld+.fld,.lg-card .two+.fld,.lg-card .fld+.two{margin-block-start:10px!important}
  .lg-card form>.btn{margin-block-start:14px!important}
  .lg-card .help{margin-block-start:8px!important}
  .lg-card .meter{margin-block-start:6px!important}
  .lg-card .rules{margin-block-start:6px!important;row-gap:2px!important}
}
/* UK Diplomas level explorer: the big level number sits in the empty top corner, not behind the price and button */
.lx-panel .wm{inset-block-end:auto!important;inset-block-start:-22px!important;inset-inline-end:-4px!important}
/* Page header: when the title has the red underline, the text below starts clear of it (same breathing room on every page) */
html .page-hero h1:has(.swoosh) ~ .lead{margin-block-start:calc(16px + .34 * clamp(2.1rem,min(4.4vw,8.6vh),4.6rem))}
/* Headlines break into even lines (no single word left alone on the last line); intro text avoids one-word last lines */
h1,h2,h3,.fstep-q{text-wrap:balance}
.lead,.sec-head p,.hero-copy p{text-wrap:pretty}
/* Innovation Centers value rows are links: on phones they keep their arrow too, so they read as clickable */
@media (max-width:859px){
  .wrow{grid-template-columns:minmax(0,1fr) 40px!important;column-gap:14px!important}
  .wrow .num,.wrow h3,.wrow p{grid-column:1}
  .wrow .ar{display:flex!important;grid-column:2;grid-row:1/span 3;align-self:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--accent)}
}
/* Learner area on phones: small action buttons never break their label over two lines */
.la-act .tl{white-space:nowrap;flex:1 1 auto}
/* Footer on phones: the Explore links sit in two columns and the blocks are closer, so the footer is about a third shorter */
@media (max-width:639px){
  .ftr-grid{gap:20px!important}
  .ftr nav[aria-label="Footer"] ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
}
/* Contact header form on short laptop screens with a mouse: the form keeps its size (about 90%) instead of shrinking.
   The form title moves to screen readers only (the page title already says it), and chips and fields are a bit slimmer. */
@media (min-width:1000px) and (max-height:700px) and (hover:hover) and (pointer:fine){
  .page-hero .form #f-title,.page-hero .form>form>.sub,.page-hero .form .sub{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important}
  .page-hero .form .opts-chips span{min-height:36px}
  .page-hero .form .fset legend{margin-block-end:6px}
  .page-hero .form .fl input{min-height:50px;padding-block:20px 6px}
}
/* Contact form: the topic chips never touch the first row of fields (the hidden organization note sits between them) */
#cForm .fset{margin-block-end:16px}
#cForm .fset+.note{margin-block-start:0!important}
#cForm .note{margin-block-end:16px}
@media (min-width:1000px) and (max-height:820px){#cForm .fset,#cForm .note{margin-block-end:10px}}

/* ---------- No lone item on the last row ---------- */
/* Partner logos: rows are centered, so a short last row looks intended */
.plogos{display:flex!important;flex-wrap:wrap;justify-content:center}
.plogos>li{flex:0 1 calc((100% - 12px)/2)}
@media (min-width:640px){.plogos>li{flex-basis:calc((100% - 36px)/4)}}
@media (min-width:1100px){.plogos>li{flex-basis:calc((100% - 84px)/8)}}
/* Tablets: two columns, and an odd last card takes the full row */
@media (min-width:600px) and (max-width:999px){
  .uk-facts,.la-att{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .uk-facts>:last-child:nth-child(odd),.la-att>:last-child:nth-child(odd){grid-column:1/-1}
  #more .pgrid>:nth-child(n+3){display:none}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Footer: Explore links fill two columns top to bottom on phones; bottom row lines up */
@media (max-width:639px){.ftr nav[aria-label="Footer"] ul{grid-template-rows:repeat(4,auto);grid-auto-flow:column}}
.ftr-bot{align-items:center}
/* Academy pages, "Not sure where to start?": the "Start with" rows line up across the three cards */
@media (min-width:860px){
  .starts>div{display:grid!important;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .starts .st{grid-row:1/span 2;display:grid;grid-template-rows:subgrid;row-gap:0}
}
/* Homepage path finder: the "Start here" cue sits in the bottom-left corner of the picture, clear of the label and the arrow */
.ocard .start-cue{inset-block-start:auto!important;inset-block-end:12px!important;inset-inline-end:auto!important;inset-inline-start:12px!important}
/* Homepage hero on phones: the red underline never touches the chip that wraps under the title line */
@media (max-width:640px){.hero .h-line{row-gap:.42em}}
/* Academy pages, "Other academies": a tidy grid on desktop (no sideways scrolling with a mouse); swipe row on phones and tablets */
@media (min-width:1000px){
  .others{grid-auto-flow:row!important;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto!important;overflow:visible!important;padding-block-end:0!important}
  .others .oa{aspect-ratio:1/1}
}
/* Card titles: the remaining cards use the same card-title size as everywhere else */
.la-p h3,.la-uk-card h3,.pl .bd>b,.opt>b,.eq-box>b,.masters b,.root b,.dlist .di b{font-size:var(--h4)!important;line-height:1.3}
/* Log in, Create account, Reset password: the card title keeps its own size (the big page-title size is for page headers) */
html .page-hero .lg-card h1{font-size:clamp(2rem,2.8vw,2.6rem);line-height:1.08}

/* ---------- Page header pictures on short laptop screens ----------
   The picture column is capped to the space below the menu, so it no longer has to be shrunk as a whole.
   Text in the floating info cards stays at full size (about 12px or more instead of 7 to 9px on a 1280x560 screen). */
@media (min-width:1000px) and (max-height:700px) and (hover:hover){.page-hero{--capH:max(320px,calc(100svh - 170px))}}
@media (min-width:1000px) and (min-height:701px) and (max-height:820px) and (hover:hover){.page-hero{--capH:calc(100svh - 195px)}}
@media (min-width:1000px) and (max-height:820px) and (hover:hover){
  .page-hero .ph-grid>.ph-visual{min-height:min(clamp(380px,40vw,520px),var(--capH))!important}
  .page-hero .ph-grid>.ab-vis,.page-hero .ph-grid>.org-vis,.page-hero .ph-grid>.ic-vis{min-height:min(clamp(420px,44vw,560px),var(--capH))!important}
  .page-hero .ph-grid>.uk-vis{min-height:min(clamp(400px,42vw,540px),var(--capH))!important}
  .page-hero .ph-grid>.av{min-height:min(clamp(380px,40vw,540px),var(--capH))!important}
  .page-hero .ph-grid>.pv{min-height:min(clamp(340px,36vw,480px),var(--capH))!important}
  .page-hero .mosaic{inset-inline-start:auto!important;width:min(88%,calc((var(--capH) - 62px) / 1.75 * 2 + 14px))}
}
/* About: on short screens the three photos are sized by the height of the picture area, so they stay inside it */
@media (min-width:1000px) and (max-height:820px) and (hover:hover){
  .page-hero .ab-vis .card-ph{width:auto!important}
  .page-hero .ab-vis .card-ph.p1{height:92%}
  .page-hero .ab-vis .card-ph.p2{height:56%}
  .page-hero .ab-vis .card-ph.p3{height:40%}
}

/* UK level page on phones: the ladder bars are too narrow for the level name; the bar shows only "L5" (the name is in the page title) */
@media (max-width:520px){.ladder .step.cur>span:not(.here){display:none}}
/* Learner area: program title links keep a 44px tap area at the card-title size */
.la-p h3{line-height:1.35!important}
html .la-p h3 a{padding-block:11px;margin-block:-11px}

/* ---------- Second review round ---------- */
/* Create account on short screens: the two name fields stay on one line */
@media (min-width:960px) and (max-height:820px){.lg-card .two .fld+.fld{margin-block-start:0!important}}
/* FAQs header card on short laptop screens: three questions instead of five, so nothing has to shrink */
@media (min-width:1000px) and (max-height:700px) and (hover:hover){.ask-card .bubbles>li:nth-child(n+4),.ask-card .typing{display:none}}
@media (min-width:1000px) and (min-height:701px) and (max-height:820px) and (hover:hover){.ask-card .bubbles>li:nth-child(n+5){display:none}}
/* Organizations cohort card: the small caption in the ring is readable */
.ring span small{font-size:12px!important}
/* Checkout and learner settings: titles at the card-title size */
.co-item h3,.la-card>h3{font-size:var(--h4)!important;line-height:1.3}


/* ---------- red bands: readable text and a visible focus ring (2026-10-10) ----------
   White text on the brand red is 4.9:1, so it passes only at full strength
   with nothing light behind it: no opacity on the text, and the soft glow
   is a shade now, not a light. The focus ring is white on red (a red ring
   on a red band could not be seen). */
html .endband p,html .still p,html .start p,html .enq-side p{opacity:1!important}
html .endband::before,html .still::before,html .start::before,html .enq-side::before{background:radial-gradient(circle,rgba(35,38,40,.16),transparent 62%)!important}
html .still::after{color:var(--ink)!important;opacity:.1!important}
html .endband :focus-visible,html .still :focus-visible,html .start :focus-visible,html .enq-side :focus-visible,html .close :focus-visible{outline-color:#fff!important}
@media (prefers-reduced-motion:reduce){.hdr{transition:none!important}}

/* newsletter thank-you line (footer) */
.nl .nl-ok{margin:0;color:#fff;font-size:14.5px;font-weight:500}
.nl .nl-ok:not(:empty){margin-block-start:12px}

/* ---------- Third review round (2026-10-10) ---------- */
/* Hidden means hidden, whatever display a component sets (owned programs hide Add to list this way) */
[hidden]{display:none!important}
/* Three clear title sizes: section titles stay well below the page title, also on short laptop screens
   (1280x560: h1 48px, h2 31px, h3 25px) and on tablets (768: h1 40px, h2 30px) */
:root{--h2:clamp(1.6rem,min(.9rem + 2vw,5.6vh),2.75rem);--h3:clamp(1.25rem,min(1rem + .7vw,4.4vh),1.6rem)}
@media (min-width:600px) and (max-width:999px){
  html .page-hero h1{font-size:clamp(2.4rem,5.2vw,3.2rem)}
  html .page-hero h1.long{font-size:clamp(2.1rem,4.6vw,2.9rem)}
}
/* Before the page script runs (slow connections), the fixed header already gets its background once the page
   is scrolled, so text never runs under the logo. The script takes over with .hdr-ready. */
@supports (animation-timeline:scroll()){
  html:not(.hdr-ready) .hdr-in{animation:hdrbg linear both;animation-timeline:scroll(root);animation-range:0 40px}
  @keyframes hdrbg{from{background-color:rgba(255,255,255,0)}to{background-color:rgba(255,255,255,.97)}}
}
/* Full-screen page header from the first paint (the script used to add it later, which moved what was on screen) */
@media (min-width:1000px) and (min-aspect-ratio:1/1) and (hover:hover) and (pointer:fine){
  .page-hero:not(.hero):has(.ph-visual,.ab-vis,.uk-vis,.org-vis,.ic-vis,.av,.pv,.ladder,.ph-grid>.form){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-block-end:clamp(20px,4vh,48px)}
  .page-hero:not(.hero):has(.ph-visual,.ab-vis,.uk-vis,.org-vis,.ic-vis,.av,.pv,.ladder,.ph-grid>.form)>.wrap{width:100%}
  .page-hero:not(.hero):has(.ph-visual,.ab-vis,.uk-vis,.org-vis,.ic-vis,.av,.pv,.ladder,.ph-grid>.form)>.ph-grid{flex:1;align-content:center}
}
/* No JavaScript: the menu links are already listed in the header, so the Menu button (which needs JS) goes */
html:not(.js) .menu-btn{display:none!important}
/* The list bar never hides the item you are on: keyboard focus and anchors stop above it, at every width */
html:has(body.lbar-on){scroll-padding-block-end:104px}
/* Buttons on the 52 / 44 scale only */
.ladd.wide{min-height:52px}
.lbar .btn{min-height:44px}
/* Add to list on a card is a button: it gets a border, so it does not look like the level tag */
.lhost>.ladd{border-color:var(--line)!important}
.lhost>.ladd.is-on,.lhost>.ladd[aria-pressed="true"]{border-color:var(--accent)!important}
/* Search: the dialog always fits the screen, so the last result is never cut */
@media (min-width:641px){dialog.srch{max-height:min(640px,calc(100dvh - clamp(12px,8vh,90px) - 12px))}}
/* No live blur on small labels and bars (it costs the most while scrolling) */
.ptag,.pv-chip,.mbar,.lhost>.ladd,.kicker,.lvl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mbar{background:#fff!important}
/* Right-to-left: paddings follow the reading direction */
.ptag{padding-block:4px!important;padding-inline:6px 14px!important}
.ptag.plain{padding-inline:12px 14px!important}
.acct summary{padding-block:4px;padding-inline:4px 8px}
.srch-top{padding-block:10px;padding-inline:18px 10px}
@media (max-width:640px){.acct summary{padding:4px}}

/* Fourth review round (2026-10-10) ------------------------------------------------ */
/* filter chips: a focused chip scrolls clear of the edge fade */
.chips{scroll-padding-inline:8px}
@media (max-width:760px){.chips{scroll-padding-inline:8px 18%}}
/* fact items (homepage UK block, UK Diplomas header) are info only: no border.
   White on a tinted section, tint on a white one */
.fi{border-color:transparent!important}
.page-hero .fi{background:var(--tint)!important}
@media (max-width:640px){.uk-facts{border-color:transparent!important}}

/* form fields: the border shows at 3:1 or more on white and on the grey tint (WCAG 1.4.11).
   "html body" lifts these above each page's own field rule, while focus and error states
   (more specific) keep their red border */
:root{--field-line:#868a8b}
html body .fl input,html body .fl textarea,html body .search input,html body .sel select,html body .wz-in{border-color:var(--field-line)}
html body .wz-opt .wz-dot{border-color:var(--field-line)}
html body .nl input{border-color:rgba(255,255,255,.45)}
/* filter chips: room inside the scrolling row for the focus ring (it was clipped top and bottom), and the
   edge fade only while more chips are hidden (.more, set by the shared script) */
html body .chips{padding:6px;margin:-6px}
@media (max-width:760px){
  html body .chips{-webkit-mask-image:none;mask-image:none}
  html body .chips.more{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  html[dir="rtl"] body .chips.more{-webkit-mask-image:linear-gradient(270deg,#000 85%,transparent);mask-image:linear-gradient(270deg,#000 85%,transparent)}
}
/* FAQs on phones and tablets: the pinned topic bar is solid white (no frosted glass), and on phones it moves
   up when the header steps aside, like the section menu on program pages */
@media (max-width:999px){html body .fq-side{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;transition:inset-block-start .35s var(--ease-out)}}
@media (max-width:759px){html body .hdr.tuck~main .fq-side{inset-block-start:0}}
/* a titled block inside a program section ("Skills you'll practice") is a sub-title: --h3 */
html body .psec h3.sub{font-size:var(--h3)}

/* ================= Phones: shorter pages, clear wayfinding (2026-10-13) =================
   Goal: each main page fits in about 8 phone screens (390 x 844) and long pages have a section menu,
   so visitors always see where they are and what comes next. Checked by the page-length test. */

/* ---------- Section menu (.pnav): one row of section links under the header, pinned while you read.
   The shared script underlines the section you are in. Used on program and programme pages, UK Diplomas
   and academy pages. ---------- */
.pnav{position:sticky;z-index:20;inset-block-start:78px;background:#fff;border-block:1px solid var(--line);transition:inset-block-start .35s var(--ease-out)}
.hdr.tuck~main .pnav{inset-block-start:0}   /* phones: the header steps aside while the menu is pinned */
.pnav a:focus-visible{outline-offset:-3px}
.pnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pnav ul::-webkit-scrollbar{display:none}
.pnav a{position:relative;display:inline-flex;align-items:center;min-height:52px;padding-inline:14px;white-space:nowrap;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .25s}
.pnav a::after{content:"";position:absolute;inset-inline:14px;inset-block-end:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease-out)}
.pnav a:hover{color:var(--ink)}
.pnav a[aria-current="true"]{color:var(--ink);font-weight:600}
.pnav a[aria-current="true"]::after{transform:scaleX(1)}
@media (max-width:760px){
  .pnav ul{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  [dir="rtl"] .pnav ul{-webkit-mask-image:linear-gradient(270deg,#000 85%,transparent);mask-image:linear-gradient(270deg,#000 85%,transparent)}
  .pnav ul.end{-webkit-mask-image:none;mask-image:none}
}
/* anchors and keyboard focus stop below the header (78px) and the pinned menu (54px) */
html:has(.pnav){scroll-padding-block-start:140px}
@media (max-width:760px){html:has(.pnav){scroll-padding-block-start:64px}}
@media (max-height:500px){.pnav{position:static}html:has(.pnav){scroll-padding-block-start:calc(var(--hdr) + 8px)}}
@media (prefers-reduced-motion:reduce){.pnav,.pnav a::after{transition:none}}

/* ---------- Swipe rows (.mswipe): cards that sit side by side on a computer become one row you swipe
   through on a phone, instead of a long stack. The next card peeks in, and dots under the row show where
   you are (tap a dot to go to that card). ---------- */
.mdots{display:none}
@media (max-width:599px){
  html body .mswipe{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scroll-padding-inline:var(--gutter);grid-template-columns:none}
  html body .mswipe::-webkit-scrollbar{display:none}
  html body .mswipe>*{flex:0 0 86%;width:auto;min-width:0;max-width:none;scroll-snap-align:start;margin:0}
  html body .mswipe>[aria-hidden="true"]{display:none}
  .mdots{display:flex;justify-content:center;gap:0;margin-block:-2px -6px}
  .mdots button{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}   /* 44px to tap, the dot itself is small */
  .mdots button::before{content:"";width:8px;height:8px;border-radius:4px;background:#b9babe;transition:width .3s var(--ease-out),background-color .3s}
  .mdots button[aria-current="true"]::before{width:22px;background:var(--accent)}
  .mdots button:focus-visible{outline:2px solid var(--accent);outline-offset:0}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.mdots button::before{transition:none}}

/* ---------- Program cards (.pc): clean layout ----------
   The level and Add to list sit in the top corners of the picture. Under it: the title (3 lines at most),
   one quiet line when there is one (the academy, or the study time), then at the bottom the issuer (two lines at most) with the arrow.
   No footer bar, no divider. Add to list is a round button (a 36px circle drawn inside a 44px button);
   its words show on hover and are read out. */
html body .pc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;align-items:start;column-gap:12px;row-gap:0;padding:18px 20px 18px}
html body .pc-body>h3{grid-column:1/-1;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
html body .pc-meta{grid-column:1/-1;grid-row:2;min-width:0;flex-wrap:nowrap;gap:10px;font-size:13px;color:var(--muted)}
html body .pc-meta:has(>span:not(.lvl)){margin-block-start:6px}
html body .pc-meta>span:not(.lvl){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .pc-by{grid-column:1;grid-row:4;align-self:center;min-width:0;margin-block-start:16px;font-size:14px}
html body .pc-by>span{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.35}
html body .pc-foot{grid-column:2;grid-row:4;align-self:center;min-height:0;margin:16px 0 0;padding:0;border:0}
html body .pc-meta .lvl{position:absolute;z-index:2;inset-block-start:16px;inset-block-end:auto;inset-inline-start:14px;inset-inline-end:auto;display:inline-flex;padding:8px 10px 8px 9px;background:#fff;font-size:12px;font-weight:600;color:var(--ink);line-height:1}
html body .pc-media .fg,html body .pc-media .pc-mark{height:68%;translate:0 12%}
html body .lhost>.pc+.ladd{inset-block-start:8px;inset-block-end:auto;inset-inline-start:auto;inset-inline-end:8px;min-height:0;height:44px;padding:0 13px;gap:0;isolation:isolate;background-color:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)}
html body .lhost>.pc+.ladd::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 16px -10px rgba(35,38,40,.5);transition:background-color .25s,box-shadow .25s}
html body .lhost>.pc+.ladd svg{width:18px;height:18px}
html body .lhost>.pc+.ladd .lt{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease-out),opacity .2s,margin .35s var(--ease-out)}
html body .lhost>.pc+.ladd:hover .lt,html body .lhost>.pc+.ladd:focus-visible .lt{max-width:120px;opacity:1;margin-inline-start:6px}
html body .lhost>.pc+.ladd:hover{color:var(--accent)}
html body .lhost>.pc+.ladd:hover::before{box-shadow:0 0 0 1px var(--accent),0 6px 16px -10px rgba(35,38,40,.5)}
html body .lhost>.pc+.ladd[aria-pressed="true"]{color:#fff}
html body .lhost>.pc+.ladd[aria-pressed="true"]::before{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html body .lhost>.pc+.ladd[aria-pressed="true"]:hover::before{background:var(--accent-dark);box-shadow:0 0 0 1px var(--accent-dark)}
@media (prefers-reduced-motion:reduce){html body .lhost>.pc+.ladd .lt{transition:none}}

/* Program cards on phones: picture on the left, text on the right. The level moves into the quiet line,
   Add to list sits on the picture's corner (a 34px circle drawn inside a 44px button), the arrow goes (the whole card opens the program). */
@media (max-width:599px){
  html body .pc{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px;border-radius:20px}
  html body .pc-media{width:84px;aspect-ratio:1;border-radius:14px;overflow:hidden}
  html body .pc-media .clipbox{border-radius:14px}
  html body .pc-media .fg{height:100%;translate:none;border-radius:0;box-shadow:none}
  html body .pc-media .pc-mark{height:74%;translate:none;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
  html body .pc-body{padding:0;grid-template-rows:auto auto auto 1fr;row-gap:5px;min-height:100%}
  html body .pc h3{font-size:1rem}
  html body .pc-by{grid-column:1/-1;grid-row:2;align-self:start;margin:0;font-size:13px}
  html body .pc-meta,html body .pc-meta:has(>span:not(.lvl)){grid-row:3;margin-block-start:2px}
  html body .pc-meta .lvl{position:static;padding:0;border-radius:0;background:none;box-shadow:none;font-size:13px;color:var(--ink-2)}
  html body .pc-foot{display:none}
  html body .pc-x{display:none}
  html body .lhost>.pc+.ladd{inset-block-start:65px;inset-inline-start:65px;inset-inline-end:auto;width:44px;padding:0;justify-content:center}
  html body .lhost>.pc+.ladd::before{inset:5px}
  html body .lhost>.pc+.ladd svg{width:16px;height:16px}
  html body .lhost>.pc+.ladd .lt{max-width:0!important;opacity:0!important;margin:0!important}
}

/* ---------- UK programme cards on phones: level pages (.uc) and "at other levels" (.lc) ---------- */
@media (max-width:599px){
  html body .ugrid .uc{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px;border-radius:20px}
  html body .ugrid .uc-media{width:84px;aspect-ratio:1;border-radius:14px;min-height:0}
  html body .ugrid .uc-media::after,html body .ugrid .uc-media .lv,html body .ugrid .uc-media .chip{display:none}
  html body .ugrid .uc-body{padding:0;gap:6px}
  html body .ugrid .uc h3{font-size:1rem}
  html body .ugrid .uc p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  html body .ugrid .uc-foot{padding-block-start:10px}
  html body .lc{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start;padding:12px;border-radius:18px}
  html body .lc-img{grid-column:1;grid-row:1/span 4;width:76px;margin:0;aspect-ratio:1;border-radius:12px}
  html body .lc .lc-img .lv{display:none}
  html body .lc>:not(.lc-img){grid-column:2}
  html body .lc .lc-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
}

/* ---------- Footer on phones: logo and social links share a row, phone and email share a row ---------- */
@media (max-width:639px){
  html body .ftr{padding-block-start:44px}
  .ftr .brand{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
  .ftr .brand .logo{grid-column:1;grid-row:1}
  .ftr .brand .social{grid-column:2;grid-row:1;margin:0;gap:8px}
  .ftr .brand p{grid-column:1/-1;margin-block-start:10px}
  .ftr h2{min-height:40px}
  .ftr address{grid-template-columns:auto auto;justify-content:start;column-gap:24px}
  .ftr address>span{grid-column:1/-1;padding-block:4px 0}
  html body .ftr-bot{margin-block-start:24px}
}
/* ---------- Cross-link cards ("Want a formal qualification?", "Want to build a skill in months instead?"):
   no photo on phones, the words and the button are the point ---------- */
@media (max-width:599px){.xlink-img{display:none}}
/* ---------- Partner logos on phones: three to a row ---------- */
@media (max-width:599px){.plogos>li{flex-basis:calc((100% - 24px)/3)}}
@media (max-width:599px){html body .plogos li{min-width:0;padding:12px 4px 10px;gap:6px;border-radius:16px}html body .plogos span{font-size:11.5px;overflow-wrap:anywhere}html body .plogos img{width:40px;height:40px}}
/* ---------- Header buttons on phones: side by side when both fit, full width when they wrap ---------- */
@media (max-width:599px){
  html body .page-hero .ctas{gap:10px}
  html body .page-hero .ctas .btn{flex:1 1 auto;justify-content:center;padding-inline:18px}
}
/* ---------- Step timelines (.tl) on phones: smaller numbers, closer steps ---------- */
@media (max-width:599px){
  html body .tl::before,html body .tl::after{inset-block-start:20px;inset-block-end:40px;inset-inline-start:19px}
  html body .tl-step{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding-block-end:18px}
  html body .tl-dot{width:40px;height:40px;font-size:13px}
  html body .tl-step h3{margin-block-start:8px;font-size:16px}
  html body .tl-step.on .tl-dot{box-shadow:0 0 0 5px rgba(207,58,39,.14)}
}
/* Section menu on About, For Organizations, Innovation Centers and Academies: phones and tablets only. On a
   computer these pages are short enough, and the header plus a second pinned bar would take a quarter of a
   1280 x 560 laptop screen. */
@media (min-width:1000px){.pnav.m-only{display:none}html:has(.pnav.m-only){scroll-padding-block-start:calc(var(--hdr) + 8px)}}
/* Scrolled header: one solid bar across the full width, from the top of the screen down, so no page content
   shows above or beside it (2026-10-23). The bar is a band behind the header; the inner pill drops its own
   outline and shadow so it reads as one bar. Same height as before (80px), so the sticky bars below still meet it. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;box-shadow:0 1px 0 rgba(35,38,40,.07),0 12px 28px -22px rgba(35,38,40,.45);opacity:0;transition:opacity .3s var(--ease-out);pointer-events:none}
html body .hdr.scrolled::before{opacity:1}
html body .hdr.scrolled{padding-block:5px}
html body .hdr.scrolled .hdr-in{border-color:transparent;box-shadow:none;background-color:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
@supports (animation-timeline:scroll()){
  html:not(.hdr-ready) .hdr::before{animation:hdrband linear both;animation-timeline:scroll(root);animation-range:0 40px}
  @keyframes hdrband{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.hdr::before{transition:none}}


/* ================= FOR ORGANIZATIONS PAGE ================= */
.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
/* ---------- page hero ---------- */
.page-hero{position:relative;padding-block:calc(var(--hdr) + clamp(28px,4vw,56px)) var(--sec);overflow:hidden;overflow:clip;isolation:isolate}
.ph-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--tint-warm) 55%,#fff 100%);-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
.ph-grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:1000px){.ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-block-end:18px}
.crumbs a{color:var(--ink-2);text-decoration:none;display:inline-flex;min-height:44px;min-width:44px;align-items:center}
.crumbs a:hover{color:var(--accent)}
.crumbs li+li::before{content:"";display:inline-block;width:6px;height:6px;border-block-start:1.5px solid currentColor;border-inline-end:1.5px solid currentColor;transform:rotate(45deg);margin-inline-end:8px;opacity:.6}
[dir="rtl"] .crumbs li+li::before{transform:rotate(-45deg)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.04;letter-spacing:-.045em;font-weight:700}
.ph-hl{position:relative;color:var(--accent);white-space:nowrap}
.ph-hl .swoosh{position:absolute;inset-inline:-1%;inset-block-end:-.14em;width:102%;height:.3em;overflow:visible}
.swoosh path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;opacity:.85}
.page-hero .lead{margin-block-start:24px;font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--ink-2);max-width:44ch}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:30px}
.page-hero .ctas .btn{min-height:54px;padding-inline:28px}

.seg{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:var(--tint);border:1px solid var(--line);isolation:isolate;overflow:hidden}
.seg-b{position:relative;z-index:1;min-height:44px;padding-inline:20px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);transition:color .35s}
.seg-b[aria-selected="true"]{color:#fff}
.seg-b .n{min-width:28px;padding:2px 8px;border-radius:999px;background:rgba(35,38,40,.07);font-size:12.5px;font-variant-numeric:tabular-nums;transition:background-color .35s}
.seg-b[aria-selected="true"] .n{background:rgba(255,255,255,.22)}
.seg-pill{position:absolute;z-index:0;inset-block:5px;inset-inline-start:0;width:var(--w,0);border-radius:999px;background:var(--accent);box-shadow:0 6px 14px -8px rgba(207,58,39,.7);transform:translateX(var(--x,0));transition:transform .5s var(--ease-out),width .5s var(--ease-out)}
@media (max-width:560px){.seg{display:flex;width:100%}.seg-b{flex:1 1 0;justify-content:center;padding-inline:10px}}
.page-hero h1{font-size:clamp(2.3rem,3.9vw,3.9rem)}

/* ---------- hero visual: photo + live-style dashboard ---------- */
.org-vis{position:relative;min-height:clamp(420px,44vw,560px)}
.org-photo{position:absolute;inset:0 0 90px 16%;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(-2deg)}
.org-photo img{width:100%;height:100%;object-fit:cover}
.org-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(207,58,39,0) 50%,rgba(207,58,39,.3))}
.dash{position:absolute;z-index:2;inset-inline-start:0;inset-block-end:0;width:min(100%,400px);padding:18px;border-radius:26px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 60px -28px rgba(0,0,0,.42)}
.dash-t{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block-end:14px}
.dash-t b{font-size:15px;font-weight:600}
.dash-t .live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dash-t .live i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(207,58,39,.5)}
.anim .dash-t .live i{animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(207,58,39,.45)}80%,100%{box-shadow:0 0 0 9px rgba(207,58,39,0)}}
.dash-body{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.ring{position:relative;width:110px;height:110px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .bgc{stroke:var(--tint-warm)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:calc(283 - 283 * var(--v,0))}
.ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:22px;line-height:1}
.ring span small{font-size:10.5px;font-weight:600;color:var(--muted);margin-block-start:4px;letter-spacing:.04em}
.kpis{display:grid;gap:8px}
.kpi{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px;border-radius:12px;background:var(--tint)}
.kpi span{font-size:12.5px;color:var(--ink-2)}
.kpi b{font-size:16px;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:5px;height:44px;margin-block-start:14px}
.spark i{flex:1;border-radius:5px 5px 3px 3px;background:#f3c9c1;transform-origin:bottom}
.spark i:last-child{background:var(--accent)}
.dash-note{margin-block-start:10px;font-size:11.5px;color:var(--muted)}
.anim .page-hero .org-photo{clip-path:inset(100% 0 0 0 round 32px);transition:clip-path 1.2s var(--ease-out)}
.anim .page-hero .org-photo img{transform:scale(1.2);transition:transform 1.6s var(--ease-out)}
.anim .page-hero.loaded .org-photo{clip-path:inset(0 0 0 0 round 32px)}
.anim .page-hero.loaded .org-photo img{transform:none}
.anim .page-hero .dash{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out) .6s,transform .9s var(--ease-out) .6s}
.anim .page-hero.loaded .dash{opacity:1;transform:none}
.anim .page-hero .ring .fg{transition:stroke-dashoffset 1.6s var(--ease-out) 1s}
.anim .page-hero:not(.loaded) .ring .fg{stroke-dashoffset:283}
.anim .page-hero .spark i{transform:scaleY(0);transition:transform .8s var(--ease-out)}
.anim .page-hero.loaded .spark i{transform:none}
@media (max-width:999px){.org-vis{min-height:clamp(440px,100vw,580px)}.org-photo{inset:0 0 150px 8%}}
@media (max-width:520px){.org-photo{inset-inline-start:0}.dash{width:100%}.dash-body{grid-template-columns:96px minmax(0,1fr)}.ring{width:96px;height:96px}}

/* ---------- value bento ---------- */
.vgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.vgrid{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto}.vgrid>.rv:first-child{grid-row:span 2}.vgrid>.rv:last-child{grid-column:span 2}}
.vgrid>.rv,.pgrid>.rv{display:flex;min-width:0}
.vgrid>.rv>*,.pgrid>.rv>*{flex:1;min-width:0}
.anim .vgrid>.rv,.anim .pgrid>.rv{transition-delay:var(--d,0s)}
.vc{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,30px);border-radius:28px;background:#fff;border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:border-color .3s,box-shadow .5s,transform .6s var(--ease-out)}
.vc .ic{width:52px;height:52px;border-radius:15px;background:var(--tint-warm);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-block-end:6px;transition:background-color .35s,color .35s,transform .5s var(--ease-out)}
.vc .ic svg{width:25px;height:25px}
.vc h3{font-size:1.22rem;line-height:1.25;letter-spacing:-.015em}
.vc p{color:var(--ink-2)}
.vc.wide{background:var(--tint)}
.acas{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px}
.acas li{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2);transition:border-color .3s,color .3s}
.marq{position:relative;overflow:hidden;margin-block:auto 0;padding-block-start:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-row{display:flex;gap:10px;width:max-content}
.marq-row+.marq-row{margin-block-start:10px}
.marq-row span{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14.5px;white-space:nowrap}
.anim .marq-row{animation:marq 28s linear infinite}
.anim .marq-row.rev{animation-direction:reverse;animation-duration:34s}
.marq:hover .marq-row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
[dir="rtl"] .anim .marq-row{animation-name:marqR}
@keyframes marqR{to{transform:translateX(50%)}}
.mini-bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-block-start:auto;padding-block-start:10px}
.mini-bars i{flex:1;border-radius:6px 6px 3px 3px;background:#f3c9c1;transform-origin:bottom;transition:transform .9s var(--ease-out)}
.mini-bars i:nth-child(6){background:var(--accent)}
.anim .vc .mini-bars i{transform:scaleY(.08)}
.anim .rv.in .mini-bars i{transform:none}
.anim .rv.in .mini-bars i:nth-child(2){transition-delay:.08s}.anim .rv.in .mini-bars i:nth-child(3){transition-delay:.16s}.anim .rv.in .mini-bars i:nth-child(4){transition-delay:.24s}.anim .rv.in .mini-bars i:nth-child(5){transition-delay:.32s}.anim .rv.in .mini-bars i:nth-child(6){transition-delay:.4s}
.vc.photo{color:#fff;border:0;min-height:260px;justify-content:flex-end}
.vc.photo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.vc.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.78))}
.vc.photo p{color:#ececef}
.vc.photo .ic{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- audience switch ---------- */
.fit-head{display:grid;gap:18px 56px;grid-template-columns:minmax(0,1fr);align-items:end;margin-block-end:var(--head-gap)}
@media (min-width:1100px){.fit-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.fit-head .sec-head{margin:0;max-width:none}
.fit-head h2{text-wrap:balance;max-width:16ch}
.fit-side{display:grid;gap:16px;justify-items:start;padding-block-end:6px}
.fit-side p{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink-2);max-width:40ch}
html:not(.js) .fit-side .seg{display:none}
.seg-b{min-height:52px;padding-inline:22px;font-size:15px;white-space:nowrap}
.seg-b .sh{display:none}
@media (max-width:560px){.seg-b .f{display:none}.seg-b .sh{display:inline}.seg-b{padding-inline:12px}}
.seg-b svg{width:19px;height:19px;flex-shrink:0}
.aud{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.aud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:stretch}}
.aud-panel[hidden]{display:none}
.aud-panel+.aud-panel{margin-block-start:40px}
.js .aud-panel+.aud-panel{margin-block-start:0}
html:not(.js) .aud-panel::before{content:attr(data-label);display:block;font-weight:700;font-size:1.3rem;margin-block-end:14px}
.qs{position:relative;border-radius:30px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2.6vw,28px);isolation:isolate}
.qs>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.qs::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(35,38,40,.05) 0%,rgba(35,38,40,.25) 40%,rgba(35,38,40,.72) 100%)}
.qs h3{align-self:flex-start;margin-block-end:auto;padding:10px 16px;border-radius:14px;background:var(--accent);color:#fff;font-size:1.05rem;letter-spacing:-.01em;box-shadow:0 14px 28px -14px rgba(207,58,39,.8)}
.qs .bubbles{margin-block-start:40px}
.bubbles{display:grid;gap:10px;justify-items:start}
.bub{position:relative;max-width:92%;padding:12px 16px 12px 44px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:14.5px;color:var(--ink);box-shadow:0 12px 24px -16px rgba(0,0,0,.6)}
[dir="rtl"] .bub{border-radius:18px 18px 6px 18px}
.bub::before{content:"?";position:absolute;inset-inline-start:12px;inset-block-start:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--tint-warm);color:var(--accent-dark);font-size:13px;font-style:normal;font-weight:700;line-height:22px;text-align:center}
.bub:nth-child(even){justify-self:end;border-radius:18px 18px 6px 18px}
.anim .aud-panel .bub{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.anim .aud-panel.show .bub{opacity:1;transform:none}
.anim .aud-panel.show .bub:nth-child(2){transition-delay:.12s}.anim .aud-panel.show .bub:nth-child(3){transition-delay:.24s}.anim .aud-panel.show .bub:nth-child(4){transition-delay:.36s}.anim .aud-panel.show .bub:nth-child(5){transition-delay:.48s}
.deliver{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,3vw,36px);border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -48px rgba(35,38,40,.55)}
.deliver .k{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.deliver h3{font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.deliver>p{color:var(--ink-2)}
.dl{display:grid;gap:12px}
.dl li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:16px;transition:background-color .3s}
.dl li>span:first-child{width:36px;height:36px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.dl svg{width:18px;height:18px}
.dl b{display:block;font-weight:600}
.dl li span.s{color:var(--ink-2);font-size:14.5px}
.anim .aud-panel .dl li{opacity:0;transform:translateX(16px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
[dir="rtl"] .anim .aud-panel .dl li{transform:translateX(-16px)}
.anim .aud-panel.show .dl li{opacity:1;transform:none}
.anim .aud-panel.show .dl li:nth-child(2){transition-delay:.1s}.anim .aud-panel.show .dl li:nth-child(3){transition-delay:.2s}.anim .aud-panel.show .dl li:nth-child(4){transition-delay:.3s}
.outcome{margin-block-start:auto;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:20px;background:var(--tint-warm);border:1px solid #f3d6cf}
.outcome svg{width:24px;height:24px;flex-shrink:0;color:var(--accent);margin-block-start:2px}
.outcome b{font-weight:600;color:var(--ink)}
/* phones: the questions sit on a tinted card without the photo, and the delivery list is tighter */
@media (max-width:599px){
  .qs{min-height:0;padding:18px;background:var(--tint)}
  .qs>img,.qs::before{display:none}
  .qs .bubbles{margin-block-start:14px}
  .deliver{padding:22px 18px;gap:12px}
  .dl{gap:4px}
  .dl li{padding:8px 4px}
}
@media (prefers-reduced-motion:reduce){.anim .aud-panel .bub,.anim .aud-panel .dl li{opacity:1!important;transform:none!important}}

/* ---------- proof ---------- */
.pgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pc{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,30px);border-radius:28px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .5s,transform .6s var(--ease-out)}
.pc .tag{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--tint);border:1px solid var(--line);font-size:12.5px;font-weight:600}
.pc h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.015em}
.pc>p{color:var(--ink-2);font-size:15px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--line)}
.num{padding:12px 14px;border-radius:16px;background:var(--tint)}
.num b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.num span{font-size:13px;color:var(--ink-2)}
.rings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--line)}
.rg{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:16px;background:var(--tint)}
.rg .ring{width:96px;height:96px}
.rg .ring span{font-size:19px}
.rg>span{font-size:13px;color:var(--ink-2);text-align:center}
.anim .pc .ring .fg{transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.anim .rv:not(.in) .ring .fg{stroke-dashoffset:283}
.rings-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-start:10px}
.phases{margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--line);display:grid;gap:4px}
.phx{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding-block:8px;color:var(--ink-2);font-size:14.5px}
.phx::before{content:"";position:absolute;inset-inline-start:10px;inset-block:26px -10px;width:2px;background:var(--line)}
.phx:last-child::before{display:none}
.phx i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff}
.phx i svg{width:12px;height:12px}
.phx.now{color:var(--ink);font-weight:600}
.phx.now i{background:#fff;border:2px solid var(--accent)}
.phx.now i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.anim .phx.now i{animation:ping 2s infinite}
.proof-note{margin-block-start:16px;font-size:13.5px;color:var(--muted)}
/* the shared phone rule for program cards (.pc in polish.css) must not reshape these proof cards */
@media (max-width:599px){html body #proof .pc{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:24px}}
@media (prefers-reduced-motion:reduce){.anim .phx.now i,.anim .dash-t .live i{animation:none}}

/* ---------- inquiry ---------- */
.enq{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.enq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;align-items:stretch}}
.enq-side{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3.4vw,40px);border-radius:30px;background:var(--accent);color:#fff;overflow:hidden;isolation:isolate}
.enq-side::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 62%);inset-inline-end:-220px;inset-block-start:-220px}
.enq-side h3{font-size:clamp(1.4rem,2.3vw,1.8rem);line-height:1.2;letter-spacing:-.02em}
.enq-side p{color:#fff;opacity:.92}
.next{display:grid;gap:14px;counter-reset:n}
.next li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;counter-increment:n}
.next li::before{content:counter(n);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-weight:700}
.next b{display:block}
.next span{opacity:.9;font-size:14.5px}
/* phones: the form comes first and the "What happens next" card follows it, with the step titles only;
   phone and country share a row (both are short) */
@media (max-width:599px){
  .enq-side{order:2;gap:14px;padding:22px 20px}
  .next{gap:10px}
  .next li{align-items:center}
  .next li>span>span{display:none}
  .frow:has(#f_phone){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vc.wide .acas{display:none}   /* in the swipe row the card keeps its partner names; the academy list is on the Academies page */
}
.contact-lines{margin-block-start:auto;display:grid;gap:4px;padding-block-start:18px;border-block-start:1px solid rgba(255,255,255,.3)}
.contact-lines a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none;font-weight:600}
.contact-lines a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-lines svg{width:20px;height:20px}
.form{position:relative;padding:clamp(22px,3.4vw,40px);border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -48px rgba(35,38,40,.55)}
.frow{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.frow+.frow,.fset,.ffield,.fset+.frow{margin-block-start:16px}
.fl{position:relative}
.fl input,.fl textarea{width:100%;min-height:56px;padding:22px 16px 8px;border-radius:16px;border:1.5px solid var(--line);background:#fff;font-size:15px;transition:border-color .25s,box-shadow .25s}
.fl textarea{min-height:130px;resize:vertical;padding-block-start:26px}
.fl label{position:absolute;inset-inline-start:17px;inset-block-start:17px;font-size:15px;color:var(--muted);pointer-events:none;transition:transform .25s var(--ease-out),font-size .25s,color .25s,inset-block-start .25s}
.fl input:focus,.fl textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(207,58,39,.12)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{inset-block-start:7px;font-size:12px;font-weight:600;color:var(--accent)}
.fl .req{color:var(--accent)}
.fl.bad input,.fl.bad textarea{border-color:var(--accent);background:#fffafa}
.err{display:none;margin-block-start:6px;font-size:13px;font-weight:600;color:var(--accent)}
.bad .err{display:block}
.anim .shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fset{border:0;padding:0;margin-inline:0}
.fset legend{font-size:14px;font-weight:600;margin-block-end:10px;padding:0}
.opts-chips{display:flex;flex-wrap:wrap;gap:8px}
.opts-chips label{position:relative;cursor:pointer}
.opts-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opts-chips span{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:500;font-size:14px;transition:background-color .25s,color .25s,border-color .25s}
.opts-chips label:hover span{border-color:var(--accent)}
.opts-chips input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.opts-chips input:focus-visible+span{box-shadow:0 0 0 4px rgba(207,58,39,.2)}
.fset.bad .opts-chips span{border-color:rgba(207,58,39,.6)}
.other{margin-block-start:10px}
.other[hidden]{display:none}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.fsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-block-start:22px}
.fsubmit small{color:var(--muted);font-size:13px}
.sent{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:420px}
.sent[hidden]{display:none}
.sent svg{width:88px;height:88px}
.sent circle{fill:none;stroke:var(--tint-warm);stroke-width:6}
.sent path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.anim .sent path{animation:draw .8s var(--ease-out) .2s both}
@keyframes draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.sent h3{font-size:1.5rem;letter-spacing:-.02em}
.sent p{color:var(--ink-2);max-width:40ch}
@media (prefers-reduced-motion:reduce){.anim .sent path{animation:none}.anim .shake{animation:none}}
/* ---------- page hero load-in ---------- */
.anim .page-hero .k-in{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.anim .page-hero.loaded .k-in{opacity:1;transform:none}
.anim .page-hero.loaded .d1{transition-delay:.45s}.anim .page-hero.loaded .d2{transition-delay:.6s}
.anim .page-hero.loaded .mosaic figure{clip-path:inset(0 0 0 0 round 22px)}
.anim .page-hero.loaded .mosaic img{transform:none}
.anim .page-hero.loaded .mosaic .col:nth-child(2) figure{transition-delay:.15s}
.anim .page-hero .zz{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out) .7s,transform .9s var(--ease-out) .7s}
.anim .page-hero.loaded .zz{opacity:1;transform:none}
.anim .page-hero .swoosh path{stroke-dashoffset:420;transition:stroke-dashoffset 1.4s var(--ease-out) .8s}
.anim .page-hero.loaded .swoosh path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .anim .page-hero .k-in,.anim .page-hero .dash{opacity:1!important;transform:none!important}
      .anim .page-hero .swoosh path{stroke-dashoffset:0!important}
  .anim .page-hero .spark i,.anim .vc .mini-bars i{transform:none!important}
  .anim .page-hero .org-photo{clip-path:none!important}
  .anim .page-hero .org-photo img{transform:none!important}
  .anim .marq-row{animation:none!important}
  .anim .cs{opacity:1!important;transition:none!important}
  .anim .cs-c{transform:rotate(-3deg)!important}
  .anim .cs-p{transform:rotate(2deg)!important}
}

/* Saved passwords (browser autofill): the filled-in text keeps the field's own font and size.
   Without this, browsers show it smaller until you click in the field. The field's color is left to the browser. */
.fl input:-webkit-autofill::first-line,.fl textarea:-webkit-autofill::first-line{font-family:var(--font);font-size:16px;font-weight:400}