/* ============================================================
   SOBAN ATTARI — Complete Stylesheet
   Design reference: zeeshanusmani.com (light/dark alternating)
   Brand accent: gold #F5C518
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* This site has no dark theme — opt out of the OS/browser's automatic
     dark-mode repainting (Android Chrome "Force Dark", Samsung Internet,
     etc.), which otherwise heuristically inverts backgrounds and text and
     is what was making the stats row and page backgrounds flip on some
     devices. */
  color-scheme: only light;

  /* Section backgrounds — alternating light/dark */
  --bg-light:        #ffffff;
  --bg-off-white:    #f7f7f7;
  --bg-dark:         #111111;
  --bg-dark-2:       #1a1a1a;
  --bg-dark-3:       #222222;

  /* Text on light backgrounds */
  --text-dark:       #1a1a1a;
  --text-body:       #4a4a4a;
  --text-muted:      #767676;      /* darkened from #888 for WCAG AA contrast on white (~4.5:1) */

  /* Text on dark backgrounds */
  --text-light:      #ffffff;
  --text-light-muted:#aaaaaa;

  /* Brand accent — Soban gold */
  --accent:          #F5C518;
  --accent-dark:     #d4a800;
  --accent-dim:      rgba(245, 197, 24, 0.12);

  /* Partner brand (NatureOn) */
  --green:           #2D7A2D;
  --green-light:     #5EBF5E;

  /* Borders */
  --border-light:    #e8e8e8;
  --border-dark:     #2a2a2a;

  /* Typography */
  --font-display:    'Space Grotesk', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-urdu:       'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', var(--font-body);

  /* Spacing tokens */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* Transitions */
  --transition: 0.3s ease;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* keep #anchors clear of the fixed navbar */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-body);
  background: var(--bg-light);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-off-white); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-dark-2 h1, .section-dark-2 h2, .section-dark-2 h3, .section-dark-2 h4 {
  color: var(--text-light);
}

h1 { font-size: clamp(48px, 8vw, 96px); }
h2 { font-size: clamp(32px, 5vw, 60px); }
h3 { font-size: clamp(20px, 3vw, 28px); }
h4 { font-size: 20px; }

p { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--text-body); }
.section-dark p, .section-dark-2 p { color: var(--text-light-muted); }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.section-intro { font-size: 18px; color: var(--text-muted); max-width: 600px; line-height: 1.7; }
.section-dark .section-intro, .section-dark-2 .section-intro { color: var(--text-light-muted); }
.section-intro a { color: var(--accent-dark); border-bottom: 1px solid var(--accent); }
.section-intro a:hover { color: var(--text-dark); }
.section-dark .section-intro a:hover, .section-dark-2 .section-intro a:hover { color: #ffffff; }

/* ── Layout ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }

.section-light    { background: var(--bg-light);     padding: var(--space-xl) 0; }
.section-off-white{ background: var(--bg-off-white); padding: var(--space-xl) 0; }
.section-dark     { background: var(--bg-dark);      padding: var(--space-xl) 0; }
.section-dark-2   { background: var(--bg-dark-2);    padding: var(--space-xl) 0; }

.section-header { margin-bottom: var(--space-lg); }
.section-header.centered { text-align: center; display: flex; flex-direction: column; align-items: center; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section-light, .section-off-white, .section-dark, .section-dark-2 { padding: var(--space-lg) 0; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; line-height: inherit;
  padding: 14px 32px; border: none; cursor: pointer;
  transition: opacity var(--transition), transform var(--transition), border-color var(--transition), color var(--transition);
  border-radius: 2px;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--accent); color: #111111; }
.btn-outline { background: transparent; color: var(--text-light); border: 1.5px solid rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--text-light); opacity: 1; }
.btn-outline-gold { background: transparent; color: var(--accent-dark); border: 1.5px solid var(--accent); }
.btn-outline-gold:hover { background: var(--accent); color: #111; opacity: 1; }
.btn-outline-dark { background: transparent; color: var(--text-dark); border: 1.5px solid rgba(15,15,15,0.3); }
.btn-outline-dark:hover { border-color: var(--text-dark); opacity: 1; }
.btn-dark { background: var(--bg-dark); color: var(--text-light); }
.btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ── Navbar ── */
#navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: 76px;
  display: flex; align-items: center; background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
/* Legibility scrim for the transparent (top-of-page) state so nav links stay
   readable even over a light hero. Fades out once the bar turns solid. */
#navbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
  transition: opacity var(--transition);
}
#navbar.scrolled::before { opacity: 0; }
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--border-light);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px);
}

.site-logo { display: flex; align-items: center; }
.logo-mark { display: flex; flex-direction: column; border-left: 2px solid var(--accent); padding-left: 10px; line-height: 1.15; }
.logo-line-1 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 5px; color: var(--text-light); transition: color var(--transition); }
.logo-line-2 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 5px; color: var(--accent); }
#navbar.scrolled .logo-line-1 { color: var(--text-dark); }

.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.4vw, 34px); list-style: none; }
.nav-links > a, .nav-dropdown-toggle {
  font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.6px;
  color: rgba(255,255,255,0.85); transition: color var(--transition); position: relative;
  background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.nav-links > a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--accent); transition: width var(--transition);
}
.nav-links > a:hover,
.nav-links > a:focus-visible { color: #ffffff; }
.nav-links > a:hover::after,
.nav-links > a:focus-visible::after { width: 100%; }
.nav-links > a:focus-visible,
.nav-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
.nav-links > a.active { color: var(--accent); font-weight: 700; }
.nav-links > a.active::after { width: 100%; }
.nav-dropdown-toggle:hover { color: #fff; }
.nav-dropdown-toggle[aria-expanded="true"] { color: var(--accent); }
.nav-dropdown-arrow { width: 9px; height: 9px; opacity: 0.7; transition: transform var(--transition); }
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow { transform: rotate(180deg); }

#navbar.scrolled .nav-links > a,
#navbar.scrolled .nav-dropdown-toggle { color: var(--text-body); }
#navbar.scrolled .nav-links > a:hover,
#navbar.scrolled .nav-links > a:focus-visible,
#navbar.scrolled .nav-dropdown-toggle:hover { color: var(--text-dark); }

/* =========================================================
   UPDATES — PREMIUM LIVE INDICATOR
   No box • No border • No circles around the link
   ========================================================= */

#navbar .nav-links > a[data-nav="updates"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #fff4b0;
    font-weight: 700;
    padding: 6px 3px;
    background: transparent;
    box-shadow: none;

    overflow: visible;

    /* Keep the text itself subtly illuminated */
    text-shadow:
        0 0 8px rgba(245, 197, 24, 0.48),
        0 0 20px rgba(245, 197, 24, 0.22);

    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#navbar .nav-links > a[data-nav="updates"]::after {
    display: none;
}


/* =========================================================
   THE SHINING LIGHT
   A prominent but elegant reflection moving across
   the complete "Updates" text
   ========================================================= */

#navbar .nav-links > a[data-nav="updates"] .updates-shine {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

/* Main light beam */

#navbar .nav-links > a[data-nav="updates"] .updates-shine::after {
    content: "";

    position: absolute;

    top: -70%;
    left: -65%;

    width: 58%;
    height: 240%;

    transform: rotate(18deg);

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 239, 145, 0.12) 12%,
        rgba(255, 245, 175, 0.70) 34%,
        rgba(255, 255, 235, 1) 50%,
        rgba(255, 245, 175, 0.70) 66%,
        rgba(255, 239, 145, 0.12) 88%,
        transparent 100%
    );

    filter: blur(0.5px);

    opacity: 0.22;

    animation: updatesShine 2.6s linear infinite;
}

/* =========================================================
   LIVE DOT — pulsing indicator next to "Updates", every page
   (matches the .updates-live-dot pulse on the Updates page itself)
   ========================================================= */

#navbar .nav-links > a[data-nav="updates"] .updates-dot {
    display: inline-block;
    position: relative;

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #f5c518;

    box-shadow:
        0 0 5px rgba(245, 197, 24, 0.95),
        0 0 10px rgba(245, 197, 24, 0.55);

    z-index: 3;
}
#navbar .nav-links > a[data-nav="updates"] .updates-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #f5c518;
    opacity: 0.6;
    animation: updatesDotPulse 1.8s ease-out infinite;
}
@keyframes updatesDotPulse {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #navbar .nav-links > a[data-nav="updates"] .updates-dot::after { animation: none; opacity: 0.35; }
}


/* =========================================================
   SHINE ANIMATION
   ========================================================= */

@keyframes updatesShine {

    0% {
        left: -65%;
        opacity: 0.2;
    }

    35% {
        opacity: 0.7;
    }

    50% {
        left: 32%;
        opacity: 1;
    }

    65% {
        left: 130%;
        opacity: 0.7;
    }

    100% {
        left: 130%;
        opacity: 0.2;
    }
}


/* =========================================================
   HOVER
   Just slightly brighter
   ========================================================= */

#navbar .nav-links > a[data-nav="updates"]:hover {

    color: #ffffff;
    text-shadow:
        0 0 8px rgba(245, 197, 24, 0.55),
        0 0 18px rgba(245, 197, 24, 0.28);
}

/* =========================================================
   SCROLLED NAVBAR
   ========================================================= */

#navbar.scrolled .nav-links > a[data-nav="updates"] {
    color: var(--accent);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #navbar .nav-links > a[data-nav="updates"] .updates-shine::after {
        animation: none !important;
    }
}





.nav-cta {
  background: var(--accent); color: #111111 !important; font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 2px;
  transition: opacity var(--transition) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { opacity: 0.85; color: #111111 !important; }
/* win over `.nav-links > a { background: none }` (higher specificity) so the CTA keeps its gold pill */
.nav-links > a.nav-cta { background: var(--accent); }

/* ── Hamburger — 44px tap target; morphs into an X while the drawer is open ── */
.nav-hamburger {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; border-radius: 50%;
  -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease;
}
.nav-hamburger span {
  position: absolute; left: 11px; top: 21px; display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text-light);
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.2s ease, background var(--transition);
}
.nav-hamburger span:nth-child(1) { transform: translateY(-7px); }
.nav-hamburger span:nth-child(3) { transform: translate(-4px, 7px) scaleX(0.64); }
.nav-hamburger:hover span:nth-child(3) { transform: translate(0, 7px) scaleX(1); }
.nav-hamburger:active { transform: scale(0.9); }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
#navbar.scrolled .nav-hamburger span { background: var(--text-dark); }
.nav-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Mobile drawer ── */
.nav-mobile-menu {
  visibility: hidden; pointer-events: none; transform: translateX(100%);
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0;
  width: min(88vw, 400px); z-index: 1002;
  padding: 0 clamp(20px, 6vw, 28px) max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(245, 197, 24, 0.09), transparent 62%),
    linear-gradient(165deg, #161616 0%, #0a0a0a 100%);
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -24px 0 60px -12px rgba(0, 0, 0, 0.55), -1px 0 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1), visibility 0.5s ease;
}
.nav-mobile-menu.open { visibility: visible; pointer-events: auto; transform: translateX(0); }
.nav-mobile-backdrop {
  visibility: hidden; opacity: 0; pointer-events: none; position: fixed; inset: 0; z-index: 1001;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav-mobile-backdrop.open { visibility: visible; opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* Header — same height as the navbar so the logo sits where it did */
.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  height: 76px; border-bottom: 1px solid var(--border-dark);
}
.nav-mobile-header .site-logo { border-radius: 2px; }
.nav-mobile-header .site-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.nav-mobile-header .logo-line-1 { color: var(--text-light); }
.nav-mobile-close {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -4px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%;
  background: rgba(255, 255, 255, 0.04); color: var(--text-light); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.nav-mobile-close svg { width: 18px; height: 18px; }
.nav-mobile-close:hover,
.nav-mobile-close:focus-visible { border-color: var(--accent); background: var(--accent); color: #111111; transform: rotate(90deg); outline: none; }
.nav-mobile-close:active { transform: rotate(90deg) scale(0.9); }

/* Links — numbered rows with a trailing arrow */
.nav-mobile-links { display: flex; flex-direction: column; padding: 8px 0 28px; }
.nav-mobile-links a {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 4px;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 5.6vw, 24px);
  letter-spacing: -0.01em; line-height: 1.2; color: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0; transform: translateX(28px);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition), opacity 0.4s ease, transform 0.55s cubic-bezier(.22, 1, .36, 1);
}
.nm-index {
  min-width: 20px; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 1px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.32);
  transition: color var(--transition);
}
.nm-label { flex: 1; display: inline-flex; align-items: center; gap: 10px; }
.nm-arrow {
  width: 18px; height: 18px; flex-shrink: 0; opacity: 0.3;
  transition: transform var(--transition), opacity var(--transition), color var(--transition);
}
.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible { color: var(--text-light); }
.nav-mobile-links a:hover .nm-arrow,
.nav-mobile-links a:focus-visible .nm-arrow { opacity: 1; color: var(--accent); transform: translate(2px, -2px); }
.nav-mobile-links a:active { background: rgba(255, 255, 255, 0.04); }
.nav-mobile-links a:active .nm-arrow { transform: translate(4px, -4px); }
.nav-mobile-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.nav-mobile-links a.active { color: var(--accent); }
.nav-mobile-links a.active .nm-index { color: var(--accent); }
.nav-mobile-links a.active .nm-arrow { opacity: 1; color: var(--accent); }

/* "Updates" live dot — same pulse as the desktop nav */
.nm-live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.nm-live::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent);
  opacity: 0.6; animation: updatesDotPulse 1.8s ease-out infinite;
}

/* Staggered entrance */
.nav-mobile-menu.open .nav-mobile-links a { opacity: 1; transform: translateX(0); }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(1) { transition-delay: 0.08s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(2) { transition-delay: 0.12s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(3) { transition-delay: 0.16s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(4) { transition-delay: 0.20s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(5) { transition-delay: 0.24s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(6) { transition-delay: 0.28s; }
.nav-mobile-menu.open .nav-mobile-links a:nth-child(7) { transition-delay: 0.32s; }
/* after the entrance, hover/tap colour changes respond instantly */
.nav-mobile-menu.open .nav-mobile-links a:hover,
.nav-mobile-menu.open .nav-mobile-links a:active { transition-delay: 0s; }

/* Footer — pinned CTA, socials, email */
.nav-mobile-footer {
  margin-top: auto; display: flex; flex-direction: column; gap: 20px; padding-top: 8px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.22, 1, .36, 1);
}
.nav-mobile-menu.open .nav-mobile-footer { opacity: 1; transform: translateY(0); transition-delay: 0.36s; }
.nav-mobile-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  border-radius: 2px; background: var(--accent); color: #111111;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 14px 32px -14px rgba(245, 197, 24, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), transform 0.2s ease;
}
.nav-mobile-cta .nm-arrow { width: 16px; height: 16px; opacity: 1; }
.nav-mobile-cta:hover { background: var(--accent-dark); }
.nav-mobile-cta:hover .nm-arrow { transform: translate(2px, -2px); }
.nav-mobile-cta:active { transform: scale(0.98); }
.nav-mobile-cta:focus-visible { outline: 2px solid var(--text-light); outline-offset: 3px; }
.nav-mobile-socials { display: flex; justify-content: space-between; gap: 8px; }
.nav-mobile-socials a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-dark); color: var(--text-light-muted);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.2s ease;
}
.nav-mobile-socials svg { width: 16px; height: 16px; fill: currentColor; }
.nav-mobile-socials a:hover,
.nav-mobile-socials a:focus-visible { background: var(--accent); border-color: var(--accent); color: #111111; outline: none; }
.nav-mobile-socials a:active { transform: scale(0.92); }
.nav-mobile-email {
  align-self: center; padding: 4px 2px; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.3px; color: var(--text-light-muted); transition: color var(--transition);
}
.nav-mobile-email:hover,
.nav-mobile-email:focus-visible { color: var(--accent); outline: none; }
.mobile-events-title { margin-top: 16px; }

/* Dropdown — What We Offer */
.nav-dropdown-wrapper { position: relative; }
.nav-dropdown-wrapper { display: none; }
.nav-mobile-menu .mobile-group-title,
.nav-mobile-menu a.mobile-sub { display: none; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12); padding: 18px 0; z-index: 100;
}
.nav-dropdown-menu.dropdown-open { display: block; }
.nav-dropdown-mega { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 4px 28px; padding: 0 28px; }
.nav-dropdown-group-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); padding: 0 0 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 6px; }
.nav-dropdown-item { display: block; padding: 9px 0; font-size: 13px; color: var(--text-dark); }
.nav-dropdown-item:hover { color: var(--accent-dark); }
.events-dropdown-menu { min-width: 680px; }
.events-dropdown-menu .nav-dropdown-mega { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.events-dropdown-menu .nav-dropdown-item { padding: 8px 0; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 768px) {
  /* solid instead of blur on small screens (cheaper, avoids scroll jank) */
  #navbar.scrolled { background: rgba(255, 255, 255, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 480px) {
  #navbar { height: 68px; }
  .nav-inner { padding: 0 18px; }
  .logo-mark { padding-left: 8px; }
  .logo-line-1, .logo-line-2 { font-size: 12px; letter-spacing: 4px; }
  .nav-mobile-header { height: 68px; }
  .nav-mobile-links a { min-height: 54px; }
}
/* short phones (landscape / small iPhones): keep everything on one screen */
@media (max-height: 640px) {
  .nav-mobile-links { padding-bottom: 20px; }
  .nav-mobile-links a { min-height: 46px; font-size: 19px; }
  .nav-mobile-footer { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-menu,
  .nav-mobile-backdrop,
  .nav-mobile-links a,
  .nav-mobile-footer,
  .nav-mobile-close,
  .nav-hamburger span { transition: none; }
  .nm-live::after { animation: none; opacity: 0.35; }
}

/* ── Hero ── */
#hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--bg-dark);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* centre-weighted scrim: darker behind the text block + a firm bottom fade */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0.88) 100%);
}
.hero-content {
  position: relative; z-index: 2; text-align: center; padding: 0 var(--space-md); max-width: 920px;
  display: flex; flex-direction: column; align-items: center;
}
/* staggered entrance — label, headline, text, chip, buttons */
.hero-step { opacity: 0; transform: translateY(24px); animation: heroEntrance 0.9s cubic-bezier(.22, 1, .36, 1) forwards; }
.hero-step:nth-child(1) { animation-delay: 0.25s; }
.hero-step:nth-child(2) { animation-delay: 0s; } /* headline is the LCP element — no hold-back */
.hero-step:nth-child(3) { animation-delay: 0.45s; }
.hero-step:nth-child(4) { animation-delay: 0.55s; }
.hero-step:nth-child(5) { animation-delay: 0.65s; }
@keyframes heroEntrance { to { opacity: 1; transform: translateY(0); } }
/* headline slides in without fading: Chrome ignores text painted at opacity 0 for
   LCP, so a fade-in pushed LCP to the second cycling phrase (~4 s) */
.hero-headline.hero-step { opacity: 1; animation-name: heroHeadlineIn; }
@keyframes heroHeadlineIn { from { transform: translateY(24px); } to { transform: translateY(0); } }
/* one line on every screen: size, spacing and padding all scale with width;
   a light see-through fill so the video stays visible behind it */
.hero-label {
  display: inline-block; max-width: 100%; white-space: nowrap;
  border: 1px solid rgba(245, 197, 24, 0.5); border-radius: 100px; color: var(--accent);
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  font-size: clamp(8px, 2.5vw, 11px); letter-spacing: clamp(0.5px, 0.42vw, 3px);
  padding: clamp(6px, 1.6vw, 8px) clamp(10px, 3vw, 20px); margin-bottom: var(--space-md);
  background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* fixed two-line box so the cycling phrases never push the content below */
.hero-headline {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 8.4vw, 88px);
  color: var(--text-light); line-height: 1.0; letter-spacing: -0.03em; margin-bottom: var(--space-md);
  width: 100%; min-height: 2em; display: flex; align-items: center; justify-content: center;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero-cycle-text { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.hero-cycle-text.visible { opacity: 1; transform: translateY(0); }
.hero-sub-short { display: none; }
.hero-subtext {
  font-size: 18px; color: rgba(255, 255, 255, 0.88); max-width: 560px; margin: 0 auto 28px; line-height: 1.7;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.btn-live-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.btn-live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent);
  animation: updatesDotPulse 1.8s ease-out infinite;
}
.btn-live-dot { background: #111111; }
.btn-live-dot::after { border-color: #111111; }

.hero-actions { justify-content: center; align-items: center; gap: 14px; }

/* primary CTA — live dot, count badge, arrow, glow + periodic shine */
.btn-live {
  position: relative; overflow: hidden; isolation: isolate;
  gap: 10px; padding: 13px 20px 13px 18px; border-radius: 6px; font-size: 12px; letter-spacing: 1.2px;
  box-shadow: 0 14px 34px -12px rgba(245, 197, 24, 0.75), 0 0 0 1px rgba(245, 197, 24, 0.4);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-live::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: btnShine 4.2s ease-in-out infinite 1.6s;
}
@keyframes btnShine {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}
.btn-live-arrow { width: 15px; height: 15px; transition: transform var(--transition); }
.btn-live:hover { opacity: 1; transform: translateY(-2px); background: #ffd23a; box-shadow: 0 18px 40px -12px rgba(245, 197, 24, 0.9), 0 0 0 1px rgba(245, 197, 24, 0.6); }
.btn-live:hover .btn-live-arrow { transform: translateX(4px); }
.btn-live:active { transform: translateY(0) scale(0.98); }
.btn-live:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* secondary — quiet text button so the primary CTA leads */
.btn-hero-ghost {
  background: transparent; color: rgba(255, 255, 255, 0.9); padding: 13px 16px; font-size: 12px; letter-spacing: 1.2px;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.btn-hero-ghost:hover { opacity: 1; color: #ffffff; text-decoration-color: var(--accent); }
.btn-hero-ghost:active { transform: translateY(0); opacity: 0.8; }
.btn-hero-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* slim scroll cue, bottom-left so it never sits on the video's own caption */
.hero-scroll-indicator {
  position: absolute; left: clamp(20px, 4vw, 48px); bottom: 36px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, 0.6); transition: color var(--transition);
}
.hero-scroll-text { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; writing-mode: vertical-rl; }
.hero-scroll-line { position: relative; width: 1px; height: 48px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(-100%); animation: scrollLine 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.hero-scroll-indicator:hover, .hero-scroll-indicator:focus-visible { color: var(--accent); outline: none; }

/* Video loader — shown over the poster until the first frame plays, and again
   if playback stalls to buffer (built by main.js) */
.video-loader {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
.video-loader.is-active { opacity: 1; }
.video-loader-chip {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 36px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: 100px;
  background: rgba(10, 10, 10, 0.45); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.video-loader-ring {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(245, 197, 24, 0.25); border-top-color: var(--accent);
  animation: videoLoaderSpin 0.8s linear infinite;
}
@keyframes videoLoaderSpin { to { transform: rotate(360deg); } }
/* slim indeterminate bar along the bottom edge of the hero */
.video-loader-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden;
  background: rgba(245, 197, 24, 0.14);
}
.video-loader-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, #ffe27a 50%, var(--accent) 65%, transparent);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.8);
  transform: translateX(-100%);
  animation: videoLoaderSlide 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes videoLoaderSlide { to { transform: translateX(250%); } }
@media (max-width: 768px) {
  /* copy is anchored to the bottom on phones — keep the chip up top, clear of it */
  .video-loader-chip { top: 84px; bottom: auto; right: 16px; padding: 7px 13px 7px 10px; font-size: 9.5px; letter-spacing: 1.5px; }
  .video-loader-ring { width: 12px; height: 12px; }
}

/* Image skeletons — shimmer in an image's box until it loads (main.js) */
:where(.img-skeleton-host) { position: relative; }
.img-skeleton {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
  background: #ececec;
  transition: opacity 0.5s ease;
}
.img-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: imgShimmer 1.5s ease-in-out infinite;
}
.img-skeleton-dark { background: #1e1e1e; }
.img-skeleton-dark::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 50%, transparent 80%); }
.img-skeleton.is-done { opacity: 0; }
@keyframes imgShimmer { to { transform: translateX(100%); } }
/* fades from transparent to the image's own opacity, then lets go */
.img-reveal { animation: imgReveal 0.55s ease backwards; }
@keyframes imgReveal { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .video-loader-ring, .video-loader-bar::after, .img-skeleton::after { animation: none; }
  .img-reveal { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-step { animation: none; opacity: 1; transform: none; }
  .btn-live::after, .hero-scroll-line::after, .btn-live-dot::after { animation: none; }
}

/* Phones & small tablets: cinematic layout. The video crops to its centre on
   a tall screen, which puts the speaker right behind the text — so the copy is
   anchored to the bottom over a deep fade, and the top of the frame (speaker +
   audience) stays clear and visible. */
@media (max-width: 768px) {
  .hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* zoom from the top: pushes the video's burned-in caption (bottom ~15%)
       off-screen and brings the speaker a little closer */
    transform: scale(1.18);
    transform-origin: 50% 0%;
  }
  #hero {
    align-items: flex-end;
    min-height: 100svh;
    padding: 96px 0 max(36px, calc(env(safe-area-inset-bottom) + 24px));
    background-image: url('brand_assets/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.05) 16%,
      rgba(0, 0, 0, 0.05) 44%,
      rgba(0, 0, 0, 0.45) 60%,
      rgba(0, 0, 0, 0.7) 78%,
      rgba(0, 0, 0, 0.8) 100%);
  }
  .hero-content {
    width: min(100%, 600px);
    padding: 0 clamp(20px, 6vw, 40px);
  }
  .hero-label {
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .hero-headline {
    font-size: clamp(36px, 10vw, 60px);
    line-height: 1.02;
    margin-bottom: 14px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .hero-subtext {
    max-width: 34ch;
    font-size: clamp(15px, 2.6vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 22px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
  }
  .hero-sub-long { display: none; }
  .hero-sub-short { display: inline; }
  .hero-actions { gap: 6px; }
  .hero-content .btn-live { padding: 13px 18px; font-size: 12px; letter-spacing: 1px; }
  .hero-scroll-indicator { display: none; }
}
/* short phones: start the fade higher so the text never sits on bright video */
@media (max-width: 768px) and (max-height: 700px) {
  .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.06) 16%,
      rgba(0, 0, 0, 0.1) 36%,
      rgba(0, 0, 0, 0.5) 54%,
      rgba(0, 0, 0, 0.75) 76%,
      rgba(0, 0, 0, 0.82) 100%);
  }
  .hero-headline { font-size: clamp(34px, 9.6vw, 44px); }
  .hero-subtext { font-size: 14.5px; margin-bottom: 20px; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  #hero {
    min-height: 760px;
    padding: 96px 0 72px;
  }
  .hero-content {
    width: min(100%, 760px);
    padding: 0 32px;
  }
  .hero-headline {
    font-size: clamp(54px, 8.5vw, 78px);
  }
  .hero-subtext {
    font-size: 17px;
    max-width: 580px;
  }
}

@media (max-width: 420px) {
  .hero-label {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-content .btn-group {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }
  .hero-content .btn { justify-content: center; }
  .hero-content .btn-hero-ghost { padding: 10px 16px; }
}

/* phones held sideways: short and wide — centre everything and tighten */
@media (orientation: landscape) and (max-height: 520px) {
  #hero { align-items: center; min-height: 100svh; padding: 84px 0 32px; }
  .hero-overlay {
    background:
      radial-gradient(ellipse 70% 70% at 50% 55%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.94) 100%);
  }
  .hero-label { margin-bottom: 10px; }
  .hero-headline { font-size: clamp(30px, 6vw, 42px); margin-bottom: 10px; }
  .hero-subtext { max-width: 620px; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
  .hero-content .btn-group { flex-direction: row; }
  .hero-scroll-indicator { display: none; }
}

/* ── Purpose bar (gold accent strip) ── */
.purpose-bar { background: var(--accent); padding: 14px 0; }
.purpose-bar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.purpose-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #111; opacity: 0.7; }
.purpose-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 21px); letter-spacing: 0.5px; color: #111; text-align: center; }
.purpose-divider { width: 1px; height: 18px; background: rgba(0,0,0,0.3); }

/* ── Ticker ── */
#ticker { background: var(--bg-dark-2); border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: ticker-scroll 30s linear infinite; }
.ticker-track span { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); padding: 0 var(--space-md); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Platform badges (light trust strip) ── */
#platform-badges { background: var(--bg-off-white); border-bottom: 1px solid var(--border-light); padding: 18px 0; }
.badge-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.badge-trust-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.badge-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-body); }
.badge-item svg { fill: var(--text-muted); width: 18px; height: 18px; }
.badge-divider { width: 1px; height: 16px; background: var(--border-light); }
.badge-total { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent-dark); margin-left: auto; }

/* ── Quote strip — LIGHT ── */
#quote-strip { background: var(--bg-light); padding: var(--space-xl) 0; border-bottom: 1px solid var(--border-light); }
.quote-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--text-dark); line-height: 1.4; max-width: 820px; margin: 0 auto; text-align: center; }
.quote-text em { color: var(--accent-dark); font-style: normal; }
.quote-author { text-align: center; margin-top: var(--space-md); font-family: var(--font-body); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--text-muted); }

/* ── Stats — Prominent & Elegant ── */
#stats { background: var(--bg-light); padding: var(--space-xl) 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); position: relative; overflow: hidden; }
#stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(245,197,24,0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 50%, rgba(245,197,24,0.03) 0%, transparent 70%); pointer-events: none; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; z-index: 1; }
.stat-item { min-width: 0; text-align: center; padding: var(--space-lg) var(--space-md); border-right: 1px solid var(--border-light); position: relative; transition: background 0.3s ease; }
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(245,197,24,0.03); }
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; }
.stat-item:hover::after { width: 40px; }
.stat-number { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; display: block; margin-bottom: 10px; -webkit-font-smoothing: antialiased; background: linear-gradient(135deg, #1a1a1a 60%, rgba(245,197,24,0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-label { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); display: block; line-height: 1.4; }
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-item:nth-child(3) { border-right: none; }
  .stat-item:nth-child(4) { border-top: 1px solid var(--border-light); }
  .stat-item:nth-child(5) { border-top: 1px solid var(--border-light); border-right: none; grid-column: 2; }
}
@media (max-width: 640px) {
  #stats { padding: var(--space-lg) 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border-light); padding: 24px 10px; }
  .stat-number { font-size: clamp(29px, 9.5vw, 48px); letter-spacing: -0.045em; white-space: nowrap; }
  .stat-label { font-size: 10px; letter-spacing: 1.8px; }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--border-light); }
  .stat-item:nth-child(5) { grid-column: auto; }
  .stat-item:last-child { grid-column: 1 / -1; border-right: none; border-bottom: none; }
}

@media (max-width: 360px) {
  .stat-item { padding-left: 6px; padding-right: 6px; }
  .stat-number { font-size: 28px; }
  .stat-label { font-size: 9px; letter-spacing: 1.4px; }
}

/* ── About — LIGHT ── */
#about { background: var(--bg-light); padding: var(--space-2xl) 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.about-image-wrap { position: relative; }
.about-image-wrap img { width: 100%; height: 600px; object-fit: cover; object-position: top; border: 1px solid var(--border-light); }
.about-badge { position: absolute; bottom: 24px; left: -20px; background: var(--accent); padding: 18px 24px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.about-badge .num { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: #111; }
.about-badge .lbl { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.6); margin-top: 4px; }
.about-text h2 { color: var(--text-dark); margin-bottom: var(--space-md); }
.about-text p { color: var(--text-body); margin-bottom: var(--space-md); }
.about-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-md); }
.about-role { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--border-light); color: var(--text-dark); border-radius: 2px; }
.about-pullquote { border-left: 3px solid var(--accent); padding-left: var(--space-md); margin: var(--space-lg) 0; }
.about-pullquote p { font-size: 18px; font-style: italic; color: var(--text-dark); font-weight: 500; }
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-image-wrap { order: 1; }
  .about-text { order: 2; }
  .about-image-wrap img { height: 420px; }
  .about-badge { left: 16px; bottom: 16px; }
}

/* ── What We Offer — OFF-WHITE ── */
#what-we-offer { background: var(--bg-off-white); padding: var(--space-2xl) 0; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.offer-card { background: var(--bg-light); border: 1px solid var(--border-light); padding: var(--space-lg) var(--space-md); position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.offer-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.offer-card-number { font-family: var(--font-display); font-weight: 700; font-size: 64px; color: var(--text-dark); opacity: 0.06; position: absolute; top: -10px; right: 16px; line-height: 1; user-select: none; }
.offer-card-tag { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-xs); display: block; }
.offer-card h3 { font-size: 20px; color: var(--text-dark); margin-bottom: 10px; }
.offer-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.offer-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--transition); }
.offer-card:hover::after { width: 100%; }

/* ── Social Platforms — DARK ── */
#social-platforms { background: var(--bg-dark); padding: var(--space-2xl) 0; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.social-card { background: var(--bg-dark-2); border: 1px solid var(--border-dark); padding: var(--space-lg) var(--space-md); text-align: center; transition: border-color var(--transition), transform var(--transition); border-radius: 4px; display: block; }
.social-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.social-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button.social-card { cursor: pointer; font: inherit; appearance: none; -webkit-appearance: none; width: 100%; }
.social-card-icon { width: 40px; height: 40px; margin: 0 auto var(--space-sm); display: flex; align-items: center; justify-content: center; }
.social-card-icon svg { width: 40px; height: 40px; display: block; }
.social-card-count { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--text-light); }
.social-card-name { font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light-muted); margin-top: var(--space-xs); }
.social-card.total { background: var(--accent); border-color: var(--accent); }
.social-card.total .social-card-count { color: #111; }
.social-card.total .social-card-name { color: rgba(0,0,0,0.6); }
@media (max-width: 1024px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .social-grid { grid-template-columns: 1fr; } }


/* ── Institutions Marquee — LIGHT ── */
#institutions { background: var(--bg-light); padding: var(--space-xl) 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); overflow: hidden; }
.marquee-row { display: flex; overflow: hidden; margin-bottom: var(--space-sm); }
.marquee-track { display: inline-flex; gap: var(--space-md); animation: marquee-left 26s linear infinite; padding-right: var(--space-md); }
.marquee-track-reverse { display: inline-flex; gap: var(--space-md); animation: marquee-right 26s linear infinite; padding-right: var(--space-md); }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee-item { background: var(--bg-off-white); border: 1px solid var(--border-light); padding: 12px 24px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text-dark); white-space: nowrap; border-radius: 2px; transition: border-color var(--transition), color var(--transition); }
.marquee-item:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ── Carousels (Books / Courses auto-scroll) ── */
.carousel-outer { overflow: hidden; width: 100%; position: relative; margin-top: var(--space-lg); }
.carousel-track { display: flex; gap: var(--space-md); width: max-content; animation: carousel-scroll 45s linear infinite; padding: 4px 0 12px; }
.carousel-track.slow { animation-duration: 55s; }
.carousel-track:hover { animation-play-state: paused; }
@keyframes carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Books — OFF-WHITE ── */
#books { background: var(--bg-off-white); padding: var(--space-2xl) 0; }
.book-card { flex: 0 0 220px; width: 220px; background: var(--bg-light); border: 1px solid var(--border-light); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.book-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.book-cover { aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; padding: 26px 22px; text-align: center; position: relative; overflow: hidden; }
.book-cover-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; color: #fff; position: relative; z-index: 1; }
.book-cover-author { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.7); }
.book-card-body { padding: var(--space-md); }
.book-card-tag { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); display: block; margin-bottom: 6px; }
.book-card-body h4 { font-size: 16px; color: var(--text-dark); font-weight: 700; }

/* ── Courses — LIGHT ── */
#courses { background: var(--bg-light); padding: var(--space-2xl) 0; }
.course-card { flex: 0 0 360px; width: 360px; background: var(--bg-off-white); border: 1px solid var(--border-light); padding: var(--space-lg) var(--space-md); position: relative; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.course-card:hover { border-color: var(--accent); box-shadow: 0 16px 48px rgba(245,197,24,0.10); transform: translateY(-4px); }
.course-card-number { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--text-dark); opacity: 0.08; line-height: 1; margin-bottom: var(--space-sm); }
.course-card-tag { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px; display: block; }
.course-card h3 { color: var(--text-dark); font-size: 22px; margin-bottom: 10px; }
.course-card p { color: var(--text-muted); font-size: 14px; margin-bottom: var(--space-sm); }
.course-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-sm) 0; }
.course-tag { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 100px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.course-enroll { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ── Testimonials — OFF-WHITE ── */
#testimonials { background: var(--bg-light); padding: var(--space-2xl) 0; border-top: 1px solid var(--border-light); }
.testimonial-card { background: var(--bg-light); border-left: 3px solid var(--accent); padding: var(--space-lg) var(--space-md); box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
.testimonial-stars { display: flex; gap: 4px; margin-bottom: var(--space-md); }
.testimonial-stars svg { width: 14px; height: 14px; fill: var(--accent); }
.testimonial-quote { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: var(--space-md); font-style: italic; }
.testimonial-author { font-weight: 700; font-size: 15px; color: var(--text-dark); }
.testimonial-role { font-size: 13px; color: var(--text-muted); }

/* ── Booking — DARK ── */
/* Booking — LIGHT section (overlaid with Coming Soon) */
#book-session { background: var(--bg-off-white); padding: var(--space-2xl) 0; position: relative; border-top: 1px solid var(--border-light); }
.booking-header { text-align: center; margin-bottom: var(--space-xl); }
#book-session .booking-header h2 { color: var(--text-dark); margin-bottom: var(--space-sm); }
#book-session .booking-header p { color: var(--text-body); margin: 0 auto; max-width: 560px; }
.session-cards { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-xl); }
#book-session .session-card { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 8px; padding: var(--space-lg) var(--space-md); width: 280px; text-align: left; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
#book-session .session-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(245,197,24,0.1); }
#book-session .session-card.featured { border-color: var(--accent); background: #fffef5; }
#book-session .session-card h3 { color: var(--text-dark); font-size: 20px; margin-bottom: 10px; }
#book-session .session-card p { color: var(--text-body); font-size: 14px; margin-bottom: var(--space-sm); }
.session-duration { display: inline-block; font-size: 12px; color: var(--accent-dark); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 20px; margin-bottom: var(--space-sm); }
.card-cta { display: block; background: var(--accent); color: #111111; text-align: center; padding: 10px 0; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; transition: opacity var(--transition); }
.card-cta:hover { opacity: 0.85; }
.booking-cta { text-align: center; }
.cal-embed-wrapper { max-width: 1000px; margin: 0 auto; background: var(--bg-dark); border-radius: 12px; padding: var(--space-md); border: none; box-shadow: 0 8px 48px rgba(0,0,0,0.12); overflow: hidden; }
#my-cal-inline { width: 100%; min-height: 700px; overflow: scroll; border-radius: 8px; }


/* ── Contact — LIGHT ── */
#contact { background: var(--bg-light); padding: var(--space-2xl) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: start; }
.contact-grid h2 + .prose, .contact-grid .section-header + .prose { margin-top: 20px; }
.contact-info h2 { color: var(--text-dark); margin-bottom: var(--space-md); }
.contact-info p { color: var(--text-body); }
.contact-detail { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: 15px; color: var(--text-dark); }
.contact-detail .icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.contact-detail .icon svg { width: 20px; height: 20px; }
.contact-detail .label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.contact-detail a, .contact-detail .val { color: var(--text-dark); }
.contact-form .field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; background: var(--bg-off-white); border: 1px solid var(--border-light); border-radius: 2px;
  padding: 14px 16px; font-family: var(--font-body); font-size: 15px; color: var(--text-dark);
  margin-bottom: var(--space-sm); transition: border-color var(--transition), box-shadow var(--transition); outline: none;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.contact-form textarea { height: 140px; resize: vertical; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

/* Contact — inline detail cards (home page #contact) */
.contact-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-md); max-width: 960px; margin: var(--space-xl) auto 0;
}
.contact-card {
  flex: 1 1 240px; max-width: 300px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--bg-off-white); border: 1px solid var(--border-light); border-radius: 10px;
  padding: var(--space-lg) var(--space-md); color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
a.contact-card:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 40px -18px rgba(245, 197, 24, 0.4);
  transform: translateY(-3px);
}
a.contact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-card-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
.contact-card-value { font-size: 15px; font-weight: 600; color: var(--text-dark); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .contact-cards { flex-direction: column; align-items: stretch; }
  .contact-card { max-width: 100%; }
}

/* ── FOS "Work With Soban Attari" — native form (posts to Google Forms) ── */
.fos-form-card {
  position: relative;
  width: 100%;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 22px 55px -22px rgba(26, 26, 26, 0.20);
  overflow: hidden;
}
.fos-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fos-form-card.in-view::before { transform: scaleX(1); }

.fos-form-head { margin-bottom: var(--space-md); }
.fos-form-head .section-label { display: block; margin-bottom: 10px; }
.fos-form-head p { font-size: 14px; color: var(--text-muted); margin: 0; }

@media (max-width: 768px) {
  .fos-form-card { padding: var(--space-md) var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .fos-form-card::before { transition: none; transform: none; }
}

/* ── Footer — DARK ── */
#footer { background: #080808; padding: var(--space-xl) 0 var(--space-md); border-top: 1px solid var(--border-dark); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--space-sm); }
.footer-brand p { color: var(--text-light-muted); font-size: 14px; margin-top: var(--space-xs); max-width: 280px; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; margin: var(--space-md) 0; font-size: 13px; }
.footer-contact a, .footer-contact span { color: var(--text-light-muted); }
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social-link { width: 36px; height: 36px; border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center; color: var(--text-light-muted); transition: background var(--transition), color var(--transition), border-color var(--transition); border-radius: 50%; }
.footer-social-link svg { width: 14px; height: 14px; fill: currentColor; }
.footer-social-link:hover { background: var(--accent); color: #111; border-color: var(--accent); }
.footer-col h4 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--space-md); }
.footer-col a { display: block; font-size: 14px; color: var(--text-light-muted); margin-bottom: 10px; transition: color var(--transition); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border-dark); padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.footer-bottom p { font-size: 13px; color: var(--text-light-muted); }
.footer-bottom .legal { display: flex; gap: var(--space-md); }
.footer-bottom a { font-size: 13px; color: var(--text-light-muted); }
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom span.gold { color: var(--accent); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Scroll Animations ── */
.animate-on-scroll { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.animate-on-scroll.in-view { opacity: 1; transform: translateY(0); }
.stagger.in-view > * { animation: staggerIn 0.6s ease both; }
.stagger.in-view > *:nth-child(1) { animation-delay: 0s; }
.stagger.in-view > *:nth-child(2) { animation-delay: 0.08s; }
.stagger.in-view > *:nth-child(3) { animation-delay: 0.16s; }
.stagger.in-view > *:nth-child(4) { animation-delay: 0.24s; }
.stagger.in-view > *:nth-child(5) { animation-delay: 0.32s; }
.stagger.in-view > *:nth-child(6) { animation-delay: 0.40s; }
.stagger.in-view > *:nth-child(7) { animation-delay: 0.48s; }
.stagger.in-view > *:nth-child(8) { animation-delay: 0.56s; }
@keyframes staggerIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ── Page header (subpages) ── */
.page-header { position: relative; padding: 150px 0 90px; background: var(--bg-dark); text-align: center; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(245,197,24,0.10) 0%, transparent 70%); pointer-events: none; }
.page-header .container { position: relative; }
.page-header h1 { color: var(--text-light); margin-bottom: var(--space-sm); }
.page-header .ph-roles { font-size: 13px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: var(--space-md); }
.page-header p { color: var(--text-light-muted); max-width: 640px; margin: 0 auto var(--space-md); }
.page-header .ph-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }
.page-header .ph-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--accent); line-height: 1; }
.page-header .ph-stat .lbl { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ── Subpage helpers ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two-col.top { align-items: start; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }
.prose { max-width: 900px; }
.prose p { color: var(--text-body); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.section-dark .prose p, .section-dark-2 .prose p { color: var(--text-light-muted); }
.bio-figure { position: relative; overflow: hidden; border: 1px solid var(--border-light); }
.bio-figure img { width: 100%; height: 560px; object-fit: cover; display: block; }
.gold-quote { background: var(--accent); padding: 48px 40px; position: relative; overflow: hidden; }
.gold-quote::before { content: '\201C'; position: absolute; top: -12px; left: 28px; font-family: var(--font-display); font-size: 120px; color: rgba(0,0,0,0.08); line-height: 1; }
.gold-quote blockquote { font-family: var(--font-body); font-size: 18px; line-height: 1.85; color: #111; position: relative; z-index: 1; margin-bottom: 24px; }
.gold-quote .by { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(15,15,15,0.55); }
.list-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; }
.list-check ul { display: flex; flex-direction: column; gap: 8px; }
.list-check li { display: flex; gap: 10px; color: var(--text-body); font-size: 15px; line-height: 1.7; }
.list-check li span { color: var(--accent-dark); flex-shrink: 0; }
.uni-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.uni-logo-card { background: #fff; border: 1px solid var(--border-light); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 170px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.uni-logo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); border-color: var(--accent); }
.uni-logo-card img { max-width: 100%; height: 80px; object-fit: contain; }
.uni-logo-card .name { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dark); text-align: center; }
.contact-box { background: var(--bg-off-white); border-left: 3px solid var(--accent); padding: 32px; }
.contact-box .ct-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 18px; }
.contact-box .ct-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.contact-box .ct-row svg { flex-shrink: 0; stroke: var(--accent-dark); }
.contact-box .ct-row a, .contact-box .ct-row span { font-size: 14px; color: var(--text-body); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.fact-card { background: var(--bg-light); border-top: 2px solid var(--accent); padding: 32px 24px; text-align: center; }
.section-off-white .fact-card { background: var(--bg-light); }
.fact-card .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.5vw, 44px); color: var(--text-dark); line-height: 1; }
.fact-card .lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 768px) { .facts-grid { grid-template-columns: 1fr 1fr; } }

/* ── Biography page responsive layout ── */
@media (max-width: 768px) {
  .page-header { padding: 118px 0 64px; }
  .page-header h1 { font-size: clamp(42px, 12vw, 64px); }
  .page-header .ph-roles {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(10px, 2.5vw, 13px);
    line-height: 1.7;
    letter-spacing: 1.2px;
  }
  .page-header .ph-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;
  }
  .page-header .ph-stat { min-width: 0; }
  .page-header .ph-stat .num {
    font-size: clamp(25px, 7vw, 36px);
    white-space: nowrap;
  }
  .page-header .ph-stat .lbl {
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 1.4;
  }
  .bio-figure img { height: min(118vw, 480px); }
  .gold-quote { padding: 36px 24px; }
  .gold-quote blockquote { font-size: 16px; line-height: 1.7; }
  .facts-grid { gap: 1px; }
  .fact-card { min-width: 0; padding: 24px 12px; }
  .fact-card .num { font-size: clamp(24px, 7vw, 36px); overflow-wrap: anywhere; }
  .fact-card .lbl { font-size: 9px; letter-spacing: 1px; line-height: 1.4; }
  .list-check { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .list-check li { min-width: 0; overflow-wrap: anywhere; }
  .uni-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .uni-logo-card { min-width: 0; padding: 22px 12px; min-height: 145px; }
  .uni-logo-card .name { overflow-wrap: anywhere; }
  .contact-box { padding: 24px 18px; }
  .contact-box .ct-row { align-items: flex-start; }
  .contact-box .ct-row a,
  .contact-box .ct-row span { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .page-header .ph-stats { gap: 16px 4px; }
  .page-header .ph-stat .num { font-size: 24px; }
  .page-header .ph-stat .lbl { font-size: 8px; letter-spacing: .7px; }
  .uni-logo-card { padding-left: 8px; padding-right: 8px; }
}
.eyebrow-center { text-align: center; }
.text-card { background: var(--bg-light); border: 1px solid var(--border-light); padding: var(--space-lg) var(--space-md); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.text-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }

/* ── Events page ── */
.event-list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--space-lg); }
.event-card { background: var(--bg-light); border: 1px solid var(--border-light); display: grid; grid-template-columns: auto 1fr auto; gap: 0 32px; align-items: center; padding: 28px 32px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.event-card:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: 0 8px 28px rgba(0,0,0,0.06); }
.event-type-badge { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 11px; background: var(--accent-dim); color: var(--accent-dark); white-space: nowrap; border-radius: 2px; }
.event-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--text-dark); margin-bottom: 10px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.meta-item svg { stroke: var(--text-muted); }
.event-card p { font-size: 13px; color: var(--text-muted); margin-top: 8px; max-width: 640px; }
.reg-btn { display: inline-block; border: 1px solid var(--accent); color: var(--accent-dark); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 10px 22px; white-space: nowrap; transition: background .2s, color .2s; }
.reg-btn:hover { background: var(--accent); color: #111; }

.event-page-section { padding: var(--space-xl) 0; }
.event-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.event-type-card {
  height: 100%; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-start;
  border: 1px solid var(--border-light); border-radius: 20px;
  padding: 26px 26px 28px; background: var(--bg-light);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px -12px rgba(17, 17, 17, 0.10);
  position: relative; overflow: hidden; isolation: isolate;
}
.event-type-card-image { aspect-ratio: 2 / 1; margin: -26px -26px 22px; overflow: hidden; position: relative; background: var(--bg-off-white); border-bottom: 1px solid var(--border-light); }
.event-type-card > div:last-child { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.event-type-card-image img { display: block; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); width: 100%; }
.event-type-card:hover .event-type-card-image img { transform: scale(1.04); }
.event-type-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.04), 0 24px 44px -18px rgba(17, 17, 17, 0.22), 0 18px 36px -24px rgba(245, 197, 24, 0.45); }
.event-type-card:active { transform: translateY(-2px); }
.event-type-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.event-type-card h2 { font-size: clamp(25px, 1.8vw, 32px); line-height: 1.08; margin-bottom: 10px; position: relative; z-index: 1; }
.event-type-card p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.event-type-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: auto -26px -28px; padding: 15px 26px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-dark);
  transition: background var(--transition), color var(--transition);
}
.event-type-cta-arrow {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(245, 197, 24, 0.18); color: var(--accent-dark);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.event-type-card:hover .event-type-cta { background: rgba(17, 17, 17, 0.035); color: var(--text-dark); }
.event-type-card:hover .event-type-cta-arrow { background: var(--accent); color: #111111; transform: translateX(3px); }
.event-type-card-featured p { max-width: 31ch; }

.past-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--space-lg); }
/* a lone card on the last row sits centred instead of hanging left */
@media (min-width: 1025px) {
  .event-type-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 1024px) {
  .event-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .event-page-section { padding: 56px 0; }
  .event-type-grid { grid-template-columns: 1fr; gap: 20px; }
  .event-type-card { height: auto; min-height: 0; padding: 22px 22px 24px; border-radius: 16px; }
  .event-type-card-image { margin: -22px -22px 18px; }
  .event-type-card h2 { font-size: 27px; }
  .event-type-card p { font-size: 14px; line-height: 1.55; }
  .event-type-cta { margin: 16px -22px -24px; padding: 14px 22px; }
}
.past-card { border: 1px solid var(--border-light); background: var(--bg-light); padding: 28px; transition: border-color .2s, transform .2s; }
.past-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.past-card .past-type { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px; }
.past-card .past-title { font-family: var(--font-display); font-size: 18px; color: var(--text-dark); margin-bottom: 8px; }
.past-card .past-date { font-size: 12px; color: var(--text-muted); }
@media (max-width: 768px) { .past-grid { grid-template-columns: 1fr; } .event-card { grid-template-columns: 1fr; gap: 14px; } }
.form-success { padding: 32px; background: var(--accent-dim); border: 1px solid rgba(245,197,24,0.3); margin-top: 24px; }
.form-success .ttl { font-family: var(--font-display); font-size: 24px; color: var(--accent-dark); margin-bottom: 8px; }
.form-success p { font-size: 14px; color: var(--text-muted); }

/* ── University sessions (blogs) ── */
.session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: var(--space-lg); }
.session-card { background: var(--bg-light); border: 1px solid var(--border-light); overflow: hidden; transition: border-color .2s, transform .25s, box-shadow .25s; display: block; }
/* only linked cards lift on hover — static recap cards stay put */
a.session-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
a.session-card:hover .read-more { color: var(--accent-dark); }
/* /blog/#lums etc. land clear of the fixed navbar and highlight the card */
.session-card { scroll-margin-top: 100px; }
.session-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
a.session-card:active { transform: translateY(-2px); }
a.session-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.session-logo { background: #fff; height: 200px; display: flex; align-items: center; justify-content: center; padding: 32px; border-bottom: 1px solid var(--border-light); }
.session-logo img { max-height: 130px; max-width: 80%; object-fit: contain; }
.session-body { padding: 28px; }
.uni-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; margin-bottom: 12px; background: var(--accent-dim); color: var(--accent-dark); }
.session-year { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; letter-spacing: 0.5px; }
.session-body h3 { font-family: var(--font-display); font-size: 18px; color: var(--text-dark); margin-bottom: 12px; line-height: 1.3; }
.session-body p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.read-more { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); transition: color .2s; }

/* ── University session detail pages (/blog/<university>/) ── */
.sd-hero h1 { font-size: clamp(30px, 4.4vw, 52px); max-width: 900px; margin: 12px auto 0; text-wrap: balance; }
.sd-section { padding: var(--space-xl) 0; }
.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.sd-article { max-width: 720px; }
.sd-lead { font-size: 19px; line-height: 1.7; color: var(--text-dark); font-weight: 500; padding-left: 18px; border-left: 3px solid var(--accent); margin-bottom: 36px; }
.sd-article h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 36px 0 14px; }
.sd-article p { font-size: 16px; line-height: 1.8; color: var(--text-body); margin-bottom: 16px; }
.sd-takeaways { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.sd-takeaways li { position: relative; padding: 14px 16px 14px 46px; background: var(--bg-off-white); border: 1px solid var(--border-light); border-radius: 10px; font-size: 15px; line-height: 1.6; color: var(--text-dark); }
.sd-takeaways li::before { content: ''; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sd-source { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-light); }
.sd-source h2 { font-size: 13px; font-family: var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.sd-source ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sd-source a { font-size: 14px; color: var(--accent-dark); border-bottom: 1px solid rgba(212, 168, 0, 0.35); transition: color var(--transition), border-color var(--transition); }
.sd-source a:hover, .sd-source a:focus-visible { color: var(--text-dark); border-color: var(--text-dark); outline: none; }
.sd-source-note { font-size: 13px !important; color: var(--text-muted) !important; margin: 0 !important; font-style: italic; }
.sd-aside { position: sticky; top: 100px; display: grid; gap: 20px; }
.sd-card { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 30px -16px rgba(17, 17, 17, 0.14); }
.sd-logo { height: 150px; display: flex; align-items: center; justify-content: center; padding: 24px; border-bottom: 1px solid var(--border-light); }
.sd-logo img { max-height: 104px; max-width: 70%; object-fit: contain; }
.sd-facts { margin: 0; padding: 8px 22px 14px; }
.sd-facts div { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.sd-facts div:last-child { border-bottom: 0; }
.sd-facts dt { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.sd-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dark); font-weight: 500; }
.sd-invite { background: var(--bg-dark); border-radius: 14px; padding: 26px 24px; }
.sd-invite h2 { color: var(--text-light); font-size: 22px; margin-bottom: 8px; }
.sd-invite p { color: var(--text-light-muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.sd-invite .btn { width: 100%; justify-content: center; }
/* ── Event photos: never crop the speaker ──
   Lead photo is shown whole on a soft blurred copy of itself; the rest flow
   in a masonry at their natural shape, so faces are never cut on any screen. */
.sd-gallery { margin: 0 0 40px; }
.sd-lead-photo {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; max-height: 560px; width: 100%;
  border-radius: 14px; background: var(--bg-dark);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 18px 40px -22px rgba(17, 17, 17, 0.45);
}
.sp-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  filter: blur(22px) saturate(1.15) brightness(0.72); transform: scale(1.15);
}
.sp-fg { width: 100%; height: 100%; object-fit: contain; display: block; }
.sd-lead-photo .sp-fg { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.sd-lead-photo:hover .sp-fg { transform: scale(1.02); }
.sd-lead-photo:focus-visible, .sd-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sd-masonry { columns: 3 170px; column-gap: 10px; margin-top: 10px; }
.sd-photo {
  display: block; break-inside: avoid; margin-bottom: 10px; overflow: hidden;
  border-radius: 10px; background: var(--bg-off-white);
}
.sd-photo img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.sd-photo:hover img { transform: scale(1.03); }
.sd-photo:active img, .sd-lead-photo:active .sp-fg { transform: scale(1.01); }
.sd-photo-credit { font-size: 12px !important; color: var(--text-muted) !important; margin: 2px 0 0 !important; }
/* cards: whole photo in a consistent 3:2 frame (logo cards use the same frame) */
.session-grid .session-logo { height: auto; aspect-ratio: 3 / 2; }
/* 3-column layout: a lone card on the last row sits centred */
@media (min-width: 1100px) {
  .session-grid.stagger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .session-grid.stagger > .session-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.session-logo.session-photo { position: relative; overflow: hidden; isolation: isolate; padding: 0; background: var(--bg-dark); }
.session-logo.session-photo .sp-fg { max-width: none; max-height: none; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
a.session-card:hover .session-photo .sp-fg { transform: scale(1.03); }
@media (max-width: 600px) {
  .sd-lead-photo { aspect-ratio: 4 / 3; border-radius: 12px; }
  .sd-masonry { columns: 2; column-gap: 8px; margin-top: 8px; }
  .sd-photo { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-lead-photo .sp-fg, .sd-photo img, .session-logo.session-photo .sp-fg { transition: none; }
}
.sd-more { padding: var(--space-xl) 0; }
.sd-more-cta { text-align: center; margin-top: var(--space-lg); }
@media (max-width: 960px) {
  .sd-grid { grid-template-columns: 1fr; }
  .sd-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .sd-article { max-width: none; }
}
@media (max-width: 480px) {
  .sd-section { padding: 48px 0; }
  .sd-lead { font-size: 17px; margin-bottom: 28px; }
  .sd-article p { font-size: 15px; }
  .sd-more { padding: 56px 0; }
}

@media (max-width: 768px) {
  .session-grid { grid-template-columns: 1fr; gap: 20px; }
  .session-logo { height: 160px; padding: 24px; }
  .session-body { padding: 22px; }
}
@media (max-width: 480px) {
  .session-logo { height: 140px; padding: 20px; }
  .session-body { padding: 18px 16px; }
  .session-body h3 { font-size: 16px; }
}

/* ── Booking form page ── */
.booking-form-page input, .booking-form-page select, .booking-form-page textarea {
  width: 100%; background: var(--bg-off-white); border: 1px solid var(--border-light); color: var(--text-dark);
  font-family: var(--font-body); font-size: 14px; padding: 12px 16px; outline: none;
  transition: border-color .2s, box-shadow .2s; display: block; margin-bottom: 16px;
}
.booking-form-page input:focus, .booking-form-page select:focus, .booking-form-page textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.booking-form-page .form-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.bf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.bf-type-display { background: var(--bg-off-white); border: 1px solid var(--border-light); padding: 16px 20px; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; }
.bf-type-display .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.bf-type-display .lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.bf-type-display .val { font-size: 15px; font-weight: 500; color: var(--accent-dark); }
.bf-howitworks { background: var(--bg-off-white); border-left: 3px solid var(--accent); padding: 20px 24px; margin-bottom: 28px; }
.bf-howitworks .t { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 10px; }
.bf-howitworks p { font-size: 13px; color: var(--text-body); line-height: 1.7; margin: 0; }
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 32px; border: 1px solid var(--border-light); }
.pay-tab { background: var(--bg-off-white); border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 16px 18px; cursor: pointer; transition: background .2s, color .2s; text-align: center; }
.pay-tab .pay-tab-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.5px; opacity: 0.7; text-transform: none; display: block; }
.pay-tab:hover { color: var(--accent-dark); }
.pay-tab.active { background: var(--accent); color: #111; }
.calendly-embed-wrap { background: var(--bg-off-white); border: 1px solid var(--border-light); min-height: 740px; position: relative; }
.calendly-inline-widget { min-width: 320px; height: 740px; }
.calendly-placeholder { padding: 40px 32px; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.calendly-placeholder strong { color: var(--accent-dark); display: block; font-family: var(--font-display); font-size: 28px; margin-bottom: 14px; }
.calendly-placeholder code { background: var(--bg-light); color: var(--accent-dark); padding: 2px 8px; font-size: 12px; border: 1px solid var(--border-light); }
.pay-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.pay-method-card { background: var(--bg-light); border: 1px solid var(--border-light); padding: 20px 16px; cursor: pointer; transition: border-color .2s, background .2s; text-align: center; }
.pay-method-card:hover { border-color: var(--accent); }
.pay-method-card input { display: none; }
.pay-method-card.checked { border-color: var(--accent); background: var(--accent-dim); }
.pay-method-card-title { font-family: var(--font-display); font-size: 18px; color: var(--text-dark); margin-bottom: 4px; }
.pay-method-card-sub { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.pay-instr { background: var(--bg-off-white); border-left: 3px solid var(--accent); padding: 24px 28px; margin-bottom: 24px; }
.pay-instr-title { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px; }
.pay-instr-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; color: var(--text-body); }
.pay-instr-row:last-child { border-bottom: none; }
.pay-instr-row .lbl { color: var(--text-muted); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.pay-instr-row .val { font-weight: 600; color: var(--text-dark); }
.file-upload { display: block; background: var(--bg-off-white); border: 1px dashed var(--accent); padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; margin-bottom: 16px; }
.file-upload:hover { border-color: var(--accent-dark); background: var(--accent-dim); }
.file-upload input { display: none; }
.file-upload .file-name { display: block; margin-top: 6px; color: var(--accent-dark); font-size: 12px; }
.bf-privacy { background: var(--bg-off-white); border-bottom: 1px solid var(--border-light); border-top: 1px solid var(--border-light); padding: 16px 0; }
.bf-privacy .container { display: flex; align-items: center; gap: 14px; }
.bf-privacy svg { flex-shrink: 0; }
.bf-privacy p { font-size: 13px; color: var(--text-body); line-height: 1.6; }
.bf-privacy strong { color: var(--accent-dark); }
.bf-success { text-align: center; padding: 60px 32px; }
.bf-success .circle { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-dim); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.bf-success .ttl { font-family: var(--font-display); font-size: 36px; color: var(--accent-dark); margin-bottom: 16px; }
.bf-success p { font-size: 15px; color: var(--text-muted); line-height: 1.8; max-width: 520px; margin: 0 auto; }
@media (max-width: 600px) { .pay-method-grid { grid-template-columns: 1fr; } .bf-grid-2 { grid-template-columns: 1fr; } }

/* ── Program / Activity detail pages ── */
.dcard { background: var(--bg-light); border: 1px solid var(--border-light); padding: 32px 28px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.section-light .dcard { background: var(--bg-off-white); }
.dcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.dcard .eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px; }
.dcard h3 { font-family: var(--font-display); font-size: 20px; color: var(--text-dark); margin-bottom: 10px; }
.dcard .num { font-family: var(--font-display); font-size: 32px; color: rgba(26,26,26,0.12); line-height: 1; margin-bottom: 12px; }
.dcard p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.dcard.center { text-align: center; }
.past-episodes-grid { align-items: stretch; }
.past-episode-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.past-episode-video { position: relative; aspect-ratio: 16 / 9; background: var(--bg-dark); overflow: hidden; }
.past-episode-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.past-episode-content { padding: 22px 22px 24px; display: flex; flex: 1; flex-direction: column; gap: 10px; }
.past-episode-label { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.past-episode-content h3 { font-size: 17px; line-height: 1.35; margin: 0; }
.past-episode-content p { margin-top: auto; }
.past-episode-tag {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: var(--accent-dim); color: var(--accent-dark);
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.past-episode-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dark); flex-shrink: 0; }

/* ---- Youth Talks: campus-CTA closing band ---- */
.yt-cta-inner { text-align: center; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ys-cta { text-align: center; }
.ys-cta .container { max-width: 760px; }
.ys-cta .section-intro { margin: 16px auto 36px; }
.fs-cta { text-align: center; }
.fs-cta .container { max-width: 760px; }
.fs-cta-icon { margin: 0 auto 20px; }
.fs-cta .section-intro { margin: 16px auto 36px; }
.yt-cta-icon { margin: 0 0 20px; }
.yt-cta-inner .section-intro { margin: 16px auto 8px; text-align: center; }
.yt-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* =========================================================
   SHORTS GRID — videos/index.html
   Vertical 9:16 embeds, more columns since each card is narrow.
   ========================================================= */
.shorts-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.short-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.short-video { position: relative; aspect-ratio: 9 / 16; background: var(--bg-dark); overflow: hidden; }
.short-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.short-content { padding: 12px 14px 16px; }

/* ---- YouTube click-to-load facade — replaces eager iframes so the page
   doesn't fire 14 embeds at once, and only one video plays at a time ---- */
.yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: var(--bg-dark);
  cursor: pointer; display: block;
}
.yt-facade-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity var(--transition); }
.yt-facade:hover .yt-facade-thumb, .yt-facade:focus-visible .yt-facade-thumb { opacity: 1; }
.yt-facade-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(17,17,17,0.55); border: 2px solid rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}
.yt-facade-play svg { fill: #fff; margin-left: 3px; transition: fill var(--transition); }
.yt-facade-play svg path { fill: #fff; transition: fill var(--transition); }
.yt-facade:hover .yt-facade-play, .yt-facade:focus-visible .yt-facade-play {
  transform: translate(-50%, -50%) scale(1.1); background: var(--accent); border-color: var(--accent);
}
.yt-facade:hover .yt-facade-play svg, .yt-facade:hover .yt-facade-play svg path,
.yt-facade:focus-visible .yt-facade-play svg, .yt-facade:focus-visible .yt-facade-play svg path { fill: #111; }
.yt-facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Clicked: thumbnail stays up with a gold spinner until the video plays */
.yt-facade { transition: opacity 0.35s ease; }
.yt-facade.is-loading { cursor: progress; }
.yt-facade.is-loading .yt-facade-thumb { opacity: 0.7; }
.yt-facade.is-loading .yt-facade-play { opacity: 0; }
.yt-facade.is-revealing { opacity: 0; pointer-events: none; }
.yt-facade-spinner {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.82);
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: ytSpin 0.8s linear infinite;
}
@keyframes ytSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .yt-facade-spinner { animation-duration: 2s; }
}
.short-content h3 { font-size: 12.5px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--text-dark); }
@media (max-width: 1024px) {
  .shorts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.icon-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(245,197,24,0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.dcard.center .icon-circle { margin-left: auto; margin-right: auto; }

/* ---- Youth Talks Overview cards: colorful emoji badges, playful hover pop,
   idle pulse ring, one theme color per topic ---- */
.dcard-topic { border-radius: 16px; }
.dcard-topic p { font-size: 14px; line-height: 1.75; }
.dcard-topic .icon-circle { width: 56px; height: 56px; position: relative; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); }
.dcard-topic:hover .icon-circle { transform: scale(1.12) rotate(-8deg); }
.dcard-topic .ic-emoji { display: block; font-size: 26px; line-height: 1; }
.dcard-topic .icon-circle::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0;
  animation: dcardIconPulse 2.6s ease-out infinite;
}
@keyframes dcardIconPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dcard-topic .icon-circle::after { animation: none; }
}
.icon-circle.ic-green { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #16a34a; }
.icon-circle.ic-blue { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.35); color: #2563eb; }
.icon-circle.ic-orange { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #d97706; }
.icon-circle.ic-purple { background: rgba(168, 85, 247, 0.14); border-color: rgba(168, 85, 247, 0.35); color: #9333ea; }
.icon-circle.ic-rose { background: rgba(244, 63, 94, 0.14); border-color: rgba(244, 63, 94, 0.35); color: #e11d48; }
.icon-circle.ic-teal { background: rgba(20, 184, 166, 0.14); border-color: rgba(20, 184, 166, 0.35); color: #0d9488; }
.icon-circle svg { stroke: var(--accent-dark); }
.quote-box { background: var(--bg-light); border: 1px solid var(--border-light); padding: 40px; }
.section-light .quote-box { background: var(--bg-off-white); }
.quote-box .qeyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px; }
.quote-box blockquote { font-family: var(--font-body); font-size: 16px; line-height: 1.85; color: var(--text-body); font-style: italic; margin-bottom: 20px; }
.quote-box .qby { font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; }
.dstat-grid { display: grid; gap: 24px; }
.dstat { text-align: center; }
.dstat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 72px); color: var(--text-dark); line-height: 1; margin-bottom: 12px; }
.dstat .lbl { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.dstat p { font-size: 12px; color: var(--text-muted); }
.dsteps { display: grid; gap: 32px; }
.dstep .badge { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(245,197,24,0.35); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: var(--accent-dark); margin-bottom: 20px; }
.dstep.first .badge { background: var(--accent); color: #111; border-color: var(--accent); }
.dstep h4 { font-family: var(--font-display); font-size: 18px; color: var(--text-dark); margin-bottom: 8px; }
.dstep p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.gr-stat-row { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--bg-light); border: 1px solid var(--border-light); }
.section-light .gr-stat-row { background: var(--bg-off-white); }
.gr-stat-row .big { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--accent-dark); line-height: 1; min-width: 56px; }
.gr-stat-row .t { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.gr-stat-row .s { font-size: 12px; color: var(--text-muted); }
.checklist-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--border-light); background: var(--bg-light); }
.section-off-white .checklist-row { background: var(--bg-light); }
.checklist-row .tick { color: var(--accent-dark); font-size: 20px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.checklist-row p { font-size: 14px; color: var(--text-body); line-height: 1.7; }
.format-card { border: 1px solid var(--border-light); background: var(--bg-light); padding: 48px 40px; position: relative; }
.format-card.featured { border-color: var(--accent); background: var(--accent-dim); }
.format-card .opt { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px; }
.format-card .fname { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--text-dark); margin-bottom: 16px; line-height: 1.05; }
.format-card .rule { width: 40px; height: 1px; background: var(--accent); margin-bottom: 24px; }
.format-card ul { display: flex; flex-direction: column; gap: 12px; }
.format-card li { display: flex; gap: 12px; font-size: 14px; color: var(--text-body); }
.format-card li span { color: var(--accent-dark); flex-shrink: 0; }
.format-card .pop { position: absolute; top: 0; right: 32px; background: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111; padding: 5px 12px; }
.gold-banner { background: var(--accent); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.gold-banner .be { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(15,15,15,0.5); margin-bottom: 8px; }
.gold-banner .bt { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #111; margin-bottom: 4px; }
.gold-banner .bs { font-size: 13px; color: rgba(15,15,15,0.65); }
.gold-banner .bbtn { display: inline-block; background: #111; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 14px 28px; white-space: nowrap; transition: opacity .2s; }
.gold-banner .bbtn:hover { opacity: 0.85; }
.gold-cta { background: var(--accent); text-align: center; }
.gold-cta .ge { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(15,15,15,0.5); margin-bottom: 12px; }
.gold-cta h2 { color: #111; }
.gold-cta p { color: rgba(15,15,15,0.65); margin: 16px auto 36px; max-width: 600px; }
.gold-cta .btn-dark { background: #111; color: var(--accent); }
.detail-testimonial { max-width: 800px; margin: 0 auto; text-align: center; }
.detail-testimonial .mark { font-size: 48px; color: rgba(245,197,24,0.4); font-family: var(--font-display); line-height: 1; margin-bottom: 16px; }
.detail-testimonial blockquote { font-family: var(--font-body); font-size: 20px; line-height: 1.8; color: var(--text-dark); font-style: italic; margin-bottom: 32px; }
.detail-testimonial .who { display: flex; align-items: center; justify-content: center; gap: 14px; }
.detail-testimonial .who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.detail-testimonial .who .n { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.detail-testimonial .who .r { font-size: 12px; color: var(--text-muted); }
.plant-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 8px; }
.plant-gallery a { position: relative; overflow: hidden; display: block; }
.plant-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.plant-gallery a:hover img { transform: scale(1.05); }
/* ── Projects: Community Welfare cards (whole photo, never cropped) ── */
.event-type-card h3 { font-size: clamp(25px, 1.8vw, 32px); line-height: 1.08; margin-bottom: 10px; position: relative; z-index: 1; }
.welfare-image { isolation: isolate; background: var(--bg-dark); }
.welfare-image .sp-fg { object-fit: contain; }
.event-type-card:hover .welfare-image .sp-bg { transform: scale(1.15); }
.welfare-section .section-intro { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .event-type-card h3 { font-size: 27px; } }

/* ── Home: horizontally scrollable session recaps (inside #institutions) ── */
.recap-rail-wrap { position: relative; margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--border-light); }
.recap-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.recap-rail-head h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 10px 0 10px; }
.recap-rail-head p { font-size: 16px; color: var(--text-muted); max-width: 520px; margin: 0; }
.recap-rail-nav { display: flex; gap: 8px; }
.recap-nav {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--bg-light); color: var(--text-dark); border: 1px solid var(--border-light);
  transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform 0.2s ease;
}
.recap-nav:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #111; }
.recap-nav:active:not(:disabled) { transform: scale(0.92); }
.recap-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recap-nav:disabled { opacity: 0.35; cursor: default; }
.recap-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; overscroll-behavior-x: contain;
  padding: 4px 2px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.recap-rail::-webkit-scrollbar { display: none; }
.recap-card {
  scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 26px -18px rgba(17, 17, 17, 0.25);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.recap-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 22px 40px -20px rgba(17, 17, 17, 0.32); }
.recap-card:active { transform: translateY(-1px); }
.recap-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recap-media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; background: var(--bg-dark); }
.recap-media .sp-fg { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.recap-card:hover .recap-media .sp-fg { transform: scale(1.04); }
.recap-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; flex: 1; }
.recap-uni { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); }
.recap-text { font-size: 14px; line-height: 1.6; color: var(--text-body); }
.recap-title { font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; color: var(--text-dark); }
.recap-more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); }
.recap-more svg { transition: transform var(--transition); }
.recap-card:hover .recap-more { color: var(--accent-dark); }
.recap-card:hover .recap-more svg { transform: translateX(3px); }
.recap-card-all { background: var(--bg-dark); border-color: var(--bg-dark); }
.recap-all-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 36px; }
.recap-card-all .recap-title { color: var(--text-light); font-size: clamp(24px, 2.2vw, 30px); }
.recap-card-all .recap-more { color: var(--text-light-muted); margin-top: 0; }
.recap-card-all:hover .recap-more { color: var(--accent); }
.recap-all { text-align: center; margin-top: 36px; }
@media (min-width: 769px) and (max-width: 1024px) {
  .recap-rail { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 768px) {
  .recap-rail-wrap { margin-top: var(--space-lg); padding-top: var(--space-lg); }
  .recap-rail { grid-auto-columns: 84%; gap: 16px; }
  .recap-rail-nav { display: none; }
  .recap-body { padding: 20px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .recap-card, .recap-media .sp-fg, .recap-nav { transition: none; }
}

/* ── Welfare drive pages: photos first, short readable text ── */
.drive-section { padding: var(--space-xl) 0; }
.drive-intro { max-width: 720px; margin: 0 auto var(--space-lg); text-align: center; }
.drive-intro h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 10px 0 14px; }
.drive-intro p { font-size: 17px; line-height: 1.7; color: var(--text-body); margin: 0; }
.drive-block {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px);
  align-items: start; padding: var(--space-lg) 0; border-top: 1px solid var(--border-light);
}
.drive-intro + .drive-block { border-top: 0; padding-top: 0; }
.drive-block .sd-gallery { margin: 0; }
.drive-text { position: sticky; top: 100px; padding-top: 4px; }
.drive-place { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-dim); padding: 5px 10px; border-radius: 4px; }
.drive-text h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 14px 0 10px; }
.drive-text p { font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 16px; }
.drive-credit { text-align: center; margin-top: 8px !important; }
/* Plantation "Why trees matter" — a callout card with an icon */
.drive-note {
  display: flex; align-items: flex-start; gap: 18px;
  max-width: 760px; margin: var(--space-lg) auto 0;
  padding: 24px 28px;
  background: var(--bg-off-white); border: 1px solid var(--border-light); border-left: 3px solid var(--accent);
  border-radius: 16px;
}
.drive-note::before {
  content: "\1F333";
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-dim); font-size: 22px; line-height: 1;
}
.drive-note p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--text-body); }
.drive-note strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 18px; color: var(--text-dark); }

/* Flood / Blood "What he did" summary — numbered fact cards */
.drive-summary { max-width: 1040px; margin: var(--space-xl) auto 0; }
.drive-summary h3 { text-align: center; font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 32px; }
.drive-summary h3::after { content: ""; display: block; width: 44px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: var(--accent); }
.drive-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
  counter-reset: drive-fact;
}
.drive-facts li {
  grid-column: span 3;
  counter-increment: drive-fact;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px 26px;
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 16px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.drive-facts:has(> li:nth-child(5)) li { grid-column: span 4; }
.drive-facts:has(> li:nth-child(5)) li:nth-child(n+4) { grid-column: span 6; }
.drive-facts li:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 24px 50px -26px rgba(245, 197, 24, 0.45); }
.drive-facts li::before {
  content: counter(drive-fact, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 8px; border-radius: 12px;
  background: var(--accent-dim); color: var(--accent-dark);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.drive-facts li:hover::before { background: var(--accent); color: #111111; }
.drive-facts strong { font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--text-dark); }
.drive-facts span { display: block; font-size: 14.5px; line-height: 1.65; color: var(--text-body); }
.drive-facts span::first-letter { text-transform: uppercase; }
.drive-summary .field-cite { margin: 24px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .drive-facts li { transition: none; }
  .drive-facts li:hover { transform: none; }
}
@media (max-width: 1024px) {
  .drive-facts li,
  .drive-facts:has(> li:nth-child(5)) li { grid-column: span 6; }
  .drive-facts:has(> li:nth-child(5)) li:last-child { grid-column: 1 / -1; }
}
.drive-section .field-videos { margin-bottom: 10px; }
@media (max-width: 900px) {
  .drive-block { grid-template-columns: 1fr; gap: 18px; }
  .drive-text { position: static; }
}
@media (max-width: 600px) {
  .drive-section { padding: 48px 0; }
  .drive-intro { text-align: left; margin-bottom: 28px; }
  .drive-intro p { font-size: 16px; }
  .drive-summary h3 { margin-bottom: 24px; }
  .drive-facts { gap: 12px; }
  .drive-facts li,
  .drive-facts:has(> li:nth-child(5)) li,
  .drive-facts:has(> li:nth-child(5)) li:nth-child(n+4) {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px;
    padding: 18px 18px 20px;
  }
  .drive-facts li::before { grid-row: 1 / span 2; margin-bottom: 0; width: 40px; height: 40px; }
  .drive-facts strong { font-size: 17px; }
  .drive-note { gap: 14px; padding: 20px 18px; }
  .drive-note::before { width: 40px; height: 40px; font-size: 19px; }
  .drive-note p { font-size: 15px; }
}

/* ── Activity pages (plantation / blood / flood): field stories with galleries ── */
.field-section { padding: var(--space-xl) 0; }
.field-story { max-width: 760px; margin: 0 auto var(--space-lg); }
.field-story p { font-size: 16px; line-height: 1.8; color: var(--text-body); margin-bottom: 16px; }
.field-cite { font-size: 13px !important; color: var(--text-muted) !important; }
.field-cite a, .field-center a { color: var(--accent-dark); border-bottom: 1px solid rgba(212, 168, 0, 0.35); }
.field-cite a:hover, .field-center a:hover { color: var(--text-dark); }
.field-block { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: var(--space-lg) 0; border-top: 1px solid var(--border-light); }
.field-block:first-of-type { border-top: 0; }
.field-text { position: sticky; top: 100px; }
.field-text h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 8px 0 12px; }
.field-text p { font-size: 15px; line-height: 1.75; color: var(--text-body); margin-bottom: 16px; }
.field-source { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); transition: color var(--transition); }
.field-source:hover, .field-source:focus-visible { color: var(--text-dark); outline: none; }
.field-block .sd-gallery { margin: 0; }
.field-video { text-align: center; max-width: 620px; margin: var(--space-lg) auto 0; }
.field-video p { color: var(--text-body); margin-bottom: 18px; }
.field-center { text-align: center; margin-top: 18px !important; }
.field-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.field-vcard { display: flex; flex-direction: column; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.field-vcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 36px -20px rgba(17, 17, 17, 0.3); }
.field-vcard:active { transform: translateY(-1px); }
.field-vcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field-vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-dark); }
.field-vthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.field-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #111; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: transform var(--transition); }
.field-vcard:hover .field-play { transform: scale(1.08); }
.field-vbody { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.field-vbody strong { font-family: var(--font-display); font-size: 17px; color: var(--text-dark); line-height: 1.3; }
.field-vbody span { font-size: 13px; color: var(--text-muted); }
.field-vbody em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); margin-top: 6px; }
@media (max-width: 900px) {
  .field-block { grid-template-columns: 1fr; gap: 20px; }
  .field-text { position: static; }
  .field-videos { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 480px) { .field-section { padding: 56px 0; } }

/* photos are 3:2 — tiles match that shape so nothing important is trimmed */
.plant-gallery.plant-gallery-photos { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
.plant-gallery-photos a { aspect-ratio: 3 / 2; }
.plant-gallery-photos a.pg-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* the big tile fills whatever height the 3:2 small tiles set, instead of stretching the rows */
.plant-gallery-photos a.pg-big img { position: absolute; inset: 0; }
.plant-gallery-photos img { object-position: center 35%; }
.plant-gallery a:active img { transform: scale(1.02); }
.plant-gallery a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plant-gallery-note { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
@media (max-width: 900px) { .plant-gallery { grid-template-columns: repeat(2, 1fr); } .plant-gallery a { grid-column: span 1 !important; grid-row: span 1 !important; } .plant-gallery.plant-gallery-photos { grid-template-columns: repeat(2, 1fr); gap: 6px; } .plant-gallery-photos a.pg-big { grid-column: span 2 !important; aspect-ratio: 3 / 2; } }

/* ── Terms Modal ── */
.terms-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.terms-modal-box { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 16px; max-width: 680px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.terms-modal-header { padding: 32px 32px 20px; border-bottom: 1px solid var(--border-light); }
.terms-badge { display: inline-block; background: var(--accent); color: #111111; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; margin-bottom: 12px; }
.terms-modal-header h2 { color: var(--text-dark); font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.terms-intro { color: var(--text-body); font-size: 14px; }
.terms-modal-body { padding: 24px 32px; overflow-y: auto; flex: 1; }
.terms-list { list-style: none; padding: 0; }
.terms-list li { color: var(--text-body); font-size: 14px; line-height: 1.7; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--border-light); position: relative; }
.terms-list li::before { content: '✦'; color: var(--accent-dark); position: absolute; left: 0; top: 10px; font-size: 10px; }
.terms-thankyou { color: var(--accent-dark); font-size: 14px; font-style: italic; text-align: center; margin-top: 16px; }
.terms-modal-footer { padding: 24px 32px; border-top: 1px solid var(--border-light); background: var(--bg-off-white); }
.terms-checkbox-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-bottom: 20px; }
.terms-checkbox-label input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.terms-checkbox-label span { color: var(--text-body); font-size: 14px; }
.terms-accept-btn { width: 100%; background: var(--accent); color: #111111; border: none; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; margin-bottom: 10px; transition: opacity var(--transition); }
.terms-accept-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.terms-accept-btn:not(:disabled):hover { opacity: 0.85; }
.terms-decline-btn { width: 100%; background: transparent; color: var(--text-muted); border: 1px solid var(--border-light); padding: 12px; font-size: 14px; border-radius: 6px; cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.terms-decline-btn:hover { color: var(--text-dark); border-color: var(--text-muted); }
@media (max-width: 768px) { .terms-modal-header, .terms-modal-body, .terms-modal-footer { padding-left: 20px; padding-right: 20px; } }

/* ── Updates page ── */
.updates-hero h1 { font-size: clamp(36px, 5vw, 52px); margin: 12px auto 0; max-width: 820px; }

/* ── Compact page header — breadcrumb + short title only, minimal
   vertical footprint (Updates, Projects, and similar listing pages). ── */
.page-header-compact { padding-top: 108px; padding-bottom: 32px; }
.page-header-compact h1 { margin-bottom: 0; }
@media (max-width: 768px) {
  .page-header-compact { padding-top: 100px; padding-bottom: 26px; }
}
.updates-section { padding: var(--space-lg) 0 var(--space-2xl); }
.updates-section-heading { display: flex; align-items: center; justify-content: flex-end; gap: 32px; margin-bottom: var(--space-md); }
.updates-live-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.updates-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.updates-live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0.6;
  animation: updatesLivePulse 1.8s ease-out infinite;
}
@keyframes updatesLivePulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .updates-live-dot::after { animation: none; opacity: 0.35; }
}
.updates-section-heading h2 { font-size: clamp(34px, 5vw, 54px); }
.updates-section-heading p { max-width: 390px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.updates-featured { background: #f4f8f8; display: flex; flex-direction: column; height: 640px; min-height: 0; overflow: hidden; }
.updates-featured-image { height: 220px; min-height: 0; position: relative; overflow: hidden; }
.updates-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.updates-featured-overline { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: 2.5px; margin-bottom: var(--space-md); text-transform: uppercase; }
.updates-featured-content { display: flex; flex: 1; flex-direction: column; padding: 32px 32px 28px; }
.updates-featured-content h2 { font-size: 25px; line-height: 1.28; margin-bottom: 18px; min-height: 2.56em; }
.updates-featured-content p { max-width: none; color: #697277; font-size: 16px; line-height: 1.65; margin-bottom: var(--space-md); min-height: 4.95em; }
.updates-event-details { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: var(--space-lg); color: var(--text-dark); font-size: 13px; }
.updates-event-details span { padding-left: 0; }
.updates-event-details strong { display: block; color: var(--accent-dark); font-size: 18px; }
.updates-event-details b { display: block; font-weight: 700; }
.updates-countdown { align-items: center; color: var(--text-muted); display: flex; font-size: 11px; font-weight: 700; gap: 8px; letter-spacing: .3px; margin: 0 0 var(--space-md); min-height: 24px; }
.updates-countdown::before { background: var(--accent); border-radius: 50%; content: ''; height: 5px; width: 5px; flex: 0 0 5px; }
.updates-countdown.is-live { color: #2d7a2d; }
.updates-countdown.is-live::before { background: #2d7a2d; }
.updates-actions, .updates-card-footer { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.updates-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.updates-card { background: #f4f8f8; border: 1px solid rgba(23, 35, 43, .08); border-radius: 18px; box-shadow: 0 12px 25px rgba(23, 35, 43, 0.08), 0 2px 5px rgba(23, 35, 43, 0.04); display: flex; flex-direction: column; height: 660px; min-height: 0; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.updates-card:hover { border-color: rgba(245, 197, 24, .7); transform: translateY(-8px); box-shadow: 0 24px 45px rgba(23, 35, 43, 0.15), 0 5px 12px rgba(23, 35, 43, 0.07); }
.updates-card-image { height: 220px; position: relative; overflow: hidden; background: var(--bg-dark); }
.updates-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.updates-card-image::after { background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.32)); content: ''; inset: 0; pointer-events: none; position: absolute; }
.updates-card:hover .updates-card-image img { transform: scale(1.06); }
.updates-card-body { display: flex; flex: 1; flex-direction: column; padding: 28px 28px 24px; }
.updates-card-tags { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.updates-card-category { background: var(--accent-dim); border: 1px solid rgba(245,197,24,.45); border-radius: 999px; color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .8px; padding: 7px 11px; text-transform: uppercase; }
.updates-event-title { background: var(--bg-dark); border-color: var(--bg-dark); border-radius: 7px; color: var(--text-light); font-family: var(--font-display); font-size: 18px; letter-spacing: .1px; padding: 13px 17px; text-transform: none; }
.updates-card-free { background: var(--green); border-radius: 999px; box-shadow: 0 5px 12px rgba(45,122,45,.18); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1px; line-height: 1; padding: 8px 10px; text-transform: uppercase; }
.updates-card-date { align-items: center; color: #6e777d; display: flex; font-size: 13px; font-weight: 500; gap: 11px; margin-bottom: 22px; }
.updates-date-day { align-items: center; background: var(--accent); color: #111; display: flex; font-family: var(--font-display); font-size: 24px; font-weight: 700; height: 48px; justify-content: center; line-height: 1; width: 48px; }
.updates-card-date b, .updates-card-date small { display: block; }
.updates-card-date b { color: var(--text-dark); font-size: 14px; }
.updates-card-date small { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.updates-calendar-icon { border: 1.7px solid #7b8589; border-radius: 3px; display: inline-block; height: 16px; position: relative; width: 16px; }
.updates-calendar-icon::before { border-top: 1.7px solid #7b8589; content: ''; left: 0; position: absolute; right: 0; top: 4px; }
.updates-calendar-icon::after { background: #7b8589; box-shadow: 5px 0 #7b8589; content: ''; height: 3px; left: 3px; position: absolute; top: -3px; width: 2px; }
.updates-card h3 { font-size: 23px; line-height: 1.2; margin-bottom: 14px; min-height: 2.4em; }
.updates-card h3::before { color: var(--text-muted); content: 'Topic'; display: block; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 7px; text-transform: uppercase; }
.updates-card p { color: #697277; font-size: 14px; line-height: 1.65; margin-bottom: 22px; min-height: 4.95em; }
.updates-card-meta { border-left: 2px solid var(--accent); display: flex; flex-direction: column; gap: 8px; color: var(--text-body); font-size: 12px; padding-left: 12px; }
.updates-meta-row { line-height: 1.5; }
.updates-meta-row b { color: var(--text-dark); }
.updates-online-link { color: var(--accent-dark); font-weight: 700; }
.updates-online-link span { font-size: 15px; margin-left: 3px; }
.updates-card-footer { margin-top: auto; padding-top: 20px; justify-content: flex-start; }
.updates-register { align-items: center; background: var(--accent); color: #111; display: inline-flex; font-size: 11px; font-weight: 800; gap: 8px; letter-spacing: 1px; padding: 13px 16px; text-transform: uppercase; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
.updates-register:hover, .updates-register:focus-visible { background: var(--accent-dark); box-shadow: 0 8px 18px rgba(212, 168, 0, .24); color: #111; transform: translateY(-2px); }
.updates-register:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 3px; }
.updates-read-more { color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.updates-register:hover, .updates-read-more:hover { color: var(--accent); }
.updates-register span { color: var(--accent-dark); font-size: 16px; margin-left: 4px; }
.updates-read-more span { color: var(--accent-dark); font-size: 16px; margin-left: 4px; }
.updates-note { color: var(--text-muted); font-size: 12px; margin: var(--space-lg) auto 0; text-align: center; }
.updates-cta { padding: var(--space-2xl) 0; text-align: center; }
.updates-cta-icon { margin: 0 auto 20px; }
.updates-cta .container { max-width: 720px; }
.updates-cta h2 { color: var(--text-light); margin-bottom: var(--space-sm); }
.updates-cta p { color: var(--text-light-muted); margin: 0 auto var(--space-lg); }
@media (max-width: 768px) {
  .updates-section { padding-top: 20px; }
  .updates-section-heading { justify-content: flex-start; margin-bottom: 16px; }
  .updates-section-heading p { max-width: 32rem; }
  .updates-featured, .updates-featured-image { min-height: 0; }
  .updates-featured-image { height: 260px; }
  .updates-featured-content { padding: 26px 22px 24px; }
  .updates-grid { grid-template-columns: 1fr; }
  .updates-card { height: 660px; min-height: 0; }
  .updates-card-body { padding: 26px 22px 24px; }
  .updates-card-image { height: 210px; }
  .updates-card h3, .updates-card p { min-height: 0; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Books grid + Coming Soon (Task 3) ── */
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); align-items: start; max-width: 1200px; margin: 0 auto; }
.books-grid .book-card { width: auto; }
.book-coming-soon:hover { transform: none; box-shadow: none; }
.book-coming-soon .book-cs-cover { background: var(--bg-off-white); border: 2px dashed var(--border-light); min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.book-cs-count { font-family: var(--font-display); font-weight: 800; font-size: 52px; color: var(--text-dark); opacity: 0.12; line-height: 1; }
.book-cs-label { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.book-coming-soon .book-cs-body { padding: var(--space-md) var(--space-sm); }
.book-cs-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; }
.book-cs-title { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); margin: 0; }

/* ── Courses grid + Coming Soon (Task 4) ── */
.courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); max-width: 1200px; margin: 0 auto; }
.courses-grid .course-card { width: auto; }
.course-coming-soon { background: var(--bg-off-white); border: 2px dashed var(--border-light); border-radius: 4px; padding: var(--space-xl) var(--space-lg); display: flex; align-items: center; justify-content: center; text-align: center; grid-column: 1 / -1; }
.course-coming-soon:hover { transform: none; box-shadow: none; border-color: var(--border-light); }
.course-cs-inner { max-width: 480px; }
.course-cs-badge { display: inline-block; background: var(--accent-dim); color: var(--accent-dark); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; border: 1px solid var(--accent); margin-bottom: var(--space-md); }
.course-cs-heading { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-dark); margin-bottom: var(--space-sm); }
.course-cs-text { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-md); }

/* ── Booking Coming Soon Overlay (Task 6) ── */
.booking-coming-soon-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(247, 247, 247, 0.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--space-lg); }
.bcs-inner { text-align: center; max-width: 560px; width: 100%; }
.bcs-badge { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-dark); border: 1px solid var(--accent); padding: 5px 16px; border-radius: 100px; margin-bottom: var(--space-md); }
.bcs-headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 10vw, 100px); color: var(--text-dark); line-height: 1.0; letter-spacing: -0.03em; margin-bottom: var(--space-md); }
.bcs-sub { font-family: var(--font-body); font-size: 16px; color: var(--text-muted); line-height: 1.75; margin-bottom: var(--space-lg); }
.bcs-form-wrap { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.bcs-email-input { flex: 1; min-width: 240px; max-width: 360px; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 2px; padding: 13px 18px; font-family: var(--font-body); font-size: 15px; color: var(--text-dark); outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.bcs-email-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.bcs-email-input::placeholder { color: var(--text-muted); }
.bcs-notify-btn { background: var(--accent); color: #111111; border: none; border-radius: 2px; padding: 13px 28px; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; }
.bcs-notify-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.bcs-notify-btn:active { transform: translateY(0); }
.bcs-confirm { font-size: 14px; color: #2d8a4e; font-weight: 500; margin-bottom: var(--space-md); animation: fadeInUp 0.4s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bcs-divider { width: 48px; height: 1px; background: var(--border-light); margin: var(--space-md) auto; }
.bcs-alt-contact { font-size: 14px; color: var(--text-muted); }
.bcs-alt-contact a { color: var(--accent-dark); font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; }
.bcs-alt-contact a:hover { opacity: 0.75; }
@media (max-width: 768px) { .bcs-form-wrap { flex-direction: column; align-items: center; } .bcs-email-input { width: 100%; max-width: 100%; } .bcs-notify-btn { width: 100%; } }


/* Flayer PopUp Css */
.flyer-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  animation: flyerPopupFadeIn 0.3s ease both;
}
.flyer-popup-overlay[hidden] { display: none; }
.flyer-popup-box {
  position: relative;
  max-width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  animation: flyerPopupRise 0.4s ease both;
}
.flyer-popup-box img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  object-fit: contain;
}
.flyer-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.78);
  color: var(--text-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.flyer-popup-close:hover,
.flyer-popup-close:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #111;
  outline: none;
}
@keyframes flyerPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes flyerPopupRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ── Responsive layout hardening ── */
@media (max-width: 1100px) {
  .container { padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); }
  #what-we-offer,
  #social-platforms,
  #books,
  #courses,
  #testimonials,
  #book-session,
  #contact { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { gap: var(--space-lg); }
  .footer-grid { gap: var(--space-lg); }
}

@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .section-header { margin-bottom: var(--space-md); }
  .section-header h2,
  #institutions h2 { font-size: clamp(30px, 8vw, 46px); }

  .purpose-bar { padding: 16px 0; }
  .purpose-bar .container { flex-direction: column; gap: 8px; text-align: center; }
  .purpose-text { max-width: 34rem; font-size: clamp(14px, 3.4vw, 18px); line-height: 1.3; }
  .purpose-divider { width: 32px; height: 1px; }
  .purpose-label { font-size: 10px; letter-spacing: 1.6px; }

  #platform-badges { padding: 16px 0; }
  .badge-row { gap: 12px 18px; }
  .badge-trust-label,
  .badge-total { width: 100%; margin-left: 0; text-align: center; }
  .badge-item { font-size: 12px; }
  .badge-divider { display: none; }

  #quote-strip { padding: var(--space-lg) 0; }
  .quote-text { font-size: clamp(21px, 5.5vw, 30px); line-height: 1.3; }

  #about { padding: var(--space-xl) 0; }
  .about-grid { gap: var(--space-lg); }
  .about-text h2 { font-size: clamp(32px, 9vw, 52px); }
  .about-badge { max-width: calc(100% - 32px); padding: 14px 18px; }
  .about-badge .num { font-size: clamp(30px, 9vw, 40px); }
  .about-pullquote p { font-size: 16px; }

  #what-we-offer { padding: var(--space-xl) 0; }
  .offer-grid { grid-template-columns: 1fr; gap: 14px; margin-top: var(--space-md); }
  .offer-card { padding: 32px 22px; }
  .offer-card h3 { font-size: 19px; max-width: 90%; }

  #social-platforms { padding: var(--space-xl) 0; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .social-card { padding: 28px 12px; }
  .social-card-count { font-size: clamp(22px, 6vw, 28px); }
  .social-card-name { font-size: 10px; letter-spacing: .8px; }

  #institutions { padding: var(--space-lg) 0; }
  .marquee-item { padding: 10px 16px; font-size: 12px; }
  .marquee-track,
  .marquee-track-reverse { gap: 10px; }

  #books,
  #courses,
  #testimonials,
  #book-session,
  #contact { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .book-card { min-width: 0; }
  .book-cover-title { font-size: 18px; }
  .courses-grid { grid-template-columns: 1fr; gap: 14px; }
  .course-card { min-width: 0; padding: 32px 22px; }
  .course-card h3 { font-size: 20px; }
  .course-coming-soon { padding: 48px 22px; }
  .testimonial-card { padding: 30px 22px; }
  .testimonial-quote { font-size: 15px; }

  #book-session .session-cards { gap: 14px; margin-bottom: var(--space-lg); }
  #book-session .session-card { width: min(100%, 360px); }
  .cal-embed-wrapper { padding: 8px; border-radius: 8px; }
  #my-cal-inline { min-height: 620px; overflow-x: auto; }
  .booking-coming-soon-overlay { padding: 28px 20px; }
  .bcs-headline { font-size: clamp(52px, 15vw, 82px); }
  .bcs-sub { font-size: 14px; line-height: 1.6; }

  #contact { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .contact-grid { gap: var(--space-lg); }
  .contact-detail { align-items: flex-start; font-size: 14px; }
  .contact-detail a,
  .contact-detail .val { overflow-wrap: anywhere; }
  .contact-form textarea { min-height: 130px; }

  #footer { padding-top: var(--space-xl); }
  .footer-grid { gap: var(--space-lg) var(--space-md); }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-bottom .legal { flex-wrap: wrap; gap: 10px 18px; }

  .flyer-popup-overlay { padding: 14px; }
  .flyer-popup-box { max-width: 100%; max-height: calc(100svh - 28px); }
  .flyer-popup-box img { max-height: calc(100svh - 28px); }
  .flyer-popup-close { top: 8px; right: 8px; width: 32px; height: 32px; }

  .terms-modal-overlay { padding: 12px; }
  .terms-modal-box { max-height: calc(100svh - 24px); border-radius: 12px; }
  .terms-modal-header,
  .terms-modal-body,
  .terms-modal-footer { padding-left: 18px; padding-right: 18px; }
  .channels-list { padding-left: 18px; padding-right: 18px; }
  .terms-list li,
  .terms-checkbox-label span { font-size: 13px; }
}

@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .badge-row { gap: 10px 12px; }
  .badge-item { font-size: 11px; }
  .social-card { padding: 24px 8px; }
  .social-card-icon,
  .social-card-icon svg { width: 34px; height: 34px; }
  .book-card-body { padding: 14px 12px; }
  .book-card-body h4 { font-size: 14px; }
  .book-cs-count { font-size: 42px; }
  .book-cs-label { font-size: 10px; letter-spacing: 1.4px; text-align: center; }
  .updates-featured,
  .updates-card { height: auto; min-height: 0; }
  .updates-featured-image,
  .updates-card-image { height: 190px; }
  .updates-featured-content,
  .updates-card-body { padding: 22px 18px; }
  .updates-card-category,
  .updates-card-free { top: 12px; }
  .updates-card-tags { margin-bottom: 14px; }
  .updates-card-body { padding: 22px 18px 20px; }
  .updates-event-title { font-size: 16px; padding: 11px 14px; }
  .updates-card h3 { font-size: 22px; }
  .updates-register { justify-content: center; width: 100%; }
  .updates-card h3,
  .updates-featured-content h2 { font-size: 22px; }
}

@media (max-width: 360px) {
  .purpose-text { font-size: 13px; }
  .badge-item { font-size: 10px; }
  .social-grid { gap: 8px; }
  .social-card { padding-left: 5px; padding-right: 5px; }
  .social-card-count { font-size: 21px; }
  .social-card-name { font-size: 9px; }
  .course-card { padding: 28px 18px; }
}

/* =========================================================
   ACTIVE / CURRENT NAV LINK
   ========================================================= */

/* Keep the active desktop link gold once the navbar is .scrolled
   (overrides #navbar.scrolled .nav-links > a, specificity 1,2,1). */
#navbar.scrolled .nav-links > a.active { color: var(--accent); }

/* Active "Updates": its underline is force-hidden AND the link has
   overflow:hidden (which would clip the ::after bar), and it already glows,
   so re-enable overflow, restore the gold underline, and bump the weight
   so "current" reads distinctly from its idle state. */
#navbar .nav-links > a[data-nav="updates"].active {
  color: var(--accent);
  font-weight: 800;
  overflow: visible;
}
#navbar .nav-links > a[data-nav="updates"].active::after {
  display: block;
  width: 100%;
}


/* =========================================================
   DEENI TULBA & AI — page-specific (programs/deeni-tulba-and-ai.html)
   ========================================================= */

.dta-upcoming { max-width: 620px; margin: 0 auto; }

.dta-session-card { display: flex; flex-direction: column; gap: 16px; }

.dta-session-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}

.dta-session-mode {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark);
}

.dta-badges { display: flex; align-items: center; gap: 8px; }

.dta-tag {
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 100px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted);
}

.dta-session-card .btn { align-self: flex-start; margin-top: 4px; }

/* =========================================================
   BOOKS & COURSES landing pages (books.html / courses.html)
   ========================================================= */

/* Book cover gradients (same palette as the home page book covers) */
.bc-cover-1 { background: linear-gradient(135deg, #1B4332, #0a2318); }
.bc-cover-2 { background: linear-gradient(135deg, #1a2040, #0a0f20); }
.bc-cover-3 { background: linear-gradient(135deg, #5C3A00, #2d1a00); }
.bc-cover-4 { background: linear-gradient(135deg, #4A1220, #250810); }
.bc-cover-5 { background: linear-gradient(135deg, #143642, #071a20); }
.bc-cover-6 { background: linear-gradient(135deg, #3d2b56, #1c1029); }

/* "Coming soon" pill under a book title */
.bc-soon {
  display: inline-block; margin-top: 10px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
}

/* Course action in its "coming soon" (non-interactive) state */
.course-enroll-soon {
  color: var(--text-muted);
  border-bottom-color: var(--border-light);
  cursor: default;
}

/* A book card that links to its own page (published titles) */
.book-card-link { display: block; color: inherit; }
.book-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bc-live {
  display: inline-block; margin-top: 10px;
  background: var(--accent); border: 1px solid var(--accent); color: #111111;
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
}

/* =========================================================
   BOOK DETAIL PAGE (seerat-mustafa-modern-science/)
   Breadcrumb bar + a left info column / right cover panel —
   no hero, no long description, just the essentials.
   ========================================================= */
.breadcrumb-bar { background: var(--bg-off-white); border-bottom: 2px solid var(--accent-dim); padding-top: 96px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; padding-top: 16px; padding-bottom: 16px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-body); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb .crumb-sep { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-muted); }
.breadcrumb .current { color: var(--accent-dark); font-weight: 700; }
@media (max-width: 480px) {
  .breadcrumb-bar { padding-top: 88px; }
}

.bdp-section { padding: var(--space-xl) 0; position: relative; overflow: hidden; }
.bdp-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 85% 15%, rgba(245, 197, 24, 0.08), transparent 70%),
              radial-gradient(ellipse 50% 45% at 8% 95%, rgba(245, 197, 24, 0.06), transparent 70%);
}
.bdp-section .container { position: relative; z-index: 1; }

.bdp-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-xl);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: var(--space-xl);
  box-shadow: 0 40px 90px -50px rgba(26, 26, 26, 0.35);
}

.bdp-cover-wrap { position: relative; }
.bdp-cover { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light); box-shadow: 0 24px 55px -24px rgba(26, 26, 26, 0.4); }
.bdp-cover img { display: block; width: 100%; height: auto; }
.bdp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.bdp-title { font-size: clamp(28px, 3.2vw, 42px); color: var(--text-dark); margin: 2px 0 0; text-align: right; }
.bdp-author {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--text-body); margin: 4px 0 0;
}
.bdp-author svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-dark); }
.bdp-author b { color: var(--text-dark); font-weight: 700; }

.bdp-divider { width: 52px; height: 3px; border-radius: 2px; background: var(--accent); margin: 18px 0 4px; }

.bdp-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 8px 0 2px; width: 100%; }
.bdp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 100px; border: 1.5px solid var(--accent);
  background: var(--accent); color: #111; font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 30px -14px rgba(245, 197, 24, 0.6);
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bdp-btn:hover, .bdp-btn:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(212, 168, 0, 0.55); }
.bdp-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.bdp-btn.is-disabled {
  background: transparent; color: var(--text-muted); border-color: var(--border-light);
  cursor: default; box-shadow: none;
}
.bdp-btn.is-disabled:hover { background: transparent; border-color: var(--border-light); transform: none; box-shadow: none; }

.bdp-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; width: 100%; }
.bdp-meta-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-off-white); border: 1px solid var(--border-light); border-radius: 14px;
  padding: 14px 16px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bdp-meta-card:hover { border-color: rgba(245, 197, 24, 0.45); transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(26, 26, 26, 0.25); }
.bdp-meta-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-dim); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.bdp-meta-icon svg { width: 17px; height: 17px; }
.bdp-meta-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bdp-meta-copy b { font-size: 15px; color: var(--text-dark); font-weight: 700; line-height: 1.3; }
.bdp-meta-copy small { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.3px; }

@media (max-width: 1024px) {
  .bdp-card { grid-template-columns: 260px 1fr; gap: var(--space-lg); padding: var(--space-lg); }
}
@media (max-width: 860px) {
  .bdp-card { grid-template-columns: 1fr; border-radius: 18px; }
  .bdp-cover-wrap { order: -1; max-width: 260px; margin: 0 auto; }
  .bdp-info { align-items: center; text-align: center; }
  .bdp-info .section-label,
  .bdp-title,
  .bdp-divider { align-self: center; text-align: center; }
  .bdp-author { justify-content: center; }
  .bdp-actions { justify-content: center; }
}
@media (max-width: 560px) {
  .bdp-card { padding: 22px; gap: var(--space-md); }
  .bdp-meta-grid { grid-template-columns: 1fr; }
  .bdp-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   PAGE VIDEO BANNER — breadcrumb-led pages that swap the usual
   photo/text hero for the homepage's looping brand video
   (programs/youth-talks/, and any page that reuses this pattern).
   ========================================================= */
.page-video-banner {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; min-height: 200px; max-height: 640px;
  overflow: hidden; background: var(--bg-dark);
  display: flex; align-items: flex-end;
}
.page-video-banner .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.pvb-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.72) 100%);
}
.pvb-inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--space-lg); }
.pvb-title {
  color: var(--text-light); margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 58px);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.pvb-subtitle {
  color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0;
  font-size: 15px; line-height: 1.6; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .page-video-banner { aspect-ratio: 4 / 3; max-height: 420px; }
  .pvb-inner { padding-bottom: var(--space-md); }
  .pvb-subtitle { display: none; }
}
@media (max-width: 480px) {
  .page-video-banner { aspect-ratio: 1 / 1; min-height: 260px; max-height: 360px; }
}

/* =========================================================
   OVERSEAS SESSION — page-specific (programs/overseas-session.html)
   Upcoming-session cards, mirroring the Youth Talks layout.
   ========================================================= */

.ovs-intro { max-width: 720px; margin: 0 auto; }
.ovs-intro .prose { margin-bottom: var(--space-md); }
.ovs-intro .btn { margin-top: 4px; }

.ovs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (max-width: 768px) { .ovs-grid { grid-template-columns: 1fr; } }

.ovs-card { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.ovs-card-image {
  position: relative; height: 200px;
  margin: -32px -28px 0;
  background: linear-gradient(135deg, #1c1c1c, #2c2c2c);
  background-size: cover; background-position: center;
}
.ovs-card-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.5) 100%);
}
.ovs-card-num {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  background: var(--accent); color: #111;
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  padding: 8px 16px; line-height: 1;
}
.ovs-tag {
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 100px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.ovs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ovs-card-top .badges { display: flex; align-items: center; gap: 8px; }
.ovs-region { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }
.ovs-card h3 { font-size: 21px; color: var(--text-dark); line-height: 1.25; }
.ovs-mode { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-body); }
.ovs-mode svg { flex-shrink: 0; stroke: var(--accent-dark); }

/* =========================================================
   PAGE HEADER — "back to Projects" link (programs/*.html)
   ========================================================= */

/* Static, in-flow — sits at the very start of the header, above the
   eyebrow/title, so it can never drift over or collide with them on
   any screen size (it used to be absolutely positioned, which meant
   its fixed offset could land on top of the heading text once the
   title or subtitle wrapped differently). */
.page-header .page-back {
  display: flex;
  width: fit-content;
  align-items: center; gap: 6px;
  margin: 0 auto 24px 0;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.2px; text-transform: none;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 8px 15px 8px 11px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.page-header .page-back svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--transition); }
.page-header .page-back:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(245, 197, 24, 0.55);
  color: #ffffff;
}
.page-header .page-back:hover svg { transform: translateX(-3px); }
.page-header .page-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .page-header .page-back { font-size: 12px; padding: 7px 13px 7px 9px; margin-bottom: 18px; }
}

/* Breadcrumb trail sitting inside a dark page-header, in the exact spot
   .page-back used to occupy — replaces the single "Back to X" link. */
.hero-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  width: fit-content; margin: 0 auto 22px 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
}
.hero-breadcrumb a { color: rgba(255, 255, 255, 0.72); transition: color var(--transition); }
.hero-breadcrumb a:hover { color: var(--accent); }
.hero-breadcrumb .crumb-sep { width: 13px; height: 13px; flex-shrink: 0; color: rgba(255, 255, 255, 0.4); }
.hero-breadcrumb .current { color: #ffffff; font-weight: 700; }
@media (max-width: 600px) {
  .hero-breadcrumb { font-size: 12px; margin-bottom: 16px; }
}

/* ── Booking modal: "Book a Session" popup — just two options, each an
   external link (Google Form) or a disabled "Coming Soon" row. Reuses the
   .terms-modal-* shell and the .channels-* list styling below. ── */
.bk-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); border-radius: 50%;
  background: var(--bg-light); color: var(--text-dark); font-size: 24px; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.bk-close:hover { background: var(--text-dark); color: #ffffff; border-color: var(--text-dark); transform: rotate(90deg); }
.bk-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Channels-style list (YouTube/Instagram picker cards, and the booking
   modal's two options) ── */
.channels-modal-box { max-width: 480px; width: 100%; max-height: 90vh; position: relative; }
.channels-list { display: flex; flex-direction: column; gap: 10px; padding: 22px 32px 32px; }
.channels-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 8px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.channels-row:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); }
.channels-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.channels-icon svg { width: 28px; height: 28px; display: block; }
.channels-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.channels-info b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text-dark); }
.channels-info small { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.channels-arrow { flex-shrink: 0; font-size: 18px; color: var(--text-muted); transition: transform var(--transition), color var(--transition); }
.channels-row:hover .channels-arrow { color: var(--accent); transform: translateX(3px); }
.channels-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Not-yet-available option (e.g. One-to-One Session) — same row, no link. The
   "Coming Soon" tag sits inline next to the title instead of as a separate
   right-hand column, so it can never get squeezed on narrow screens. */
.channels-row.is-disabled { cursor: default; align-items: flex-start; }
.channels-row.is-disabled:hover { border-color: var(--border-light); background: none; transform: none; }
.channels-soon-tag {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 10px; border: 1px solid var(--border-light); border-radius: 100px;
  background: var(--bg-off-white); color: var(--text-muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap;
}
.channels-soon-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

@media (max-width: 400px) {
  .channels-info b { gap: 6px; }
  .channels-soon-tag { padding: 3px 8px; font-size: 9.5px; }
}

/* =========================================================
   HIDE THE 01 / 02 / 03 BADGE ON EVENT / UPDATE CARD IMAGES
   (the gold number chip sitting on the photo — event "upcoming"
   cards and the updates.html cards). Overview-grid numbers and
   the projects.html format-card labels are left untouched.
   ========================================================= */

.ut-card-num,
.ovs-card-num,
.fs-card-num,
.upd-card-num { display: none; }

/* =========================================================
   YOUTH TALKS — page-specific (programs/youth-talks.html)
   Moved out of an inline <style> block. Paths are relative to
   this stylesheet (repo root), so no "../".
   ========================================================= */

/* Photo hero for the page header — single source (brand_assets/yt-large-opt.webp,
   2400x1350). `cover` keeps it full-bleed at every width; the speaker sits
   left-of-centre and high, so the focal point is pulled up and slightly left
   and nudged back toward centre as the crop tightens on small screens. */
.page-header.has-photo {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.84) 100%),
    url('brand_assets/yt-large-opt.webp');
  background-size: cover;
  background-position: 42% 28%;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .page-header.has-photo { background-position: 46% 26%; }
}
@media (max-width: 480px) {
  .page-header.has-photo {
    background-position: 50% 24%;
    background-image:
      linear-gradient(180deg, rgba(10,10,10,0.52) 0%, rgba(10,10,10,0.48) 45%, rgba(10,10,10,0.88) 100%),
      url('brand_assets/yt-large-opt.webp');
  }
}

/* =========================================================
   UPCOMING SESSION CARD  (female-session / updates / youth-talks)
   Consolidated here — was duplicated in per-page <style> blocks.
   ========================================================= */
.fs-card { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin: 0 auto; overflow: hidden; }
.fs-card-image {
  position: relative;
  aspect-ratio: 2 / 1;
  margin: -32px -28px 0;
  background: linear-gradient(135deg, #1c1c1c, #2c2c2c);
  background-size: cover; background-position: center;
}
.fs-card-num {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  background: var(--accent); color: #111;
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  padding: 8px 16px; line-height: 1;
}
.fs-tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--accent); border: 1px solid var(--accent-dark); border-radius: 100px;
  padding: 5px 13px; font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: #111;
  box-shadow: 0 5px 14px rgba(245, 197, 24, 0.28);
}
.fs-tag-icon { font-size: 13px; line-height: 1; }
.fs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.fs-card-top .badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .fs-card-top .badges { width: 100%; }
  .fs-tag { padding: 4px 11px; font-size: 10.5px; letter-spacing: 0.3px; box-shadow: 0 3px 9px rgba(245, 197, 24, 0.20); }
}
.fs-city { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }
.fs-card h3 { font-size: 21px; color: var(--text-dark); line-height: 1.25; }
.fs-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.fs-topics span {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(17, 17, 17, 0.04); border: 1px solid var(--border-light);
  color: var(--text-body);
}
.fs-location { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-body); }
.fs-location svg { flex-shrink: 0; stroke: var(--accent-dark); }
.fs-card .btn { align-self: flex-start; margin-top: 4px; }
.fs-soon {
  align-self: flex-start; margin-top: 4px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark);
  background: var(--accent-dim); border: 1px dashed var(--accent);
  padding: 10px 16px; border-radius: 6px;
}

/* Two-up grid — Updates page and Youth Talks "upcoming" */
.fs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin: 0 auto; align-items: stretch; grid-auto-rows: 1fr; }
.fs-cards .fs-card { max-width: none; margin: 0; }
.fs-cards .fs-card .fs-location { margin-top: auto; }
@media (max-width: 760px) { .fs-cards { grid-template-columns: 1fr; max-width: 620px; } }

/* =========================================================
   FEMALES SESSION — hero photo (programs/female-session.html)
   ========================================================= */
.page-header.fs-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0.82) 100%),
    url('brand_assets/females-session-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   YOUTH SEMINAR — hero photo (programs/youth-seminar.html)
   Speaker sits low-centre with the crowd above, so the focal
   point is pulled toward the lower-middle of the frame.
   ========================================================= */
.page-header.ys-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.60) 0%, rgba(10,10,10,0.52) 45%, rgba(10,10,10,0.85) 100%),
    url('brand_assets/youth-seminar-hero-opt.webp');
  background-size: cover;
  background-position: center 64%;
  background-repeat: no-repeat;
}

/* =========================================================
   FOS — hero photo (programs/fos.html)
   Group photo with people in the lower half, so the focal
   point is pulled down to keep faces in frame.
   ========================================================= */
.page-header.fos-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.84) 100%),
    url('brand_assets/fos-hero-bg-opt.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* =========================================================
   YOUTH NIGHT — hero photo (programs/youth-night/)
   ========================================================= */
.page-header.yn-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.84) 100%),
    url('brand_assets/masjid-night-page-bg-opt.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   WORKERS CONVENTION — hero photo (programs/workers-convention.html)
   ========================================================= */
.page-header.wc-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.84) 100%),
    url('brand_assets/workers-convention-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   DEENI TULBA & AI — hero photo (programs/deeni-tulba-and-ai.html)
   ========================================================= */
.page-header.dta-hero {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.84) 100%),
    url('brand_assets/deeni-tulba-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   PROGRAM HERO PHOTOS — responsive crop
   `cover` already scales every one of these full-bleed at any
   width, but a short, wide desktop box and a taller, narrow
   mobile box crop very differently from the same fixed
   position. Give each a floor height so mobile never squashes
   the photo into an overly tight, over-zoomed sliver, and pull
   the two "biased" crops (ys-hero, fos-hero) back toward center
   as the box gets taller and needs less of an offset.
   ========================================================= */
@media (max-width: 768px) {
  .page-header.fs-hero,
  .page-header.ys-hero,
  .page-header.fos-hero,
  .page-header.yn-hero,
  .page-header.wc-hero,
  .page-header.dta-hero {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page-header.ys-hero { background-position: center 58%; }
  .page-header.fos-hero { background-position: center 36%; }
}
@media (max-width: 480px) {
  .page-header.fs-hero,
  .page-header.ys-hero,
  .page-header.fos-hero,
  .page-header.yn-hero,
  .page-header.wc-hero,
  .page-header.dta-hero {
    min-height: 380px;
  }
  .page-header.ys-hero { background-position: center 54%; }
  .page-header.fos-hero { background-position: center 32%; }
}

/* =========================================================
   TESTIMONIALS — dark band, event-photo backdrop,
   monogram avatars, quote cards (index.html #testimonials)
   ========================================================= */
#testimonials {
  position: relative;
  background: var(--bg-dark);
  border-top: none;
  padding: var(--space-2xl) 0;
  overflow: hidden;
}
#testimonials > .container { position: relative; z-index: 2; }

.testimonials-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(180deg, rgba(17,17,17,0.93) 0%, rgba(17,17,17,0.95) 50%, rgba(17,17,17,0.97) 100%),
    url('brand_assets/DSC_0618-opt.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* rating summary under the heading */
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-sm);
}
.rating-summary-stars { display: inline-flex; gap: 3px; }
.rating-summary-stars svg { width: 16px; height: 16px; fill: var(--accent); }
.rating-summary-text { font-family: var(--font-body); font-size: 13px; color: var(--text-light-muted); }
.rating-summary-text strong { color: var(--text-light); font-weight: 700; }

/* card grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

#testimonials .testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.65);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
#testimonials .testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 197, 24, 0.5);
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 34px 64px -30px rgba(245, 197, 24, 0.28);
}

.testimonial-quote-mark {
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  color: rgba(245, 197, 24, 0.16);
  pointer-events: none;
  user-select: none;
}

#testimonials .testimonial-stars {
  position: relative;
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-sm);
}
#testimonials .testimonial-stars svg { width: 14px; height: 14px; fill: var(--accent); }

#testimonials .testimonial-quote {
  position: relative;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-md);
}

.testimonial-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(245, 197, 24, 0.10);
  border: 1.5px solid rgba(245, 197, 24, 0.55);
}
.testimonial-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#testimonials .testimonial-author {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
}
#testimonials .testimonial-role { font-size: 12px; color: var(--text-light-muted); }

@media (max-width: 768px) {
  #testimonials { padding: var(--space-xl) 0; }
  .testimonial-grid { grid-template-columns: 1fr; margin-top: var(--space-lg); }
  .testimonial-quote-mark { font-size: 64px; }
}

/* =========================================================
   BOOKS & COURSES — refreshed card UI
   (home #books/#courses, books.html, courses.html)
   ========================================================= */

/* ---- Books grid: fixed column count per breakpoint ---- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
  justify-content: center;
}
.books-grid > .book-card,
.books-grid > .book-card-link { width: auto; max-width: none; }
.books-grid > .book-card-link { display: flex; }
.books-grid > .book-card-link > .book-card { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; height: 100%; }

.book-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.book-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 197, 24, 0.45);
  box-shadow: 0 28px 55px -24px rgba(26, 26, 26, 0.28);
}

.book-cover {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 24px 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.book-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
  transition: transform var(--transition), opacity var(--transition);
}
.book-cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
}
.book-card:hover .book-cover::before { transform: scale(1.06); opacity: 0.9; }

.book-cover-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
.book-cover-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--accent);
  border-radius: 2px;
}
.book-cover-author {
  position: static;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.book-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.book-cover-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(17, 17, 17, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}
.book-cover-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.32);
  flex-shrink: 0;
}

.book-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: var(--space-md);
  flex: 1 1 auto;
}
.book-card-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0;
}
.book-card-body h4 {
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-dark);
  font-weight: 700;
  margin: 0;
}

.bc-live,
.bc-soon,
.bc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
}
.book-card-body .bc-live,
.book-card-body .bc-soon { margin-top: auto; }
.bc-live {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #111;
  transition: background var(--transition), border-color var(--transition);
}
.bc-live::after {
  content: "\2193";
  font-weight: 700;
  transition: transform var(--transition);
}
.bc-live:hover, .bc-live:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); }
.bc-live:hover::after, .bc-live:focus-visible::after { transform: translateY(3px); }
.bc-soon {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
}

/* Book card with two real actions: Download + More Info */
.book-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.book-card-actions .bc-live, .book-card-actions .bc-more { margin-top: 0; }
.bc-more {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-body);
  transition: border-color var(--transition), color var(--transition);
}
.bc-more:hover, .bc-more:focus-visible { border-color: var(--accent); color: var(--text-dark); }
.book-cover-link { display: block; color: inherit; }
.book-cover-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bc-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

@media (max-width: 1024px) {
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}
@media (max-width: 640px) {
  .books-grid { grid-template-columns: 1fr; gap: 20px; max-width: 400px; }
  .book-cover { padding: 26px 20px 30px; }
  .book-card-body { padding: 18px 16px; }
}

/* ---- Courses ---- */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  max-width: 1120px;
  margin: 0 auto;
}
.courses-grid .course-card { width: auto; }

.course-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-off-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 197, 24, 0.5);
  background: var(--bg-light);
  box-shadow: 0 26px 55px -26px rgba(245, 197, 24, 0.28);
}

.course-card-image {
  align-self: stretch;
  aspect-ratio: 2 / 1;
  margin: calc(var(--space-lg) * -1) calc(var(--space-md) * -1) 0;
  overflow: hidden;
}
.course-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.course-card:hover .course-card-image img { transform: scale(1.06); }

.course-card-number {
  align-self: flex-end;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  margin: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.course-card:hover .course-card-number { opacity: 0.34; }

.course-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(245, 197, 24, 0.16);
  color: var(--accent-dark);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.course-card-icon svg { width: 24px; height: 24px; display: block; }
.course-card:hover .course-card-icon {
  background: var(--accent);
  color: #111;
  transform: rotate(-4deg) scale(1.05);
}

.course-card-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.course-card h3 {
  color: var(--text-dark);
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
}
.course-card p {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.course-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.course-tag {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.course-enroll {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.course-enroll-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: 100px;
  background: transparent;
  color: var(--text-muted);
  cursor: default;
}
.course-enroll-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

@media (max-width: 768px) {
  .courses-grid { grid-template-columns: 1fr; gap: 14px; }
  .course-card { padding: 40px 22px 24px; }
  .course-card-image { margin: -40px -22px 0; }
}

/* =========================================================
   EVENT TEASER CARDS — reused on updates.html "What's coming
   up" AND on each event detail page's "More Upcoming Events"
   strip, so the listing and detail pages share one visual
   language. Minimal by design: image, mode tag, date badge,
   name, one line of time — nothing else. Click through for
   the rest.
   ========================================================= */
.event-teasers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.event-teasers.event-teasers-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
.event-teasers.event-teasers-1up { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
.event-teaser-link { display: flex; color: inherit; }
.event-teaser-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.event-teaser-link.is-disabled { cursor: default; }
.event-teaser-link.is-disabled:hover .event-teaser,
.event-teaser-link.is-disabled:focus-visible .event-teaser { transform: none; border-color: var(--border-light); box-shadow: none; }
.event-teaser-link.is-disabled:hover .event-teaser-image::before { transform: none; }
.event-teaser {
  display: flex; flex-direction: column;
  width: 100%; overflow: hidden;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.event-teaser-link:hover .event-teaser,
.event-teaser-link:focus-visible .event-teaser {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -20px rgba(17, 17, 17, 0.28);
}
.event-teaser-image {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1c1c, #2c2c2c);
  background-size: cover;
  background-position: center;
}
.event-teaser-image::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: inherit; background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform 0.6s ease;
}
.event-teaser-image::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.62) 100%);
}
/* Updates page cards have no tag sitting on the image anymore, so
   the darkening gradient is no longer needed — show the original photo. */
.updates-section .event-teaser-image::after { display: none; }
.event-teaser-link:hover .event-teaser-image::before,
.event-teaser-link:focus-visible .event-teaser-image::before { transform: scale(1.08); }
.event-teaser-tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: #111111;
  font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 6px 11px; border-radius: 100px;
}
.event-teaser-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #111111; }
.event-teaser-tag.onsite {
  background: rgba(10, 10, 10, 0.55); color: #ffffff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.event-teaser-tag.onsite::before { background: var(--accent); }
.event-teaser-date {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.96); color: #111111;
  width: 50px; height: 50px;
  border-radius: 11px;
  overflow: hidden;
  font-family: var(--font-display);
  box-shadow: 0 10px 22px -6px rgba(0,0,0,0.35);
}
.event-teaser-date::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.event-teaser-date .etd-day { font-size: 18px; font-weight: 800; line-height: 1; margin-top: 3px; }
.event-teaser-date .etd-month { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-top: 3px; }
.event-teaser-date.is-tba { width: auto; padding: 0 12px; }
.event-teaser-date .etd-tba { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; }
.event-teaser-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 20px; flex: 1; }
.event-teaser-body h3 { font-size: 19px; line-height: 1.3; color: var(--text-dark); margin: 0; }
.event-teaser-time { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.event-teaser-time svg { flex-shrink: 0; stroke: var(--accent-dark); }
.event-teaser-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: auto -22px -20px; padding: 14px 22px;
  border-top: 1px solid var(--border-light);
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-dark);
  transition: background var(--transition), color var(--transition);
}
.event-teaser-cta::after {
  content: "\2192"; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-dim);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.event-teaser-link:hover .event-teaser-cta,
.event-teaser-link:focus-visible .event-teaser-cta { color: var(--text-dark); background: var(--bg-off-white); }
.event-teaser-link:hover .event-teaser-cta::after,
.event-teaser-link:focus-visible .event-teaser-cta::after { transform: translateX(3px); background: var(--accent); color: #111; }
@media (max-width: 900px) {
  .event-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
}
/* Updates page mixes photo cards with the taller text card: size each row to
   its own content (cards in one row still match) instead of every row
   copying the tallest card, which left big empty gaps */
.updates-section .event-teasers { grid-auto-rows: auto; }
@media (max-width: 620px) {
  /* one card per row — no reason to stretch any card */
  .event-teasers { grid-auto-rows: auto; gap: 18px; }
}
@media (max-width: 620px) {
  .event-teasers, .event-teasers.event-teasers-2up, .event-teasers.event-teasers-1up { grid-template-columns: 1fr; max-width: 440px; }
}

/* =========================================================
   EVENT DETAIL PAGES — /events/*.html
   No hero banner. Navbar → a rounded poster image of the
   event → title/meta/description/tags → location/online card
   → "more events" strip. Deliberately minimal.
   ========================================================= */

/* Poster + details share one tight section — image, then
   name/date/time/tags/location flow right underneath it with
   no large gap between them. */
.event-poster-section { padding: 128px 0 40px; }
.event-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--text-body);
  margin-bottom: 18px;
  transition: color var(--transition);
}
.event-back-link svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--accent-dark); transition: transform var(--transition); }
.event-back-link:hover { color: var(--text-dark); }
.event-back-link:hover svg { transform: translateX(-3px); }
.event-poster {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(17,17,17,0.35), 0 8px 24px rgba(17,17,17,0.08);
}
.event-poster img {
  display: block; width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
@media (max-width: 768px) {
  .event-poster-section { padding: 104px 0 28px; }
  .event-poster { border-radius: 16px; }
}
.breadcrumb-bar + .event-poster-section { padding-top: 40px; }
@media (max-width: 768px) {
  .breadcrumb-bar + .event-poster-section { padding-top: 28px; }
}

/* Optional side-by-side hero: poster left, details right, on pages that
   wrap .event-poster + .event-header in this container. Pages that don't
   use it keep the plain stacked layout untouched. */
.event-hero-grid { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: var(--space-xl); align-items: center; }
.event-hero-grid .event-poster img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.event-hero-grid .event-header { max-width: none; margin: 0; padding-top: 0; }
.event-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 900px) {
  .event-hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .event-hero-grid .event-poster { max-width: 420px; margin: 0 auto; }
  .event-hero-grid .event-header { padding-top: 26px; }
}

/* Header block right under the poster: label, title, meta pills, lede, tags */
.event-header { max-width: 760px; margin: 0 auto; padding-top: 26px; }
.event-header .section-label { display: block; margin-bottom: 8px; }
.event-header h1 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 4px; }
.event-lede { font-size: 16px; line-height: 1.75; color: var(--text-body); margin: 14px 0 0; }
.event-lede a { color: var(--accent-dark); border-bottom: 1px solid var(--accent); }
.event-lede a:hover { color: var(--text-dark); }

.event-meta-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.event-meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-off-white); border: 1px solid var(--border-light);
  color: var(--text-dark); padding: 9px 16px; border-radius: 100px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
}
.event-meta-pill svg { flex-shrink: 0; stroke: var(--accent-dark); }
.event-meta-pill.is-mode {
  background: var(--accent); border-color: var(--accent); color: #111111;
  font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; font-size: 11.5px;
}
.event-meta-pill.is-mode svg { stroke: #111111; }
.event-meta-pill.is-mode.onsite { background: transparent; border-color: var(--border-light); color: var(--text-dark); }
.event-meta-pill.is-mode.onsite svg { stroke: var(--accent-dark); }
.event-meta-pill.is-restricted {
  background: var(--text-dark); border-color: var(--text-dark); color: #ffffff;
  font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; font-size: 11.5px;
}
.event-meta-pill.is-restricted svg { stroke: var(--accent); }

.event-detail-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.event-detail-topics span {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 6px 13px; border-radius: 100px;
  background: var(--accent-dim); color: var(--accent-dark);
  border: 1px solid rgba(245, 197, 24, 0.3);
}
.event-header .event-detail-topics { margin-top: 14px; justify-content: flex-start; }
.event-header .ysk-schedule-row { margin-top: 18px; }

/* Event pages on phones — tighter hero, fact grid instead of wrapping
   pills, full-width actions. */
@media (max-width: 768px) {
  .breadcrumb-bar + .event-poster-section { padding-top: 20px; }
  .event-hero-grid { gap: 22px; }
  .event-hero-grid .event-header { padding-top: 0; }
  .event-hero-grid .event-poster { max-width: 400px; }
  .event-header .section-label { margin-bottom: 6px; }
  .event-header h1 { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.1; }

  .event-meta-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .event-meta-bar .event-meta-pill { justify-content: flex-start; border-radius: 12px; padding: 11px 12px; font-size: 13px; line-height: 1.3; min-width: 0; }
  .event-meta-bar .event-meta-pill:first-child,
  .event-meta-bar .event-meta-pill.is-restricted { grid-column: 1 / -1; }
  .event-meta-bar .event-meta-pill.is-mode,
  .event-meta-bar .event-meta-pill.is-restricted { font-size: 11px; letter-spacing: 0.4px; }

  .event-lede { font-size: 15px; line-height: 1.7; margin-top: 16px; }
  .event-header .ysk-schedule-row {
    background: var(--bg-off-white); border: 1px solid var(--border-light);
    border-radius: 12px; padding: 12px 14px;
  }
  .event-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .event-hero-actions .btn { justify-content: center; width: 100%; padding: 15px 20px; }
}

/* Sticky action bar — injected by main.js on event pages, phones/tablets only */
.event-sticky-cta { display: none; }
@media (max-width: 900px) {
  .event-sticky-cta {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 840;
    padding: 10px var(--space-md) max(10px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -10px 30px -12px rgba(17, 17, 17, 0.18);
    transform: translateY(110%); opacity: 0; pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }
  .event-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .event-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .event-sticky-info strong,
  .event-sticky-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .event-sticky-info strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-dark); }
  .event-sticky-info span { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
  .event-sticky-cta .event-sticky-btn { flex-shrink: 0; padding: 13px 18px; font-size: 12px; letter-spacing: 1.2px; }
  .event-sticky-cta .event-sticky-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
  .event-sticky-cta .event-sticky-btn:active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .event-sticky-cta { transition: none; }
}

/* Sections after the poster+details block are tightened —
   this is a quick-facts page, not a long scroll. */
.event-tight { padding: 40px 0; }
@media (max-width: 768px) { .event-tight { padding: 28px 0; } }

/* Single Location / Online info card */
.event-info-card {
  max-width: 980px; margin: 0 auto;
  background: var(--bg-light); border: 1px solid var(--border-light);
  overflow: hidden;
}
.event-info-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; }
.event-info-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.event-info-body h3 { font-size: 22px; color: var(--text-dark); margin: 0; }
.event-info-body p { color: var(--text-body); font-size: 15px; line-height: 1.75; margin: 0; }
.event-info-addr { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-body); }
.event-info-addr svg { flex-shrink: 0; stroke: var(--accent-dark); margin-top: 2px; }
.event-info-body .btn { align-self: flex-start; margin-top: 6px; }
.event-map { position: relative; min-height: 240px; background: var(--bg-off-white); }
.event-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15) contrast(1.02); }
.event-map.is-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.event-map-placeholder svg { stroke: var(--text-muted); }
.event-map-placeholder p { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.event-info-online { padding: var(--space-lg); text-align: center; }
.event-info-online h3 { font-size: 24px; color: var(--text-dark); margin: 0 0 10px; }
.event-info-online p { max-width: 480px; margin: 0 auto 20px; color: var(--text-body); font-size: 15px; line-height: 1.75; }
@media (max-width: 820px) {
  .event-info-grid { grid-template-columns: 1fr; }
  .event-map { min-height: 220px; }
  .event-info-body .btn { align-self: stretch; text-align: center; }
}

/* More Upcoming Events — bottom of every detail page */
.event-more-heading { text-align: center; margin-bottom: 28px; }
.event-more-cta { text-align: center; margin-top: var(--space-lg); }

/* =========================================================
   YOUTH SEMINARS — KARACHI (events/youth-seminar-karachi-sep-2026/)
   Multi-session schedule cards — one Jamat per card.
   ========================================================= */
.ysk-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  max-width: 1080px;
  margin: 0 auto;
}
.ysk-schedule-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.ysk-schedule-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 197, 24, 0.5);
  box-shadow: 0 20px 40px -22px rgba(26, 26, 26, 0.28);
}
.ysk-schedule-card h3 { font-size: 19px; line-height: 1.25; color: var(--text-dark); margin: 0; }
.ysk-schedule-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.ysk-schedule-row svg { flex-shrink: 0; stroke: var(--accent-dark); margin-top: 2px; }
.ysk-schedule-row strong { color: var(--text-dark); font-weight: 700; }
.ysk-schedule-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.ysk-schedule-actions .btn { padding: 9px 16px; font-size: 11px; }
@media (max-width: 640px) {
  .ysk-schedule-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 404 / Not Found page ── */
.not-found-section {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: calc(76px + var(--space-xl)) 0 var(--space-xl);
}
.nf-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.nf-code {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  font-size: clamp(88px, 16vw, 180px); line-height: 1; letter-spacing: -0.03em;
}
.nf-inner h1 { margin-top: var(--space-sm); font-size: clamp(28px, 4vw, 40px); }
.nf-text { margin: var(--space-sm) 0 var(--space-lg); max-width: 480px; }
.nf-actions { justify-content: center; margin-bottom: var(--space-xl); }
.nf-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-lg); border-top: 1px solid var(--border-dark); width: 100%;
}
.nf-links a {
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--text-light-muted); transition: color var(--transition);
}
.nf-links a:hover { color: var(--accent); }
@media (max-width: 768px) {
  .not-found-section { padding: calc(76px + var(--space-lg)) 0 var(--space-lg); }
  .nf-links { gap: var(--space-sm) var(--space-md); }
}

/* =========================================================
   FLOATING CONTACT BUTTON — site-wide, injected by main.js.
   Always-reachable quick contact, since the full #contact
   section on mobile is otherwise only reachable via the
   hamburger menu.
   ========================================================= */
.contact-fab-wrap {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 850;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* home page: tucked away while the hero fills the screen */
.contact-fab-wrap.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.contact-fab-btn {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #111111; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(245, 197, 24, 0.6), 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.contact-fab-btn:hover { transform: translateY(-2px); background: var(--accent-dark); }
.contact-fab-btn:active { transform: scale(0.92); }
.contact-fab-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 4px; }
.contact-fab-btn svg { width: 21px; height: 21px; display: block; }
.contact-fab-icon-close { display: none; }
.contact-fab-wrap.is-open .contact-fab-btn { background: var(--text-dark); color: #ffffff; }
.contact-fab-wrap.is-open .contact-fab-icon-open { display: none; }
.contact-fab-wrap.is-open .contact-fab-icon-close { display: block; }

/* the email pill — slides out to the left of the bubble */
.contact-fab-panel {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 90px);
  padding: 9px 10px 9px 18px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-light);
  color: var(--text-dark);
  font-family: var(--font-body);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translate(10px, -50%);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color var(--transition);
}
.contact-fab-wrap.is-open .contact-fab-panel { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.cfp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.cfp-text small { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.cfp-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfp-go {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #111111; transition: transform var(--transition);
}
.cfp-go svg { width: 15px; height: 15px; }
.contact-fab-panel:hover { border-color: var(--accent); }
.contact-fab-panel:hover .cfp-go { transform: translate(2px, -2px); }
.contact-fab-panel:active { transform: translate(0, -50%) scale(0.97); }
.contact-fab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* hint / hover label — dark speech bubble pointing at the button */
.contact-fab-hint {
  position: absolute; right: calc(100% + 12px); top: 50%;
  padding: 9px 14px; border-radius: 10px;
  background: var(--text-dark); color: #ffffff;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  cursor: pointer; opacity: 0; transform: translate(8px, -50%); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.contact-fab-hint:empty::before { content: attr(data-label); }
.contact-fab-hint::after {
  content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
  background: var(--text-dark); transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
.contact-fab-wrap.show-hint:not(.is-open) .contact-fab-hint { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
@media (hover: hover) {
  .contact-fab-wrap:not(.is-open):has(.contact-fab-btn:hover) .contact-fab-hint { opacity: 1; transform: translate(0, -50%); }
}

@media (max-width: 480px) {
  .contact-fab-wrap { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .contact-fab-btn { width: 44px; height: 44px; }
  .contact-fab-btn svg { width: 20px; height: 20px; }
  .contact-fab-panel { padding: 8px 8px 8px 14px; gap: 10px; }
  .cfp-text b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-fab-wrap, .contact-fab-btn, .contact-fab-panel, .contact-fab-hint { transition: none; }
}

/* =========================================================
   COURSE SPOTLIGHT — featured "now enrolling" course card.
   Shared by /updates/, /courses/ and the Deeni Students and AI
   program page: the full course poster on top (never cropped —
   it carries the dates), then a dark gold-glow panel with the
   3-day strip, quick facts and Register / Details actions.
   ========================================================= */
.course-spotlight {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 980px; margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border-dark);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(245, 197, 24, 0.16) 0%, rgba(245, 197, 24, 0) 55%),
    linear-gradient(160deg, var(--bg-dark-3) 0%, var(--bg-dark) 65%);
  box-shadow: 0 34px 70px -34px rgba(17, 17, 17, 0.55), 0 10px 26px -14px rgba(245, 197, 24, 0.22);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.course-spotlight:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 40px 80px -34px rgba(17, 17, 17, 0.6), 0 16px 40px -16px rgba(245, 197, 24, 0.4);
}
/* Inside the Updates grid the spotlight is one card among the others:
   same width as its neighbours, content stacked, no day strip. */
.event-teasers > .course-spotlight { max-width: none; border-radius: 18px; }
.event-teasers > .course-spotlight .course-spotlight-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.event-teasers > .course-spotlight .course-spotlight-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; }
.event-teasers > .course-spotlight h3 { font-size: 24px; }
.event-teasers > .course-spotlight p { font-size: 14px; line-height: 1.65; }
.event-teasers > .course-spotlight .course-spotlight-main > .course-spotlight-actions { flex-direction: row; margin-top: auto; padding-top: 6px; }
.event-teasers > .course-spotlight .course-spotlight-actions .btn { padding: 11px 18px; font-size: 12px; }
.event-teasers > .course-spotlight .course-spotlight-side { display: none; }

.course-spotlight-media { display: block; overflow: hidden; aspect-ratio: 2 / 1; background: #2a3bd0; }
.course-spotlight-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.course-spotlight:hover .course-spotlight-media img { transform: scale(1.03); }
.course-spotlight-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Wide screens: the poster is big enough to read its own dates, so the
   panel is just badges + title + pitch, with the actions to the right.
   Phones swap in the day strip and facts (.course-spotlight-side). */
.course-spotlight-body { padding: 28px 34px 30px; }
.course-spotlight-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px; row-gap: 12px;
  align-items: center;
}
.course-spotlight-main > * { grid-column: 1; justify-self: start; }
.course-spotlight-main > .course-spotlight-actions { grid-column: 2; grid-row: 1 / span 2; justify-self: end; flex-direction: column; margin-top: 0; }
.course-spotlight-actions .btn { justify-content: center; }
.course-spotlight-side { display: none; }
.course-spotlight h3 {
  margin: 2px 0 0;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05;
  color: var(--text-light);
}
.course-spotlight h3 a { color: inherit; transition: color var(--transition); }
.course-spotlight h3 a:hover { color: var(--accent); }
.course-spotlight h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.course-spotlight h3 span { color: var(--accent); }
.course-spotlight p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-light-muted); }
.course-spotlight-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.course-spotlight-actions .btn { padding: 13px 24px; }
.course-spotlight .btn-primary:hover { opacity: 1; background: var(--accent-dark); }
.course-spotlight .btn-primary:active,
.course-spotlight .btn-outline:active { transform: translateY(0) scale(0.98); }


/* 3-day strip — echoes the dotted timeline on the poster */
.course-days {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 18px 10px 16px; list-style: none;
  background: var(--bg-light); border-radius: 16px;
  text-align: center;
}
.course-days::before {
  content: "";
  position: absolute; top: 25px; left: 16%; right: 16%;
  border-top: 2px dashed rgba(245, 197, 24, 0.55);
}
.course-days li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.course-days li::before {
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--text-dark);
  margin-bottom: 8px;
}
.course-days .cd-label { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.course-days .cd-date { display: flex; align-items: baseline; gap: 5px; }
.course-days strong { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--text-dark); }
.course-days .cd-dow { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }

.course-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.course-facts li {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 10px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
}
.course-facts .cf-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #111111;
}
.course-facts .cf-icon svg { width: 16px; height: 16px; display: block; }
.course-facts .cf-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.course-facts small { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); }
.course-facts b { font-size: 13.5px; font-weight: 700; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* /courses/ — spotlight sits above the coming-soon grid */
.courses-spotlight-wrap { margin-bottom: var(--space-xl); }

@media (prefers-reduced-motion: reduce) {
  .course-spotlight,
  .course-spotlight-media img { transition: none; }
  .course-spotlight:hover,
  .course-spotlight:hover .course-spotlight-media img { transform: none; }
}
@media (max-width: 900px) {
  .course-spotlight-body { padding: 24px 24px 26px; }
}
@media (max-width: 620px) {
  .course-spotlight { border-radius: 18px; }
  .course-spotlight-body { display: flex; flex-direction: column; padding: 22px 18px 22px; gap: 18px; }
  .course-spotlight-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .course-spotlight-main > .course-spotlight-actions { margin-top: 6px; }
  .course-spotlight-side { display: flex; flex-direction: column; gap: 12px; }
  .course-spotlight h3 { font-size: 27px; }
  .course-spotlight p { font-size: 14.5px; }
  .course-spotlight-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .course-spotlight-actions .btn { justify-content: center; }
  .course-days { padding: 16px 4px 14px; }
  .course-days strong { font-size: 27px; }
  .course-facts { grid-template-columns: 1fr; }
  .courses-spotlight-wrap { margin-bottom: var(--space-lg); }
}

/* =========================================================
   COURSE DETAIL PAGE — /courses/deeni-students-and-ai/
   Reuses the event-page poster + header pattern, with the
   wide poster on top and the details centred underneath.
   ========================================================= */
.course-detail .event-poster { max-width: 720px; margin: 0 auto; }
.course-detail .event-header { max-width: 820px; text-align: center; }
.course-detail .event-meta-bar,
.course-detail .event-header .event-detail-topics,
.course-detail .event-hero-actions { justify-content: center; }
.course-detail .event-hero-actions .btn-primary:hover { opacity: 1; background: var(--accent-dark); }
.course-urdu {
  margin: 16px 0 0;
  font-family: var(--font-urdu);
  font-size: 17px; line-height: 2.2;
  color: var(--text-dark);
}
.course-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-width: 980px; margin: 0 auto; }
.course-day-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px 24px;
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 18px;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.course-day-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.course-day-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 55px -26px rgba(245, 197, 24, 0.35); }
.course-day-card .cd-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent-dark); }
.course-day-card .cd-date { display: flex; align-items: baseline; gap: 8px; }
.course-day-card .cd-date strong { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--text-dark); }
.course-day-card .cd-dow { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.course-day-card .ysk-schedule-row { font-size: 13.5px; }
.course-speaker {
  max-width: 980px; margin: var(--space-md) auto 0;
  text-align: center; font-size: 14px; color: var(--text-body);
}
.course-speaker strong { color: var(--text-dark); }
.course-cta { text-align: center; }
.course-cta .container { display: flex; flex-direction: column; align-items: center; }
.course-cta h2 { max-width: 760px; margin-bottom: var(--space-sm); }
.course-cta p { max-width: 560px; margin: 0 auto var(--space-md); }
.course-cta .btn-group { justify-content: center; }
.course-cta .btn-primary:hover { opacity: 1; background: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .course-day-card { transition: none; }
  .course-day-card:hover { transform: none; }
}
@media (max-width: 768px) {
  .course-schedule { grid-template-columns: 1fr; gap: 12px; max-width: 440px; }
  .course-day-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 20px 18px 18px; }
  .course-day-card .cd-label { width: 100%; }
  .course-day-card .cd-date strong { font-size: 40px; }
  .course-day-card .ysk-schedule-row { margin-left: auto; }
  .course-urdu { font-size: 15.5px; line-height: 2.1; }
  .course-cta .btn-group { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 360px; }
  .course-cta .btn-group .btn { justify-content: center; }
}

/* Updates page — shown by main.js when every upcoming event has ended */
.updates-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: var(--space-lg) 0; }