/* Bhe-In-Demand - ACCLA site. Brand guide: charcoal ground + soft glows, see-through glass, one hue per element,
   aqua #6EF3E6 / magenta #C2187F / charcoal #2B2B2B / greyish white #F4F4F6, Montserrat wordmark, Geist everything else.
   Vibe: ethereal glass, editorial spacing. Depth from layered bezels and light, never heavy drop shadows. */
:root{
  --aqua:#6EF3E6; --magenta:#C2187F; --pink:#FF7CC4; --charcoal:#2B2B2B; --ink:#1E1E21; --white:#F4F4F6;
  --muted:rgba(244,244,246,.66); --faint:rgba(244,244,246,.42);
  --line:rgba(255,255,255,.10); --line-hi:rgba(255,255,255,.16);
  --mag-tint:rgba(194,24,127,.20); --aqua-tint:rgba(110,243,230,.11);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(16px,4vw,56px); --section:clamp(80px,10vw,136px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--charcoal)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
/* no body background: with html painting the charcoal, an opaque body box would sit on top of the z-index:-1 glows */
body{font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;background:transparent;color:var(--white);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
a{color:inherit}
/* height:auto, or the width/height attributes (kept for CLS) beat aspect-ratio and the image renders 720px tall */
img{display:block;max-width:100%;height:auto}
.accent{color:var(--magenta)} .aqua{color:var(--aqua)} .pink{color:var(--pink)}
/* read by screen readers, not shown */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark{font-family:Montserrat,Geist,sans-serif;font-weight:800;letter-spacing:-.01em}
.wrap{width:min(1200px, 100% - var(--gutter) * 2);margin-inline:auto}

/* ---------- atmosphere: drifting glows, grain, cursor light ---------- */
.atmos{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.blob.m{width:46vmax;height:46vmax;right:-16vmax;top:-20vmax;background:radial-gradient(circle,rgba(194,24,127,.5),rgba(194,24,127,0) 68%)}
.blob.a{width:40vmax;height:40vmax;left:-18vmax;bottom:-22vmax;background:radial-gradient(circle,rgba(110,243,230,.26),rgba(110,243,230,0) 68%)}
.blob.m2{width:26vmax;height:26vmax;left:40vw;bottom:-16vmax;background:radial-gradient(circle,rgba(194,24,127,.2),rgba(194,24,127,0) 70%)}
/* film grain (Kenneth, 2026-10-22: "make the background grain texture"): mid-grey noise (sRGB, contrast x2 around 50%)
   on soft-light. Soft-light at 50% grey changes nothing, so the grain neither lifts the charcoal nor greys the glows -
   it only adds texture (the old white specks at 6% added 1.4 levels of texture and lifted the ground by 6). Overlay
   would vanish on near-black; at this ground (~17%) soft-light lands. Measured with grain_check.cjs. */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.24;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2 0 0 0 -.5 2 0 0 0 -.5 2 0 0 0 -.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,0) 62%);opacity:0;will-change:transform}

/* ---------- surfaces ---------- */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.22)}
.blur{backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
.bezel{padding:8px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(0,0,0,.75)}
.bezel > .inner{border-radius:24px;background:rgba(26,26,29,.62);border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:14px 15px 14px 24px;border-radius:999px;color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),var(--magenta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px -16px rgba(194,24,127,.9);will-change:transform}
.btn .arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .35s var(--spring)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- header ---------- */
/* No bar: logo, ACCLA mark and wordmark sit on the hero (Kenneth: "it should look like part of the hero") and scroll
   away with the page. It used to stick and close into a glass pill; Kenneth, 2026-10-22: "don't shrink to nav pill. Let
   it stay the way it is" - see git history for the pill (clip-path glass + navShrink measuring). */
.bar{position:relative;z-index:20;padding:14px 0}
.shell{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:56px;padding:0 9px 0 12px}
.brand{display:flex;align-items:center;gap:12px;justify-self:start;text-decoration:none}
.brand img{width:32px;height:32px}
.brand .who{font-weight:600;font-size:14px;line-height:1.2}
.brand .who span{display:block;color:var(--faint);font-weight:500;font-size:13px}
.end{justify-self:end;display:flex;align-items:center;padding-right:7px}
.end .wordmark{font-size:13.5px;white-space:nowrap}
.end .wordmark .h{color:var(--magenta)}
/* centre: the ACCLA / FRAMEWORK mark (Kenneth, 2026-10-22: it replaces the Course | Waitlist tabs, the site is one
   page now). ACCLA in aqua as on the course cover, FRAMEWORK spread to exactly its width */
.nav{position:relative;display:grid;width:fit-content;font-family:Montserrat,Geist,sans-serif;font-weight:800;line-height:.8}
.mark .m-a{font-size:34px;letter-spacing:-.045em;padding-right:.04em;color:var(--aqua);text-shadow:0 0 22px rgba(110,243,230,.35)}
.mark .m-f{display:flex;justify-content:space-between;font-size:8.5px;margin-top:.6em;color:var(--white)}

/* in-page links (#join) land with a little air above */
[id]{scroll-margin-top:24px}

/* platform logos: real brand marks, each on its own small glass tile */
.platforms{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--faint)}
.platforms ul{list-style:none;display:flex;gap:8px}
.platforms li{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .35s var(--spring)}
.platforms li:hover{transform:translateY(-3px)}
.platforms img{width:22px;height:22px;object-fit:contain}

/* footer: "B. Sign-off", picked on PLAN-footer.html (Kenneth, 2026-10-22: "simple but premium"). Centred like the last
   line of a letter: the mark, the tagline set large with a soft magenta glow under it, one row of links, the copyright.
   No card, no columns. */
footer{position:relative;margin-top:clamp(48px,6vw,72px);padding:0 0 40px;text-align:center;overflow:hidden}
footer::before{content:"";position:absolute;left:50%;bottom:-260px;width:900px;height:420px;margin-left:-450px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,24,127,.28),transparent);pointer-events:none}
footer .wrap{position:relative;display:grid;justify-items:center;gap:20px;padding-top:40px;border-top:1px solid var(--line)}
footer .b img{width:40px;height:40px}
footer .sign{font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
footer .sign span{color:var(--aqua)}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:6px}
footer nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s ease}
footer nav a:hover,footer nav a:focus-visible{color:var(--white)}
footer .sub{font-size:13px;color:var(--faint);margin-top:14px}

/* page change (the 404 page's links to the waitlist): an even crossfade of the whole page. No named layers: named
   header pieces flashed as lighter rectangles mid-change (2026-10-22), and a named element is a backdrop root that
   cuts glass off from its blur */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .4s linear both}
::view-transition-new(root){animation:vt-in .4s linear both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* split headline words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w > span{display:inline-block;will-change:transform}

/* only hidden once JS has armed the motion; with no JS or reduced motion everything is simply visible */
.js .reveal,.js .rv{opacity:0}

@media (max-width:640px){
  .shell{grid-template-columns:auto 1fr}
  .end,.brand .who{display:none}
  .nav{justify-self:end}
}
@media (prefers-reduced-motion:reduce){ .js .reveal,.js .rv{opacity:1} }