/* ============================================================
   All is Well Health Care Academy — site skin
   BRAND (locked, pixel-sampled from the client's logo):
     #662D91 purple  — text-safe on white (~7:1), primary
     #A381BD lavender — accent/tint/border ONLY, never body text
   DESIGN DNA (measured from reference yucca.co.za, 15 Aug 2026):
     Magnetik grotesk · h1 ~98px @ weight 200 · body 22px @ 300
     ink #1D1D1B on warm cream #FFFDF5 · tonal section fills
     crisp 4–6px radii · understated buttons · marquee ribbons
   Mapped here: Hanken Grotesk light at huge sizes, whisper-tinted
   ground, hairline cards, flat color, hard edges. NO gradients.
   ============================================================ */

:root{
  --purple:#662D91;
  --purple-deep:#4A2069;     /* darker shade of the brand purple — bands */
  --lavender:#A381BD;
  --lav-tint:#F3EEF8;        /* lavender wash — section fill (Yucca's sand role) */
  --lav-tint-2:#E9E1F1;      /* deeper wash — cards on tint */
  --lav-line:#DCD2E7;        /* hairlines */
  --ink:#221A2C;             /* near-black, purple cast (Yucca's #1D1D1B role) */
  --ink-soft:#5A4E66;        /* secondary text — 7.2:1 on white */
  --bg:#FEFDFB;              /* whisper-warm white (Yucca's cream, dialed back) */
  --bg-off:#F8F5FB;
  --r:6px;                   /* crisp Yucca radius */
  --r-lg:18px;
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:19px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--purple);text-decoration:none}
p{max-width:66ch}
::selection{background:var(--purple);color:#fff}

/* ---------- intro: logo film overlay (played once per session) ---------- */
.aiw-intro{
  position:fixed;inset:0;z-index:2000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.aiw-intro-film{width:min(640px,80vw);height:auto}
.aiw-intro-skip{
  position:absolute;right:26px;bottom:24px;font-family:var(--font);
  font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);background:none;border:1px solid var(--lav-line);
  border-radius:999px;padding:10px 22px;cursor:pointer;transition:.2s;
}
.aiw-intro-skip:hover{color:var(--purple);border-color:var(--purple)}
.aiw-intro{flex-direction:column;gap:26px}
.aiw-intro-word{opacity:0;animation:aiw-word-in 1.2s cubic-bezier(.22,1,.36,1) 4.6s forwards;
  text-align:center;font-weight:300;font-size:clamp(30px,4.5vw,54px);letter-spacing:.14em;color:var(--purple)}
.aiw-intro-word span{display:block;font-size:clamp(12px,1.3vw,16px);font-weight:600;letter-spacing:.34em;
  color:var(--ink-soft);margin-top:10px}
@keyframes aiw-word-in{to{opacity:1}}
body.intro-lock{overflow:hidden}

/* ---------- animated brand film in the header ---------- */
.aiw-brand-film{width:52px;height:auto;display:block}

/* ---------- header ---------- */
.aiw-header{
  position:sticky;top:0;z-index:100;background:rgba(254,253,251,.9);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--lav-line);
}
.aiw-header .wrap{
  max-width:var(--max);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:28px;height:76px;
}
.aiw-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.aiw-brand img{width:44px;height:auto}
.aiw-brand .b1{font-size:15px;line-height:1.15;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.aiw-brand .b2{display:block;font-size:10.5px;font-weight:500;color:var(--purple);letter-spacing:.16em}
.aiw-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.aiw-nav a{
  font-size:15.5px;font-weight:500;color:var(--ink);
  padding:9px 15px;border-radius:var(--r);transition:color .2s,background .2s;
}
.aiw-nav a:hover{color:var(--purple);background:var(--lav-tint)}
.aiw-nav a.active{color:var(--purple)}
.aiw-nav a.cta{
  background:var(--purple);color:#fff;font-weight:600;padding:11px 24px;margin-left:10px;border-radius:var(--r);
}
.aiw-nav a.cta:hover{background:var(--purple-deep);color:#fff}
.aiw-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.aiw-burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5.5px 0;transition:.3s}

/* ---------- buttons — understated, crisp (Yucca) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font);font-weight:600;font-size:17px;cursor:pointer;
  padding:16px 30px;border-radius:var(--r);border:1px solid var(--purple);
  background:var(--purple);color:#fff;
  transition:transform .25s var(--ease),background .2s,color .2s;
  will-change:transform;
}
.btn:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
/* Yucca-style underline text link */
.tlink{
  display:inline-flex;gap:10px;align-items:center;font-weight:500;font-size:18px;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .2s,border-color .2s;
}
.tlink:hover{color:var(--purple);border-color:var(--purple)}
.tlink .arr{transition:transform .25s var(--ease)}
.tlink:hover .arr{transform:translateX(5px)}

/* ---------- hero — huge light editorial type ---------- */
.hero{position:relative;padding:clamp(44px,5vw,72px) 28px 90px;overflow:hidden}
.hero .wrap{max-width:var(--max);margin:0 auto;position:relative;z-index:2}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--purple);margin-bottom:30px;
}
.kicker::before{content:"";width:30px;height:2px;background:var(--lavender)}
h1.display{
  font-size:clamp(48px,7.6vw,98px);line-height:1.06;font-weight:300;
  letter-spacing:-.025em;max-width:15ch;
}
h1.display em{font-style:normal;color:var(--purple);font-weight:400}
.hero .sub{font-size:clamp(19px,2vw,23px);font-weight:400;color:var(--ink-soft);margin:32px 0 44px;max-width:52ch}
.hero .cta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.drift{position:absolute;pointer-events:none;z-index:1;will-change:transform;
  background:url('img/drift-mark.png') center/contain no-repeat}
.drift.d1{width:240px;height:240px;opacity:.10;top:8%;right:5%}
.drift.d2{width:96px;height:96px;opacity:.16;bottom:16%;right:20%}
.drift.d3{width:48px;height:48px;opacity:.14;top:28%;right:33%}

/* ---------- site-wide backdrop: the logo film behind every page ---------- */
.site-backdrop{position:fixed;top:0;right:-6%;height:100vh;aspect-ratio:16/9;width:auto;z-index:-1;
  object-fit:contain;opacity:0;pointer-events:none;
  animation:sb-in 2.2s var(--ease) .5s forwards, sb-drift 26s ease-in-out 2.5s infinite alternate}
@keyframes sb-in{to{opacity:.05}}
@keyframes sb-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-18px)}}
/* every band floats above the film, tinted panels go translucent so it reads through */
section.tint{background:rgba(243,238,248,.97)}
section.band{background:var(--purple-deep)}
.deck-band{background:var(--ink)}
.aiw-footer{background:var(--ink);position:relative;z-index:1}
@media (max-width:640px){.site-backdrop{right:-40%;height:70vh;top:8vh}}
@media (prefers-reduced-motion:reduce){.site-backdrop{display:none}}

/* ---------- hero backdrop (Home): the animated logo breathing behind a
     translucent veil - HyperFrames-style slow drift, whole mark always visible ---------- */
.hero-backdrop{position:absolute;top:0;right:-4%;height:100%;aspect-ratio:16/9;width:auto;z-index:0;
  object-fit:contain;opacity:0;pointer-events:none;
  animation:hb-in 2s var(--ease) .4s forwards, hb-drift 22s ease-in-out 2s infinite alternate}
@keyframes hb-in{to{opacity:.16}}
@keyframes hb-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.05) translateY(-14px)}}
.hero-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 30%,rgba(254,253,251,.78) 55%,rgba(254,253,251,.24) 100%)}
@media (max-width:640px){.hero-backdrop{right:-34%}}
@media (prefers-reduced-motion:reduce){.hero-backdrop,.hero-veil{display:none}}

/* ---------- full-bleed photography (Yucca hero pedestal) ---------- */
.bleed-wrap{overflow:hidden;position:relative}
.bleed{width:100%;height:clamp(340px,64vh,660px);object-fit:cover;display:block;will-change:transform}
.bleed-wrap .credit{
  position:absolute;right:18px;bottom:14px;font-size:12.5px;font-weight:500;
  color:#fff;background:rgba(34,26,44,.72);padding:6px 12px;border-radius:var(--r);
}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split .img{border-radius:var(--r);overflow:hidden;border:1px solid var(--lav-line)}
.split .img img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:32px}}

/* ---------- glide-down image reveal ---------- */
.glide{overflow:hidden}
.glide img{
  transform:translateY(-14%) scale(1.1);opacity:0;
  transition:transform 1.3s var(--ease),opacity .9s var(--ease);
  will-change:transform,opacity;
}
.glide img.glid{transform:translateY(0) scale(1);opacity:1}
/* bleed images are driven by the parallax engine — reveal with opacity only */
.glide .bleed{transform:none;transition:opacity 1s var(--ease)}

/* ---------- drag gallery (Yucca "Our Space") ---------- */
.drag-gallery{
  display:flex;gap:18px;overflow-x:auto;padding:6px 4px 22px;
  scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity;
}
.drag-gallery::-webkit-scrollbar{display:none}
.drag-gallery.dragging{cursor:grabbing;scroll-snap-type:none}
.drag-gallery .shot{
  position:relative;flex:0 0 auto;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--lav-line);background:#fff;scroll-snap-align:start;
}
.drag-gallery .shot img{
  height:min(52vh,460px);width:auto;max-width:none;display:block;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.drag-gallery .shot.tall img{height:min(52vh,460px)}
.drag-gallery .shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  font-size:14px;font-weight:500;color:#fff;background:rgba(34,26,44,.62);
}
.drag-pill{
  position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0;
  background:var(--purple);color:#fff;font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;border-radius:999px;transition:opacity .25s;
  will-change:transform;
}

/* ---------- gallery arrows ---------- */
.gal-arrows{display:flex;gap:10px}
.gnav{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--purple);
  background:#fff;color:var(--ink);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  font-family:var(--font);
}
.gnav:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-2px)}

/* ---------- float-up artwork reveal ---------- */
.float-up{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.float-up.in{opacity:1;transform:none}

/* ---------- the gallery wall — framed artwork ---------- */
.wall{columns:3;column-gap:22px}
.wall .frame{
  display:block;break-inside:avoid;margin:0 0 22px;cursor:zoom-in;
  background:#fff;border:1px solid var(--lav-line);padding:14px 14px 12px;
  box-shadow:10px 10px 0 var(--lav-tint);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wall .frame:hover{transform:translateY(-6px);box-shadow:12px 14px 0 var(--lav-tint-2)}
.wall .frame img{width:100%;display:block}
.wall .frame figcaption{
  padding:12px 4px 4px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:12px;
}
.wall .frame figcaption i{font-style:normal;color:var(--lavender);font-weight:600;letter-spacing:.08em}
@media (max-width:960px){.wall{columns:2}}
@media (max-width:640px){.wall{columns:1}}
.drag-gallery .shot{cursor:zoom-in}
.drag-gallery.dragging .shot{cursor:grabbing}

/* ---------- lightbox (expansion) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1500;background:rgba(34,26,44,.94);
  display:none;align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(86vw,1200px);max-height:80vh;display:block;border:6px solid #fff}
.lightbox .lb-cap{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  color:#E9E1F1;font-size:15.5px;font-weight:500;text-align:center;max-width:80vw;
}
.lightbox .lb-count{position:absolute;top:26px;left:32px;color:#CDB4E3;font-size:14px;font-weight:600;letter-spacing:.12em}
.lightbox button{
  position:absolute;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:50%;width:56px;height:56px;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;font-family:var(--font);
}
.lightbox button:hover{background:#fff;color:var(--purple-deep)}
.lightbox .lb-prev{left:28px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:28px;top:50%;transform:translateY(-50%)}
.lightbox .lb-close{top:22px;right:28px;font-size:18px}
@media (max-width:760px){
  .lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}
  .lightbox img{max-width:94vw;border-width:4px}
}

/* ---------- cinema reel (guidance: CPR Animation film — full-bleed scene,
     bold white program title bottom-center, slow crossfade + drift) ---------- */
.cinema{position:relative;height:clamp(420px,76vh,740px);overflow:hidden;background:var(--ink)}
.cinema .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.cinema .slide.on{opacity:1;pointer-events:auto}
.cinema .slide img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cinema .slide.on img{animation:reel-drift 7s var(--ease) forwards}
@keyframes reel-drift{from{transform:scale(1.06) translateY(10px)}to{transform:scale(1) translateY(0)}}
.cinema .cap{
  position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  font-size:clamp(16px,1.8vw,22px);font-weight:500;letter-spacing:0;color:#fff;
  background:rgba(34,26,44,.58);padding:8px 20px;border-radius:var(--r);
  white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.cinema .cap small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#CDB4E3;text-align:center}
.cinema .cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5}
.cinema .cnav.prev{left:22px}.cinema .cnav.next{right:22px}
.cinema .cnav .gnav{background:rgba(254,253,251,.85)}
.cinema .dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.cinema .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.cinema .dots i.on{background:#fff;transform:scale(1.3)}
@media (max-width:760px){.cinema{height:56vh}.cinema .cap{bottom:36px;padding:8px 18px}}

/* ---------- cover-flow shelf (the iTunes album wall — Trading Academy pattern) ---------- */
.shelf{position:relative;height:clamp(360px,52vh,520px);perspective:1200px;overflow:hidden}
.shelf .sleeve{
  position:absolute;top:50%;left:50%;width:clamp(200px,26vw,300px);aspect-ratio:1;
  margin:calc(clamp(200px,26vw,300px)/-2) 0 0 calc(clamp(200px,26vw,300px)/-2);
  transition:transform .55s var(--ease),filter .55s,z-index 0s;
  cursor:pointer;transform-style:preserve-3d;
  border:5px solid #fff;box-shadow:0 18px 44px rgba(34,26,44,.28);
  background:#fff;
  -webkit-box-reflect:below 6px linear-gradient(transparent 72%, rgba(0,0,0,.16));
}
.shelf .sleeve img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.shelf .sleeve .st{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:12.5px;font-weight:600;
  color:#fff;background:rgba(34,26,44,.6);opacity:0;transition:opacity .3s;
}
.shelf .sleeve.is-front .st{opacity:1}
.shelf-cap{text-align:center;margin-top:34px;min-height:28px}
.shelf-cap b{font-size:19px;font-weight:600;color:var(--ink)}
.shelf-cap span{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.shelf-nav{display:flex;justify-content:center;gap:12px;margin-top:20px}

/* ---------- card deck (Deep Field pattern) — fanned covers, focused card raised ---------- */
.deck-band{background:var(--ink);color:#fff;padding:110px 28px}
.deck-band .wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px;align-items:center}
.deck-meta .num{font-size:14px;font-weight:600;letter-spacing:.3em;color:#9A8FA8;font-variant-numeric:tabular-nums;margin-bottom:14px}
.deck-meta h2{font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.1}
.deck-desc{font-size:16.5px;line-height:1.65;color:#CFC6DA;max-width:30ch}
.deck-stage{position:relative;height:clamp(420px,56vh,600px)}
.deck-card{
  position:absolute;top:50%;left:50%;width:clamp(180px,17vw,250px);aspect-ratio:3/4;
  margin:calc(clamp(180px,17vw,250px)*-0.667) 0 0 calc(clamp(180px,17vw,250px)/-2);
  border-radius:14px;overflow:hidden;cursor:pointer;background:#111;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:transform .65s var(--ease),filter .6s,z-index 0s;
  will-change:transform;
}
.deck-card img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.deck-card.is-focus{cursor:zoom-in}
.deck-nav{display:flex;gap:12px;margin-top:26px}
.deck-nav .gnav{background:transparent;border-color:#3A3145;color:#CFC6DA}
.deck-nav .gnav:hover{background:var(--purple);border-color:var(--purple);color:#fff}
@media (max-width:1080px){
  .deck-band .wrap{grid-template-columns:1fr;gap:28px;text-align:center}
  .deck-desc{margin:0 auto}
  .deck-nav{justify-content:center}
  .deck-stage{height:clamp(380px,48vh,520px)}
}
.lightbox img{transform-origin:center center}

/* ---------- reel hero (gallery) — the program reel on a loop ---------- */
.reel-hero{overflow:hidden;background:var(--ink)}
.reel-hero video{width:100%;aspect-ratio:16/9;height:auto;display:block}

/* ---------- leadership film (About): full 16:9 band, click to play with sound,
     then collapses toward the Charmaine portrait below ---------- */
.leader-film{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vw * 9 / 16);
  background:var(--ink);overflow:hidden;transform-origin:center center;
  transition:transform 1.4s var(--ease),opacity 1.1s var(--ease),max-height 1.4s var(--ease)}
.leader-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;background:var(--ink)}
.leader-film.playing video{object-fit:contain;object-position:center center}
.lf-play{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  width:100%;border:0;cursor:pointer;font-family:var(--font);
  background:linear-gradient(0deg,rgba(34,26,44,.55),rgba(34,26,44,.2));transition:opacity .4s var(--ease)}
.lf-tri{width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.92);display:block;position:relative;
  transition:transform .3s var(--ease),background .3s}
.lf-tri::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:26px solid var(--purple);border-top:16px solid transparent;border-bottom:16px solid transparent}
.lf-play:hover .lf-tri{transform:scale(1.08);background:var(--purple)}
.lf-play:hover .lf-tri::after{border-left-color:#fff}
.lf-label{color:#fff;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.leader-film.playing .lf-play{opacity:0;pointer-events:none}
.leader-film.collapsing{transform:translate(var(--lf-x,0),var(--lf-y,0)) scale(var(--lf-s,.34));opacity:0;max-height:0;aspect-ratio:auto}
.leader-film.gone{display:none}
@media (max-width:760px){.lf-tri{width:66px;height:66px}.lf-label{font-size:13px}}
@media (prefers-reduced-motion:reduce){.leader-film{display:none}}

/* ---------- film blocks (the three brand animations) ---------- */
.film{border:1px solid var(--lav-line);border-radius:var(--r);overflow:hidden;background:#fff}
.film video{width:100%;display:block}
.film figcaption{padding:14px 18px;font-size:14px;color:var(--ink-soft);border-top:1px solid var(--lav-line)}

/* ---------- path ring (Home): rotating card carousel, Hebbia-style ---------- */
.path-stage{position:relative;height:clamp(480px,62vh,620px);perspective:1500px;margin-top:6px}
.path-ring{position:absolute;inset:0;transform-style:preserve-3d}
.pcard{position:absolute;top:50%;left:50%;width:clamp(185px,19vw,250px);aspect-ratio:3/4;
  margin:calc(clamp(185px,19vw,250px)*-0.667) 0 0 calc(clamp(185px,19vw,250px)/-2);
  border-radius:10px;overflow:hidden;background:var(--ink);cursor:pointer;
  box-shadow:0 22px 54px rgba(34,26,44,.32);
  transition:filter .5s var(--ease),opacity .4s;will-change:transform,opacity}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,26,44,.05) 34%,rgba(34,26,44,.85) 82%)}
.pc-txt{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;color:#fff}
.pc-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--purple);padding:5px 11px;border-radius:999px;margin-bottom:9px}
.pc-txt h3{font-size:20px;font-weight:600;line-height:1.15;color:#fff;margin:0}
.pc-sub{display:block;font-size:13px;color:#D8CBE6;margin-top:5px}
.pcard:not(.is-front){filter:brightness(.5) saturate(.75)}
.pcard.is-front{cursor:zoom-in}
.pcard:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.path-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}
/* the expand: card fades and grows into a detail panel */
.path-expand{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  background:rgba(34,26,44,.58);padding:22px}
.path-expand.open{display:flex}
.px-card{position:relative;width:min(660px,94vw);max-height:88vh;overflow:auto;background:#fff;
  border-radius:12px;animation:px-in .5s var(--ease)}
@keyframes px-in{from{opacity:0;transform:scale(.58)}to{opacity:1;transform:scale(1)}}
.px-media{height:min(300px,34vh);overflow:hidden;background:var(--lav-tint)}
.px-media img{width:100%;height:100%;object-fit:contain;display:block}
.px-body{padding:26px 30px 30px}
.px-body h3{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.015em;margin:4px 0 10px}
.px-body p{font-size:16px;color:var(--ink-soft);max-width:60ch}
.px-body .vchips{margin:16px 0 4px}
.px-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px}
.px-close{position:absolute;top:12px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(34,26,44,.55);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.px-close:hover{background:var(--purple)}
@media (max-width:760px){.path-stage{height:400px;perspective:1100px}.pcard{width:172px}}
@media (prefers-reduced-motion:reduce){.px-card{animation:none}}

/* ---------- promo popup (Home): Norma-minimal Back-to-School special ---------- */
.aiw-offer{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;
  background:rgba(34,26,44,.45);padding:22px;opacity:0;transition:opacity .45s var(--ease)}
.aiw-offer.show{opacity:1}
.aiw-offer-card{position:relative;width:min(430px,92vw);background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(34,26,44,.35);transform:translateY(16px) scale(.97);transition:transform .5s var(--ease)}
.aiw-offer.show .aiw-offer-card{transform:none}
.aiw-offer-media{height:210px;overflow:hidden}
.aiw-offer-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.aiw-offer-body{padding:28px 30px 30px}
.aiw-offer-body h3{font-size:clamp(24px,3vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px}
.aiw-offer-sub{font-size:15px;color:var(--ink-soft);margin-bottom:18px}
.aiw-offer-offers{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.aiw-offer-offer{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border:1px solid var(--lav-line);border-radius:12px;padding:13px 16px}
.aiw-offer-offer b{font-size:15px;font-weight:600}
.aiw-offer-offer small{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.aiw-offer-price{font-size:19px;font-weight:700;color:var(--purple);white-space:nowrap}
.aiw-offer-price s{font-size:13px;color:var(--ink-soft);font-weight:400;margin-right:6px}
.aiw-offer-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
  background:var(--purple);color:#fff;border:0;border-radius:999px;padding:15px 24px;
  font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
.aiw-offer-cta:hover{background:var(--purple-deep)}
.aiw-offer-note{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.aiw-offer-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:18px;cursor:pointer;line-height:1;box-shadow:0 2px 10px rgba(34,26,44,.2)}
.aiw-offer-close:hover{background:var(--purple);color:#fff}
@media (prefers-reduced-motion:reduce){.aiw-offer,.aiw-offer-card{transition:none}}

/* ---------- hero reel (Home): vertical phone film over the graduates photo,
     plays after the promo closes, then collapses into the photograph ---------- */
.hero-reel{position:absolute;right:5%;bottom:6%;height:86%;aspect-ratio:9/16;width:auto;z-index:3;
  border-radius:18px;box-shadow:0 26px 60px rgba(34,26,44,.45);object-fit:cover;
  opacity:0;transform:translateY(30px) scale(.96);
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.hero-reel.reel-in{opacity:1;transform:none}
.hero-reel.reel-out{opacity:0;transform:translateY(14%) scale(.38)}
@media (max-width:760px){.hero-reel{right:4%;height:76%}}
@media (prefers-reduced-motion:reduce){.hero-reel{display:none}}

/* ---------- mouse scroll symbols ---------- */
.mouse-ind{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:44px}
.mouse-ind .shell{
  width:28px;height:46px;border:2px solid var(--purple);border-radius:15px;position:relative;
}
.mouse-ind .shell::before{
  content:"";position:absolute;top:8px;left:50%;width:4px;height:9px;margin-left:-2px;
  border-radius:2px;background:var(--purple);animation:wheel 1.7s var(--ease) infinite;
}
.mouse-ind span{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(13px);opacity:0}100%{transform:translateY(0);opacity:0}}
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:900;width:34px;height:54px;
  border:2px solid var(--purple);border-radius:17px;background:rgba(254,253,251,.9);
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s,transform .25s;
  display:flex;align-items:center;justify-content:center;color:var(--purple);
  font-size:16px;font-family:var(--font);
}
.to-top::before{
  content:"";position:absolute;bottom:8px;left:50%;width:4px;height:9px;margin-left:-2px;
  border-radius:2px;background:var(--purple);animation:wheelup 1.7s var(--ease) infinite;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-4px)}
@keyframes wheelup{0%{transform:translateY(0);opacity:1}70%{transform:translateY(-13px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ---------- journey timeline (Yucca "The Journey") ---------- */
.journey{display:flex;gap:18px;overflow-x:auto;padding:6px 4px 22px;scrollbar-width:none;cursor:grab}
.journey::-webkit-scrollbar{display:none}
.journey.dragging{cursor:grabbing}
.jcard{
  flex:0 0 clamp(260px,30vw,360px);border:1px solid var(--lav-line);border-radius:var(--r);
  background:#fff;padding:32px 28px;user-select:none;
}
.jcard .yr{
  font-size:clamp(34px,3.4vw,52px);font-weight:300;color:var(--lavender);
  letter-spacing:-.02em;line-height:1;margin-bottom:18px;
}
.jcard b{display:block;font-size:19px;font-weight:600;margin-bottom:10px;color:var(--purple)}
.jcard p{font-size:15px;color:var(--ink-soft)}

/* ---------- value marquee chips (Yucca "We Value") ---------- */
.value-ticker{overflow:hidden;white-space:nowrap;padding:10px 0}
.value-ticker .track{display:inline-block;animation:tick 30s linear infinite}
.value-ticker span{
  display:inline-block;margin:0 12px;padding:12px 26px;border-radius:999px;
  border:1px solid var(--lav-line);background:#fff;
  font-size:17px;font-weight:500;color:var(--ink);
}

/* ---------- marquee ribbon (Yucca signature) ---------- */
.ticker{border-top:1px solid var(--lav-line);border-bottom:1px solid var(--lav-line);
  overflow:hidden;background:var(--lav-tint);padding:18px 0;white-space:nowrap}
.ticker .track{display:inline-block;animation:tick 40s linear infinite}
.ticker span{display:inline-block;margin:0 36px;font-weight:400;font-size:19px;color:var(--ink)}
.ticker i{font-style:normal;color:var(--lavender);margin:0 0 0 36px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:100px 28px}
section .wrap{max-width:var(--max);margin:0 auto}
section.tint{background:var(--lav-tint)}
section.band{background:var(--purple-deep);color:#fff}
section.band h2{color:#fff}
section.band p{color:#E9E1F1}
section.band .sub{color:#D8CBE6}
h2.title{font-size:clamp(36px,4.8vw,68px);font-weight:300;letter-spacing:-.02em;line-height:1.1;max-width:22ch}
h2.title strong{font-weight:500;color:var(--purple)}
section.band h2.title strong{color:#CDB4E3}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:56px}
.section-head .sub{color:var(--ink-soft);font-size:19px;font-weight:400;max-width:46ch;margin-top:16px}

/* ---------- credential wall (Yucca standards wall) ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cred{
  border:1px solid var(--lav-line);border-radius:var(--r);
  padding:30px 26px;background:#fff;transition:transform .3s var(--ease),border-color .3s;
}
.cred:hover{transform:translateY(-4px);border-color:var(--lavender)}
.cred b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;color:var(--purple)}
.cred span{font-size:15px;color:var(--ink-soft);line-height:1.5;display:block;font-weight:400}

/* ---------- cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{
  position:relative;background:#fff;border:1px solid var(--lav-line);
  border-radius:var(--r);padding:36px 32px;
  transition:border-color .3s,transform .35s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.card:hover{border-color:var(--purple)}
.card h3{font-size:26px;font-weight:500;letter-spacing:-.015em;margin-bottom:10px}
.card p{font-size:16px;font-weight:400;color:var(--ink-soft)}
.card .tag{
  display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);background:var(--lav-tint);
  padding:6px 12px;border-radius:var(--r);margin-bottom:18px;
}
.card .more{display:inline-flex;gap:9px;align-items:center;font-weight:500;font-size:16px;margin-top:2px;color:var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 4px;min-height:44px;box-sizing:border-box}
.card:hover .more{color:var(--purple);border-color:var(--purple)}
.card .more .arr{transition:transform .25s var(--ease)}
.card:hover .more .arr{transform:translateX(5px)}
.card.dark{background:var(--purple-deep);border-color:var(--purple-deep)}
.card.dark h3{color:#fff}
.card.dark p{color:#E9E1F1}
.card.dark .tag{background:rgba(255,255,255,.14);color:#fff}
.card.dark .more{color:#fff;border-color:#fff}
/* card image header (her 1080×1080 program tiles, Yucca product-card style) */
.card .chead{
  margin:-36px -32px 24px;overflow:hidden;
  border-bottom:1px solid var(--lav-line);border-radius:var(--r) var(--r) 0 0;
}
.card .chead img{width:100%;height:220px;object-fit:cover;object-position:center 30%;transition:transform .7s var(--ease)}
.card:hover .chead img{transform:scale(1.05)}
/* variant chips inside cards (Yucca product-card volumes) */
.vchips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 2px}
.vchip{
  font-size:13px;font-weight:500;color:var(--ink);border:1px solid var(--lav-line);
  border-radius:var(--r);padding:5px 12px;background:var(--bg);
}
.card.dark .vchip{background:transparent;border-color:rgba(255,255,255,.3);color:#E9E1F1}

/* ---------- program table ---------- */
.ptable{width:100%;border-collapse:collapse;background:#fff}
.ptable-wrap{border-radius:var(--r);overflow-x:auto;border:1px solid var(--lav-line)}
.ptable th{
  text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--purple);padding:16px 22px;
}
.ptable td{padding:19px 22px;border-top:1px solid var(--lav-line);font-size:16.5px;vertical-align:middle}
.ptable tr{transition:background .2s}
.ptable tbody tr:hover{background:var(--lav-tint)}
.ptable .pname{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ptable .price{font-weight:600;color:var(--purple);white-space:nowrap}
.ptable .ask{font-weight:500;color:var(--ink-soft);font-size:14.5px}
.ptable .mode{font-size:13px;font-weight:500;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.ptable a.enroll{font-weight:600;white-space:nowrap}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.chip{
  border:1px solid var(--lav-line);background:#fff;border-radius:var(--r);
  padding:10px 20px;font-family:var(--font);font-weight:500;font-size:15px;color:var(--ink);cursor:pointer;
  transition:.2s;
}
.chip:hover{border-color:var(--purple);color:var(--purple)}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}

/* ---------- photos (2026 set is 480px native — never upscale) ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--lav-line);background:#fff}
.photo img{width:100%;max-width:480px;height:270px;object-fit:cover;transition:transform .7s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo figcaption{font-size:14px;font-weight:400;color:var(--ink-soft);padding:13px 16px;border-top:1px solid var(--lav-line)}

/* ---------- steps / journey ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{border-left:2px solid var(--lavender);padding:8px 0 8px 22px}
.step b{display:block;font-size:20px;font-weight:500;margin-bottom:6px}
.step b::before{
  counter-increment:step;content:"0" counter(step);
  display:block;font-size:13px;font-weight:600;color:var(--lavender);letter-spacing:.16em;margin-bottom:10px;
}
.step span{font-size:15px;font-weight:400;color:var(--ink-soft);line-height:1.55}
section.band .step{border-left-color:rgba(255,255,255,.35)}
section.band .step b{color:#fff}
section.band .step b::before{color:#CDB4E3}
section.band .step span{color:#E9E1F1}

/* ---------- mission / vision pair (Yucca) ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mv .cell{border-top:2px solid var(--purple);padding-top:26px}
.mv h3{font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-bottom:14px}
.mv p{font-size:clamp(19px,1.8vw,24px);font-weight:300;line-height:1.5;color:var(--ink)}

/* ---------- FAQ accordion (Yucca) ---------- */
.faq{border-top:1px solid var(--lav-line)}
.faq details{border-bottom:1px solid var(--lav-line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;font-size:clamp(19px,2vw,24px);font-weight:400;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--purple)}
.faq summary .pm{font-size:26px;font-weight:300;color:var(--lavender);transition:transform .3s var(--ease)}
.faq details[open] summary{color:var(--purple)}
.faq details[open] .pm{transform:rotate(45deg)}
.faq .a{padding:0 4px 28px;color:var(--ink-soft);font-size:17px;max-width:70ch}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:560px}
.form label{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.form input,.form select,.form textarea{
  width:100%;padding:15px 18px;font-family:var(--font);font-size:17px;color:var(--ink);
  border:1px solid var(--lav-line);border-radius:var(--r);background:#fff;
  transition:border-color .2s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--purple)}
.form .hint{font-size:14px;color:var(--ink-soft)}

/* ---------- footer ---------- */
.aiw-footer{background:var(--ink);color:#CFC6DA;padding:76px 28px 42px}
.aiw-footer .wrap{max-width:var(--max);margin:0 auto}
.aiw-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:54px}
.aiw-footer h4{color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.aiw-footer a{color:#CFC6DA;display:block;padding:5px 0;font-size:15.5px;font-weight:400;transition:color .2s}
.aiw-footer a:hover{color:#fff}
.aiw-footer .fine{border-top:1px solid #3A3145;padding-top:28px;font-size:14px;color:#9A8FA8;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.aiw-footer p{color:#CFC6DA;font-size:15.5px;font-weight:400}
.aiw-footer strong{color:#fff;font-weight:600}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}


/* ---------- failsafe: if the reveal engine never runs (blocked JS, throttled
     tab, observer failure) every animated block still becomes readable ---------- */
@keyframes aiw-failsafe{to{opacity:1;transform:none}}
.rv:not(.in){animation:aiw-failsafe .01s linear 2s forwards}
.glide img:not(.glid){animation:aiw-failsafe .01s linear 2s forwards}
.float-up:not(.in){animation:aiw-failsafe .01s linear 2s forwards}

/* ---------- misc ---------- */
.notice{
  border:1px solid var(--lav-line);border-left:4px solid var(--purple);
  background:#fff;border-radius:var(--r);padding:22px 26px;font-size:15.5px;color:var(--ink-soft);
}
.stat-row{display:flex;gap:60px;flex-wrap:wrap;margin-top:52px}
.stat b{font-size:clamp(34px,3.6vw,52px);font-weight:300;letter-spacing:-.02em;color:var(--purple);display:block;line-height:1}
.stat span{font-size:13.5px;font-weight:500;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
@media (max-width:960px){
  .creds,.steps,.photo-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2,.mv{grid-template-columns:1fr}
  .aiw-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .aiw-nav{
    display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);
    flex-direction:column;align-items:stretch;padding:16px 24px 24px;gap:2px;
    border-bottom:1px solid var(--lav-line);
  }
  .aiw-nav.open{display:flex}
  .aiw-nav a{padding:14px;font-size:17px}
  .aiw-nav a.cta{margin:12px 0 0;text-align:center;justify-content:center}
  .aiw-burger{display:block}
  .creds,.steps,.photo-grid{grid-template-columns:1fr}
  section{padding:68px 22px}
  .hero{padding:76px 22px 60px}
}


/* ============================================================
   MOBILE FIXES - measured on a 390px viewport, 16 Aug 2026
   1. Choose Your Path rendered as a pile of overlapping slivers:
      cards measured 25px, 27px and 72px wide, all sitting at the
      same vertical position. A 12-slot 3D ring cannot separate
      172px cards on a 346px stage at any radius, so below 760px
      the ring is retired and the six real cards stack. Cards 7-12
      are duplicates that exist only to make the carousel loop.
   2. The programs table measured 562px inside a 346px column.
      Below 760px each row becomes a card and each cell carries
      its own label, so nothing is clipped and nothing is swiped.
   The JS rewrites card transforms inline on every frame, so these
   rules carry !important deliberately - that is what beats it.
   ============================================================ */
@media (max-width:760px){
  .path-stage{height:auto!important;min-height:0!important;perspective:none!important}
  /* the ring is retired on phones (cards stack), so the spin arrows have nothing to do - hide them */
  .path-nav{display:none!important}
  .path-ring{position:static!important;transform:none!important;width:100%!important;
    height:auto!important;display:grid;grid-template-columns:1fr;gap:14px}
  .path-ring figure.pcard{position:relative!important;transform:none!important;
    width:100%!important;height:auto!important;opacity:1!important;filter:none!important;
    z-index:auto!important;left:auto!important;top:auto!important;margin:0!important;
    pointer-events:auto!important; /* the ring JS switches off taps on "back" cards - there is no back on a phone */
    overflow:hidden;border-radius:14px}
  .path-ring figure.pcard:nth-of-type(n+7){display:none!important}
  /* the card carries aspect-ratio 3/4 for the ring. On a phone that is a very
     tall card, and six of them is a long scroll, so it becomes landscape and
     the photo fills it with the caption overlaid - same look, less scrolling. */
  .path-ring figure.pcard{aspect-ratio:4/3!important}
  .path-ring figure.pcard img{position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;object-fit:cover;display:block}
  .path-ring figure.pcard .pc-shade{position:absolute!important;inset:0!important;
    width:auto!important;height:auto!important}
  .path-ring figure.pcard .pc-txt{position:absolute!important;left:0!important;right:0!important;
    bottom:0!important;top:auto!important;width:auto!important;height:auto!important}

  .ptable-wrap{overflow:visible!important}
  .ptable,.ptable tbody,.ptable tr{display:block;width:100%}
  .ptable thead{display:none}
  .ptable tr{border:1px solid rgba(102,45,145,.20);border-radius:12px;
    padding:10px 13px;margin:0 0 10px;background:#fff}
  .ptable td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    width:auto!important;border:0;padding:4px 0;text-align:right}
  .ptable td::before{content:attr(data-l);font-weight:600;color:#662D91;text-align:left;
    flex:0 0 auto;text-transform:none;letter-spacing:0;font-size:.95rem}
  .ptable td.pname{display:block;text-align:left;font-weight:700;font-size:1.02rem;padding-bottom:6px}
  .ptable td.pname::before{content:none}
  .ptable td.mode{text-transform:none;letter-spacing:0}
  .ptable td .enroll{min-height:44px;display:inline-flex;align-items:center}
}

/* ------------------------------------------------------------
   Proposal module tables, measured at 390px on 16 Aug 2026.
   These pages (module-02/03/04/06/09, org-demo, dashboard-demo) use
   bare tables with no class, so the .ptable card treatment above does
   not reach them. Measured widths against a 390px screen: org-demo 781,
   dashboard-demo 660, module-02 649, module-06 522, module-04 520.
   None of them scrolled the page - body carries overflow-x:hidden, so
   the extra columns were being clipped away and simply could not be
   read. Making each table its own scroll container keeps every column
   reachable, and the tighter type lets most of them fit outright.
   ------------------------------------------------------------ */
@media (max-width:760px){
  table:not(.ptable){display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;font-size:.86rem;line-height:1.35}
  table:not(.ptable) th,table:not(.ptable) td{padding:6px 9px}
}


/* ===== Blog — index grid and article pages ===== */
.bgrid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:44px 0 8px}
.bcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--lav-line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.bcard:hover{transform:translateY(-4px);border-color:var(--lavender);box-shadow:0 18px 40px -24px rgba(102,45,145,.45)}
.bthumb{aspect-ratio:16/9;overflow:hidden;background:var(--lav-tint)}
.bthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.bcard:hover .bthumb img{transform:scale(1.04)}
.bmeta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:20px 22px 0}
.bcard h3{margin:8px 22px 0;font-size:1.12rem;line-height:1.32;color:var(--purple-deep)}
.bcard p{margin:10px 22px 0;font-size:.94rem;line-height:1.6;color:var(--ink-soft);flex:1}
.bcard .go{display:inline-block;margin:16px 22px 22px;font-weight:600;font-size:.9rem;color:var(--purple)}
.post-article{max-width:760px;margin-inline:auto;padding-top:16px}
.post-article .title{line-height:1.15;margin:0 0 14px}
.post-meta{color:var(--ink-soft);font-size:.94rem;margin:0 0 30px}
.post-article .film{border-radius:var(--r);overflow:hidden;margin-bottom:34px}
.post-body p{font-size:1.06rem;line-height:1.78;margin:0 0 1.15em;color:var(--ink)}
.post-body h2{font-size:1.42rem;line-height:1.3;margin:2em 0 .6em;color:var(--purple-deep)}
.post-body ul{margin:0 0 1.4em;padding-left:1.25em}
.post-body li{font-size:1.04rem;line-height:1.72;margin-bottom:.55em;color:var(--ink)}
.post-body li::marker{color:var(--lavender)}
.post-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.15em;border-left:3px solid var(--lavender);color:var(--ink-soft);font-style:italic}
.post-back{margin-top:48px;padding-top:26px;border-top:1px solid var(--lav-line)}
@media(max-width:640px){.bgrid{gap:22px}.post-body p,.post-body li{font-size:1rem}}


/* ---------- footer social links with brand logos ---------- */
.aiw-footer a.soc{display:flex;align-items:center;gap:10px}
.aiw-footer a.soc svg{width:18px;height:18px;fill:currentColor;flex:none}

/* ---------- tall sleeve variant: portrait program cards (2:3), full card shown ---------- */
.shelf .sleeve.tall{width:clamp(170px,19vw,235px);aspect-ratio:2/3;
  margin:calc(clamp(170px,19vw,235px)*-0.75) 0 0 calc(clamp(170px,19vw,235px)/-2)}
.shelf .sleeve.tall img{object-fit:contain;object-position:center;background:#fff}

/* ---------- flyer cards in the home ring: full card visible, portrait on mobile too ---------- */
@media (max-width:760px){
  .path-ring figure.pcard.pc-flyer{aspect-ratio:3/4!important}
  .path-ring figure.pcard.pc-flyer img{object-fit:contain!important;background:#fff}
}

/* price badge on flyer cards — top-right so the flyer's own text stays visible */
.pcard .pc-price{position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;
  letter-spacing:.08em;color:#fff;background:var(--purple);padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 12px rgba(34,26,44,.35);pointer-events:none}