/* ==========================================================================
   DIVINE JUNCTION — Prerna A Jain
   Design tokens derived from the client-approved UI reference:
   warm ivory base, deep forest-green primary, antique gold accent,
   soft sage secondary, generous rounded cards, quiet paper-like calm.
   Premium refinement pass: same palette & content, elevated depth,
   type rhythm, spacing and micro-interactions.
   ========================================================================== */

:root {
  /* ---- Colors (unchanged brand palette) ---- */
  --color-cream:        #FDF9F2;
  --color-cream-deep:   #F6EEDC;
  --color-surface:      #FFFFFF;
  --color-ink:          #2A2419;
  --color-green:        #2C5E30;
  --color-green-dark:   #1E4321;
  --color-green-pale:   #E8EFE2;
  --color-sage:         #6B8F60;
  --color-gold:         #DDA23C;
  --color-gold-deep:    #B9822C;
  --color-gold-light:   #F0C877;
  --color-whatsapp:     #2FAE60;
  --color-muted:        #756C5A;
  --color-border:       #ECE2C9;
  --color-border-soft:  #EFE7D3;

  /* ---- Derived gradients (built only from the palette above) ---- */
  --gradient-forest: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  --gradient-gold:   linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 55%, var(--color-gold-deep) 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, var(--color-gold) 50%, transparent);
  --gradient-card-wash: linear-gradient(165deg, #FFFFFF 0%, #FFFDF8 100%);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --container-w: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---- Shadows (deepened + softened for a more premium, printed feel) ---- */
  --shadow-xs: 0 2px 8px rgba(42, 36, 25, 0.045);
  --shadow-sm: 0 4px 16px rgba(42, 36, 25, 0.06);
  --shadow-md: 0 18px 42px rgba(42, 36, 25, 0.10);
  --shadow-lg: 0 32px 70px rgba(42, 36, 25, 0.16);
  --shadow-gold: 0 14px 30px rgba(185, 130, 44, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5);

  --transition: 0.35s cubic-bezier(.22,.61,.36,1);
  --transition-slow: 0.55s cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--color-ink); font-weight: 700; letter-spacing: -0.01em; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-green); color: #fff; padding: 12px 18px;
  z-index: 2000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

::selection { background: var(--color-gold-light); color: var(--color-ink); }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader__mandala { color: var(--color-gold); animation: spin 3s linear infinite; }
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   REUSABLE — buttons, eyebrow, section heads, signature leaf
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .015em;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
/* Subtle light sweep on hover — one considered flourish, not scattered motion */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 1;
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn > * { position: relative; z-index: 2; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gradient-forest);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: 0 16px 34px rgba(30, 67, 33, 0.28); }
.btn--outline {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.btn--outline:hover { background: var(--color-green); color: #fff; border-color: var(--color-green); box-shadow: var(--shadow-sm); }
.btn--gold {
  background: var(--gradient-gold);
  color: #3A2A0E;
  box-shadow: var(--shadow-sm);
}
.btn--gold:hover { box-shadow: var(--shadow-gold); }
.btn--sm { padding: 11px 22px; font-size: 0.85rem; }
.btn--block { width: 100%; }
.btn--pill-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.82rem;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
}
.btn--pill-outline:hover { border-color: var(--color-gold); color: var(--color-green-dark); box-shadow: var(--shadow-xs); }
.btn--pill-outline svg { transition: transform var(--transition); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-green);
  margin: 0 0 14px;
}
.eyebrow--center { justify-content: center; }
.leaf-mark { flex-shrink: 0; color: var(--color-gold); }

.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  margin-bottom: 16px;
  position: relative;
}
.section-title--flourish {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: var(--color-green);
  font-size: clamp(1.6rem, 2.8vw, 2.05rem);
}
.section-title--flourish .flourish { color: var(--color-gold); opacity: .85; }
.section-sub {
  color: var(--color-muted);
  font-size: 1.03rem;
  max-width: 600px;
}
.section-sub.is-center { text-align: center; margin-inline: auto; }
.section-head { margin-bottom: 48px; }
section[id] .section-head.is-center { text-align: center; }
.section-head.is-center .section-sub { margin-inline: auto; }

/* Signature continuity mark: a quiet gold hairline under every major
   section title, centered when the head is centered, left-set otherwise.
   Reads as the same "thread" running through the page. */
.section-head:not(.is-center) .section-title::after,
.section-head.is-center .section-title::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin-top: 6px;
  background: var(--gradient-gold);
  border-radius: 3px;
}
.section-head.is-center .section-title::after { margin-inline: auto; }

section { padding: 108px 0; position: relative; }
.panel {
  background: var(--gradient-card-wash);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
/* Frosted-glass background lives on a pseudo-element (not on .site-header
   itself) so that backdrop-filter doesn't establish a new containing block
   for the header's position:fixed descendants — most importantly the
   mobile nav drawer (.main-nav), which needs to size itself against the
   viewport, not against the ~78px-tall header. Visual result is identical. */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(253, 249, 242, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background var(--transition);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}
.site-header.is-scrolled::before {
  background: rgba(253, 249, 242, 0.97);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 12px;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; transition: transform var(--transition); flex-shrink: 0; }
.brand:hover { transform: translateY(-1px); }
.brand__logo { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; }

.main-nav ul { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-link {
  position: relative;
  display: inline-block;
  padding: 9px 13px;
  font-size: 0.9rem; font-weight: 500;
  color: var(--color-ink);
  transition: color var(--transition);
}
.nav-link::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background: var(--gradient-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover { color: var(--color-green); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--color-green); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none;
  flex-shrink: 0;
}
.hamburger span { width: 100%; height: 2px; background: var(--color-ink); transition: var(--transition); }
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding-top: 148px;
  padding-bottom: 84px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 560px at 78% 22%, rgba(221,162,60,.13), transparent 62%),
    radial-gradient(ellipse 760px 540px at 0% 100%, rgba(44,94,48,.08), transparent 60%),
    var(--color-cream);
}
/* Faint mandala-ring watermark, purely decorative, sits behind everything */
.hero::before {
  content: "";
  position: absolute; top: -120px; right: -160px;
  width: 480px; height: 480px;
  border: 1.5px dashed rgba(221,162,60,.18);
  border-radius: 50%;
  pointer-events: none;
}
.hero__inner {
  display: grid; grid-template-columns: 0.95fr 1.15fr;
  align-items: center; gap: 44px;
  position: relative; z-index: 1;
}
.hero__content { position: relative; z-index: 2; }
.hero__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-gold-deep);
  margin: 0 0 12px;
  position: relative;
  padding-left: 22px;
}
.hero__eyebrow::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 1.5px;
  background: var(--color-gold-deep);
}
.hero__title {
  font-size: clamp(2.35rem, 4.2vw, 3.4rem);
  line-height: 1.13;
  margin-bottom: 20px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.text-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__subcaps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero__subcaps span:not(.dot) {
  padding: 5px 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}
.hero__subcaps span.dot { color: var(--color-gold); font-size: 0.6rem; }
.hero__subtitle {
  font-size: 1.06rem; color: var(--color-muted);
  max-width: 460px; margin-bottom: 32px;
}
.hero__subtitle strong { color: var(--color-ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Hero visual: photo cutout + decorative tree/glow/ganesha/plant --- */
.hero__visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero__deco { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hero__glow {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: 64%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(221,162,60,.24) 0%, rgba(221,162,60,.11) 45%, transparent 72%);
  border-radius: 50%;
}
.hero__tree { position: absolute; top: -2%; right: 4%; width: 46%; color: var(--color-sage); opacity: .8; }
.hero__ganesha { position: absolute; bottom: 6%; right: 10%; width: 15%; color: var(--color-gold); opacity: .92; }
.hero__plant { position: absolute; bottom: 2%; right: -1%; width: 15%; }

.hero__photo-wrap {
  position: relative; z-index: 2;
  width: min(440px, 82%);
}
/* Quiet gold ring "frame" that sits just behind the cutout photo — the one
   deliberate ornamental flourish for the hero, echoing the mandala motif
   used across the leaf-mark icon and preloader. */
.hero__photo-wrap::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 92%; aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1.5px solid rgba(221,162,60,.32);
  z-index: -1;
}
.hero__photo {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 22px 38px rgba(42,36,25,.20));
}

.hero__contact-rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 500;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex; flex-direction: column;
}
.hero__contact-rail a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px;
  font-size: 0.68rem; font-weight: 500; color: var(--color-ink);
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.hero__contact-rail a:last-child { border-bottom: none; }
.hero__contact-rail a:hover { color: var(--color-green); background: var(--color-cream-deep); }
.hero__contact-rail a.rail--call svg { color: var(--color-green); }
.hero__contact-rail a.rail--whatsapp svg { color: var(--color-whatsapp); }
.hero__contact-rail a.rail--instagram svg { color: var(--color-gold-deep); }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--transition), transform .8s var(--transition);
  transition-delay: var(--delay, 0s);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SERVICES ("How Can I Help You?")
   ========================================================================== */
/* Flexbox (not Grid) is deliberate: 5 cards don't divide evenly into the
   3- or 2-column layouts used at narrower widths, and a Grid would leave the
   final row left-aligned with an empty gap. flex-wrap + justify-content:
   center lets an incomplete last row center itself instead. Each
   breakpoint below sets .service-card's flex-basis to match the column
   count a Grid would have used at that width. */
.services__grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px;
}
.service-card {
  flex: 0 1 calc((100% - 96px) / 5); /* 5 columns */
  display: flex;
  flex-direction: column;
  background: var(--gradient-card-wash);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  /* Bottom padding reserves room for .service-card__footnote below, which
     is taken out of normal flow (see that rule) — kept the same across
     every card, whether or not that particular service has footnote text,
     so its presence/absence never changes where the buttons above land. */
  padding: 36px 22px 58px;
  text-align: center;
  min-width: 0;
  overflow-wrap: break-word;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Top accent bar — reveals in gold on hover, a quiet "selected" cue */
.service-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--color-border); }
.service-card__icon {
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-cream-deep);
  color: var(--color-green);
  margin: 0 auto 20px;
  flex-shrink: 0;
  box-shadow: var(--shadow-inset);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.service-card:hover .service-card__icon {
  background: var(--gradient-forest);
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
}
.service-card h3 { font-size: 1.14rem; margin-bottom: 10px; line-height: 1.3; min-height: calc(1.3em * 2); display: flex; align-items: center; justify-content: center; }
.service-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--color-ink); margin-bottom: 2px; line-height: 1.25; }
.service-card__price.is-word { font-size: 1.02rem; color: var(--color-green); }
.service-card__meta { color: var(--color-muted); font-size: 0.82rem; margin-bottom: 14px; }
.service-card__rule { width: 34px; height: 2px; background: var(--color-gold); margin: 0 auto; border-radius: 2px; transition: width var(--transition); }
.service-card:hover .service-card__rule { width: 52px; }

/* Description copy + CTA + secure-payment line, aligned to the card bottom.
   The description grows to fill leftover space so the button sits at the
   same height across every card in a row, whatever the copy length. */
.service-card__desc {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 10px 0 18px;
}
.service-card .btn--block { margin-bottom: 0; flex-shrink: 0; }
.service-card__secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.76rem; font-weight: 500;
  color: var(--color-muted);
  flex-shrink: 0;
}
.service-card__secure svg { color: var(--color-sage); flex-shrink: 0; }
.service-card__footnote {
  font-size: 0.72rem; color: var(--color-muted);
  position: absolute; left: 22px; right: 22px; bottom: 12px;
  text-align: center;
}

/* ---- Price badge — same type/color as before, presented as a soft pill ---- */
.service-card__price-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  color: var(--color-ink);
  background: var(--color-cream-deep);
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  line-height: 1.3;
  min-height: 33px;
  flex-shrink: 0;
}
.service-card__price-badge.is-word { font-size: 0.86rem; color: var(--color-green); font-family: var(--font-body); font-weight: 600; }

/* ---- Price group — base price pill + a small "per question" style add-on
   note stacked tightly underneath it (used by Tarot Reading). Same pill
   language as the price badge above, just smaller and in the accent green
   used elsewhere for secondary pricing text (e.g. the Vastu "is-word"
   badge), so it reads as one connected price rather than an unrelated
   line of text. ---- */
.service-card__price-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.service-card__price-group .service-card__price-badge { margin-bottom: 6px; }
.service-card__price-note {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  color: var(--color-green);
  background: var(--color-green-pale);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  line-height: 1.3;
  white-space: nowrap;
}

/* ---- Meta chips — duration / consultation type ---- */
.service-card__meta-row {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px;
  margin: 0 0 14px;
  min-height: 66px;
  flex-shrink: 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-cream-deep);
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip svg { color: var(--color-sage); flex-shrink: 0; }

/* ---- Badges — secure payment / instant confirmation ---- */
.service-card__badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 0 16px;
  flex-shrink: 0;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--secure { background: var(--color-green-pale); color: var(--color-green); }
.badge--instant { background: rgba(221, 162, 60, 0.14); color: var(--color-gold-deep); }
.badge svg { flex-shrink: 0; }

/* ---- Action button stack (Pay Now / Book Consultation + Learn More) ---- */
.service-card__actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.service-card__actions .btn { margin: 0; }

/* ---- Compact trust badges below the action buttons ---- */
.service-card__trust {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 10px;
  font-size: 0.66rem; color: var(--color-muted);
  min-height: 62px;
  flex-shrink: 0;
}

/* ---- Course card — flex column so the enroll button sits flush with the
   card bottom and every course card in the row keeps identical height
   (courses__grid already stretches items via CSS Grid's default). ---- */
.course-card { display: flex; flex-direction: column; }
.course-card p { flex: 1 0 auto; margin-bottom: 22px; }
.course-card__enroll { margin-top: auto; }

/* ==========================================================================
   COURSES
   ========================================================================== */
.courses { background: var(--color-cream-deep); position: relative; }
.courses::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px; background: var(--gradient-gold); border-radius: 3px;
}
.courses__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 46px; }
.course-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-left-color: var(--color-gold); }
.course-card__badge {
  display: inline-block; padding: 6px 15px; margin-bottom: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-green-pale); color: var(--color-green);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.course-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.course-card p { color: var(--color-muted); font-size: 0.9rem; }
.courses__cta { text-align: center; }

/* ==========================================================================
   ABOUT (full-width deep-cream band)
   ========================================================================== */
.about { background: var(--color-cream-deep); }
.about__inner {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 56px; align-items: center;
}
.about__text {
  color: var(--color-muted);
  margin-bottom: 22px;
  max-width: 480px;
  padding-left: 18px;
  border-left: 2px solid var(--color-border);
  transition: border-color var(--transition);
}
.about__text:first-of-type { border-left-color: var(--color-gold); }
.about__cta { margin-top: 10px; }

.about__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 10px;
}
.stat-item {
  text-align: center;
  padding-inline: 10px;
  position: relative;
}
.stat-item + .stat-item::before {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: var(--color-border);
}
.stat-item__icon { color: var(--color-gold); margin: 0 auto 14px; width: 38px; height: 38px; }
.stat-item__value { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--color-green); margin-bottom: 6px; }
.stat-item__value.is-word { color: var(--color-gold-deep); }
.stat-item__label { font-size: 0.82rem; color: var(--color-muted); line-height: 1.35; }

/* ==========================================================================
   CREDENTIALS — Certificates + Awards & Recognitions (carousel layout)
   ========================================================================== */
.credential-block { margin-bottom: 64px; }
.credential-block:last-child { margin-bottom: 0; }

.credential-block__head {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}
.credential-block__head .section-title--flourish { margin-bottom: 8px; }
.credential-block__head .section-sub { margin-inline: auto; font-size: 0.96rem; }
.credential-block__viewall {
  margin-top: 16px;
}
@media (min-width: 760px) {
  /* Sits to the right of the centered heading, echoing the reference layout */
  .credential-block__viewall {
    position: absolute;
    top: 4px;
    right: 0;
    margin-top: 0;
  }
}

.credential-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.carousel-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.carousel-arrow:hover { background: var(--gradient-forest); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.carousel-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

.credential-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  flex: 1;
  /* Hide the native scrollbar — navigation is via arrows/dots, matching the reference */
  scrollbar-width: none;
}
.credential-track::-webkit-scrollbar { display: none; }

.credential-card {
  flex: 0 0 calc((100% - 5 * 18px) / 6); /* 6 columns on desktop */
  scroll-snap-align: start;
  min-width: 0;
}
.credential-card__media {
  position: relative;
  aspect-ratio: 1/1;
  border: 1px solid var(--color-border-soft);
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.credential-card:hover .credential-card__media { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-gold); }
/* object-fit: contain (not cover) is deliberate — certificates and award
   photos carry text, seals and signatures right to the edge, so cropping to
   fill a square hides real information. */
.credential-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition); }
.credential-card:hover .credential-card__media img { transform: scale(1.04); }
/* The entire image is the click/tap target for opening the lightbox — no
   separate zoom icon. This is a plain reset so the trigger is visually
   invisible; it just makes the whole media area (which already holds the
   image) into a button, with no change to how anything looks. */
.gallery-trigger {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; margin: 0;
  background: none;
  cursor: pointer;
}
.gallery-trigger:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}
.credential-card__caption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-weight: 500;
  line-height: 1.35;
}

.credential-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.credential-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--transition), width var(--transition);
}
.credential-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.credential-dot:hover { background: var(--color-gold-light); }
.credential-dot.is-active { background: var(--color-gold-deep); width: 22px; border-radius: 4px; }

/* ==========================================================================
   BOOK + NGO ROW
   ========================================================================== */
.book-ngo__grid { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 24px; align-items: stretch; }

.book-panel { padding: 32px 28px; display: flex; flex-direction: column; }
.book-panel__head { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-soft); }
.book-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; }
.book-panel__body { display: flex; gap: 22px; align-items: center; flex: 1; }
.book-cover {
  flex-shrink: 0; width: 128px; aspect-ratio: 348/594;
  border-radius: 5px 12px 12px 5px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
/* Faux page-edge, so the cover reads as a physical book rather than a
   flat image — a small, considered touch rather than heavy skeuomorphism. */
.book-cover::after {
  content: "";
  position: absolute; top: 3px; bottom: 3px; right: -3px;
  width: 6px;
  background: repeating-linear-gradient(180deg, #EFE7D3 0 2px, #DED2AE 2px 3px);
  border-radius: 0 3px 3px 0;
  box-shadow: 1px 0 3px rgba(0,0,0,.08);
}
.book-panel:hover .book-cover { transform: perspective(600px) rotateY(-6deg); box-shadow: var(--shadow-lg), 14px 14px 0 -6px var(--color-cream-deep); }
.book-cover__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.book-panel__text { flex: 1; }
.book-panel__text p { color: var(--color-muted); font-size: 0.92rem; margin: 0 0 18px; }

.ngo-panel { background: var(--color-green-pale); border-color: rgba(44,94,48,0.14); padding: 32px 34px; position: relative; overflow: hidden; }
.ngo-panel::before {
  content: "";
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,162,60,.14), transparent 70%);
  pointer-events: none;
}
.ngo-panel__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; position: relative; z-index: 1; }
.ngo-panel__head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.ngo-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--color-green-dark); }
.ngo-panel__text { color: #4E5A46; font-size: 0.94rem; margin: 0 0 22px; }
.ngo-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; }
.ngo-panel__qr { display: flex; align-items: center; gap: 14px; }
.ngo-panel__qr-code {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 12px; background: var(--color-surface);
  border: 1.5px dashed rgba(44,94,48,0.28);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), border-color var(--transition);
}
.ngo-panel__qr-code:hover { transform: scale(1.05); border-color: var(--color-gold); }
.ngo-panel__qr-code svg { color: var(--color-green-dark); }
.ngo-panel__qr-code img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ngo-panel__qr p { font-size: 0.83rem; font-weight: 500; color: var(--color-green-dark); margin: 0; display: flex; align-items: center; gap: 7px; }

.ngo-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; }
.ngo-gallery img {
  width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  transition: transform var(--transition-slow);
}
.ngo-gallery { overflow: hidden; border-radius: var(--radius-sm); }
.ngo-gallery img:hover { transform: scale(1.06); }
.ngo-gallery__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }

/* ==========================================================================
   OUR IMPACT (full-width deep-cream band)
   ========================================================================== */
.impact { background: var(--color-cream-deep); }
.impact__head { display: flex; align-items: center; gap: 9px; margin-bottom: 40px; }
.impact__head .section-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.impact__head .section-title::after { display: none; }
/* Flexbox for the same reason as .services__grid above: 5 stats don't
   divide evenly into the 3- or 2-column layouts at narrower widths. */
.impact__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.impact-item {
  flex: 0 1 calc((100% - 88px) / 5);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 26px 16px 24px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.impact-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.impact-item__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-cream-deep);
  color: var(--color-green);
  box-shadow: var(--shadow-inset);
}
.impact-item__value { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; color: var(--color-ink); }
.impact-item__label { font-size: 0.82rem; color: var(--color-muted); }
.impact__placeholder-note {
  margin-top: 32px; text-align: center; font-size: 0.76rem; color: var(--color-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; min-width: 0; }
.contact__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact__card {
  display: flex; align-items: center; gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  min-width: 0;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact__card:hover { transform: translateY(-3px) translateX(2px); box-shadow: var(--shadow-md); border-left-color: var(--color-gold); }
.contact__card > span:not(.contact__icon) { min-width: 0; overflow-wrap: break-word; }
.contact__icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-cream-deep); color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.contact__card:hover .contact__icon { background: var(--gradient-forest); color: #fff; }
.contact__card strong { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); font-weight: 600; }
.contact__card span span { font-weight: 600; color: var(--color-ink); }

.contact__form {
  background: var(--gradient-card-wash);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}
.form-row { margin-bottom: 19px; }
.form-row label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; color: var(--color-ink); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 4px rgba(221,162,60,.14);
}
.form-note { min-height: 20px; margin: 16px 0 0; font-size: 0.85rem; color: var(--color-green); font-weight: 600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-cream-deep); color: var(--color-ink); position: relative; overflow: hidden; padding-top: 76px; border-top: 1px solid var(--color-border); }
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--gradient-gold);
}
.footer__inner {
  display: grid; grid-template-columns: 1.3fr 1fr 0.9fr 1fr 0.9fr;
  gap: 32px; padding-bottom: 48px;
}
.footer__about { font-size: 0.86rem; color: var(--color-muted); margin: 16px 0 20px; max-width: 260px; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.footer__socials a:hover { background: var(--gradient-forest); border-color: var(--color-green); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.footer__col h4 { color: var(--color-ink); font-size: 1rem; margin-bottom: 18px; font-family: var(--font-display); position: relative; padding-bottom: 10px; }
.footer__col h4:not(:empty)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px;
  background: var(--color-gold);
}
.footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: 0.87rem; color: var(--color-muted); transition: color var(--transition), padding-left var(--transition); }
.footer__col a:hover { color: var(--color-green); padding-left: 4px; }
.footer__contact li { font-size: 0.85rem; color: var(--color-muted); display: flex; align-items: flex-start; gap: 8px; }
.footer__contact svg { color: var(--color-green); flex-shrink: 0; margin-top: 3px; }

.footer__bottom { border-top: 1px solid var(--color-border); }
.footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 20px; font-size: 0.78rem; color: var(--color-muted); }
.footer__credit { display: inline-flex; align-items: center; gap: 4px; }
.footer__credit svg { color: #C0524B; }

/* ==========================================================================
   FLOATING WHATSAPP + BACK TO TOP
   ========================================================================== */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-whatsapp); color: #fff;
  border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
}
.whatsapp-float:hover { transform: scale(1.08); }

.back-to-top {
  position: fixed; right: 24px; bottom: 92px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-surface); color: var(--color-green);
  border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.back-to-top:hover { border-color: var(--color-gold); color: var(--color-gold-deep); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(24, 20, 14, 0.94);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  padding: 40px;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(900px, 90vw); max-height: 86vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: #fff;
  transform: scale(.92);
  transition: transform var(--transition);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__counter { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: #F0E6D2; font-size: 0.82rem; letter-spacing: .06em; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.08); color: #F6ECDC;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; transition: background var(--transition), transform var(--transition);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.18); transform: scale(1.06); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   RESPONSIVE — nav switches to the hamburger drawer here too (below);
   they have to share this threshold, otherwise there's a width range
   where the hamburger is visible and toggles its state, but the drawer
   it's supposed to open has no styling to actually appear.
   ========================================================================== */
@media (max-width: 1080px) {
  /* --- Mobile nav drawer --- */
  .main-nav {
    display: none;
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    background: var(--color-cream); z-index: 999;
    padding: 20px 24px; overflow-y: auto;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .nav-link { display: block; padding: 14px 16px; font-size: 1rem; }
  .nav-link::after { display: none; }
  .hamburger { display: flex; }

  /* --- Layout --- */
  .service-card { flex-basis: calc((100% - 48px) / 3); } /* 3 columns */
  .credential-card { flex-basis: calc((100% - 3 * 18px) / 4); } /* 4 columns */
  .courses__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; gap: 36px; }
  /* Two comfortable columns instead of four narrow ones. Once the About
     section drops to a single column, the stats row has the full width
     to itself, so there's no need to keep squeezing 4 columns into a
     centered 560px strip — that left each stat only ~120px, crowding
     labels like "Guide for Your Better Tomorrow". Explicit width (not
     just max-width) is needed because auto margins otherwise shrink the
     box to fit its content instead of filling the cap. */
  .about__stats { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 360px; margin-inline: auto; row-gap: 30px; }
  .stat-item:nth-child(2)::before { display: none; }
  .stat-item:nth-child(odd)::before { display: none; }
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; row-gap: 34px; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__subcaps, .hero__cta { justify-content: center; }
  .hero__eyebrow { padding-left: 0; }
  .hero__eyebrow::before { display: none; }
  .hero__visual { order: -1; margin-bottom: 12px; min-height: 380px; }
  .hero__contact-rail { display: none; }

  .credential-card { flex-basis: calc((100% - 2 * 16px) / 3); } /* 3 columns */
  .credential-carousel { gap: 8px; }
  .carousel-arrow { width: 38px; height: 38px; }
  .book-ngo__grid { grid-template-columns: 1fr; }
  .ngo-panel__grid { grid-template-columns: 1fr; }
  .ngo-gallery { max-width: 420px; margin-inline: auto; }

  .impact-item { flex-basis: calc((100% - 44px) / 3); } /* 3 columns */
  .impact__grid { row-gap: 28px; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  section { padding: 72px 0; }
  .service-card { flex-basis: calc((100% - 24px) / 2); } /* 2 columns */
  .courses__grid { grid-template-columns: 1fr; }
  .credential-card { flex-basis: calc((100% - 14px) / 2); } /* 2 columns */
  .credential-track { gap: 14px; }
  .credential-block { margin-bottom: 44px; }
  .credential-block__viewall { margin-top: 12px; }
  .book-panel__body { flex-direction: column; text-align: center; }
  .book-panel:hover .book-cover { transform: none; }
  .impact-item { flex-basis: calc((100% - 22px) / 2); } /* 2 columns */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox { padding: 20px; }
}

@media (max-width: 460px) {
  .service-card { flex-basis: 100%; } /* 1 column on very small phones */
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  /* .footer__about had left:0 margins and a fixed max-width, so its box
     hugged the left edge even though its text was centered; .brand is a
     block-level flex container, so text-align alone couldn't center the
     logo either. Turning .footer__brand into a centered flex column
     centers the logo, about text and socials as a single balanced group. */
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__about { margin-inline: auto; }
  .footer__socials { justify-content: center; }
  .footer__contact li { justify-content: center; }
  .footer__col h4:not(:empty)::after { left: 50%; transform: translateX(-50%); }
  .credential-card { flex-basis: calc(100% - 40px); } /* near-full width, peeks the next card */
}

/* ---- Narrow-phone header: with the logo, "Book Consultation" pill and
   hamburger all sharing one row, sub-~410px viewports don't have enough
   space for all three at full size — the logo was the one shrinking to
   absorb the shortfall. Trim the logo slightly and collapse the CTA to a
   compact icon-only button (label kept for screen readers) so nothing
   gets crushed. ---- */
@media (max-width: 420px) {
  .brand__logo { height: 40px; }
  .nav-actions .btn--sm {
    width: 40px; height: 40px;
    padding: 0; gap: 0;
    flex-shrink: 0;
  }
  .nav-actions .btn--sm span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ==========================================================================
   CONTACT FORM — submission states, validation feedback & response modal
   (additive only; existing form styling above is untouched)
   ========================================================================== */
.form-row--hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid {
  border-color: #B23A3A;
  box-shadow: 0 0 0 4px rgba(178, 58, 58, 0.1);
}

.form-note.is-error { color: #B23A3A; }
.form-note.is-success { color: var(--color-green); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .7;
  cursor: not-allowed;
  transform: none !important;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none !important; }

.btn__spinner {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -3px;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Pay Now button result states ---- */
.btn.is-success { background: var(--gradient-forest); }
.btn.is-error { background: #B23A3A; box-shadow: 0 16px 34px rgba(178, 58, 58, 0.24); }
.btn.is-error:hover { box-shadow: 0 16px 34px rgba(178, 58, 58, 0.3); }

/* ---- Ripple micro-interaction — one soft pulse from the click point,
   contained by .btn's existing overflow:hidden/isolation ---- */
.btn__ripple {
  position: absolute;
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  animation: btn-ripple .6s ease-out;
  pointer-events: none;
  z-index: 1;
}
.btn--outline .btn__ripple,
.btn--pill-outline .btn__ripple { background: rgba(44, 94, 48, .18); }
@keyframes btn-ripple { to { transform: scale(20); opacity: 0; } }

/* ---- Response modal ---- */
.form-modal {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.form-modal.is-open { opacity: 1; visibility: visible; }
.form-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(24, 20, 14, 0.55);
  backdrop-filter: blur(3px);
}
.form-modal__panel {
  position: relative;
  width: min(420px, 100%);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 32px 32px;
  text-align: center;
  transform: scale(.94) translateY(8px);
  transition: transform var(--transition);
}
.form-modal.is-open .form-modal__panel { transform: scale(1) translateY(0); }
.form-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-cream); color: var(--color-muted);
  border: 1px solid var(--color-border);
  font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.form-modal__close:hover { background: var(--color-green-pale); color: var(--color-green-dark); }
.form-modal__icon {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 50%; font-size: 1.6rem;
}
.form-modal__icon--success { background: var(--color-green-pale); color: var(--color-green); }
.form-modal__icon--error { background: rgba(178, 58, 58, 0.1); color: #B23A3A; }
.form-modal__icon--warning { background: rgba(221, 162, 60, 0.16); color: var(--color-gold-deep); }
.form-modal__title { font-size: 1.25rem; margin-bottom: 8px; }
.form-modal__text { font-size: 0.92rem; color: var(--color-muted); line-height: 1.6; margin: 0 0 22px; }
.form-modal__ok { width: 100%; }

@media (max-width: 480px) {
  .form-modal__panel { padding: 32px 22px 24px; }
}

/* ==========================================================================
   CELEBRITY MEETINGS — separate homepage section (additive only; nothing
   above this point is changed). Reuses the same tokens, section-head and
   gallery-trigger/lightbox pattern as Certificates & Awards, laid out as a
   grid instead of a carousel since this gallery is intentionally small.
   ========================================================================== */
.celebrity-section { padding-top: 0; }

.celebrity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  max-width: 760px;
  margin-inline: auto;
}
.celebrity-card { margin: 0; }
.celebrity-card__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid var(--color-border-soft);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.celebrity-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.celebrity-card__media:hover,
.celebrity-card__media:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}
.celebrity-card__media:hover img,
.celebrity-card__media:focus-visible img { transform: scale(1.06); }
.celebrity-card__media:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.celebrity-card__caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-muted);
  font-weight: 500;
}

@media (max-width: 680px) {
  .celebrity-grid { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ==========================================================================
   DEDICATED GALLERY PAGES — certificates.html & awards.html.
   Same navbar/footer/tokens/buttons/lightbox as the homepage; this block
   only adds the page hero + responsive grid layout unique to these pages.
   (Scoped entirely to .gallery-hero / .gallery-page* / .premium-gallery* —
   none of these classes are used anywhere on the homepage.)
   ========================================================================== */
.gallery-hero {
  padding-top: 148px;
  padding-bottom: 0;
  background:
    radial-gradient(ellipse 900px 560px at 78% 0%, rgba(221,162,60,.13), transparent 62%),
    var(--color-cream);
}
.gallery-hero__inner { text-align: center; }
.gallery-page__back {
  display: inline-flex;
}
.gallery-page__head { margin-top: 26px; margin-bottom: 0; }
.gallery-page__count {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.gallery-page-section { padding-top: 56px; }

/* Grid item widths are driven purely by grid-template-columns below; every
   track uses minmax(0, 1fr) rather than a bare 1fr. A bare 1fr still lets a
   grid item's default `min-width: auto` win, which is sized to the item's
   *content* (image + caption) rather than its track — on narrow viewports
   that content-based minimum is wider than the 1fr share, so the grid
   quietly overflows its container instead of shrinking. minmax(0, 1fr)
   removes that content-based floor, and min-width: 0 on the item itself is
   a second, belt-and-suspenders guard against the exact same failure mode.
   This was the root cause of every reported mobile symptom — oversized/
   overflowing images, inconsistent spacing, and sideways page scroll. */
.premium-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  width: 100%;
}
.premium-gallery__item {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.premium-gallery__media {
  display: block;
  width: 100%;
  /* Overrides the shared .gallery-trigger rule's height:100% (used by the
     homepage carousels), which otherwise wins the cascade on this same
     element and lets the CSS Grid's default row-stretch behavior pull the
     box to the row's height instead of a true square — explicit `auto`
     here (not a percentage) lets aspect-ratio drive the box height
     directly off its own width, independent of row/parent height. */
  height: auto;
  aspect-ratio: 1/1;
  align-self: start;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  /* Touch targets stay comfortably tappable at every grid size — the whole
     square is the tap area, never smaller than ~150px even on the
     narrowest supported phone (360px). */
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.premium-gallery__media img {
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition);
}
.premium-gallery__media:hover,
.premium-gallery__media:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}
.premium-gallery__media:hover img,
.premium-gallery__media:focus-visible img { transform: scale(1.04); }
.premium-gallery__media:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
/* On touch devices :hover can stay "stuck" after a tap; the translateY
   lift is a desktop-mouse affordance so it's disabled where there's no
   real hover capability, keeping tap feedback instant and predictable. */
@media (hover: none) {
  .premium-gallery__media:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--color-border-soft); }
  .premium-gallery__media:hover img { transform: none; }
  .premium-gallery__media:active { transform: scale(.97); }
}
.premium-gallery__caption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

@media (min-width: 1080px) {
  .premium-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .premium-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 680px) {
  .gallery-page-section { padding-top: 40px; }
  .premium-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 420px) {
  .gallery-hero { padding-top: 128px; }
}
/* ---- Narrowest supported phones (360–414px): tighten outer rhythm a touch
   so two square thumbnails + gap + container padding always add up to less
   than the viewport, with room to spare — never a hairline-exact fit. ---- */
@media (max-width: 400px) {
  .premium-gallery { gap: 12px; }
  .gallery-page-section { padding-top: 32px; }
}