/* =================================================================
   style.css — v3.  Premium motion, effects layer, fluid responsive layout.

   HOW THIS FILE IS ORGANISED
   ──────────────────────────
   1. Tokens + base ............ easing, shadows (all colours come from
                                 the CMS theme variables in header.php)
   2. FROZEN SHARED BLOCK ...... the old rules the DASHBOARD also uses
                                 (buttons, forms, cards, badges, admin-*).
                                 Copied unchanged. Do not edit.
   3. Public layer ............. everything new. Anything that changes a
                                 shared class is scoped to `.site-public`
                                 (set on <body> in includes/header.php),
                                 so the dashboard can never be affected.

   MOTION RULES
   ────────────
   • Only transform / translate / scale / opacity are animated.
   • Reveals use the individual `translate` and `scale` properties, so
     they never fight with hover effects that use `transform`.
   • Infinite animations are limited to the hero (transform/opacity only).
   • Everything respects prefers-reduced-motion.

   COLOURS
   ───────
   Nothing is hard-coded except white, black and the WhatsApp green.
   Everything else is var(--color-*) or color-mix() of those variables,
   so changing the theme in the dashboard recolours the whole site.
   ================================================================= */


/* =================================================================
   1. TOKENS + BASE
   ================================================================= */
:root {
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --hairline: color-mix(in srgb, var(--color-neutral-text) 9%, transparent);

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 8%, transparent),
               0 8px 20px -14px color-mix(in srgb, var(--color-primary-dark) 30%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, var(--color-primary-dark) 6%, transparent),
               0 22px 46px -26px color-mix(in srgb, var(--color-primary-dark) 42%, transparent);
  --shadow-lg: 0 4px 10px color-mix(in srgb, var(--color-primary-dark) 6%, transparent),
               0 36px 72px -36px color-mix(in srgb, var(--color-primary-dark) 58%, transparent);
}

/* A real spring curve where the browser supports linear(); the
   cubic-bezier above is the fallback elsewhere. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.006, 0.024 1.8%, 0.098 4%, 0.26 7%, 0.52 10.4%, 0.78 14%,
                          0.96 17.6%, 1.054 21%, 1.088 24.6%, 1.088 28.4%, 1.062 33%,
                          1.03 38.6%, 1.008 44.6%, 0.997 51%, 0.995 58%, 0.999 68%, 1);
  }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Anchor links (#stats, #programs, #contact...) land below the fixed header. */
html:has(body.site-public) { scroll-padding-top: 8rem; }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.site-public ::selection { background: color-mix(in srgb, var(--color-accent) 42%, transparent); color: inherit; }
.site-public :where(h1, h2, h3) { text-wrap: balance; }
/* Primary-coloured focus rings vanish on primary backgrounds — use accent there. */
.site-public .text-white :focus-visible,
.site-public .cta-band :focus-visible,
.site-public footer :focus-visible,
.site-public .site-nav:not(.solid) :focus-visible { outline-color: var(--color-accent); }


/* =================================================================
   2. FROZEN SHARED BLOCK
   These rules are used by the DASHBOARD as well as the public site.
   They are copied from the previous style.css UNCHANGED.
   ================================================================= */

/* ---- Buttons ---- */
.btn-cta, .btn-primary, .btn-outline, .btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1;
  border-radius: .6rem;
  padding: .9rem 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-cta i, .btn-primary i, .btn-outline i, .btn-outline-white i { transition: transform .25s ease; flex-shrink: 0; }
.btn-cta:hover i, .btn-primary:hover i, .btn-outline:hover i, .btn-outline-white:hover i { transform: translateX(3px); }
.btn-cta:active, .btn-primary:active, .btn-outline:active, .btn-outline-white:active { transform: translateY(1px); }

.btn-cta {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.btn-cta:hover { box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--color-accent) 65%, black); }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-outline { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); color: var(--color-primary); background: transparent; }
.btn-outline:hover { border-color: var(--color-primary); background: var(--color-accent-soft); }

.btn-outline-white { border-color: rgba(255, 255, 255, .4); color: #fff; background: rgba(255, 255, 255, .04); }
.btn-outline-white:hover { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .1); }

@media (max-width: 480px) {
  .btn-cta, .btn-primary, .btn-outline, .btn-outline-white { width: 100%; }
}

/* ---- Section + card helpers ---- */
.section { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.section-tight { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: Poppins, sans-serif;
  font-weight: 600; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary);
}
.section-title { font-family: Poppins, sans-serif; font-weight: 700; color: var(--color-primary-dark); line-height: 1.15; }
.card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 1rem;
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .3);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .34);
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.card-hover:hover .icon-badge,
.card-hover:hover .value-icon {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.icon-badge {
  display: grid; place-items: center;
  height: 3.25rem; width: 3.25rem;
  border-radius: 1rem;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

/* ---- Forms ---- */
.form-label { display: block; font-weight: 600; font-size: .85rem; color: var(--color-primary-dark); margin-bottom: .35rem; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: .6rem;
  padding: .65rem .8rem;
  font-size: .95rem;
  background: #fff;
  color: var(--color-neutral-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* ---- Rich-text rendering ---- */
.prose-content { color: var(--color-neutral-text); line-height: 1.78; }
.prose-content > *:first-child { margin-top: 0; }
.prose-content h2, .prose-content h3, .prose-content h4 {
  font-family: Poppins, sans-serif; font-weight: 700;
  color: var(--color-primary-dark);
  margin: 1.6em 0 .5em;
}
.prose-content h2 { font-size: 1.6rem; }
.prose-content h3 { font-size: 1.3rem; }
.prose-content p { margin-bottom: 1.05em; }
.prose-content a { color: var(--color-primary); text-decoration: underline; }
.prose-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.05em; }
.prose-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.05em; }
.prose-content li { margin-bottom: .35em; }
.prose-content img { border-radius: .8rem; margin: 1.2em 0; max-width: 100%; height: auto; }
.prose-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding: .2em 0 .2em 1rem; margin: 1.2em 0;
  font-style: italic; color: #4b5563;
}

/* ---- Admin dashboard (do not edit) ---- */
.admin-body { background: var(--color-neutral-bg); }
.admin-sidebar { background: var(--color-primary-dark); }
.admin-nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: .6rem;
  color: rgba(255, 255, 255, .78);
  font-weight: 500; font-size: .93rem;
  transition: background-color .18s ease, color .18s ease;
}
.admin-nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav-link.is-active { background: var(--color-accent); color: var(--color-primary-dark); font-weight: 600; }

/* Desktop sidebar collapse (toggled via the header hamburger button).
   When collapsed, pull the fixed sidebar off-canvas so the content area
   expands to fill the whole width. !important guarantees it beats the
   Tailwind utilities (lg:static, lg:translate-x-0) regardless of load order. */
@media (min-width: 1024px) {
  #admin-shell.is-collapsed #admin-sidebar {
    position: fixed !important;
    z-index: 40;
    transform: translateX(-100%) !important;
    visibility: hidden;
  }
}
.admin-card {
  background: #fff; border: 1px solid rgba(0, 0, 0, .06);
  border-radius: .9rem; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .3);
}
.stat-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 1rem; box-shadow: 0 10px 30px -22px rgba(0,0,0,.3); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; }
.admin-table td { padding: .85rem 1rem; border-bottom: 1px solid #f0f2f2; font-size: .92rem; vertical-align: middle; }
.admin-table tbody tr:hover, .admin-table tbody tr:hover { background: var(--color-neutral-bg); }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge-new { background: #DBEAFE; color: #1E40AF; }
.badge-reviewed { background: #FEF3C7; color: #92400E; }
.badge-accepted { background: #DCFCE7; color: #166534; }
.badge-rejected { background: #FEE2E2; color: #991B1B; }
.badge-unread { background: var(--color-accent-soft); color: var(--color-primary-dark); }
.badge-read { background: #F3F4F6; color: #6B7280; }
.badge-published { background: #DCFCE7; color: #166534; }
.badge-draft { background: #F3F4F6; color: #6B7280; }

/* ---- Lightbox + hover-reveal (public only, but small) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, .88);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: .6rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.lightbox-close { position: absolute; top: 1.1rem; right: 1.4rem; color: #fff; padding: .5rem; border-radius: .5rem; }
.lightbox-close:hover { background: rgba(255,255,255,.12); }
.reveal-parent .reveal-overlay { opacity: 0; transition: opacity .3s ease; }
.reveal-parent:hover .reveal-overlay { opacity: 1; }


/* =================================================================
   3. PUBLIC LAYER
   ================================================================= */

/* ---------------------------------------------------------------- *
   3.1  Scroll reveal  (main.js adds .in-view)

   Uses keyframe animations on the individual `translate` / `scale`
   properties. This avoids three old bugs:
     • hover lift being cancelled by `transform: none`
     • card hover transitions inheriting the stagger delay
     • element transitions overriding the reveal transition
 * ---------------------------------------------------------------- */
[data-animate] { opacity: 0; --d: 0s; }
[data-animate].in-view {
  opacity: 1;
  animation: revealUp .8s var(--ease-out) backwards;
  animation-delay: var(--d);
}
[data-animate="fade-in"].in-view    { animation-name: revealFade; }
[data-animate="fade-left"].in-view  { animation-name: revealLeft; }
[data-animate="fade-right"].in-view { animation-name: revealRight; }
[data-animate="scale-in"].in-view {
  animation: revealFade .5s var(--ease-out) backwards, revealScale .9s var(--ease-spring) backwards;
  animation-delay: var(--d);
}

@keyframes revealUp    { from { opacity: 0; translate: 0 28px; }  to { opacity: 1; translate: none; } }
@keyframes revealLeft  { from { opacity: 0; translate: -32px 0; } to { opacity: 1; translate: none; } }
@keyframes revealRight { from { opacity: 0; translate: 32px 0; }  to { opacity: 1; translate: none; } }
@keyframes revealFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes revealScale { from { scale: .9; } to { scale: none; } }

/* Staggered cascade for children of .stagger */
.stagger > *:nth-child(1) { --d: .04s; }
.stagger > *:nth-child(2) { --d: .12s; }
.stagger > *:nth-child(3) { --d: .20s; }
.stagger > *:nth-child(4) { --d: .28s; }
.stagger > *:nth-child(5) { --d: .36s; }
.stagger > *:nth-child(6) { --d: .44s; }
.stagger > *:nth-child(7) { --d: .52s; }
.stagger > *:nth-child(n+8) { --d: .58s; }

/* Hero on-load animation (above the fold, not scroll-triggered) */
@keyframes heroUp { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: none; } }
.hero-animate {
  opacity: 1;
  animation: heroUp 1s var(--ease-out) both;
}
.hero-animate.d1 { animation-delay: .10s; }
.hero-animate.d2 { animation-delay: .22s; }
.hero-animate.d3 { animation-delay: .36s; }
.hero-animate.d4 { animation-delay: .50s; }

/* No JavaScript → never leave content invisible. The editor preview also
   shows everything at once so editors never see a half-hidden page. */
@media (scripting: none) { [data-animate], .hero-animate { opacity: 1; animation: none; } }
html[data-cms-preview] [data-animate],
html[data-cms-preview] .hero-animate { opacity: 1; animation: none; }

/* Line that draws in on the assessments timeline */
.step-line-fill { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.step-line-fill.in-view { transform: scaleX(1); }
@media (max-width: 767px) {
  .step-line-fill { transform: scaleY(0); transform-origin: top; }
  .step-line-fill.in-view { transform: scaleY(1); }
}

/* Scroll progress bar (JS sets transform: scaleX) */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}


/* ---------------------------------------------------------------- *
   3.2  Navbar  (header.php adds its own layer on top of this)
 * ---------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .35s ease, box-shadow .35s ease;
}
/* No backdrop-filter on a fixed bar: it is the most expensive effect on
   phones while scrolling, and at this opacity the blur is invisible anyway. */
.site-nav.solid {
  background: color-mix(in srgb, var(--color-base) 97%, transparent);
  box-shadow: 0 1px 0 var(--hairline), 0 14px 34px -22px rgba(0, 0, 0, .4);
}
.nav-logo-text { color: #fff; transition: color .3s ease; }
.site-nav.solid .nav-logo-text { color: var(--color-primary); }
.logo-img { padding: .6rem; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .8rem;
  font-weight: 500;
  font-size: .93rem;
  border-radius: .6rem;
  color: rgba(255, 255, 255, .92);
  background: transparent;
  transition: color .2s ease, background-color .25s ease;
  cursor: pointer;
}
.nav-link:hover { color: #fff; }
.site-nav.solid .nav-link { color: var(--color-neutral-text); }
.site-nav.solid .nav-link:hover,
.site-nav.solid .nav-link.is-active { color: var(--color-primary); }
.nav-link::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.nav-toggle { color: #fff; padding: .4rem; border-radius: .6rem; transition: color .3s ease, background-color .2s ease; }
.site-nav.solid .nav-toggle { color: var(--color-neutral-text); }
.nav-toggle:hover { background: rgba(0,0,0,.06); }

/* Dropdowns (desktop) */
.dropdown { position: relative; }
.dropdown-panel {
  position: absolute;
  left: 0; top: 100%;
  padding-top: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition: opacity .22s ease-out, transform .45s var(--ease-spring), visibility .22s;
  z-index: 60;
}
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel,
.dropdown.force-open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown-panel > div {
  background: var(--color-base);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
}
.dropdown-chevron { transition: transform .35s var(--ease-spring); }
.dropdown:hover .dropdown-chevron,
.dropdown:focus-within .dropdown-chevron,
.dropdown.force-open .dropdown-chevron { transform: rotate(180deg); }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: .7rem;
  color: var(--color-neutral-text);
  font-size: .9rem;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease, padding-left .3s var(--ease-out);
}
.dropdown-item > :is(i, svg) { color: var(--color-primary); transition: color .2s ease, transform .35s var(--ease-spring); }
.dropdown-item:hover { background: var(--color-accent-soft); color: var(--color-primary-dark); padding-left: .95rem; }
.dropdown-item:hover > :is(i, svg) { color: var(--color-primary-dark); transform: scale(1.12); }

/* Mobile menu */
.mobile-menu {
  background: var(--color-base);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 24px 32px -16px rgba(0, 0, 0, .2);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-link {
  display: block;
  padding: .75rem .65rem;
  border-radius: .7rem;
  font-weight: 500;
  color: var(--color-neutral-text);
  transition: background-color .2s ease, color .2s ease;
}
.mobile-link:hover { background: var(--color-accent-soft); color: var(--color-primary-dark); }
.mobile-accordion-toggle {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  padding: .75rem .65rem;
  border-radius: .7rem;
  font-weight: 500;
  color: var(--color-neutral-text);
}
.mobile-accordion-toggle[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }
.mobile-accordion-panel { padding: .15rem 0 .35rem .5rem; }
.mobile-accordion-panel[hidden] { display: none; }
.mobile-sublink {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .75rem;
  border-radius: .6rem;
  color: var(--color-neutral-text);
  font-size: .92rem;
}
.mobile-sublink > :is(i, svg) { color: var(--color-primary); }
.mobile-sublink:hover { background: var(--color-accent-soft); color: var(--color-primary-dark); }


/* ---------------------------------------------------------------- *
   3.3  Buttons  (shared classes → scoped upgrade)
 * ---------------------------------------------------------------- */
.site-public .btn-cta,
.site-public .btn-primary,
.site-public .btn-outline,
.site-public .btn-outline-white {
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border-radius: .95rem;
  letter-spacing: .005em;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--ease-spring), box-shadow .35s var(--ease-out),
              background-color .25s ease, border-color .25s ease, color .25s ease;
}
.site-public .btn-cta > :is(i, svg),
.site-public .btn-primary > :is(i, svg),
.site-public .btn-outline > :is(i, svg),
.site-public .btn-outline-white > :is(i, svg) { flex-shrink: 0; transition: transform .5s var(--ease-spring); }

.site-public .btn-cta {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 76%, white));
  color: var(--color-primary-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset,
              0 12px 26px -14px color-mix(in srgb, var(--color-accent) 80%, black);
}
.site-public .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset,
              0 14px 28px -16px color-mix(in srgb, var(--color-primary) 85%, black);
}
.site-public .btn-outline {
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
  background: color-mix(in srgb, var(--color-base) 60%, transparent);
}
.site-public .btn-outline-white {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .07);
}

@media (hover: hover) and (pointer: fine) {
  .site-public .btn-cta:hover,
  .site-public .btn-primary:hover,
  .site-public .btn-outline:hover,
  .site-public .btn-outline-white:hover { transform: translateY(-3px); }
  .site-public .btn-cta:hover > :is(i, svg),
  .site-public .btn-primary:hover > :is(i, svg),
  .site-public .btn-outline:hover > :is(i, svg),
  .site-public .btn-outline-white:hover > :is(i, svg) { transform: translateX(4px); }

  .site-public .btn-cta:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset,
                0 20px 36px -14px color-mix(in srgb, var(--color-accent) 85%, black);
  }
  .site-public .btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset,
                0 22px 38px -16px color-mix(in srgb, var(--color-primary) 90%, black);
  }
  .site-public .btn-outline:hover { background: var(--color-accent-soft); }
  .site-public .btn-outline-white:hover { background: rgba(255, 255, 255, .16); }
}
/* Pressed: a quick, springy squash. Declared after :hover so it wins. */
.site-public .btn-cta:active,
.site-public .btn-primary:active,
.site-public .btn-outline:active,
.site-public .btn-outline-white:active { transform: translateY(0) scale(.97); transition-duration: .12s; }

/* Light sweep across the main call-to-action */
.btn-cta-sheen { position: relative; overflow: hidden; isolation: isolate; }
.btn-cta-sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%) skewX(-22deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-cta-sheen:hover::before { transform: translateX(300%) skewX(-22deg); transition: transform .9s var(--ease-out); }
}
@keyframes ctaSheen {
  0%, 62% { transform: translateX(-120%) skewX(-22deg); }
  100%    { transform: translateX(300%) skewX(-22deg); }
}

/* Submit buttons: shine on hover only */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-shine:hover::after { transform: translateX(330%) skewX(-20deg); transition: transform .8s var(--ease-out); }
}


/* ---------------------------------------------------------------- *
   3.4  Forms  (shared classes → scoped upgrade)
 * ---------------------------------------------------------------- */
/* ---- Forms & Icon Alignment ---- */
.site-public .input-icon-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.site-public .form-input,
.site-public .form-select,
.site-public .form-textarea {
  min-height: 3rem;
  padding: .75rem .95rem;
  border-radius: .85rem;
  border: 1px solid color-mix(in srgb, var(--color-neutral-text) 18%, white);
  background-color: #fff;
  transition: border-color .2s ease, box-shadow .3s var(--ease-out), background-color .2s ease;
}
.site-public .form-textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.site-public .form-input::placeholder,
.site-public .form-textarea::placeholder { color: color-mix(in srgb, var(--color-neutral-text) 42%, white); }
.site-public .form-input:hover,
.site-public .form-select:hover,
.site-public .form-textarea:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, white); }
.site-public .form-input:focus,
.site-public .form-select:focus,
.site-public .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.site-public .form-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1rem;
}
/* 16px stops iPhones zooming the page when a field is focused. */
@media (max-width: 640px) {
  .site-public .form-input,
  .site-public .form-select,
  .site-public .form-textarea { font-size: 1rem; }
}
.site-public .form-label { font-size: .86rem; letter-spacing: .005em; }


/* ---------------------------------------------------------------- *
   3.5  Cards  (shared classes → scoped upgrade)
 * ---------------------------------------------------------------- */
.site-public .card {
  border-radius: 1.25rem;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.site-public .card-hover { position: relative; overflow: hidden; isolation: isolate; }
.site-public .card-hover::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(115deg, transparent, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-public .card-hover:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
  }
  .site-public .card-hover:hover::after { transform: translateX(260%) skewX(-18deg); transition: transform .9s var(--ease-out); }
}
/* Touch screens have no real hover — never leave a card stuck "lifted". */
@media (hover: none) {
  .site-public .card-hover:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--hairline); }
}
/* Cards tilted by JS (index.php / programs.php): smooth the pointer follow. */
@media (hover: hover) and (pointer: fine) {
  .site-public .card-tilt { transition: transform .25s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease; }
  .site-public .card-tilt:hover { will-change: transform; }
}
.site-public .icon-badge {
  border-radius: 1.05rem;
  transition: background-color .3s ease, color .3s ease, transform .6s var(--ease-spring);
}
.site-public .card-hover:hover .icon-badge,
.site-public .card-hover:hover .value-icon { transform: rotate(-8deg) scale(1.08); }

.site-public .section-title { letter-spacing: -.015em; }
.site-public .eyebrow { letter-spacing: .1em; }


/* ---------------------------------------------------------------- *
   3.6  HERO — home + About
   Everything here styles markup that already exists in index.php /
   about.php. Orbs, grid and the bottom curve are pure CSS.
 * ---------------------------------------------------------------- */
.hero-static,
.about-hero { isolation: isolate; }
.hero-static { min-height: 92vh; min-height: min(92svh, 62rem); }
@media (max-width: 640px) { .hero-static { min-height: auto; padding-bottom: 3rem; } }

/* Masked grid — a quiet "blueprint" texture that fades toward the corner */
.hero-static::before,
.about-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 74% 26%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 62% at 74% 26%, #000 0%, transparent 72%);
}
/* Soft curve where the hero meets the page */
.hero-static::after,
.about-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: clamp(2.25rem, 4.5vw, 4.25rem);
  background: var(--color-base);
  -webkit-mask: radial-gradient(ellipse 120% 100% at 50% 100%, #000 55%, transparent 56%);
          mask: radial-gradient(ellipse 120% 100% at 50% 100%, #000 55%, transparent 56%);
  pointer-events: none;
}

/* Ambient orbs — gradients only (no blur), transform + opacity only */
.hero-orb { position: absolute; border-radius: 9999px; pointer-events: none; will-change: transform, opacity; }
.hero-orb-1 {
  width: 520px; height: 520px; top: -160px; right: -120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 38%, transparent), transparent 68%);
  animation: heroOrbFloat 11s ease-in-out infinite;
}
.hero-orb-2 {
  width: 420px; height: 420px; bottom: -140px; left: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 70%);
  animation: heroOrbFloat 13s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width: 260px; height: 260px; top: 38%; right: 22%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 70%);
  opacity: .8;
}
@keyframes heroOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: .85; }
  50%      { transform: translate3d(0, -26px, 0) scale(1.06); opacity: 1; }
}
@media (max-width: 1023px) { .hero-orb-3 { display: none; } }
@media (max-width: 640px) {
  .hero-orb-1 { width: 320px; height: 320px; top: -100px; right: -90px; }
  .hero-orb-2 { width: 260px; height: 260px; bottom: -90px; left: -90px; }
}

/* Glow blobs on the About hero — a mask fades the edge instead of a
   70px blur filter (much cheaper to paint, same soft look). */
.hero-glow {
  position: absolute; border-radius: 9999px; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-slow   { animation: floatY 6s ease-in-out infinite; }
.float-slower { animation: floatY 8s ease-in-out infinite; animation-delay: 1.2s; }

/* Mouse glow (JS sets translate3d) — mouse users only */
.hero-mouse-glow {
  position: absolute; top: 0; left: 0; width: 600px; height: 600px;
  border-radius: 9999px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 65%);
  opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.hero-static:hover .hero-mouse-glow,
.about-hero:hover .hero-mouse-glow { opacity: 1; }
@media (hover: none) { .hero-mouse-glow { display: none; } }

/* The headline badge. The glow is a pseudo-element that animates ONLY
   opacity. (Before, the glow animation replaced the entrance animation
   on the same element, so the badge stayed invisible.) */
.hero-badge-glow { position: relative; }
.hero-badge-glow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 26px 2px color-mix(in srgb, var(--color-accent) 48%, transparent);
  opacity: 0; animation: badgePulse 3.6s ease-in-out 1.4s infinite;
}
@keyframes badgePulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Type — fluid between phone and wide desktop */
.hero-static h1 { font-size: clamp(2.35rem, 1.05rem + 4.7vw, 4.8rem); line-height: 1.04; letter-spacing: -.028em; }
.about-hero h1  { font-size: clamp(2.3rem, 1.05rem + 4.4vw, 4.4rem);  line-height: 1.06; letter-spacing: -.025em; }
.hero-static p,
.about-hero .hero-inner > div > p { font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem); line-height: 1.65; color: rgba(255, 255, 255, .84); }
/* Keep the copy clear of the floating chips on the right */
.hero-static .hero-inner > div:first-child { max-width: 46rem; }

/* Trust row → small pills */
.hero-trust { gap: .6rem .7rem; }
.hero-trust-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .9);
}
.hero-trust-item > :is(i, svg) { height: 1rem; width: 1rem; color: var(--color-accent); flex-shrink: 0; }
.hero-trust-sep { display: none; }

/* Hero buttons a touch larger */
.hero-static .btn-cta,
.hero-static .btn-outline-white { min-height: 3.35rem; padding-inline: 1.9rem; }
/* One idle shine on the main call to action (transform only) */
.hero-static .btn-cta-sheen::before { animation: ctaSheen 6.5s var(--ease-in-out) 2.4s infinite; }

/* Floating glass chips — wide screens only, kept off the headline */
.hero-chip {
  position: absolute; display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-radius: 1rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.hero-chip strong { display: block; font-family: Poppins, sans-serif; font-size: .82rem; line-height: 1.1; color: #fff; }
.hero-chip small  { display: block; font-size: .68rem; color: rgba(255, 255, 255, .68); }
.hero-chip-icon {
  display: grid; place-items: center; height: 2rem; width: 2rem; border-radius: .65rem; flex-shrink: 0;
  background: var(--color-accent); color: var(--color-primary-dark);
}
.hero-chip-1 { top: 20%; right: 3%; animation-delay: 0s; }
.hero-chip-2 { top: 45%; right: 8%; animation-delay: .6s; }
.hero-chip-3 { top: 70%; right: 4%; animation-delay: 1.2s; }
.hero-ring-spin {
  position: absolute; top: 31%; right: 22%;
  display: grid; place-items: center; height: 3.4rem; width: 3.4rem; border-radius: 9999px;
  color: var(--color-accent);
  border: 2px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: ringSpin 16s linear infinite; opacity: .8;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@media (max-width: 1279px) { .hero-chip, .hero-ring-spin { display: none; } }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  color: rgba(255, 255, 255, .7); transition: color .25s ease;
}
.hero-scroll-hint:hover { color: #fff; }
.hero-scroll-mouse { display: block; width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; position: relative; }
.hero-scroll-wheel {
  position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px;
  background: currentColor; animation: scrollWheel 1.9s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
.hero-scroll-text { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 1023px) { .hero-scroll-hint { display: none; } }

/* ---------------------------------------------------------------- *
   3.7  Inner-page headers (contact, news, principal, programs,
        apply, fees, assessments, blog post, program pages)
   Their markup is an inline-styled <section class="... text-white">
   straight after the WhatsApp button, so it is targeted that way.
 * ---------------------------------------------------------------- */
.site-public .wa-fab-btn + section.text-white { isolation: isolate; }
.site-public .wa-fab-btn + section.text-white::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -45%; right: -12%; width: min(62rem, 92vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent);
}
.site-public .wa-fab-btn + section.text-white::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 50%, transparent);
  opacity: .55;
}
.site-public .wa-fab-btn + section.text-white > .relative {
  padding-block: clamp(3.25rem, 6.5vw, 6rem);
}
.site-public .wa-fab-btn + section.text-white h1 {
  font-size: clamp(2.05rem, 1rem + 3.9vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.site-public .wa-fab-btn + section.text-white .eyebrow {
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .17);
}
/* One orchestrated entrance: the header's own content rises in, in order.
   (Elements that already have their own animation are left alone.) */
.site-public .wa-fab-btn + section.text-white > .relative > :not([data-animate]):not(.hero-animate) {
  animation: heroUp .9s var(--ease-out) both;
}
.site-public .wa-fab-btn + section.text-white > .relative > :nth-child(2) { animation-delay: .08s; }
.site-public .wa-fab-btn + section.text-white > .relative > :nth-child(3) { animation-delay: .16s; }
.site-public .wa-fab-btn + section.text-white > .relative > :nth-child(4) { animation-delay: .24s; }
.site-public .wa-fab-btn + section.text-white > .relative > :nth-child(n+5) { animation-delay: .32s; }
html[data-cms-preview] .wa-fab-btn + section.text-white > .relative > * { animation: none; }

/* Breadcrumbs inside those headers */
.site-public .wa-fab-btn + section.text-white nav[aria-label="Breadcrumb"] { flex-wrap: wrap; row-gap: .25rem; }
.site-public .wa-fab-btn + section.text-white nav[aria-label="Breadcrumb"] a { transition: color .2s ease; }

/* Step pills on the apply page */
.hero-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hero-step-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .82rem; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.hero-step-pill .num {
  display: grid; place-items: center; height: 1.35rem; width: 1.35rem; border-radius: 999px;
  background: var(--color-accent); color: var(--color-primary-dark); font-size: .72rem; font-weight: 800;
}
.hero-step-sep { color: rgba(255, 255, 255, .4); }
@media (max-width: 480px) { .hero-step-sep { display: none; } }


/* ---------------------------------------------------------------- *
   3.8  Stats bar — one connected card, dividers drawn by the grid gap
 * ---------------------------------------------------------------- */
.stats-bar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: color-mix(in srgb, var(--color-neutral-text) 10%, white);
  border: 1px solid var(--hairline);
  border-radius: 1.5rem; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.stats-bar-item {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.5rem 1.25rem; background: #fff;
  transition: background-color .35s ease;
}
.stats-bar-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats-bar { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .stats-bar-item { padding: 1.85rem 1.6rem; }
  .stats-bar-item:last-child:nth-child(odd) { grid-column: auto; }
}
@media (hover: hover) { .stats-bar-item:hover { background: color-mix(in srgb, var(--color-accent-soft) 45%, #fff); } }
.stats-bar-icon {
  display: grid; place-items: center; flex-shrink: 0;
  height: 2.9rem; width: 2.9rem; border-radius: .9rem;
  background: var(--color-accent-soft); color: var(--color-primary);
}
.stats-bar-num { font-family: Poppins, sans-serif; font-weight: 700; line-height: 1; color: var(--color-primary-dark); font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); }
.stats-bar-label { margin-top: .25rem; font-size: .8rem; color: var(--color-neutral-text); opacity: .68; }
.stats-icon-pop { animation: statsPop .7s var(--ease-spring) backwards; }
@keyframes statsPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); background: var(--color-accent); color: var(--color-primary-dark); }
  100% { transform: scale(1); }
}


/* ---------------------------------------------------------------- *
   3.9  Home sections: values, apart, why, testimonials, principal
 * ---------------------------------------------------------------- */
.value-card {
  padding: 2rem 1.75rem; border-radius: 1.25rem;
  background: #fff; border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.value-icon {
  display: grid; place-items: center; height: 3.1rem; width: 3.1rem; border-radius: .95rem;
  background: var(--color-accent-soft); color: var(--color-primary);
  transition: background-color .3s ease, color .3s ease, transform .6s var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 26%, transparent); }
  .value-card:hover .value-icon { background: var(--color-primary); color: #fff; transform: rotate(-8deg) scale(1.1); }
}

@media (min-width: 1024px) { .apart-sticky { position: sticky; top: 7.5rem; align-self: start; } }
.apart-list { display: flex; flex-direction: column; }
.apart-item {
  display: flex; gap: 1.1rem; padding: 1.4rem 1rem; margin-inline: -1rem;
  border-bottom: 1px solid var(--hairline); border-radius: 1rem;
  transition: background-color .3s ease;
}
.apart-item:first-child { padding-top: 1.4rem; }
.apart-item:last-child { border-bottom: none; }
.apart-icon {
  flex-shrink: 0; display: grid; place-items: center; height: 2.8rem; width: 2.8rem; border-radius: .85rem;
  background: var(--color-accent-soft); color: var(--color-primary-dark);
  transition: transform .6s var(--ease-spring), background-color .3s ease, color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .apart-item:hover { background: color-mix(in srgb, var(--color-accent-soft) 60%, transparent); }
  .apart-item:hover .apart-icon { transform: scale(1.1) rotate(-6deg); background: var(--color-primary); color: #fff; }
}
@media (max-width: 1023px) { .apart-item { margin-inline: 0; padding-inline: .8rem; } }

.why-item .icon-badge { transition: transform .6s var(--ease-spring), background-color .3s ease, color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .why-item:hover .icon-badge { transform: translateY(-6px) scale(1.08); background: var(--color-primary); color: #fff; }
}

/* Testimonials: swipeable row on phones, grid from tablet up */
.testimonial-track {
  display: grid; gap: 1.25rem; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .25rem;
  padding: .25rem .25rem 1rem; margin: 0 -.25rem;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track > * { scroll-snap-align: start; }
@media (min-width: 768px) {
  .testimonial-track { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) { .testimonial-track { grid-template-columns: repeat(4, 1fr); } }
.testimonial-card {
  padding: 1.75rem; border-radius: 1.25rem; background: #fff;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 24%, transparent); }
}
.testimonial-quote { color: var(--color-accent); }
.testimonial-avatar {
  display: grid; place-items: center; height: 2.4rem; width: 2.4rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff; font-weight: 700; font-size: .78rem;
}

/* Offset accent frames. `isolation` gives them their own stacking context
   so the frame sits behind the photo but above the page background. */
.img-frame,
.principal-img-frame { position: relative; isolation: isolate; }
.img-frame::before,
.principal-img-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translate(14px, 14px); border-radius: 1.5rem;
  border: 2px solid var(--color-accent);
}
/* On the home page the frame element itself clips its children, which hid
   its own frame — let it overflow and round the photo instead. */
.site-public .principal-img-frame { overflow: visible; }
.site-public .principal-img-frame img { border-radius: 1.5rem; box-shadow: var(--shadow-lg); }
@media (max-width: 640px) {
  .img-frame::before, .principal-img-frame::before { transform: translate(8px, 8px); }
}


/* ---------------------------------------------------------------- *
   3.10  Call-to-action bands
 * ---------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary-dark) 82%, var(--color-primary)));
}
/* Static diagonal stripes (the old version animated background-position,
   which repainted the whole band every frame). */
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .055) 0 14px, transparent 14px 34px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%);
          mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.cta-band::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8rem; top: -10rem; width: 30rem; height: 30rem; border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 68%);
}
.cta-band-alt { background: linear-gradient(135deg, var(--color-primary-dark), color-mix(in srgb, var(--color-primary-dark) 70%, black)); }
.cta-band > .relative { z-index: 1; }


/* ---------------------------------------------------------------- *
   3.11  Footer
 * ---------------------------------------------------------------- */
.site-public footer { position: relative; }
.site-public footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent);
}
.footer-heading {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.footer-link { display: inline-block; color: rgba(255, 255, 255, .78); transition: color .2s ease, transform .35s var(--ease-out); }
.footer-link:hover { color: var(--color-accent); transform: translateX(4px); }
.social-icon {
  display: grid; place-items: center; height: 2.4rem; width: 2.4rem; border-radius: .7rem;
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: transform .5s var(--ease-spring), background-color .25s ease, color .25s ease;
}
.social-icon:hover { transform: translateY(-3px) scale(1.1); background: var(--color-accent); color: var(--color-primary-dark); }


/* ---------------------------------------------------------------- *
   3.12  Rich text (blog posts, principal letter) — scoped upgrade
 * ---------------------------------------------------------------- */
.site-public .prose-content { line-height: 1.8; }
.site-public .prose-content h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height: 1.25; }
.site-public .prose-content h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.3; }
.site-public .prose-content a { text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s ease; }
.site-public .prose-content a:hover { color: var(--color-primary-dark); }
.site-public .prose-content iframe,
.site-public .prose-content video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 1rem; margin: 1.4em 0; }
.site-public .prose-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.2em; }
.site-public .prose-content th,
.site-public .prose-content td { padding: .6rem .8rem; border: 1px solid var(--hairline); text-align: left; }
.site-public .prose-content hr { border: 0; height: 1px; background: var(--hairline); margin: 2em 0; }
.site-public .prose-content pre { overflow-x: auto; padding: 1rem; border-radius: .8rem; background: var(--color-neutral-bg); font-size: .9rem; }
.site-public .prose-content blockquote { border-left-width: 3px; background: color-mix(in srgb, var(--color-accent-soft) 45%, transparent); border-radius: 0 .8rem .8rem 0; padding: .8em 1em; }


/* ---------------------------------------------------------------- *
   3.13  About page
 * ---------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(92deg, var(--color-accent) 10%, #fff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .82rem; font-weight: 600;
}

/* Mission & vision */
.mission-card { transition: transform .6s var(--ease-spring), box-shadow .45s var(--ease-out); }
.mission-col  { transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mission-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--color-primary-dark) 80%, black); }
  .mission-card:hover .mission-col:first-child { transform: translateX(4px); }
  .mission-card:hover .mission-col:last-child  { transform: translateX(-4px); }
}

/* Story image: slow zoom, badge pops in once, then keeps floating */
.story-img img { transition: transform 1.4s var(--ease-out); }
@media (hover: hover) { .img-frame:hover .story-img img { transform: scale(1.06); } }
.story-badge.story-badge-pop {
  animation: storyBadgePop .85s var(--ease-spring) backwards, floatY 6s ease-in-out .85s infinite;
}
@keyframes storyBadgePop {
  0%   { opacity: 0; translate: 0 16px; scale: .92; }
  100% { opacity: 1; translate: none;   scale: none; }
}

/* Timeline */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 1.1rem; top: .4rem; bottom: .4rem;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--color-accent), var(--color-primary));
  opacity: .55;
}
.timeline-item { position: relative; padding-left: 3.6rem; padding-bottom: 2.4rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; height: 2.3rem; width: 2.3rem; border-radius: 999px;
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  color: var(--color-primary-dark);
  transition: background-color .3s ease, color .3s ease;
}
.timeline-item.in-view .timeline-dot {
  animation: timelinePop .7s var(--ease-spring) backwards;
  background: var(--color-accent); color: var(--color-primary-dark);
}
@keyframes timelinePop { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.timeline-year { font-family: Poppins, sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .08em; color: var(--color-primary); }

/* Leadership cards */
.leader-card { transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out); }
.leader-photo { overflow: hidden; }
.leader-photo img, .leader-photo span { transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .leader-card:hover { transform: translateY(-6px); box-shadow: 0 28px 52px -30px rgba(0, 0, 0, .4); }
  .leader-card:hover .leader-photo img  { transform: scale(1.07); }
  .leader-card:hover .leader-photo span { transform: scale(1.08); }
}
/* Phones can't hover: show the bio as a caption strip instead of hiding it. */
@media (hover: none) {
  .site-public .reveal-parent .reveal-overlay {
    opacity: 1; inset: auto 0 0 0; align-items: flex-end; justify-content: flex-start;
    padding: 2.4rem 1rem .85rem; text-align: left;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-primary-dark) 94%, transparent) 55%, transparent);
  }
  .site-public .reveal-parent .reveal-overlay p { font-size: .76rem; line-height: 1.45; }
}

/* Gallery */
.gallery-item { transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out); }
.gallery-item figcaption { transform: translateY(8px); transition: opacity .3s ease, transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .45); }
  .gallery-item:hover figcaption { transform: none; }
}
@media (hover: none) { .site-public .gallery-item figcaption { opacity: 1; transform: none; } }

/* Partner badges */
.partner-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.4rem; border-radius: 1rem;
  background: #fff; border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  filter: grayscale(1); opacity: .72;
  transition: filter .3s ease, opacity .3s ease, transform .5s var(--ease-spring), box-shadow .3s ease, border-color .3s ease;
}
.partner-badge > :is(i, svg) { color: var(--color-primary); }
@media (hover: hover) and (pointer: fine) {
  .partner-badge:hover {
    filter: none; opacity: 1; transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--color-primary) 55%, transparent);
  }
}


/* ---------------------------------------------------------------- *
   3.14  Contact page
 * ---------------------------------------------------------------- */
.contact-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem; border-radius: 1.25rem;
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.contact-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 26%, transparent); }
  .contact-card:hover::after { transform: scaleX(1); }
  a.contact-card:hover .contact-card-go { opacity: 1; transform: none; }
  .contact-card:hover .contact-icon { transform: rotate(-6deg) scale(1.06); }
}
.contact-icon {
  display: grid; place-items: center; flex-shrink: 0; height: 3rem; width: 3rem; border-radius: .95rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--color-primary) 85%, black);
  transition: transform .6s var(--ease-spring);
}
.contact-value { font-weight: 600; color: var(--color-primary-dark); overflow-wrap: anywhere; }
.contact-sub { font-size: .8rem; color: var(--color-neutral-text); opacity: .62; }
.contact-card-go {
  margin-top: .9rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--color-primary);
  opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .45s var(--ease-out);
}
@media (hover: none) { .contact-card-go { opacity: 1; transform: none; } }

.contact-panel {
  border-radius: 1.5rem; background: #fff;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md);
}

/* Field + icon: a one-column grid. Label = row 1; icon AND input both sit
   in row 2, on top of each other, so the icon is always INSIDE the input
   and centred on it. Every placement is explicit and does not depend on
   any other class being present. */
.contact-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.contact-field > label { grid-row: 1; grid-column: 1; }
.contact-field > :is(i, svg) {
  grid-row: 2; grid-column: 1; z-index: 1;
  align-self: center; justify-self: start; margin-left: .95rem;
  height: 1.05rem; width: 1.05rem; pointer-events: none;
  color: var(--color-primary); opacity: .55; transition: opacity .2s ease;
}
.contact-field > :is(input, textarea),
.site-public .contact-field > :is(input, textarea) { grid-row: 2; grid-column: 1; padding-left: 2.7rem; }
.contact-field--top > :is(i, svg) { align-self: start; margin-top: 1rem; }
.contact-field:focus-within > :is(i, svg) { opacity: 1; }

.hours-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; font-size: .88rem; }
.hours-row + .hours-row { border-top: 1px solid var(--hairline); }
.hours-row span { color: var(--color-neutral-text); opacity: .72; }
.hours-row strong { font-weight: 600; color: var(--color-primary-dark); text-align: right; }

/* FAQ accordion — the plus turns into a cross when open */
.faq-item {
  border-radius: 1.1rem; background: #fff; border: 1px solid var(--hairline);
  overflow: hidden; transition: border-color .3s ease, box-shadow .4s var(--ease-out);
}
.faq-item + .faq-item { margin-top: .75rem; }
.faq-item.is-open { border-color: color-mix(in srgb, var(--color-primary) 32%, transparent); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; text-align: left;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: .98rem; color: var(--color-primary-dark);
  transition: background-color .2s ease;
}
.faq-q:hover { background: var(--color-neutral-bg); }
.faq-q > :is(i, svg) { flex-shrink: 0; height: 1.1rem; width: 1.1rem; color: var(--color-primary); transition: transform .5s var(--ease-spring); }
.faq-item.is-open .faq-q > :is(i, svg) { transform: rotate(135deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.35rem 1.25rem; font-size: .92rem; line-height: 1.7; color: var(--color-neutral-text); opacity: .82; }


/* ---------------------------------------------------------------- *
   3.15  Principal's message
 * ---------------------------------------------------------------- */
.portrait-card {
  position: relative; overflow: hidden; border-radius: 1.6rem;
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-lg);
}
.portrait-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portrait-placeholder { display: grid; place-items: center; aspect-ratio: 3 / 4; color: rgba(255, 255, 255, .9); }
.portrait-badge {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  border-radius: 1.05rem; padding: .85rem 1rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
}
.credential-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.credential-list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; color: var(--color-neutral-text); opacity: .85; }
.credential-list li > :is(i, svg) { flex-shrink: 0; margin-top: .15rem; height: 1rem; width: 1rem; color: var(--color-primary); }

.letter-card {
  position: relative; border-radius: 1.6rem; background: #fff;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md);
  padding: clamp(1.6rem, 4vw, 2.75rem) clamp(1.35rem, 4vw, 2.5rem);
}
.letter-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 1.6rem 1.6rem 0 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.letter-body > p:first-of-type::first-letter {
  float: left; margin: .08em .12em 0 0;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 3.4rem; line-height: .82;
  color: var(--color-primary);
}
.letter-body > p + p { margin-top: 1.15em; }
.pull-quote {
  position: relative; margin: 2rem 0; padding: 1.4rem 1.6rem 1.4rem 1.75rem;
  border-radius: 1.1rem; background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
}
.pull-quote p { font-family: Poppins, sans-serif; font-weight: 600; font-style: italic; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.6; color: var(--color-primary-dark); }
.signature { font-family: Poppins, sans-serif; font-weight: 700; font-style: italic; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); color: var(--color-primary-dark); }

.highlight-tile {
  padding: 1.5rem 1.35rem; border-radius: 1.25rem; text-align: center;
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .highlight-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 26%, transparent); }
}
.highlight-tile .value { font-family: Poppins, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1; color: var(--color-primary-dark); }
.highlight-tile .label { margin-top: .35rem; font-size: .8rem; color: var(--color-neutral-text); opacity: .68; }


/* ---------------------------------------------------------------- *
   3.16  Program pages (markup is Tailwind-heavy; these are the extras)
 * ---------------------------------------------------------------- */
/* The grade picker: long lists scroll instead of running off the screen */
#gradeDropdown { max-height: min(60vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
#gradeDropdown li { transition: background-color .2s ease, padding-left .3s var(--ease-out); }
#gradeDropdown li:hover { padding-left: 1.75rem; }
#gradeSearch { transition: transform .5s var(--ease-spring), box-shadow .3s ease, border-color .2s ease; }
@media (max-width: 640px) { #gradeSearch { font-size: 1rem; padding-block: .9rem; } }


/* ---------------------------------------------------------------- *
   3.17  Fee plan — pricing cards
   `scale` (featured card) and `transform` (hover) are separate
   properties, so both work at the same time.
 * ---------------------------------------------------------------- */
.price-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px)  { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.price-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 2.1rem 1.85rem 2rem; border-radius: 1.5rem;
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease-spring), box-shadow .45s var(--ease-out), border-color .35s ease;
}
.price-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .price-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-primary) 28%, transparent); }
  .price-card:hover::before { transform: scaleX(1); }
  .price-card:hover .price-icon { transform: rotate(-6deg) scale(1.08); background: var(--color-primary); color: #fff; }
  .price-card:hover .price-num { transform: scale(1.05); }
}
.price-card.is-featured {
  padding-top: 2.7rem;
  border-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--color-primary) 65%, transparent);
}
.price-card.is-featured::before { transform: scaleX(1); }
@media (min-width: 1024px) { .price-card.is-featured { scale: 1.045; z-index: 1; } }
.price-ribbon {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: .38rem 1.15rem .42rem; border-radius: 0 0 .85rem .85rem;
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 72%, white));
  color: var(--color-primary-dark);
  font-family: Poppins, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5);
}
.price-head { display: flex; align-items: center; gap: .85rem; }
.price-icon {
  display: grid; place-items: center; flex-shrink: 0; height: 3rem; width: 3rem; border-radius: .95rem;
  background: var(--color-accent-soft); color: var(--color-primary);
  transition: transform .6s var(--ease-spring), background-color .3s ease, color .3s ease;
}
.price-name { font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--color-primary-dark); }
.price-meta { margin-top: .15rem; font-size: .78rem; font-weight: 500; color: var(--color-primary); opacity: .85; }
.price-desc { margin-top: 1rem; font-size: .9rem; line-height: 1.65; color: var(--color-neutral-text); opacity: .78; min-height: 3.3em; }
.price-amount { margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px dashed color-mix(in srgb, var(--color-neutral-text) 18%, transparent); }
.price-amount-label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-text); opacity: .58; }
.price-amount-value { display: flex; align-items: baseline; gap: .28rem; margin-top: .4rem; }
.price-cur { align-self: flex-start; margin-top: .3rem; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.price-num {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 2.35rem; line-height: 1; letter-spacing: -.02em;
  color: var(--color-primary-dark); transform-origin: left bottom; transition: transform .6s var(--ease-spring);
  font-variant-numeric: tabular-nums;
}
.price-amount-note { margin-top: .45rem; font-size: .76rem; color: var(--color-neutral-text); opacity: .6; }
.price-breakdown { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.price-breakdown li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .84rem; color: var(--color-neutral-text); }
.price-breakdown li + li { padding-top: .55rem; border-top: 1px solid var(--hairline); }
.price-breakdown li span { opacity: .72; }
.price-breakdown li strong { font-weight: 600; color: var(--color-primary-dark); }
.price-features { margin-top: 1.35rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; line-height: 1.5; color: var(--color-neutral-text); opacity: .88; }
.price-features li > :is(i, svg) { flex-shrink: 0; margin-top: .18rem; height: .95rem; width: .95rem; color: var(--color-primary); }
.price-cta {
  margin-top: 1.5rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.25rem; border-radius: .9rem;
  font-size: .9rem; font-weight: 600;
  background: var(--color-neutral-bg); color: var(--color-primary-dark);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .5s var(--ease-spring);
}
.price-cta > :is(i, svg) { transition: transform .5s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .price-cta:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--color-primary) 80%, black); transform: translateY(-2px); }
  .price-cta:hover > :is(i, svg) { transform: translateX(4px); }
}
.price-cta:active { transform: scale(.98); transition-duration: .1s; }
.price-card.is-featured .price-cta { background: var(--color-accent); color: var(--color-primary-dark); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .price-card.is-featured .price-cta:hover { background: var(--color-primary); color: #fff; } }
@media (max-width: 480px) {
  .price-card { padding: 1.75rem 1.4rem 1.6rem; }
  .price-card.is-featured { padding-top: 2.5rem; }
  .price-num { font-size: 2rem; }
}


/* ---------------------------------------------------------------- *
   3.18  Apply page
 * ---------------------------------------------------------------- */
.info-panel {
  position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem 1.75rem; color: #fff;
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: var(--shadow-lg);
}
.info-panel::before {
  content: ""; position: absolute; inset: 0; opacity: .6; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1.3px, transparent 1.3px); background-size: 22px 22px;
}
.info-panel > * { position: relative; }
.info-checklist { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.info-checklist li { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.info-checklist li > :is(i, svg) { flex-shrink: 0; margin-top: .15rem; height: 1.15rem; width: 1.15rem; color: var(--color-accent); }
.info-badges { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.info-badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 600; color: #fff;
}
.info-badge > :is(i, svg) { height: .95rem; width: .95rem; color: var(--color-accent); }

.apply-step { position: relative; display: flex; gap: 1.25rem; }
.apply-step:not(:last-child) { padding-bottom: 2.5rem; }
.apply-step-marker { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.apply-step-num {
  display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff;
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-primary) 70%, transparent);
  flex-shrink: 0; z-index: 1;
}
/* Vertical track with a light that travels down it (transform only) */
.apply-step-track {
  position: absolute; top: 2.75rem; bottom: -2.5rem; left: 50%; width: 2px; margin-left: -1px;
  background: color-mix(in srgb, var(--color-neutral-text) 10%, transparent); overflow: hidden;
}
.apply-step-track::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
  animation: trackFlow 3.4s linear infinite;
}
@keyframes trackFlow { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.apply-step-content { flex: 1; min-width: 0; }
@media (max-width: 480px) { .apply-step { gap: .9rem; } .apply-step-num { height: 2.4rem; width: 2.4rem; font-size: .95rem; } .apply-step-track { top: 2.4rem; } }

.field-icon-wrap { position: relative; }
.field-icon-wrap > :is(i, svg) {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  height: 1.05rem; width: 1.05rem; z-index: 1;
  color: var(--color-primary); opacity: .55; pointer-events: none; transition: opacity .2s ease;
}
.site-public .field-icon-wrap .form-input,
.site-public .field-icon-wrap .form-select { padding-left: 2.7rem; }
.field-icon-wrap:focus-within > :is(i, svg) { opacity: 1; }
.field-icon-wrap--top > :is(i, svg) { top: 1.1rem; transform: none; }
.site-public .field-icon-wrap--top .form-textarea { padding-left: 2.7rem; }

.dropzone {
  position: relative; display: block; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--color-neutral-text) 20%, transparent); border-radius: 1.1rem;
  padding: 1.75rem 1.25rem; text-align: center; background: var(--color-neutral-bg);
  transition: border-color .25s ease, background-color .25s ease, transform .5s var(--ease-spring);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-accent-soft); }
.dropzone.is-dragover { transform: scale(1.015); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-icon {
  display: grid; place-items: center; margin: 0 auto .75rem; height: 3rem; width: 3rem; border-radius: .9rem;
  background: var(--color-accent-soft); color: var(--color-primary); transition: transform .6s var(--ease-spring);
}
.dropzone:hover .dropzone-icon, .dropzone.is-dragover .dropzone-icon { transform: scale(1.1) rotate(-5deg); }
.dropzone-filename { margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--color-primary-dark); min-height: 1.1em; overflow-wrap: anywhere; }


/* ---------------------------------------------------------------- *
   3.19  WhatsApp floating button (kept as it was, plus a short ping)
 * ---------------------------------------------------------------- */
.wa-fab-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
  border-radius: 50% !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.2s ease !important;
}
.wa-fab-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1;
  opacity: 0; animation: waPing 2.4s ease-out 2.5s 3;
}
@keyframes waPing { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
.wa-fab-btn:hover { transform: scale(1.08) !important; background-color: #1ebe5b !important; }
.wa-fab-icon {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  fill: #ffffff !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wa-fab-tooltip {
  position: absolute !important;
  right: 72px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #333 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  margin: 0 !important;
}
.wa-fab-btn:hover .wa-fab-tooltip { opacity: 1 !important; }
@media (max-width: 768px) {
  .wa-fab-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    min-width: 54px !important;
  }
  .wa-fab-icon { width: 28px !important; height: 28px !important; max-width: 28px !important; }
  .wa-fab-tooltip { display: none !important; }
}


/* =================================================================
   4. ACCESSIBILITY + PRINT
   ================================================================= */

/* Reduced motion: no animation anywhere on the public site, and every
   reveal is simply shown. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-public *, .site-public *::before, .site-public *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], .hero-animate { opacity: 1 !important; translate: none !important; scale: none !important; }
  .hero-mouse-glow { display: none; }
}

@media print {
  #siteHeader, .wa-fab-btn, #pageLoader, #scroll-progress, .hero-scroll-hint, .hero-mouse-glow { display: none !important; }
  [data-animate], .hero-animate { opacity: 1 !important; animation: none !important; }
  .site-public main { padding-top: 0 !important; }
}


/* =================================================================
   4. EFFECTS LAYER
   Grid + particles, meteor showers, varied card animation, numbering,
   bento gallery, featured testimonial. All scoped to .site-public.

   PERFORMANCE
   • No infinite animation on big layers except the hero meteors.
   • Particles move with the scroll position (scroll-driven, zero idle
     cost) where the browser supports it; static dots elsewhere.
   • Finished reveal animations are released (see 3.1).
   ================================================================= */

/* ---- A. Section canvas: faint grid + a handful of soft particles ---- */
.site-public main > :is(section.section, section.section-tight) {
  --sec-bg: var(--color-base);
  --fade-pos: 50% 0%;
  --grid-line: color-mix(in srgb, var(--color-primary) 7%, transparent);
  --dot-a: color-mix(in srgb, var(--color-accent) 80%, transparent);
  --dot-b: color-mix(in srgb, var(--color-primary) 55%, transparent);
  position: relative;
  isolation: isolate;
  overflow: clip;                       /* clips the layers; sticky still works */
  background-image:
    radial-gradient(ellipse 75% 60% at var(--fade-pos), transparent 0%, var(--sec-bg) 100%),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
}
.site-public main > :is(section.section, section.section-tight).bg-neutral-bg { --sec-bg: var(--color-neutral-bg); }
.site-public main > :is(section.section, section.section-tight):nth-of-type(even) { --fade-pos: 50% 100%; }

.site-public main > :is(section.section, section.section-tight)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 11% 24%, var(--dot-a) 0 2px,   transparent 3.2px),
    radial-gradient(circle at 83% 16%, var(--dot-b) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 92% 66%, var(--dot-a) 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 27% 83%, var(--dot-b) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 54% 38%, var(--dot-a) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 67% 91%, var(--dot-b) 0 2px,   transparent 3.2px),
    radial-gradient(circle at 38% 9%,  var(--dot-b) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 4% 58%,  var(--dot-b) 0 1.2px, transparent 2.2px);
}
.site-public main > :is(section.section, section.section-tight):nth-of-type(even)::before { scale: -1 1; }

/* Particles drift as the section scrolls through the screen */
@supports (animation-timeline: view()) {
  .site-public main > :is(section.section, section.section-tight) { view-timeline: --sec block; }
  @media (min-width: 768px) {
    .site-public main > :is(section.section, section.section-tight)::before {
      animation: particlesParallax linear both;
      animation-timeline: --sec;
      animation-range: cover;
    }
  }
  @keyframes particlesParallax { from { translate: 0 44px; } to { translate: 0 -44px; } }
}

/* Dark sections: grid + particles live on the layer (their background is inline) */
.site-public main > section.section.text-white {
  --grid-line: rgba(255, 255, 255, .07);
  --dot-a: color-mix(in srgb, var(--color-accent) 85%, transparent);
  --dot-b: rgba(255, 255, 255, .6);
}
.site-public main > section.section.text-white::before {
  background-image:
    radial-gradient(circle at 11% 24%, var(--dot-a) 0 2px,   transparent 3.2px),
    radial-gradient(circle at 83% 16%, var(--dot-b) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 92% 66%, var(--dot-a) 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 27% 83%, var(--dot-b) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 54% 38%, var(--dot-a) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 67% 91%, var(--dot-b) 0 2px,   transparent 3.2px),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 100%);
}
/* Hero dot grid: static (it used to animate; not worth the cost) */
.site-public :is(.hero-static, .about-hero) > div.pointer-events-none.absolute.inset-0 { inset: 0; }


/* ---- B. METEOR SHOWERS ----
   One pseudo-element = one layer holding several thin streaks, tilted
   and slid along its own axis. Two layers per hero = a proper shower.
   Each shower crosses the area in about a second, then rests. */
@keyframes meteorShower {
  0%   { transform: rotate(var(--ang, 28deg)) translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(var(--ang, 28deg)) translateX(68%);  opacity: 0; }
}
.site-public :is(.hero-static, .about-hero) .hero-inner::before,
.site-public :is(.hero-static, .about-hero) .hero-inner::after,
.site-public .wa-fab-btn + section.text-white > .relative::before,
.site-public .cta-band > .relative::before,
.site-public main > section.section.text-white::after {
  content: "";
  position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .92)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 40%, white)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .75));
  background-size: 200px 2px, 150px 2px, 240px 1.5px, 130px 2px, 180px 1.5px;
  background-position: 4% 12%, 11% 31%, 2% 49%, 9% 68%, 14% 86%;
  transform: rotate(var(--ang, 28deg));
  opacity: 0;
  animation: meteorShower 2.8s linear -1.2s infinite;
}
/* the second shower: other angle, other streak positions, other rhythm */
.site-public :is(.hero-static, .about-hero) .hero-inner::after {
  --ang: 34deg;
  background-position: 8% 6%, 3% 24%, 13% 44%, 6% 63%, 1% 80%;
  animation-duration: 3.6s; animation-delay: -2.4s;
}
.site-public .wa-fab-btn + section.text-white > .relative::before { animation-duration: 3.2s; animation-delay: -0.8s; }
.site-public .cta-band > .relative::before { animation-duration: 3.4s; animation-delay: -2s; --ang: 24deg; }
.site-public main > section.section.text-white::after { animation-duration: 3s; animation-delay: -1.6s; --ang: 30deg; }
/* phones: keep only the first hero shower */
@media (max-width: 767px) {
  .site-public :is(.hero-static, .about-hero) .hero-inner::after,
  .site-public .wa-fab-btn + section.text-white > .relative::before,
  .site-public .cta-band > .relative::before,
  .site-public main > section.section.text-white::after { display: none; }
}


/* ---- C. Eyebrow pills + title bar ---- */
.site-public .eyebrow {
  gap: .55rem; padding: .38rem .9rem .38rem .75rem; border-radius: 999px;
  font-size: .7rem; letter-spacing: .12em;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base));
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.site-public .eyebrow > :is(i, svg) { display: none; }
.site-public .eyebrow::before {
  content: ""; flex-shrink: 0; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 26%, transparent);
}
.site-public :is(.about-hero, .hero-static, section.text-white, .cta-band) .eyebrow {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18);
}
.site-public .section-title::after {
  content: ""; display: block; width: 3.25rem; height: 4px; border-radius: 4px; margin-top: 1rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.site-public .text-center .section-title::after { margin-inline: auto; }
.site-public :is(section.text-white, .cta-band) .section-title::after { display: none; }


/* ---- D. Cards: 4 entrance animations + 4 hover designs ---- */
@keyframes revealTilt  { from { opacity: 0; translate: 0 38px; rotate: -3deg; scale: .93; } to { opacity: 1; translate: none; rotate: none; scale: none; } }
@keyframes revealZoom  { from { opacity: 0; scale: .8; }                                    to { opacity: 1; scale: none; } }
@keyframes revealSlide { from { opacity: 0; translate: -44px 0; }                           to { opacity: 1; translate: none; } }

.site-public :is(.grid, .price-grid).stagger > [data-animate].in-view:not(.is-featured):nth-child(4n+1) { animation: revealUp    .85s var(--ease-out)    backwards; animation-delay: var(--d); }
.site-public :is(.grid, .price-grid).stagger > [data-animate].in-view:not(.is-featured):nth-child(4n+2) { animation: revealTilt  1s    var(--ease-spring) backwards; animation-delay: var(--d); }
.site-public :is(.grid, .price-grid).stagger > [data-animate].in-view:not(.is-featured):nth-child(4n+3) { animation: revealZoom  .95s  var(--ease-spring) backwards; animation-delay: var(--d); }
.site-public :is(.grid, .price-grid).stagger > [data-animate].in-view:not(.is-featured):nth-child(4n)   { animation: revealSlide .9s   var(--ease-out)    backwards; animation-delay: var(--d); }

.site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n+2) {
  background-image: linear-gradient(to top, color-mix(in srgb, var(--color-accent-soft) 92%, transparent), transparent 88%);
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 0%;
}
.site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n) {
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 62%);
  background-repeat: no-repeat; background-size: 150% 150%; background-position: 170% -80%;
}
.site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile) {
  transition: transform .55s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s ease,
              background-size .7s var(--ease-out), background-position .9s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n+1):hover {
    transform: translateY(-8px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 34%, transparent),
                0 30px 60px -28px color-mix(in srgb, var(--color-primary) 55%, transparent);
  }
  .site-public :is(.card-hover, .value-card):nth-child(4n+1):hover :is(.icon-badge, .value-icon) { transform: rotate(-10deg) scale(1.1); }

  .site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n+2):hover { transform: translateY(-6px); background-size: 100% 100%; }
  .site-public :is(.card-hover, .value-card):nth-child(4n+2):hover :is(.icon-badge, .value-icon) { transform: translateY(-4px) scale(1.14); }

  .site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n+3):hover {
    transform: perspective(900px) rotateX(2.5deg) rotateY(-4deg) translateY(-8px);
  }
  .site-public :is(.card-hover, .value-card):nth-child(4n+3):hover :is(.icon-badge, .value-icon) { transform: scale(1.16); }

  .site-public :is(.card-hover, .value-card, .testimonial-card, .highlight-tile):nth-child(4n):hover {
    transform: translateY(-7px); background-position: 100% 0%;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
  .site-public :is(.card-hover, .value-card):nth-child(4n):hover :is(.icon-badge, .value-icon) { transform: rotate(14deg) scale(1.1); }
}


/* ---- E. Numbering ---- */
.site-public .stagger { counter-reset: stk; }
.site-public .stagger > .value-card { counter-increment: stk; position: relative; }
.site-public .stagger > .value-card::after {
  content: counter(stk, decimal-leading-zero);
  position: absolute; top: 1.1rem; right: 1.35rem; pointer-events: none;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em;
  color: color-mix(in srgb, var(--color-primary) 9%, transparent);
  transition: color .4s ease;
}
@media (hover: hover) { .site-public .stagger > .value-card:hover::after { color: color-mix(in srgb, var(--color-accent) 40%, transparent); } }

.site-public .apart-list { counter-reset: ap; }
.site-public .apart-item { counter-increment: ap; position: relative; }
.site-public .apart-item::after {
  content: counter(ap, decimal-leading-zero);
  position: absolute; right: 1rem; top: 50%; translate: 0 -50%; pointer-events: none;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1;
  color: color-mix(in srgb, var(--color-primary) 8%, transparent); transition: color .4s ease;
}
@media (hover: hover) { .site-public .apart-item:hover::after { color: color-mix(in srgb, var(--color-accent) 45%, transparent); } }
@media (max-width: 480px) { .site-public .apart-item::after { display: none; } }

.site-public .faq-item:first-child { counter-reset: faq; }
.site-public .faq-item { counter-increment: faq; }
.site-public .faq-q::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0; font-family: Poppins, sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .08em;
  color: var(--color-primary); opacity: .5; transition: opacity .3s ease, color .3s ease;
}
.site-public .faq-q > span { flex: 1; }
.site-public .faq-item.is-open .faq-q::before { opacity: 1; color: var(--color-accent); }
.site-public .faq-q > :is(i, svg) {
  box-sizing: content-box; padding: .4rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--hairline);
  transition: transform .5s var(--ease-spring), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.site-public .faq-item.is-open .faq-q > :is(i, svg) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }


/* ---- F. Bento gallery (About) ---- */
.site-public div:has(> .gallery-item) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: .85rem;
}
.site-public .gallery-item { height: 100%; margin: 0; border-radius: 1.4rem; background: var(--color-primary-dark); box-shadow: var(--shadow-sm); }
.site-public .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.site-public .gallery-item figcaption {
  opacity: 1; transform: none; z-index: 1; padding: 3.2rem 1.1rem 1rem;
  font-family: Poppins, sans-serif; font-size: .92rem; font-weight: 600;
  background: linear-gradient(to top, rgba(0, 0, 0, .74), transparent);
}
.site-public .gallery-item:nth-child(6n+1) figcaption { font-size: 1.15rem; padding: 4.5rem 1.4rem 1.3rem; }
.site-public .gallery-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) { .site-public .gallery-item:hover::after { box-shadow: inset 0 0 0 2px var(--color-accent); } }
.site-public .gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.site-public .gallery-item:nth-child(6n)   { grid-column: span 2; }
@media (min-width: 768px) {
  .site-public div:has(> .gallery-item) { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 11.5rem; gap: 1.1rem; }
  .site-public .gallery-item:nth-child(6n+3) { grid-column: span 1; grid-row: span 2; }
  .site-public .gallery-item:nth-child(6n+5) { grid-column: span 2; }
}
@media (min-width: 1280px) { .site-public div:has(> .gallery-item) { grid-auto-rows: 13rem; } }


/* ---- G. Testimonials: dark featured card ---- */
@media (min-width: 1024px) {
  .site-public .testimonial-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-public .testimonial-card:nth-child(1) { grid-row: span 2; }
  .site-public .testimonial-card:nth-child(4) { grid-column: span 2; }
}
.site-public .testimonial-card:nth-child(1) {
  background: linear-gradient(155deg, var(--color-primary-dark), color-mix(in srgb, var(--color-primary-dark) 60%, black));
  border-color: transparent; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: space-between;
}
.site-public .testimonial-card:nth-child(1) p { color: rgba(255, 255, 255, .88); }
.site-public .testimonial-card:nth-child(1) > p { font-size: 1.12rem; line-height: 1.65; }
.site-public .testimonial-card:nth-child(1) .font-heading { color: #fff; }
.site-public .testimonial-card:nth-child(1) div > p:last-child { opacity: .7; }
.site-public .testimonial-card:nth-child(1) .testimonial-avatar { background: var(--color-accent); color: var(--color-primary-dark); }


/* ---- H. Footer grid ---- */
.site-public footer {
  --grid-line: rgba(255, 255, 255, .05);
  isolation: isolate; overflow: clip;
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 100%, transparent 0%, var(--color-primary-dark) 100%),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
}


/* =================================================================
   5. HERO — RESPONSIVE
   The hero decides whether a visitor stays. Goals: headline AND the
   main button are visible on the first screen of a small laptop and a
   small phone; nothing fades or moves out of view while scrolling;
   nothing overlaps the fixed header; very wide screens do not leave
   the content floating in empty space.
   ================================================================= */
.hero-static { min-height: 92vh; min-height: min(92svh, 54rem); }

/* Vertical rhythm follows the screen HEIGHT, not fixed Tailwind steps */
.hero-static .hero-inner {
  padding-top: clamp(6.75rem, 4.5rem + 9vh, 10rem);      /* header is 5rem tall on phones */
  padding-bottom: clamp(4.5rem, 3rem + 6vh, 7.5rem);
  gap: 2rem;
}
.about-hero .hero-inner {
  padding-top: clamp(6.75rem, 4.5rem + 8vh, 9rem);
  padding-bottom: clamp(4.5rem, 3rem + 6vh, 7rem);
}
@media (min-width: 1024px) {                              /* header + top bar = 7.75rem */
  .hero-static .hero-inner { padding-top: clamp(8.5rem, 5.5rem + 10vh, 11.5rem); }
  .about-hero .hero-inner  { padding-top: clamp(8.5rem, 5.5rem + 9vh, 10.5rem); }
}
@media (min-width: 1536px) { .hero-static .hero-inner, .about-hero .hero-inner { max-width: 88rem; } }

.hero-static h1 { font-size: clamp(2.1rem, 1rem + 4.9vw, 4.8rem); }
.hero-static .hero-badge-glow { max-width: 100%; line-height: 1.35; }

@media (max-width: 640px) {
  .hero-static h1 { margin-top: 1rem; line-height: 1.08; }
  .hero-static p  { margin-top: 1rem; font-size: 1.02rem; line-height: 1.6; }
  .hero-static .hero-inner > div:first-child > .flex-wrap { margin-top: 1.5rem; gap: .7rem; }
  .hero-static .hero-trust { margin-top: 1.4rem; }
  .hero-static .btn-cta, .hero-static .btn-outline-white { min-height: 3.2rem; }
  .about-hero .hero-inner > div > .flex-wrap { gap: .7rem; }
}
@media (max-width: 480px) {
  .hero-static .hero-badge-glow { border-radius: 1.1rem; text-align: left; }
  .hero-static .hero-trust > :nth-child(n+4) { display: none; }   /* keep two pills on small phones */
}
/* Short screens (small laptops, phones on their side): never let the
   scroll hint sit on top of the content, and trim the spacing */
@media (max-height: 720px) { .hero-scroll-hint { display: none; } }
@media (max-height: 560px) and (orientation: landscape) {
  .hero-static { min-height: auto; }
  .hero-static .hero-inner { padding-top: 6.5rem; padding-bottom: 3rem; }
  .hero-static h1 { font-size: clamp(1.8rem, 1rem + 3vw, 2.6rem); }
}



/* ===== Dust sits behind everything: light sections become see-through ===== */
body.site-public { background: var(--color-base); }

.site-public main > :is(section.section, section.section-tight):not(.text-white) {
  background-color: transparent;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
}
.site-public main > :is(section.section, section.section-tight).bg-neutral-bg:not(.text-white) {
  background-color: color-mix(in srgb, var(--color-neutral-bg) 55%, transparent);
}
.site-public main { position: relative; z-index: 1; }