/* Direction B — Aurora tech. Living gradient light behind glass surfaces; depth and motion. */
:root{
  --navy:#1B2A41; --deep:#0C1424; --stone:#EDE6E3; --crimson:#D90368; --peri:#6D61FF; --blue:#246BFD; --corp:#1E4F95; --lime:#DBFE87;
  --ink:#F3EFEC; --ink-2:rgba(243,239,236,.74); --muted:rgba(243,239,236,.5);
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.09); --edge:rgba(255,255,255,.12); --edge-2:rgba(255,255,255,.22);
  --display:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --container:1240px; --gutter:clamp(20px,4vw,56px); --section:clamp(80px,10vw,150px);
  --radius:22px; --radius-sm:14px;--r-field:12px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--deep);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.display{font-family:var(--display);letter-spacing:.03em;line-height:.95}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch}
strong{font-weight:600}
/* aurora background: drifting light + live network canvas */
/* The drifting light used to be four absolutely positioned elements,each a large
   layer carrying mix-blend-mode:screen. Painting them as background layers on this
   one element removes four layers and the blend,and costs a single paint. The
   geometry stays in viewport units,so it holds at every aspect ratio: measured
   against the old version at 16:10,16:9,ultrawide and portrait,the mean channel
   difference is 0.75 to 1.94 out of 255. The blobs no longer drift. */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(closest-side,rgba(109,97,255,.76) 0%,rgba(109,97,255,.608) 26%,rgba(109,97,255,.2584) 60%,rgba(109,97,255,0) 100%) -18vw -24vw / 62vw 62vw no-repeat,radial-gradient(closest-side,rgba(36,107,253,.76) 0%,rgba(36,107,253,.608) 26%,rgba(36,107,253,.2584) 60%,rgba(36,107,253,0) 100%) right -18vw top 6vh / 52vw 52vw no-repeat,radial-gradient(closest-side,rgba(217,3,104,.19) 0%,rgba(217,3,104,.152) 26%,rgba(217,3,104,.0646) 60%,rgba(217,3,104,0) 100%) 32vw 52vh / 38vw 38vw no-repeat,radial-gradient(closest-side,rgba(219,254,135,.1478) 0%,rgba(219,254,135,.1182) 26%,rgba(219,254,135,.0502) 60%,rgba(219,254,135,0) 100%) 60vw 20vh / 22vw 22vw no-repeat,radial-gradient(120% 80% at 50% 0%,#152039 0%,var(--deep) 60%)}
/* The faint grid over the aurora. Removed in cd7d2c5 for the frames it cost;
   Adnan wants the texture back — it is what gives the band behind the header its
   depth. Restored WITHOUT the 40s drift and without will-change: a static masked
   layer is rasterised once and then only composited,where the animated one was
   re-rasterised. The drift was 64px over 40 seconds and nobody could see it. */
.aurora::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent);-webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent)}
.net{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.7}
/* glass */
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s;white-space:nowrap;position:relative}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:linear-gradient(135deg,var(--peri),var(--blue));color:#fff;box-shadow:0 10px 30px rgba(109,97,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(109,97,255,.5)}
.btn-ghost{background:var(--glass);border-color:var(--edge-2);color:var(--ink);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--glass-2)}
.link{font-weight:600;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.link svg{width:16px;height:16px;transition:transform .25s}
.link:hover svg{transform:translateX(3px)}
/* header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:center;padding:14px var(--gutter);pointer-events:none}
.nav{pointer-events:auto;width:100%;max-width:var(--container);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0;border-radius:999px;border:1px solid transparent;transition:all .5s var(--ease)}
/* The header's transition is back to `all`,as designed: the shadow and the
   backdrop blur fade with the compacting instead of snapping on. It was
   narrowed in d03efa5 on the assumption it was costing frames. It was not —
   the hero canvas was. Re-measured on Adnan's machine after that fix,scrolling
   back up into the hero: 119.8fps with the narrow list,111.7fps with `all`,same p95 of 9ms,one 42ms frame during the half-second transition. */
.nav.compact{max-width:880px;padding:8px 10px 8px 14px;background:rgba(12,20,36,.55);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-color:var(--edge);box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .logo-full{width:250px;height:auto;display:block}
.brand .logo-mark{height:34px;width:34px;display:none}
.nav.compact .brand .logo-full{display:none}
.nav.compact .brand .logo-mark{display:block}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links a,.nav-links button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;background:none;border:0;cursor:pointer;transition:background .2s}
.nav-links a:hover,.nav-links button:hover,.nav-links li:focus-within > button{background:var(--glass-2)}
.nav-links button svg{width:14px;height:14px;transition:transform .25s}
.nav-links li:hover > button svg,.nav-links li:focus-within > button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:rgba(20,30,52,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--edge);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;list-style:none;margin:0}
.nav-links li:hover > .menu,.nav-links li:focus-within > .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:grid;gap:2px;padding:10px 12px;border-radius:12px}
.menu a:hover{background:var(--glass-2)}
.menu a b{font-weight:600;font-size:15px}
.menu a span{font-size:13px;color:var(--muted);font-weight:400}
.nav-cta{margin-left:8px}
.nav-cta .btn{padding:10px 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--glass-2);border:1px solid var(--edge);color:var(--ink);cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px}
@media (max-width:980px){.nav-links,.nav-cta{display:none}
.burger{display:grid}}
/* hero: full-bleed image banner,glass details */
.hero{position:relative;min-height:min(94vh,940px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-3;mask-image:linear-gradient(#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(#000 70%,transparent 100%)}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:62% center;transform:scale(1.06);animation:heroZoom 14s var(--ease-out) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero .veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(12,20,36,.5) 0%,rgba(12,20,36,.2) 35%,rgba(12,20,36,.55) 70%,rgba(12,20,36,0) 100%);mask-image:linear-gradient(#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(#000 62%,transparent 100%)}
.hero .veil::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 48% at 76% 46%,rgba(12,20,36,.75),transparent 72%),radial-gradient(55% 60% at 12% 85%,rgba(109,97,255,.42),transparent 70%),radial-gradient(40% 40% at 90% 20%,rgba(36,107,253,.35),transparent 70%)}
.hero .heronet{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.85;mask-image:linear-gradient(#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(#000 70%,transparent 100%)}
.hero .inner{position:relative;width:100%;max-width:var(--container);margin:0 auto;padding:170px var(--gutter) 60px;display:grid;gap:28px}
.hero h1{font-size:clamp(60px,9.8vw,150px);line-height:.9;max-width:11ch}
.hero h1 .grad{background:linear-gradient(90deg,#CFC6FF,#7DA5FF 55%,var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.hero .sub .lead{max-width:52ch;color:rgba(243,239,236,.86)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .meta{display:flex;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--edge)}
.hero .meta span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(10px);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hero .meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
@media (max-width:760px){.hero .sub{grid-template-columns:1fr}
.hero .inner{padding-top:140px}}
/* console panel (now in the statement section) */
.panel{position:relative;padding:20px;display:grid;gap:14px;transform:perspective(1200px) rotateY(-5deg);transform-origin:left center;animation:float 9s ease-in-out infinite alternate}
@keyframes float{to{transform:perspective(1200px) rotateY(-3deg) translateY(-8px)}}
.reveal-lines .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.reveal-lines .line > span{display:block;transform:translateY(110%);animation:lineUp 1.1s var(--ease-out) forwards;animation-delay:calc(var(--i) * .12s + .2s)}
/* The hero headline is the first and largest thing painted; Adnan asked for it
   not to animate. Other headings keep the line rise. */
.hero h1 .line > span{transform:none;animation:none}
@keyframes lineUp{to{transform:none}}
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .9s var(--ease-out) forwards;animation-delay:var(--d,.8s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
/* logos */
.logos{padding:10px 0 20px}
.logos .label{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--gap)/2))}}
/* sections */
.section{padding-block:var(--section)}
.section-head{display:grid;gap:14px;max-width:780px;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{font-size:clamp(42px,6vw,88px)}
.section-head.split{max-width:none;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.section-head.split .lead{justify-self:end}
@media (max-width:860px){.section-head.split{grid-template-columns:1fr}
.section-head.split .lead{justify-self:start}}
/* statement */
.statement .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.statement h2{font-size:clamp(34px,4.8vw,68px);line-height:1;max-width:20ch}
.statement h2 em{font-style:normal;background:linear-gradient(90deg,var(--peri),#7DA5FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement .side{display:grid;gap:20px}
@media (max-width:860px){.statement .grid{grid-template-columns:1fr}}
/* bento glass */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{position:relative;display:grid;align-content:space-between;gap:28px;padding:30px;text-decoration:none;color:var(--ink);overflow:hidden;min-height:320px;transition:transform .4s var(--ease),border-color .4s,background .4s}
.tile:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 260px at var(--mx,80%) var(--my,10%),rgba(109,97,255,.28),transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.tile:hover::before{opacity:1}
.tile h3{font-family:var(--display);font-size:clamp(28px,2.8vw,42px);letter-spacing:.03em;line-height:.98}
.tile p{color:var(--ink-2);max-width:44ch;margin-top:12px}
/* methodology: glass timeline */
.method{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.method .sticky{position:sticky;top:110px;display:grid;gap:16px}
.method .visual{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.method .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .6s}
.method .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,20,36,.9))}
.method .visual .num{position:absolute;left:28px;bottom:18px;z-index:1;font-family:var(--display);font-size:clamp(96px,12vw,170px);line-height:1;letter-spacing:.02em;background:linear-gradient(180deg,#fff,rgba(255,255,255,.35));-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .4s,transform .5s var(--ease-out)}
.method .visual .num.swap{opacity:0;transform:translateY(20px)}
.method .visual .chip{position:absolute;right:18px;top:18px;z-index:1;padding:8px 12px;border-radius:999px;background:var(--glass-2);border:1px solid var(--edge-2);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.method .progress{height:4px;border-radius:4px;background:var(--glass-2);overflow:hidden}
.method .progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--peri),var(--blue),var(--lime));transition:width .5s var(--ease)}
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:26px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--edge);opacity:.45;transition:opacity .5s,background .5s,border-color .5s}
.step.active,.no-js .step{opacity:1;background:var(--glass-2);border-color:var(--edge-2)}
.step .n{font-family:var(--display);font-size:38px;line-height:1;color:var(--lime)}
.step h3{font-family:var(--display);font-size:clamp(26px,2.6vw,36px);letter-spacing:.03em;line-height:1;margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15.5px;max-width:46ch}
@media (max-width:860px){.method{grid-template-columns:1fr}
.method .sticky{position:static}
.step{opacity:1}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:32px 28px;display:grid;gap:8px}
.stat .num{font-family:var(--display);font-size:clamp(72px,8vw,120px);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#9DB6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .num small{font-size:.45em;-webkit-text-fill-color:var(--lime);color:var(--lime)}
.stat h3{font-size:17px;font-weight:600}
.stat p{color:var(--ink-2);font-size:15px}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
/* quotes */
.quotes .marquee{--gap:18px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* insights */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .4s var(--ease),background .4s}
.card:hover{transform:translateY(-5px);background:var(--glass-2)}
.card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;margin:8px 8px 0;border-radius:14px}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:20px;display:grid;gap:10px;align-content:start}
.card .cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9DB6FF;font-weight:600}
.card h3{font-size:20px;font-weight:600;line-height:1.3}
.card p{color:var(--ink-2);font-size:15px}
.card .date{font-size:13px;color:var(--muted)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
/* cta */
.cta .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center;padding:clamp(32px,5vw,64px);position:relative;overflow:hidden}
.cta .grid .bgimg{position:absolute;inset:0;z-index:-1;opacity:.35}
.cta .grid .bgimg img{width:100%;height:100%;object-fit:cover}
.cta .grid .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,36,.2),rgba(12,20,36,.9))}
.cta h2{font-size:clamp(48px,7vw,104px)}
.cta .form{display:grid;gap:12px}
.cta .form h3{font-size:20px;font-weight:600}
.cta .form p{font-size:15px;color:var(--ink-2)}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--edge-2);background:rgba(0,0,0,.25);color:var(--ink);font:inherit;font-size:15px}
.field input:focus{outline:2px solid var(--peri);border-color:transparent}
.form-note{font-size:12.5px;color:var(--muted)}
.form-ok{display:none;padding:14px 16px;border-radius:var(--r-field);background:rgba(219,254,135,.15);color:var(--lime);font-weight:600}
.form.sent .form-ok{display:block}
/* Honeypot: off-screen rather than display:none,which some bots skip. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}
.ts{width:100%;line-height:0;border-radius:var(--r-field);overflow:hidden}
.ts iframe{width:100%!important;display:block}
/* Controls inside a form share the form's radius rather than the pill used
   for buttons elsewhere on the site. The newsletter button also matches the
   width of the stack it sits in,and centres its label,since a full-width
   button with the text shoved left reads as a mistake. */
.form .btn,.contact-form .btn{border-radius:var(--r-field)}
.form .btn{width:100%;justify-content:center}
.form-err{padding:14px 16px;border-radius:var(--r-field);background:rgba(232,74,106,.14);border:1px solid rgba(232,74,106,.35);color:#ffd7df;font-size:14px;font-weight:500}
form[data-api].busy{opacity:.6;pointer-events:none}
@media (max-width:860px){.cta .grid{grid-template-columns:1fr}}
/* footer */
.footer{padding:64px 0 28px;border-top:1px solid var(--edge);background:rgba(0,0,0,.25);backdrop-filter:blur(10px)}
.footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--edge)}
.footer .logo{width:250px}
.footer .fh{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer a{text-decoration:none;color:var(--ink-2);font-size:15px}
.footer a:hover{color:#fff}
.footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:var(--muted)}
.footer .bottom a{font-size:13px;color:var(--muted)}
@media (max-width:860px){.footer .grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer .grid{grid-template-columns:1fr}}
/* reveal */
.r{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.r.in{opacity:1;transform:none}
.no-js .r{opacity:1;transform:none;filter:none}
/* direction switcher */
.switch{position:fixed;left:14px;bottom:14px;z-index:40;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(12,20,36,.8);border:1px solid var(--edge);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.reveal-lines .line > span{transform:none}
.fade-up,.r{opacity:1;transform:none;filter:none}}
/* ---- quality governor ----------------------------------------------------
   The aurora is cheap on a machine with a working GPU and expensive on one
   without,and we cannot know which the visitor has. site.js samples real frame
   intervals for the first three seconds and sets html.lite when the machine is
   not keeping up. prefers-reduced-motion goes straight to lite. Below is that
   lighter path: the light stops drifting,the page-wide particle field is
   dropped,the hero network keeps going on its own. Each selector outranks the
   rule it overrides,so this block does not depend on file order. */
html.lite .net{display:none}
html.lite .hero .bg img{animation:none}
html.lite *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* ---- while scrolling -----------------------------------------------------
   backdrop-filter re-reads and re-blurs everything behind an element; while the
   page moves,that is every one of them,every frame,and it is the usual reason
   a glass-heavy page drops frames on a fast scroll even on capable hardware.
   These surfaces are travelling past the eye at the time,so the blur is not
   missed,and the drifting light pauses for the same reason. The header keeps
   its blur throughout: it stays on screen,where a change would show. */
html.scrolling .glass,html.scrolling .footer,html.scrolling .btn-ghost,html.scrolling .hero .meta span,html.scrolling .method .visual .chip,html.scrolling .switch{backdrop-filter:none;-webkit-backdrop-filter:none}
/* ---- no backdrop blur on the surfaces that travel past ---------------------
   backdrop-filter re-reads and re-blurs everything behind an element. On the
   glass cards,the footer and the ghost buttons that cost is paid on first paint
   and again whenever the backdrop moves,which on a scrolling page is constantly.
   Measured on Adnan's machine at 1440x900,cold first pass: 22.2fps with them,31.2fps without. The nav and the menus keep their blur — small,and on screen
   where the change would show. The fills are lifted slightly to make up for the
   frosting. */
.glass,.footer,.btn-ghost,.value,.crow,.tool,.cm-hub span,.method .visual .chip{backdrop-filter:none;-webkit-backdrop-filter:none}
/* ---------- Aurora: inner-page components (styles the shared page markup) ---------- */

/* sections: in this theme every section sits on the aurora; "stone/white" become subtle bands */
.section.stone,.section.white{background:transparent}
/* page hero */
.page-hero{position:relative;padding:190px 0 80px;overflow:hidden;isolation:isolate;min-height:520px;display:grid;align-items:end}
.page-hero .bg{position:absolute;inset:0;z-index:-2;mask-image:linear-gradient(#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 55%,transparent 100%)}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.05);animation:heroZoom 14s var(--ease-out) forwards}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,36,.5),rgba(12,20,36,.25) 45%,rgba(12,20,36,.6) 100%)}
.page-hero .veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 15% 90%,rgba(109,97,255,.35),transparent 70%);mask-image:linear-gradient(#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(#000 50%,transparent 100%)}
.page-hero .container{position:relative;width:100%}
.page-hero h1{font-size:clamp(52px,8vw,118px);line-height:.92;max-width:14ch}
.page-hero .lead{margin-top:20px;color:rgba(243,239,236,.82)}
.page-hero .eyebrow{margin-bottom:14px}
.crumbs{display:flex;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:var(--ink)}
.page-hero .heronet{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.6;mask-image:linear-gradient(#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 55%,transparent 100%)}
/* section heads reused from home */
.section-head .eyebrow + h2{margin-top:12px}
/* prose */
.prose{max-width:70ch;font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-family:var(--display);font-size:clamp(32px,3.4vw,46px);letter-spacing:.03em;line-height:1;margin:44px 0 14px;color:var(--ink)}
.prose h3{font-size:20px;font-weight:600;margin:28px 0 8px;color:var(--ink)}
/* Article subheads are full sentences,not titles. The display face is condensed
   and built for short headings,so at sentence length it sets badly and a 46px
   line wraps three times. Body face,closer to the text it introduces. */
.prose.article h2{font-family:var(--body);font-size:clamp(21px,1.8vw,25px);font-weight:600;letter-spacing:0;line-height:1.35;margin:40px 0 10px}
/* Citations support the argument without being part of it: smaller,italic and
   set below a rule so the eye can skip them. The label inside stays upright,and
   needs .refs in the selector to outrank the article subhead rule above. */
.prose.article .refs{margin-top:52px;padding-top:26px;border-top:1px solid var(--edge);font-size:14.5px;font-style:italic;line-height:1.65;color:var(--muted)}
.prose.article .refs h2{font-family:var(--body);font-size:12px;font-style:normal;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;margin:0 0 14px;color:var(--ink-2)}
.prose.article .refs p{margin:0 0 12px}
.prose.article .refs p:last-child{margin:0}
.prose p{margin:0 0 16px}
.prose ul{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose a{color:#9DB6FF}
.prose strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.two-col .side{position:sticky;top:120px;display:grid;gap:14px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}
.two-col .side{position:static}}
/* value cards */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value{padding:28px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--edge);display:grid;gap:10px;align-content:start;backdrop-filter:blur(12px);transition:background .4s,border-color .4s,transform .4s var(--ease)}
.value:hover{background:var(--glass-2);border-color:var(--edge-2);transform:translateY(-3px)}
.value .k{font-family:var(--display);font-size:30px;letter-spacing:.03em;line-height:1;background:linear-gradient(90deg,#fff,#9DB6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.value p{color:var(--ink-2);font-size:15px}
@media (max-width:860px){.values{grid-template-columns:1fr}}
/* service detail */
.service-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start}
.list-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.list-check li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;color:var(--ink-2)}
.list-check li svg{width:22px;height:22px;color:var(--lime);margin-top:2px}
.aside-card{padding:28px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(14px);display:grid;gap:14px;position:relative;overflow:hidden}
.aside-card::before{content:"";position:absolute;inset:auto -30% -50% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(109,97,255,.45),transparent 65%);pointer-events:none}
.aside-card h3{font-family:var(--display);font-size:30px;letter-spacing:.03em;line-height:1;position:relative}
.aside-card p{color:var(--ink-2);font-size:15px;position:relative}
.aside-card .btn,.aside-card .link{position:relative}
.aside-card .link{color:var(--lime)}
.formats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.format{padding:18px;border-radius:12px;background:var(--glass);border:1px solid var(--edge);display:grid;gap:4px}
.format b{font-weight:600}
.format span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.service-grid{grid-template-columns:1fr}}
/* lists (policies,other services,resources) */
.list{display:grid;gap:12px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-form{display:grid;gap:16px;padding:32px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(16px)}
.contact-form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field textarea,.field select{width:100%;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--edge-2);background:rgba(0,0,0,.25);color:var(--ink);font:inherit;font-size:15px}
.field select option{color:#111}
.field textarea:focus,.field select:focus{outline:2px solid var(--peri);border-color:transparent}
.details{display:grid;gap:26px}
.details .item{display:grid;gap:6px}
.details .item a{font-size:22px;font-weight:600;text-decoration:none;color:var(--ink)}
.details .item p{color:var(--ink-2)}
.details .item .link{font-size:16px}
.form-ok-light{display:none;padding:14px 16px;border-radius:var(--r-field);background:rgba(219,254,135,.15);color:var(--lime);font-weight:600}
.contact-form.sent .form-ok-light{display:block}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}
.contact-form .two{grid-template-columns:1fr}}
/* gated */
.gate{max-width:560px;margin:0 auto;padding:36px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(16px);display:grid;gap:16px;text-align:center}
.gate .lock{width:56px;height:56px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,rgba(109,97,255,.5),rgba(36,107,253,.3));border:1px solid var(--edge-2);display:grid;place-items:center;color:#fff}
.gate .lock svg{width:26px;height:26px}
.gate p{color:var(--ink-2)}
.gate .form-note a{color:#9DB6FF}
/* 404 */
.notfound{min-height:80vh;display:grid;place-items:center;text-align:center;padding:160px var(--gutter) 80px}
.notfound .big{font-family:var(--display);font-size:clamp(120px,24vw,320px);line-height:.85;letter-spacing:.02em;background:linear-gradient(180deg,#fff,#6E9BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound .lead{margin:0 auto 28px}
/* article cards on inner pages reuse .card; give them glass by default */
.card{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);backdrop-filter:blur(14px)}
.tile{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);backdrop-filter:blur(14px)}
.stat{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius)}
/* hero: 3D data sphere */
.hero .sphere{position:absolute;right:clamp(-120px,-2vw,0px);top:50%;transform:translateY(-56%);width:min(46vw,640px);aspect-ratio:1;z-index:-1;pointer-events:none}
.hero .sphere canvas{width:100%;height:100%;display:block}
.hero .sphere::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(109,97,255,.35),rgba(36,107,253,.12) 50%,transparent 70%);filter:blur(30px)}
.hero .inner{z-index:1}
@media (max-width:980px){.hero .sphere{width:min(90vw,420px);right:-20vw;top:38%;opacity:.7}}
/* ---------- workshop pages ---------- */
.ws-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding-bottom:22px;border-bottom:1px solid var(--edge);margin-bottom:28px}
.ws-head .meta{display:flex;gap:10px;flex-wrap:wrap}
.ws-head .meta span{padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.deck{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--edge-2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.deck iframe{width:100%;height:100%;border:0;display:block}
.deck .full{position:absolute;right:14px;top:14px;z-index:2;padding:8px 12px;border-radius:999px;background:rgba(12,20,36,.7);border:1px solid var(--edge-2);color:var(--ink);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px)}
.deck-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:12px}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dl a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);text-decoration:none;color:var(--ink);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.dl a:hover{background:var(--glass-2);border-color:var(--edge-2);transform:translateY(-2px)}
.dl .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(109,97,255,.5),rgba(36,107,253,.3));border:1px solid var(--edge-2)}
.dl .ic svg{width:20px;height:20px}
.dl b{display:block;font-weight:600}
.dl span{font-size:13px;color:var(--muted)}
.dl .get{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.gate .pw{display:grid;grid-template-columns:1fr auto;gap:10px;text-align:left}
.gate .err{display:none;color:#FF7FB3;font-size:14px}
.gate.wrong .err{display:block}
.unlisted{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.unlisted svg{width:14px;height:14px}
@media (max-width:760px){.ws-head{grid-template-columns:1fr}
.dl{grid-template-columns:1fr}}
[hidden]{display:none!important}
/* Research & Perspectives: filter bar,series line on a card,empty note. */
.filters{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
.filters.ready{display:flex}
.filters .flabel{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:10px}
.filters .flabel:first-child{margin-left:0}
.fchip{font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);background:rgba(255,255,255,.05);
  border:1px solid var(--edge);border-radius:var(--r-field);padding:8px 14px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.fchip:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.fchip.on{background:var(--peri);border-color:transparent;color:#fff}
.fchip:focus-visible{outline:2px solid var(--peri);outline-offset:2px}
.card .part{font-size:13px;font-weight:600;color:var(--lime);margin-top:2px}
.fnone{color:var(--muted);margin:8px 0 0}
/* Article heroes keep their artwork. .bg.light inverts,which suits the abstract
   tech photography it was written for but turns an illustration of people into a
   negative: shirts go dark,skin tones go grey. These illustrations are light on
   purpose,so the contrast comes from a heavier scrim instead of from flipping
   the image. Scoped to .keep,so every other hero is untouched. */
/* The rule being overridden is .page-hero .bg.light img,three classes and an
   element. Matching that with .bg.light.keep img only ties on specificity,and
   the other rule is concatenated later,so it won. Carrying .page-hero here
   makes this the more specific selector rather than the unluckier one. */
.page-hero .bg.light.keep img{filter:none;opacity:.85}
.page-hero .bg.light.keep::after{background:linear-gradient(180deg,rgba(12,20,36,.72),rgba(12,20,36,.55) 45%,rgba(12,20,36,.88) 100%)}
/* ---------- v0.6: hero practice picker + constellation map,course listing,accreditation ---------- */

/* hero background crossfade (two layered images) */
.hero .bg img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.hero .bg img.on{opacity:1}
.hero .bg img.a{animation:heroZoom 14s var(--ease-out) forwards}
/* practice picker */
.hero .picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px}
.hero .picker button{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink-2);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.hero .picker button i{width:8px;height:8px;border-radius:50%;background:var(--edge-2);transition:background .3s,box-shadow .3s}
.hero .picker button em{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(219,254,135,.14);color:var(--lime);font-weight:700}
.hero .picker button:hover{background:var(--glass-2);color:var(--ink);transform:translateY(-1px)}
.hero .picker button[aria-selected="true"]{background:rgba(255,255,255,.12);border-color:var(--edge-2);color:var(--ink)}
.hero .picker button[aria-selected="true"] i{background:var(--lime);box-shadow:0 0 12px var(--lime)}
.hero .sub .lead{transition:opacity .35s,transform .35s var(--ease)}
.hero .sub .lead.swap,#hero-cta.swap span{opacity:0;transform:translateY(6px)}
#hero-cta span{display:inline-block;transition:opacity .3s,transform .3s var(--ease)}
/* constellation map: labelled nodes the network re-forms around */
.hero .map{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .map a{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%) scale(.9);pointer-events:auto;display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:999px;background:rgba(12,20,36,.55);border:1px solid var(--edge-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease-out),background .3s,border-color .3s;transition-delay:var(--d,0s);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hero .map a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);flex:none}
.hero .map a.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hero .map a:hover{background:rgba(109,97,255,.45);border-color:rgba(255,255,255,.4)}
.hero .map a small{font-weight:500;color:var(--muted);margin-left:2px}
@media (max-width:980px){.hero .map{display:none}}
/* services menu badge */
.menu-badge{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(219,254,135,.14);color:var(--lime);font-weight:700;vertical-align:middle;margin-left:6px}
/* lead tile in the bento */
.tile.lead{background:linear-gradient(135deg,rgba(109,97,255,.16),rgba(36,107,253,.06) 60%,rgba(255,255,255,.04));border-color:rgba(255,255,255,.18)}
/* page-hero: light reference images sit under a heavier navy veil */
/* light reference images are inverted with the hue restored,so they read as the dark series while keeping their blue/pink accents */
.page-hero .bg.light img{filter:invert(1) hue-rotate(180deg) saturate(1.15);opacity:.6}
.page-hero .bg.light::after{background:linear-gradient(180deg,rgba(12,20,36,.55),rgba(12,20,36,.3) 45%,rgba(12,20,36,.7) 100%)}
.course-jump{position:relative;z-index:2;margin-top:26px}
/* ---------- course cards ---------- */
.courses{display:grid;gap:18px}
.course{position:relative;padding:clamp(24px,3.4vw,40px);display:grid;gap:26px;overflow:hidden;color:var(--ink);text-decoration:none}
.course::before{content:"";position:absolute;inset:auto -10% -40% auto;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(109,97,255,.28),transparent 65%);pointer-events:none}
.course .c-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;position:relative}
.course .c-head h3{font-size:clamp(34px,4.2vw,60px);line-height:.95;margin-top:10px}
.course .c-tag{color:var(--ink-2);max-width:64ch;margin-top:12px;font-size:16.5px}
.course h4{font-family:var(--display);font-size:26px;letter-spacing:.04em;line-height:1;margin:34px 0 14px;color:var(--ink)}
.course h4:first-child{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);font-size:12.5px;color:var(--ink-2)}
/* fact tiles + CPD ring */
.c-facts{display:grid;grid-template-columns:auto repeat(3,1fr);gap:12px;position:relative}
.c-facts.small{grid-template-columns:1fr 1fr}
.fact{padding:16px 18px;border-radius:14px;background:rgba(12,20,36,.4);border:1px solid var(--edge);display:grid;gap:4px;align-content:start}
.fact .fk{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fact .fk svg{width:15px;height:15px;color:#9DB6FF}
.fact b{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.03em;margin-top:4px}
.fact span{font-size:13px;color:var(--muted)}
.fact.hours{padding:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(109,97,255,.3),rgba(36,107,253,.12));border-color:var(--edge-2)}
.ring{--p:50;width:134px;height:134px;border-radius:50%;display:grid;place-items:center;text-align:center;position:relative;background:conic-gradient(var(--lime) calc(var(--p) * 1%),rgba(255,255,255,.12) 0)}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#131d33}
.ring b,.ring span{position:relative}
.ring b{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:.02em;display:block}
.ring span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);line-height:1.3;display:block;margin-top:2px}
@media (max-width:860px){.c-facts{grid-template-columns:1fr 1fr}
.fact.hours{grid-column:span 2}}
/* module bar: contact minutes to scale */
.modbar{display:flex;gap:4px;height:44px;border-radius:12px;overflow:hidden;position:relative}
/* module accordion */
.mods{display:grid;gap:8px;margin-top:16px}
.mod{border-radius:14px;background:rgba(12,20,36,.35);border:1px solid var(--edge);overflow:hidden;transition:border-color .3s,background .3s}
.mod[open]{background:rgba(255,255,255,.06);border-color:var(--edge-2)}
.mod summary{display:grid;grid-template-columns:44px 1fr auto 24px;gap:14px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none}
.mod summary::-webkit-details-marker{display:none}
.mod .mn{font-family:var(--display);font-size:26px;letter-spacing:.03em;color:var(--lime);line-height:1}
.mod .mt b{display:block;font-weight:600;font-size:15.5px}
.mod .mt span{display:block;font-size:13px;color:var(--muted)}
.mod .chev svg{width:18px;height:18px;transition:transform .3s;color:var(--muted)}
.mod[open] .chev svg{transform:rotate(180deg)}
.mod .mb{padding:0 16px 18px 74px;display:grid;gap:8px;animation:fadeUp .4s var(--ease-out)}
.mod .mb .q{font-family:var(--display);font-size:22px;letter-spacing:.03em;line-height:1.05;background:linear-gradient(90deg,#fff,#9DB6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.mod .mb p{color:var(--ink-2);font-size:15px}
@media (max-width:620px){.mod summary{grid-template-columns:36px 1fr 24px}
.mod .mb{padding-left:16px}}
/* objectives */
.objs{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:o}
.objs li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:rgba(12,20,36,.3);border:1px solid var(--edge);font-size:15px;color:var(--ink-2)}
.objs .on{font-family:var(--display);font-size:22px;letter-spacing:.04em;color:#9DB6FF;line-height:1.1}
.c-note{font-size:13.5px;color:var(--muted);margin:6px 0 12px}
/* course grid + side */
.c-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,48px);align-items:start;position:relative}
.c-side{display:grid;gap:12px;position:sticky;top:110px}
.c-block{padding:18px 20px;border-radius:14px;background:rgba(12,20,36,.35);border:1px solid var(--edge);display:grid;gap:8px}
.c-block h4{margin:0;font-size:20px}
.c-block p{font-size:14.5px;color:var(--ink-2)}
.c-block p b{color:var(--ink);font-weight:600}
@media (max-width:980px){.c-grid{grid-template-columns:1fr}
.c-side{position:static}}
/* accreditation band */
.accred{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:clamp(24px,3.4vw,40px);position:relative;overflow:hidden}
.accred::before{content:"";position:absolute;inset:-40% auto auto -10%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(36,107,253,.3),transparent 65%);pointer-events:none}
.accred .ac-main{display:grid;gap:14px;max-width:70ch;position:relative}
.accred h2{font-size:clamp(34px,4.4vw,60px)}
.accred p{color:var(--ink-2)}
.accred .link{color:var(--lime)}
.ac-badge{position:relative;display:grid;gap:10px;place-items:center;text-align:center;padding:26px 22px;border-radius:20px;background:rgba(12,20,36,.45);border:1px dashed var(--edge-2);min-width:200px}
.ac-badge.on{border-style:solid;background:linear-gradient(135deg,rgba(109,97,255,.35),rgba(36,107,253,.15))}
.ac-badge svg{width:54px;height:54px;color:var(--lime)}
.ac-badge span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ac-badge span b{display:block;font-family:var(--display);font-size:34px;letter-spacing:.06em;color:var(--ink);margin-top:4px}
@media (max-width:760px){.accred{grid-template-columns:1fr}}
/* bespoke topics + workshop formats */
.topics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1100px){.topics{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.topics{grid-template-columns:1fr}}
/* mobile: shorter eyebrow,picker chips tighter */
@media (max-width:760px){.hero .eyebrow .eb-more{display:none}.hero .picker button{padding:8px 12px 8px 10px;font-size:13px}}
/* ---------- v0.7: plain-text menus (37signals idiom: bold type,flat surface,numbers,no chrome) ---------- */
.menu{min-width:300px;padding:14px 6px;border-radius:14px;background:#0F1930;border:1px solid var(--edge);box-shadow:0 30px 70px rgba(0,0,0,.45);backdrop-filter:none;-webkit-backdrop-filter:none}
.menu a{display:flex;align-items:baseline;gap:14px;padding:9px 16px;border-radius:0;font-weight:700;font-size:17px;white-space:nowrap;letter-spacing:-.01em;color:var(--ink);transition:color .2s,transform .2s var(--ease)}
.menu a i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted);min-width:22px;font-variant-numeric:tabular-nums}
.menu a:hover{background:none;color:var(--lime);transform:translateX(4px)}
.menu li.all{margin-top:8px;padding-top:8px;border-top:1px solid var(--edge)}
.menu li.all a{font-size:14px;font-weight:600;color:var(--ink-2);align-items:center;gap:8px}
.menu li.all a svg{width:14px;height:14px}
.burger{width:auto;height:auto;border:0;background:none;border-radius:0;padding:8px 4px;font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em}
.burger:hover{color:var(--lime)}
/* drawer: a real sidebar,flat navy,plain bold links */
.drawer-veil{position:fixed;inset:0;z-index:59;background:rgba(6,10,20,.55);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(380px,90vw);background:#0F1930;color:var(--ink);padding:20px 28px 24px;overflow:auto;display:grid;align-content:start;gap:22px;transform:translateX(100%);transition:transform .45s var(--ease-out);visibility:hidden;box-shadow:-30px 0 80px rgba(0,0,0,.4)}
body.drawer-open .drawer{transform:none;visibility:visible}
body.drawer-open .drawer-veil{opacity:1;visibility:visible}
.drawer .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--edge)}
.drawer .top img{width:36px;height:36px}
.drawer .close{background:none;border:0;color:var(--ink);font:inherit;font-weight:700;font-size:16px;cursor:pointer;padding:6px 0}
.drawer .close:hover{color:var(--lime)}
.drawer .dnav{display:grid;gap:2px}
.drawer .dh{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.drawer .dnav a{display:flex;align-items:baseline;gap:12px;padding:6px 0;font-weight:700;font-size:17px;letter-spacing:-.015em;line-height:1.2;text-decoration:none;color:var(--ink);transition:color .2s,transform .25s var(--ease)}
.drawer .dnav a:hover{color:var(--lime);transform:translateX(4px)}
.drawer .dnav a i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);min-width:26px;font-variant-numeric:tabular-nums}
.drawer .dnav a.big{font-family:var(--display);font-size:32px;letter-spacing:.03em;font-weight:400;align-items:center;gap:12px;color:var(--lime)}
.drawer .dnav a.big svg{width:24px;height:24px}
.drawer .dfoot{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:18px;border-top:1px solid var(--edge);margin-top:auto}
.drawer .dfoot a{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
.drawer .dfoot a:hover{color:var(--ink)}
@media (max-width:980px){.burger{display:block}}
/* portfolio course cards (compact) */
.course.pf{gap:20px}
/* ---------- course map ---------- */
.cmap{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;align-items:stretch}
.cm-stage{position:relative;min-height:620px;border-radius:var(--radius);overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,rgba(109,97,255,.16),transparent 60%),rgba(12,20,36,.45);border:1px solid var(--edge)}
.cm-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cm-nodes,.cm-labels{position:absolute;inset:0}
.cm-labels{pointer-events:none}
.cm-hub{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:7px;padding:0;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;z-index:2;max-width:150px;transition:transform .4s var(--ease),opacity .4s}
.cm-hub i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;background:var(--pc,var(--peri));color:#0C1424;border:2px solid rgba(12,20,36,.8);transition:box-shadow .3s,transform .3s var(--ease)}
.cm-hub span{font-size:12px;font-weight:600;line-height:1.25;text-align:center;padding:4px 9px;border-radius:8px;background:rgba(12,20,36,.72);border:1px solid var(--edge);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,background .3s}
.cm-hub[data-p="ai-enablement"]{--pc:#9DB6FF}
.cm-hub[data-p="entrepreneurship-programmes"]{--pc:#FF7FB3}
.cm-hub[data-p="corporate-innovation"]{--pc:var(--lime)}
.cm-hub:hover span,.cm-hub.on span{background:rgba(109,97,255,.4);border-color:rgba(255,255,255,.45)}
.cm-hub.on i{box-shadow:0 0 22px var(--pc);transform:scale(1.12)}
.cmap.has-active .cm-hub:not(.on){opacity:.55}
.cm-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:5px 10px;border-radius:8px;background:rgba(12,20,36,.78);border:1px solid var(--edge);color:var(--ink-2);font-size:11.5px;font-weight:500;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .5s var(--ease);transition-delay:var(--d,0s);will-change:left,top}
.cm-label.in{opacity:1}
.cm-label b{color:var(--lime);font-weight:700;margin-right:6px;font-size:10.5px}
.cm-panel{padding:28px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden}
.cm-panel::before{content:"";position:absolute;inset:auto -30% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(109,97,255,.35),transparent 65%);pointer-events:none}
.cm-panel > *{position:relative}
.cm-p-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cm-p-n{font-family:var(--display);font-size:40px;letter-spacing:.04em;color:var(--lime);line-height:1}
.cm-p-title{font-size:clamp(30px,3vw,44px);line-height:.98}
.cm-p-tag{color:var(--ink-2);font-size:15px}
.cm-p-mods{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.cm-p-mods li{display:grid;grid-template-columns:34px 1fr;gap:10px;font-size:14px;color:var(--ink-2);padding:8px 10px;border-radius:10px;background:rgba(12,20,36,.35);border:1px solid var(--edge);opacity:0;transform:translateX(8px);animation:cmIn .5s var(--ease-out) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes cmIn{to{opacity:1;transform:none}}
.cm-p-mods li b{color:#9DB6FF;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.cm-p-foot{display:grid;gap:12px;margin-top:8px}
.cm-p-delivery{font-size:12.5px;color:var(--muted)}
.cm-panel.swap .cm-p-title,.cm-panel.swap .cm-p-tag{opacity:.35;transition:opacity .2s}
@media (max-width:980px){.cmap{grid-template-columns:1fr}
.cm-stage{min-height:420px}}
@media (max-width:640px){.cm-stage{display:none}
.cm-panel{padding:22px}}
/* ---------- v0.8: course rows,overlays,statement with the course card ---------- */
.crows{display:grid;gap:10px}
.crow{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;width:100%;text-align:left;padding:16px 20px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);color:var(--ink);font:inherit;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.crow:hover{background:var(--glass-2);border-color:var(--edge-2);transform:translateX(4px)}
.crow .cn{font-family:var(--display);font-size:30px;letter-spacing:.04em;color:var(--lime);line-height:1}
.crow .ct b{display:block;font-weight:600;font-size:16.5px}
.crow .ct span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.crow .go{width:38px;height:38px;border-radius:50%;border:1px solid var(--edge-2);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.crow .go svg{width:16px;height:16px}
.crow:hover .go{background:var(--crimson);border-color:var(--crimson);transform:rotate(-45deg)}
@media (max-width:640px){.crow{grid-template-columns:40px 1fr}
.crow .go{display:none}
.crow .cn{font-size:24px}}
.ov{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;opacity:0;transition:opacity .35s var(--ease)}
.ov.in{opacity:1}
.ov-veil{position:absolute;inset:0;background:rgba(6,10,20,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ov-panel{position:relative;width:min(1180px,100%);max-height:94vh;overflow:auto;background:#0F1930;border:1px solid var(--edge-2);border-radius:26px 26px 0 0;box-shadow:0 -40px 120px rgba(0,0,0,.6);transform:translateY(30px);transition:transform .45s var(--ease-out);overscroll-behavior:contain}
.ov.in .ov-panel{transform:none}
.ov-close{position:sticky;top:14px;margin:14px 18px 0 auto;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(12,20,36,.85);border:1px solid var(--edge-2);color:var(--ink);cursor:pointer}
.ov-close svg{width:20px;height:20px}
.ov-close:hover{color:var(--lime)}
.ov-body{padding:clamp(18px,3vw,36px);padding-top:clamp(6px,1vw,14px)}
.ov-body .course{background:none;border:0;box-shadow:none;padding:clamp(8px,2vw,20px)}
.ov-body .course::before{display:none}
body.ov-open{overflow:hidden}
@media (max-width:760px){.ov-panel{max-height:100vh;border-radius:0}}
.statement .c-facts{grid-template-columns:auto 1fr 1fr;gap:10px}
.statement .fact:nth-child(4){display:none}
.statement .fact b{font-size:28px}
.statement .ring{width:118px;height:118px}
.statement .ring b{font-size:34px}
.ring span{text-align:center;width:100%}
.cm-hub span{display:block;width:100%}
.cm-hub span{transition:opacity .4s,border-color .3s,background .3s}
.cmap.has-active .cm-hub:not(.on):not(:hover) span{opacity:0}
.cmap.has-active .cm-hub:not(.on){opacity:.7}
.statement .fact span{display:none}
/* explore-our-services card (statement section) */
.explore{padding:22px 22px 12px;display:grid;gap:4px;align-content:start}
/* ---------- v0.10 ---------- */
/* hero: fixed geometry so switching practices never reflows the block */
.hero .sub{grid-template-columns:1fr 400px}
.hero .sub .lead{min-height:calc(1.55em * 2);max-width:none}
.hero .actions{justify-content:flex-end}
#hero-cta{min-width:300px;justify-content:center}
@media (max-width:980px){.hero .sub{grid-template-columns:1fr}
.hero .actions{justify-content:flex-start}
#hero-cta{min-width:0}}
/* technology-integration card */
.tech{padding:26px;display:grid;gap:18px;align-content:start;overflow:hidden}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitCounter{to{transform:rotate(calc(var(--rot) - 360deg)) translate(-50%,-50%)}}
.tenets{display:grid;gap:8px}
.tenets div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:rgba(12,20,36,.4);border:1px solid var(--edge)}
.tenets b{font-weight:600;font-size:15px}
.tenets span{font-size:13px;color:var(--muted)}
/* philosophy: four principle cards */
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* ---------- v0.10: AI approach,tools,impact,footer,contact ---------- */
.asteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.astep{position:relative;padding:22px 22px 24px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(12px);display:grid;gap:10px;align-content:start;border-top:2px solid var(--blue)}
.astep:nth-child(2){border-top-color:var(--peri)}
.astep:nth-child(3){border-top-color:var(--lime)}
.astep:nth-child(4){border-top-color:var(--crimson)}
.astep .an{font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.astep h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:.04em;line-height:1}
.astep p{color:var(--ink-2);font-size:15px}
@media (max-width:980px){.asteps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.asteps{grid-template-columns:1fr}}
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tool{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;background:rgba(12,20,36,.55);border:1px solid var(--edge);min-width:140px}
.tool img{height:30px;width:auto;display:block}
.tools.small{gap:8px}
.tools.small .tool{padding:8px 12px;min-width:0;background:rgba(12,20,36,.45)}
.tools.small .tool img{height:22px}
.tools-band{margin-top:18px;padding:24px 26px;display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center}
@media (max-width:980px){.tools-band{grid-template-columns:1fr}}
.aprins{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.aprin{padding:18px 20px;border-radius:12px;background:rgba(12,20,36,.35);border:1px solid var(--edge);display:grid;gap:6px}
.aprin b{font-weight:600;font-size:16px}
.aprin span{font-size:14px;color:var(--muted)}
@media (max-width:980px){.aprins{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.aprins{grid-template-columns:1fr}}
.impact{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ilayer{padding:20px 18px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--edge);display:grid;gap:8px;align-content:start}
.ilayer .in{font-family:var(--display);font-size:28px;letter-spacing:.04em;color:var(--lime);line-height:1}
.ilayer b{font-weight:600;font-size:15.5px;line-height:1.3}
.ilayer span:last-child{font-size:13.5px;color:var(--muted)}
@media (max-width:1100px){.impact{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.impact{grid-template-columns:1fr}}
/* footer: logo and tagline only */
.footer .brandline{display:grid;justify-items:center;gap:14px;padding-bottom:36px;border-bottom:1px solid var(--edge)}
.footer .bottom{justify-content:center;gap:18px}
/* contact details */
.details .item.loc{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:16px}
.details .item.loc svg{width:20px;height:20px;color:#9DB6FF;flex:none}
.details .item.social{display:flex;gap:10px}
.details .item.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--edge-2);background:var(--glass);display:grid;place-items:center;color:var(--ink);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.details .item.social a svg{width:20px;height:20px}
.details .item.social a:hover{background:var(--crimson);border-color:var(--crimson);transform:translateY(-2px)}
/* ---------- v0.11 ---------- */
.footer .tagline{margin-top:14px;font-family:var(--display);font-size:26px;letter-spacing:.06em;color:var(--lime)}
.step{cursor:pointer}
.step:focus-visible{outline:2px solid var(--lime)}
/* build diagram: platforms → agents → workflows */
.build{width:100%;height:auto;display:block}
.build text{fill:var(--ink);font-family:var(--body);font-size:11px;text-anchor:middle;font-weight:500}
.build .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted);font-weight:600}
.build .out{fill:var(--lime);font-size:11px;letter-spacing:.08em}
.build .plat rect,.build .flow rect{fill:rgba(12,20,36,.6);stroke:rgba(255,255,255,.22)}
.build .flow rect{stroke:rgba(157,182,255,.45)}
.build .link{fill:none;stroke:rgba(157,182,255,.45);stroke-width:1.4;stroke-dasharray:4 5;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.build .agent circle:first-child{fill:rgba(109,97,255,.35);stroke:#9DB6FF;stroke-width:1.5}
.build .agent .halo{fill:none;stroke:var(--lime);stroke-width:1;opacity:.6;transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.7}
100%{transform:scale(1.7);opacity:0}}
.build .agent path{stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.build .agent circle:last-child{fill:var(--lime)}
.build .pulse{fill:var(--lime);filter:drop-shadow(0 0 4px var(--lime))}
@media (prefers-reduced-motion:reduce){.build .link,.build .halo{animation:none}}
/* track record: tiles align whatever the copy length */
.stat .num{display:flex;align-items:baseline;line-height:1;height:1em}
.stat p{min-height:calc(1.6em * 2)}
.stat{align-content:start}
/* ---------- v0.12 ---------- */
/* venn: three practices,one team */
.venn{width:min(100%,380px);height:auto;display:block;margin:6px auto 0}
/* methodology visual as the build diagram */
.method .visual.diagram{aspect-ratio:auto;padding:22px 18px 30px;background:rgba(12,20,36,.5)}
/* CTA without the newsletter form: single column */
.cta .grid:not(:has(form)){grid-template-columns:1fr}
/* methodology page: alignment steps,responsible AI,richer impact layers */
.asteps.five{grid-template-columns:repeat(5,1fr)}
.asteps.five .astep h3{font-size:clamp(20px,1.7vw,24px)}
.asteps.five .astep p{font-size:14px}
.asteps.five .astep:nth-child(5){border-top-color:#9DB6FF}
@media (max-width:1100px){.asteps.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.asteps.five{grid-template-columns:1fr}}
.rcols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcol{padding:26px 24px;display:grid;gap:14px;align-content:start}
.rcol h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:.04em;line-height:1}
.rcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rcol li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--ink-2);font-size:15px}
.rcol li svg{width:20px;height:20px;color:var(--lime);margin-top:2px}
@media (max-width:900px){.rcols{grid-template-columns:1fr}}
.fw{margin-top:18px;display:grid;gap:10px}
.fw .pills{display:flex;flex-wrap:wrap;gap:8px}
.ilayer .what{font-size:13.5px;color:var(--ink-2)}
.ilayer .tracks{font-size:12.5px;color:var(--muted);line-height:1.5}
.ilayer .owner{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px;border-top:1px solid var(--edge)}
.ilayer .owner b{color:var(--ink-2);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:2px}
/* ---- v0.14: tools grid,aside formats,level tabs,audience bands,fixed course-map height ---- */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tool{display:grid;place-items:center;height:74px;padding:0 16px;border-radius:12px;background:rgba(12,20,36,.55);border:1px solid var(--edge);min-width:0}
.tool img{max-height:26px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;opacity:.94}
@media (max-width:980px){.tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool{height:62px}}
.tools.small{display:flex;flex-wrap:wrap;gap:8px}
.tools.small .tool{height:auto;padding:8px 12px;min-width:0;background:rgba(12,20,36,.45)}
.tools.small .tool img{max-height:20px}
.tools-band{grid-template-columns:.8fr 1.2fr}
.aside-stack{display:grid;gap:16px;align-content:start}
.formats.mini{grid-template-columns:1fr 1fr;gap:8px;position:relative}
.formats.mini .format{padding:12px 14px;background:rgba(12,20,36,.42)}
.formats.mini .format b{font-size:14.5px}
.formats.mini .format span{font-size:13px}
.cm-tabs{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.cm-tab{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;background:rgba(12,20,36,.45);border:1px solid var(--edge);color:var(--ink-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s var(--ease),border-color .25s,color .25s}
.cm-tab i{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(243,239,236,.12);color:var(--ink-2)}
.cm-tab:hover{border-color:rgba(255,255,255,.34);color:var(--ink)}
.cm-tab.on{background:rgba(109,97,255,.34);border-color:rgba(255,255,255,.42);color:var(--ink)}
.cm-tab.on i{background:var(--lime);color:#0C1424}
@media (max-width:560px){.cm-tabs{flex-direction:column}
.cm-tab{justify-content:space-between}}
.cmap{align-items:start}
.cm-stage{height:600px;min-height:0}
.cm-panel{height:600px;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr) auto;align-content:stretch}
.cm-p-mods{overflow-y:auto;min-height:0;padding-right:4px}
.cm-p-mods::-webkit-scrollbar{width:6px}
.cm-p-mods::-webkit-scrollbar-thumb{background:rgba(243,239,236,.18);border-radius:3px}
.cm-p-foot{align-self:end}
@media (max-width:980px){.cm-stage{height:440px}
.cm-panel{height:auto;grid-template-rows:none}
.cm-p-mods{overflow:visible}}
.cm-bands{position:absolute;inset:0;pointer-events:none;z-index:1}
.cm-bands span{position:absolute;left:14px;transform:translateY(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;background:rgba(12,20,36,.6);border:1px solid var(--edge);padding:4px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:1100px){.cm-bands span{left:8px;font-size:9px;padding:3px 7px}}
.cm-hub[data-aud="Executives"]{--pc:var(--lime)}
.cm-hub[data-aud="Employees"]{--pc:#9DB6FF}
.cm-hub[data-aud="Trainers"]{--pc:#FF7FB3}
.cm-hub[data-aud="Founders"]{--pc:#FF7FB3}
.cm-hub[data-aud="Executives"] i{width:44px;height:44px;font-size:14px}
.cm-hub[data-aud="Trainers"] i{width:30px;height:30px;font-size:11px}
.cm-hub.hide{display:none}
.finder{padding:clamp(30px,4.5vw,56px);border-radius:var(--radius);position:relative;overflow:hidden}
.finder::before{content:"";position:absolute;inset:auto -12% -55% auto;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(109,97,255,.4),transparent 65%);pointer-events:none}
.finder .fx{position:relative;max-width:720px;display:grid;gap:16px}
.finder h2{font-size:clamp(30px,3.4vw,46px)}
.finder .fbtn{margin-top:6px}
.finder .form-note{margin-top:2px}
.cmap.has-active .cm-hub:not(.on):not(:hover) span{opacity:.5}
.cmap.has-active .cm-hub:not(.on){opacity:.55}
.cm-label{max-width:190px;font-size:11px;padding:4px 9px}
.cm-p-title{font-size:clamp(24px,2.1vw,32px);line-height:1.02}
.cm-p-tag{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:981px){.cm-p-mods{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}}
.cm-panel{padding:26px}
/* ---- v0.15: long hero titles,course facts,newsletter-only block ---- */
.page-hero h1.long{font-size:clamp(36px,5.2vw,74px);max-width:22ch;line-height:.98}
@media (max-width:640px){.page-hero h1.long{font-size:clamp(30px,8.4vw,44px);max-width:100%}}
.fact.hours{display:grid;gap:8px;justify-items:start}
.fact .fnote{font-size:12px;color:var(--muted);line-height:1.35}
.cta .grid.solo{grid-template-columns:1.25fr .75fr}
@media (max-width:860px){.cta .grid.solo{grid-template-columns:1fr}}
.cta .grid.solo .form{display:grid;gap:12px;align-content:center}
/* ---- v0.16: hours dial centring,knowledge motif,level chips ---- */
.fact.hours{padding:18px 16px;display:grid;gap:10px;justify-items:center;align-content:center;text-align:center}
.ring{width:132px;height:132px;display:grid;place-items:center;align-content:center;justify-content:center;text-align:center;line-height:1}
.ring b{font-family:var(--display);font-size:36px;line-height:1;letter-spacing:.02em;display:block;margin:0}
.ring span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1.25;display:block;margin:4px 0 0;width:100%;text-align:center}
.fact .fnote{font-size:12px;color:var(--muted);line-height:1.35;text-align:center;max-width:170px}
.fact.hours.bespoke{justify-items:start;align-content:start;text-align:left;padding:16px 18px;gap:4px;background:linear-gradient(135deg,rgba(109,97,255,.3),rgba(36,107,253,.12))}
.fact.hours.bespoke b{font-family:var(--display);font-size:32px;line-height:1;margin-top:4px}
.fact.hours.bespoke span{font-size:13px;color:var(--muted)}
.cm-art{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.95}
.cm-art svg{width:100%;height:100%;display:block}
.cm-art .k{fill:none;stroke:#F3EFEC;stroke-opacity:.105;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cm-art .kd{fill:#F3EFEC;fill-opacity:.13}
.cm-art .kr{fill:none;stroke:#9DB6FF;stroke-opacity:.11;stroke-width:1;stroke-dasharray:3 10}
.cm-art .grp{animation:kdrift 28s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes kdrift{from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(0,-16px,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){.cm-art .grp{animation:none}}
@media (max-width:980px){.cm-art{opacity:.6}}
.crow .lvl{font-style:normal;display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(157,182,255,.16);color:#9DB6FF;border:1px solid rgba(157,182,255,.25)}
.c-block .tools.small{margin-top:12px}
.c-block .tools.small .tool{padding:9px 12px;background:rgba(12,20,36,.5)}
.c-block .tools.small .tool img{max-height:18px;width:auto}
.cm-art .k{stroke-opacity:.145}
.cm-art .kd{fill-opacity:.17}
.cm-art .kr{stroke-opacity:.14}
/* ---- v0.17: every tool logo on one normalized canvas,stack chip inline ---- */
.tool img{height:34px;width:auto;max-height:none;max-width:none;display:block;opacity:.95}
.tools.small .tool img{height:20px}
.c-block .tools.small .tool img{height:20px}
.tools.small{align-items:center}
.tsep{align-self:center;padding:0 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.tool.stack{padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:rgba(219,254,135,.10);border:1px dashed rgba(219,254,135,.34);white-space:nowrap}
.tstack{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
/* ---- v0.18: entrepreneurship program types ---- */
.ptypes{display:grid;grid-template-columns:.32fr .68fr;gap:18px;align-items:start}
@media (max-width:1000px){.ptypes{grid-template-columns:1fr}}
.pt-nav{display:grid;gap:10px;align-content:start;position:sticky;top:96px}
@media (max-width:1000px){.pt-nav{position:static;grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pt-nav{grid-template-columns:1fr}}
.pt-tab{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:14px;background:rgba(12,20,36,.45);border:1px solid var(--edge);color:var(--ink-2);font:inherit;cursor:pointer;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease)}
.pt-tab i{font-style:normal;font-family:var(--display);font-size:22px;letter-spacing:.04em;color:var(--muted);line-height:1;transition:color .25s}
.pt-tab span{display:grid;gap:3px;min-width:0}
.pt-tab b{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.2}
.pt-tab em{font-style:normal;font-size:12.5px;color:var(--muted)}
.pt-tab:hover{border-color:rgba(255,255,255,.34);transform:translateX(2px)}
.pt-tab.on{background:rgba(109,97,255,.32);border-color:rgba(255,255,255,.42)}
.pt-tab.on i{color:var(--lime)}
.pt-tab.on em{color:var(--ink-2)}
.pt-panels{position:relative;min-height:640px}
.pt-panel{display:none;padding:clamp(24px,3vw,38px);border-radius:var(--radius);gap:22px}
.pt-panel.on{display:grid;animation:ptIn .45s var(--ease-out) both}
html.no-js .pt-panel{display:grid;margin-bottom:18px}
@keyframes ptIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}}
.pt-head{display:grid;gap:10px}
.pt-head h3{font-size:clamp(28px,2.8vw,40px);line-height:1}
.pt-head .lead{font-size:17px}
.pt-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.pt-meta{grid-template-columns:1fr}}
.pt-meta span{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:rgba(12,20,36,.42);border:1px solid var(--edge);font-size:13.5px;color:var(--ink-2)}
.pt-meta b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pt-pov{font-size:15px;color:var(--ink-2);padding-left:16px;border-left:2px solid rgba(219,254,135,.45)}
.pt-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.pt-phases{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pt-phases{grid-template-columns:1fr}}
.pt-phase{padding:16px;border-radius:12px;background:rgba(12,20,36,.38);border:1px solid var(--edge)}
.pt-phase .ph{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:10px}
.pt-phase .ph i{font-style:normal;font-family:var(--display);font-size:16px;color:var(--lime);letter-spacing:.04em}
.pt-phase ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pt-phase li{font-size:13.5px;line-height:1.45;color:var(--ink-2);padding-left:14px;position:relative}
.pt-phase li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:rgba(157,182,255,.7)}
.pt-measure h4{font-family:var(--display);font-size:24px;letter-spacing:.03em;margin:0 0 12px}
.pt-measure .list-check{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media (max-width:720px){.pt-measure .list-check{grid-template-columns:1fr}}
/* ---- v0.19: tool logos scale with the tile at every width ---- */
.tool{min-width:0;overflow:hidden;padding:0 14px}
.tool img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:1180px){.tool{height:66px;padding:0 10px}
.tool img{max-height:28px}}
@media (max-width:900px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool{height:56px;padding:0 8px}
.tool img{max-height:22px}}
.tools.small .tool{height:auto;padding:8px 12px}
.tools.small .tool img{max-height:20px;max-width:100%}
.tool.stack{overflow:visible;white-space:normal}
@media (max-width:420px){.tool.stack{white-space:normal}
.tstack{white-space:normal;flex-wrap:wrap}}
/* one image per methodology stage */
.method .visual img{opacity:0}
.method .visual img.on{opacity:.8}
@media (max-width:980px){.tools-band{grid-template-columns:1fr}}
/* ---- v0.20: capability accordion ---- */
.caps{display:grid;gap:12px}
.cap{border-radius:var(--radius);background:rgba(12,20,36,.42);border:1px solid var(--edge);overflow:hidden;transition:border-color .3s,background .3s}
.cap:hover{border-color:rgba(255,255,255,.26)}
.cap.on{background:rgba(109,97,255,.15);border-color:rgba(255,255,255,.3)}
.cap-head{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px;background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cap-head i{font-style:normal;font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.04em;color:var(--muted);transition:color .3s}
.cap.on .cap-head i{color:var(--lime)}
.cap-head .ct{display:grid;gap:4px;min-width:0}
.cap-head b{font-size:18px;font-weight:600;line-height:1.25}
.cap-head em{font-style:normal;font-size:14px;color:var(--muted);line-height:1.3}
.cap-head .cx{width:32px;height:32px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s;flex:none}
.cap-head .cx svg{width:16px;height:16px}
.cap.on .cap-head .cx{transform:rotate(180deg);background:rgba(243,239,236,.1)}
.cap-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.cap.on .cap-wrap{grid-template-rows:1fr}
.cap-body{overflow:hidden;min-height:0}
.cap-inner{padding:0 24px 26px 72px;display:grid;gap:20px}
.cap-lead{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:78ch;margin:0}
.cap-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap-cols > div{padding:16px;border-radius:12px;background:rgba(12,20,36,.4);border:1px solid var(--edge)}
.cap-cols h4{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 11px}
.cap-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cap-cols li{font-size:13.5px;line-height:1.45;color:var(--ink-2);padding-left:14px;position:relative}
.cap-cols li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:rgba(157,182,255,.7)}
.cap-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);padding:13px 16px;border-radius:10px;background:rgba(219,254,135,.08);border:1px solid rgba(219,254,135,.26)}
html.no-js .cap-wrap{grid-template-rows:1fr}
@media (max-width:960px){.cap-cols{grid-template-columns:1fr}
.cap-inner{padding:0 20px 22px 20px}}
@media (max-width:560px){.cap-head{padding:16px 16px;gap:12px}
.cap-head i{font-size:21px}
.cap-head b{font-size:16px}}
/* ---- v0.21: lighter capability panels ---- */
.cap-inner{gap:16px}
.cap-lead{font-size:16px;max-width:66ch}
.cap-cols{display:grid;grid-template-columns:1fr;gap:14px}
.cap-cols > div{padding:0;background:none;border:0}
.cap-do ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
@media (max-width:820px){.cap-do ul{grid-template-columns:1fr}}
.cap-do li{font-size:14px}
.cap-tags .chips{display:flex;flex-wrap:wrap;gap:7px}
.cap-tags .chips span{font-size:12.5px;line-height:1.2;padding:7px 12px;border-radius:999px;background:rgba(12,20,36,.5);border:1px solid var(--edge);color:var(--ink-2)}
.cap-tags:last-of-type .chips span{background:rgba(219,254,135,.07);border-color:rgba(219,254,135,.22)}
.cap-cols h4{margin:0 0 9px}
.cap-note{font-size:13px;padding:11px 14px}
/* ---- v0.21: practice intro index,linked to the accordion below ---- */
.service-grid:has(.capxs){gap:clamp(24px,3.4vw,54px)}
.capxs{display:grid;gap:8px}
.capx{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:rgba(12,20,36,.38);border:1px solid var(--edge);text-decoration:none;color:var(--ink);transition:background .25s var(--ease),border-color .25s,transform .25s var(--ease)}
.capx:hover{background:rgba(109,97,255,.2);border-color:rgba(255,255,255,.3);transform:translateX(3px)}
.capx i{font-style:normal;font-family:var(--display);font-size:20px;line-height:1;letter-spacing:.04em;color:var(--lime)}
.capx span{min-width:0}
.capx b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.capx em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.capx .go{width:26px;height:26px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;color:var(--ink-2);transition:background .25s,transform .25s var(--ease)}
.capx .go svg{width:13px;height:13px}
.capx:hover .go{background:rgba(243,239,236,.1);transform:translateX(2px)}
.cap{scroll-margin-top:110px}
/* --- mobile course fixes -------------------------------------------------- */
/* The panel description was clamped to three lines because the desktop panel
   has a fixed height. Below 980px the panel grows freely,so the clamp only
   truncated the text for no reason. */
@media (max-width:980px){
  .cm-p-tag{display:block;-webkit-line-clamp:none;overflow:visible}
}
/* In a course row the number is centred against the whole row,which leaves it
   floating beside the second line of a title that wraps. On narrow screens the
   title almost always wraps,so align the number to the first line instead. */
@media (max-width:640px){
  .crow{align-items:start;gap:12px}
  .crow .cn{line-height:1.05;padding-top:1px}
}
/* ---------------------------------------------------------------- policies */
.pol-bar{position:sticky;top:64px;z-index:40;padding:14px 0;background:rgba(12,20,36,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)}
.pg-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pg-nav::-webkit-scrollbar{display:none}
.pg-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.pg-chip i{font-family:var(--display);font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--lime)}
.pg-chip:hover,.pg-chip.on{background:var(--glass-2);border-color:var(--edge-2);color:var(--ink)}
.pg-helps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.pg-help{display:grid;gap:5px;padding:20px;border-radius:var(--radius-sm);border:1px solid var(--edge);background:var(--glass);text-decoration:none;position:relative;transition:background .25s,border-color .25s,transform .3s var(--ease)}
.pg-help b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;padding-right:20px}
.pg-help span{font-size:13px;color:var(--muted);line-height:1.45}
.pg-help em{position:absolute;top:18px;right:16px;color:var(--lime);opacity:0;transition:opacity .25s,transform .25s}
.pg-help em svg{width:14px;height:14px;display:block}
.pg-help:hover{background:var(--glass-2);border-color:var(--edge-2);transform:translateY(-2px)}
.pg-help:hover em{opacity:1;transform:translateX(2px)}
.pol-group{scroll-margin-top:130px;padding-top:clamp(56px,7vw,96px);padding-bottom:0}
.pg-head{max-width:720px;margin-bottom:28px}
.pg-head h2{font-size:clamp(30px,3.2vw,46px);margin-top:10px}
.pg-head .lead{margin-top:12px;font-size:17px}
.pol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pol-card{display:grid;gap:10px;align-content:start;padding:26px;border-radius:var(--radius);border:1px solid var(--edge);background:var(--glass);text-decoration:none;transition:background .3s,border-color .3s,transform .35s var(--ease)}
.pol-card:hover{background:var(--glass-2);border-color:var(--edge-2);transform:translateY(-3px)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-code{font-family:var(--display);font-style:normal;font-size:14px;letter-spacing:.09em;color:var(--lime)}
.pc-status{margin-left:auto;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--edge);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pol-card h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--ink)}
.pol-card p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--edge);font-size:12.5px;color:var(--muted)}
.pc-foot em{color:var(--lime);font-style:normal;display:flex}
.pc-foot em svg{width:14px;height:14px}
.pol-ask{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:clamp(56px,7vw,90px);padding:clamp(28px,3.4vw,44px);border-radius:var(--radius);border:1px solid var(--edge);background:linear-gradient(120deg,rgba(109,97,255,.16),rgba(36,107,253,.08))}
.pol-ask h3{font-family:var(--display);font-size:clamp(26px,2.6vw,34px);letter-spacing:.03em;line-height:1}
.pol-ask p{margin-top:10px;max-width:62ch;font-size:15px;color:var(--ink-2)}
/* ------------------------------------------------------------ policy page */
.policy-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(32px,4.5vw,72px);align-items:start}
.p-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.p-meta span{display:grid;gap:3px;padding:12px 18px;border-radius:var(--radius-sm);border:1px solid var(--edge);background:var(--glass);font-size:14px;color:var(--ink)}
.p-meta b{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.prose .p-kv{display:grid;gap:0;margin:0 0 20px;border-top:1px solid var(--edge)}
.prose .p-kv dt{padding:14px 0 4px;font-weight:600;color:var(--ink);font-size:15px}
.prose .p-kv dd{margin:0;padding:0 0 14px;border-bottom:1px solid var(--edge);color:var(--ink-2);font-size:15.5px}
.prose ol.p-steps{counter-reset:ps;list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.prose ol.p-steps li{counter-increment:ps;position:relative;padding-left:40px;margin:0}
.prose ol.p-steps li::before{content:counter(ps,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--display);font-size:15px;letter-spacing:.06em;color:var(--lime)}
.prose h2{scroll-margin-top:110px}
.p-toc{padding:24px}
.p-toc nav{display:grid;gap:2px;position:relative;max-height:min(52vh,460px);overflow-y:auto}
.p-toc nav a{display:block;padding:7px 10px;border-radius:9px;font-size:13.5px;line-height:1.35;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.p-toc nav a:hover{background:var(--glass);color:var(--ink)}
.p-toc nav a.on{color:var(--lime);border-left-color:var(--lime);background:var(--glass)}
.p-sibs{display:grid;gap:2px;position:relative}
.p-sibs a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--edge);transition:color .2s}
.p-sibs a:last-child{border-bottom:0}
.p-sibs a:hover{color:var(--lime)}
.policy-grid .aside-stack{position:sticky;top:96px;display:grid;gap:14px}
@media (max-width:1080px){.pg-helps{grid-template-columns:repeat(2,1fr)}
.policy-grid{grid-template-columns:1fr}
.policy-grid .aside-stack{position:static;grid-template-columns:repeat(2,1fr)}
.p-toc{grid-column:1/-1}}
@media (max-width:760px){.pol-bar{top:58px;padding:10px 0}
.pol-grid{grid-template-columns:1fr}
.pg-helps{grid-template-columns:1fr}
.policy-grid .aside-stack{grid-template-columns:1fr}
.p-meta span{flex:1 1 100%}
.pol-ask{flex-direction:column;align-items:flex-start}
.pol-ask .btn{width:100%;justify-content:center}}
.policy-page .page-hero h1{font-size:clamp(34px,4.4vw,62px);max-width:16ch}
.policy-page .page-hero{min-height:auto;padding-bottom:clamp(48px,6vw,84px)}
/* ------------------------------------------------- AI learning pathway tool */
.pw-page .page-hero h1{max-width:15ch}
.pw-page .page-hero{min-height:auto;padding-bottom:clamp(40px,5vw,72px)}
.pw-stage{padding-top:clamp(36px,4.5vw,64px)}
.pw-shell{position:relative;border-radius:var(--radius);border:1px solid var(--edge);background:var(--glass);backdrop-filter:blur(16px);overflow:hidden}
.pw-bar{display:flex;align-items:center;gap:16px;padding:16px clamp(20px,3vw,40px);border-bottom:1px solid var(--edge)}
.pw-track{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.pw-track i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--peri),var(--lime));transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s var(--ease-out)}
.pw-count{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--muted);white-space:nowrap}
.pw-restart{background:none;border:0;padding:0;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pw-restart:hover{color:var(--ink)}
.pw-screens{position:relative}
.pw-screen{display:none;padding:clamp(26px,3.4vw,48px)}
.pw-screen.on{display:block;animation:pwIn .4s var(--ease-out) both}
@keyframes pwIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}}
.pw-intro{display:grid;gap:22px;justify-items:start}
.pw-open{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:46ch}
.pw-start{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pw-note{font-size:13.5px;color:var(--muted)}
.pw-qhead{max-width:60ch;margin-bottom:26px}
.pw-step{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--lime)}
.pw-qhead h2{font-family:var(--display);font-size:clamp(28px,3.2vw,42px);letter-spacing:.03em;line-height:1.02;margin:10px 0 10px}
.pw-qhead p{font-size:15px;color:var(--muted);line-height:1.5}
.pw-cap{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;border:1px solid var(--edge);font-size:12px;color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.pw-cap.hit{background:rgba(217,3,104,.22);border-color:rgba(217,3,104,.5);color:var(--ink)}
.pw-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pw-opts.logos{grid-template-columns:repeat(3,1fr)}
.pw-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:var(--radius-sm);border:1px solid var(--edge);background:rgba(255,255,255,.035);color:var(--ink);cursor:pointer;transition:background .22s,border-color .22s,transform .22s var(--ease)}
.pw-opt:hover{background:rgba(255,255,255,.075);border-color:var(--edge-2);transform:translateY(-1px)}
.pw-opt b{display:block;font-size:15px;font-weight:500;line-height:1.35}
.pw-opt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}
.pw-opt span{flex:1;min-width:0}
.pw-tick{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--edge-2);position:relative;transition:background .2s,border-color .2s}
.pw-tick::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid var(--deep);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.3);opacity:0;transition:opacity .18s,transform .18s}
.pw-opt.on{background:rgba(219,254,135,.1);border-color:rgba(219,254,135,.5)}
.pw-opt.on .pw-tick{background:var(--lime);border-color:var(--lime)}
.pw-opt.on .pw-tick::after{opacity:1;transform:rotate(45deg) scale(1)}
.pw-opts.logos .pw-opt{display:grid;grid-template-columns:104px 1fr 20px;gap:14px;align-items:center}
.pw-opts.logos .pw-opt b{font-size:14px}
.pw-opts.logos .pw-opt > span{min-width:0}
.pw-opt .pw-logo{justify-self:center;width:100%;height:24px;max-width:104px;max-height:24px;object-fit:contain;opacity:.92}
.pw-opt .pw-glyph{justify-self:center;flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--edge-2);background:linear-gradient(135deg,rgba(109,97,255,.45),rgba(36,107,253,.22))}
.pw-text{margin-top:18px}
.pw-text label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.pw-text textarea,.pw-f textarea,.pw-f input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:15px;resize:vertical}
.pw-text textarea::placeholder,.pw-f textarea::placeholder{color:rgba(243,239,236,.34)}
.pw-text textarea:focus,.pw-f input:focus,.pw-f textarea:focus{outline:none;border-color:rgba(219,254,135,.55);background:rgba(255,255,255,.07)}
.pw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px clamp(20px,3vw,40px);border-top:1px solid var(--edge);background:rgba(0,0,0,.14)}
.pw-foot .btn[disabled]{opacity:.38;pointer-events:none}
/* ---------------------------------------------------------------- results */
.pw-result{display:grid;gap:22px}
.pw-ctx{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--edge)}
.pw-ctx > b{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted);flex:0 0 auto}
.pw-ctx div{display:flex;flex-wrap:wrap;gap:7px}
.pw-ctx span{padding:5px 12px;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.04);font-size:12.5px;color:var(--ink-2)}
.pw-head h2{font-size:clamp(30px,3.8vw,52px);margin-top:10px;line-height:1}
.pw-head .lead{margin-top:12px}
.pw-card{padding:clamp(22px,2.6vw,32px);border-radius:var(--radius);border:1px solid rgba(219,254,135,.32);background:linear-gradient(140deg,rgba(219,254,135,.1),rgba(109,97,255,.08))}
.pw-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pw-hours{font-family:var(--display);font-size:16px;letter-spacing:.05em;color:var(--lime)}
.pw-accred{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--edge);border-radius:999px;padding:4px 10px}
.pw-card h3{font-family:var(--display);font-size:clamp(26px,2.8vw,36px);letter-spacing:.03em;line-height:1}
.pw-card p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.pw-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.pw-topics span{padding:5px 12px;border-radius:999px;border:1px solid var(--edge);font-size:12.5px;color:var(--ink-2)}
.pw-why,.pw-tailor,.pw-env,.pw-path,.pw-beyond{padding:clamp(20px,2.4vw,28px);border-radius:var(--radius);border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.pw-why h3,.pw-tailor h3,.pw-env h3,.pw-path h3,.pw-beyond h3{font-family:var(--display);font-size:24px;letter-spacing:.03em;line-height:1;margin-bottom:12px}
.pw-why p{font-size:16px;line-height:1.62;color:var(--ink-2);max-width:74ch}
.pw-why p + p{margin-top:9px}
.pw-why ul,.pw-tailor ul{display:grid;gap:9px;padding:0;margin:0;list-style:none}
.pw-why li,.pw-tailor li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.pw-why li::before,.pw-tailor li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--lime)}
.pw-pathnote{font-size:14px;color:var(--muted);margin-bottom:16px}
.pw-path ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pw-path li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--edge);background:rgba(255,255,255,.035)}
.pw-path li i{font-family:var(--display);font-style:normal;font-size:20px;letter-spacing:.05em;color:var(--lime)}
.pw-path li b{display:block;font-size:15.5px;font-weight:600}
.pw-path li span{font-size:13px;color:var(--muted)}
.pw-envlist{font-family:var(--display);font-size:clamp(20px,2.2vw,28px);letter-spacing:.04em;color:var(--ink)}
.pw-envnote{margin-top:10px;font-size:14.5px;color:var(--muted);max-width:70ch}
.pw-beyond{border-color:rgba(109,97,255,.38);background:linear-gradient(130deg,rgba(109,97,255,.15),transparent)}
.pw-beyond p{font-size:15.5px;color:var(--ink-2);max-width:72ch}
.pw-beyond-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.pw-beyond-links .link{color:var(--lime);font-size:14.5px}
.pw-cta{padding:clamp(24px,2.8vw,36px);border-radius:var(--radius);border:1px solid var(--edge-2);background:linear-gradient(140deg,rgba(36,107,253,.16),rgba(12,20,36,.4))}
.pw-cta-head h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:.03em;line-height:1}
.pw-cta-head p{margin-top:10px;font-size:15.5px;color:var(--ink-2);max-width:64ch}
.pw-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.pw-f{display:grid;gap:7px}
.pw-f.full{grid-column:1/-1}
.pw-f span{font-size:13px;font-weight:500;color:var(--ink-2)}
.pw-f em{font-style:normal;color:var(--muted)}
.pw-f.bad input{border-color:rgba(217,3,104,.7)}
.pw-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.pw-formnote{grid-column:1/-1;font-size:13px;color:var(--muted);max-width:70ch}
.pw-formnote a{color:var(--lime)}
.pw-sent h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:.03em;line-height:1;margin-bottom:10px}
.pw-sent p{font-size:15.5px;color:var(--ink-2);max-width:66ch;margin-bottom:16px}
.pw-raw{margin-top:18px;font-size:13.5px;color:var(--muted)}
.pw-raw summary{cursor:pointer;padding:8px 0}
.pw-raw pre{white-space:pre-wrap;word-break:break-word;padding:16px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.28);font-size:12.5px;line-height:1.55;color:var(--ink-2);max-height:340px;overflow:auto}
@media (max-width:900px){.pw-opts,.pw-opts.logos{grid-template-columns:1fr}
.pw-opts.logos .pw-opt{grid-template-columns:92px 1fr 20px}
.pw-form{grid-template-columns:1fr}}
@media (max-width:560px){.pw-screen{padding:20px 16px}
.pw-bar{padding:14px 16px;gap:12px}
.pw-foot{padding:14px 16px}
.pw-foot .btn{flex:1;justify-content:center;padding-inline:14px}
.pw-start .btn{width:100%;justify-content:center}
.pw-ctx{flex-direction:column;gap:10px}
.pw-actions .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pw-screen.on{animation:none}
.pw-track i{transition:none}}
.pw-flag{padding:clamp(20px,2.4vw,28px);border-radius:var(--radius);border:1px solid rgba(217,3,104,.32);background:rgba(217,3,104,.07)}
.pw-flag h3{font-family:var(--display);font-size:24px;letter-spacing:.03em;line-height:1;margin-bottom:12px}
.pw-flag ul{display:grid;gap:9px;padding:0;margin:0 0 12px;list-style:none}
.pw-flag li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.pw-flag li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--crimson)}
.pw-flag p{font-size:14.5px;color:var(--muted);max-width:74ch}
/* ------------------------------------------------- phone & tablet polish */
/* Applied last on purpose: everything here is scoped to a media query,so it
   cannot silently override a desktop rule the way an unscoped block would. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (hover:none){a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(219,254,135,.18)}}
@media (max-width:900px){/* Touch targets. Inline links in dense lists are too shallow to hit reliably. */
  .footer ul a{display:inline-block;padding:9px 0}
.footer .bottom a{display:inline-block;padding:6px 2px}
.dfoot a{padding:8px 0}
.link{display:inline-flex;align-items:center;gap:6px;padding:12px 0}
.aside-card .link{padding:10px 0}
.prose a,.form-note a,.aside-card p a{display:inline-block;padding:7px 0}
.p-sibs a{padding:11px 0}
.p-toc nav a{padding:10px 10px}
.pg-nav{padding-block:2px}
.pg-chip{padding:11px 16px}}
@media (max-width:560px){/* 10.5px micro-labels are legible on a laptop and not on a phone. */
  .cap-cols h4,.cm-bands span,.cm-label b,.crow .lvl,.ilayer .owner b,.p-meta b,.pc-status,.pt-meta b,.hero .picker button em{font-size:11.5px}
.pw-accred,.cm-label,.tsep{font-size:11.5px}
/* iOS zooms the page when a focused input is under 16px. */
  .pw-f input,.pw-f textarea,.pw-text textarea,.form input,.form textarea,.form select{font-size:16px}
/* Long unbroken strings (emails,URLs,document codes) on narrow screens. */
  .prose,.pw-why,.pw-tailor,.pol-card p{overflow-wrap:break-word}}
/* Visually-hidden section labels: they keep the heading order intact for screen
   readers on pages where the visible section head is suppressed by design. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cap-h{display:block;margin:0;font:inherit;letter-spacing:normal;line-height:inherit;text-wrap:wrap}
/* Footer social links: icons rather than text,matching the contact page. */
.footer .fsoc{display:flex;gap:10px;margin-top:6px}
.footer .fsoc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);display:grid;place-items:center;color:var(--ink-2);transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.footer .fsoc a svg{width:17px;height:17px;display:block}
.footer .fsoc a:hover{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:translateY(-2px)}
@media (max-width:900px){.footer .fsoc a{width:44px;height:44px;padding:0}}
/* ---- phone performance ---------------------------------------------------
   The four aurora blobs were 60vw boxes carrying filter:blur(80px) and
   mix-blend-mode:screen,animated continuously. On a phone that is a very large
   blurred,blended surface recomposited every frame,and it was the single
   biggest cause of scroll jank. Below 900px the same light is painted as plain
   radial gradients: no blur filter,no blend mode,no animation. The look is
   near identical at this size; the cost is one cheap paint instead of four
   expensive layers per frame. */
@media (max-width:900px){
  .aurora{background:
    radial-gradient(58% 34% at 16% 6%,rgba(109,97,255,.40),transparent 62%),
    radial-gradient(52% 32% at 90% 16%,rgba(36,107,253,.32),transparent 64%),
    radial-gradient(64% 40% at 46% 72%,rgba(217,3,104,.10),transparent 66%),
    radial-gradient(120% 80% at 50% 0%,#152039 0%,var(--deep) 60%)}
}
/* backdrop-filter is a per-frame readback of everything behind the element.
   On a phone the glass surfaces are small and mostly over flat colour,so a
   plain translucent fill is visually close and far cheaper. */
@media (max-width:760px){
  .nav,.drawer,.glass,.tool,.ov-veil,.ov-close,.hero .meta span{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}