/* ===================================================
   EduLingua – Main Stylesheet
   Palette: Forest Green (#1B4332) + Cream (#FEFAE0) + Gold (#D4A017)
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   =================================================== */


/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* The navbar is fixed and 100px tall, so an anchor that scrolls a section
   to the very top of the viewport puts that section's heading UNDERNEATH
   the navbar — the visitor lands part-way into the section instead of at
   its start. scroll-padding-top reserves the navbar's height (plus a
   little breathing room) on every scroll that targets an anchor, which
   covers both the CSS smooth scrolling and the scrollIntoView() calls in
   main.js, so sections now land fully in view. */
html { scroll-padding-top: 116px; }
@media (max-width: 640px) {
  html { scroll-padding-top: 108px; }
}
/* overflow-x must be set on BOTH html and body. With it on body alone,
   content that overflows (the organiser cards' slide-in animation
   translates them +40px right before settling) still widens the
   document, so the page scrolls sideways on mobile even though the
   overflow itself is clipped. Setting it on html stops the scroll. */
html {
  overflow-x: hidden;
}
body {
  font-family: 'DM Sans', sans-serif;
  background: #FEFAE0;
  color: #1a1a1a;
  overflow-x: hidden;
  line-height: 1.7;
  /* Belt and braces: guarantees no element can widen the page beyond
     the viewport regardless of transforms applied by animations.js. */
  max-width: 100%;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- CSS VARIABLES ---- */
:root {
  --green-dark:  #0A2218;
  --green:       #1B4332;
  --green-mid:   #2D6A4F;
  --green-light: #52B788;
  --green-pale:  #D8F3DC;
  --gold:        #D4A017;
  --gold-light:  #F4D03F;
  --gold-pale:   #FEF9E7;
  --orange:      #D85A30;
  --orange-pale: #FDF0EB;
  --cream:       #FEFAE0;
  --cream-dark:  #F5EFC0;
  --white:       #FFFFFF;
  --text-dark:   #111827;
  --text-mid:    #374151;
  --text-muted:  #6B7280;
  --border:      rgba(27, 67, 50, 0.15);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.15);
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --transition:  0.25s ease;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--green-mid); border-radius: 3px; }

/* ===================================================
   NAVBAR
   =================================================== */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(254, 250, 224, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition), background var(--transition);
}
#navbar.scrolled {
  background: rgba(254, 250, 224, 0.98);
  box-shadow: var(--shadow-md);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.nav-logo-img {
  /* 94px inside a 100px bar left 3px top and bottom, so the logo looked
     jammed against the edges and, once the bar gains its shadow on
     scroll, as though it were escaping the header. 72px keeps clear
     space above and below at every width. */
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 900;
  color: var(--green);
  letter-spacing: -0.5px;
}
.nav-logo-text em {
  color: var(--orange);
  font-style: normal;
  font-weight: 800;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--green);
  background: var(--green-pale);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-toggle {
  display: flex;
  background: var(--cream-dark);
  border-radius: 20px;
  padding: 3px;
  border: 1px solid var(--border);
}
.lang-btn {
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 16px;
  color: var(--text-muted);
  transition: all var(--transition);
}
.lang-btn.active {
  background: var(--green);
  color: var(--cream);
}
.nav-cta {
  padding: 10px 22px;
  background: var(--green);
  color: var(--cream) !important;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover { background: var(--green-mid); transform: translateY(-1px); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hamburger span {
  width: 22px; height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Narrow phones — the logo (icon + wordmark) plus the language toggle
   plus the hamburger button don't all fit on one row past this point,
   which was overflowing the hamburger clean off the right edge of the
   screen. Everything is shrunk and tightened (rather than dropping the
   wordmark) so "Fix My English" stays visible at every width down to
   the smallest common phones. */
@media (max-width: 560px) {
  .nav-inner { padding: 0 10px; gap: 6px; }
  .nav-logo { gap: 6px; }
  .nav-logo-img { width: 38px; height: 38px; }
  .nav-logo-text { font-size: 19px; letter-spacing: -0.3px; }
  .nav-right { gap: 6px; }
  .lang-toggle { padding: 2px; }
  .lang-btn { padding: 3px 7px; font-size: 10.5px; }
  .hamburger { padding: 4px; }
  .hamburger span { width: 18px; }
}
@media (max-width: 340px) {
  .nav-logo-text { font-size: 16px; }
  .nav-logo-img { width: 33px; height: 33px; }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 16px 24px 24px;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-mid);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.mobile-menu a:hover { background: var(--green-pale); color: var(--green); }

/* ===================================================
   SECTION SHARED
   =================================================== */
section { padding: 100px 24px; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-mid);
  max-width: 600px;
  margin-bottom: 60px;
}
.divider {
  width: 48px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 16px 0 24px;
}

/* Off-screen but still in the document: read by search engines and
   screen readers, drawn nowhere. The standard clip technique rather than
   display:none or visibility:hidden, both of which remove the text from
   the accessibility tree and are discounted by search engines. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================================
   HERO
   =================================================== */
#hero {
  /* 100vh is the height of the viewport INCLUDING the mobile browser's
     address bar. The bar hides as you scroll down and reappears as you
     scroll up, so on a phone 100vh changes value mid-scroll: the hero
     grows and shrinks, the whole document's height changes with it, and
     everything below jiggles under your finger. That is the shake felt
     between the news and FAQ sections — scrolling up and down there
     toggles the address bar repeatedly.

     100svh is the SMALL viewport height: the height with the bar
     showing. It is a fixed number that does not change when the bar
     hides, so the layout stays still. The 100vh line above it is the
     fallback for older browsers that don't know svh. */
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 24px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(82,183,136,0.10) 0%, transparent 60%),
    var(--cream);
  position: relative;
  overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-pale);
  border: 1px solid rgba(82,183,136,0.3);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--green-mid);
  margin-bottom: 24px;
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
  margin-bottom: 24px;
}
.hero-headline em {
  font-style: italic;
  color: var(--green-mid);
}
.hero-sub {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 500px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.btn-primary {
  padding: 14px 32px;
  background: var(--green);
  color: var(--cream);
  border-radius: 40px;
  font-size: 15px;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,0.25); }
.btn-secondary {
  padding: 14px 32px;
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 40px;
  font-size: 15px;
  font-weight: 500;
  transition: all var(--transition);
}
.btn-secondary:hover { background: var(--green-pale); transform: translateY(-2px); }

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.stat-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  /* Two-word labels ("Grow together", "Растём вместе", "Expert Teachers")
     were wrapping onto a second line, which made that stat taller than
     the rest and threw the row out of alignment. Each label now keeps to
     one line; the row itself still wraps stat by stat on narrow screens,
     so nothing runs off the edge. */
  white-space: nowrap;
}
/* Same reasoning for the value above it: "Since 2016" and "С 2016" are
   wide enough at 36px to break in two otherwise. */
.stat-val { white-space: nowrap; }
.stat-item + .stat-item { border-left: 1px solid var(--border); padding-left: 32px; }

/* On desktop the hero is a two-column grid, so these four stats have to
   fit inside roughly half the page width. At the original 32px gaps and
   12px labels the Russian wording ("ПРЕПОДАВАТЕЛЕЙ", "РАСТЁМ ВМЕСТЕ")
   overflowed and the fourth stat dropped onto a second row. Tightening
   the spacing and the label size keeps all four on one line in both
   languages, with room to spare at every desktop width. Below 900px the
   hero becomes a single column and the sizes above apply again. */
@media (min-width: 901px) {
  .hero-stats { gap: 18px; }
  .stat-item + .stat-item { padding-left: 18px; }
  .stat-val { font-size: 30px; }
  .stat-lbl { font-size: 10px; letter-spacing: 0.4px; }
}

/* Hero visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-img-wrap {
  width: 100%;
  max-width: 480px;
  overflow: visible;
  background: transparent;
  position: relative;
  box-shadow: none;
}
.hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(ellipse at center, rgba(82,183,136,0.38), rgba(212,160,23,0.12) 55%, transparent 75%);
  filter: blur(32px);
  animation: heroGlowPulse 4s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-img-wrap::before { animation: none; }
}
.hero-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(1.06) contrast(1.02);
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--green-mid);
  font-size: 14px;
  font-weight: 500;
}
.hero-img-placeholder .icon { font-size: 48px; }
.hero-float2 {
  position: absolute;
  /* Sits on the bottom edge of the photo rather than floating 28px up
     inside it. The idle bob (floatBadge2, further down this file) lifts
     it up to 8px from here, so it stays against the edge and never
     drifts below the image. */
  bottom: 0;
  left: -8px;
  background: var(--green);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 18px 26px;
  box-shadow: var(--shadow-lg);
  text-align: left;
  z-index: 2;
}
.hero-float2 .val { font-size: 26px; font-weight: 700; font-family: 'Cormorant Garamond', serif; line-height: 1.1; }
.hero-float2 .lbl { font-size: 13px; font-weight: 500; opacity: 0.85; margin-top: 4px; }

/* ===================================================
   ABOUT
   =================================================== */
/* ===================================================
   ABOUT — full-bleed split banner
   =================================================== */
#about {
  background: var(--white);
  padding: 80px 24px 48px;
  position: relative;
  overflow: hidden;
}
/* Soft organic accent shapes behind the cards — purely decorative, sit
   behind everything else in the section. */
#about::before {
  content: '';
  position: absolute;
  bottom: -120px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--green-pale) 0%, transparent 72%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
#about::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-pale) 0%, transparent 72%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.about-grid { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

/* Split card: image pane and green pane sit flush side by side — a
   clean straight seam, no overlap, so nothing on either side ever gets
   covered or cropped by the other. */
.about-banner {
  --about-base: 50%;       /* even 50/50 split between photo and text */
  --about-overlap: 0px;
  --about-curve: 0px;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 620px;
}

/* Image pane — a true 50% column. At that width the photo (portrait,
   narrower than the pane) is shown with object-fit: cover so it fills
   the pane completely edge-to-edge with no blur padding on the sides;
   the trade-off is a little crop off the top/bottom of the artwork. */
.about-banner-img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--about-base) + var(--about-overlap));
  z-index: 1;
  overflow: hidden;
}
.about-banner-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/about-us-portrait.webp');
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.15);
  transform: scale(1.2);
  z-index: 0;
}
/* Soft blend at the seam — a thin fade of dark green laid over the very
   edge of the photo (plus the original top/bottom fade), so the two
   panes feel like one continuous surface rather than a hard cut, without
   covering any of the photo's actual content. */
.about-banner-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 93%, rgba(10,34,24,0.55) 100%),
    linear-gradient(180deg, rgba(251,248,242,0.3) 0%, rgba(251,248,242,0.1) 25%, rgba(251,248,242,0.1) 75%, rgba(243,238,225,0.35) 100%);
  z-index: 2;
  pointer-events: none;
}
.about-banner-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  filter: drop-shadow(0 10px 26px rgba(10,34,24,0.18));
  transition: transform 10s ease;
}
.about-banner:hover .about-banner-img img { transform: scale(1.03); }

/* Text pane — a normal in-flow block (so its content still drives the
   card's overall height, same as before) positioned to overlap the
   photo's blurred padding on its left edge, with that overlap curved
   away at the top and bottom corners. */
.about-banner-content {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--about-base) - var(--about-overlap));
  width: calc((100% - var(--about-base)) + var(--about-overlap));
  min-height: 100%;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px 48px calc(40px + var(--about-overlap));
  border-top-left-radius: var(--about-curve);
  border-bottom-left-radius: var(--about-curve);
  overflow: hidden;
}
.about-banner-content::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82,183,136,0.18), transparent 68%);
  pointer-events: none;
}
.about-banner-content::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,0.14), transparent 70%);
  pointer-events: none;
}

.about-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.about-banner-divider {
  width: 40px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}
/* Wraps the scrollable body so the fade + custom progress track can be
   positioned against it. */
.about-scroll-wrap {
  position: relative;
  z-index: 1;
}
.about-banner-body {
  position: relative;
  overflow-y: auto;
  max-height: 420px;
  padding-right: 18px;
  /* Native scrollbar is hidden — a custom progress track (below) replaces
     it, so the visuals are consistent across browsers/platforms. */
  scrollbar-width: none;
}
.about-banner-body::-webkit-scrollbar { display: none; }

/* A creative stand-in for the plain browser scrollbar: a thin gold
   progress thumb that grows/moves with actual scroll position. */
.about-scroll-track {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: rgba(254,250,224,0.14);
  border-radius: 3px;
  overflow: hidden;
}
.about-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: top 0.08s linear, height 0.08s linear;
}
/* Nothing to scroll (short translation, fits without overflow) — hide the
   whole indicator rather than show a useless full-height, immobile bar. */
.about-scroll-wrap.no-overflow .about-scroll-track,
.about-scroll-wrap.no-overflow .about-scroll-fade {
  display: none;
}

/* Bottom fade + gently bouncing chevron — the "there's more below" cue.
   Fades itself out once the reader actually reaches the bottom. */
.about-scroll-fade {
  position: absolute;
  left: 0; right: 12px; bottom: 0;
  height: 52px;
  background: linear-gradient(180deg, transparent, var(--green) 70%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.about-scroll-fade.is-hidden { opacity: 0; }
.about-scroll-chevron {
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  animation: about-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes about-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .about-scroll-chevron { animation: none; }
}

.about-banner-body p {
  color: rgba(254,250,224,0.88);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: 14px;
  text-align: justify;
  text-justify: inter-word;
}
.about-banner-body p:last-child { margin-bottom: 0; }

/* Closing line — pulled out of the scrollable list and highlighted, so
   the trusted-partner statement always shows regardless of scroll. */
.about-highlight {
  background: rgba(254,250,224,0.08);
  border: 1px solid rgba(254,250,224,0.18);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.about-highlight p {
  color: var(--cream);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  text-align: left;
}

/* Responsive — the overlap/curve treatment is a desktop flourish. Below
   900px the two panes simply stack: photo on top, green pane below at
   full width with normal square-ish top corners (matching the outer
   card radius) instead of the deep curve. */
@media (max-width: 900px) {
  .about-banner { display: block; min-height: 0; }
  /* The photo's own proportions (936×1066) drive the box height here,
     instead of a fixed pixel height — a fixed height combined with
     object-fit: cover was cropping real content off the top and bottom
     of the photo (the "Fix" of the logo, and the laptop/notebook lower
     down) any time the box's shape didn't happen to match the photo's.
     Matching the aspect ratio exactly means the whole photo always
     fits, with no cropping needed at any mobile width. */
  .about-banner-img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 936 / 1066; }
  .about-banner-img img { object-fit: cover; filter: none; }
  .about-banner-content {
    position: relative;
    margin-left: 0;
    width: 100%;
    min-height: 0;
    padding: 36px 28px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .about-banner-body { max-height: none; overflow-y: visible; padding-right: 0; }
  .about-scroll-track, .about-scroll-fade { display: none; }
}
@media (max-width: 640px) {
  #about { padding: 60px 16px 40px; }
  .about-banner { border-radius: 18px; }
  .about-banner-content { padding: 28px 20px; }
  .about-banner-title { font-size: clamp(18px, 5vw, 24px); }
}

/* Hide legacy about elements */
.about-img, .about-quote, .about-content, .about-cards,
.about-card, .about-card-float, .about-card-flip,
.about-card-face, .about-card-front, .about-card-back,
.about-visual, .about-visual-center, .avc-icon, .avc-text { display: none; }

/* ── Flip mechanics ──
   Hover/focus is detected on the OUTER, stable .about-card (not the
   inner flip element itself, which moves with the float animation) —
   using a moving element as its own hover trigger meant the cursor
   could slip off the edge as it bobbed, causing rapid, glitchy
   flip/unflip flicker. Detecting on the stable outer box fixes that. */
.about-card-float { perspective: 1200px; }
.about-card-flip {
  position: relative;
  min-height: 180px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.about-card:hover .about-card-flip,
.about-card:focus-within .about-card-flip,
.about-card-flip.flipped {
  transform: rotateY(180deg);
}
.about-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.about-card-front { justify-content: flex-start; }
.about-card-back {
  transform: rotateY(180deg);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px;
}
.about-card-back p {
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* ===================================================
   COURSES
   =================================================== */
/* ===================================================
   GOALS — persona cards
   =================================================== */
#goals { background: var(--white); padding-top: 48px; }
.goals-layout {
  display: grid;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: 36px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.goals-head {
  text-align: left;
}
.goals-head .section-title {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.goals-head .section-sub {
  margin: 0;
  max-width: none;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
}
.goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.goal-card {
  background: var(--gold-pale);
  border-radius: var(--radius-lg);
  padding: 0 0 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.goal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.goal-card--2 { background: var(--green-pale); }
.goal-card--3 { background: var(--orange-pale); }
.goal-photo {
  width: 100%;
  aspect-ratio: 16/11;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255,255,255,0.45);
  margin-bottom: 20px;
  overflow: hidden;
}
.goal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.goal-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  color: var(--green-dark);
  margin: 0 20px 12px;
  line-height: 1.35;
}
.goal-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.goal-card--2 .goal-name { color: var(--green); }
.goal-card--3 .goal-name { color: var(--orange); }
.goal-approach {
  font-size: 12.5px;
  color: var(--text-mid);
  line-height: 1.6;
  margin: 0;
  padding: 0 20px;
}
@media (max-width: 1100px) {
  .goals-layout { grid-template-columns: 1fr; }
  .goals-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
  .goals-head .section-title { font-size: clamp(32px, 4vw, 52px); margin-bottom: 16px; }
  .goals-head .section-sub { margin: 0 auto; font-size: 17px; }
}
@media (max-width: 900px) {
  .goals-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* ===================================================
   WHY US — dark trust band, hover-to-flip cards
   =================================================== */
.why-us-band {
  /* Same green gradient used by the About Us panel and the placement
     test modal, so all three "dark green" surfaces on the site match. */
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  padding: 64px 24px;
}
.why-us-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(27px, 3.4vw, 35px);
  font-weight: 700;
  color: var(--cream);
  text-align: center;
  margin: 0 auto 44px;
}
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  max-width: 1350px;
  margin: 0 auto;
}

/* Card wrapper — hover triggers the flip */
.why-us-card {
  perspective: 1200px;
  -webkit-perspective: 1200px;
  cursor: default;
  outline: none;
}
.why-us-card-flip {
  position: relative;
  min-height: 330px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Hover flip is for real mouse/trackpad devices only — touch screens
   don't have true hover, and relying on simulated hover there is what
   caused cards to flip unexpectedly / get stuck / flicker on mobile.
   Keyboard focus still flips on every device (see initWhyUsFlip in
   main.js for the touch tap-toggle equivalent, via .is-flipped). */
@media (hover: hover) and (pointer: fine) {
  .why-us-card:hover .why-us-card-flip { transform: rotateY(180deg); }
}
/* Flip trigger is :hover (mouse) or the .is-flipped class (JS — set on
   tap for touch, and on Enter/Space for keyboard, see initWhyUsFlip in
   main.js). Deliberately NOT also triggered by :focus-within: tapping a
   focusable element sets focus and keeps it there, so pairing the flip
   with :focus-within meant a second tap (which correctly removes
   .is-flipped) couldn't actually flip the card back — the focus-linked
   rule kept holding it flipped regardless of the class. Keyboard users
   still get the flip via the explicit class toggle on Enter/Space. */
.why-us-card.is-flipped .why-us-card-flip { transform: rotateY(180deg); }
.why-us-card:focus-visible { outline: 2px solid var(--gold); border-radius: var(--radius-lg); }

/* Colour themes — three rotating pastel palettes (one per card, cycling
   green/gold/orange), each driving its own card background, badge tint,
   accent colour, and title colour. */
.why-us-card--green  { --why-bg: #EBF8EF; --why-badge-bg: #C4EDD0; --why-accent: #2D6A4F; --why-title: #0A2218; --why-illus: rgba(82,183,136,.28); }
.why-us-card--gold   { --why-bg: #FEFAEC; --why-badge-bg: #FAE9A0; --why-accent: #A6790C; --why-title: #3A2E05; --why-illus: rgba(212,160,23,.28); }
.why-us-card--orange { --why-bg: #FEF0E8; --why-badge-bg: #F8CDB0; --why-accent: #C1512A; --why-title: #3A1F12; --why-illus: rgba(216,90,48,.28); }

/* Both faces share the same card shell */
.why-us-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  background: var(--why-bg);
  border: 1px solid rgba(10,34,24,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  text-align: center;
}
.why-us-card-front { transform: rotateY(0deg); }
.why-us-card-back { transform: rotateY(180deg); }

/* Mobile Safari has a long-standing bug where backface-visibility: hidden
   silently fails on elements that also use border-radius + overflow:
   hidden inside a 3D-transformed parent — the "hidden" back face still
   renders (mirrored) directly on top of the front face, which is exactly
   the stuck-showing-both-faces glitch this fixes. backface-visibility
   stays in place above for browsers that do handle it correctly, but the
   real fix here is this belt-and-suspenders visibility toggle, which
   doesn't depend on backface-visibility working at all: the face that
   isn't showing is fully hidden from hit-testing and rendering, full
   stop, and only reappears once its own flip has actually started.
   Delaying the "hide" edge (and not the "show" edge) by the transition
   duration keeps the rotation itself looking correct — a face still
   stays visible while it's mid-rotation swinging away, and the
   newly-active face is visible immediately as it swings into place. */
.why-us-card-front {
  visibility: visible;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.why-us-card-back {
  visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.55s;
}
@media (hover: hover) and (pointer: fine) {
  .why-us-card:hover .why-us-card-front { visibility: hidden; transition: visibility 0s linear 0.55s; }
  .why-us-card:hover .why-us-card-back  { visibility: visible; transition: visibility 0s linear 0s; }
}
.why-us-card.is-flipped .why-us-card-front { visibility: hidden; transition: visibility 0s linear 0.55s; }
.why-us-card.is-flipped .why-us-card-back  { visibility: visible; transition: visibility 0s linear 0s; }


/* Back face: no icon — the emoji only lives on the front. Removing it
   frees up the full face for a larger, bolder, fully centred
   description instead of restating the front's label. A large faint
   serif quotation mark behind the copy, plus a lighter, italicised
   treatment of the text itself, gives the reveal a more editorial,
   considered feel than a flat bold label. */
.why-us-card-back {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 20px;
}
.why-us-card-back::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  color: var(--why-accent);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
.why-us-card-back p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.38;
  letter-spacing: 0.1px;
  color: var(--why-title);
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 100%;
}
/* Idle float on the front badge, on every device — including touch.
   (It used to be desktop/mouse only, out of caution about continuous
   animation inside a 3D-transformed flip container flickering on some
   mobile browsers; it renders cleanly, so it now runs everywhere, and
   is still switched off under prefers-reduced-motion below.) */
@keyframes why-us-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.why-us-card-front .why-us-ico-badge {
  animation: why-us-float 3.2s ease-in-out infinite;
}
.why-us-card:nth-child(1) .why-us-card-front .why-us-ico-badge { animation-delay: 0s; }
.why-us-card:nth-child(2) .why-us-card-front .why-us-ico-badge { animation-delay: .25s; }
.why-us-card:nth-child(3) .why-us-card-front .why-us-ico-badge { animation-delay: .5s; }
.why-us-card:nth-child(4) .why-us-card-front .why-us-ico-badge { animation-delay: .75s; }
.why-us-card:nth-child(5) .why-us-card-front .why-us-ico-badge { animation-delay: 1s; }
.why-us-card:nth-child(6) .why-us-card-front .why-us-ico-badge { animation-delay: 1.25s; }
.why-us-card:nth-child(7) .why-us-card-front .why-us-ico-badge { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .why-us-card-front .why-us-ico-badge {
    animation: none;
  }
}

/* Illustration blob at bottom of each face */
.why-us-card-face::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: var(--why-illus);
  border-radius: 60% 60% var(--radius-lg) var(--radius-lg) / 80% 80% var(--radius-lg) var(--radius-lg);
  z-index: 0;
}

/* "Tap to flip" affordance — touch devices have no :hover, so without
   some visible cue there's nothing telling a student these cards are
   even interactive (the reveal text was invisible until you happened to
   tap one). A small pulsing pill draws the eye and spells it out; the
   text comes from data-tap-hint (set in JS from the same translated
   string that already powers the aria-label), so it's bilingual too.
   Desktop/mouse already communicates this via the hover-flip itself, so
   it's scoped out there entirely. */
@media (hover: none) {
  .why-us-card-front::before {
    content: '↻ ' attr(data-tap-hint);
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--why-accent);
    background: rgba(255,255,255,0.9);
    padding: 4px 11px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(10,34,24,0.18);
    animation: why-us-tap-pulse 2.2s ease-in-out infinite;
  }
  @keyframes why-us-tap-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    50%      { transform: translateX(-50%) scale(1.06); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-us-card-front::before { animation: none; }
}

/* Icon badge — centred on the front face, rounded-square in the card's
   own pastel tint. Holds a small original multi-colour "picture"
   illustration (see WHYUS_PICS in translations.js) rather than an emoji
   or a flat single-colour glyph — more like a tiny badge artwork. */
.why-us-ico-badge {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  border-radius: 26px;
  background: var(--why-badge-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10,34,24,0.07);
}
.why-us-ico { display: flex; align-items: center; justify-content: center; line-height: 1; width: 100%; height: 100%; }
.why-us-ico svg, .why-us-ico img { width: 76px; height: 76px; object-fit: contain; display: block; margin: 0 auto; }

/* Bold title, centred */
.why-us-label {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--why-title);
  text-align: center;
}

/* Short colored underline */
.why-us-underline {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--why-accent);
  margin: 8px auto 10px;
  flex-shrink: 0;
}

/* Explore-more link only exists in the mobile static-card layout below
   (it would be redundant next to the flip interaction on larger
   screens, where hovering already reveals the same description). */
.why-us-explore { display: none; }

@media (max-width: 1180px) {
  .why-us-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .why-us-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .why-us-card-flip { min-height: 310px; }
}
@media (max-width: 640px) {
  .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-us-band { padding: 48px 24px; }

  /* Mobile redesign: the flip-to-reveal interaction (which relies on
     hover, or a tap that isn't always discovered) is replaced below this
     width with a static card whose main text (icon + title) is always
     visible, plus an "Explore more" button — tapping the button expands
     the card in place to reveal the fuller description, rather than
     flipping the whole card over. The visual "card" (background, radius,
     border, shadow) moves from the individual faces up to .why-us-card
     itself, since the two faces stack in normal flow now instead of
     being layered/absolutely positioned. */
  .why-us-card {
    background: var(--why-bg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(10,34,24,0.07);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
    padding: 24px 18px 20px;
    cursor: default;
  }
  .why-us-card-flip {
    min-height: 0;
    height: auto;
    transform: none !important;
    transition: none;
  }
  .why-us-card-face {
    position: static;
    inset: auto;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
  .why-us-card-face::after { display: none; }   /* illustration blob */
  .why-us-card-back::before { display: none; }  /* decorative quote mark */

  /* Description starts collapsed — only the icon/title (the "main text")
     shows until the Explore-more button is pressed. */
  .why-us-card-back {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, margin-top 0.38s ease;
  }
  .why-us-card.is-expanded .why-us-card-back {
    max-height: 400px;
    opacity: 1;
    margin-top: 10px;
  }
  .why-us-card-back p {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-mid);
  }
  /* The "tap to flip" hint and idle icon float no longer apply — the
     Explore-more button is now the (much clearer) call to action. */
  .why-us-card-front::before, .why-us-card-front .why-us-ico-badge { animation: none; }
  .why-us-card-front::before { display: none; }

  .why-us-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 18px;
    border-radius: 30px;
    border: none;
    background: var(--why-badge-bg);
    color: var(--why-accent);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    width: fit-content;
  }
  .why-us-explore svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.3s ease; }
  .why-us-card.is-expanded .why-us-explore svg { transform: rotate(90deg); }

  /* Odd one out: with 7 cards in a 2-up grid, the last card spans the
     full width — rather than leave it stranded alone in a half-empty
     row, it switches to a horizontal layout (icon on the left, copy and
     the button stacked on the right) so the extra width is put to use
     instead of just stretching the same vertical card wider. */
  .why-us-grid > .why-us-card:last-child { grid-column: 1 / -1; }
  .why-us-grid > .why-us-card:last-child .why-us-card-flip {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .why-us-grid > .why-us-card:last-child .why-us-card-front,
  .why-us-grid > .why-us-card:last-child .why-us-card-back {
    display: contents;
  }
  .why-us-grid > .why-us-card:last-child .why-us-ico-badge {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
  }
  .why-us-grid > .why-us-card:last-child .why-us-label {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  .why-us-grid > .why-us-card:last-child .why-us-underline {
    grid-column: 2;
    grid-row: 2;
    margin: 8px 0 0;
  }
  .why-us-grid > .why-us-card:last-child .why-us-explore {
    grid-column: 2;
    grid-row: 3;
  }
  .why-us-grid > .why-us-card:last-child .why-us-card-back p {
    grid-column: 2;
    grid-row: 4;
    text-align: left;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, margin-top 0.38s ease;
  }
  .why-us-grid > .why-us-card:last-child.is-expanded .why-us-card-back p {
    max-height: 400px;
    opacity: 1;
    margin-top: 8px;
  }
}

/* ---------------------------------------------------
   Russian copy runs noticeably longer than English. Rather than growing
   the box (which made the Russian cards look bigger/different from the
   English ones), keep the exact same box size and shrink the Russian
   type/spacing on both faces just enough for everything to fit.
   --------------------------------------------------- */
html[lang="ru"] .why-us-card-front { padding: 16px 14px; }
html[lang="ru"] .why-us-card-front .why-us-ico-badge { width: 92px; height: 92px; margin: 0 auto 10px; }
html[lang="ru"] .why-us-card-front .why-us-ico svg, html[lang="ru"] .why-us-card-front .why-us-ico img { width: 64px; height: 64px; }
html[lang="ru"] .why-us-label { font-size: 17.5px; line-height: 1.3; }
html[lang="ru"] .why-us-underline { margin: 6px auto 7px; }
/* Back face has no icon at all, which frees up plenty of room for a
   larger, bolder description even with Russian's longer copy. */
html[lang="ru"] .why-us-card-back p { font-size: 19px; line-height: 1.34; }
/* Safety net: if a translation is ever edited to run even longer, scroll
   instead of clipping/overlapping the illustration blob. */
html[lang="ru"] .why-us-card-back { overflow-y: auto; }

/* Below 640px the cards switch to the static (no-flip) layout above —
   the Russian desktop/flip-specific tweaks (extra front padding, larger
   italic serif back text, etc.) don't apply to that flat layout, so they
   need resetting back to plain, consistent values at this width. */
@media (max-width: 640px) {
  html[lang="ru"] .why-us-card-front { padding: 0; }
  html[lang="ru"] .why-us-card-back { overflow-y: visible; }
  html[lang="ru"] .why-us-card-back p {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* ===================================================
   STORIES — before/fix/after transformation cards
   =================================================== */
#stories { background: var(--white); }
.stories-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto 48px;
}
.stories-link {
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.stories-link:hover { text-decoration: underline; }
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
}
.story-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.story-baf { flex: 1; }
/* Compound selector so this reliably wins over the generic .fade-in rule
   (same specificity, but this is more specific) — keeps entrance, hover
   lift, and hover shadow all transitioning smoothly together. */
.story-card.fade-in {
  transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* Staggered entrance — cards settle in one after another instead of all
   popping in at once. */
.stories-grid .story-card:nth-child(1) { transition-delay: 0s; }
.stories-grid .story-card:nth-child(2) { transition-delay: .12s; }
.stories-grid .story-card:nth-child(3) { transition-delay: .24s; }
/* The stagger above is only meant for the entrance — keep hover response
   snappy regardless of which card it is (same specificity, later in
   source, so this wins for the hover state). */
.stories-grid .story-card:hover { transition-delay: 0s; }
.story-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 20px;
  line-height: 1.3;
  text-align: center;
}
.story-baf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  position: relative;
}
/* Divider "draws" itself left-to-right once the card scrolls into view,
   rather than just sitting there statically. */
.story-baf::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-card.visible .story-baf::after { transform: scaleX(1); }
.stories-grid .story-card:nth-child(1) .story-baf::after { transition-delay: .2s; }
.stories-grid .story-card:nth-child(2) .story-baf::after { transition-delay: .32s; }
.stories-grid .story-card:nth-child(3) .story-baf::after { transition-delay: .44s; }
.baf-col {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Before → Fix → After cascade in one at a time, like the transformation
   itself unfolding. */
.story-card.visible .baf-col { opacity: 1; transform: none; }
.story-card.visible .baf-col:nth-child(1) { transition-delay: .15s; }
.story-card.visible .baf-col:nth-child(2) { transition-delay: .3s; }
.story-card.visible .baf-col:nth-child(3) { transition-delay: .45s; }
.baf-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.baf-before { color: var(--text-muted); }
.baf-fix { color: var(--gold); }
.baf-after { color: var(--green); }
.baf-col p {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0;
  text-align: center;
}
.story-person { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.story-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}
.story-card:hover .story-avatar img { transform: scale(1.12); }
.story-name { font-size: 13px; font-weight: 600; color: var(--green-dark); }
@media (max-width: 900px) {
  .stories-grid { grid-template-columns: 1fr; max-width: 440px; }
}
@media (max-width: 480px) {
  .story-baf { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-baf::after, .baf-col, .story-avatar img {
    transition: none !important;
  }
  .baf-col { opacity: 1; transform: none; }
  .story-baf::after { transform: scaleX(1); }
}

#courses { background: var(--cream); }
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn {
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: var(--white);
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--green); color: var(--green); }
.filter-btn.active { background: var(--green); color: var(--cream); border-color: var(--green); }

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* "Languages coming soon" teaser strip — sits below the real, bookable
   courses. Deliberately styled differently (dashed border, muted pastel
   fill, no hover-lift, no click target) so it reads as an announcement,
   not another course card someone might try to book. */
.coming-soon-strip {
  margin-top: 56px;
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green-pale) 0%, var(--gold-pale) 100%);
  border: 1.5px dashed rgba(27,67,50,0.25);
  text-align: center;
}
.coming-soon-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.coming-soon-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,160,23,0.18);
  animation: cs-pulse 2s ease-in-out infinite;
}
@keyframes cs-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.coming-soon-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  color: var(--text-mid);
  margin-bottom: 24px;
}
.coming-soon-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.coming-soon-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 10px 20px 10px 14px;
  box-shadow: var(--shadow-sm);
}
.cs-flag { font-size: 22px; line-height: 1; }
.cs-lang {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--green-dark);
}
.cs-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-dark, #8a6d0c);
  background: var(--gold-pale);
  border-radius: 20px;
  padding: 3px 10px;
}
@media (max-width: 640px) {
  .coming-soon-strip { padding: 28px 20px; margin-top: 40px; }
  .coming-soon-chips { gap: 12px; }
  .coming-soon-chip { padding: 8px 16px 8px 12px; }
}
.course-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  position: relative;
}
.course-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.course-card.hidden { display: none; }
.course-card-top {
  padding: 28px 28px 20px;
  background: linear-gradient(135deg, var(--green-pale) 0%, var(--cream) 100%);
  position: relative;
}
.course-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.course-icon svg { width: 26px; height: 26px; }
.course-tag {
  position: absolute;
  top: 20px; right: 20px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tag-green  { background: #D8F3DC; color: #2D6A4F; }
.tag-blue   { background: #DBEAFE; color: #1D4ED8; }
.tag-purple { background: #EDE9FE; color: #7C3AED; }
.tag-amber  { background: #FEF3C7; color: #B45309; }
.tag-red    { background: #FEE2E2; color: #DC2626; }
.tag-pink   { background: #FCE7F3; color: #BE185D; }
.tag-teal   { background: #CCFBF1; color: #0F766E; }
.tag-indigo { background: #E0E7FF; color: #4338CA; }
.tag-orange { background: var(--orange-pale); color: var(--orange); }

/* Icon badge background tints — matches each course's tag color */
.icon-green  { background: #D8F3DC; color: #2D6A4F; }
.icon-blue   { background: #DBEAFE; color: #1D4ED8; }
.icon-purple { background: #EDE9FE; color: #7C3AED; }
.icon-amber  { background: #FEF3C7; color: #B45309; }
.icon-red    { background: #FEE2E2; color: #DC2626; }
.icon-pink   { background: #FCE7F3; color: #BE185D; }
.icon-teal   { background: #CCFBF1; color: #0F766E; }
.icon-indigo { background: #E0E7FF; color: #4338CA; }
.icon-orange { background: var(--orange-pale); color: var(--orange); }

.course-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 800; color: var(--green-dark); }
.course-level { font-size: 14px; font-weight: 500; color: var(--text-mid); margin-top: 4px; }

.course-card-body { padding: 20px 28px 24px; }
.course-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.course-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
}
.course-meta-item .mi { font-size: 15px; }
.course-details-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--cream);
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  transition: all var(--transition);
}
.course-details-btn:hover { background: var(--green); color: var(--cream); }

/* ===================================================
   MODAL (shared for courses & teacher video)
   =================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 34, 24, 0.7);
  backdrop-filter: blur(4px);
  /* Above the cookie banner (2500). The banner is fixed to the bottom of
     the viewport, so at 2000 it floated over every pop-up and covered
     their lower edge — on the enquiry drawer that meant the Send button
     could not be clicked at all until the banner was dismissed. */
  z-index: 2600;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  max-height: 90svh;   /* see the note on #hero: vh shifts with the mobile address bar */
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  background: var(--cream);
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  z-index: 10;
}
.modal-close:hover { background: #fee2e2; color: #dc2626; }

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  background: var(--green-dark);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  cursor: pointer;
}
.modal-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--green-dark); transform: translateY(-50%) scale(1.08); }
.modal-nav-prev { left: 18px; }
.modal-nav-next { right: 18px; }
/* Give the profile/news detail boxes extra breathing room on the sides
   so body text never sits underneath the centered nav arrows. */
.modal-profile-box .modal-video-header,
.modal-profile-box .modal-video-body,
.modal-profile-box .modal-news-meta,
.modal-profile-box .modal-news-title {
  padding-left: 72px;
  padding-right: 72px;
}
#tm-timer.tm-timer-warn { background: rgba(192,57,43,0.35); color: #fff; }
@media (max-width: 700px) {
  .modal-nav-prev { left: 10px; }
  .modal-nav-next { right: 10px; }
  .modal-nav { width: 36px; height: 36px; font-size: 17px; }
  .modal-profile-box .modal-video-header,
  .modal-profile-box .modal-video-body,
  .modal-profile-box .modal-news-meta,
  .modal-profile-box .modal-news-title {
    padding-left: 46px;
    padding-right: 46px;
  }
}

/* Course modal */
.modal-course-header {
  padding: 36px 36px 24px;
  background: linear-gradient(135deg, var(--green-pale), var(--cream));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-course-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.modal-course-icon svg { width: 32px; height: 32px; }
.modal-course-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--green-dark); }
.modal-course-level { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.modal-course-body { padding: 28px 36px 36px; }
.modal-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.modal-meta-item {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border);
}
.modal-meta-item .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.modal-meta-item .value { font-size: 15px; font-weight: 600; color: var(--green); }
.modal-description { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 24px; }
.modal-syllabus h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 14px; }
.modal-syllabus ul { display: flex; flex-direction: column; gap: 8px; }
.modal-syllabus li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-mid);
}
.modal-syllabus li::before { content: '✓'; color: var(--green-light); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.modal-enroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px;
  background: var(--green);
  color: var(--cream);
  border-radius: 40px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 28px;
  transition: all var(--transition);
}
.modal-enroll-btn:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,0.25); }

/* Teacher profile modal */
.modal-profile-box {
  max-width: 660px;
}
.teacher-quote {
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--green-dark);
  background: var(--green-pale);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px 18px 20px;
  margin-bottom: 20px;
}
.teacher-quote .quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  color: var(--gold);
  line-height: 0;
  vertical-align: -6px;
  margin-right: 2px;
}
.teacher-quote .quote-mark-close {
  margin-right: 0;
  margin-left: 2px;
}
.teacher-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.teacher-tag {
  background: var(--gold-pale);
  color: var(--gold);
  border: 1px solid rgba(212,160,23,0.3);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.teacher-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  margin-bottom: 20px;
  text-align: center;
}
.teacher-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--green-dark);
}
.teacher-stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.teacher-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-top: 22px;
  background: var(--green);
  color: var(--cream);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.teacher-book-btn:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,0.25); }

/* Video modal */
.modal-video-box {
  max-width: 700px;
}
.modal-video-header {
  padding: 28px 36px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
}
.modal-video-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.modal-video-avatar img { width: 100%; height: 100%; object-fit: cover; }
.modal-video-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--green-dark); }
.modal-video-role { font-size: 14px; color: var(--text-muted); }
.modal-video-body { padding: 24px 36px 32px; }
.modal-bio { font-size: 14px; color: var(--text-mid); line-height: 1.7; }

/* News detail modal */
.modal-news-header { padding: 0 0 20px; }
.modal-news-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--green-pale), var(--cream-dark));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin-bottom: 20px;
  position: relative;
}
.modal-news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(10,34,24,0.5);
  color: var(--cream);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transition);
  z-index: 2;
}
.news-photo-nav:hover { background: rgba(10,34,24,0.75); }
.news-photo-nav-prev { left: 12px; }
.news-photo-nav-next { right: 12px; }
.news-photo-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.news-photo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(254,250,224,0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.news-photo-dot.active { background: var(--cream); transform: scale(1.3); }
.modal-news-meta { display: flex; align-items: center; gap: 10px; padding: 0 36px; margin-bottom: 10px; }
.modal-news-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; color: var(--green-dark); padding: 0 36px; line-height: 1.3; }
.modal-news-excerpt { font-size: 15px; color: var(--text-mid); line-height: 1.8; white-space: pre-line; }
.modal-news-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 13px 26px;
  background: var(--green);
  color: var(--cream);
  border-radius: 30px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  transition: background var(--transition), transform var(--transition);
}
.modal-news-cta:hover { background: var(--green-mid); transform: translateY(-2px); }
@media (max-width: 700px) {
  .modal-news-meta, .modal-news-title { padding: 0 20px; }
}

/* ===================================================
   TEAM
   =================================================== */
#team { background: var(--white); }
.team-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.organizers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto 64px;
}
.organizer-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.organizer-card:hover { transform: translateY(-4px); }
.organizer-card:hover { box-shadow: var(--shadow-sm); }
.org-avatar {
  /* Circular again. Sized with clamp() rather than a fixed value
     because the cards sit in a 3-column grid that narrows on tablets —
     a circle sized for the ~344px desktop card would overflow a
     narrower one. Scales with the viewport, capped at 200px.
     The source images are square (800x800) and framed on the subject,
     so the circular mask crops evenly with no distortion. */
  width: clamp(150px, 15vw, 200px);
  height: clamp(150px, 15vw, 200px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-pale), var(--cream-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(82,183,136,0.35);
}
.org-avatar img { width: 100%; height: 100%; object-fit: cover; }
.org-info { padding: 0; }
.org-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
.org-role { font-size: 13px; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.org-bio { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* Slider prev/next arrow buttons (teachers & news) */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  line-height: 1;
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.slider-arrow:hover { background: var(--green-pale); transform: translateY(-50%) scale(1.07); }
.slider-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.slider-arrow-prev { left: -8px; }
.slider-arrow-next { right: -8px; }
@media (max-width: 900px) {
  .slider-arrow { width: 36px; height: 36px; font-size: 18px; }
  .slider-arrow-prev { left: 2px; }
  .slider-arrow-next { right: 2px; }
}

/* Teachers slider */
.teachers-scroll-wrapper {
  position: relative;
  overflow: hidden;          /* THIS is the clipping container */
}
.teachers-scroll-track {
  /* Keeps a horizontal flick inside the carousel instead of chaining on
     to the page or the browser's back gesture. */
  overscroll-behavior-x: contain;
  display: flex;
  gap: 24px;
  padding: 8px 4px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.teachers-scroll-track::-webkit-scrollbar { display: none; }
/* Legacy grid kept for back-compat but unused */
.teachers-grid {
  display: none;
}
.teacher-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
  /* fluid: fill wrapper ÷ visible count, minus gaps */
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
}
.teacher-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.teacher-img {
  width: 100%;
  /* Was 4/5 (portrait), which on a 320px card meant a 400px-tall photo
     and a very long card. A square crop takes about 80px off each card
     without touching any of the text below it. object-position keeps the
     crop high so faces stay centred rather than being cut at the chin. */
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--green-pale), var(--cream-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  overflow: hidden;
  flex-shrink: 0;
}
.teacher-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.teacher-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.teacher-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 800; color: var(--green-dark); margin-bottom: 4px; }
.teacher-role { font-size: 14px; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.teacher-spec {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-mid);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.teacher-exp { font-size: 14px; font-weight: 500; color: var(--text-mid); margin-bottom: 14px; }
.teacher-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--green);
  color: var(--cream);
  border-radius: 30px;
  font-size: 14px;
  margin-top: auto;
  font-weight: 700;
  width: 100%;
  transition: all var(--transition);
}
.teacher-video-btn:hover { background: var(--green-mid); transform: translateY(-1px); }

/* ===================================================
   NEWS
   =================================================== */
#news {
  position: relative;
  /* Same dark-green gradient used by Why Fix My English and the
     placement test modal, so News matches the rest of the site's
     established "dark band" sections instead of introducing new colours. */
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  overflow: hidden;
  padding-bottom: 24px;
}
#news::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(212,160,23,0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(216,243,220,0.08) 0%, transparent 40%);
  pointer-events: none;
}
#news .section-inner { position: relative; z-index: 1; }
/* News slider */
.news-scroll-wrapper {
  position: relative;
  overflow: hidden;          /* THIS is the clipping container */
}
.news-scroll-track {
  /* Keeps a horizontal flick inside the carousel instead of chaining on
     to the page or the browser's back gesture. */
  overscroll-behavior-x: contain;
  display: flex;
  gap: 28px;
  padding: 8px 4px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-scroll-track::-webkit-scrollbar { display: none; }
/* Legacy grid kept for back-compat but unused */
.news-grid {
  display: none;
}
.news-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.news-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,160,23,0.25);
}
#news .section-title { color: var(--cream); text-align: left; margin-left: 0; }
#news .section-sub { color: rgba(254,250,224,0.65); text-align: left; margin-left: 0; margin-bottom: 40px; }
.news-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(254,250,224,0.15);
  border-top: 4px solid var(--green-mid);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  transition: box-shadow var(--transition), transform var(--transition);
  flex: 0 0 calc((100% - 56px) / 3);
  min-width: 260px;
  max-width: 400px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.news-card:nth-of-type(3n+2) { border-top-color: var(--gold); }
.news-card:nth-of-type(3n+3) { border-top-color: #C1512A; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,0.35); }
.news-img {
  width: 100%;
  aspect-ratio: 16/11;
  background: linear-gradient(135deg, var(--green-pale), var(--cream-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  background: linear-gradient(135deg, var(--green-pale), var(--cream-dark));
}
/* The emoji badge that used to sit on each news photo was removed. */
.news-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.news-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.news-cat {
  background: var(--green-pale);
  color: var(--green-mid);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.news-card:nth-of-type(3n+2) .news-cat { background: var(--gold-pale); color: var(--gold-dark, #8a6d0c); }
.news-card:nth-of-type(3n+3) .news-cat { background: var(--orange-pale); color: #C1512A; }
.news-date { font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.news-date::before { content: "📅"; font-size: 11px; }
.news-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 800; color: var(--green-dark); margin-bottom: 10px; line-height: 1.3; }
.news-excerpt {
  font-size: 14.5px; font-weight: 400; color: var(--text-mid); line-height: 1.65; margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-read-more { font-size: 14px; font-weight: 700; color: var(--green-mid); transition: color var(--transition), gap var(--transition); margin-top: auto; display: inline-flex; align-items: center; gap: 4px; }
.news-card:nth-of-type(3n+2) .news-read-more { color: var(--gold-dark, #8a6d0c); }
.news-card:nth-of-type(3n+3) .news-read-more { color: #C1512A; }
.news-read-more:hover { gap: 8px; }

/* ===================================================
   SLIDER (teachers & news)
   =================================================== */
.slider-wrapper {
  position: relative;
}
/* Floating side arrows — removed; navigation is via trackpad/swipe + dots */
/* Track */
.slider-track {
  display: flex;
  gap: 24px;
  overflow: hidden;          /* hides non-visible slides */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 8px;     /* breathing room for box-shadows */
}
/* Dot indicators */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.slider-dot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--border);
  border: none;
  padding: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.slider-dot.active {
  width: 24px;
  background: var(--green);
}

/* Old unused grid rules already set to display:none */


/* ===================================================
   LEVEL TEST SECTION
   =================================================== */
#level-test {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}
#level-test::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,160,23,0.18) 0%, transparent 70%);
  pointer-events: none;
}
#level-test::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(82,183,136,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.level-test-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.level-test-left {}
.level-test-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-test-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 16px;
}
.level-test-headline em {
  color: var(--gold-light);
  font-style: normal;
}
.level-test-desc {
  font-size: 16px;
  color: rgba(254,250,224,0.75);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 420px;
}
.level-test-levels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.level-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: rgba(254,250,224,0.7);
  background: rgba(255,255,255,0.06);
  transition: all var(--transition);
}
.level-pill.highlight {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold);
}
.level-test-cta-wrap {
  max-width: 1100px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.level-test-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 52px;
  background: var(--gold);
  color: var(--green-dark);
  border-radius: 50px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.4px;
  transition: all var(--transition);
  cursor: pointer;
  box-shadow: 0 10px 36px rgba(212,160,23,0.45);
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.level-test-cta .cta-arrow { font-size: 24px; transition: transform var(--transition); }
.level-test-cta:hover { background: var(--gold-light); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(212,160,23,0.45); }
.level-test-cta:hover .cta-arrow { transform: translateX(4px); }

/* Right panel — decorative card */
.level-test-right {
  display: flex;
  justify-content: center;
}
.level-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}
.level-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 24px;
  text-align: center;
}
.level-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.level-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  width: 28px;
  flex-shrink: 0;
}
.level-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
}
.level-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.level-bar-row.visible .level-bar-fill { width: var(--bar-w); }
.level-bar-desc {
  font-size: 12px;
  color: rgba(254,250,224,0.55);
  width: 84px;
  flex-shrink: 0;
  text-align: right;
}

/* ===================================================
   CONTACT
   =================================================== */
/* ===================================================
   FAQ — accordion
   =================================================== */
#faq {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
#faq::before {
  /* playful soft color blobs, echoing the rotating pastel palette used
     in the Why Fix My English cards, to keep this section feeling lively
     rather than a plain flat list */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(212,160,23,0.10) 0%, transparent 32%),
    radial-gradient(circle at 4% 90%, rgba(45,106,79,0.08) 0%, transparent 30%),
    radial-gradient(circle at 96% 85%, rgba(193,81,42,0.08) 0%, transparent 28%);
  pointer-events: none;
}
#faq .section-inner { position: relative; z-index: 1; }
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--gold-pale);
  border: 1px solid rgba(212,160,23,0.35);
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.faq-eyebrow::before { content: "💬"; font-size: 13px; }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--green-pale);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.faq-item:hover { transform: translateX(3px); }
.faq-item:nth-child(3n+2) { border-left-color: var(--cream-dark); }
.faq-item:nth-child(3n+3) { border-left-color: var(--orange-pale); }
.faq-item.open {
  border-left-color: var(--green);
  box-shadow: var(--shadow-md);
}
.faq-item:nth-child(3n+2).open { border-left-color: var(--gold); }
.faq-item:nth-child(3n+3).open { border-left-color: var(--terracotta, #C1512A); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
}
.faq-question:hover { color: var(--gold-dark, #8a6d0c); }
.faq-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--green-pale);
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 800;
  transition: background var(--transition), color var(--transition);
}
.faq-item:nth-child(3n+2) .faq-num { background: var(--cream-dark); }
.faq-item:nth-child(3n+3) .faq-num { background: var(--orange-pale); }
.faq-item.open .faq-num { background: var(--green); color: var(--cream); }
.faq-item:nth-child(3n+2).open .faq-num { background: var(--gold); color: var(--green-dark); }
.faq-item:nth-child(3n+3).open .faq-num { background: var(--terracotta, #C1512A); color: var(--cream); }
.faq-q-text { flex: 1; }
.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background var(--transition), color var(--transition);
}
.faq-item:nth-child(3n+2) .faq-icon { background: var(--cream-dark); }
.faq-item:nth-child(3n+3) .faq-icon { background: var(--orange-pale); }
.faq-item.open .faq-icon {
  transform: rotate(135deg) scale(1.1);
  background: var(--green);
  color: var(--cream);
}
.faq-item:nth-child(3n+2).open .faq-icon { background: var(--gold); color: var(--green-dark); }
.faq-item:nth-child(3n+3).open .faq-icon { background: var(--terracotta, #C1512A); color: var(--cream); }
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer {
  margin: 0 24px 22px 24px;
  padding: 14px 18px;
  background: var(--green-pale);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mid);
}
.faq-answer a { color: var(--green-mid); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: var(--gold-dark, #8a6d0c); }
.faq-item:nth-child(3n+2) .faq-answer { background: var(--gold-pale); }
.faq-item:nth-child(3n+3) .faq-answer { background: var(--orange-pale); }
.faq-cta {
  max-width: 820px;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-mid);
}
.faq-cta a {
  font-weight: 700;
  color: var(--green);
  transition: color var(--transition);
}
.faq-cta a:hover { color: var(--gold-dark, #8a6d0c); }
@media (max-width: 640px) {
  .faq-question { padding: 16px 16px; gap: 12px; font-size: 15px; }
  .faq-num { width: 30px; height: 30px; font-size: 14px; }
  .faq-answer { margin: 0 16px 18px 16px; padding: 12px 14px; }
}

#contact { background: var(--white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 14px; font-weight: 700; color: var(--text-mid); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  background: var(--cream);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.12);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 120px; }
/* ---------------------------------------------------
   Phone field: flag + dial code + number inside ONE bordered box.
   The <select> is a real native control laid invisibly over the flag,
   so the dropdown, keyboard and screen readers all behave normally
   while the visible part stays a flag and a caret.
   --------------------------------------------------- */
.phone-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.phone-field:focus-within {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.12);
  background: var(--white);
}
/* The number input loses its own frame — the wrapper is the frame now. */
.phone-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
}
.phone-field input:focus { box-shadow: none; background: transparent; }

.phone-code-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  cursor: pointer;
}
.phone-flag { font-size: 19px; line-height: 1; }
/* Small caret drawn in CSS so it matches the site rather than the OS. */
.phone-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  flex: 0 0 auto;
}
/* The real control: full size over the flag, invisible, still clickable. */
.phone-code-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.phone-code-wrap:focus-within .phone-caret { border-top-color: var(--green-mid); }

.phone-dial {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
/* The error state is set on the input, but the frame belongs to the
   wrapper, so the red edge has to be drawn there. */
.phone-field:has(input.invalid) {
  border-color: #c0392b;
  background: #fdecea;
}

.form-group input.invalid,
.form-group textarea.invalid {
  border-color: #c0392b;
  background: #fdecea;
}
.field-error {
  display: none;
  font-size: 12px;
  color: #c0392b;
  font-family: 'DM Sans', sans-serif;
}
.field-error.show { display: block; }
.form-submit {
  padding: 14px 32px;
  background: var(--green);
  color: var(--cream);
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
  transition: all var(--transition);
  align-self: flex-start;
}
.form-submit:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,0.25); }
.form-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  /* The two consent lines belong together, so they sit closer than the
     form's other rows. 12px plus the form's own gap left a visible gulf
     between them. */
  margin-bottom: 4px;
}
/* In the drawer the rows are flex children, so the gap applies too —
   pull the second one back up against the first. */
.enquiry-form > .form-consent-row + .form-consent-row { margin-top: -10px; }
.form-consent-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--green);
}
.form-consent-row span {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}
.form-consent-row a { color: var(--green); text-decoration: underline; }
.form-consent-row a:hover { color: var(--gold); }
.form-consent-error {
  display: none;
  background: #fdecea;
  color: #7b241c;
  border: 1px solid #f5b7b1;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 12px;
}
.form-success {
  display: none;
  background: var(--green-pale);
  border: 1px solid rgba(82,183,136,0.4);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--green);
  font-size: 15px;
  font-weight: 500;
}
.form-success.show { display: block; }

.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 800; color: var(--green-dark); margin-bottom: 8px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-icon {
  width: 44px; height: 44px;
  background: var(--green-pale);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.contact-item-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mid); margin-bottom: 4px; }
.contact-item-val { font-size: 16px; color: var(--text-mid); font-weight: 600; }
.social-links { display: flex; gap: 12px; }
.social-link {
  width: 44px; height: 44px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all var(--transition);
  color: var(--green);
}
.social-link:hover { background: var(--green); color: var(--cream); transform: translateY(-2px); }

/* ===================================================
   PARTNERS
   =================================================== */
#partners { background: var(--green-dark); padding: 80px 24px; }
#partners .section-title { color: var(--cream); }
#partners .section-sub { color: rgba(254,250,224,0.6); }
#partners .section-tag { color: var(--gold-light); }
.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  /* Caps the row at the width four logos actually need, so they sit as a
     deliberate group in the middle of the band instead of a thin line
     stranded in a lot of empty dark green. */
  max-width: 900px;
  margin: 0 auto;
}
.partner-logo {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 20px 32px;
  display: flex; align-items: center; justify-content: center;
  /* Equal-width tiles. Previously each one was only as wide as its label,
     so "Cambridge" sat in a visibly smaller box than "British Council" —
     unnoticeable across six, obvious across four. They shrink together on
     narrow screens rather than one wrapping early. */
  flex: 0 1 190px;
  min-width: 160px;
  height: 80px;
  transition: all var(--transition);
}
.partner-logo:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }

/* Desktop: all four partners on one row. The tiles were sized from their
   own labels, so the two long ones ("British Council", "IELTS Official")
   pushed the row past its width and wrapped onto a second line. They now
   share the row equally and the labels are set a little smaller and
   held on one line, which fits comfortably at every desktop width.
   Below 900px the tiles wrap as before — four across a phone would be
   unreadable. */
@media (min-width: 901px) {
  .partners-row {
    flex-wrap: nowrap;
    gap: 20px;
    max-width: 980px;
  }
  .partner-logo {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 16px;
  }
  .partner-logo span {
    font-size: 18px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}
.partner-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 800;
  color: rgba(254,250,224,0.85);
  letter-spacing: 1px;
}
.partner-logo img { max-width: 120px; max-height: 40px; object-fit: contain; opacity: 0.7; filter: brightness(2); }

/* ===================================================
   QUICK ENQUIRY DRAWER
   A panel that slides in from the right rather than a box that appears
   in the middle: the page stays visible behind it, so the visitor keeps
   their place instead of being thrown somewhere else. Reuses the shared
   .modal-overlay backdrop and the contact form's field styles, so it
   inherits focus rings, error states and the mobile tap-target sizes
   defined further down this file.
   =================================================== */
#enquiry-modal-overlay {
  /* Pin the panel to the right edge, full height, instead of centring it. */
  align-items: stretch;
  /* Gives the panel's rotateY somewhere to rotate in; without a
     perspective on the parent the hinge reads as a flat squash. */
  perspective: 1600px;
  justify-content: flex-end;
  padding: 0;
  /* The dark backdrop fades in under the panel rather than snapping on. */
  background: rgba(10, 34, 24, 0);
  transition: background 0.35s ease;
}
#enquiry-modal-overlay.open { background: rgba(10, 34, 24, 0.55); }
#enquiry-modal-overlay.closing { background: rgba(10, 34, 24, 0); }

.modal-enquiry-box {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 32px;
  overflow-y: auto;
  border-radius: 24px 0 0 24px;
  box-shadow: -24px 0 60px rgba(10, 34, 24, 0.35);
  /* An animation rather than a transition: the panel is display:none
     until the overlay opens, and a transition from a style set in the
     same frame as the display change does not run. Going from
     display:none to visible also restarts the animation by itself, so
     the entrance replays every time the drawer is opened.

     The panel swings in on a hinge at its right edge rather than just
     sliding: it starts rotated away from the viewer and flattens as it
     arrives, which gives the movement some depth. The easing overshoots
     very slightly so it settles rather than stops dead. */
  transform-origin: right center;
  animation: enquiryDrawerIn 0.62s cubic-bezier(0.16, 1.02, 0.3, 1) both;
}
#enquiry-modal-overlay.closing .modal-enquiry-box {
  animation: enquiryDrawerOut 0.32s cubic-bezier(0.55, 0, 0.9, 0.3) both;
}
@keyframes enquiryDrawerIn {
  0%   { transform: translateX(100%) rotateY(-14deg) scale(0.97); opacity: 0.2; }
  60%  { opacity: 1; }
  100% { transform: translateX(0)    rotateY(0deg)   scale(1);    opacity: 1; }
}
@keyframes enquiryDrawerOut {
  0%   { transform: translateX(0)    rotateY(0deg)   scale(1);    opacity: 1; }
  100% { transform: translateX(100%) rotateY(-10deg) scale(0.98); opacity: 0; }
}

/* A light sweeps across the dark header as the panel lands — a single
   pass, not a loop, so it reads as the panel catching the light on its
   way in rather than as a permanent effect. */
.enquiry-head::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(254,250,224,0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: enquirySheen 1.1s ease-out 0.22s both;
}
@keyframes enquirySheen {
  from { left: -60%; }
  to   { left: 130%; }
}

/* The contents arrive just behind the panel, one row after another,
   instead of the whole form appearing fully formed. Each row is given
   its own small delay below. */
.enquiry-title,
.enquiry-sub,
.enquiry-chip,
.enquiry-form > * {
  animation: enquiryRowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.enquiry-title { animation-delay: 0.16s; }
.enquiry-sub   { animation-delay: 0.22s; }
.enquiry-chip  { animation: enquiryChipIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; }
.enquiry-form > *:nth-child(1) { animation-delay: 0.34s; }
.enquiry-form > *:nth-child(2) { animation-delay: 0.39s; }
.enquiry-form > *:nth-child(3) { animation-delay: 0.44s; }
.enquiry-form > *:nth-child(4) { animation-delay: 0.49s; }
.enquiry-form > *:nth-child(5) { animation-delay: 0.53s; }
.enquiry-form > *:nth-child(6) { animation-delay: 0.57s; }
.enquiry-form > *:nth-child(7) { animation-delay: 0.60s; }
.enquiry-form > *:nth-child(8) { animation-delay: 0.63s; }
.enquiry-form > *:nth-child(9) { animation-delay: 0.66s; }
@keyframes enquiryRowIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enquiryChipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}
/* The hidden error banners must stay hidden — the row animation sets
   opacity, not display, so their own display rules still win, but this
   keeps them out of the stagger entirely. */
.enquiry-form > .form-consent-error,
.enquiry-form > .form-success { animation: none; }

/* Everything above is decoration. Switched off wholesale for anyone who
   asks their system for reduced motion: the drawer still opens and
   closes, just without the movement. */
@media (prefers-reduced-motion: reduce) {
  .modal-enquiry-box,
  #enquiry-modal-overlay.closing .modal-enquiry-box,
  .enquiry-head::before,
  .enquiry-title, .enquiry-sub, .enquiry-chip,
  .enquiry-form > * { animation: none; }
  #enquiry-modal-overlay { transition: none; }
}

.enquiry-head {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  border-radius: 24px 0 0 0;
  /* Trimmed: the heading block was taking more of the panel than it
     earned, pushing the form itself further down. */
  padding: 26px 32px 22px;
  position: relative;
  overflow: hidden;
}
/* Soft gold bloom, echoing the About panel and the test modal. */
.enquiry-head::after {
  content: '';
  position: absolute;
  top: -70px; right: -50px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,0.22), transparent 70%);
  pointer-events: none;
}
.enquiry-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
.enquiry-sub {
  font-size: 13.5px;
  color: rgba(254,250,224,0.75);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}
/* The course, teacher or article the visitor came from. */
.enquiry-chip {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 16px;
  border-radius: 30px;
  background: rgba(254,250,224,0.12);
  border: 1px solid rgba(254,250,224,0.25);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 1;
}
.enquiry-chip[hidden] { display: none; }
.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 32px 0;
}
/* The drawer is narrower than the contact section, so the email/phone
   pair stacks instead of sitting side by side. */
.enquiry-form .form-row { grid-template-columns: 1fr; }
.enquiry-form .form-group textarea { min-height: 84px; }
.enquiry-submit { align-self: stretch; }

/* Call-back request — the tick sits in a tinted box so it reads as an
   option rather than a third consent checkbox, and the time select
   appears beneath it only once the box is ticked. */
.enquiry-callback[hidden] { display: none; }
.enquiry-callback {
  background: var(--green-pale);
  border: 1px solid rgba(82,183,136,0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.enquiry-callback-row { margin-bottom: 0; }
.enquiry-callback-row span { font-weight: 700; color: var(--green-dark); }
.enquiry-callback-time { margin-top: 12px; }
.enquiry-callback-time[hidden] { display: none; }
.enquiry-callback-time select { background: var(--white); }
/* The close button sits on the dark header here, not on cream. */
.modal-enquiry-box .modal-close {
  background: rgba(254,250,224,0.16);
  color: var(--cream);
}
.modal-enquiry-box .modal-close:hover { background: rgba(254,250,224,0.3); color: var(--cream); }

@media (max-width: 560px) {
  /* Full width on a phone — a 460px panel would leave a useless sliver
     of page showing on one side. */
  .modal-enquiry-box { max-width: 100%; border-radius: 0; }
  .enquiry-head { border-radius: 0; padding: 28px 20px 24px; }
  .enquiry-title { font-size: 23px; }
  .enquiry-form { padding: 22px 20px 0; gap: 14px; }
}

/* ===================================================
   FOOTER
   =================================================== */
footer {
  background: var(--green-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 60px 24px 32px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand .logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}
.footer-brand .logo span { color: var(--orange); }
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-logo-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.footer-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -0.5px;
}
.footer-logo-text em {
  color: var(--orange);
  font-style: normal;
  font-weight: 800;
}
.footer-brand p { font-size: 14px; color: rgba(254,250,224,0.6); line-height: 1.7; }
.footer-col h5 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cream); margin-bottom: 16px; }
.footer-col a, .footer-col p {
  display: block;
  font-size: 14px;
  color: rgba(254,250,224,0.6);
  margin-bottom: 10px;
  transition: color var(--transition);
  line-height: 1.5;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin: 0;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--gold); color: var(--green-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p { font-size: 13px; color: rgba(254,250,224,0.4); }

/* ===================================================
   BACK TO TOP
   =================================================== */
#back-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  background: var(--green);
  color: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
  z-index: 500;
}
#back-top.show { opacity: 1; pointer-events: auto; }
#back-top:hover { background: var(--green-mid); transform: translateY(-3px); }

/* ===================================================
   ANIMATIONS
   =================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 1100px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 100px; }
  .hero-img-wrap { max-width: 360px; margin: 0 auto; }
  .about-img { float: none; width: 100%; max-width: 100%; margin: 0 0 32px; }
  .about-cards { grid-template-columns: 1fr; }
  .organizers-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .level-test-inner { grid-template-columns: 1fr; gap: 40px; }
  .level-test-right { display: none; }
  /* 2 cards visible on tablet */
  .teacher-card { flex: 0 0 calc((100% - 24px) / 2); }
  .news-card    { flex: 0 0 calc((100% - 28px) / 2); }
}
@media (max-width: 640px) {
  section { padding: 72px 16px; }
  .courses-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .stat-item + .stat-item { border-left: none; padding-left: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .modal-course-header, .modal-course-body { padding: 24px 20px; }
  .modal-video-header, .modal-video-body { padding: 20px 20px; }
  .modal-meta-grid { grid-template-columns: 1fr; }
  /* 1 card visible on mobile */
  .teacher-card { flex: 0 0 100%; max-width: 100%; }
  .news-card    { flex: 0 0 100%; max-width: 100%; }
}

/* ===================================================
   CREATIVE ANIMATIONS
   =================================================== */

/* ── 1. HERO: Floating letters that drift across the background ── */
.hero-letter {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: rgba(27, 67, 50, 0.06);
  pointer-events: none;
  user-select: none;
  animation: letterDrift linear infinite;
  z-index: 0;
}
@keyframes letterDrift {
  0%   { transform: translateY(0)   rotate(0deg)  scale(1);    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-110vh) rotate(25deg) scale(1.1); opacity: 0; }
}

/* ── 2. HERO: Typewriter cursor on headline ── */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  background: var(--green-mid);
  margin-left: 3px;
  border-radius: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 3. STAT COUNTER: numbers count up ── */
.stat-val[data-target] { transition: none; }

/* ── 4. SECTION HEADERS: slide-in from left with gold underline draw ── */
.section-title.anim-title {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-title.anim-title.visible {
  opacity: 1;
  transform: translateX(0);
}
.divider.anim-divider {
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.divider.anim-divider.visible { width: 48px; }

/* ── 5. COURSE CARDS: staggered pop-in ── */
.course-card.anim-card {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.course-card.anim-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── 6. COURSE CARD: magnetic tilt on hover ── */
.course-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── 7. ABOUT CARDS: flip in from bottom ── */
.about-card.anim-about {
  opacity: 0;
  transform: perspective(600px) rotateX(20deg) translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-card.anim-about.visible {
  opacity: 1;
  transform: perspective(600px) rotateX(0deg) translateY(0);
}

/* ── 8. HERO BADGE: gentle float animation ── */
.hero-float2 {
  animation: floatBadge2 4.5s ease-in-out infinite;
}
@keyframes floatBadge2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── 9. LEVEL PILLS: wave entrance ── */
.level-pill.anim-pill {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.level-pill.anim-pill.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10. PARTNER LOGOS: shimmer sweep on hover ── */
.partner-logo {
  position: relative;
  overflow: hidden;
}
.partner-logo::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: none;
  pointer-events: none;
}
.partner-logo:hover::after {
  animation: shimmerSweep 0.6s ease forwards;
}
@keyframes shimmerSweep {
  0%   { left: -100%; }
  100% { left: 160%; }
}

/* ── 11. NAV LINKS: underline grow on hover ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 14px; right: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ── 12. SCROLL PROGRESS BAR at top of page ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--green-light), var(--gold));
  background-size: 200% 100%;
  z-index: 1100;
  transition: width 0.1s linear;
  animation: progressGradient 3s linear infinite;
}
@keyframes progressGradient {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── 13. HERO image wrap: subtle pulse glow — see .hero-img-wrap::before above ── */

/* ── 14. SECTION TAG: blink-in with gold color ── */
.section-tag.anim-tag {
  opacity: 0;
  letter-spacing: 6px;
  transition: opacity 0.5s ease, letter-spacing 0.6s ease;
}
.section-tag.anim-tag.visible {
  opacity: 1;
  letter-spacing: 2px;
}

/* ── 15. TEACHER + NEWS CARDS: entrance ── */
.teacher-card.anim-card,
.news-card.anim-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.teacher-card.anim-card.visible,
.news-card.anim-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 16. BACK TO TOP: spin on appear ── */
#back-top.show {
  animation: spinIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes spinIn {
  from { opacity: 0; transform: translateY(16px) rotate(-90deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ── 17. CONTACT ICONS: bounce on hover ── */
.contact-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-item:hover .contact-icon {
  transform: scale(1.2) rotate(-8deg);
}

/* ── 18. SOCIAL LINKS: fan out on hover ── */
.social-links:hover .social-link {
  transform: translateY(-4px);
}
.social-links .social-link {
  transition: all 0.25s ease;
}
.social-links .social-link:nth-child(1) { transition-delay: 0s; }
.social-links .social-link:nth-child(2) { transition-delay: 0.04s; }
.social-links .social-link:nth-child(3) { transition-delay: 0.08s; }
.social-links .social-link:nth-child(4) { transition-delay: 0.12s; }
.social-links .social-link:nth-child(5) { transition-delay: 0.16s; }

/* ── 19. LEVEL TEST CTA: ripple effect ── */
.level-test-cta {
  position: relative;
  overflow: hidden;
}
.level-test-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
}
.level-test-cta:active::before {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: 0s;
}

/* ── 20. ORGANIZER CARDS: left/right slide ── */
.organizer-card.anim-org-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.organizer-card.anim-org-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.organizer-card.anim-org-left.visible,
.organizer-card.anim-org-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================================================
   MOBILE TOUCH TARGETS
   -------------------------------------------------------------------
   Apple's HIG and WCAG both put the minimum reliable tap target at
   ~44px. Several controls were well under that (the EN/RU toggle at
   29x18, the carousel dots at 8x8), which makes them fiddly to hit on
   a phone and easy to mis-tap.

   The technique below enlarges the HIT AREA without changing how
   anything looks: padding grows the button box, and for the dots a
   transparent ::after pseudo-element extends the touchable region
   beyond the visible dot. Nothing moves or gets bigger on screen.
   =================================================================== */
@media (max-width: 768px) {

  /* Language toggle — was 29x18 */
  .lang-btn {
    min-height: 40px;
    min-width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lang-toggle { align-items: center; }

  /* Hamburger — was 26x24 */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Carousel arrows — were 36x36 */
  .slider-arrow { width: 44px; height: 44px; font-size: 20px; }

  /* Carousel dots — visible dot stays 8px, tappable area becomes 44px.
     position:relative is needed for the ::after to anchor to the dot. */
  .slider-dot { position: relative; }
  .slider-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }

  /* Buttons and links that sat in the 35-38px range — nudged to 44 so
     they are comfortable rather than merely possible to hit. */
  .filter-btn,
  .course-details-btn,
  .teacher-video-btn,
  .why-us-explore,
  .news-read-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Consent checkboxes were 16x16 — far too small to hit reliably, and
     these are the boxes a visitor MUST tick to submit an enquiry, so a
     missed tap costs a lead. Enlarged to 24px visually with the label
     also clickable, giving a much bigger effective target. */
  .form-consent-row input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
  }
  .form-consent-row label { cursor: pointer; padding: 4px 0; }

  /* Footer / contact social icons were 38px — just under the mark. */
  .social-link,
  footer a[aria-label] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Form fields: 16px font stops iOS Safari from zooming the page in
     when a field is focused, which is disorienting and leaves the
     visitor scrolled somewhere unexpected. The .form-group selectors
     are needed to beat the more specific rules further up the file —
     a bare "input" rule loses to ".form-group input" no matter that it
     comes later. */
  input, select, textarea,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }
}