/* 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. */
/* self-hosted Geist + Montserrat (variable fonts, Google's latin / latin-ext subsets; latin-ext carries the peso sign) */
@font-face{font-family:Geist;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --aqua:#6EF3E6; --magenta:#C2187F; --pink:#FF7CC4; --charcoal:#2B2B2B; --ink:#1E1E21; --white:#F4F4F6;
  --muted:rgba(244,244,246,.66); --faint:rgba(244,244,246,.52); --mag-text:#D23291;
  --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(--mag-text)} .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}
/* The glows used filter:blur(80px), which a phone GPU re-renders every frame: Android scroll ran ~20 fps (Kenneth,
   2026-10-22: "a bit laggy in my android phone"); dropping the filter gave 57. The blur is now baked into the gradient
   stops (bake_blur.py in the ghl-builder waitlist-build skill: the Gaussian-blurred profile of the old blob, boxes grown
   240px = 3 sigma per side so the soft tail fits). Matches the old blur within 4/255 at 390-1920px. Three tiers because
   an 80px blur is a bigger share of a phone-sized blob. */
/* the slow drift runs as CSS keyframes on the compositor (it was a GSAP tween writing transforms on the main thread
   every frame, forever) */
.blob{position:absolute;border-radius:50%;will-change:transform;animation:20s cubic-bezier(.37,0,.63,1) infinite alternate}
.blob.m{animation-name:drift-m;animation-duration:14s}
.blob.a{animation-name:drift-a;animation-duration:18s}
.blob.m2{animation-name:drift-m2;animation-duration:22s}
@keyframes drift-m{to{transform:translate(60px,-50px) scale(1.08)}}
@keyframes drift-a{to{transform:translate(-90px,75px) scale(1.12)}}
@keyframes drift-m2{to{transform:translate(120px,-100px) scale(1.16)}}
@media (prefers-reduced-motion:reduce){ .blob{animation:none} }
.blob.m{width:calc(46vmax + 480px);height:calc(46vmax + 480px);right:calc(-16vmax - 240px);top:calc(-20vmax - 240px)}
.blob.a{width:calc(40vmax + 480px);height:calc(40vmax + 480px);left:calc(-18vmax - 240px);bottom:calc(-22vmax - 240px)}
.blob.m2{width:calc(26vmax + 480px);height:calc(26vmax + 480px);left:calc(40vw - 240px);bottom:calc(-16vmax - 240px)}
.blob.m{background:radial-gradient(circle,rgba(194,24,127,0.343) 0%,rgba(194,24,127,0.333) 5%,rgba(194,24,127,0.305) 10%,rgba(194,24,127,0.264) 15%,rgba(194,24,127,0.214) 20%,rgba(194,24,127,0.162) 25%,rgba(194,24,127,0.113) 30%,rgba(194,24,127,0.07) 35%,rgba(194,24,127,0.039) 40%,rgba(194,24,127,0.018) 45%,rgba(194,24,127,0.007) 50%,rgba(194,24,127,0.002) 55%,rgba(194,24,127,0) 55.9%)}
.blob.a{background:radial-gradient(circle,rgba(110,243,230,0.166) 0%,rgba(110,243,230,0.161) 5%,rgba(110,243,230,0.147) 10%,rgba(110,243,230,0.126) 15%,rgba(110,243,230,0.1) 20%,rgba(110,243,230,0.074) 25%,rgba(110,243,230,0.05) 30%,rgba(110,243,230,0.031) 35%,rgba(110,243,230,0.017) 40%,rgba(110,243,230,0.008) 45%,rgba(110,243,230,0.003) 50%,rgba(110,243,230,0.001) 55%,rgba(110,243,230,0) 55.3%)}
.blob.m2{background:radial-gradient(circle,rgba(194,24,127,0.094) 0%,rgba(194,24,127,0.091) 5%,rgba(194,24,127,0.082) 10%,rgba(194,24,127,0.068) 15%,rgba(194,24,127,0.053) 20%,rgba(194,24,127,0.038) 25%,rgba(194,24,127,0.025) 30%,rgba(194,24,127,0.015) 35%,rgba(194,24,127,0.008) 40%,rgba(194,24,127,0.004) 45%,rgba(194,24,127,0.002) 50%,rgba(194,24,127,0) 54.6%)}
@media (max-width:900px){
  .blob.m{background:radial-gradient(circle,rgba(194,24,127,0.251) 0%,rgba(194,24,127,0.243) 5%,rgba(194,24,127,0.218) 10%,rgba(194,24,127,0.182) 15%,rgba(194,24,127,0.141) 20%,rgba(194,24,127,0.101) 25%,rgba(194,24,127,0.066) 30%,rgba(194,24,127,0.039) 35%,rgba(194,24,127,0.021) 40%,rgba(194,24,127,0.01) 45%,rgba(194,24,127,0.004) 50%,rgba(194,24,127,0) 54.1%)}
  .blob.a{background:radial-gradient(circle,rgba(110,243,230,0.114) 0%,rgba(110,243,230,0.11) 5%,rgba(110,243,230,0.098) 10%,rgba(110,243,230,0.082) 15%,rgba(110,243,230,0.063) 20%,rgba(110,243,230,0.044) 25%,rgba(110,243,230,0.029) 30%,rgba(110,243,230,0.017) 35%,rgba(110,243,230,0.009) 40%,rgba(110,243,230,0.004) 45%,rgba(110,243,230,0.002) 50%,rgba(110,243,230,0) 53.7%)}
  .blob.m2{background:radial-gradient(circle,rgba(194,24,127,0.052) 0%,rgba(194,24,127,0.051) 5%,rgba(194,24,127,0.045) 10%,rgba(194,24,127,0.038) 15%,rgba(194,24,127,0.029) 20%,rgba(194,24,127,0.021) 25%,rgba(194,24,127,0.014) 30%,rgba(194,24,127,0.008) 35%,rgba(194,24,127,0.005) 40%,rgba(194,24,127,0.002) 45%,rgba(194,24,127,0.001) 50%,rgba(194,24,127,0) 52.7%)}
}
@media (min-width:1700px){
  .blob.m{background:radial-gradient(circle,rgba(194,24,127,0.382) 0%,rgba(194,24,127,0.372) 5%,rgba(194,24,127,0.343) 10%,rgba(194,24,127,0.301) 15%,rgba(194,24,127,0.252) 20%,rgba(194,24,127,0.201) 25%,rgba(194,24,127,0.148) 30%,rgba(194,24,127,0.099) 35%,rgba(194,24,127,0.058) 40%,rgba(194,24,127,0.028) 45%,rgba(194,24,127,0.011) 50%,rgba(194,24,127,0.003) 55%,rgba(194,24,127,0) 57%)}
  .blob.a{background:radial-gradient(circle,rgba(110,243,230,0.189) 0%,rgba(110,243,230,0.184) 5%,rgba(110,243,230,0.169) 10%,rgba(110,243,230,0.148) 15%,rgba(110,243,230,0.122) 20%,rgba(110,243,230,0.095) 25%,rgba(110,243,230,0.068) 30%,rgba(110,243,230,0.044) 35%,rgba(110,243,230,0.025) 40%,rgba(110,243,230,0.012) 45%,rgba(110,243,230,0.005) 50%,rgba(110,243,230,0.001) 55%,rgba(110,243,230,0) 56.3%)}
  .blob.m2{background:radial-gradient(circle,rgba(194,24,127,0.119) 0%,rgba(194,24,127,0.115) 5%,rgba(194,24,127,0.105) 10%,rgba(194,24,127,0.089) 15%,rgba(194,24,127,0.071) 20%,rgba(194,24,127,0.052) 25%,rgba(194,24,127,0.035) 30%,rgba(194,24,127,0.022) 35%,rgba(194,24,127,0.012) 40%,rgba(194,24,127,0.006) 45%,rgba(194,24,127,0.002) 50%,rgba(194,24,127,0.001) 55%,rgba(194,24,127,0) 55.7%)}
}
/* 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(--pink)}
/* 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}
/* the cover is the page's largest paint, so it rises in on CSS from first paint instead of waiting for GSAP to load
   (PageSpeed, 2026-10-22: LCP waited on the script). If .js comes off (no GSAP) it simply shows. */
.js .showcase{animation:rise 1.1s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}

@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} .js .showcase{animation:none} }


/* slot-machine numbers (site.js): each digit is a 1em window onto a spinning strip; tabular figures keep every reel
   the same width so nothing shifts while the strips run */
[data-count]{font-variant-numeric:tabular-nums}
.reel{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.reel-strip{display:block;will-change:transform}
.reel-strip > span{display:block;height:1em;line-height:1}