/* uptakeAI bright design system (veneer) - shared by content pages. PRISM animated pages keep style.css. */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
 --oxford:#050533;--ink:#17173a;--body:#4a4a63;--dim:rgba(255,255,255,.62);
 --purple:#B552FF;--folly:#FF4266;--sunglow:#FCCC54;--goldink:#9A6300;--blue:#3358D4;--green:#2E7D5B;
 --mist:#f7f5fb;--line:#ece8f5;
 --warm:linear-gradient(115deg,#E0318F 0%,#FF4266 42%,#FF7A3D 74%,#FCCC54 100%);
 --spectrum:linear-gradient(90deg,#4F7CFF,#B552FF,#FF4266,#FF7A3D,#FCCC54);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Form controls do not inherit the page font. Without this, any <button>,
   <input> or <select> renders in the browser UI font instead of Poppins.
   Added 26 Aug 2026 after the pathway tiles shipped in the default font. */
button,input,select,textarea{font:inherit;color:inherit}
body{font-family:Poppins,-apple-system,Segoe UI,sans-serif;color:var(--body);background:#fff;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 34px}
a{color:inherit}
img{max-width:100%}
/* nav (Oxford Blue #050533, brand primary background) */
nav:not(.crumbs){position:sticky;top:0;z-index:20;background:var(--oxford);border-bottom:1px solid rgba(255,255,255,.06)}
nav:not(.crumbs) .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo img{height:26px;display:block}
nav:not(.crumbs) ul{display:flex;gap:32px;list-style:none}
nav:not(.crumbs) ul a{color:var(--dim);text-decoration:none;font-size:.9rem;font-weight:500}
nav:not(.crumbs) ul a:hover,nav:not(.crumbs) ul a.on{color:#fff}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--oxford);outline-offset:3px}
nav:not(.crumbs) .btn:focus-visible,.cta .btn:focus-visible{outline-color:#fff}
.btn-g{background:var(--warm);color:var(--oxford);box-shadow:0 8px 24px rgba(224,49,143,.28)}
.btn-p{background:var(--purple);color:var(--oxford)}
.btn-p:hover{box-shadow:0 10px 26px rgba(181,82,255,.38)}
.btn-o{border:2px solid var(--ink);color:var(--ink);background:transparent}
.btn-o:hover{background:var(--oxford);border-color:var(--oxford);color:#fff;box-shadow:0 10px 26px rgba(5,5,51,.22)}
nav:not(.crumbs) .btn-o{border-color:rgba(255,255,255,.55);color:#fff}
nav:not(.crumbs) .btn-o:hover{background:#fff;border-color:#fff;color:var(--oxford);box-shadow:none}
/* burger */
.navtoggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Keyboard fix, 2 September 2026. Was display:none, which makes the checkbox unfocusable, so on a
   narrow viewport (and at 400% zoom) there was no keyboard route to open the navigation at all and the
   links themselves were display:none too. WCAG 2.1.1 Keyboard, level A. Now visually hidden but focusable,
   with a visible focus ring on the burger it controls. */
.navtoggle:focus-visible ~ .burger{outline:3px solid #fff;outline-offset:4px;border-radius:3px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;margin-left:auto;margin-right:16px}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
/* hero (light) */
.hero{position:relative;overflow:hidden;background:#fff;padding:92px 0 78px}
.hero::before{content:"";position:absolute;top:-160px;right:-120px;width:600px;height:600px;border-radius:50%;background:var(--warm);filter:blur(20px);opacity:.15;z-index:0}
.hero::after{content:"";position:absolute;bottom:-220px;left:-140px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,#B552FF,transparent 68%);opacity:.10;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero .wrap.solo,.hero .wrap.split{max-width:1180px} /* was 960px; now shares the left edge with the content below (Callum, 6 Oct 2026) */
.hero h1{max-width:900px}
.kick{display:inline-flex;align-items:center;gap:10px;color:var(--oxford);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;margin-bottom:18px}
.kick::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--warm)}
h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;color:var(--ink);font-weight:700;letter-spacing:-.02em}
h1 .g,.g{background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
p.sub{font-size:1.12rem;color:var(--body);max-width:36em;margin:22px 0 30px}
.hero .btn{margin-top:6px}
.spectrum{height:5px;background:var(--spectrum)}
/* sections */
section{padding:84px 0}
.lt{background:var(--mist)}
.lbl{font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;color:var(--oxford);margin-bottom:14px}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--warm)}
.eyebrow .lbl{margin:0}
h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);line-height:1.16;letter-spacing:-.01em;font-weight:700}
h3{color:var(--ink)}
p.lede,.lede{color:var(--body);max-width:none;margin-top:16px;font-size:1.05rem} /* was max-width:44em; full width on trial (Callum, 6 Oct 2026), revert by restoring 44em */
/* statement band (warm centred) */
.statement{position:relative;overflow:hidden;text-align:center;padding:96px 0;background:var(--mist)}
.statement .wrap{max-width:900px}
.statement p.big{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:700;color:var(--ink);line-height:1.3;margin:0 auto}
.statement p.big span{background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statement .sub2{color:var(--body);margin-top:20px;font-size:1.05rem}
/* levers */
.levers{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.lever{padding:12px 26px;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid;background:#fff}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(20,20,60,.04)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warm)}
.card:nth-child(3n+2)::before{background:linear-gradient(90deg,#B552FF,#4F7CFF)}
.card:nth-child(3n)::before{background:linear-gradient(90deg,#FF6A3D,#FCCC54)}
.card h3,.card h2.ch{color:var(--ink);font-size:1.12rem;margin-bottom:9px}
.card p{color:var(--body);font-size:.96rem}
.card a{color:var(--oxford);text-decoration:none;font-weight:700}
.lt .card{background:#fff}
/* stat band */
.statband{background:var(--mist);padding:60px 0}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.statband .stat .big{font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.statband .stat .big em{font-style:normal;background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statband .stat p{color:var(--body);font-size:.92rem;margin-top:10px;max-width:16em}
/* story grid + radar (bright, in case a content page uses it) */
.storygrid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;margin-top:10px}
.radar{margin:0;text-align:center}
.radar svg{width:100%;max-width:460px;height:auto;font-family:Poppins,sans-serif;overflow:visible}
.rring{fill:none;stroke:#e3ddf1;stroke-width:1}
.rax{stroke:#e3ddf1;stroke-width:1}
.rpoly{fill:rgba(181,82,255,.15);stroke:var(--purple);stroke-width:2.5;stroke-linejoin:round}
.rdot{stroke:#fff;stroke-width:2}
.rlabel{font-size:15px;font-weight:700}
.radar figcaption{font-size:.8rem;color:#888;margin-top:10px}
/* logostrip */
/* logostrip: continuous side scroll, 2026-08-06.
   The track holds the list twice and translates by exactly half its width, so the
   loop is seamless. Paused on hover and focus, and switched off entirely for anyone
   who has asked for reduced motion, where it falls back to the old wrapped grid. */
.logostrip{margin-top:36px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logotrack{display:flex;align-items:center;gap:64px;width:max-content;
  animation:logoscroll 68s linear infinite}
.logostrip:hover .logotrack,.logostrip:focus-within .logotrack{animation-play-state:paused}
.logostrip img{height:44px;width:auto;max-width:170px;object-fit:contain;flex:none;opacity:1}
@keyframes logoscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
 .btn{transition:none}
 .btn:hover,.btn:active{transform:none}
  .logostrip{-webkit-mask-image:none;mask-image:none}
  .logotrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:40px}
  .logotrack img[aria-hidden="true"]{display:none}
}
/* faq */
.faq{margin-top:20px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--oxford);font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--body);margin-top:12px}
/* prose / article */
.prose p,article.post p{color:var(--body);margin-bottom:18px;line-height:1.75}
.prose h3,article.post h3{color:var(--ink);margin:30px 0 12px}
/* D3 (Lucy): the global reset zeroes ul padding, so list markers rendered outside the
   content box and hung to the left of the numbered headings. Indent restores alignment. */
.prose ul,.prose ol,article.post ul,article.post ol{margin:0 0 18px;padding-left:1.25em;color:var(--body);line-height:1.75}
.prose li,article.post li{margin-bottom:8px}
article.post{max-width:760px}
/* cta (warm gradient band) */
.cta{position:relative;overflow:hidden;text-align:center;color:var(--oxford);background:var(--warm);padding:70px 0}
.cta h2{color:var(--oxford)}
.cta p{color:var(--oxford)!important;margin:14px auto 26px;max-width:34em;font-size:1.06rem}
/* CTA pair: both buttons carry equal weight. A white pill beside an outline
   reads as one real option and one afterthought (Callum, 25 August). */
.cta .btn-p,.cta .btn-o{background:#fff;color:var(--oxford);border:2px solid #fff}
.cta .btn-p:hover,.cta .btn-o:hover{background:#fff;border-color:#fff;color:var(--oxford);box-shadow:0 12px 28px rgba(5,5,51,.28)}
/* footer (Oxford Blue #050533, brand primary background) */
footer{background:var(--oxford);color:#fff}
footer .wrap{display:block}
.fgrid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;padding:46px 34px 32px;max-width:1180px;margin:0 auto}
.fleft{display:flex;align-items:flex-end}
.flogo{height:50px;width:auto;display:block}
.fright{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.flinks{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.fcols{display:flex;gap:52px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:600px){.fcols{gap:28px}}

.flinks a{color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.82rem}
.flinks a:hover{color:#FF2E7A}
.flinkedin{display:inline-flex}
.flinkedin svg{width:30px;height:30px;fill:#fff;transition:fill .2s ease}
.flinkedin:hover svg{fill:#FF2E7A}
.copy{color:rgba(255,255,255,.62);font-size:.85rem;margin-top:4px;text-align:right}
.fbar{height:8px;background:linear-gradient(90deg,#B552FF,#E0318F,#FF4266,#FF7A3D,#FCCC54)}
@media(max-width:900px){
 nav ul,nav:not(.crumbs) ul{display:none}
 nav .wrap{position:relative}
 .burger{display:flex}
 .navtoggle:checked ~ ul{display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:var(--oxford);padding:22px 34px 26px;gap:18px;border-bottom:1px solid rgba(255,255,255,.1);z-index:30}
 .navtoggle:checked ~ ul a{font-size:1.05rem}
 .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
 .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .cards,.cards.two,.statband .wrap,.storygrid{grid-template-columns:1fr}
 .fgrid{grid-template-columns:1fr;gap:34px;align-items:start}.fleft{order:2}
}

/* team / people grid */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.member{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(20,20,60,.05);display:flex;flex-direction:column}
.member .photo{aspect-ratio:1/1;width:100%;object-fit:cover;display:block;background:var(--mist)}
.member .mono{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.member .body{padding:22px 24px 26px;flex:1}
.member .body .lbl{margin-bottom:8px}
.member h3,.member h2.ch{color:var(--ink);font-size:1.14rem;margin-bottom:9px}
.member .body p{color:var(--body);font-size:.95rem}
@media(max-width:900px){.teamgrid{grid-template-columns:1fr}}
@media(min-width:901px) and (max-width:1100px){.teamgrid{grid-template-columns:repeat(2,1fr)}}


/* ==== time saved, CSS-only animation (Callum, 25 August) ====
   Ticks once through week, month, year, then resolves into a mini infographic holding all
   three. Circles are sized by AREA to one scale (radius as the square root of the value),
   so 5.7 : 23 : 262 reads as 22px : 44px : 150px and the relative gain is honest. Plays once
   and rests, so there is no perpetual motion to pause. No JavaScript, per the design brief.
   Every figure is also in the caption and the aria-label. Reduced motion shows the end state. */
.timesaved{margin:0;background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:34px 32px 26px}
.ts-stage{position:relative;height:212px;margin-bottom:22px}
.ts-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0}
.ts-slide.s1{animation:tstick 1.9s cubic-bezier(.4,0,.2,1) .15s both}
.ts-slide.s2{animation:tstick 1.9s cubic-bezier(.4,0,.2,1) 1.95s both}
.ts-slide.s3{animation:tstick 1.9s cubic-bezier(.4,0,.2,1) 3.75s both}
.ts-when{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--body);margin-bottom:4px}
.ts-num{font-size:clamp(3rem,7vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;
  background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ts-unit{font-weight:700;color:var(--oxford);font-size:1.02rem;margin-top:6px}
@keyframes tstick{0%{opacity:0;transform:translateY(14px)}18%{opacity:1;transform:none}
  82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
/* the resolve */
.ts-final{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;opacity:0;
  animation:tsin .7s cubic-bezier(.3,.9,.4,1) 5.6s both}
.ts-dot{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0}
.ts-disc{display:block;border-radius:50%;background:var(--warm);margin-bottom:10px;
  transform:scale(0);animation:tspop .55s cubic-bezier(.34,1.5,.5,1) both}
.ts-dot.d1 .ts-disc{width:22px;height:22px;animation-delay:5.7s}
.ts-dot.d2 .ts-disc{width:44px;height:44px;animation-delay:5.85s}
.ts-dot.d3 .ts-disc{width:150px;height:150px;animation-delay:6.0s}
.ts-dot b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--oxford);line-height:1}
.ts-dot b i{font-style:normal;font-size:.5em;font-weight:700;letter-spacing:0;color:var(--body);margin-left:3px}
.ts-dot em{font-style:normal;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--body);margin-top:4px}
@keyframes tsin{from{opacity:0}to{opacity:1}}
@keyframes tspop{from{transform:scale(0)}to{transform:scale(1)}}
.timesaved figcaption{font-size:.82rem;color:var(--body);line-height:1.55;border-top:1px solid var(--line);padding-top:14px;margin:0}
.timesaved figcaption b{color:var(--oxford)}
@media(prefers-reduced-motion:reduce){
 .ts-slide{animation:none;opacity:0}
 .ts-final{animation:none;opacity:1}
 .ts-disc{animation:none;transform:scale(1)}
}
@media(max-width:520px){.ts-final{gap:10px}.ts-stage{height:200px}
 .ts-dot.d3 .ts-disc{width:120px;height:120px}}

/* ==== collapsible curriculum list (Callum, 25 August) ====
   Ten modules as <details>, so the page stays short and the detail is one click away.
   No JavaScript: native disclosure, keyboard operable, and the summary carries the module
   number so the sequence still reads when everything is closed. */
.modlist{max-width:900px;margin-top:26px;border-top:1px solid var(--line)}
.mod{border-bottom:1px solid var(--line)}
.mod summary{display:flex;align-items:center;gap:22px;padding:16px 0;cursor:pointer;list-style:none}
.mod summary::-webkit-details-marker{display:none}
.mod summary::after{content:"+";margin-left:auto;font-weight:700;font-size:1.3rem;color:var(--oxford);line-height:1}
.mod[open] summary::after{content:"\2013"}
.mod summary:focus-visible{outline:3px solid var(--oxford);outline-offset:3px}
.mod summary .num{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;min-width:44px;
  background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mod summary .modname{font-weight:700;color:var(--ink);font-size:1.02rem}
.mod summary:hover .modname{color:var(--oxford)}
.modbody{padding:0 0 22px 66px}
.modbody .body{color:var(--body);font-size:.9rem;line-height:1.6;margin:0 0 16px;max-width:62em}
.modbody .lbl{margin-bottom:10px}
.los{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px}
.los li{font-size:.86rem;color:var(--body);line-height:1.5;padding-left:14px;position:relative}
.los li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--warm)}
.los b{display:block;color:var(--oxford);font-weight:700;margin-bottom:2px}
@media(max-width:760px){.modbody{padding-left:0}.los{grid-template-columns:1fr}
 .mod summary .num{font-size:1.2rem;min-width:34px}.mod summary{gap:14px}}

/* ==== SUSY sector curriculum matrix (Callum, 25 August) ====
   Used by susy-housing.html and any sector page copied from it. The table is wide by
   design (ten modules), so it scrolls inside its own container rather than the page,
   with a focusable region so it is reachable by keyboard. */
.matrixwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:26px}
.matrixwrap:focus-visible{outline:3px solid var(--oxford);outline-offset:2px}
.matrix{border-collapse:collapse;width:max-content;min-width:100%;font-size:.82rem}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.matrix thead th{position:sticky;top:0;background:var(--oxford);color:#fff;font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;z-index:2}
.matrix thead th span{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:.72rem;
  color:rgba(255,255,255,.78);margin-top:3px;white-space:normal;max-width:15ch}
.matrix tbody th{position:sticky;left:0;background:var(--mist);color:var(--oxford);font-weight:700;
  white-space:normal;min-width:15ch;z-index:1;border-right:1px solid var(--line)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix td{color:var(--body);min-width:14ch}
.matrix tbody tr:hover td{background:var(--mist)}

/* ==== promoted from susy.html (page components) ==== */
/* SUSY page: product imagery */
/* D1 (Lucy): SUSY hero was ~770px tall with the nav, so the page opened mid-scroll.
   The driver is the portal screenshot, which is 1300x1225 and rendered at its natural
   ratio. Capped it, trimmed the logo and the hero padding. */
.hero.susyhero{padding:52px 0 44px}
.susyhero-grid{display:grid;grid-template-columns:1.02fr 1.1fr;gap:52px;align-items:center}
.susyhero-grid .shot{width:auto;max-width:100%;max-height:420px;margin:0 auto}
.susylogo{height:118px;width:auto;display:block;margin-bottom:18px}
.shot{border-radius:16px;box-shadow:0 24px 60px rgba(20,20,60,.16);border:1px solid var(--line);display:block;width:100%;background:#fff}
.shotcap{font-size:.85rem;color:var(--body);text-align:center;margin-top:14px}
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:38px 0 8px}
.sector{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;box-shadow:0 10px 30px rgba(20,20,60,.04);color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.sector:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,20,60,.12);border-color:var(--purple)}
a.sector:focus-visible{outline:3px solid var(--oxford);outline-offset:3px}
@media(prefers-reduced-motion:reduce){a.sector{transition:none}a.sector:hover{transform:none}}
.sector img{width:46px;height:46px;object-fit:contain}
.sector span{font-weight:700;color:var(--ink);font-size:.94rem}
@media(max-width:900px){.susyhero-grid{grid-template-columns:1fr}.sectors{grid-template-columns:repeat(2,1fr)}}


/* ==== promoted from team.html (page components) ==== */
/* team tiles: photo + warm name-band, bio opens on the (i) toggle */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;align-items:start}
.member{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(20,20,60,.05);display:block}
.biotoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.photowrap{position:relative;line-height:0}
.photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--mist)}
.nameband{position:absolute;left:0;right:0;bottom:0;min-height:92px;background:var(--warm);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.2}
.nameband h3,.nameband h2.ch{color:#fff;font-size:1.1rem;margin:0}
.nameband .role{display:block;color:rgba(255,255,255,.92);font-size:.82rem;font-weight:500;margin-top:3px}
.nb-right{display:flex;align-items:center;gap:12px;flex:none}
.fmark{height:15px;width:auto;display:block}
.ibtn{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .2s ease;user-select:none}
.ibtn:hover{transform:scale(1.09)}
.bio{max-height:0;overflow:hidden;transition:max-height .45s ease;padding:0 24px}
.bio p{color:var(--body);font-size:.95rem;margin-bottom:13px}
.bio p:first-child{margin-top:22px}
.bio p:last-child{margin-bottom:24px}
.biotoggle:checked ~ .bio{max-height:2200px}
.biotoggle:checked ~ .photowrap .ibtn{background:var(--ink);color:#fff}
@media(max-width:1100px){.teamgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.teamgrid{grid-template-columns:1fr}}


/* ==== promoted from index.html (light-section claim variant) ==== */
/* light-section variant for the numbered claim rows (component is dark by default) */
.lt .claims,.lt .claim{border-color:#e6e3f2}
.lt .claim h3{color:var(--oxford)}
.lt .claim .body{color:#555}


/* ==== contact form components ==== */
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:880px){.row{grid-template-columns:1fr}}
.note{font-size:.85rem;color:var(--body);margin-top:14px}

/* Contact form fields (added 7 Aug 2026). Scoped to `form` so the nav toggle
   checkbox, which is an <input> on every page, is untouched. */
form label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
form input[type=text],form input[type=email],form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px}
form textarea{resize:vertical;min-height:130px}
form input::placeholder,form textarea::placeholder{color:#9a9ab0}
form input[type=text]:focus,form input[type=email]:focus,form textarea:focus{outline:2px solid var(--purple);outline-offset:-1px;border-color:var(--purple)}
form label span[aria-hidden]{color:var(--oxford)}
form .btn{margin-top:4px}


/* typography: even multi-line headings, prevent orphan/widow last lines (Lucy feedback) */
h1,h2,h3{text-wrap:balance}
/* p,li text-wrap:pretty removed 6 Oct 2026: it pulled words down to avoid short last lines, leaving lines ending visibly short (Callum) */


/* collapse doubled vertical space where same-tone (grey) sections stack, avoids empty grey bands */
section.lt + section.lt,
section.lt + section.quote-feature,
section.quote-feature + section.lt,
section.quote-feature + section.quote-feature{padding-top:0}


/* measure: cap section headings so they don't run the full container width (Lucy typography note).
   em is relative to the heading, so it scales with the responsive font size. */
h2{max-width:18em}
/* keep capped headings centred in centred contexts */
.cta h2,.statement h2,[style*="text-align:center"] h2{margin-left:auto;margin-right:auto}

/* force a row break in a chip row (used to split the PRISM Levers 3 then 2) */
.levbreak{flex-basis:100%;height:0;margin:0;padding:0;border:0}

/* Hero image band, matching the Programmes cluster (added 30 Jul 2026). */
.heroshot{margin:0}
.heroshot img{display:block;width:100%;height:clamp(280px,36vw,400px);object-fit:cover}
/* PRISM pages banner: the prism sits at the right edge of a wide dark canvas, so pin the image to the right edge */
.heroshot.right img{object-position:right center}
/* Team page: the founders banner leads the page and shows the whole photo (6 Oct 2026) */
.heroshot.full img{height:auto;max-height:620px;object-position:center top}
@media (max-width:700px){.heroshot.full img{height:260px;object-position:62% top}}

/* ===== Graduated page-local patterns, folded in 2026-08-06 =====
   Previously inline <style> blocks in ai-champions, ai-literacy, copilot-champions,
   exploration-day, partners, programmes, responsible-ai and testimonials.
   portrait-survey.html is a self-contained tool and is deliberately excluded.
   Hero band is governed by the single .heroshot rule above; the seven page copies
   (400px / 420px / 470px) were deleted and every page now uses the canonical band. */

/* D2 (Lucy): bullets to fit one line across the programme pages. Font size alone could
   not do it, so the text column takes more of the row as well. */
.mediarow{display:grid;grid-template-columns:1.25fr 1fr;gap:52px;align-items:center;margin-top:10px;scroll-margin-top:90px}
.mediarow.flip .mtext{order:2}
.mediarow figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(20,20,60,.13)}
.mediarow figure img{display:block;width:100%;height:340px;object-fit:cover}
.mediarow .lede{margin-top:14px}
.mediarow ul{margin:18px 0 0 0;padding:0;list-style:none}
.mediarow ul li{position:relative;padding-left:18px;margin-bottom:9px;font-size:.86rem;line-height:1.5}
.mediarow ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--warm)}
.factline{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.factline span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 15px;font-size:.82rem;font-weight:600;color:var(--ink)}
.mediarow figure.plain{background:#fff;box-shadow:none;border:1px solid var(--line)}
.mediarow figure.plain img{object-fit:contain;height:auto;padding:22px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;counter-reset:rung}
.rung{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;position:relative;overflow:hidden}
.rung::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warm)}
.rung:nth-child(2)::before{background:linear-gradient(90deg,#B552FF,#4F7CFF)}
.rung:nth-child(3)::before{background:linear-gradient(90deg,#FF6A3D,#FCCC54)}
.rung .step{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oxford)}
.rung h3{margin-top:8px;font-size:1.16rem}
.rung p{font-size:.93rem;margin-top:10px}
.rung a{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--oxford);text-decoration:none}
.mediarow figure.emblem{background:var(--mist);box-shadow:none;border:1px solid var(--line)}
.mediarow figure.emblem img{object-fit:contain;padding:56px}
.formatnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.formatnav a{text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:9px 20px;font-size:.9rem;font-weight:600;color:var(--ink);background:#fff}
.formatnav a:hover{border-color:var(--purple);color:var(--oxford)}
.pcard{display:flex;flex-direction:column}
/* Logo sizing, 25 August. Source files carried 500-600px canvases with heavy dead
   margin, so a contain-fit into a small box rendered the mark itself tiny. Files are
   now trimmed to the mark; the box is enlarged to match (Lucy B5/B6). */
.pcard .plogo{height:56px;width:auto;max-width:220px;object-fit:contain;object-position:left center;margin-bottom:18px}
.pcard h2.pname{font-weight:700;color:var(--ink);font-size:1.12rem;margin-bottom:9px;line-height:1.2}
.pcard p+p{margin-top:12px}
.pcard .more{margin-top:auto;padding-top:16px;font-weight:700;font-size:.86rem}
.tcard .more{margin-top:14px;font-weight:700;font-size:.86rem}
.pq{border-left:3px solid var(--purple);padding-left:16px;margin-top:16px}
.pq p{font-size:.92rem;font-style:italic;color:var(--body)}
.pq .attr{font-style:normal;font-weight:700;color:var(--oxford);font-size:.82rem;margin-top:8px}
.exclusive{display:inline-block;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:4px 13px;font-size:.74rem;font-weight:700;color:var(--oxford);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.tile{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(20,20,60,.05);transition:transform .18s ease,box-shadow .18s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(20,20,60,.12)}
.tile .shot{height:168px;background:var(--mist);overflow:hidden}
.tile .shot img{display:block;width:100%;height:100%;object-fit:cover}
.tile .shot.contain img{object-fit:contain;padding:26px}
/* the colour pip the old-site banners carry in the photo itself, drawn for tiles whose image has none */
.tile .shot.pip{position:relative}
.tile .shot.pip::after{content:"";position:absolute;left:0;bottom:0;width:41%;height:7px;background:linear-gradient(90deg,#b552ff 0%,#ff4964 50%,#ffcc57 100%)}
.tile .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.tile h3{font-size:1.22rem;letter-spacing:-.015em;margin-top:4px}
.tile p{color:var(--body);font-size:.94rem;margin-top:10px}
.tile .inside{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.83rem;line-height:1.9}
.tile .inside a{color:var(--body);text-decoration:none;border-bottom:1px solid var(--line)}
.tile .inside a:hover{color:var(--oxford);border-color:var(--purple)}
.tile .go{margin-top:auto;padding-top:18px;font-weight:700;font-size:.92rem;color:var(--oxford);text-decoration:none}
.tile .go:hover{text-decoration:underline}
.tile .meta{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--oxford)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warm)}
.pillar:nth-child(2)::before{background:linear-gradient(90deg,#B552FF,#4F7CFF)}
.pillar:nth-child(3)::before{background:linear-gradient(90deg,#FF6A3D,#FCCC54)}
.pillar:nth-child(4)::before{background:linear-gradient(90deg,#2E7D5B,#4F7CFF)}
.pillar h3{font-size:1.1rem}
.pillar p{font-size:.91rem;margin-top:10px}
.artefacts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.artefact{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:24px}
.artefact .n{font-size:1.9rem;font-weight:700;line-height:1;background:var(--warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.artefact h3{font-size:1.04rem;margin-top:10px}
.artefact p{font-size:.9rem;margin-top:8px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tcard{display:flex;flex-direction:column}
.tcard .clogo{height:46px;width:auto;max-width:190px;object-fit:contain;object-position:left center;margin-bottom:18px}
.tcard h2.cname{font-weight:700;color:var(--ink);font-size:1.02rem;margin-bottom:16px;line-height:1.2}
.tcard blockquote{margin:0;color:var(--body);font-size:.95rem}
.tcard blockquote p+p{margin-top:12px}
.tcard .who{margin-top:auto;padding-top:18px;font-weight:700;color:var(--oxford);font-size:.85rem}
.tcard .who span{display:block;font-weight:500;color:var(--body);font-size:.82rem;margin-top:2px}

@media (max-width:860px){
  .mediarow{grid-template-columns:1fr;gap:24px}
  .mediarow.flip .mtext{order:0}
  .mediarow figure img{height:240px}
}

@media (max-width:1000px){
  .ladder{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .artefacts{grid-template-columns:1fr}
}

@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
}

/* PRISM lens icons on the catalogue cards, 2026-08-06.
   Individual, team, whole organisation. Stroke-only so each inherits the card's
   accent colour from the label above it. */
.lensicon{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 0 14px;opacity:.92}
.steps .step .lensicon{margin-bottom:12px}

/* The binding-constraint widget on the PRISM page, 2026-08-06.
   Five Levers, adoption capped by the lowest. No construct names anywhere: those
   are IP and never appear on a public page (Callum, 6 Aug 2026). */
.bcx{display:grid;grid-template-columns:340px 1fr;gap:38px;align-items:start;margin-top:34px}
@media(max-width:860px){.bcx{grid-template-columns:1fr;gap:26px}}
.bcx .lvrow{display:flex;align-items:center;gap:14px;margin-bottom:11px;font-size:.95rem}
.bcx .lvrow label{width:104px;font-weight:700;flex:none}
.bcx .lvrow input[type=range]{flex:1;accent-color:var(--oxford)}
.bcx .lvrow output{width:22px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.bcx .gauge{background:var(--mist);border-radius:16px;padding:24px 26px}
.bcx .gauge .cap{font-size:.85rem;color:var(--body);margin:0 0 10px}
.bcx .track{height:28px;border-radius:999px;background:#e2e0ee;overflow:hidden}
.bcx .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#B552FF,#FF4266,#FCCC54);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.bcx .say{margin:14px 0 0;font-size:.95rem;color:var(--ink);min-height:3.2em}
.bcx .say b{color:var(--oxford)}
.bcx .binder{margin-top:16px;border-left:3px solid var(--line);padding-left:16px}
.bcx .binder h3{font-size:1rem;margin:0 0 4px}
.bcx .binder p{font-size:.9rem;margin:0 0 8px;color:var(--body)}
.bcx .binder .costs{font-size:.88rem;color:var(--body)}
.bcx .binder .costs b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.bcx .fill{transition:none}}

/* Reason list, 2026-08-06. Replaces four near-empty tiles on About: the same
   gradient dot the media rows already use, so this is the existing bullet idiom
   rather than a second one. */
.reasons{list-style:none;max-width:52em;margin-top:28px}
.reasons li{position:relative;padding-left:26px;margin-bottom:16px;line-height:1.62}
.reasons li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--warm)}
.reasons li b{color:var(--ink);font-weight:700}

/* Reason list drop-in, 2026-08-06. Deliberately an IntersectionObserver rather
   than a scroll-driven CSS animation: the CSS-only route was tried on the hero
   bands the same day and did not render in Chrome, so this uses the approach
   that is certain to work. Two guards: the hidden state only applies when .js
   is present, so with scripting off the list is simply visible; and reduced
   motion switches the movement off entirely. */
.js .reasons li{opacity:0;transform:translateY(-16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.js .reasons li.inview{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reasons li{opacity:1;transform:none;transition:none}
}

/* Role-level toggle radar on the Mini page, 2026-08-06. Five Levers, four views.
   The whole-workforce average stays on the chart as a dashed reference whenever a
   single group is selected, so the point of the section (the distance between
   groups) is visible rather than remembered. */
.radx{margin-top:28px}
.radx .rsel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.radx .rsel button{font:inherit;font-size:.86rem;padding:8px 18px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;transition:background .15s ease}
.radx .rsel button:hover{background:var(--mist)}
.radx .rsel button[aria-pressed="true"]{background:var(--oxford);border-color:var(--oxford);color:#fff}
.radx .rgrid{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:40px;align-items:center}
@media(max-width:860px){.radx .rgrid{grid-template-columns:1fr;gap:24px}}
.radx svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;overflow:visible}
.radx .rread{font-size:1rem;line-height:1.62;color:var(--body);min-height:6em;margin:0}
.radx .rtab{border-collapse:collapse;margin-top:20px;font-size:.9rem;width:100%;max-width:330px}
.radx .rtab td{padding:7px 12px;border-bottom:1px solid var(--line);color:var(--body)}
.radx .rtab td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);width:58px}
.radx .rtab td.up{color:#2E7D5B}
.radx .rtab td.dn{color:#C71D63}


/* Lever definitions behind the pills on the PRISM main page, 2026-08-06.
   Single home for this content: it previously existed on mini.html as well and
   in a third wording inside the binding-constraint widget on prism.html. */
.levers .lever{font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.levers .lever:hover{background:var(--mist)}
/* the pressed fill is set inline from JS: currentColor cannot be used here
   because it resolves to the overridden white text colour, not the pill hue */
.levdef{margin-top:24px;min-height:11em;max-width:34em}
.levdef .lq{font-size:1.06rem;font-weight:700;margin:0 0 10px;line-height:1.45}
.levdef .ld{font-size:.97rem;line-height:1.64;color:var(--body);margin:0}
@media(max-width:900px){.levdef{min-height:0}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstate{margin-top:18px;font-size:.95rem;line-height:1.5}
.formstate:empty{display:none}
.formstate.is-success{border-left:4px solid var(--green);background:var(--mist);color:var(--ink);padding:14px 18px}
.formstate.is-error{border-left:4px solid var(--folly);background:var(--mist);color:var(--ink);padding:14px 18px}
.formstate.is-notice{border-left:4px solid var(--goldink);background:var(--mist);color:var(--ink);padding:14px 18px}
.formstate a{color:var(--ink);font-weight:700}

/* pathway tiles: mirrors the SUSY portal treatment (26 Aug 2026).
   Image card, dark wash at the foot, name in white bottom-left.
   Until a pathway photograph exists, .ptile falls back to a tinted
   gradient keyed to --oxford, so the pattern works with or without art.
   To add a photo:  style="background-image:url(/assets/pathways/<name>.webp)" */
.ptiles{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:34px}
.ptile{position:relative;display:flex;align-items:flex-end;min-height:186px;border-radius:16px;overflow:hidden;
  background-color:var(--oxford);background-size:cover;background-position:center;
  color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(20,20,60,.10);
  transition:transform .18s ease,box-shadow .18s ease}
/* purple tint removed 26 Aug 2026: it was a fallback for tiles with no
   photograph, and once the real images landed it flattened ten different
   photos into one lilac. The wash below carries the contrast on its own. */
.ptile::before{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(5,5,51,.10) 0%,rgba(5,5,51,.04) 60%,rgba(5,5,51,0) 100%)}
.ptile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,51,.95) 0%,rgba(5,5,51,.60) 42%,rgba(5,5,51,0) 78%)}
.ptile span{font-family:Poppins,-apple-system,Segoe UI,sans-serif;position:relative;z-index:1;padding:18px 18px 20px;font-weight:700;font-size:.98rem;line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
.ptile:hover,.ptile:focus-visible{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,20,60,.18)}
.ptile:focus-visible{outline:3px solid var(--oxford);outline-offset:3px}
@media(max-width:1100px){.ptiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.ptiles{grid-template-columns:repeat(2,1fr)}.ptile{min-height:150px}}

/* pathway disclosure panel (26 Aug 2026). The tile opens a panel rather than
   a hover tooltip: a tooltip is unreachable on touch and on a keyboard, and
   ten module labels will not fit inside a tile. Hover previews the intent,
   click and Enter open it properly. */
.ptile[aria-expanded="true"]{transform:translateY(-3px);box-shadow:0 0 0 3px var(--purple),0 16px 40px rgba(20,20,60,.20)}
.pwpanel{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px 28px;
  box-shadow:0 10px 30px rgba(20,20,60,.06)}
.pwpanel[hidden]{display:none}
.pwpanel h3{color:var(--oxford);font-size:1.2rem;margin-bottom:4px}
.pwpanel .pwsub{color:var(--body);font-size:.9rem;margin-bottom:18px}
.pwgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pwmod{border-top:2px solid var(--purple);padding-top:10px}
.pwmod .pwm{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--goldink)}
.pwmod .pwt{display:block;font-size:.78rem;color:var(--body);margin-top:2px}
.pwmod .pwc{display:block;font-size:.92rem;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.3}
.pwclose{font-family:Poppins,-apple-system,Segoe UI,sans-serif;margin-top:20px;font-size:.86rem;font-weight:700;background:none;border:0;color:var(--oxford);
  cursor:pointer;text-decoration:underline;padding:0}
@media(max-width:1100px){.pwgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pwgrid{grid-template-columns:repeat(2,1fr)}}

/* pathway panel, added detail 26 Aug 2026: the applied example was reading as
   the whole module. Each card now shows what everyone learns, then how this
   role meets it, so the cell is clearly an illustration and not the syllabus. */
.pwmod .pwlo{display:block;font-size:.78rem;color:var(--body);margin-top:6px;line-height:1.45}
.pwmod .pwlo b{color:var(--ink);font-weight:700}
.pwmod .pwapp{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.pwmod .pwapp .pwk{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--goldink)}
.pwgrid{grid-template-columns:repeat(5,1fr);align-items:start}
@media(max-width:1400px){.pwgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.pwgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pwgrid{grid-template-columns:repeat(2,1fr)}}

/* Skip link, added 2 September 2026. Off screen until it takes focus, then it lands
   top-left over the nav. Oxford Blue on white is 19.52:1. */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;color:var(--oxford);
  font-weight:700;font-size:.95rem;padding:12px 20px;border:2px solid var(--oxford);
  border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

/* Heading order fix, 2 September 2026. Card and member headings promoted from h3 to h2 so no
   page skips a level. The .ch class carries the original card styling; nothing changes visually. */
.card h2.ch,.member h2.ch,.nameband h2.ch{max-width:none}

/* Breadcrumbs, added 2 September 2026. Orientation for anyone landing on a child page from
   search. Oxford Blue on white is 19.52:1; the separator is decorative and hidden from
   screen readers, which read the list structure instead. */
.crumbs{position:static;background:none;border:0;z-index:auto;margin:0 0 16px;font-size:.82rem;font-weight:600;letter-spacing:.02em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--oxford);text-decoration:none;border-bottom:1px solid rgba(5,5,51,.28)}
.crumbs a:hover{border-bottom-color:var(--oxford)}
.crumbs .sep{color:var(--body);opacity:.7}
.crumbs [aria-current="page"]{color:var(--body);font-weight:500}

/* Index page, 2 September 2026. Grid rather than CSS columns: multi-column flows the content
   down one column and into the next, so group headings land at different heights. A grid puts
   each group in a cell, and every heading in a row starts on the same line. */
.idx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 54px;align-items:start;margin-top:8px}
.idx section{margin:0;padding:0}
.idx h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--body);font-weight:700;margin:0 0 10px;max-width:none}
.idx ul{list-style:none;margin:0;padding:0}
.idx li{margin:0 0 7px;line-height:1.4}
.idx a{color:var(--oxford);text-decoration:none;font-weight:600;font-size:.98rem;border-bottom:1px solid transparent}
.idx a:hover{border-bottom-color:var(--oxford)}
@media(max-width:1000px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.idx{grid-template-columns:1fr;gap:30px}}

/* SUSY sector tiles with no page yet (29 Sep 2026, Callum): a "Coming soon"
   tooltip on hover. Also shown on keyboard focus and on tap (the tile is
   focusable), since a hover-only tooltip is unreachable on touch and keyboard. */
.sector.soon{position:relative;cursor:default}
.sector.soon::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--oxford);color:#fff;font-size:.78rem;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease}
.sector.soon:hover::after,.sector.soon:focus::after,.sector.soon:focus-visible::after{opacity:1}
.sector.soon:focus-visible{outline:3px solid var(--oxford);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sector.soon::after{transition:none}}

/* Team page: partners and network logo row (6 Oct 2026) */
.partnerrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 36px;margin-top:36px}
.partnerrow img{height:44px;width:auto;max-width:165px;object-fit:contain;display:block}

/* Real event photos (6 Oct 2026): home "In the room" grid, About values photo, Partners card photo */
.eventgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px}
.eventgrid img{display:block;width:100%;height:210px;object-fit:cover;border-radius:14px}
.valuesshot{margin:22px 0 6px;max-width:560px;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(20,20,60,.13)}
.valuesshot img{display:block;width:100%;height:auto}
.pcard .pphoto{display:block;width:100%;height:auto;border-radius:12px;margin-top:16px}
@media (max-width:900px){.eventgrid{grid-template-columns:repeat(2,1fr)}.eventgrid img{height:160px}.eventgrid img:last-child{grid-column:1/-1}}

/* Programmes, Art of the Possible: two stage photos (6 Oct 2026) */
.possgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.possgrid img{display:block;width:100%;height:300px;object-fit:cover;border-radius:18px;box-shadow:0 18px 44px rgba(20,20,60,.13)}
@media (max-width:900px){.possgrid{grid-template-columns:1fr}.possgrid img{height:220px}}

/* Card rows (6 Oct 2026, Callum): an incomplete last row sits centred, so five cards read 3 over 2 rather than a gap */
.cards{display:flex;flex-wrap:wrap;justify-content:flex-start}
/* centre only a short LAST row; a single short row stays left aligned (Callum) */
.cards:has(> :nth-child(4)),.cards.two:has(> :nth-child(3)){justify-content:center}
.cards>*{flex:0 0 calc((100% - 44px)/3);min-width:0}
.cards.two>*{flex-basis:calc((100% - 22px)/2)}
@media(max-width:900px){.cards>*,.cards.two>*{flex-basis:100%}}

/* Banner pages: the page heading block sits on the banner image (Callum, 7 Oct 2026). Same words and links as before; colours for a dark background */
.hero.herobanner{background:#010227;padding:30px 0;isolation:isolate}
.hero.herobanner::before,.hero.herobanner::after{display:none}
.herobanner .hb-art{position:absolute;inset:0;z-index:-2}
.herobanner .hb-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.herobanner .hb-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,2,39,.94) 0%,rgba(1,2,39,.86) 42%,rgba(1,2,39,0) 68%)}
.herobanner.onphoto .hb-art img{object-position:center center}
.herobanner.onphoto .hb-art::after{background:linear-gradient(90deg,rgba(5,5,51,.92) 0%,rgba(5,5,51,.82) 45%,rgba(5,5,51,.45) 75%,rgba(5,5,51,.25) 100%)}
.herobanner .wrap{min-height:340px;display:flex;flex-direction:column;justify-content:center}
.hb-in{width:100%}
/* PRISM pages: one fixed banner height so the four pages match when switching between them; content starts at the same point */
.herobanner:not(.onphoto) .wrap{min-height:412px;justify-content:flex-start}
.herobanner .crumbs{margin-bottom:12px}
.herobanner .famstrip{margin-bottom:18px}
.herobanner .kick{color:#fff;margin-bottom:14px}
.herobanner h1{color:#fff}
.herobanner p.sub{color:rgba(255,255,255,.82);margin:18px 0 24px}
.herobanner .crumbs a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.herobanner .crumbs a:hover{border-bottom-color:#fff}
.herobanner .crumbs .sep{color:rgba(255,255,255,.7);opacity:1}
.herobanner .crumbs [aria-current="page"]{color:rgba(255,255,255,.75)}
.herobanner .famstrip a{color:#fff;border-color:rgba(255,255,255,.4)}
.herobanner .famstrip a:hover{color:#fff;border-color:#b552ff}
.herobanner .famstrip a.cur{color:#fff;border-color:#b552ff;background:rgba(181,82,255,.3)}
.herobanner .btn-o{border-color:rgba(255,255,255,.55);color:#fff}
.herobanner .btn-o:hover{background:#fff;border-color:#fff;color:var(--oxford)}
@media (min-width:701px) and (max-width:1240px){.herobanner:not(.onphoto) .hb-art::after{background:linear-gradient(90deg,rgba(1,2,39,.95) 0%,rgba(1,2,39,.88) 55%,rgba(1,2,39,.35) 80%,rgba(1,2,39,0) 92%)}}
@media (max-width:700px){
.hero.herobanner{padding:0 0 44px}
.herobanner .hb-art{position:relative;inset:auto;z-index:0;height:240px;margin-bottom:30px}
.herobanner .hb-art::after{display:none}
.herobanner .wrap{min-height:0}
}

/* Banner images composed with their subject on the right (SUSY logo, Team photo, 7 Oct 2026) */
.herobanner .hb-art img.hb-top{object-position:center top}
@media (max-width:700px){.herobanner .hb-art img.hb-phone-right{object-position:right top}}

/* SUSY: a solid navy panel with an angled edge, cut straight to the white logo side, instead of a fade (Callum, 7 Oct 2026, for legibility). The edge follows the text column, so the text always sits on solid navy */
.herobanner.onphoto.hb-clear .hb-art::after{background:#050533;clip-path:polygon(0 0,calc(max(34px,(100% - 1180px)/2 + 34px) + 830px) 0,calc(max(34px,(100% - 1180px)/2 + 34px) + 730px) 100%,0 100%)}
@media (min-width:701px) and (max-width:1260px){.herobanner.onphoto.hb-clear .hb-art::after{clip-path:none}}
/* Team: Lucy and Andrew cut out and laid over the fade, so the wash sits behind them */
.herobanner .hb-art img.hb-cut{position:absolute;inset:0;z-index:1}

/* Diagrams with small text get the wider column and no inner padding (Callum, 7 Oct 2026: BRAIN diagram too small, then full width too big) */
.mediarow.stack{grid-template-columns:1fr 1.3fr;gap:44px}
.mediarow.stack figure.plain img{padding:0}
@media (max-width:900px){.mediarow.stack{grid-template-columns:1fr}}

/* Full-bleed artwork shown whole, like the photos: no white frame (Callum, 7 Oct 2026, iceberg) */
.mediarow figure.bare img{height:auto;object-fit:contain}

/* Long web addresses in article text wrap on phones instead of pushing the page sideways (7 Oct 2026) */
main p a,main li a{overflow-wrap:anywhere}