/* ==========================================================================
   JenStudy — Custom design system
   Built on top of Bootstrap 5 (grid + a few components only).
   Everything visual below is custom so the site does not look like a
   stock Bootstrap template.
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base & typography
   3.  Layout helpers
   4.  Buttons & badges
   5.  Header / navigation
   6.  Hero
   7.  Sections & cards
   8.  Course cards
   9.  Steps / process
   10. Testimonials
   11. Accordion / FAQ
   12. CTA bands
   13. Forms
   14. Footer
   15. Floating actions & chatbot
   16. Utility pages (404, payment result)
   17. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* --------------------------------------------------------------------
     Brand palette — sampled directly from the JenStudy logo
     Royal purple  #4B0D6B → #6B1A93      Gold  #C88810 → #F8C64F
     -------------------------------------------------------------------- */
  --brand-900: #240538;   /* deepest purple — footer */
  --brand-800: #340A4F;
  --brand-700: #4B0D6B;   /* logo purple (dark) — dark sections */
  --brand-600: #5A1180;
  --brand-500: #6B1A93;   /* primary brand — buttons, links */
  --brand-400: #8B34B4;   /* hover */
  --brand-300: #B681D6;
  --brand-100: #F1E6F9;
  --brand-50:  #FBF7FE;

  /* Gold — the logo's secondary colour */
  --accent-700: #A96C08;
  --accent-600: #C88810;
  --accent-500: #EFAE24;  /* logo gold */
  --accent-400: #F8C64F;
  --accent-100: #FDF3DC;

  /* Supporting tints (kept in the purple/gold family) */
  --plum-600: #7A2E6E;
  --plum-500: #9C3E8C;
  --plum-100: #F9E9F6;

  /* Neutrals — warmed very slightly towards the brand */
  --ink-900: #1A1024;
  --ink-800: #291B37;
  --ink-700: #3E3049;
  --ink-600: #61556E;
  --ink-500: #857A90;
  --ink-300: #C9C0D2;
  --ink-200: #E8E2ED;
  --ink-100: #F4F0F7;
  --ink-50:  #FAF8FC;
  --white: #ffffff;

  --success-500: #12875C;
  --success-100: #DCF3E8;
  --danger-500: #C93B4E;
  --danger-100: #FBE4E8;
  --warning-500: #C88810;

  /* Typography */
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadows — tinted with the brand purple */
  --sh-xs: 0 1px 2px rgba(36, 5, 56, .06);
  --sh-sm: 0 2px 8px rgba(36, 5, 56, .07);
  --sh-md: 0 10px 28px rgba(36, 5, 56, .10);
  --sh-lg: 0 22px 60px rgba(36, 5, 56, .16);
  --sh-brand: 0 14px 30px rgba(107, 26, 147, .26);
  --sh-gold: 0 14px 30px rgba(239, 174, 36, .30);

  /* Motion */
  --t-fast: .16s ease;
  --t: .24s cubic-bezier(.4, 0, .2, 1);

  /* Icon chips — one scale across the whole site. Before this the footer alone
     ran 32px/9px gold next to 40px/11px lilac, and every section had its own
     idea of the size. */
  --icon-lg: 52px;
  --icon-md: 44px;
  --icon-sm: 36px;
  --icon-r-lg: 14px;
  --icon-r-md: 12px;
  --icon-r-sm: 10px;

  /* Layout */
  --header-h: 78px;
  --section-y: 60px;
}

/* ==========================================================================
   2. Base & typography
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
}

h1, .h1 { font-size: clamp(2.05rem, 4.4vw, 3.35rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.24rem, 1.9vw, 1.55rem); }
h4, .h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-500); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-400); }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

strong, b { font-weight: 650; color: var(--ink-800); }

hr { border: 0; border-top: 1px solid var(--ink-200); opacity: 1; margin: 2rem 0; }

::selection { background: var(--brand-100); color: var(--brand-700); }

:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.lead {
  font-size: 1.09rem;
  color: var(--ink-600);
  line-height: 1.72;
}

.text-muted-soft { color: var(--ink-500) !important; }
.text-brand { color: var(--brand-500) !important; }
.text-accent { color: var(--accent-600) !important; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--brand-700);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
/* Bootstrap's .container only pads enough for the DEFAULT gutter. Wide gutters
   (.g-5 = 3rem) give rows a -24px side margin, which would push 12px past the
   viewport and create a horizontal scrollbar. Padding the container to match
   half the largest gutter we use removes that overflow for good. */
.container {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}

.section { padding: var(--section-y) 0; }
.section-sm { padding: 40px 0; }
.section-tight { padding-top: 0; }
.bg-soft { background: var(--ink-50); }
.bg-brand-soft { background: var(--brand-50); }
.bg-deep { background: var(--brand-700); color: #E4D6F0; }
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }

.section-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.section-head.text-start { margin-left: 0; text-align: left; }
.section-head p { color: var(--ink-600); font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-500);
  background: var(--brand-100);
  padding: .42rem .9rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.1rem;
}
.eyebrow.is-accent { color: var(--accent-600); background: var(--accent-100); }
.eyebrow.is-light { color: #E3CDF6; background: rgba(255, 255, 255, .12); }

.divider-dot {
  width: 46px; height: 4px;
  background: var(--accent-500);
  border-radius: var(--r-pill);
  margin: 0 auto 1.4rem;
}
.text-start > .divider-dot { margin-left: 0; }

/* ==========================================================================
   4. Buttons & badges
   ========================================================================== */
.btn {
  --btn-py: .82rem;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: .97rem;
  letter-spacing: -.01em;
  border-radius: var(--r-md);
  padding: var(--btn-py) 1.55rem;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: .95em; }

.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-400);
  border-color: var(--brand-400);
  color: #fff;
  box-shadow: 0 18px 36px rgba(107, 26, 147, .30);
}

.btn-accent {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--brand-900);
  box-shadow: 0 14px 30px rgba(239, 174, 36, .30);
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--ink-300);
  color: var(--ink-800);
}
.btn-outline:hover, .btn-outline:focus {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-50);
}

.btn-light-outline {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.btn-light-outline:hover, .btn-light-outline:focus {
  background: #fff;
  color: var(--brand-700);
  border-color: #fff;
}

.btn-white { background: #fff; border-color: #fff; color: var(--brand-700); }
.btn-white:hover { background: var(--brand-50); color: var(--brand-600); }

/* Brand purple rather than WhatsApp green: on a purple-and-gold page the
   green read as a third, borrowed brand. The icon still says which channel
   it is. */
.btn-whatsapp { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn-whatsapp:hover { background: var(--brand-400); border-color: var(--brand-400); color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1fb857; border-color: #1fb857; color: #fff; }

.btn-lg { --btn-py: 1rem; font-size: 1.03rem; padding-left: 1.9rem; padding-right: 1.9rem; }
.btn-sm { --btn-py: .58rem; font-size: .88rem; padding-left: 1.1rem; padding-right: 1.1rem; border-radius: var(--r-sm); }

.btn-text {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 650; font-size: .94rem;
  color: var(--brand-500);
}
.btn-text i { transition: transform var(--t); }
.btn-head:hover .btn-text i,
.btn-text:hover i { transform: translateX(4px); }

.btn-group-hero { display: flex; flex-wrap: wrap; gap: .85rem; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 650; font-family: var(--font-head);
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--ink-600);
}
.pill-brand { background: var(--brand-100); color: var(--brand-600); }
.pill-accent { background: var(--accent-100); color: var(--accent-600); }
.pill-teal { background: var(--accent-100); color: var(--accent-600); }
.pill-success { background: var(--success-100); color: var(--success-500); }
.pill-danger { background: var(--danger-100); color: var(--danger-500); }

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-scrolled { box-shadow: var(--sh-sm); background: rgba(255, 255, 255, .97); }

.topbar {
  background: var(--brand-700);
  color: #D5C0E6;
  font-size: .85rem;
  padding: .5rem 0;
}
.topbar a { color: #EFE3F8; }
.topbar a:hover { color: #fff; }
.topbar-list { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.topbar-list i { color: var(--accent-500); margin-right: .38rem; }
/* Divider between the two published phone numbers. */
.topbar-list .sep { opacity: .5; margin: 0 .12rem; }
.topbar-social { display: flex; gap: .85rem; }

.navbar { padding: 0; min-height: var(--header-h); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -.035em;
  color: var(--brand-700);
}
.brand:hover { color: var(--brand-600); }
.brand img { height: 42px; width: auto; }
.brand-mark {
  width: 46px; height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* The logo's purple would vanish against the dark footer, so it sits on a
   small white tile there (and in the dark admin sidebar). */
.site-footer .brand-mark {
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: -3px;
}

.main-nav { display: flex; align-items: center; gap: .2rem; }
.main-nav .nav-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .96rem;
  color: var(--ink-700);
  padding: .6rem .9rem;
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav .nav-link:hover { color: var(--brand-500); background: var(--brand-50); }
.main-nav .nav-link.active { color: var(--brand-600); }
.main-nav .nav-link.active::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .18rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent-500);
}

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  width: 44px; height: 44px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--brand-700);
  display: none;
  place-items: center;
  font-size: 1.1rem;
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 88vw);
  background: #fff;
  z-index: 1090;
  transform: translateX(102%);
  transition: transform var(--t);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem 2rem;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.mobile-nav a.m-link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--ink-800);
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--ink-100);
}
.mobile-nav a.m-link.active { color: var(--brand-500); }
.mobile-nav a.m-link i { color: var(--ink-300); font-size: .8rem; }
.mobile-nav .mobile-cta { margin-top: 1.5rem; display: grid; gap: .6rem; }
.mobile-nav .mobile-contact { margin-top: 1.6rem; font-size: .9rem; color: var(--ink-600); }
.mobile-nav .mobile-contact a { display: block; padding: .3rem 0; color: var(--ink-700); }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 16, 36, .55);
  z-index: 1080;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

body.nav-open { overflow: hidden; }

/* ==========================================================================
   6. Hero — simple 3-slide slider
   ========================================================================== */
.hero {
  position: relative;
  /* Three quiet light sources rather than one flat wash: a purple bloom behind
     the photo, a narrow gold rake along the bottom, and a near-white base. The
     old version put a broad gold radial in the bottom-left corner, which read
     as a muddy stain where it met the purple. */
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(139, 52, 180, .16), transparent 60%),
    radial-gradient(520px 220px at 12% 106%, rgba(239, 174, 36, .10), transparent 64%),
    linear-gradient(180deg, #FCFAFE 0%, var(--brand-50) 38%, #ffffff 88%);
  border-bottom: 1px solid var(--ink-200);
  overflow: hidden;
}
/* A hairline of brand colour along the very bottom edge — the sort of detail
   that separates "template" from "considered". */
.hero-city {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* A band along the foot, not a backdrop. Left full-height it climbed behind
     the headline and the copy became unreadable. */
  height: 38%;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
  overflow: hidden;
}
.hero-city img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: bottom center;
  /* Pushed back with distance: desaturated, lightened and tinted towards the
     brand purple, then faded upward so the towers dissolve into the wash
     instead of ending at a hard skyline. */
  opacity: .16;
  filter: grayscale(.7) brightness(1.2) saturate(.7) hue-rotate(-14deg);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
  mask-image: linear-gradient(180deg, transparent, #000 62%);
}

.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107, 26, 147, .28) 22%, rgba(239, 174, 36, .38) 78%, transparent);
}

/* Kept for assistive tech and the keyboard, off-screen for everyone else. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-slider {
  position: relative;
  /* Set by JS: +1 when moving forward, -1 when moving back. Every slide
     animation reads it, so the whole hero moves in the direction you asked
     for instead of cross-fading in place. */
  --dir: 1;
  --hero-delay: 6500ms;
  --hero-ease: cubic-bezier(.16, .84, .44, 1);
}

/* All slides share one grid cell, so the height is set by the tallest slide
   and nothing jumps when they change. */
.hero-track {
  display: grid;
  align-items: center;
  perspective: 1800px;   /* the depth the flip is read against */
}
.hero-slide {
  grid-area: 1 / 1;
  padding: 46px 0 34px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
/* The outgoing slide stays painted for the length of its exit animation, one
   layer below the incoming one, so the change reads as a hand-off. */
.hero-slide.is-leaving {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  animation: heroSlideOut .62s ease-in forwards;
}

/* The opacity drops well ahead of the movement. Both headlines are on screen
   for a moment during the hand-off, and if the old one is still solid while the
   new one arrives the two read as one smudged block of text. */
/* The outgoing slide turns away from you; the incoming one turns in to face
   you. --dir keeps the axis of rotation matching the control you pressed. */
@keyframes heroSlideOut {
  from { opacity: 1; transform: rotateY(0deg) translateZ(0); }
  45%  { opacity: .15; }
  to   { opacity: 0; transform: rotateY(calc(var(--dir) * -32deg)) translateZ(-220px); }
}

/* --- Incoming slide: the flip, then the copy ------------------------------ */
@keyframes heroFlipIn {
  from { opacity: 0; transform: rotateY(calc(var(--dir) * 34deg)) translateZ(-240px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotateY(0deg) translateZ(0); }
}
@keyframes heroCopyIn {
  from { opacity: 0; transform: translate3d(calc(var(--dir) * 30px), 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFigureIn {
  from { opacity: 0; transform: translate3d(calc(var(--dir) * 64px), 0, 0) scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroShine {
  from { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translateX(130%) skewX(-14deg); opacity: 0; }
}
@keyframes heroProofIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* The whole slide flips in; the copy then settles a beat behind it. */
.hero-slide.is-active { animation: heroFlipIn .95s var(--hero-ease) backwards; }

.hero-slide.is-active .hero-copy > * {
  animation: heroCopyIn .7s var(--hero-ease) backwards;
}
.hero-slide.is-active .hero-copy > *:nth-child(1) { animation-delay: .30s; }
.hero-slide.is-active .hero-copy > *:nth-child(2) { animation-delay: .39s; }
.hero-slide.is-active .hero-copy > *:nth-child(3) { animation-delay: .48s; }
.hero-slide.is-active .hero-copy > *:nth-child(4) { animation-delay: .57s; }
.hero-slide.is-active .hero-copy > *:nth-child(5) { animation-delay: .66s; }
.hero-slide.is-active .hero-copy > *:nth-child(6) { animation-delay: .75s; }

.hero-slide.is-active .hero-art {
  animation: heroFigureIn 1s var(--hero-ease) .18s backwards;
}


/* Without JavaScript the first slide is simply visible. */
html:not(.js) .hero-slide:first-child { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .hero-slide:not(:first-child) { display: none; }

.hero-copy { max-width: 620px; }

/* The hero's eyebrow gets a lighter, glassier treatment than the flat lilac
   chip used further down the page — it is the first thing read, and a hairline
   border with a gold pin carries more weight than a block of tint. */
.hero-copy .eyebrow {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--ink-200);
  box-shadow: var(--sh-xs);
  color: var(--brand-700);
  padding: .46rem 1rem .46rem .85rem;
}
.hero-copy .eyebrow i { color: var(--accent-600); }
/* An event label should not look like a category label. */
.hero-copy .eyebrow.is-event {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.hero-copy .eyebrow.is-event i { color: var(--accent-400); }

/* Date · venue, directly under the event label. */
.hero-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: -.4rem 0 1rem;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 650;
  color: var(--brand-700);
}
.hero-event-meta .sep { color: var(--ink-300); font-weight: 400; }

/* No extra tracking here: tightening it fitted one more word on the first line
   and left "Build" stranded at the end of it. The wrap matters more. */
/* Slides 2 and 3 use <h2 class="h1"> — the stylesheet's existing .h1 utility
   already carries the exact h1 sizing, so they look identical while the page
   keeps a single <h1>. */
.hero-copy h1,
.hero-copy .h1 { margin-bottom: 1rem; }
.hero-copy h1 .hl { color: var(--brand-500); }
.hero-copy .lead { font-size: 1.12rem; margin-bottom: 1.9rem; }

/* Call to action, then the phone — the reference layout's pairing, and it
   suits a business where a lot of enquiries still start with a call. */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}
.hero-call {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink-700);
}
.hero-call:hover { color: var(--brand-600); }
.hero-call .hc-ring {
  display: grid; place-items: center;
  width: var(--icon-md); height: var(--icon-md);
  flex: 0 0 auto;
  border-radius: var(--icon-r-md);
  background: var(--brand-100);
  color: var(--brand-600);
  font-size: .95rem;
  transition: background var(--t), color var(--t);
}
.hero-call:hover .hc-ring { background: var(--brand-500); color: #fff; }
.hero-call small { display: block; font-size: .78rem; color: var(--ink-500); line-height: 1.2; }
.hero-call strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.02rem;
  color: inherit;
  letter-spacing: -.01em;
}

.hero-note {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1.6rem;
  font-size: .88rem; color: var(--ink-500);
}
.hero-note i { color: var(--accent-600); }

/* Three facts, set on a hairline rule. Numerals in the display face, labels
   small and quiet — the contrast between the two is what makes it read as
   considered rather than as three more bullet points. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 2.6rem;
  margin: 1.9rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-200);
}
.hero-stats dt {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-700);
}
.hero-stats dd {
  margin: .3rem 0 0;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Hero art — a cut-out figure standing on the background, shapes behind it and
   two facts floating in front. Everything is positioned against .hero-art, so
   the composition scales as one piece instead of drifting apart.
   -------------------------------------------------------------------------- */
.hero-art {
  position: relative;
  aspect-ratio: 4 / 4.1;
  max-width: 560px;
  margin-inline: auto;
  isolation: isolate;
}

/* The soft mass the figure stands against. */
.hero-art .ha-blob {
  position: absolute;
  left: 8%; right: 2%; top: 6%; bottom: 4%;
  z-index: 1;
  background: radial-gradient(circle at 42% 34%, rgba(139, 52, 180, .20), rgba(139, 52, 180, .07) 55%, transparent 72%);
  border-radius: 46% 54% 50% 50% / 52% 45% 55% 48%;
  animation: haBlob 14s ease-in-out infinite alternate;
}
@keyframes haBlob {
  from { border-radius: 46% 54% 50% 50% / 52% 45% 55% 48%; }
  to   { border-radius: 54% 46% 44% 56% / 46% 54% 46% 54%; }
}

.hero-art .ha-ring {
  position: absolute;
  right: 4%; top: 8%;
  width: 88px; aspect-ratio: 1;
  z-index: 1;
  border: 2px dashed rgba(107, 26, 147, .28);
  border-radius: 50%;
}

/* A dot grid, the quiet kind of decoration that reads as intentional. */
.hero-art .ha-dots {
  position: absolute;
  left: -4%; top: 16%;
  width: 84px; height: 84px;
  z-index: 1;
  background-image: radial-gradient(rgba(107, 26, 147, .30) 1.8px, transparent 1.8px);
  background-size: 14px 14px;
}

.hero-art .ha-squiggle {
  position: absolute;
  left: 0; bottom: 8%;
  width: 84px;
  z-index: 2;
  color: var(--accent-500);
  opacity: .85;
}
.hero-art .ha-squiggle svg { width: 100%; height: auto; display: block; }

/* The figure itself: no frame, no radius — it stands on the background. */
.hero-art .ha-person {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 3;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 26px 42px rgba(36, 5, 56, .26));
  /* The source cut-out ends at the thigh with a hard horizontal edge. Fading
     the last few percent turns that crop into a deliberate vignette instead of
     a line across her legs. */
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 90%, transparent 99%);
}
/* If no cut-out is uploaded the per-slide photograph is used instead, and that
   does need a frame. */
.hero-art .ha-person.is-photo {
  position: static;
  transform: none;
  width: 100%; height: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
  box-shadow: var(--sh-lg);
}

.hero-panel {
  position: absolute;
  inset: 0;
  padding: 2.1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  color: #EBDCF6;
}
.hero-panel::before {
  content: '';
  position: absolute; right: -70px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.hero-panel::after {
  content: '';
  position: absolute; left: -60px; bottom: -90px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(239, 174, 36, .18);
}
.hero-panel img.hp-logo {
  width: 86px; height: 86px;
  object-fit: contain;
  background: #fff;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(20, 4, 32, .28);
  position: relative; z-index: 2;
}
.hero-panel h2 {
  position: relative; z-index: 2;
  color: #fff; font-size: 1.28rem; margin: 0;
}
.hero-panel ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.hero-panel li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .95rem; margin-bottom: .6rem;
}
.hero-panel li:last-child { margin-bottom: 0; }
.hero-panel li i { color: var(--accent-500); margin-top: .3rem; font-size: .82rem; }

/* Controls. Taken out of the flow entirely: with the dots and counter hidden
   this block was an empty strip holding the hero open at the bottom. The two
   arrows now sit against the left and right edges, vertically centred. */
.hero-controls {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  z-index: 6;
  pointer-events: none;
}

.hero-dots { display: flex; gap: .5rem; }
.hero-dots button {
  position: relative;
  overflow: hidden;
  width: 34px; height: 5px;
  border: 0; padding: 0;
  border-radius: var(--r-pill);
  background: var(--ink-200);
  cursor: pointer;
  transition: background var(--t), width var(--t);
}
.hero-dots button:hover { background: var(--brand-300); }
.hero-dots button[aria-selected="true"] { background: var(--brand-500); width: 54px; }

/* The active dot doubles as the autoplay clock: gold fills it over exactly the
   time left before the slide changes, and holds still while autoplay is paused. */
.hero-dots button[aria-selected="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-500);
  transform-origin: left center;
  transform: scaleX(0);
  animation: heroTick var(--hero-delay) linear forwards;
}
.hero-slider.is-paused .hero-dots button::after { animation-play-state: paused; }
.hero-slider.no-auto .hero-dots button::after { display: none; }

@keyframes heroTick { to { transform: scaleX(1); } }

.hero-arrows { display: contents; }
.hero-arrows button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 46px; height: 46px;
  box-shadow: var(--sh-sm);
  border-radius: 50%;
  border: 1.5px solid var(--ink-200);
  background: #fff;
  color: var(--brand-600);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
#heroPrev { left: 20px; }
#heroNext { right: 20px; }
.hero-arrows button:hover { border-color: var(--brand-500); background: var(--brand-500); color: #fff; }

.hero-counter { font-family: var(--font-head); font-size: .84rem; color: var(--ink-500); font-weight: 600; }
.hero-counter b { color: var(--brand-600); }

/* --------------------------------------------------------------------------
   Floating subject icons
   A thin decorative layer behind the hero content: small glass chips carrying
   the icons the site is actually about. They drift on their own and shy away
   from the pointer (see main.js). Deliberately low-contrast — they should be
   noticed on the second look, never compete with the headline.
   -------------------------------------------------------------------------- */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  display: grid;
  place-items: center;
  border-radius: 32%;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(107, 26, 147, .10);
  box-shadow: 0 8px 22px rgba(36, 5, 56, .06);
  /* Two independent properties, so both effects can run on the same element:
     JS writes `translate` for the pointer repel, CSS animates `transform` for
     the drift. The icon inside stays perfectly centred because it no longer
     moves — the whole chip does. */
  translate: 0 0;
  animation: orbDrift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: translate, transform;
}
.hero-orb.is-alt { animation-name: orbDriftAlt; }
.hero-orb i {
  font-size: calc(var(--s) * .40);
  line-height: 1;          /* no glyph line-box padding, so it centres exactly */
  color: rgba(107, 26, 147, .34);
}
.hero-orb.is-gold {
  background: rgba(253, 243, 220, .62);
  border-color: rgba(200, 136, 16, .16);
}
.hero-orb.is-gold i { color: rgba(200, 136, 16, .46); }

/* Both drifts swing around the centre rather than away from it. Travelling a
   flat -14px from the middle pushed each glyph up against the top edge of its
   chip for most of the cycle, which read as a cropped icon. */
@keyframes orbDrift {
  from { transform: translate3d(0, 5px, 0) rotate(-3deg); }
  to   { transform: translate3d(0, -5px, 0) rotate(3deg); }
}
/* A diagonal path for every other chip — ten identical bobs read as one
   mechanism rather than a scatter of loose objects. */
@keyframes orbDriftAlt {
  from { transform: translate3d(-4px, -4px, 0) rotate(3deg); }
  to   { transform: translate3d(4px, 4px, 0) rotate(-3deg); }
}

/* Compact page hero for inner pages */
.page-hero {
  padding: 58px 0 62px;
  background:
    radial-gradient(760px 300px at 82% 0%, rgba(139, 52, 180, .16), transparent 60%),
    linear-gradient(180deg, var(--brand-50), #fff);
  border-bottom: 1px solid var(--ink-200);
}
.page-hero h1 { margin-bottom: .7rem; }
.page-hero p { max-width: 660px; color: var(--ink-600); margin-bottom: 0; }

.crumbs { margin-bottom: 1.1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.crumbs li { color: var(--ink-500); margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: .45rem; color: var(--ink-300); }
.crumbs a { color: var(--ink-600); }
.crumbs a:hover { color: var(--brand-500); }
.crumbs li[aria-current] { color: var(--brand-600); font-weight: 600; }

/* ==========================================================================
   7. Sections & cards
   ========================================================================== */
.trust-strip { padding: 30px 0; border-bottom: 1px solid var(--ink-200); background: #fff; }
.trust-item { display: flex; gap: .85rem; align-items: flex-start; }
.trust-item i {
  flex: 0 0 auto;
  width: var(--icon-md); height: var(--icon-md);
  border-radius: var(--icon-r-md);
  background: var(--brand-100);
  color: var(--brand-600);
  display: grid; place-items: center;
  font-size: 1.05rem;
}
.trust-item h3 { font-size: 1rem; margin-bottom: .15rem; }
.trust-item p { font-size: .87rem; color: var(--ink-500); margin: 0; line-height: 1.5; }
.trust-item:nth-child(2n) i { background: var(--accent-100); color: var(--accent-600); }
.trust-item:nth-child(3n) i { background: var(--accent-100); color: var(--accent-600); }

.card-plain {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.9rem;
  height: 100%;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-plain:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-100); }

/* Service card */
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  height: 100%;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  opacity: 0;
  transition: opacity var(--t);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: var(--icon-r-lg);
  display: grid; place-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--brand-100);
  color: var(--brand-500);
  transition: transform var(--t);
}
.service-card:hover .service-icon { transform: scale(1.06) rotate(-4deg); }
.service-card h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.service-card p { font-size: .94rem; color: var(--ink-600); margin-bottom: 1.1rem; }
.service-card .service-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.service-card .service-list li {
  font-size: .89rem; color: var(--ink-600);
  padding-left: 1.35rem; position: relative; margin-bottom: .3rem;
}
.service-card .service-list li::before {
  content: '\f00c';
  font: 900 .72rem 'Font Awesome 6 Free';
  color: var(--accent-500);
  position: absolute; left: 0; top: .28rem;
}
.service-card.tone-accent .service-icon { background: var(--accent-100); color: var(--accent-600); }
.service-card.tone-accent::before { background: linear-gradient(90deg, var(--accent-500), var(--accent-400)); }
.service-card.tone-teal .service-icon { background: var(--accent-100); color: var(--accent-600); }
.service-card.tone-teal::before { background: linear-gradient(90deg, var(--accent-500), var(--accent-400)); }
.service-card.tone-violet .service-icon { background: var(--plum-100); color: var(--plum-600); }
.service-card.tone-violet::before { background: linear-gradient(90deg, var(--plum-600), var(--plum-500)); }

/* Feature (Why us) */
.feature-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature-row .fnum {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.feature-row h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.feature-row p { font-size: .93rem; margin: 0; color: #CDB6E2; }

.stat-tile {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  padding: 1.45rem 1.25rem;
  text-align: center;
}
.stat-tile strong { display: block; font-family: var(--font-head); font-size: 1.9rem; color: #fff; line-height: 1.1; }
.stat-tile span { font-size: .84rem; color: #BFA6D4; }

/* Image collage used on About / Why sections */
.media-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  position: relative;
  background: var(--brand-100);
}
.media-frame img { width: 100%; display: block; }
/* A taller crop, so the photo reads level with a long text column beside it
   without either column having to stretch. */
.media-frame.is-tall img { aspect-ratio: 4 / 4.2; object-fit: cover; }
@media (max-width: 991.98px) { .media-frame.is-tall img { aspect-ratio: 16 / 10; } }
.media-note {
  position: absolute;
  left: 18px; bottom: 18px; right: 18px;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  font-size: .88rem;
  color: var(--ink-700);
  box-shadow: var(--sh-sm);
}

/* --------------------------------------------------------------------------
   Corporate collaboration collage — the handshake carries the section, with
   the signing shot tucked into the corner as the second half of the story.
   -------------------------------------------------------------------------- */
.collab-media {
  position: relative;
  padding-bottom: 46px;
  padding-right: 34px;
}
.collab-media > .media-frame img { aspect-ratio: 4 / 3.6; object-fit: cover; }

.collab-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 6px solid #fff;
  box-shadow: var(--sh-lg);
}
.collab-inset img { aspect-ratio: 4 / 3; object-fit: cover; }

.collab-badge {
  position: absolute;
  left: 18px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border-radius: var(--r-md);
  padding: .7rem .95rem;
  box-shadow: var(--sh-md);
  max-width: 52%;
}
.collab-badge i {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--brand-100);
  color: var(--brand-500);
  display: grid; place-items: center;
}
.collab-badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  color: var(--ink-900);
  line-height: 1.2;
}
.collab-badge span { font-size: .78rem; color: var(--ink-500); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .8rem;
  color: var(--ink-700);
}
.check-list li::before {
  content: '\f00c';
  font: 900 .72rem 'Font Awesome 6 Free';
  position: absolute; left: 0; top: .28rem;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid; place-items: center;
}
/* Slightly roomier variant for a standalone list inside a content block. */
.check-list-lg li { font-size: 1rem; margin-bottom: 1rem; padding-left: 2.2rem; }
.check-list-lg li::before { width: 24px; height: 24px; top: .15rem; font-size: .78rem; }

.check-list.on-dark li { color: #D8C4EA; }
.check-list.on-dark li::before { background: rgba(255, 255, 255, .14); color: #fff; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ==========================================================================
   8. Course cards
   ========================================================================== */
.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }

.course-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-100); }
.course-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.course-card:hover .course-media img { transform: scale(1.05); }
.course-media .course-cat {
  position: absolute; left: 12px; top: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--brand-600);
  font-family: var(--font-head); font-weight: 650; font-size: .74rem;
  padding: .32rem .7rem; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.course-media .course-off {
  position: absolute; right: 12px; top: 12px;
  background: var(--accent-500); color: var(--brand-900);
  font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  padding: .32rem .6rem; border-radius: var(--r-sm);
}

.course-body { padding: 1.35rem 1.35rem 0; flex: 1 1 auto; }
.course-body h3 { font-size: 1.13rem; margin-bottom: .5rem; }
.course-body h3 a { color: inherit; }
.course-body h3 a:hover { color: var(--brand-500); }
.course-body p { font-size: .9rem; color: var(--ink-600); margin-bottom: 1rem; }

.course-meta {
  display: flex; flex-wrap: wrap; gap: .45rem .95rem;
  font-size: .82rem; color: var(--ink-500);
  padding-bottom: 1.1rem;
}
.course-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.course-meta i { color: var(--brand-400); }

.course-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 1rem 1.35rem 1.35rem;
  border-top: 1px solid var(--ink-100);
  margin-top: auto;
}
.course-price { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.course-price .now { font-family: var(--font-head); font-weight: 750; font-size: 1.28rem; color: var(--brand-700); }
.course-price .was { font-size: .88rem; color: var(--ink-400, var(--ink-500)); text-decoration: line-through; }
.course-price .free { font-family: var(--font-head); font-weight: 700; color: var(--accent-600); font-size: 1.1rem; }

/* Courses page toolbar */
.filter-bar {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
  box-shadow: var(--sh-xs);
  margin-bottom: 2.2rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-200);
  color: var(--ink-700);
  background: #fff;
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-500); }
.chip.is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.chip small { opacity: .65; margin-left: .25rem; }

/* ==========================================================================
   Course detail page
   ========================================================================== */
.course-hero { background: var(--brand-700); color: #DCCBEC; padding: 54px 0 60px; position: relative; overflow: hidden; }
.course-hero::before {
  content: '';
  position: absolute; right: -140px; top: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 52, 180, .42), transparent 68%);
}
.course-hero h1 { color: #fff; }
.course-hero .crumbs li, .course-hero .crumbs a { color: #B79BD0; }
.course-hero .crumbs a:hover { color: #fff; }
.course-hero .crumbs li[aria-current] { color: #fff; }
.course-hero .meta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 0; }
.course-hero .meta-row .pill { background: rgba(255, 255, 255, .12); color: #E7D9F4; }
.course-hero .meta-row .pill i { color: var(--accent-500); }

.price-card {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  color: var(--ink-700);
}
.price-card .pc-media { aspect-ratio: 16 / 10; background: var(--brand-100); }
.price-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
.price-card .pc-body { padding: 1.5rem; }
.price-card .pc-price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.price-card .pc-price .now { font-family: var(--font-head); font-size: 2rem; font-weight: 750; color: var(--brand-700); }
.price-card .pc-price .was { text-decoration: line-through; color: var(--ink-500); }
.price-card .pc-save { font-size: .86rem; color: var(--accent-600); font-weight: 650; margin-bottom: 1.15rem; }
/* Checkout fee disclosure, directly under the price. */
.price-card .pc-fee-note {
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink-600);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
  margin: -.4rem 0 1.15rem;
}
.price-card .pc-fee-note strong { color: var(--ink-800); }
.price-card .pc-fee-note span { display: block; font-size: .78rem; color: var(--ink-500); margin-top: .15rem; }

.price-card .pc-actions { display: grid; gap: .6rem; }
.price-card .pc-facts { list-style: none; padding: 1.25rem 0 0; margin: 1.25rem 0 0; border-top: 1px solid var(--ink-100); }
.price-card .pc-facts li {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; padding: .42rem 0; margin: 0;
}
.price-card .pc-facts li span:first-child { color: var(--ink-500); display: inline-flex; align-items: center; gap: .5rem; }
.price-card .pc-facts li span:first-child i { color: var(--brand-400); width: 16px; text-align: center; }
.price-card .pc-facts li span:last-child { font-weight: 650; color: var(--ink-800); text-align: right; }

/* Opening hours — day on the left, time right-aligned on the same row, with a
   hairline between so the eye can track across. */
.hours-list {
  list-style: none;
  padding: .3rem 0 0;
  margin: .8rem 0 1rem;
}
.hours-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  font-size: .92rem;
  border-bottom: 1px solid var(--ink-100);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li span:first-child {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink-600);
}
.hours-list li span:first-child i { color: var(--brand-400); width: 16px; text-align: center; }
.hours-list li span:last-child {
  font-family: var(--font-head);
  font-weight: 650;
  color: var(--ink-800);
  text-align: right;
  white-space: nowrap;
}

/* Seven service blocks in a row: full section padding on each one added up to
   several screens of empty background. The outcome list also goes to a single
   column here, so it sits level with the text beside it. */
.svc-block { padding: 44px 0; }
.svc-block .outcome-grid { grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 1200px) {
  .svc-block .outcome-grid { grid-template-columns: repeat(2, 1fr); }
}

/* About → What we do: three numbered blocks, statement on the left, detail on
   the right. */
.wwd-block {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.75rem;
  box-shadow: var(--sh-sm);
}
/* Full width, so the ticks can run three across on a desktop. */
.wwd-block .outcome-grid { grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.1rem 0 0; }
.wwd-block .outcome-item { font-size: .88rem; padding: .7rem .85rem; }
.wwd-block .lead { font-size: 1.02rem; margin-bottom: .6rem; }
.wwd-block .wwd-close {
  margin: 1.1rem 0 0;
  font-size: .95rem;
  color: var(--ink-600);
  border-left: 3px solid var(--accent-500);
  padding-left: .9rem;
}
@media (max-width: 991.98px) { .wwd-block .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .wwd-block .outcome-grid { grid-template-columns: 1fr; } }
.wwd-block .wwd-no {
  display: inline-block;
  vertical-align: middle;
  margin-right: .6rem;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-100);
  margin-bottom: .5rem;
}
/* The photo floats right so the text wraps around it — no second column, no
   column-height mismatch to leave white space. */
.wwd-block .wwd-photo {
  float: right;
  width: 290px;
  max-width: 40%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  margin: 0 0 1rem 1.5rem;
  box-shadow: var(--sh-sm);
}
.wwd-block::after { content: ''; display: block; clear: both; }
@media (max-width: 767.98px) {
  .wwd-block .wwd-photo { float: none; width: 100%; max-width: none; margin: 0 0 1rem; }
}

.wwd-block h3 {
  font-size: 1.22rem;
  margin-bottom: .6rem;
  display: flex; align-items: flex-start; gap: .6rem;
}
.wwd-block h3 i { color: var(--accent-600); font-size: 1rem; margin-top: .3rem; }

/* The closing creed, set as three lines that build. */
.creed {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 750;
  line-height: 1.35;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  color: #fff;
}
.creed span { display: block; }
.creed span:last-child { color: var(--accent-400); }

.sticky-side { position: sticky; top: calc(var(--header-h) + 20px); }

.content-block { margin-bottom: 3rem; }
.content-block > h2 { font-size: 1.6rem; margin-bottom: 1.1rem; }
.content-block .rich p { color: var(--ink-600); }
.content-block .rich ul { color: var(--ink-600); }

.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .85rem; }
.outcome-item {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  font-size: .93rem;
  color: var(--ink-700);
}
.outcome-item i { color: var(--accent-500); margin-top: .25rem; }

.benefit-card {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); padding: 1.25rem;
  height: 100%;
}
.benefit-card i {
  width: var(--icon-md); height: var(--icon-md); border-radius: var(--icon-r-md);
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center; margin-bottom: .8rem;
}
.benefit-card h4 { font-size: 1rem; margin-bottom: .3rem; }
.benefit-card p { font-size: .88rem; color: var(--ink-600); margin: 0; }

/* ==========================================================================
   9. Steps / process
   ========================================================================== */
.steps { position: relative; }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 2rem 1.6rem 1.7rem;
  height: 100%;
  transition: transform var(--t), box-shadow var(--t);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.step .snum {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-100);
  margin-bottom: .6rem;
  letter-spacing: -.04em;
}
.step h3 { font-size: 1.09rem; margin-bottom: .4rem; }
.step p { font-size: .9rem; color: var(--ink-600); margin: 0; }
.step .sicon {
  position: absolute; right: 1.35rem; top: 1.6rem;
  width: var(--icon-md); height: var(--icon-md); border-radius: var(--icon-r-md);
  background: var(--brand-50); color: var(--brand-400);
  display: grid; place-items: center;
}

/* ==========================================================================
   10. Testimonials
   ========================================================================== */
.testimonial {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform var(--t), box-shadow var(--t);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.testimonial .quote-mark { font-size: 1.6rem; color: var(--brand-100); line-height: 1; }
.testimonial p { font-size: .96rem; color: var(--ink-700); margin: 0; flex: 1 1 auto; }
.testimonial .t-person { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--ink-100); }
.testimonial .t-person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial .t-person strong { display: block; font-family: var(--font-head); font-size: .97rem; color: var(--ink-900); }
.testimonial .t-person span { font-size: .82rem; color: var(--ink-500); }

.stars { color: var(--accent-500); font-size: .87rem; letter-spacing: .08em; }
.stars .is-muted { color: var(--ink-200); }

/* ==========================================================================
   11. Accordion / FAQ
   ========================================================================== */
.faq-list { display: grid; gap: .75rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-item.is-open { border-color: var(--brand-300); box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0;
  text-align: left;
  font-family: var(--font-head); font-weight: 650; font-size: 1.01rem;
  color: var(--ink-900);
  padding: 1.15rem 1.3rem;
  cursor: pointer;
}
.faq-q .fic {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-50); color: var(--brand-500);
  display: grid; place-items: center;
  font-size: .78rem;
  transition: transform var(--t), background var(--t), color var(--t);
}
.faq-item.is-open .faq-q .fic { background: var(--brand-500); color: #fff; transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t);
}
.faq-a-inner { padding: 0 1.3rem 1.25rem; color: var(--ink-600); font-size: .95rem; }

/* ==========================================================================
   12. CTA bands
   ========================================================================== */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: 3rem 3rem;
  overflow: hidden;
  background: linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 65%, var(--brand-400) 100%);
  color: #EBDCF6;
  box-shadow: var(--sh-lg);
}
.cta-band::before {
  content: '';
  position: absolute; right: -80px; top: -90px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.cta-band::after {
  content: '';
  position: absolute; left: -60px; bottom: -110px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(239, 174, 36, .18);
}
.cta-band h2 { color: #fff; margin-bottom: .7rem; }
.cta-band p { max-width: 640px; margin-bottom: 1.7rem; }
.cta-band .btn-group-hero { position: relative; z-index: 2; }

.cta-accent {
  background: linear-gradient(120deg, var(--accent-100), var(--brand-50));
  border: 1px solid #F0DCB4;
  border-radius: var(--r-xl);
  padding: 2.6rem;
  color: var(--ink-700);
  box-shadow: none;
}
.cta-accent h2 { color: var(--ink-900); }

.split-cta {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.5rem;
  align-items: center;
}

/* ==========================================================================
   13. Forms
   ========================================================================== */
.form-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-xl);
  padding: 2.1rem;
  box-shadow: var(--sh-sm);
}
.form-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .89rem;
  color: var(--ink-800);
  margin-bottom: .4rem;
}
.form-label .req { color: var(--danger-500); }

.form-control, .form-select {
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: .78rem 1rem;
  font-size: .97rem;
  color: var(--ink-800);
  background-color: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(139, 52, 180, .14);
  outline: 0;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger-500); }
.invalid-feedback { font-size: .82rem; }
textarea.form-control { min-height: 128px; resize: vertical; }
.form-text { font-size: .82rem; color: var(--ink-500); }

.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.7rem; }
.input-icon > i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-300); font-size: .95rem;
  pointer-events: none;
}

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

.alert {
  border: 0;
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  font-size: .94rem;
}
.alert-success { background: var(--success-100); color: #0E6B49; }
.alert-danger { background: var(--danger-100); color: #8E2436; }
.alert-info { background: var(--brand-100); color: var(--brand-600); }
.alert-warning { background: var(--accent-100); color: #7A5405; }

.contact-tile {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); padding: 1.4rem;
  height: 100%;
}
.contact-tile i {
  flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); border-radius: var(--icon-r-md);
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center;
}
.contact-tile h3 { font-size: 1rem; margin-bottom: .2rem; }
.contact-tile p, .contact-tile a { font-size: .92rem; color: var(--ink-600); margin: 0; word-break: break-word; }
.contact-tile a:hover { color: var(--brand-500); }

.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-200); line-height: 0; }
.map-frame iframe { width: 100%; height: 320px; border: 0; }

/* Enrolment summary */
.summary-card {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.summary-card h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.summary-card .s-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding: .4rem 0; }
.summary-card .s-row span:first-child { color: var(--ink-500); }
.summary-card .s-row span:last-child { font-weight: 650; color: var(--ink-800); text-align: right; }
.summary-card .s-total {
  border-top: 1px dashed var(--brand-300);
  margin-top: .7rem; padding-top: .9rem;
  font-family: var(--font-head);
}
.summary-card .s-total span:last-child { font-size: 1.3rem; color: var(--brand-700); }

.step-indicator { display: flex; gap: .4rem; align-items: center; font-size: .84rem; color: var(--ink-500); margin-bottom: 1.4rem; flex-wrap: wrap; }
.step-indicator .si { display: inline-flex; align-items: center; gap: .4rem; }
.step-indicator .si b {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-500);
  display: grid; place-items: center; font-size: .74rem;
}
.step-indicator .si.is-active b { background: var(--brand-500); color: #fff; }
.step-indicator .si.is-active { color: var(--brand-600); font-weight: 600; }
.step-indicator .sep { color: var(--ink-300); }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
  background: var(--brand-900);
  color: #BFA9D2;
  padding: 68px 0 0;
  font-size: .94rem;
}
.site-footer h4 {
  color: #fff; font-size: 1.02rem;
  margin-bottom: 1.15rem;
  letter-spacing: -.01em;
}
.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #fff; }
.site-footer .brand-text small { color: #9C87B4; }
.site-footer p { color: #BFA9D2; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .58rem; }
.footer-links a { color: #BFA9D2; display: inline-flex; align-items: center; gap: .5rem; }
.footer-links a::before {
  content: '\f105';
  font: 900 .72rem 'Font Awesome 6 Free';
  color: var(--accent-500);
  opacity: .7;
}
.footer-links a:hover { color: #fff; }

.footer-contact { list-style: none; padding: 0; margin: 0; }
/* Policy links, one row above the copyright divider. */
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-top: 2.6rem;
  font-size: .89rem;
}
.footer-legal-row a { color: #BFA9D2; }
.footer-legal-row a:hover { color: #fff; }

/* The four-audience band under the homepage About split. */
.about-reach { margin-top: 3rem; }

/* Phones: each footer list collapses behind its heading. */
@media (max-width: 767.98px) {
  .site-footer .footer-col > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: .95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    cursor: pointer;
  }
  .site-footer .footer-col > h4::after {
    content: '\f078';
    font: 900 .7rem 'Font Awesome 6 Free';
    color: var(--accent-500);
    transition: transform var(--t);
  }
  .site-footer .footer-col.is-open > h4::after { transform: rotate(180deg); }

  .site-footer .footer-col > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0;
  }
  .site-footer .footer-col.is-open > ul { max-height: 640px; padding: .8rem 0 .4rem; }

  /* Full width when stacked, so the toggles are easy targets. */
  .site-footer .footer-col { width: 100%; flex: 0 0 100%; max-width: 100%; }
}
.footer-contact li { display: flex; gap: .8rem; margin-bottom: .9rem; align-items: flex-start; }
/* Phone numbers must not break mid-number in a narrow column. */
.footer-contact a, .footer-contact span { overflow-wrap: break-word; }
.footer-contact li:first-child a { white-space: nowrap; }
.footer-contact i {
  flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--icon-r-sm);
  background: rgba(255, 255, 255, .09); color: var(--accent-500);
  display: grid; place-items: center; font-size: .88rem;
}
.footer-contact a, .footer-contact span { color: #CBB6DE; }
.footer-contact a:hover { color: #fff; }

.social-row { display: flex; gap: .6rem; margin-top: 1.3rem; }
.social-row a {
  width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--icon-r-sm);
  background: rgba(255, 255, 255, .09);
  color: var(--accent-500);
  display: grid; place-items: center;
  transition: background var(--t), color var(--t), transform var(--t);
}
.social-row a:hover { background: var(--brand-500); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  margin-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 1.35rem 0;
  font-size: .87rem;
  color: #9E8AB6;
}
.footer-bottom a { color: #BFA9D2; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer-credit { color: #9E8AB6; }
.footer-credit a { color: var(--accent-500); font-weight: 700; }
.footer-credit a:hover { color: #fff; }

/* ==========================================================================
   15. Floating actions & chatbot
   ========================================================================== */
.float-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-end;
}

.float-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 10px 26px rgba(26, 16, 36, .28);
  border: 0;
  transition: transform var(--t), box-shadow var(--t);
  position: relative;
}
.float-btn:hover { transform: translateY(-3px) scale(1.04); color: #fff; }
.float-chat { background: linear-gradient(140deg, var(--brand-600), var(--brand-400)); }
.float-top { background: var(--ink-800); width: 44px; height: 44px; font-size: 1rem; opacity: 0; visibility: hidden; }
.float-top.is-visible { opacity: 1; visibility: visible; }

/* The bot's name, so the button is not just another anonymous blob. */
.float-btn .fb-tag {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: .3rem .6rem;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.float-chat:hover .fb-tag,
.float-chat:focus-visible .fb-tag { opacity: 1; transform: translateY(-50%); }

.float-btn .fb-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: fbPulse 2.4s infinite;
}
@keyframes fbPulse {
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Chat widget */
.chat-panel {
  position: fixed;
  right: 18px; bottom: 86px;
  width: min(370px, calc(100vw - 36px));
  height: min(540px, calc(100vh - 130px));
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1060;
  transform: translateY(14px) scale(.97);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.chat-head {
  background: linear-gradient(130deg, var(--brand-700), var(--brand-500));
  color: #fff;
  padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: .75rem;
}
/* No tile behind the figure and nothing clipping it — at 38px a circular mask
   cut the shoulders off and the avatar read as a smudge. */
.chat-head .ch-avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}

/* JenBot's face — drawn in currentColor so it stays white on the purple
   header and on the floating button. */
/* Sized to sit fully inside its circle and centred by the parent's grid — no
   nudging. Cropping the shoulders against the button edge just looked broken. */
.jenbot-avatar { display: block; color: #fff; }
.chat-head .ch-avatar .jenbot-avatar { width: 36px; height: 36px; }
.float-chat .fb-avatar { width: 30px; height: 30px; }
/* The global `strong` colour is dark ink, which disappears against the purple
   header — the bot's name has to be set back to white explicitly. */
.chat-head strong { display: block; font-family: var(--font-head); font-size: .99rem; color: #fff; }
/* Scoped to .ch-status, not to every span in the header: the bare `span`
   selector also matched .ch-avatar, which put a second green dot above the
   figure as another grid item. */
.chat-head .ch-status { font-size: .77rem; color: #DBC7F0; display: flex; align-items: center; gap: .35rem; }
.chat-head .ch-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
/* Header buttons: expand, then close. The first one carries the auto margin so
   the pair sits hard against the right edge. */
.chat-icon-btn {
  background: none; border: 0; padding: .3rem;
  color: #DFCCF2; font-size: 1rem; line-height: 1;
  cursor: pointer; border-radius: 8px;
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-icon-btn:first-of-type { margin-left: auto; }
.chat-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .14); }
#chatClose { font-size: 1.1rem; }

/* Maximised: roomy enough to read a long answer without scrolling every line. */
.chat-panel.is-max {
  width: min(880px, calc(100vw - 36px));
  height: min(82vh, calc(100vh - 110px));
}
.chat-panel.is-max .chat-msg { max-width: 74%; }
.chat-panel.is-max .chat-body { padding: 1.4rem; }

.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.1rem;
  background: var(--ink-50);
  display: flex; flex-direction: column; gap: .7rem;
}
/* pre-line keeps the blank line between a bot answer and its follow-up
   sentence — replies are plain text, so the line breaks are all we have. */
.chat-msg { max-width: 84%; font-size: .91rem; line-height: 1.55; padding: .7rem .95rem; border-radius: 14px; white-space: pre-line; overflow-wrap: anywhere; }
/* Bot answers carry lists and links, so they get a little more room than the
   visitor's one-line questions. */
.chat-msg.bot { max-width: 93%; background: #fff; border: 1px solid var(--ink-200); border-bottom-left-radius: 5px; align-self: flex-start; color: var(--ink-700); }
.chat-msg.me { background: var(--brand-500); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.chat-msg a { color: var(--brand-500); text-decoration: underline; }
.chat-msg.me a { color: #fff; }
.chat-typing { display: flex; gap: .25rem; align-self: flex-start; padding: .8rem 1rem; background: #fff; border: 1px solid var(--ink-200); border-radius: 14px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); animation: chatDot 1.1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem 1.1rem; background: var(--ink-50); }
.chat-quick button {
  font-size: .8rem; font-weight: 600;
  padding: .38rem .75rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--brand-100);
  background: #fff; color: var(--brand-600);
  transition: all var(--t-fast);
}
.chat-quick button:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

.chat-foot { border-top: 1px solid var(--ink-200); padding: .7rem; display: flex; gap: .5rem; background: #fff; }
.chat-foot input {
  flex: 1 1 auto;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-pill);
  padding: .62rem 1rem;
  font-size: .92rem;
}
.chat-foot input:focus { outline: 0; border-color: var(--brand-400); }
.chat-foot button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-500); color: #fff; border: 0;
  display: grid; place-items: center;
}
.chat-foot button:hover { background: var(--brand-400); }

/* ==========================================================================
   16. Utility pages
   ========================================================================== */
.state-page { padding: 90px 0; text-align: center; }
.state-icon {
  width: 92px; height: 92px; border-radius: 26px;
  display: grid; place-items: center;
  font-size: 2.2rem;
  margin: 0 auto 1.7rem;
}
.state-icon.is-success { background: var(--success-100); color: var(--success-500); }
.state-icon.is-error { background: var(--danger-100); color: var(--danger-500); }
.state-icon.is-info { background: var(--brand-100); color: var(--brand-500); }
.state-page h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.state-page .code { font-family: var(--font-head); font-size: 5rem; font-weight: 800; color: var(--brand-100); line-height: 1; }

.receipt {
  max-width: 560px; margin: 2rem auto 0;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); overflow: hidden; text-align: left;
  box-shadow: var(--sh-sm);
}
.receipt .r-head { background: var(--brand-50); padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--ink-200); }
.receipt .r-head strong { font-family: var(--font-head); color: var(--brand-700); }
.receipt .r-row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.4rem; border-bottom: 1px solid var(--ink-100); font-size: .93rem; }
.receipt .r-row:last-child { border-bottom: 0; }
.receipt .r-row span:first-child { color: var(--ink-500); }
.receipt .r-row span:last-child { font-weight: 650; color: var(--ink-800); text-align: right; word-break: break-word; }
/* Issuer details at the foot of the receipt — who it is from, and the note
   that the amount carries no tax. */
.receipt .r-foot {
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
  padding: 1rem 1.4rem;
  font-size: .8rem;
  color: var(--ink-600);
  line-height: 1.5;
}
.receipt .r-foot strong { display: block; color: var(--ink-800); font-family: var(--font-head); }
.receipt .r-foot span { display: block; }

.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--ink-50);
  border: 1px dashed var(--ink-200);
  border-radius: var(--r-lg);
}
.empty-state i { font-size: 2rem; color: var(--ink-300); margin-bottom: 1rem; display: block; }

/* Legal / long-form content */
.prose h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.prose ul { color: var(--ink-600); }
.prose p { color: var(--ink-600); }
.prose > *:first-child { margin-top: 0; }

/* Reveal-on-scroll (progressive enhancement — visible by default) */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16, .84, .44, 1), transform .6s cubic-bezier(.16, .84, .44, 1);
  transition-delay: calc(var(--rv, 0) * 80ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  /* A zero-length countdown would just look like a permanently gold dot. */
  .hero-dots button[aria-selected="true"]::after { display: none; }
  .hero-orb i { animation: none; }
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --section-y: 54px; }
}

@media (max-width: 991.98px) {
  .main-nav, .nav-actions .btn-nav-desktop { display: none; }
  .nav-toggle { display: grid; }
  .hero-slide { padding: 42px 0 30px; }
  /* Tablet down the hero stacks and the container margins disappear, so the
     chips end up clipped by the viewport or sitting on the copy. They are
     decoration and this is a pointer effect — drop the whole layer. */
  .hero-orbs { display: none; }
  .hero-art { max-width: 460px; aspect-ratio: 4 / 3.9; margin-top: 1.5rem; }

  .hero-copy { max-width: none; }
  .split-cta { grid-template-columns: 1fr; gap: 1.6rem; }
  .cta-band { padding: 2.4rem 1.8rem; }
  .sticky-side { position: static; }
  .topbar-list { justify-content: center; }
}

@media (max-width: 767.98px) {
  :root { --section-y: 44px; --header-h: 66px; }
  body { font-size: .97rem; }
  .section-head { margin-bottom: 28px; }
  .hero-slide { padding: 34px 0 26px; }
  .hero-copy .lead { font-size: 1.03rem; }
  /* Phone-width art: smaller cards, tucked in so nothing runs off the edge. */
  .hero-art { max-width: 340px; }
  .hero-art .ha-ring, .hero-art .ha-dots, .hero-art .ha-squiggle { display: none; }
  .hero-panel { padding: 1.5rem 1.4rem; gap: .9rem; }
  .hero-panel img.hp-logo { width: 64px; height: 64px; border-radius: 16px; }
  .hero-panel h2 { font-size: 1.1rem; }
  .hero-panel li { font-size: .89rem; }
  /* The staircase already fills the space the controls used to pull up into. */
  .hero-arrows { display: none; }
  /* The badge and the inset photo both want the bottom of the collage once the
     column is only one phone wide — move the badge up to the empty top corner. */
  .collab-badge { left: 12px; right: auto; top: 14px; bottom: auto; max-width: 76%; }
  .collab-inset { width: 52%; }
  .form-card, .card-plain, .service-card { padding: 1.5rem; }
  .cta-band, .cta-accent { padding: 2rem 1.4rem; border-radius: var(--r-lg); }
  .course-hero { padding: 40px 0 44px; }
  .price-card { border-radius: var(--r-lg); }
  .state-page { padding: 62px 0; }
  .state-page .code { font-size: 3.6rem; }
  .float-stack { right: 14px; bottom: 14px; }
  .float-btn { width: 50px; height: 50px; font-size: 1.25rem; }
  .chat-panel { bottom: 78px; right: 14px; height: min(500px, calc(100vh - 110px)); }
  .site-footer { padding-top: 48px; }
  .footer-bottom { text-align: center; }
  .footer-legal { justify-content: center; }
}

@media (max-width: 575.98px) {
  /* Tighter side padding on phones — the gutter is scaled down to match so the
     container padding still covers half of it. */
  .container { padding-left: 18px; padding-right: 18px; }
  .row.g-5 { --bs-gutter-x: 2.25rem; }
}

@media (max-width: 479.98px) {
  .brand { font-size: 1.24rem; }
  .brand-mark { width: 38px; height: 38px; }
  .btn { width: 100%; }
  .btn-group-hero { flex-direction: column; align-items: stretch; }
  .course-foot { flex-direction: column; align-items: stretch; gap: .8rem; }
  .course-foot .btn { width: 100%; }
  .chip { font-size: .82rem; padding: .45rem .8rem; }
  .eyebrow { font-size: .72rem; }
}

/* ==========================================================================
   Student account — one row per application on /account
   ========================================================================== */
.acc-list { display: grid; gap: .75rem; }

.acc-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.acc-item:hover { border-color: var(--brand-300); box-shadow: 0 8px 22px rgba(36, 5, 56, .06); }

.acc-item-main { flex: 1 1 260px; min-width: 0; }
.acc-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.acc-item-head strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--ink-900); }

.acc-item-meta {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .3rem; font-size: .86rem; color: var(--ink-500);
}
.acc-item-meta .sep { opacity: .55; }

.acc-item-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Profile facts: a fixed label column, so the values line up on one edge and a
   long email wraps instead of pushing the row out of the card. */
.acc-facts {
  display: grid; gap: .1rem; margin: 0;
  padding: 1.15rem 1.25rem;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
}
.acc-facts > div {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .25rem .9rem;
  align-items: baseline;
  padding: .4rem 0;
}
.acc-facts > div + div { border-top: 1px solid var(--brand-100); }
.acc-facts dt { color: var(--ink-500); font-size: .86rem; }
.acc-facts dd {
  margin: 0; font-size: .92rem; font-weight: 650; color: var(--ink-800);
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .acc-facts > div { grid-template-columns: 1fr; }
  .acc-facts dd { margin-top: .1rem; }
}

.acc-badge {
  padding: .24rem .62rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  background: var(--ink-100); color: var(--ink-700);
}
.acc-badge.is-paid   { background: var(--success-100); color: var(--success-500); }
.acc-badge.is-due    { background: var(--accent-100);  color: var(--accent-700); }
.acc-badge.is-failed { background: var(--danger-100);  color: var(--danger-500); }
.acc-badge.is-free   { background: var(--brand-100);   color: var(--brand-700); }

@media (max-width: 575.98px) {
  .acc-item-actions { width: 100%; }
  .acc-item-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Print — course pages / receipts */
@media print {
  .site-header, .site-footer, .float-stack, .chat-panel, .btn, .topbar { display: none !important; }
  /* Scroll reveals never run in a print context — without this the receipt
     and the policy pages would print blank. */
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
  .receipt { box-shadow: none; border: 1px solid #999; }
}