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

:root{
  --accent:#cf3a27;
  --accent-dark:#a92e1e;
  --logo-grey:#9c9da1;
  --ink:#232628;
  --ink-2:#50535a;
  --muted:#6b6e75;
  --line:#e6e7e8;
  --tint:#f7f7f8;
  --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;
  --sec:clamp(44px,5.5vw,80px);
  --head-gap:clamp(28px,3.4vw,44px);
  --wrap:1280px;
  --gutter:clamp(16px,4vw,40px);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --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)}
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%)}
.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)}
.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);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}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-block-start:var(--hdr);overflow:hidden;isolation:isolate;background:#fff}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--tint-warm) 45%,var(--tint) 100%)}
.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)}}
.hero-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}
.hero-main{flex:1;display:flex;align-items:center;padding-block:clamp(16px,3vh,40px)}
.hero-stack{width:100%}
.hero-title,.hero-copy,.kicker{position:relative;z-index:4}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;width:100%}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}}
.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}}
.hero-title{font-size:clamp(2.35rem,5.4vw,5.3rem);line-height:1.04;letter-spacing:-.045em;font-weight:700;margin-block-end:clamp(26px,3.4vw,44px)}
.h-line{display:flex;flex-wrap:wrap;align-items:center;min-height:44px;column-gap:.32em;row-gap:.12em;width:fit-content;max-width:100%;color:inherit;text-decoration:none;outline-offset:6px}
.h-line + .h-line{margin-block-start:.06em}
.hl{position:relative;color:var(--accent);white-space:nowrap;transition:color .6s var(--ease)}
.hl .swoosh{position:absolute;inset-inline:-1%;inset-block-end:-.14em;width:102%;height:.3em;overflow:visible}
.phased .h-line:not(.on) .hl{color:var(--ink)}
.phased .swoosh path{transition:none}
.phased .h-line:not(.on) .swoosh path{stroke-dashoffset:420}
.swoosh path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;opacity:.85}
.hero .lead{margin-block-start:34px;font-size:clamp(1.05rem,1.45vw,1.28rem);color:var(--ink-2);max-width:40ch}
.hero .lead b{color:var(--ink);font-weight:600}
@media (min-width:1000px){.hero .lead{max-width:none}}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:34px}
.hero .ctas .btn{min-height:56px;padding-inline:30px;font-size:16px}
/* two path cards: the two offers, with price and length, in the first screen */
.paths{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));margin-block-start:28px;max-width:560px}
.path{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;min-height:92px;padding:15px 18px 16px;border-radius:20px;background:rgba(255,255,255,.9);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -30px rgba(0,0,0,.45);transition:border-color .3s,transform .45s var(--ease-out),box-shadow .45s}
.path b{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25;padding-inline-end:44px;margin-block-end:4px}
.path span{font-size:14px;color:var(--ink-2);line-height:1.45}
.path .p-go{position:absolute;inset-block-start:13px;inset-inline-end:14px;width:32px;height:32px;padding:7px;border-radius:50%;background:var(--accent);color:#fff;transition:transform .4s var(--ease-out)}
[dir="rtl"] .path .p-go{transform:scaleX(-1)}
.path:hover,.path:focus-visible{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(207,58,39,.6)}
.path:hover .p-go{transform:rotate(-45deg)}
[dir="rtl"] .path:hover .p-go{transform:scaleX(-1) rotate(-45deg)}
.p-alt{display:inline-flex;margin-block-start:16px}
/* short laptop screens (up to 760px tall, mouse): tighter banner so it shows at full size; the header button still offers Find your path */
@media (min-width:1000px) and (max-height:760px) and (hover:hover){
  .hero-title{margin-block-end:18px}
  .hero .lead{margin-block-start:14px}
  .paths{margin-block-start:18px}
  .p-alt{display:none}
  .hero-visual{height:clamp(230px,44vh,300px)}
}

/* hero visual collage */
.hero-visual{position:relative;height:clamp(280px,38vh,470px);perspective:1200px}
/* computers (1000px and wider): the photo group sits beside the title and the two cards together, centred on
   both, so there is no empty space above it. The title is capped so it always fits its column (on a 1280 px
   laptop it keeps its size). */
@media (min-width:1000px){
  .hero-stack{container-type:inline-size;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-rows:auto auto;column-gap:clamp(28px,4vw,56px);align-items:center}
  .hero-grid{display:contents}
  .hero-title{grid-column:1;grid-row:1;align-self:end;font-size:min(clamp(2.35rem,5.4vw,5.3rem),calc((100cqi - clamp(28px,4vw,56px)) * .48 / 8.95))}
  .hero-copy{grid-column:1;grid-row:2;align-self:start}
  .hero-visual{grid-column:2;grid-row:1 / span 2;align-self:center;height:clamp(320px,50vh,500px)}
}
@media (min-width:1000px) and (max-height:760px) and (hover:hover){
  .hero-visual{height:clamp(280px,58vh,350px)}
}
@media (min-width:1000px) and (min-height:761px){.hero .lead{margin-block-start:12px}.hero-title{margin-block-end:22px}}
.hero .lead{text-wrap:pretty}
.layer{position:absolute;will-change:transform;transition:transform .9s var(--ease-out)}
.photo{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);background:#ddd}
.photo img{width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.lay-a{inset-inline-end:3%;inset-block-start:0;width:42%;height:100%}
.duo img{position:absolute;inset:0}
.duo .img-a{object-position:40% 40%}
.duo .img-b{object-position:52% 30%;clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--ease-out)}
.hero-visual.phase-1 .duo .img-b{clip-path:inset(0 0 0 0)}
.lay-b{inset-inline-start:3%;inset-block-start:3%;width:40%;height:52%}
.lay-b .photo{transform:rotate(-4deg)}
.lay-c{inset-inline-start:20%;inset-block-end:0;width:36%;height:44%}
.lay-c .photo{transform:rotate(3deg)}
.hero-visual .chip{transition:border-color .5s,box-shadow .5s,opacity .7s var(--ease-out),scale .8s cubic-bezier(.34,1.56,.64,1)}
.hero-visual .chip .ci{transition:background-color .5s,color .5s}
.hero-visual.phase-0 .chip-2,.hero-visual.phase-1 .chip-1,.hero-visual.phase-1 .chip-3{border-color:rgba(207,58,39,.55);box-shadow:0 20px 44px -18px rgba(207,58,39,.6)}
.hero-visual.phase-0 .chip-2 .ci,.hero-visual.phase-1 .chip-1 .ci{background:var(--accent);color:#fff}
.orbit{position:absolute;inset:4% 2%;border-radius:50%;border:1.5px dashed rgba(156,157,161,.55);animation:spin 60s linear infinite;pointer-events:none}
.orbit::before{content:"";position:absolute;inset-block-start:12%;inset-inline-start:6%;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(207,58,39,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 40px -20px rgba(0,0,0,.45);font-size:13.5px;line-height:1.35;animation:bob 6s ease-in-out infinite}
.chip b{display:block;font-weight:600;font-size:14.5px;color:var(--ink)}
.chip span.s{color:var(--muted);font-size:12.5px}
.chip .ci{width:38px;height:38px;border-radius:12px;background:var(--tint-warm);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip .ci svg{width:20px;height:20px}
.chip-1{inset-inline-end:34%;inset-block-start:50%;animation-delay:-1s}
.chip-2{inset-inline-start:0;inset-block-end:8%;animation-delay:-3s}
.chip-3{inset-inline-end:-2%;inset-block-end:-3%;animation-delay:-4.5s;padding:12px 16px}
.mini-ladder{display:flex;align-items:flex-end;gap:4px;height:34px}
.mini-ladder i{display:block;width:8px;border-radius:3px;background:var(--line);transform-origin:bottom}
.mini-ladder i:nth-child(1){height:30%}.mini-ladder i:nth-child(2){height:47%}.mini-ladder i:nth-child(3){height:64%}.mini-ladder i:nth-child(4){height:82%}.mini-ladder i:nth-child(5){height:100%}
.mini-ladder i{animation:rung 5s var(--ease) infinite}
.mini-ladder i:nth-child(2){animation-delay:.25s}.mini-ladder i:nth-child(3){animation-delay:.5s}.mini-ladder i:nth-child(4){animation-delay:.75s}.mini-ladder i:nth-child(5){animation-delay:1s}
@keyframes rung{0%,15%{background:var(--line)}25%,70%{background:var(--accent)}85%,100%{background:var(--line)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:999px){
  .hero-visual{height:clamp(300px,70vw,440px);max-width:680px;width:100%;margin-inline:auto}
  .lay-a{width:46%}
  .lay-b{width:46%}
  .lay-c{width:42%;inset-inline-start:12%}
  .chip-1{inset-inline-end:30%}
}
@media (max-width:520px){
  .chip{padding:9px 12px 9px 9px;font-size:12px}
  .chip b{font-size:13px}
  .chip .ci{width:32px;height:32px}
  .chip-3{display:none}
  .chip span.s{display:none}
}

/* ticker (red strip, white names) */
.ticker{position:relative;background:var(--accent);overflow:hidden}
.ticker::before,.ticker::after{content:"";position:absolute;inset-block:0;width:clamp(40px,10vw,160px);z-index:1;pointer-events:none}
.ticker::before{inset-inline-start:0;background:linear-gradient(to right,var(--accent),transparent)}
.ticker::after{inset-inline-end:0;background:linear-gradient(to left,var(--accent),transparent)}
[dir="rtl"] .ticker::before{background:linear-gradient(to left,var(--accent),transparent)}
[dir="rtl"] .ticker::after{background:linear-gradient(to right,var(--accent),transparent)}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker-track,.ticker.off .ticker-track{animation-play-state:paused}
[dir="rtl"] .ticker-track{animation-direction:reverse}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-set{display:flex;align-items:center;gap:clamp(28px,4vw,56px);padding-block:clamp(14px,1.5vw,22px);padding-inline-end:clamp(28px,4vw,56px);flex-shrink:0}
.tk-item{display:inline-flex;align-items:center;gap:12px;opacity:.95;transition:opacity .3s}
.tk-item:hover{opacity:1}
.tk-logo{height:26px;width:auto;filter:brightness(0) invert(1)}
.tk-w{font-size:clamp(1rem,1.5vw,1.35rem);font-weight:600;color:#fff;white-space:nowrap;letter-spacing:-.015em}
.tk-sep{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);flex-shrink: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}

/* ---------- FIND YOUR PATH (light, step-by-step console) ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.chooser-sec{background:var(--tint);overflow:hidden;overflow:clip;isolation:isolate;padding-block-start:calc(var(--sec) - clamp(18px,3vw,32px))}
.chooser-sec .glow{position:absolute;z-index:-1;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle,rgba(207,58,39,.13),transparent 65%);inset-inline-end:-18vw;inset-block-start:-22vw;filter:blur(30px);animation:float1 20s ease-in-out infinite alternate}
.chooser-sec .glow.g2{inset-inline-end:auto;inset-inline-start:-22vw;inset-block-start:auto;inset-block-end:-26vw;background:radial-gradient(circle,rgba(186,170,230,.35),transparent 65%);animation:float2 24s ease-in-out infinite alternate}
.fp-lines{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 50%,#000,transparent 75%)}
.chooser-sec .grain{opacity:.05}
.fp{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1000px){.fp{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.fp-side .sec-head h2{margin-block-start:clamp(18px,3vw,32px)}
.fp-side .sec-head{margin-block-end:28px}
.fp-side .sec-head h2{font-size:clamp(2rem,3.4vw,3.1rem)}

/* progress rail */
.rail{position:relative;display:grid;gap:26px;padding:0;margin:0}
.rail::before,.rail::after{content:"";position:absolute;inset-inline-start:21px;inset-block-start:22px;inset-block-end:22px;width:2px;border-radius:2px;background:var(--line)}
.rail::after{background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--rf,0));transition:transform .7s var(--ease-out)}
.rail li{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.rail-dot{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink-2);flex-shrink:0;transition:background-color .45s,border-color .45s,color .45s}
.rail-dot svg{position:absolute;width:20px;height:20px;opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.rail-dot span{transition:opacity .25s}
.rail li.current .rail-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 6px rgba(207,58,39,.16)}
.rail li.current .rail-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);animation:ping 2.2s var(--ease) infinite}
.rail li.done .rail-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.rail li.done .rail-dot span{opacity:0}
.rail li.done .rail-dot svg{opacity:1;transform:none}
.rail li.skipped .rail-dot{border-style:dashed;opacity:.6}
.rail-txt b{display:block;font-weight:600;font-size:16px;color:var(--ink);line-height:1.3}
.rail-txt small{display:block;font-size:14px;color:var(--ink-2);line-height:1.4;transition:color .3s}
.rail li.done .rail-txt small{color:var(--accent)}
.rail li:not(.current):not(.done) .rail-txt b{color:var(--muted)}

/* stage */
.fp-stage{position:relative;border-radius:32px;padding:clamp(18px,3vw,32px);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 50px 100px -50px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.04)}
.fp-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),rgba(156,157,161,.28) 0deg,rgba(156,157,161,.28) 200deg,rgba(207,58,39,.95) 260deg,rgba(207,58,39,.25) 300deg,rgba(156,157,161,.28) 340deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spinAng 7s linear infinite}
@keyframes spinAng{to{--ang:360deg}}
.stage-top{display:flex;align-items:center;gap:14px;margin-block-end:22px;min-height:44px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:background-color .25s,border-color .25s}
.back:hover{background:var(--tint-warm);border-color:var(--accent);color:var(--accent)}
.back svg{width:18px;height:18px}
[dir="rtl"] .back svg{transform:scaleX(-1)}
.back[hidden]{display:none}
.stage-count{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.stage-bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;min-width:60px}
.stage-bar i{display:block;height:100%;width:33.34%;border-radius:4px;background:linear-gradient(90deg,var(--accent),#ff8a76);transition:width .7s var(--ease-out)}
[dir="rtl"] .stage-bar i{background:linear-gradient(270deg,var(--accent),#ff8a76)}
.steps-stack{position:relative;transition:height .55s var(--ease-out)}
.fstep-q{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-block-end:20px;outline:none}
.js .steps-stack{display:grid}
.js .fstep{grid-area:1/1;align-self:start;opacity:0;visibility:hidden;transform:translateX(56px);transition:opacity .45s var(--ease),transform .65s var(--ease-out),visibility .45s}
.js .fstep.is-past{transform:translateX(-56px)}
[dir="rtl"] .js .fstep,.js[dir="rtl"] .fstep{transform:translateX(-56px)}
.js[dir="rtl"] .fstep.is-past{transform:translateX(56px)}
.js .fstep.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .65s var(--ease-out),visibility 0s}
.js .fstep.is-active .si{animation:siIn .75s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + 120ms)}
@keyframes siIn{from{opacity:0;transform:translateY(22px)}}
html:not(.js) .stage-top,html:not(.js) .rail,html:not(.js) .fstep[data-step="2"],html:not(.js) .fstep[data-step="3"]{display:none}

/* step 1: option cards */
.opt-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ocard{--mh:clamp(150px,15vw,196px);position:relative;display:flex;flex-direction:column;border-radius:26px;padding:10px;background:#fff;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .55s var(--ease-out),border-color .3s,box-shadow .5s}
.ocard:hover{transform:translateY(-6px);border-color:rgba(207,58,39,.45);box-shadow:0 34px 60px -30px rgba(207,58,39,.55)}
.ocard[aria-pressed="true"]{border-color:var(--accent)}
.ocard-media{position:relative;display:block;height:var(--mh);border-radius:18px;overflow:hidden;isolation:isolate}
.ocard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.ocard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.ocard:hover .ocard-media img{transform:scale(1.09)}
.ocard-tag{position:absolute;z-index:1;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;font-weight:600}
.ocard-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ocard-body{display:block;flex:1;padding:22px 10px 8px}
.ocard-body strong{display:block;font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ocard-body .sub{display:block;margin-block-start:4px;font-size:14px;color:var(--ink-2);line-height:1.45}
.ocard-go{position:absolute;z-index:3;inset-block-start:calc(10px + var(--mh) - 26px);inset-inline-end:24px;width:52px;height:52px;border-radius:50%;background:#fff;border:4px solid #fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;transition:background-color .35s,transform .5s var(--ease-out),box-shadow .35s}
.ocard-go svg{width:20px;height:20px}
[dir="rtl"] .ocard-go svg{transform:scaleX(-1)}
.ocard:hover .ocard-go,.ocard[aria-pressed="true"] .ocard-go{background:var(--accent);color:#fff;box-shadow:none;transform:rotate(-45deg)}
[dir="rtl"] .ocard:hover .ocard-go{transform:rotate(45deg)}
/* guided cue on the first card */
.start-cue{position:absolute;z-index:2;inset-block-start:12px;inset-inline-end:12px;display:none;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.start-cue svg{width:16px;height:16px;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-3px)}}
.guide .ocard:first-child .start-cue{display:inline-flex}
.guide .ocard:first-child,.guide2 .obtn:first-child{border-color:rgba(207,58,39,.75);animation:cueGlow 2.4s var(--ease) infinite}
@keyframes cueGlow{0%,100%{box-shadow:0 0 0 0 rgba(207,58,39,0)}50%{box-shadow:0 0 0 5px rgba(207,58,39,.22)}}

/* phones: option cards turn into compact rows, so both fit on one screen */
@media (max-width:640px){
  .ocard{flex-direction:row;align-items:center;gap:14px;padding:8px;border-radius:22px}
  .ocard-media{--mh:92px;width:92px;height:92px;flex-shrink:0;border-radius:16px}
  .ocard-tag,.start-cue{display:none!important}
  .ocard-body{padding:4px 50px 4px 0}
  .ocard-go{inset-block-start:50%;margin-block-start:-20px;inset-inline-end:12px;width:40px;height:40px;border-width:0}
}
/* step 2 for skills: fields as chips */
.opt-chips{display:flex;flex-wrap:wrap;gap:8px}
.opt-chips[hidden],.opt-grid[hidden]{display:none}
.fchip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:5px 16px 5px 5px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease-out)}
.fchip .oi{width:36px;height:36px;border-radius:50%;background:var(--tint-warm);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .3s,color .3s}
.fchip .oi svg{width:18px;height:18px}
.fchip:hover{border-color:var(--accent);transform:translateY(-2px)}
.fchip:hover .oi{background:var(--accent);color:#fff}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.fchip[aria-pressed="true"] .oi{background:#fff;color:var(--accent)}
.guide2 .fchip:first-child{border-color:rgba(207,58,39,.75);animation:cueGlow 2.4s var(--ease) infinite}

/* step 2: options grid */
.opt-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.obtn{position:relative;display:flex;align-items:center;gap:14px;min-height:66px;padding:12px 16px 12px 12px;border-radius:18px;background:#fff;border:1.5px solid var(--line);color:var(--ink);text-align:start;font-weight:500;font-size:15px;line-height:1.35;cursor:pointer;transition:background-color .3s,border-color .3s,transform .45s var(--ease-out),color .3s}
.obtn .oi{width:42px;height:42px;border-radius:13px;background:var(--tint-warm);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .3s,color .3s}
.obtn .oi svg{width:21px;height:21px}
.obtn .oi b{font-size:13px;font-weight:700;letter-spacing:-.02em}
.obtn .oa{margin-inline-start:auto;width:18px;height:18px;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease-out);flex-shrink:0}
[dir="rtl"] .obtn .oa{transform:scaleX(-1) translateX(-6px)}
.obtn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(207,58,39,.7)}
.obtn:hover .oi{background:var(--accent);color:#fff}
.obtn:hover .oa{opacity:1;transform:none}
[dir="rtl"] .obtn:hover .oa{transform:scaleX(-1)}
.obtn[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.obtn[aria-pressed="true"] .oi{background:#fff;color:var(--accent)}

/* step 3: result */
.res{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:760px){.res{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.res-vis{position:relative;height:300px;border-radius:24px;background:radial-gradient(120% 90% at 50% 100%,rgba(207,58,39,.14),transparent 60%),var(--tint-warm);border:1px solid var(--line);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--accent);flex-shrink:0}
.legend i.m{background:transparent;border:1.5px dashed var(--accent)}
.legend svg{width:13px;height:13px;color:var(--accent)}
.is-active .legend{animation:siIn .6s var(--ease-out) both;animation-delay:.9s}
.rlad{flex:1;display:flex;align-items:flex-end;gap:8px;width:100%;padding-block-start:40px}
.rpin{position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;translate:-50% 0;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}
[dir="rtl"] .rpin{translate:50% 0}
.rpin svg{width:16px;height:16px}
.is-active .rpin{animation:pinDrop .8s cubic-bezier(.34,1.56,.64,1) both,pinBob 2.4s 1.8s ease-in-out infinite;animation-delay:1s,1.8s}
@keyframes pinDrop{from{opacity:0;transform:translateY(-16px)}}
@keyframes pinBob{50%{transform:translateY(-4px)}}
.rbar{position:relative;flex:1;height:var(--h);border-radius:12px 12px 6px 6px;background:#fff;border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;padding-block-end:10px;transform-origin:50% 100%}
.is-active .rbar{animation:barUp .9s var(--ease-out) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes barUp{from{transform:scaleY(0)}}
.rbar .rlv{font-weight:700;font-size:14px;color:var(--ink-2)}
.rbar.hi{background:linear-gradient(180deg,#e2503b,var(--accent));border-color:var(--accent)}
.is-active .rbar.hi{animation:barUp .9s var(--ease-out) both,barGlow 2.4s 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * 90ms + 150ms),1.2s}
@keyframes barGlow{0%,100%{box-shadow:0 0 0 0 rgba(207,58,39,0)}50%{box-shadow:0 0 34px 4px rgba(207,58,39,.55)}}
.rbar.hi .rlv{color:#fff}
.rbar.maybe{background:rgba(207,58,39,.07);border:1.5px dashed var(--accent)}
.rbar.dim{opacity:.45}
.rflag{position:absolute;inset-block-end:calc(100% + 10px);inset-inline-start:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;color:var(--ink);font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;box-shadow:0 10px 20px -10px rgba(0,0,0,.7)}
[dir="rtl"] .rflag{transform:translateX(50%)}
.rflag svg{width:13px;height:13px;color:var(--accent)}
.rflag.f-start{inset-inline-start:-4px;transform:none}
.rflag.f-end{inset-inline-start:auto;inset-inline-end:-4px;transform:none}
.is-active .rflag{animation:flagIn .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:1s}
@keyframes flagIn{from{opacity:0;translate:0 10px;scale:.8}}
.fan{position:relative;width:100%;flex:1}
.fc{position:absolute;inset-block-end:0;left:50%;width:46%;height:92%;border-radius:16px;overflow:hidden;transform-origin:50% 100%;transform:translateX(var(--x)) rotate(var(--r));box-shadow:0 20px 40px -18px rgba(0,0,0,.45);border:2px solid #fff}
.fc img{width:100%;height:100%;object-fit:cover}
.fc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.9))}
.fc span{position:absolute;z-index:1;inset-inline:10px;inset-block-end:10px;font-size:12.5px;font-weight:600;line-height:1.25}
.fc:not(:nth-child(2)) span{display:none}
.fc:nth-child(1){--r:-11deg;--x:-82%}
.fc:nth-child(2){--r:0deg;--x:-50%;z-index:2}
.fc:nth-child(3){--r:11deg;--x:-18%}
.is-active .fc{animation:fanIn 1s var(--ease-out) both;animation-delay:calc(var(--i) * 110ms + 150ms)}
@keyframes fanIn{from{opacity:0;transform:translateX(-50%) translateY(30px) rotate(0)}}
.res-1{grid-template-columns:minmax(0,1fr)!important}
@media (max-width:759px){.res-vis{height:190px}}
.res-progs{display:grid;gap:8px}
.res-progs a{position:relative;display:grid;gap:2px;padding:12px 44px 12px 16px;border-radius:16px;background:#fff;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .4s var(--ease-out)}
.res-progs a:hover{border-color:var(--accent);transform:translateY(-2px)}
.res-progs small{font-size:12.5px;font-weight:600;color:var(--accent-dark)}
.res-progs b{font-size:15.5px;font-weight:600;line-height:1.3}
.res-progs span{font-size:13.5px;color:var(--ink-2)}
.res-progs svg{position:absolute;inset-block-start:50%;inset-inline-end:14px;width:18px;height:18px;margin-block-start:-9px;color:var(--accent)}
[dir="rtl"] .res-progs svg{transform:scaleX(-1)}
.res-txt{display:grid;gap:14px}
.res-txt h3{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.025em;outline:none}
.res-txt p{color:var(--ink-2);font-size:15.5px}
.res-facts{display:flex;flex-wrap:wrap;gap:8px}
.res-facts li{display:inline-flex;align-items:center;gap:8px;background:var(--tint);border:0;border-radius:6px;padding:7px 12px;font-size:13.5px;font-weight:500}
.res-facts svg{width:15px;height:15px;color:var(--accent)}
.res-note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.res-note svg{width:17px;height:17px;flex-shrink:0;color:var(--accent);margin-block-start:2px}
.res-ctas{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-block-start:4px}
.restart{background:none;border:0;cursor:pointer;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0}
.restart:hover{color:var(--accent)}
@media (max-width:999px){
  .rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rail::before,.rail::after{inset-inline-start:22px;inset-inline-end:calc(33.333% - 22px);inset-block-start:21px;inset-block-end:auto;width:auto;height:2px}
  .rail::after{transform-origin:0 50%;transform:scaleX(var(--rf,0))}
  [dir="rtl"] .rail::after{transform-origin:100% 50%}
  .rail li{flex-direction:column;align-items:flex-start;gap:10px}
  .rail-txt b{font-size:14px}
  .rail-txt small{display:none}
}

/* ---------- ACADEMIES (13 fields at a glance) ---------- */
/* Small photo cards with the field name, the same look as "Other academies" on the academy pages.
   Phones: 2 columns of short landscape cards. Tablets: 4 columns, laptops: 5 (landscape cards).
   Wide screens: squares, one row of 7, twice. */
.aca-sec{position:relative;background:#fff}
.aca-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.aca-grid > li{min-width:0;display:flex}
.aca-ph{position:relative;display:flex;align-items:flex-end;width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--tint);color:#fff;text-decoration:none;transition:box-shadow .4s,transform .5s var(--ease-out)}
.aca-ph img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.aca-ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(35,38,40,0) 30%,rgba(35,38,40,.84))}
.aca-ph span{padding:10px 12px;font-weight:600;font-size:14.5px;line-height:1.25;text-wrap:balance}
.aca-ph:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(207,58,39,.75)}
.aca-ph:hover img{transform:scale(1.07)}
.aca-ph:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.aca-all{display:flex}
.aca-all a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:10px 14px;border-radius:18px;border:1.5px dashed var(--accent);background:var(--tint-warm);color:var(--accent-dark);font-weight:600;font-size:14.5px;line-height:1.3;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}
.aca-all a:hover{background:var(--accent);color:#fff}
.aca-all svg{width:18px;height:18px;flex-shrink:0}
[dir="rtl"] .aca-all svg{transform:scaleX(-1)}
@media (min-width:760px){.aca-grid{gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.aca-ph{aspect-ratio:4/3}.aca-ph span{padding:12px 14px;font-size:15px}.aca-all{grid-column:span 3}}
@media (min-width:1000px){.aca-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.aca-all{grid-column:span 2}}
@media (min-width:1240px){.aca-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.aca-all{grid-column:span 1}.aca-ph{aspect-ratio:1/1}.aca-ph span{padding:12px;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.aca-ph,.aca-ph img{transition:none}.aca-ph:hover{transform:none}.aca-ph:hover img{transform:none}}

/* ---------- PROOF: our graduates (real ceremony photos, real numbers from the graduates list) ----------
   Info only: nothing here is clickable, nothing changes on hover. TODO(dev): numbers from the database. */
.proof{position:relative;background:linear-gradient(180deg,#fff 0%,var(--tint-warm) 100%)}
.proof-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:960px){.proof-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.proof-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pp{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#ddd;box-shadow:0 24px 48px -30px rgba(35,38,40,.55)}
.pp img{display:block;width:100%;height:100%;object-fit:cover}
.pp1{grid-column:1/-1;aspect-ratio:16/10}
.pp2,.pp3{aspect-ratio:3/2}
.pp figcaption{position:absolute;inset-inline-start:14px;inset-block-end:14px;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;font-weight:600;line-height:1.3}
.proof-txt h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.1;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.proof-txt h2 .big{display:block;margin-block-end:6px;font-size:clamp(4.6rem,9vw,7.6rem);line-height:.92;font-weight:800;letter-spacing:-.05em;color:var(--accent)}
.proof-txt>p{margin-block-start:18px;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-2);max-width:52ch}
.stories{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.stories li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px 14px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.stories img{display:block;width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--tint-warm)}
.stories li>div{display:grid;gap:2px}
.stories li.np{grid-template-columns:minmax(0,1fr);padding:15px 18px}
.stories b{font-weight:600;font-size:16px;line-height:1.35}
.stories b small{font-size:inherit;font-weight:400;color:var(--ink-2)}
.stories span{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:959px){.proof-txt{order:-1}}
@media (max-width:599px){.pp2,.pp3{display:none}.pp1{aspect-ratio:4/3}}
/* computer: the video starts level with the top of "103", and the two photos stretch so both columns end on the same line (2026-10-23) */
@media (min-width:960px){
  .proof-grid{align-items:stretch}
  .proof-photos{grid-template-rows:auto minmax(170px,1fr)}
  .pp2,.pp3{aspect-ratio:auto;min-height:170px}
  .proof-txt{align-self:start}
  .proof-txt h2 .big{margin-block-start:-.06em}
}
/* ---------- phones: a shorter homepage (2026-10-13) ----------
   The hero pictures are smaller, the academy tiles are shorter, and the level panel keeps its summary and link
   (who can start and what it leads to are on the UK Diplomas page). */
@media (max-width:599px){
  .hero-visual{height:250px}
  .aca-ph{aspect-ratio:2/1}
  .lpanel .lp-cols{display:none}
  .lpanel{padding:22px 20px}
}

/* ---------- UK DIPLOMAS ---------- */
.uk{position:relative;background:var(--tint)}
.uk-intro{padding-block-start:clamp(84px,11vw,140px)}
.uk-story{position:relative;padding-block-start:var(--sec)}
.uk-sticky{padding:0}
.uk-grid{display:grid;gap:28px 56px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:1000px){.uk-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end}
.rung{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;text-align:start;padding:16px 14px;border-radius:18px 18px 10px 10px;border:1.5px solid var(--line);background:#fff;cursor:pointer;overflow:hidden;transition:background-color .45s,border-color .45s,color .45s,transform .5s var(--ease-out),box-shadow .45s}
.rung:nth-child(1){height:120px}.rung:nth-child(2){height:160px}.rung:nth-child(3){height:200px}.rung:nth-child(4){height:240px}.rung:nth-child(5){height:280px}
.rung .lv{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.rung .lv small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-block-end:4px}
.rung .nm{font-size:13px;font-weight:500;color:var(--ink-2);line-height:1.35}
.rung:hover{border-color:var(--accent)}
.rung.done{background:var(--tint-warm);border-color:#f3c9c1}
.rung[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-6px);box-shadow:0 22px 40px -20px rgba(207,58,39,.8)}
.rung[aria-selected="true"] .nm{color:#fff}
.prog{position:absolute;inset-inline:0;inset-block-end:0;height:4px;background:#fff;opacity:.75;transform-origin:0 50%;transform:scaleX(0)}
[dir="rtl"] .prog{transform-origin:100% 50%}
.lpanels{position:relative}
.lpanel{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(22px,3.5vw,40px);overflow:hidden;margin-block-end:14px}
.lpanel .ghost{position:absolute;inset-inline-end:-8px;inset-block-start:-34px;font-size:clamp(7rem,13vw,11rem);font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(207,58,39,.18);pointer-events:none;user-select:none}
.lp-top{position:relative;margin-block-end:20px}
.lp-top .lp-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.lp-top h3{font-size:clamp(1.45rem,2.4vw,1.95rem);letter-spacing:-.025em;line-height:1.15;margin-block:6px 10px}
.lp-top p{color:var(--ink-2);font-size:15.5px;max-width:52ch}
.lp-cols{position:relative;display:grid;gap:18px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));padding-block-start:20px;border-block-start:1px solid var(--line)}
.lp-cols h4{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-block-end:10px}
.lp-cols li{position:relative;padding-inline-start:26px;margin-block-end:8px;font-size:15px}
.lp-cols li svg{position:absolute;inset-inline-start:0;inset-block-start:3px;width:17px;height:17px;color:var(--accent)}
.lp-cols p{font-size:15px}
.lp-foot{position:relative;margin-block-start:14px}
.js .lpanels{display:grid}
.js .lpanel{grid-area:1/1;margin:0;transition:opacity .5s var(--ease),transform .6s var(--ease-out),visibility .5s}
.js .lpanel[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(16px) scale(.98)}

.uk-rest{padding-block:clamp(28px,3.5vw,44px) var(--sec)}
.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)}
.uk-facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.uk-facts .fi{background:#fff}
.uk-facts .fi .ic{background:var(--tint-warm)}
@media (max-width:640px){
  .uk-facts{gap:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
  .uk-facts .fi{border:0;border-radius:0;padding:14px 16px}
  .uk-facts .fi + .fi{border-block-start:1px solid var(--line)}
}
.uk-ctas{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-block-start:clamp(28px,4vw,44px)}
@media (max-width:760px){
  .ladder{gap:6px}
  .rung{padding:10px 6px;align-items:center;text-align:center;border-radius:14px 14px 8px 8px}
  .rung:nth-child(1){height:76px}.rung:nth-child(2){height:92px}.rung:nth-child(3){height:108px}.rung:nth-child(4){height:124px}.rung:nth-child(5){height:140px}
  .rung .nm{display:none}
  .rung .lv{font-size:1.35rem}
  .rung .lv small{font-size:10px}
}

/* ---------- WHY GEA ---------- */
/* ---------- Why GEA (2026-10-23, v3, option E "Side by side"): four topics. For each, what studying on your own looks like (grey)
   and what GEA adds (the red-framed column). Computer and tablet: one grid that reads like a table, columns On your own | With GEA.
   Phone: a swipe row of four cards (shared .mswipe), each with "With GEA" in a tinted box and "On your own" under it.
   Screen readers hear each row as: topic, "With GEA: ...", "On your own: ...". ---------- */
.cmp{--c1:25%;--c2:34%;--c3:41%}
.cmp-cols,.cmp-r{display:grid;grid-template-columns:var(--c1) var(--c2) var(--c3)}
.cmp-r{position:relative}   /* keeps the hidden labels inside the card, so a swiped row never widens the page */
.cmp-cols{align-items:end}
.cmp-cols span{grid-row:1;padding:14px 24px;font-size:15px;font-weight:600;color:var(--muted)}
.cmp-cols .o{grid-column:2}
.cmp-cols .g{grid-column:3;padding-block:16px;border-radius:20px 20px 0 0;background:var(--accent);color:#fff;font-size:17px;font-weight:700}
.cmp-rows{list-style:none;margin:0;padding:0}
.cmp-r>*{grid-row:1;margin:0;display:flex;align-items:center;gap:12px;padding:18px 24px;border-block-end:1px solid var(--line);line-height:1.45}
.cmp-r>.cmp-t{grid-column:1;padding-inline-start:0;gap:14px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink)}
.cmp-r>.cmp-o{grid-column:2;font-size:15px;color:var(--muted)}
.cmp-r>.cmp-g{grid-column:3;font-size:15.5px;font-weight:600;color:var(--ink);background:var(--tint-warm);border-inline:1.5px solid var(--accent);border-block-end-color:rgba(207,58,39,.15)}
.cmp-r:last-child>.cmp-t,.cmp-r:last-child>.cmp-o{border-block-end:0}
.cmp-r:last-child>.cmp-g{border-block-end:1.5px solid var(--accent);border-radius:0 0 20px 20px}
.cmp-ic{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--tint);display:grid;place-items:center}
.cmp-ic svg{width:20px;height:20px}
.cmp-y,.cmp-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.cmp-y{background:var(--accent);color:#fff}
.cmp-y svg{width:13px;height:13px}
.cmp-n{background:var(--tint);color:var(--muted)}
.cmp-n svg{width:12px;height:12px}
.cmp-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* the column name: read out here, shown on phones */
.cmp-org{display:flex;align-items:center;gap:20px;margin-block-start:clamp(24px,3vw,36px);padding:16px 16px 16px 24px;border-radius:20px;background:var(--tint)}
.cmp-org-ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--accent);display:grid;place-items:center}
.cmp-org-ic svg{width:22px;height:22px}
.cmp-org p{flex:1;min-width:0;margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cmp-org p b{font-weight:600;color:var(--ink)}
.cmp-org .btn{flex-shrink:0;border-color:var(--line)}
.anim .cmp.rv{opacity:1;transform:none}
.anim .cmp .cmp-cols,.anim .cmp .cmp-r{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.anim .cmp.in .cmp-cols,.anim .cmp.in .cmp-r{opacity:1;transform:none}
.anim .cmp.in .cmp-r:nth-child(1){transition-delay:.12s}.anim .cmp.in .cmp-r:nth-child(2){transition-delay:.2s}
.anim .cmp.in .cmp-r:nth-child(3){transition-delay:.28s}.anim .cmp.in .cmp-r:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.anim .cmp .cmp-cols,.anim .cmp .cmp-r{opacity:1!important;transform:none!important;transition:none!important}}
@media (min-width:600px) and (max-width:959px){
  .cmp{--c1:27%;--c2:32%;--c3:41%}
  .cmp-r>*,.cmp-cols span{padding:14px 16px}
  .cmp-r>.cmp-t{padding-inline-start:0;font-size:15px}
  .cmp-r>.cmp-o,.cmp-r>.cmp-g{font-size:14.5px}
  .cmp-ic{width:34px;height:34px}
}
@media (max-width:599px){
  .cmp-cols{display:none}
  .cmp-r{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff}
  .cmp-r>*,.cmp-r:last-child>*{padding:0;border:0;border-radius:0}
  .cmp-r>.cmp-t{font-size:16px}
  .cmp-r>.cmp-g,.cmp-r:last-child>.cmp-g{align-items:flex-start;padding:12px 14px;border:0;border-radius:14px;font-size:15px}
  .cmp-r>.cmp-o{align-items:flex-start;padding-inline:14px;font-size:14px}
  .cmp-l{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin-block-end:2px;font-size:12.5px;font-weight:600}
  .cmp-g .cmp-l{color:var(--accent)}
  .cmp-o .cmp-l{color:var(--muted)}
  .cmp-org{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .cmp-org .btn{width:100%}
}

/* ---------- 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 */
.anim .hero .k-in{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.anim .hero.loaded .k-in{opacity:1;transform:none}
.anim .hero.loaded .d1{transition-delay:.55s}.anim .hero.loaded .d2{transition-delay:.7s}.anim .hero.loaded .d3{transition-delay:.85s}
.anim .hero .photo{clip-path:inset(100% 0 0 0 round 28px);transition:clip-path 1.3s var(--ease-out)}
.anim .hero .photo img{transform:scale(1.3);transition:transform 1.8s var(--ease-out)}
.anim .hero.loaded .photo{clip-path:inset(0 0 0 0 round 28px)}
.anim .hero.loaded .photo img{transform:none}
.anim .hero.loaded .lay-b .photo{transition-delay:.15s}.anim .hero.loaded .lay-b .photo img{transition-delay:.15s}
.anim .hero.loaded .lay-c .photo{transition-delay:.3s}.anim .hero.loaded .lay-c .photo img{transition-delay:.3s}
.anim .hero .chip{opacity:0;scale:.85;transition:opacity .7s var(--ease-out),scale .8s cubic-bezier(.34,1.56,.64,1)}
.anim .hero.loaded .chip{opacity:1;scale:1}
.anim .hero.loaded .chip-1{transition-delay:.9s}.anim .hero.loaded .chip-2{transition-delay:1.05s}.anim .hero.loaded .chip-3{transition-delay:1.2s}
.anim .hero .ticker{opacity:0;transition:opacity 1s 1.2s}
.anim .hero.loaded .ticker{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anim .rv,.anim .rv-h .wi,.anim .stg > *,.anim .hero .k-in,.anim .hero .chip{opacity:1!important;transform:none!important;scale:1!important}
  .anim .clip,.anim .hero .photo{clip-path:none!important}
  .anim .clip img,.anim .hero .photo img{transform:none!important}
    .anim .hero .ticker{opacity:1!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}
.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}}

/* ==========================================================================
   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}}

/* ---------- Video: the poster is a button; the player loads only after a click (2026-10-13).
   Files: /media/gea-why-gea.mp4, gea-why-gea.en.vtt (captions), gea-why-gea-poster.jpg. No autoplay, no preload. ---------- */
.gvid{position:relative;width:min(100%,960px,calc((100vh - 150px)*16/9));width:min(100%,960px,calc((100svh - 150px)*16/9));min-width:min(100%,320px);margin:clamp(36px,5vw,56px) auto 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#232628;box-shadow:var(--shadow-lg)}
.gvid-btn{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;display:block;position:relative;width:100%;height:100%;background:none;cursor:pointer;color:inherit;font:inherit}
.gvid-btn img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gvid-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,38,40,0) 50%,rgba(35,38,40,.5) 100%)}
.gvid-play{position:absolute;z-index:1;left:50%;top:50%;width:88px;height:88px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(207,58,39,.22),0 18px 40px -12px rgba(207,58,39,.8);transition:transform .25s ease,box-shadow .25s ease}
.gvid-play svg{width:34px;height:34px;margin-inline-start:4px}
.gvid-meta{position:absolute;z-index:1;inset-inline-start:18px;inset-block-end:16px;display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font-size:14.5px;font-weight:600;line-height:1}
.gvid-meta i{font-style:normal;display:inline-grid;place-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600}
.gvid-btn:hover img{transform:scale(1.03)}
.gvid-btn:hover .gvid-play{transform:translate(-50%,-50%) scale(1.07)}
.gvid-btn:focus-visible{outline:none}
.gvid-btn:focus-visible .gvid-play{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--ink)}
.gvid video{display:block;width:100%;height:100%;background:#000;object-fit:contain}
.gvid video:focus{outline:none}
.gvid video:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (max-width:599px){.gvid{border-radius:18px}.gvid-play{width:64px;height:64px;box-shadow:0 0 0 9px rgba(207,58,39,.22),0 14px 30px -10px rgba(207,58,39,.8)}.gvid-play svg{width:26px;height:26px}.gvid-meta{inset-inline-start:10px;inset-block-end:10px;font-size:13px;padding:6px 12px 6px 6px}.gvid-meta i{height:22px;padding:0 8px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.gvid-btn img,.gvid-play{transition:none}.gvid-btn:hover img{transform:none}.gvid-btn:hover .gvid-play{transform:translate(-50%,-50%)}}
/* Inside a photo group (homepage graduates): the video is the big picture of the group, not a row of its own */
.gvid.pp-vid{width:auto;min-width:0;margin:0;aspect-ratio:16/9;border-radius:24px;box-shadow:0 24px 48px -30px rgba(35,38,40,.55)}
@media (max-width:599px){.gvid.pp-vid{border-radius:18px}}
/* In a text column (About, "In his words"): as wide as the text, never taller than the screen, any aspect ratio (--ar) */
.gvid.in-col{width:min(100%,calc((100vh - 150px)*var(--arn,2.19)));width:min(100%,calc((100svh - 150px)*var(--arn,2.19)));min-width:0;margin:0;aspect-ratio:var(--ar,16/9)}
@media (min-width:900px){.mv-vid .mv-k{padding-block-start:4px}}
/* A poster with a face in the middle: the play button sits on the empty side, never over the face */
.gvid.play-l .gvid-play{left:24%}
[dir="rtl"] .gvid.play-l .gvid-play{left:auto;right:24%;transform:translate(50%,-50%)}
[dir="rtl"] .gvid.play-l .gvid-btn:hover .gvid-play{transform:translate(50%,-50%) scale(1.07)}

/* Video file not on the server yet: the poster shows as a plain photo (see the view). */
.gvid[data-novideo] .gvid-cta{display:none}
.gvid[data-novideo] .gvid-btn{cursor:default}