/* ===================================================================
   THALaya International — stylesheet
   =================================================================== */

:root {
  --green-dark: #0c793e;
  --green: #02a94f;
  --green-mid: #216e46;
  --green-light: #3fa66b;
  --orange: #ee7223;
  --orange-dark: #cf4b00;
  --cream: #f7f4eb;
  --mint: #eaf5ee;
  --peach: #fdf1e2;
  --text: #24312a;
  --text-light: #6b7770;
  --border: #e7e5dd;
  --radius: 10px;
  --container: 1440px;
  --shadow: 0 10px 30px rgba(13, 51, 32, 0.08);
  font-size: 18px;
}


* { box-sizing: border-box; }

/* NOTE: do NOT set `scroll-behavior: smooth` on html/body — it makes Chrome
   smooth-animate every wheel/trackpad tick on the whole page, which lags
   behind the real scroll position. Anchor links get a manual smooth scroll
   via JS instead (see the anchor-link click handler in script.js), which
   only animates that one jump and leaves normal scrolling untouched. */
html { scroll-behavior: auto; }

/* Keep anchor-linked sections clear of the sticky header */
section[id] { scroll-margin-top: var(--header-h, 110px); }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  /* Straight, bold geometric sans-serif for all titles/headings --
     distinct from the body copy (Inter) by weight, not by a serif
     flourish, so headings read as strong, modern, and direct. */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  margin: 0 0 .5em;
  color: var(--green-dark);
  line-height: 1.25;
}

p { margin: 0 0 1em; color: var(--text-light); font-size: 1.05rem; }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }

ul { list-style: none; margin: 0; padding: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor: pointer;
}
.btn span { transition: transform .18s ease; }
.btn:hover span { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }

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

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

.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }

.btn--sm { padding: 10px 20px; font-size: .78rem; width: 100%; justify-content: center; }

/* ---------- Nav ---------- */
.nav {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand__logo { height: 66px; width: auto; display: block; }

/* ---- Split animated brand lockup (header + footer share this markup) ----
   Each piece is a separately-cropped PNG with its own fixed aspect ratio
   (wordmark 4.95:1, "INTERNATIONAL" 18.04:1, "BEYOND LEARNING EXPERIENCE"
   28.31:1) -- sized here in height so the *rendered width* of "THALaya"
   matches "INTERNATIONAL", and "BEYOND LEARNING EXPERIENCE" never renders
   wider than "INTERNATIONAL". */
.brand__icon {
  height: 60px;
  width: auto;
  display: block;
  opacity: 0;
}
.brand__wordmark-wrap {
  display: flex;
  flex-direction: column;
  /* Centered to match the intro/splash logo lockup exactly -- the
     "INTERNATIONAL" / "BEYOND LEARNING EXPERIENCE" subtext sits centered
     under the wordmark rather than flush against its left edge. */
  align-items: center;
  margin-left: 10px;
}
.brand__wordmark {
  height: 32.8px;
  width: auto;
  display: block;
  opacity: 0;
}
.brand__sub-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3px;
}
.brand__sub1 { height: 9px; width: auto; display: block; opacity: 0; margin-bottom: 2px; }
.brand__sub2 { height: 5.7px; width: auto; display: block; opacity: 0; }

.brand.is-revealed .brand__icon {
  animation: navIconIn .9s cubic-bezier(.22, .9, .32, 1) forwards;
}
.brand.is-revealed .brand__wordmark {
  animation: splashPartIn .6s ease forwards;
  animation-delay: .45s;
}
.brand.is-revealed .brand__sub1 {
  animation: splashPartIn .6s ease forwards;
  animation-delay: .65s;
}
.brand.is-revealed .brand__sub2 {
  animation: splashPartIn .6s ease forwards;
  animation-delay: .85s;
}

.nav__links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav__links a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--orange);
  transition: width .2s ease;
}
.nav__links a:hover::after { width: 100%; }
.nav__links a:hover { color: var(--green); }

/* Active main-menu item -- whichever page/section the visitor is currently
   on (see the nav-active script in script.js, which reads each item's
   data-nav-key against the current page and adds .is-active). Reuses the
   same green + underline treatment as :hover, just permanently on rather
   than only while the pointer is over it. */
.nav__links a.is-active { color: var(--green); }
.nav__links a.is-active::after { width: 100%; }

/* CTA button living inside .nav__links so it appears both in the inline
   desktop row and as the last item in the mobile dropdown panel. */
.nav__links a.nav__cta {
  background: var(--green);
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease;
}
.nav__links a.nav__cta::after { display: none; }
.nav__links a.nav__cta:hover { background: var(--green-dark); color: #fff; }
.nav__links a.nav__cta.is-active { background: var(--green-dark); }

/* ---- Nav dropdowns ---- */
.nav__item { position: relative; }
.nav__link-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text);
  padding: 4px 0;
  white-space: nowrap;
  position: relative;
}
.nav__link-btn:hover { color: var(--green); }
.nav__link-btn .chevron { transition: transform .2s ease; }
.nav__item.is-open .nav__link-btn .chevron { transform: rotate(180deg); }
.nav__item.is-open .nav__link-btn { color: var(--green); }

/* Same underline-bar language as the plain nav links (.nav__links a::after)
   so a dropdown item (About Us / Courses / Events / Services) reads
   consistently whether it's active because the pointer is over it or
   because its section's data-nav-key matches the current page. */
.nav__link-btn::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--orange);
  transition: width .2s ease;
}
.nav__item.is-active > .nav__link-btn { color: var(--green); }
.nav__item.is-active > .nav__link-btn::after { width: 100%; }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(13, 51, 32, .16);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50;
}
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
}
.nav__dropdown a {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.nav__dropdown a:hover { background: var(--mint); color: var(--green); }
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* On devices with real hover support (desktop mouse/trackpad), open on hover
   too, so the menu doesn't require a click. Touch devices fall back to the
   JS click-toggle (is-open) above since they can't hover. */
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover .nav__dropdown,
  .nav__item:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav__item:hover .nav__link-btn .chevron,
  .nav__item:focus-within .nav__link-btn .chevron {
    transform: rotate(180deg);
  }
  .nav__item:hover .nav__link-btn,
  .nav__item:focus-within .nav__link-btn {
    color: var(--green);
  }
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--green-dark); transition: transform .25s ease, opacity .25s ease; }

/* ---------- Hero: blur-crossfade carousel ----------
   Each .hero__slide is a full-bleed, independently-stacked slide with its
   own image, title, copy, and buttons. Only one slide carries .is-active
   at a time; switching slides crossfades opacity + a blur filter (see
   .hero__slide transition below) rather than sliding a track, so looping
   from the last slide back to the first is exactly as smooth as any other
   transition -- no clone/snap bookkeeping needed. Driven by
   initHeroSlider() in script.js, gated on #heroSlider. */
.hero {
  position: relative;
  /* Match the same content column every other section sits in (.container:
     max-width var(--container) with 24px of side padding) -- previously the
     hero had no side inset of its own, so it ran edge-to-edge and read
     wider than the nav/section content above and below it. Subtracting
     48px (24px each side) from both the fluid width and the cap, then
     centering, reproduces .container's exact edges without adding real
     padding (which would leave a visible gap of the hero's own background
     around the image instead of just narrowing the whole rounded box). */
  /*width: calc(100% - 48px);
  max-width: calc(var(--container) - 48px);*/
  margin: 0 auto;
  height: calc(70vh - var(--header-h, 125px));
  min-height: 660px;
  max-height: 860px;
  overflow: hidden;
  /*border-radius: 28px;*/
  background: var(--green-dark);
}
@media (min-width: 1600px) {
  .hero { height: calc(78vh - var(--header-h, 125px)); max-height: 800px; }
}
.hero__track { position: relative; width: 100%; height: 100%; }
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 56px;
  opacity: 0;
  filter: blur(28px);
  transform: scale(1.05);
  transition: opacity 1s ease, filter 1s ease, transform 1.6s ease;
  pointer-events: none;
  z-index: 0;
}
.hero__slide.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .3s ease; filter: none; transform: none; }
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* A light, left-weighted scrim -- just enough to keep the white title/copy
   readable over whichever slide is active, without flattening the photo
   the way a full-strength overlay would. */
.hero__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6,16,11,.62) 0%, rgba(6,16,11,.4) 38%, rgba(6,16,11,.14) 65%, rgba(6,16,11,0) 85%);
  pointer-events: none;
}
.hero__content {
  /* This element is also `.container` (max-width: 1440px, margin: 0
     auto, padding: 0 24px) — the same class every other section's
     content wrapper uses, which is why their text lines up at a fixed
     point regardless of window width. */
  position: relative;
  z-index: 2;
  width: 100%;
  color: #fff;
  text-align: left;
  /* Extra breathing room on top of .container's own 24px so the title
     sits further in from the hero's curved left edge. */
  padding-left: 56px;
}
.hero__content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: .5em;
  max-width: 720px;
  text-align: left;
}
.hero__content h1 .hero__title-accent { color: #a9bd7c; }
/* On tablet/desktop "Beyond Learning." and "Creating Impact." each read
   as one single line -- these word-level breaks only kick back in on
   mobile, where the narrower column made one-word-per-line the better
   read (see the mobile override below). */
.hero__br--word { display: none; }
@media (max-width: 768px) {
  .hero__br--word { display: inline; }
}
.hero__content p {
  color: rgba(255,255,255,.88);
  font-size: clamp(.85rem, 1vw, .95rem);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 1.5em;
  text-align: left;
}
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__actions .btn { padding: 11px 22px; font-size: .82rem; }

/* ---------- Hero carousel controls (arrows + dots) ---------- */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease;
}
.hero__arrow:hover { background: rgba(255,255,255,.3); border-color: #fff; }
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }
.hero__dots {
  position: absolute;
  right: 32px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}
.hero__dot:hover { background: rgba(255,255,255,.75); }
.hero__dot.is-active { width: 26px; border-radius: 5px; background: var(--orange); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { background: #fff; color: var(--green-dark); border-color: #fff; }

/* ---------- Services: stacked photo-over-text tiles (homepage) ----------
   All 7 disciplines live in a single flex "track" inside a clipped
   "viewport", 3 tiles visible at a time. script.js drives the track's
   transform based on scroll direction: scrolling down while the section
   is in view slides the track right-to-left (advancing), scrolling up
   slides it back left-to-right (retreating). See initServiceCarousel(). */
.service-tiles-viewport { overflow: hidden; }
.service-tiles-track {
  display: flex;
  gap: 26px;
  transition: transform .65s cubic-bezier(.16, .8, .3, 1);
  will-change: transform;
}
.service-tile {
  position: relative;
  flex: 0 0 calc((100% - 52px) / 3);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: box-shadow .3s ease, transform .3s ease;
}
.service-tile:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.service-tile--mint { background: var(--mint); }
.service-tile--peach { background: var(--peach); }
.service-tile__photo { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.service-tile__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,.8,.3,1);
}
.service-tile:hover .service-tile__photo img { transform: scale(1.1); }
.service-tile__body { padding: 28px 28px 30px; max-width: none; }
.service-tile__body h3 { font-size: 1.4rem; margin-bottom: 18px; }
.service-tile--mint .service-tile__body h3 { color: var(--green); }
.service-tile--peach .service-tile__body h3 { color: var(--orange); }

.service-tiles-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.service-tiles-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.service-tiles-dots__dot.is-active { background: var(--orange); width: 24px; border-radius: 4px; }

/* ---------- Scroll-reveal utility ---------- */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Direction-aware slide reveal (homepage service tiles) ----------
   Unlike .reveal (vertical, one-time), these tiles slide in horizontally
   and can replay: script.js tracks scroll direction and toggles
   .slide-from-right when scrolling down, .slide-from-left when scrolling
   up, then adds/removes .is-visible as the tile enters/leaves the
   viewport so the animation re-triggers each time. */
.slide-reveal {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.slide-reveal.slide-from-right { transform: translateX(70px); }
.slide-reveal.slide-from-left { transform: translateX(-70px); }
.slide-reveal.is-visible { opacity: 1; transform: translateX(0); }

/* ---------- Featured Courses (homepage) ----------
   Two side-by-side panels -- Upcoming Courses / Previous Courses -- each
   a tinted rounded card holding a header row and a stack of thumb-left /
   details-right rows. */
.courses { padding: 90px 0 70px; }
.courses-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
/* Mouse-drag affordance for any .js-drag-scroll carousel (see script.js) --
   only matters once the element is actually horizontally scrollable
   (mobile carousels), harmless elsewhere. */
.js-drag-scroll.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.courses-col { background: #f9f8f7; border-radius: 24px; padding: 30px; }
.courses-col--previous { background: #f9f8f7; }
.courses-col__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.courses-col__head h3 { font-size: 1.3rem; margin: 0; }
.courses-list { display: flex; flex-direction: column; gap: 14px; }
.course-row {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  transition: box-shadow .25s ease, transform .25s ease;
}
.course-row:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.course-row__thumb { flex-shrink: 0; width: 200px; height: 150px; border-radius: 12px; overflow: hidden; }
.course-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.course-row__category { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
.course-row__title { font-size: 1rem; margin: 0; line-height: 1.3; }
.course-row__meta { font-size: .82rem; color: var(--text-light); }
.course-row__meta-line { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-light); }
.course-row__meta-line svg { flex-shrink: 0; color: var(--green-light); }
.course-row__status {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 4px 12px;
}
.course-row__status--soon { color: var(--orange-dark); background: rgba(247, 148, 29, .14); }
.course-row__status--done { color: var(--green); background: var(--mint); }
.courses-col--previous .course-row__status--done { background: #fff; }
.course-row__actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.course-row__actions .course-row__status { margin-top: 0; }
.course-row__highlights { font-size: .84rem; font-weight: 600; color: var(--green); }
.course-row__highlights:hover { color: var(--orange); }

/* ---------- Course Inner Page ---------- */
.course-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; }
.course-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,51,32,.88) 0%, rgba(13,51,32,.55) 45%, rgba(13,51,32,.25) 100%); }
.course-hero__content { position: relative; z-index: 1; padding: 60px 0 46px; color: #fff; }
.course-hero__category {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-dark);
  background: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.course-hero__content h1 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 780px; margin: 0 0 18px; }
.course-hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px; }
.course-hero__meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: #f3f0e6; }
.course-hero__meta svg { color: var(--orange); flex-shrink: 0; }

.course-overview { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.course-overview__main p { margin-bottom: 1.1em; }
.course-overview__facts { display: flex; flex-direction: column; gap: 18px; background: var(--mint); border-radius: 20px; padding: 26px; }
.course-fact { display: flex; gap: 14px; align-items: flex-start; }
.course-fact svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.course-fact h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); margin: 0 0 3px; font-weight: 700; }
.course-fact p { margin: 0; font-weight: 600; color: var(--text); }

/* Program (day-by-day timeline) */
.program-list { display: flex; flex-direction: column; gap: 0; max-width: 820px; }
.program-day { display: flex; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.program-day:last-child { border-bottom: none; }
.program-day__marker {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
}
.program-day__marker span { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.program-day__marker b { font-size: 1.3rem; font-weight: 800; }
.program-day__body h4 { font-size: 1.12rem; margin: 4px 0 8px; }
.program-day__body p { margin: 0; color: var(--text-light); }

/* Experts */
.experts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.expert-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px; text-align: center; transition: box-shadow .25s ease, transform .25s ease; }
.expert-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.expert-card__photo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: var(--mint); }
.expert-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-card h4 { font-size: 1.05rem; margin: 0 0 4px; }
.expert-card__role { display: block; font-size: .84rem; font-weight: 600; color: var(--green); margin-bottom: 4px; }
.expert-card__org { font-size: .84rem; color: var(--text-light); margin: 0; }

/* Course Fee */
.fee-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.fee-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px 28px;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.fee-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.fee-card--featured { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.fee-card__badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--orange); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 20px; padding: 5px 14px;
}
.fee-card h3 { font-size: 1.2rem; margin: 0 0 10px; color: var(--green-dark); }
.fee-card--featured h3 { color: #fff; }
.fee-card__price { font-size: 1.9rem; font-weight: 800; color: var(--text); margin: 0 0 20px; }
.fee-card__price span { font-size: .82rem; font-weight: 500; color: var(--text-light); }
.fee-card--featured .fee-card__price { color: #fff; }
.fee-card--featured .fee-card__price span { color: rgba(255,255,255,.7); }
.fee-card ul { display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; flex-grow: 1; }
.fee-card ul li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; color: var(--text); }
.fee-card--featured ul li { color: #e9f2ec; }
.fee-card ul li svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.fee-card--featured ul li svg { color: var(--orange); }
.fee-card .btn { width: 100%; justify-content: center; }

/* Who Should Attend */
.who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.who-item { display: flex; gap: 16px; align-items: flex-start; background: var(--cream); border-radius: 18px; padding: 22px; }
.who-item svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.who-item p { margin: 0; font-size: .96rem; color: var(--text); }

/* Related Courses -- reuses the .course-row thumb-left card from the
   homepage Featured Courses panels, in a simple two-up grid. */
.related-courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

@media (max-width: 768px) {
  .related-courses-grid { grid-template-columns: 1fr; }
  .course-hero { min-height: 360px; }
  .course-hero__content { padding: 40px 0 32px; }
  .course-hero__meta { gap: 14px; }
  .experts-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .fee-cards { grid-template-columns: 1fr; }
  .program-day { gap: 18px; }
  .program-day__marker { width: 60px; height: 60px; }
  .program-day__marker b { font-size: 1.05rem; }
}

/* ---------- Learning Through Experience (homepage) ---------- */
.lte { padding: 90px 0; background: var(--mint); }
.text-accent { color: var(--green); }
.lte2__head { max-width: 640px; margin-bottom: 44px; }
.lte2__head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 10px 0 16px; }
.lte2__head p { font-size: 1.08rem; margin: 0; }
.lte2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lte2-card { display: block; color: inherit; }
.lte2-card__img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.lte2-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lte2-card:hover .lte2-card__img img { transform: scale(1.06); }
.lte2-card__icon {
  position: absolute;
  left: 16px;
  bottom: -20px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(13,51,32,.18);
}
.lte2-card h4 {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem; font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.lte2-card h4 span { color: var(--orange); font-size: .95rem; transition: transform .25s ease; }
.lte2-card:hover h4 span { transform: translateX(3px); }
.lte2-card p { margin: 0; font-size: .92rem; color: var(--text-light); line-height: 1.55; }

/* ---------- Executive Packages (homepage) ---------- */
.packages { padding: 90px 0; }
.pkg2__head { display: flex; margin-bottom: 46px; }
.pkg2__head-inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: left;
  max-width: 640px;
  min-width: 0;
}
.pkg2__head-inner h2 {
  position: static;
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  padding-bottom: 0;
  margin: 8px 0 14px;
  white-space: nowrap;
}
.pkg2__head-inner h2::after { display: none; }
.pkg2__head-inner p { margin: 0; font-size: .95rem; color: var(--text-light); }
.pkg2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: stretch; }
.pkg2-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 24px;
  color: inherit;
  transition: box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), background-color .18s cubic-bezier(.4,0,.2,1), border-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1);
}
.pkg2-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
  border-bottom: 3px solid var(--orange);
}
.pkg2-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1);
}
.pkg2-card:hover .pkg2-card__icon { background: rgba(255,255,255,.12); color: var(--orange); }
.pkg2-card h3 { font-size: 1.05rem; margin: 0 0 10px; color: var(--green-dark); transition: color .18s cubic-bezier(.4,0,.2,1); }
.pkg2-card:hover h3 { color: #fff; }
.pkg2-card p { margin: 0 0 20px; font-size: .88rem; color: var(--text-light); line-height: 1.5; flex-grow: 1; transition: color .18s cubic-bezier(.4,0,.2,1); }
.pkg2-card:hover p { color: rgba(255,255,255,.75); }
.pkg2-card__link { font-size: .86rem; font-weight: 700; color: var(--text); transition: color .18s cubic-bezier(.4,0,.2,1); }
.pkg2-card:hover .pkg2-card__link { color: #fff; }
.pkg2-card__link span { color: var(--orange); transition: transform .18s cubic-bezier(.4,0,.2,1); display: inline-block; }
.pkg2-card:hover .pkg2-card__link span { transform: translateX(3px); }

/* ---------- Who We Are (homepage) ---------- */
.who2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; }
.who2__card {
  background: var(--cream);
  border-radius: 22px;
  padding: 44px 44px 36px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.who2__card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 10px 0 18px; }
.who2__card p { font-size: 1rem; margin-bottom: 14px; }
.who2__points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0 26px; padding-top: 26px; border-top: 1px solid var(--border); }
.who2__point { display: flex; gap: 12px; align-items: flex-start; }
.who2__point-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.who2__point h4 { font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; color: var(--green-dark); margin: 4px 0 6px; }
.who2__point p { font-size: .88rem; margin: 0; line-height: 1.5; }
.who2__card .btn { align-self: flex-start; margin-top: auto; }
.who2__img { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); min-height: 340px; }
.who2__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Expertise for a Changing World (homepage) ---------- */
.expertise2 { margin-top: 90px; }
.expertise2__head { display: flex; justify-content: flex-start; margin-bottom: 40px; }
.expertise2__head-inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: left;
  max-width: 640px;
  min-width: 0;
}
.expertise2__head-inner h2 {
  position: static;
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  padding-bottom: 0;
  margin: 8px 0 14px;
  white-space: nowrap;
}
.expertise2__head-inner h2::after { display: none; }
.expertise2__head-inner p { margin: 0; font-size: .95rem; color: var(--text-light); }
.expertise2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.expertise2-card {
  display: block;
  color: inherit;
  padding: 22px;
  border-right: 1px solid var(--border);
}
.expertise2-card:last-child { border-right: none; }
.expertise2-card__img { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; margin-bottom: 18px; box-shadow: var(--shadow); }
.expertise2-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.expertise2-card:hover .expertise2-card__img img { transform: scale(1.06); }
.expertise2-card__num { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .85rem; color: var(--green); margin-bottom: 8px; }
.expertise2-card h3 { font-size: 1.05rem; margin: 0 0 12px; line-height: 1.35; }
.expertise2-card p { font-size: .86rem; margin: 0 0 16px; line-height: 1.55; color: var(--text-light); }
.expertise2-card::after { content: ''; display: block; width: 34px; height: 2px; background: var(--border); }
.about__stats { margin-top: 60px; }
.about__partners { margin-top: 60px; }


/* ---------- Simple list (used by What We Do and Featured Projects):
   plain content in normal document flow -- no scroll-jacking, no pinned
   layers, no absolute positioning. A short intro block followed by a
   stacked list of rows, each with a small thumbnail. ---------- */
.simple-head { max-width: 720px; margin-bottom: 44px; }
.simple-head h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  margin: 10px 0 14px;
  white-space: nowrap;
}
.simple-head p {
  font-size: 1rem;
  color: var(--text-light);
}
.simple-head--light { max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.simple-head--light > *:first-child { max-width: 720px; min-width: 0; }
.simple-head--light h2 { color: #fff; margin: 10px 0 0; }
.simple-head--row { max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.simple-head--row > *:first-child { max-width: 720px; min-width: 0; }
.simple-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }

.link-arrow { color: var(--green); font-weight: 600; font-size: .98rem; }
.link-arrow span { margin-left: 4px; }
.link-arrow:hover { color: var(--orange); }

/* Featured Projects: static 3-column grid of photo cards on the dark
   green section (no carousel/drag behaviour). */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.project-card {
  color: #fff;
  display: block;
}
.project-card__img { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-card:hover .project-card__img img { transform: scale(1.06); }
.project-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.project-card__num { display: none; }
.project-card__body h3 { font-size: 1.15rem; margin: 0; max-width: 320px; color: #fff; }
.project-card__arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: background .2s ease, border-color .2s ease;
}
.project-card:hover .project-card__arrow { background: var(--orange); border-color: var(--orange); }

.services { background: var(--cream); padding: 90px 0; }

/* ---------- Stats ---------- */
.stats {
  max-width: 1080px;
  margin: 60px auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--green-dark);
  padding: 42px 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.stat:last-child { border-right: none; }
.stat svg { color: var(--orange); flex-shrink: 0; }
.stat__num { display: block; font-size: 2.4rem; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1; }
.stat span { font-size: .92rem; color: #cfe3d6; }

/* ---------- Section head ---------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-head h2 { font-size: 2.3rem; color: #fff; margin: 0; }
.section-head--dark { align-items: flex-end; }
.view-all { font-weight: 600; font-size: .95rem; color: var(--green); display: inline-flex; align-items: center; gap: 12px; transition: color .2s ease; }
.view-all span:last-child { color: var(--orange); transition: color .2s ease; }
.view-all:hover { color: var(--orange); }
.view-all:hover span:last-child { color: var(--green); }
.view-all--light:hover { color: var(--green); }
.arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.arrow:hover { background: var(--green); color: #fff; }

/* ---------- Events (homepage) ----------
   Two side-by-side panels -- Upcoming Events as a connected
   timeline (date / dot-and-line / card), Previous Events as a
   stack of image+detail cards. Mirrors the Featured Courses panels
   structurally (tinted rounded columns, mobile drag-carousel) but with
   its own timeline/card treatment per the reference layout. */
.events { padding: 90px 0 70px; }
.events-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.event-col { background: #f9f8f7; border-radius: 24px; padding: 30px; }
.event-col--previous { background: #f9f8f7; }
.event-col__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.event-col__head-left { display: flex; gap: 14px; align-items: flex-start; }
.event-col__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.event-col__head h3 {
  font-family: inherit;
  font-size: .98rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 5px;
  color: var(--text);
}
.event-col__head p { font-size: .86rem; color: var(--text-light); margin: 0; max-width: 320px; line-height: 1.5; }
.event-col--previous .event-col__head p { position: relative; padding-left: 16px; }
.event-col--previous .event-col__head p::before { content: ''; position: absolute; left: 0; top: .6em; width: 9px; height: 2px; background: var(--orange); }

/* Timeline (Upcoming Events) */
.event-timeline { display: flex; flex-direction: column; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 52px 24px 1fr; align-items: center; }
.timeline-item__marker { grid-column: 1 / 3; display: grid; grid-template-columns: 52px 24px; align-items: center; position: relative; align-self: stretch; }
.timeline-item__date {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-right: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green);
  line-height: 1.35;
  transition: color .2s ease;
}
.timeline-item__date b { font-size: .74rem; }
.timeline-item:hover .timeline-item__date { color: var(--orange-dark); }
.timeline-item__marker::before {
  content: '';
  position: absolute;
  left: 63px;
  top: -20px;
  bottom: -20px;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
.timeline-item:first-child .timeline-item__marker::before { top: 50%; }
.timeline-item:last-child .timeline-item__marker::before { bottom: 50%; }
.timeline-item__dot {
  position: relative;
  z-index: 1;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  justify-self: center;
  transition: background-color .2s ease;
}
.timeline-item:hover .timeline-item__dot { background: var(--orange-dark); }
.timeline-item__card {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  transition: box-shadow .25s ease, transform .25s ease;
}
.timeline-item__card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.timeline-item__thumb { flex-shrink: 0; width: 200px; height: 150px; border-radius: 10px; overflow: hidden; }
.timeline-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.timeline-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.timeline-item__title { font-family: 'Poppins', sans-serif; font-size: .96rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.timeline-item__desc { font-size: .8rem; color: var(--text-light); line-height: 1.4; }
.timeline-item__meta-line { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-light); margin-top: 2px; }
.timeline-item__meta-line svg { flex-shrink: 0; color: var(--green-light); }
.timeline-item__chevron { flex-shrink: 0; color: var(--text-light); transition: color .2s ease, transform .2s ease; }
.timeline-item--next .timeline-item__chevron { color: var(--orange); }
.timeline-item__card:hover .timeline-item__chevron { color: var(--orange); transform: translateX(3px); }

/* Cards (Previous Events) */
.event-cards { display: flex; flex-direction: column; gap: 18px; }
.event-card {
  display: flex;
  gap: 18px;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  transition: box-shadow .25s ease, transform .25s ease;
}
.event-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.event-card__img { flex-shrink: 0; width: 200px; height:150px; border-radius: 12px; overflow: hidden; align-self: stretch; }
.event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 120px; }
.event-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 4px 4px 4px 0; }
.event-card__date { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--text-light); font-weight: 700; letter-spacing: .02em; }
.event-card__date svg { flex-shrink: 0; color: var(--green-light); }
.event-card__body h4 { font-size: 1.08rem; margin: 0; line-height: 1.3; }
.event-card__body p { font-size: .86rem; color: var(--text-light); margin: 0; line-height: 1.55; }
.event-card__actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.event-card__status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--green);
  background: var(--mint);
  border-radius: 20px;
  padding: 5px 12px;
}
.event-col--previous .event-card__status { background: #fff; }
.event-card__link {
  font-size: .8rem; font-weight: 700; color: var(--text);
  border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px;
  transition: border-color .2s ease, color .2s ease;
}
.event-card__link:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Featured Projects ---------- */
.projects {
  position: relative;
  /* z-index: 0 forces this section to establish its own stacking context.
     Without it, position:relative alone does NOT create one, and the
     negative z-index bg/overlay layers below would escape to the page's
     root stacking context instead of staying scoped behind THIS section's
     own content — showing up in the wrong paint order. */
  z-index: 0;
  overflow: hidden;
  background: var(--green-dark);
  padding: 90px 0;
}
/* Background photo + parallax: see updateProjectsParallax() in script.js.
   inset: -25% 0 gives enough vertical buffer that the scroll-linked
   translateY never reveals an edge/gap while the section is in view. */
.projects__bg {
  position: absolute;
  inset: -25% 0;
  z-index: -2;
  will-change: transform;
}
.projects__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
}
.projects__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 51, 32, .55) 0%, rgba(13, 51, 32, .85) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .projects__bg { transform: none !important; }
}

/* ---------- About ---------- */
.about { padding: 80px 0; }

/* ---------- Blogs ---------- */
.blogs { padding: 70px 0 90px; }
.blogs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card { background: #fff; }
.blog-card__img { border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.blog-card__img img { height: 190px; width: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--green);
  background: var(--mint);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.blog-card h3 { font-size: 1.3rem; margin-bottom: 14px; }
.blog-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.blog-card__foot time { color: var(--text-light); }
.blog-card__foot a { color: var(--green); font-weight: 600; }
.blog-card__foot a:hover { color: var(--orange); }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--green-dark); padding: 70px 0; text-align: center; }
.testimonial-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.testimonial-slider.is-draggable { cursor: grab; touch-action: pan-y; user-select: none; }
.testimonial-slider.is-draggable.is-dragging { cursor: grabbing; }
.testimonial-slide { color: #fff; display: none; }
.testimonial-slide.is-active { display: block; animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.quote-icon { color: var(--orange); margin-bottom: 14px; }
.testimonial-slide p { color: #eef4ef; font-size: 1.55rem; font-weight: 500; line-height: 1.5; max-width: 620px; margin: 0 auto 24px; }
.testimonial-person { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testimonial-person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-person div { text-align: left; }
.testimonial-person strong { display: block; font-size: .92rem; }
.testimonial-person span { font-size: .78rem; color: #cfe3d6; }
.t-arrow {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}
.t-arrow:hover { background: var(--orange); border-color: var(--orange); }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; cursor: pointer; padding: 0; }
.dot.is-active { background: var(--orange); width: 22px; border-radius: 4px; }

/* ---------- Partners ---------- */
.partners { padding: 50px 0; }
.partners__row { display: flex; align-items: center; gap: 20px; }
.partners__viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  user-select: none;
}
.partners__viewport::-webkit-scrollbar { display: none; }
.partners__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.partners__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
}
.partners__track img { height: 34px; width: auto; flex-shrink: 0; opacity: .75; filter: grayscale(1); transition: opacity .2s ease; pointer-events: none; }
.partners__track img:hover { opacity: 1; }

/* ---------- Footer ---------- */
.footer { background: var(--green-dark); color: #cfe3d6; padding: 60px 0 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* The logo file's colors (orange/green mark + dark subtext) disappear
   against the dark green footer, so instead of a backing card we render
   the whole logo as a flat white silhouette with a filter -- no
   background needed. The split icon/wordmark/subtext parts keep the same
   splash-style entrance animation, just recolored solid white. */
.brand--footer .brand__logo {
  height: 52px;
  filter: brightness(0) invert(1);
}
.brand--footer .brand__icon,
.brand--footer .brand__wordmark,
.brand--footer .brand__sub1,
.brand--footer .brand__sub2 {
  filter: brightness(0) invert(1);
}
.brand--footer .brand__icon { height: 48px; }
.brand--footer .brand__wordmark { height: 26.2px; }
.brand--footer .brand__sub1 { height: 7.2px; }
.brand--footer .brand__sub2 { height: 4.6px; }
.footer__brand p { color: #a9c3b3; font-size: 1rem; margin-top: 14px; max-width: 300px; }
.footer__slogan { font-weight: 700; }
.footer__brand p.footer__desc { font-size: .8rem; font-style: italic; }
.footer__col h5 { color: #fff; font-size: .92rem; letter-spacing: .06em; margin-bottom: 16px; }
.footer__col a, .footer__col p { display: block; color: #a9c3b3; font-size: 1rem; margin-bottom: 10px; }
.footer__col a:hover { color: var(--orange); }
.footer__follow { margin-top: 20px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #cfe3d6;
}
.footer__social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  font-size: .8rem;
  color: #90ab9b;
  flex-wrap: wrap;
  gap: 8px;
}
.footer__bottom-inner div { display: flex; }
.footer__bottom-inner a:hover { color: #fff; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 992px) {
  .service-tile { flex-basis: calc((100% - 26px) / 2); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 16px; padding-left: 8px; padding-right: 8px; gap: 12px; }
  /* The 3.2rem desktop size doesn't fit a two-up column at this width —
     it was clipping against the section's top edge and the neighboring
     stat. Scaled down so the full number and "+" are always visible. */
  .stat__num { font-size: 1.7rem; }
  .stat svg { width: 26px; height: 26px; }
  .who2 { grid-template-columns: 1fr; }
  .who2__img { min-height: 320px; }
  .blogs__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .courses-columns { grid-template-columns: 1fr; }
  .events-columns { grid-template-columns: 1fr; }
  .expertise2-grid { grid-template-columns: repeat(3, 1fr); }
  .expertise2-card:nth-child(3n) { border-right: none; }
  .lte2-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg2-grid { grid-template-columns: repeat(3, 1fr); }
  .course-overview { grid-template-columns: 1fr; gap: 36px; }
  .experts-grid { grid-template-columns: repeat(2, 1fr); }
  .fee-cards { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .brand__icon { height: 42px; }
  .brand__wordmark { height: 23px; }
  .brand__sub1 { height: 6.3px; margin-bottom: 1px; }
  .brand__sub2 { height: 4px; }
  .brand__wordmark-wrap { margin-left: 7px; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px;
    gap: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    display: none;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav__links > a.nav__cta { padding: 12px 20px; border-bottom: none; text-align: center; margin-top: 8px; }
  .nav__item { border-bottom: 1px solid var(--border); }
  .nav__link-btn { width: 100%; justify-content: space-between; padding: 12px 0; }
  .nav__dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    width: 100%;
    padding: 4px;
    display: none;
    background: var(--cream);
    border-radius: 8px;
    margin-bottom: 6px;
  }
  .nav__dropdown::before { display: none; }
  .nav__dropdown a { white-space: normal; width: 100%; }
  .nav__item.is-open .nav__dropdown {
    display: flex;
    position: static;
    left: auto;
    transform: none;
  }
  .nav__toggle { display: flex; }
  .nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Reset width back to a true 100% here -- the desktop rule above sets
     width: calc(100% - 48px) to inset the hero into the site's content
     column, and without this override that -48px would carry through to
     mobile too, leaving an unwanted gap instead of the intended edge-to-edge
     full-bleed hero. */
  .hero { min-height: 700px; margin: 0; border-radius: 0; width: 100%; max-width: 100%; }
  .hero__slide { padding-bottom: 28px; }
  .hero__content { padding-left: 22px; padding-right: 22px; }
  .hero__content h1 { font-size: 2rem; margin-bottom: .4em; }
  .hero__content p { font-size: .8rem; margin-bottom: 1em; max-width: 60%; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { padding: 9px 16px; font-size: .72rem; }
  .hero__arrow { display: none; }
  .hero__dots { right: 22px; bottom: 16px; }
  .blogs__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats { margin-left: 20px; margin-right: 20px; width: auto; }
  .stat { gap: 10px; padding-left: 4px; padding-right: 4px; }
  .stat__num { font-size: 1.4rem; }
  .stat span { font-size: .82rem; }
  .stat svg { width: 22px; height: 22px; }
  .simple-head p { font-size: 1rem; }
  .simple-head--light { align-items: flex-start; flex-direction: column; }
  .simple-head--row { align-items: flex-start; flex-direction: column; }
  .simple-head--row > *:first-child, .simple-head--light > *:first-child { width: 100%; }
  .simple-head--center { text-align: left; margin-left: 0; margin-right: 0; }
  .projects-grid { grid-template-columns: 1fr; }
  .courses-col { padding: 22px; }
  /* The Upcoming Courses / Previous Courses panels themselves become a
     swipeable (and mouse-draggable, via .js-drag-scroll in script.js)
     carousel on mobile -- each whole panel is one slide, scroll-snapped,
     with the list inside each panel staying a normal vertical stack. A
     sliver of the next slide peeks in on the right as a scroll hint. */
  .courses-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    gap: 16px;
    cursor: grab;
  }
  .courses-columns::-webkit-scrollbar { display: none; }
  .courses-col {
    flex: 0 0 92%;
    scroll-snap-align: start;
  }
  .course-row__thumb { width: 76px; height: 76px; }
  /* Same whole-panel drag-carousel treatment for Upcoming/Previous
     Events as Featured Courses above. */
  .event-col { padding: 22px; }
  .events-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    gap: 16px;
    cursor: grab;
  }
  .events-columns::-webkit-scrollbar { display: none; }
  .event-col {
    flex: 0 0 92%;
    scroll-snap-align: start;
  }
  /* The thumb-left timeline card is too narrow for a 3-column grid once
     the date+dot marker also has to fit on a mobile carousel slide -- it
     switches to a stacked card (image on top) instead of wrapping. */
  .timeline-item__card { position: relative; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .timeline-item__thumb { width: 100%; height: 120px; }
  .timeline-item__chevron { position: absolute; top: 14px; right: 12px; }
  .event-card { flex-direction: column; }
  .event-card__img { width: 100%; height: 150px; }
  .who2__card { padding: 30px 26px; }
  .who2__points { grid-template-columns: 1fr; gap: 20px; }
  .lte2-grid, .pkg2-grid, .expertise2-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    gap: 16px;
    cursor: grab;
  }
  .lte2-grid::-webkit-scrollbar, .pkg2-grid::-webkit-scrollbar, .expertise2-grid::-webkit-scrollbar { display: none; }
  .lte2-card, .pkg2-card { flex: 0 0 78%; scroll-snap-align: start; }
  .expertise2-card { flex: 0 0 78%; scroll-snap-align: start; border-right: none; padding: 0; }
  .project-card__body h3 { font-size: 1rem; }
  .section-head--dark { flex-direction: column; align-items: flex-start; }
  .service-tiles-track { gap: 20px; }
  .service-tile { flex-basis: 100%; }
  .service-tile__body { padding: 28px 26px; }
}

/* Very narrow phones (e.g. 320-400px): the fluid clamp() on section titles
   bottoms out at 1.5rem, which is still too wide for some of the longer
   single-line titles at this width -- scale down further so none of them
   wrap or overflow. */
@media (max-width: 400px) {
  .simple-head h2 { font-size: 1.05rem; white-space: normal; }
  .about__content h2 { font-size: 1.05rem; white-space: normal; }
}

/* ---------- Scroll to top button ---------- */
.scroll-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(13, 51, 32, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  z-index: 200;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--orange); }

@media (max-width: 768px) {
  .scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ===================================================================
   Inner pages (About / Projects / Blog / Contact)
   =================================================================== */

/* ---------- Page banner (limited width, curved corners) ---------- */
.page-banner {
  position: relative;
  /*width: calc(100% - 48px);*/
  /*max-width: calc(var(--container) - 48px);*/
  margin: 0 auto;
  height: 42vh;
  min-height: 300px;
  max-height: 440px;
  overflow: hidden;
  /*border-radius: 28px;*/
  background: var(--green-dark);
}
.page-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(13,51,32,.88) 0%, rgba(26,92,58,.62) 45%, rgba(247,148,29,.55) 100%);
}
.page-banner__content {
    max-width: 900px;
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.page-banner h1 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 3.1rem); margin: 0; }
.page-banner p { color: #e4ede7; font-size: 1.2rem; max-width: 620px; margin-top: 16px; margin-bottom: 0; }

/* ---------- Full-width feature banner (edge-to-edge, no rounded
   corners) -- used where a page wants a bigger, more editorial banner
   moment than the standard boxed .page-banner. ---------- */
.full-banner {
  position: relative;
  height: 56vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
  background: var(--green-dark);
}
.full-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.full-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,20,13,.92) 0%, rgba(6,20,13,.72) 40%, rgba(6,20,13,.4) 68%, rgba(6,20,13,.18) 100%);
}
.full-banner__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  /* Extra breathing room on top of .container's own 24px, matching the
     hero's left-inset treatment. */
  padding-left: 56px;
}
.full-banner h1 {
  color: #fff;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 24px;
  /* No fixed max-width -- a hardcoded cap was forcing longer titles like
     "Event sustainability consultancy" onto two lines even on desktop,
     where there's clearly room for one. white-space: nowrap keeps it on
     a single line down to tablet width; the mobile override below scales
     the font down further so it still fits without wrapping on phones. */
  max-width: none;
  white-space: nowrap;
}
.full-banner__divider {
  width: 90px;
  height: 2px;
  background: #fff;
  opacity: .85;
  margin-bottom: 26px;
}
.full-banner p {
  color: #f2f5f0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.45;
  max-width: 560px;
  margin: 0 0 28px;
}
.full-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.full-banner__link:hover { color: var(--orange); }

@media (max-width: 768px) {
  .full-banner { height: 60vh; min-height: 420px; }
  .full-banner__content { padding-left: 24px; }
  .full-banner h1 { font-size: clamp(1.3rem, 4.6vw, 1.9rem); }
  .full-banner p { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .full-banner h1 { font-size: clamp(.92rem, 4.9vw, 1.3rem); }
}

/* ---------- Generic inner-page section rhythm ---------- */
.page-section { padding: 90px 0; }
.page-section--alt { background: #fbfaf6; }
.page-section--dark { background: var(--green-dark); }
.page-section-head { max-width: 720px; margin-bottom: 50px; }
.page-section-head h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.page-section-head p {
  font-size: 1rem;
}

/* ---------- Mission / values cards ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.value-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.value-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.value-card__icon {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: var(--mint);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.value-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.value-card p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Timeline (About page story) ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
.timeline__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.timeline__item:first-child { border-top: none; }
.timeline__year { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--green); }
.timeline__item h4 { font-size: 1.15rem; margin-bottom: 6px; }
.timeline__item p { margin-bottom: 0; }

/* ---------- Services overview grid (services.html) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.service-overview-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.service-overview-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.service-overview-card__icon {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: var(--mint);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-overview-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.service-overview-card p { font-size: 1rem; margin-bottom: 20px; flex: 1; }
.service-overview-card .link-arrow { margin-top: auto; }

/* ---------- Services (services.html) ---------- */
.svc-list { display: flex; flex-direction: column; gap: 26px; }
.svc-block {
  scroll-margin-top: 110px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 36px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 36px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.svc-block:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: var(--green-light);
}
.svc-block--reverse { grid-template-columns: 1fr 380px; }
.svc-block--reverse .svc-block__img { order: 2; }
.svc-block__img {
  border-radius: 16px;
  overflow: hidden;
  min-height: 300px;
  background: var(--mint);
}
.svc-block__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-block:hover .svc-block__img img { transform: scale(1.06); }
.svc-block__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.svc-block__num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--green-light); }
.svc-block__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc-block h3 { font-size: 1.3rem; margin: 0; }
.svc-block__body > p { font-size: 1rem; color: var(--text-light); margin-bottom: 20px; }
.svc-block__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.svc-block__cols--single { grid-template-columns: 1fr; }
.svc-block__tags { display: flex; flex-direction: column; gap: 10px; }
.svc-block__tags-label { font-weight: 700; color: var(--green-dark); font-size: .92rem; margin-bottom: 2px; }
.svc-block__tags span:not(.svc-block__tags-label) { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text); }
.svc-block__tags svg { flex-shrink: 0; color: var(--green); }
.svc-block__note { background: var(--mint); border-radius: 14px; padding: 16px 18px; align-self: start; }
.svc-block__note strong { display: block; font-size: .82rem; color: var(--green-dark); margin-bottom: 6px; }
.svc-block__note p { margin: 0; font-size: .88rem; color: var(--text); line-height: 1.5; }
.svc-block__focus { display: flex; gap: 12px; align-items: flex-start; background: var(--cream); border-radius: 14px; padding: 16px 18px; }
.svc-block__focus-icon { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.svc-block__focus p { margin: 0; font-size: .88rem; color: var(--text); line-height: 1.55; }
.svc-block__focus strong { color: var(--green-dark); }
.svc-block__footnote { font-size: .92rem !important; color: var(--text) !important; margin: 0 !important; }
.svc-block__footnote strong { color: var(--green-dark); }

/* ---------- Supporting services ---------- */
.supporting-services {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  margin-top: 22px;
}
.supporting-services h3 { font-size: 1.3rem; margin-bottom: 18px; }
.supporting-services__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.supporting-services__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--text);
}
.supporting-services__list svg { color: var(--green-light); flex-shrink: 0; }

@media (max-width: 992px) {
  .svc-block { padding: 28px; }
}
@media (max-width: 768px) {
  .svc-block { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .svc-block--reverse { grid-template-columns: 1fr; }
  .svc-block__img, .svc-block--reverse .svc-block__img { order: -1; min-height: 200px; }
  .svc-block__cols { grid-template-columns: 1fr; }
  .supporting-services__list { grid-template-columns: 1fr; }
}

/* ---------- Leadership (about-team.html) ---------- */
.leaders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.leader-card {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.leader-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.leader-card__photo { flex: 0 0 42%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mint); }
.leader-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leader-card__body { flex: 1; padding: 26px 24px; display: flex; flex-direction: column; }
.leader-card__body h3 { font-size: 1.2rem; margin-bottom: 4px; }
.leader-card__title { display: block; color: var(--orange); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.leader-card__role { display: block; color: var(--text-light); font-size: .92rem; line-height: 1.4; margin-bottom: 20px; }
.leader-card__creds { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.leader-card__cred { display: flex; gap: 10px; align-items: flex-start; }
.leader-card__cred svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.leader-card__cred span { font-size: .82rem; color: var(--text); line-height: 1.45; }
.team-view-all { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- Our Team grid (about-team.html + "meet the rest of the
   team" section on each team-*.html detail page) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0 26px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--mint);
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.team-card:hover .team-card__photo img { transform: scale(1.05); }
.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; padding: 0 26px; }
.team-card__role { display: block; color: var(--green); font-weight: 600; font-size: .84rem; margin-bottom: 14px; padding: 0 26px; }
.team-card p { font-size: .94rem; color: var(--text-light); margin-bottom: 20px; flex: 1; padding: 0 26px; }
.team-card .link-arrow { margin-top: auto; padding: 0 26px; }

/* ---------- Team member detail page: large profile photo ---------- */
.team-detail__avatar {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 380px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint);
  box-shadow: var(--shadow);
}
.team-detail__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Testimonials page grid (about-testimonials.html) ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
}
.testimonial-card .quote-icon { color: var(--orange); margin-bottom: 16px; }
.testimonial-card p { font-size: 1.02rem; color: var(--text); margin-bottom: 24px; flex: 1; }
.testimonial-card__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-card__person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-card__person strong { display: block; font-size: .92rem; color: var(--text); }
.testimonial-card__person span { font-size: .8rem; color: var(--text-light); }

/* ---------- Service detail page: feature grid + sidebar ---------- */
.service-detail__intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: start; }
.service-detail__intro .about__img img { border-radius: var(--radius); box-shadow: var(--shadow); }
.service-detail__list { background: #fbfaf6; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
.service-detail__list h4 { font-size: 1.05rem; margin-bottom: 16px; }
.service-detail__list ul { list-style: none; padding: 0; margin: 0 0 22px; }
.service-detail__list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .98rem; color: var(--text-light); }
.service-detail__list li:first-child { border-top: none; }
.service-detail__list li svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.other-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.other-services a.service-overview-card { text-decoration: none; color: inherit; }

/* ---------- Scroll-reveal stagger helper ---------- */
.stagger > *:nth-child(2) { transition-delay: .1s; }
.stagger > *:nth-child(3) { transition-delay: .2s; }
.stagger > *:nth-child(4) { transition-delay: .3s; }
.stagger > *:nth-child(5) { transition-delay: .4s; }
.stagger > *:nth-child(6) { transition-delay: .5s; }
.stagger > *:nth-child(7) { transition-delay: .6s; }
.stagger > *:nth-child(8) { transition-delay: .7s; }
.stagger > *:nth-child(n+9) { transition-delay: .75s; }

/* ---------- Project grid (Projects page) ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.project-grid-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow);
}
.project-grid-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-grid-card:hover img { transform: scale(1.07); }
.project-grid-card__tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.92);
  color: var(--green-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 20px;
}
.project-grid-card__caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  padding: 50px 18px 18px;
  color: #fff;
}
.project-grid-card__caption span { display: block; font-size: .82rem; color: #cfe3d6; margin-bottom: 6px; }
.project-grid-card__caption h3 { color: #fff; font-size: 1.15rem; margin: 0; }

/* ---------- Blog grid (Blog page) ---------- */
.blog-grid-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.contact-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-card h4 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-card p { margin-bottom: 0; font-size: .98rem; }
.contact-form {
  background: #fbfaf6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: .9rem; font-weight: 600; color: var(--text); }
.form-group input, .form-group textarea, .form-group select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  resize: vertical;
  appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%236b7770' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26,92,58,.12);
}
.contact-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
.form-success {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--mint);
  color: var(--green);
  border-radius: 8px;
  padding: 14px 18px;
  font-weight: 600;
  margin-top: 16px;
}
.form-success.is-visible { display: flex; }
.contact-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--mint); }
.contact-map__label { display: block; padding: 14px 20px; font-weight: 700; font-size: .95rem; color: var(--text); background: #fff; border-bottom: 1px solid var(--border); }
.contact-map iframe { width: 100%; height: 320px; border: 0; display: block; background: var(--mint); }
.offices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.office-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.office-panel__body { padding: 26px 28px 22px; }
.office-panel__body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.office-panel__body p { margin-bottom: 0; font-size: .98rem; color: var(--text-light); }
.office-panel__body .office-panel__blurb { margin-top: 8px; }
.office-panel .contact-map { border-radius: 0; box-shadow: none; }
.office-panel .contact-map iframe { height: 240px; }
.contact-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 18px;
  background: var(--mint);
  color: var(--green-dark);
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
}
.contact-note svg { flex-shrink: 0; color: var(--green); }

@media (max-width: 992px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid-page { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .offices-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail__intro { grid-template-columns: 1fr; gap: 36px; }
  .other-services { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .leaders-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .page-banner { width: 100%; height: 36vh; min-height: 260px; margin: 0; border-radius: 0; }
  .value-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .blog-grid-page { grid-template-columns: 1fr; }
  .timeline__item { grid-template-columns: 1fr; gap: 6px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 26px; }
  .services-grid { grid-template-columns: 1fr; }
  .other-services { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .leader-card { flex-direction: column; }
  .leader-card__photo { flex: none; aspect-ratio: 16 / 10; }
}

/* ===================================================================
   Loading / splash screen
   =================================================================== */
html.splash-lock, html.splash-lock body { overflow: hidden; height: 100%; }
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .5s ease;
  overflow: hidden;
}
.splash.is-leaving { opacity: 0; }
.splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }

/* Full-bleed sunrise-lake photo behind the logo/button. No gradient/fade
   overlay on top -- the photo shows through clean. The photo (with its
   framing tree branches baked into the corners) slowly slides/zooms into
   place on load rather than appearing static. */
.splash__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.splash__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: splashBgSlideIn 4s cubic-bezier(.22, .75, .25, 1) both;
}
.splash__bg-overlay { display: none; }
@keyframes splashBgSlideIn {
  from { transform: scale(1.16) translateX(-4%); }
  /* Ends on a slight (3%) permanent overscale rather than an exact
     scale(1) -- landing on the exact edge left zero safety margin, so
     any subpixel rounding during the transform could expose a hairline
     gap on the right once the animation settled. The small overscale
     guarantees full edge-to-edge coverage after the animation stops. */
  to   { transform: scale(1.03) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .splash__bg img { animation: none; }
}

/* The sun-lit branch framing the top-left corner is cropped out of the
   same photo onto its own transparent layer so it can sway independently
   -- the wrapper shares the bg photo's exact sizing/crop (it's just a div
   sitting over it), and its child img picks up the same slide-in
   animation as the photo (via the ".splash__bg img" rule above) so both
   layers arrive in lockstep; the wrapper itself gets a slow, gentle sway
   once things settle, like a breeze moving the branch. */
.splash__branch-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 3% 4%;
  animation: branchSway 7s ease-in-out 4s infinite;
}
@keyframes branchSway {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  50%      { transform: rotate(1.3deg) translate(3px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .splash__branch-wrap { animation: none; }
}

/* Slow-drifting leaf sprites cropped from the user's floating-leaves
   photo. Each leaf gets its own start position, duration and delay so
   they drift independently rather than moving as one block; the
   keyframe fades each leaf in/out at the very start/end of its own loop
   so the reset-to-top jump is invisible. */
.splash__leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.splash__leaf {
  position: absolute;
  top: -12%;
  width: 90px;
  height: auto;
  opacity: 0;
  animation-name: leafDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.splash__leaf--1 { left: 6%;  width: 78px;  animation-duration: 22s; animation-delay: 0s; }
.splash__leaf--2 { left: 18%; width: 92px;  animation-duration: 17s; animation-delay: 3s; }
.splash__leaf--3 { left: 88%; width: 44px;  animation-duration: 19s; animation-delay: 1.5s; }
.splash__leaf--4 { left: 78%; width: 62px;  animation-duration: 25s; animation-delay: 6s; }
.splash__leaf--5 { left: 50%; width: 56px;  animation-duration: 20s; animation-delay: 9s; }
/* Leaves drift upward (bottom to top), like they're caught in a gentle
   updraft, rather than falling -- per feedback requesting the motion be
   reversed. Each leaf's base position is still set via "top" in
   .splash__leaf--N, so this just flips the animated offset: start low
   (translateY positive) and rise to translateY negative (off the top). */
@keyframes leafDrift {
  0%   { transform: translate(0, 118vh) rotate(0deg);      opacity: 0; }
  6%   { opacity: .8; }
  50%  { transform: translate(-40px, 55vh) rotate(-90deg);  opacity: .7; }
  94%  { opacity: .8; }
  100% { transform: translate(30px, -14vh) rotate(-200deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .splash__leaf { animation: none; opacity: 0; }
}

.splash__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-80px);
}
/* Logo lockup rebuilt from individually-cropped pieces (icon / wordmark /
   "INTERNATIONAL" / "BEYOND LEARNING EXPERIENCE") so each can reveal on
   its own beat instead of the logo popping in as a single flat image.
   The icon rolls in from the left with a full rotation; the wordmark and
   the two subtext lines each fade/rise in afterwards, in sequence. */
.splash__logo-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.splash__logo-icon {
  width: 60px;
  height: auto;
  /* "roll very slow" -- a long, unhurried roll-in (one full turn over
     ~2.8s) rather than the snappier .9s header/footer version, since
     this is the one moment on the page meant to linger. */
  animation: splashIconIn 2.8s cubic-bezier(.22, .75, .25, 1) both;
}
.splash__logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.splash__logo-wordmark {
  width: auto;
  height: 32.8px;
  animation: splashPartIn .7s ease 1.7s both;
}
.splash__logo-sub1 {
  width: auto;
  height: 9px;
  animation: splashPartIn .7s ease 1.95s both;
}
.splash__logo-sub2 {
  width: auto;
  height: 5.7px;
  animation: splashPartIn .7s ease 2.2s both;
}
.splash__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: splashButtonsIn .7s ease 2.5s both;
}
.splash__actions .btn {
  background: #02a94f;
  color: #fff;
  box-shadow: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: .7rem;
}
/* Exact orange sampled from the logo icon artwork (#ee7223) rather than
   the site's slightly lighter --orange accent, so the hover matches the
   logo precisely. */
.splash__actions .btn:hover { background: #ee7223; box-shadow: none; }
.splash__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--green);
}

@keyframes splashIconIn {
  from { opacity: 0; transform: translateX(-140px) rotate(-360deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes splashPartIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splashButtonsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes navIconIn {
  from { opacity: 0; transform: translateX(-40px) rotate(-360deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@media (max-width: 768px) {
  /* On phones the lake photo is anchored left instead of centered, so the
     sunrise and foreground leaves (the most recognizable part of the
     shot) stay in frame rather than being cropped from both sides. A
     slightly different end-state on the load animation nudges the framing
     further left still (object-position alone is already maxed out at
     "left", so the extra shift comes from the animation's own transform,
     with a touch more scale so no empty edge is ever exposed). */
  .splash__bg img {
    object-position: center center;
    animation-name: splashBgSlideInMobile;
  }
}
@keyframes splashBgSlideInMobile {
  from { transform: scale(1.28) translateX(-8%); }
  /* The -9% left shift needs at least 18% total overscale (9% each side)
     just to reach the right edge with zero margin -- scale(1.12) fell
     short, undershooting by ~3% and exposing a real gap on the right
     once the animation settled. scale(1.22) covers the shift with a
     safe margin on both edges. */
  to   { transform: scale(1.22) translateX(-9%); }
}
@media (max-width: 480px) {
  .splash__inner { transform: translateY(-70px); }
  .splash__logo-lockup { gap: 12px; margin-bottom: 22px; }
  .splash__logo-icon { width: 76px; }
  .splash__logo-wordmark { width: 156px; }
  .splash__logo-sub1 { width: 144px; }
  .splash__logo-sub2 { width: 128px; }
  .splash__actions { gap: 12px; }
  .splash__actions .btn { padding: 11px 24px; font-size: .78rem; }
  .splash__leaf { max-width: 46px; }
  .splash__tagline { font-size: .58rem; gap: 6px; letter-spacing: .05em; text-align: center; flex-wrap: wrap; justify-content: center; row-gap: 4px; padding: 0 20px; }
}

/* ---------- Homepage section heading/subtitle unification (index.html only) ----------
   Scoped by homepage section ID so .lte2__head / .pkg2__head-inner / .who2__card /
   .expertise2__head-inner / .page-section-head / .simple-head keep their normal
   (unscoped) styles everywhere else in the site. Only font-size/line-height are
   unified here — structural rules (inline-block underline boxes, margins, nowrap)
   are left alone so each section's existing layout/decoration still works. */
#learning-through-experience .lte2__head h2,
#flexible-packages .pkg2__head-inner h2,
#about .expertise2__head-inner h2,
#our-team .page-section-head h2,
#our-services .page-section-head h2,
#blogs .simple-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Who We Are's h2 shares a half-width column with the photo (not the
   full container like the other unified heads above), so it needs a
   smaller ceiling to actually fit on one line instead of ellipsizing. */
#about .who2__card > h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 600px) {
  #learning-through-experience .lte2__head h2,
  #flexible-packages .pkg2__head-inner h2,
  #about .expertise2__head-inner h2,
  #our-team .page-section-head h2,
  #our-services .page-section-head h2,
  #blogs .simple-head h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }
  #about .who2__card > h2 {
    font-size: clamp(1.1rem, 5vw, 1.3rem);
  }
}
/* Single-line + ellipsis only where the subtitle is genuinely a short,
   one-line-length sentence that fits (or nearly fits) without losing
   meaning. The longer, multi-clause body paragraphs under Who We Are,
   Learning Through Experience, Our Team and Our Services would lose 20-45%
   of their text to truncation at any font size that's still readable, so
   those keep normal multi-line wrapping instead -- forcing them onto one
   line traded readability for a rule that doesn't fit their content. */
#flexible-packages .pkg2__head-inner p,
#blogs .simple-head p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#about .expertise2__head-inner p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 600px) {
  /* Even at a small font, these subtitles don't fit a phone-width line
     without going illegibly tiny -- wrap normally here instead; the
     single-line treatment still applies from tablet width up. */
  #flexible-packages .pkg2__head-inner p,
  #blogs .simple-head p,
  #about .expertise2__head-inner p {
    font-size: .92rem;
    white-space: normal;
  }
}
#learning-through-experience .lte2__head p,
#about .who2__card > p,
#our-team .page-section-head p,
#our-services .page-section-head p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* ---------- Featured Courses / Events: section heading
   (these two sections have no eyebrow anymore, just this single title),
   kept single-line, and the card sub-headings (Upcoming/Previous Courses,
   Upcoming/Previous Events) stay smaller than it. ---------- */
#featured-courses > .container > .simple-head.reveal > h2,
#upcoming-events > .container > .simple-head.reveal > h2 {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: .01em;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--green);
}
@media (max-width: 600px) {
  #featured-courses > .container > .simple-head.reveal > h2,
  #upcoming-events > .container > .simple-head.reveal > h2 {
    font-size: clamp(1.15rem, 5.4vw, 1.4rem);
    white-space: normal;
  }
}
#featured-courses .courses-col__head h3 { font-size: 1.05rem; }

/* ---------- Learning Through Experience: icon badge in front of image ----------
   The icon was absolutely positioned partially outside .lte2-card__img, but that
   parent has overflow:hidden for its rounded corners, so the badge was being
   clipped instead of floating in front. Move the clipping to an inner wrapper so
   the icon (a sibling, not a clipped child) renders fully on top. */
.lte2-card__img { overflow: visible; }
.lte2-card__img-inner {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.lte2-card__icon { z-index: 2; }

/* ---------- Upcoming Courses (homepage only): bigger thumbnails ---------- */
#featured-courses .course-row__thumb { width: 200px; height: 150px; }
@media (max-width: 768px) {
  #featured-courses .course-row__thumb { width: 110px; height: 96px; }
}

/* ---------- Footer: social icons in their own column ---------- */
.footer__col--social .footer__follow { margin-top: 0; }

/* ---------- "Second titles": with the small eyebrow labels removed
   site-wide, these headings are each section's only title. Keep them on
   one line from tablet width up (where every one of their containing
   layouts is already in its widest / multi-column state), with ellipsis
   as a safety net; below that they wrap normally at a comfortable size,
   matching the same "single line, but not on mobile" treatment used for
   the hero title. ---------- */
@media (max-width: 600px) {
  .page-section-head h2 { font-size: 1.05rem; white-space: normal; }
}

.about__content h2 {
  margin: 10px 0 18px;
}
.course-overview__main h2,
.service-detail__intro h2 {
  white-space: normal;
}
.cta2__title {
  max-width: 640px;
  margin: 0 auto 28px;
  white-space: normal;
}
@media (min-width: 1000px) {
  .about__content h2 {
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .course-overview__main h2,
  .service-detail__intro h2 {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .cta2__title {
    font-size: clamp(1.3rem, 2vw, 2.2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}