@charset "UTF-8";
/*
Theme Name:  OnTESOL Child
Theme URI:   https://ontesol.com
Description: OnTESOL child theme for Neve. Full design system + country page components.
Author:      OnTESOL -SebEinstein
Template:    neve
Version:     6.0.9
*/

/* ============================================================
   FONTS
   ============================================================ */

/* ============================================================
   NEVE FONT OVERRIDE
   Fonts are loaded via wp_enqueue_style in functions.php.
   !important ensures our fonts win over any Neve inline styles.
   In Customizer: set font to Default to prevent Neve injecting its own.
   ============================================================ */


h1, h2, h3, h4, h5, h6,
.section-heading,
.display-heading,
.cp-hero h1,
.cp-stat-val,
.toc-cta-heading,
.city-name,
.school-card-title,
.employer-name,
.cert-card-title,
.salary-highlight,
.jl-salary,
.cp-article-title,
.cp-final-cta h2,
.cp-req-title,
.ta-hstat-num,
.earning-amount,
.dest-salary,
.best-salary,
.country-name,
.benefit-title,
.benefit-num {
  font-family: 'Fraunces', serif !important;
}

/* ============================================================
   RESET
   ============================================================ */

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

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --teal:        #0d7377;
  --teal-dark:   #085255;
  --teal-deep:   #052e30;
  --teal-mid:    #0f8f94;
  --teal-light:  #14a3a8;
  --teal-pale:   #e2f4f4;
  --teal-xpale:  #f0fafa;
  --sand:        #f5f0e8;
  --sand-deep:   #ede6d8;
  --warm-white:  #fdfcfa;
  --white:       #ffffff;
  --ink:         #1a2e30;
  --body:        #2d4a4d;
  --muted:       #5c7a7d;
  --rule:        rgba(13,115,119,0.12);
  --amber:       #c8792a;
  --amber-pale:  #fdf3e7;
  --wrap-max:    1180px;
  --section-v:   80px;
  --section-h:   52px;
}

.bg-sand        { background: var(--sand); }
.bg-warm-white  { background: var(--warm-white); }

/* ============================================================
   BASE
   ============================================================ */

html { scroll-behavior: smooth; }
body { font-family: 'Sora', sans-serif; background: var(--warm-white); color: var(--body); overflow-x: hidden; font-size: 16px; line-height: 1.65; padding-top: 70px; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }

/* Body copy weight uplift — Sora 300 is too light at body size */
p, li, td, label, input, textarea, select { font-weight: 400; }
.cp-body p, .cp-cert-inner p { font-size: 15px; color: var(--body); line-height: 1.8; margin-bottom: 16px; font-weight: 400; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--teal); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--teal); border-radius: 1px; flex-shrink: 0; }
.eyebrow-white { color: rgba(255,255,255,0.6); }
.eyebrow-white::before { background: rgba(255,255,255,0.6); }

.cp-hero h1 em,
.section-heading em,
.display-heading em,
.cp-final-cta h2 em {
  font-style: italic;
  font-variation-settings: 'opsz' 9; /* pin to most decorative optical size */
}

.section-heading { font-family: 'Fraunces', serif; font-size: clamp(24px,2.5vw,34px); font-weight: 900; color: var(--ink); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
.section-heading em { color: var(--teal); }

.display-heading { font-family: 'Fraunces', serif; font-size: clamp(32px,3.6vw,50px); font-weight: 900; line-height: 1.07; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 18px; }
.display-heading em { color: var(--teal); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-light); color: #fff; padding: 15px 30px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .2s; font-family: 'Sora',sans-serif; line-height: 1; }
.btn-primary:hover { background: #16bec3; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(20,163,168,0.4); color: #fff; }

.btn-outline { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--teal); padding: 13px 26px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .2s; border: 1.5px solid var(--teal); font-family: 'Sora',sans-serif; line-height: 1; }
.btn-outline:hover { background: var(--teal-pale); }

.btn-ghost-sm { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); padding: 15px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all .2s; border: 1.5px solid rgba(255,255,255,0.2); font-family: 'Sora',sans-serif; line-height: 1; }
.btn-ghost-sm:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ============================================================
   NAV
   ============================================================ */

.hfg-header, #masthead { display: none !important; }

.ont-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 70px; display: flex; align-items: stretch; background: var(--teal-deep); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ont-nav-logo-panel { display: flex; align-items: center; padding: 0 44px 0 28px; background: #fff; flex-shrink: 0; clip-path: polygon(0 0,calc(100% - 22px) 0,100% 100%,0 100%); }
.ont-nav-logo { display: flex; align-items: center; text-decoration: none; }
.ont-nav-logo img { height: 34px; width: auto; display: block; }
.ont-nav-dark { display: flex; align-items: center; justify-content: space-between; flex: 1; padding: 0 28px 0 36px; }
.ont-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.ont-nav-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 7px; transition: all .15s; display: block; }
.ont-nav-links a:hover, .ont-nav-links .current-menu-item > a, .ont-nav-links .current_page_item > a { color: #fff; background: rgba(255,255,255,0.08); }
.ont-nav-links .current-menu-item > a { font-weight: 600; background: transparent; }
.ont-nav-right { display: flex; align-items: center; gap: 10px; }
.ont-nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .15s; font-family: 'Sora',sans-serif; line-height: 1; white-space: nowrap; }
.ont-nav-btn-ghost { color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.25); }
.ont-nav-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.ont-nav-btn-solid { background: var(--teal-light); color: #fff; }
.ont-nav-btn-solid:hover { background: #16bec3; color: #fff; }
.ont-nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.ont-nav-hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.8); border-radius: 2px; transition: all .2s; }
.ont-nav-mobile { display: none; position: fixed; top: 70px; left: 0; right: 0; background: var(--teal-deep); border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 24px 24px; z-index: 199; flex-direction: column; gap: 4px; }
.ont-nav-mobile.is-open { display: flex; }
.ont-nav-mobile a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 15px; font-weight: 500; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); display: block; transition: color .15s; }
.ont-nav-mobile a:hover { color: #fff; }
.ont-nav-mobile-ctas { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.admin-bar .ont-nav { top: 32px; }
.admin-bar body { padding-top: calc(70px + 32px); }

/* ============================================================
   MEGA MENU — Courses Dropdown
   Contained card below nav, hover-triggered on desktop.
   Hidden at ≤1040px — mobile uses flat links in the drawer.
   ============================================================ */

.ont-mega {
  display: none;
  position: fixed;
  top: 70px;
  z-index: 198;
  padding-top: 10px;
}
.ont-mega.is-open {
  display: block;
}

.ont-mega-inner {
  background: #fff;
  border: 1px solid rgba(13,115,119,0.1);
  border-top: 2.5px solid var(--teal-light);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 60px rgba(5,46,48,0.15), 0 4px 16px rgba(5,46,48,0.08);
  padding: 28px 28px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  max-width: 900px;
  width: 100%;
  animation: megaIn .2s ease-out;
}

@keyframes megaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ont-mega-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ont-mega-label::before {
  content: '';
  width: 14px;
  height: 1.5px;
  background: var(--teal-light);
  border-radius: 1px;
  flex-shrink: 0;
}

.ont-mega-course {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(13,115,119,0.08);
  margin-bottom: 10px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
  position: relative;
}
.ont-mega-course:last-child { margin-bottom: 0; }
.ont-mega-course:hover {
  border-color: rgba(13,115,119,0.18);
  background: var(--teal-xpale);
}
.ont-mega-course h4 {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.ont-mega-course p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 400;
}

.ont-mega-popular {
  position: absolute;
  top: -1px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--teal-light);
  padding: 2px 8px 3px;
  border-radius: 0 0 5px 5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ont-mega-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-pale);
  padding: 3px 9px;
  border-radius: 5px;
  line-height: 1;
}
.ont-mega-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.ont-mega-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.ont-mega-spec:hover { background: var(--teal-xpale); }

.ont-mega-spec-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--teal-xpale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ont-mega-spec-icon svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.ont-mega-spec strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.ont-mega-spec small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.3;
}

.ont-mega-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--body);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.ont-mega-link:hover {
  color: var(--ink);
  background: var(--teal-xpale);
}
.ont-mega-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
  opacity: .6;
}
.ont-mega-link:hover svg {
  color: var(--teal);
  opacity: 1;
}

.ont-mega-divider {
  height: 1px;
  background: var(--rule);
  margin: 8px 0;
}

.ont-mega-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding: 14px 0 18px;
  margin-top: 4px;
}

.ont-mega-brochure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.ont-mega-brochure:hover { color: var(--teal); }
.ont-mega-brochure svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ont-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-light);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
}
.ont-mega-cta:hover {
  background: #16bec3;
  color: #fff;
}


.ont-nav-links .ont-mega-trigger.is-active > a {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.ont-nav-links .ont-mega-trigger > a::after {
  content: ' ▾';
  font-size: 9px;
  opacity: .5;
}

@media (max-width: 1040px) {
  .ont-mega { display: none !important; }
}

.admin-bar .ont-mega { top: calc(70px + 32px); }


/* ============================================================
   COURSES MEGA — Stacked rows layout + inline Practicum
   Restructures the courses mega from 3-equal-cols to 2 vertical
   sections. Row 1 (Core Certifications) holds the two main course
   cards plus a thinner Practicum card inline. Row 2 holds
   Specialists, Explore, and the advisor callback card.
   ============================================================ */

/* Override base .ont-mega-inner grid for this mega only */
.ont-mega-inner--rows {
  display: block;
}

/* Each row is a self-contained section with a hairline rule between */
.ont-mega-section {
  margin-bottom: 0;
}
.ont-mega-section + .ont-mega-section {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 24px;
}

/* Row 1 — two main courses + thinner Practicum (3 cols, last narrower) */
.ont-mega-courses-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.55fr;
  gap: 14px;
}

/* Row 2 — three columns: specialists + explore + advisor */
.ont-mega-extras-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

/* ── Featured course (Most Popular) ──────────────────────────
   Filled background creates visual hierarchy in Row 1 —
   anchors the column and reinforces "most popular" without
   relying on the badge alone. */
.ont-mega-course--popular {
  background: var(--teal-xpale);
  border-color: rgba(13,115,119,0.15);
}
.ont-mega-course--popular:hover {
  background: var(--teal-pale);
  border-color: rgba(13,115,119,0.28);
}

/* ── Practicum / supplementary module link ─────────────────
   Inline as a narrower 3rd column. Dashed border signals
   "supplementary / optional component" without competing with
   the two main course cards. Content centred vertically since
   grid stretches the dashed box to match course-card height. */
.ont-mega-addon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border-radius: 8px;
  border: 1.5px dashed rgba(13,115,119,0.22);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ont-mega-addon:hover {
  background: var(--teal-xpale);
  border-color: rgba(13,115,119,0.4);
}
.ont-mega-addon h5 {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.3;
}
.ont-mega-addon p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 400;
}

/* ── Advisor callback card ─────────────────────────────────
   Lives in the third column of Row 2. Soft teal gradient,
   subtle circular accent, icon-driven layout. Routes to the
   external callback request form on registration.ontesol.com. */
.ont-mega-advisor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--teal-xpale) 0%, var(--teal-pale) 100%);
  border: 1px solid rgba(13,115,119,0.12);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.ont-mega-advisor::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(13,115,119,0.06);
  pointer-events: none;
}
.ont-mega-advisor:hover {
  border-color: rgba(13,115,119,0.22);
  box-shadow: 0 6px 20px rgba(13,115,119,0.1);
}
.ont-mega-advisor-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(13,115,119,0.08);
}
.ont-mega-advisor-icon svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}
.ont-mega-advisor h5 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.ont-mega-advisor p {
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.ont-mega-advisor-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.ont-mega-advisor-cta svg {
  width: 13px;
  height: 13px;
  transition: transform .2s;
}
.ont-mega-advisor:hover .ont-mega-advisor-cta svg {
  transform: translateX(3px);
}


/* ── Teach Abroad mega menu — 2-column narrow variant ──── */

.ont-mega--narrow .ont-mega-inner--2col {
  grid-template-columns: 1fr 1fr;
  max-width: 580px;
}

/* Destination links with flag */
.ont-mega-dest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.ont-mega-dest:hover { background: var(--teal-xpale); }
.ont-mega-dest-flag {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-xpale);
  border-radius: 7px;
  font-size: 18px;
  flex-shrink: 0;
}
.ont-mega-dest strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* "View all destinations" link */
.ont-mega-viewall {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-radius: 7px;
  transition: background .15s;
}
.ont-mega-viewall:hover { background: var(--teal-xpale); }
.ont-mega-viewall svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Accreditations mega menu ────────────────── */

.ont-mega-inner--accred {
  grid-template-columns: 1fr 1.2fr;
  max-width: 620px;
  padding-bottom: 28px;
}

.ont-mega-accred-heading {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.ont-mega-accred-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 16px;
  font-weight: 400;
}

.ont-mega-accred-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  transition: color .15s;
}
.ont-mega-accred-more:hover { color: var(--teal-light); }
.ont-mega-accred-more svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ont-mega-accred-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(13,115,119,0.08);
  margin-bottom: 12px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ont-mega-accred-card:last-child { margin-bottom: 0; }
.ont-mega-accred-card:hover {
  border-color: rgba(13,115,119,0.18);
  background: var(--teal-xpale);
}

.ont-mega-accred-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

.ont-mega-accred-card h4 {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.ont-mega-accred-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer, #colophon { display: none !important; }
.neve-main { padding-top: 0 !important; }

.ont-footer { background: var(--teal-deep); border-top: 1px solid rgba(255,255,255,0.06); padding: 56px var(--section-h) 28px; }
.ont-footer-grid { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: 260px repeat(3,1fr); gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 24px; }
.ont-footer-logo-img { height: 30px; width: auto; margin-bottom: 12px; }
.ont-footer-brand p { font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.7; font-weight: 300; }
.ont-footer-contact { font-size: 13px; color: rgba(255,255,255,0.32); line-height: 1.9; margin-top: 10px; }
.ont-footer-contact a { color: rgba(255,255,255,0.42); text-decoration: none; transition: color .15s; }
.ont-footer-contact a:hover { color: rgba(255,255,255,0.75); }
.ont-footer-col h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.42); margin-bottom: 16px; }
.ont-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ont-footer-col a { font-size: 13px; color: rgba(255,255,255,0.36); text-decoration: none; transition: color .15s; font-weight: 300; }
.ont-footer-col a:hover { color: rgba(255,255,255,0.78); }
.ont-footer-bottom { max-width: var(--wrap-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.22); }
.ont-footer-bottom a { color: rgba(255,255,255,0.22); text-decoration: none; }
.ont-footer-bottom a:hover { color: rgba(255,255,255,0.5); }


/* ============================================================
   TESOL JOBS PAGE
   Template: page-tesol-jobs.php
   ============================================================ */

/* Hero override */
.page-template-page-tesol-jobs .ta-hero { min-height: 94vh; padding-top: 100px; }

/* Graduate Services */
.services-section { position: relative; }

/* Job Board (live embed) */
.jb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.jb-embed-wrap { border: 1.5px solid var(--rule); border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: 0 8px 36px rgba(13,115,119,0.08); position: relative; }
.jb-embed-header { background: var(--teal-deep); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.jb-embed-title { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; }
.jb-embed-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: ta-dot-blink 2s ease infinite; }
.jb-embed-link { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); text-decoration: none; transition: color .15s; font-family: 'Sora', sans-serif; }
.jb-embed-link:hover { color: #fff; }
.jb-iframe { width: 100%; height: 600px; border: none; display: block; background: var(--white); }
.jb-content .section-lead { margin-bottom: 36px; }
.jb-features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.jb-feature { display: flex; gap: 14px; align-items: flex-start; }
.jb-feature-icon { width: 44px; height: 44px; background: var(--teal-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jb-feature-icon svg { width: 20px; height: 20px; color: var(--teal); }
.jb-feature h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.jb-feature p { font-size: 14px; color: var(--muted); line-height: 1.65; font-weight: 300; }
.jb-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Three Paths */
.paths-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.path-card { border-radius: 18px; overflow: hidden; position: relative; height: 320px; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; }
.path-card-bg { position: absolute; inset: 0; transition: transform .5s ease; background-size: cover; background-position: center; }
.path-card:hover .path-card-bg { transform: scale(1.06); }
.path-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,46,48,0.92) 0%, rgba(5,46,48,0.45) 50%, rgba(5,46,48,0.2) 100%); z-index: 1; }
.path-card-inner { position: relative; z-index: 2; padding: 28px; }
.path-card-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #7fe8eb; margin-bottom: 8px; }
.path-card h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px; }
.path-card p { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 300; line-height: 1.6; margin-bottom: 16px; }
.path-link { font-size: 13px; font-weight: 700; color: #7fe8eb; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }

/* Destination Strip */
.dest-strip-section { background: var(--teal-deep); padding: var(--section-v) var(--section-h); position: relative; overflow: hidden; }
.dest-strip-section::before { content: ''; position: absolute; top: -150px; right: -150px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(127,232,235,0.08) 0%, transparent 70%); border-radius: 50%; }
.dest-strip-inner { max-width: var(--wrap-max); margin: 0 auto; position: relative; z-index: 2; }
.dest-strip-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; }
.dest-strip-top h2 { font-family: 'Fraunces', serif; font-size: clamp(26px,3vw,38px); font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1.1; }
.dest-strip-top h2 em { font-style: italic; color: #7fe8eb; }
.dest-strip-top p { font-size: 15px; color: rgba(255,255,255,0.45); font-weight: 300; line-height: 1.65; max-width: 400px; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dest-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 12px 18px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; transition: all .2s; }
.dest-chip:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); color: #fff; }
.dest-chip-flag { font-size: 20px; line-height: 1; }
.dest-chip-name { font-weight: 600; }
.dest-strip-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dest-strip-cta p { font-size: 14px; color: rgba(255,255,255,0.35); font-weight: 300; }
.btn-white-outline { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #fff; padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .2s; border: 1.5px solid rgba(255,255,255,0.3); font-family: 'Sora', sans-serif; line-height: 1; }
.btn-white-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #fff; }

/*  Expert Program  */
.expert-section { background: var(--warm-white); }
.expert-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.expert-visual { background: var(--teal-deep); border-radius: 20px; padding: 48px; color: #fff; text-align: center; position: relative; overflow: hidden; }
.expert-visual::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(127,232,235,0.12) 0%, transparent 70%); border-radius: 50%; }
.expert-visual > * { position: relative; }
.expert-amount { font-family: 'Fraunces', serif; font-size: 72px; font-weight: 900; color: #7fe8eb; letter-spacing: -0.04em; line-height: 1; display: block; margin-bottom: 8px; }
.expert-visual h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin-bottom: 14px; line-height: 1.2; }
.expert-visual p { color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1.7; font-weight: 300; max-width: 320px; margin: 0 auto; }

/*  Graduate Stories */
.stories-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 16px; }
.stories-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.story-card { background: var(--white); border: 1.5px solid var(--rule); border-radius: 18px; overflow: hidden; transition: box-shadow .25s, transform .25s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.story-card:hover { box-shadow: 0 14px 44px rgba(13,115,119,0.1); transform: translateY(-4px); }
.story-img { height: 200px; overflow: hidden; }
.story-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.story-card:hover .story-img img { transform: scale(1.05); }
.story-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.story-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: var(--teal-pale); padding: 4px 9px; border-radius: 5px; margin-bottom: 12px; width: fit-content; }
.story-card h4 { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 8px; }
.story-card p { font-size: 13px; color: var(--muted); line-height: 1.65; font-weight: 300; }

/* TESOL Jobs Responsive */
@media (max-width: 1040px) {
  .section-intro, .jb-grid, .expert-grid { grid-template-columns: 1fr; }
  .section-intro { gap: 24px; }
  .dest-strip-section { padding: 56px var(--section-h); }
}
@media (max-width: 640px) {
  .paths-grid, .stories-grid { grid-template-columns: 1fr; }
  .dest-chips { flex-direction: column; }
  .dest-strip-section { padding: 48px var(--section-h); }
  .expert-amount { font-size: 56px; }
}

/* ============================================================
   COUNTRY PAGE — HERO
   .cp-hero-bg background-image is set inline per page (unique per country)
   ============================================================ */

.cp-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; }
.cp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,46,48,0.95) 0%, rgba(5,46,48,0.78) 50%, rgba(5,46,48,0.55) 100%);
}
.cp-hero-content { position: relative; z-index: 1; width: 100%; padding: 0 var(--section-h) 56px; }
.cp-hero-inner { max-width: var(--wrap-max); margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 12px; color: rgba(255,255,255,0.45); }
.breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.75); }
.country-flag { font-size: 36px; margin-bottom: 12px; display: block; }
.cp-hero h1 { font-family: 'Fraunces',serif; font-size: clamp(36px,5vw,68px); font-weight: 900; color: #fff; letter-spacing: -0.035em; line-height: 1.03; margin-bottom: 14px; }
.cp-hero h1 em { font-style: italic; color: #7fe8eb; }
.cp-hero-sub { font-size: 16px; color: rgba(255,255,255,0.6); font-weight: 300; line-height: 1.65; max-width: 580px; margin-bottom: 36px; }
.cp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   COUNTRY PAGE — QUICK STATS BAR
   ============================================================ */

.cp-stats { background: var(--teal-dark); padding: 0 var(--section-h); }
.cp-stats-inner { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); border-left: 1px solid rgba(255,255,255,0.07); }
.cp-stat { padding: 22px 24px; border-right: 1px solid rgba(255,255,255,0.07); text-align: center; }
.cp-stat-val { font-family: 'Fraunces',serif; font-size: clamp(18px,1.8vw,24px); font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.cp-stat-label { font-size: 11px; color: rgba(255,255,255,0.42); font-weight: 400; line-height: 1.4; }

/* ============================================================
   COUNTRY PAGE — REQUIREMENTS STRIP
   ============================================================ */

.cp-requirements { background: var(--sand); padding: 48px var(--section-h); }
.cp-req-inner { max-width: var(--wrap-max); margin: 0 auto; }
.cp-req-title { font-family: 'Fraunces',serif; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 28px; }
.cp-req-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.cp-req-card { background: #fff; border-radius: 14px; padding: 20px 22px; border: 1.5px solid var(--rule); display: flex; gap: 14px; align-items: flex-start; }
.cp-req-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   COUNTRY PAGE — REQUIREMENT ICONS (SVG override)
   ============================================================ */

.cp-req-icon svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
  stroke-width: 1.8;
}

.cp-req-card-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.cp-req-card-val { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.5; }
.cp-req-card-val strong { color: var(--body); font-weight: 600; }
.cp-req-note { margin-top: 14px; background: var(--teal-pale); border-radius: 10px; padding: 12px 18px; font-size: 13px; color: var(--teal-dark); line-height: 1.6; }
.cp-req-note strong { font-weight: 700; }

/* ============================================================
   COUNTRY PAGE — CONTENT LAYOUT (body + sticky sidebar)
   ============================================================ */

.cp-layout { display: grid; grid-template-columns: 1fr 280px; gap: 52px; align-items: start; max-width: var(--wrap-max); margin: 0 auto; padding: var(--section-v) var(--section-h); }
.cp-body { order: 1; min-width: 0; }
.cp-sidebar { order: 2; position: sticky; top: 88px; align-self: start; pointer-events: auto; }

.toc-box { background: #fff; border: 1.5px solid var(--rule); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc-list a { display: block; font-size: 13px; color: var(--muted); text-decoration: none; padding: 7px 10px; border-radius: 7px; transition: all .15s; font-weight: 400; line-height: 1.4; }
.toc-list a:hover { color: var(--teal); background: var(--teal-pale); }
.toc-list a.active { color: var(--teal); font-weight: 600; background: var(--teal-pale); }
.toc-cta-box { background: var(--teal-deep); border-radius: 16px; padding: 24px; }
.toc-cta-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.toc-cta-heading { font-family: 'Fraunces',serif; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 8px; letter-spacing: -0.02em; }
.toc-cta-sub { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; font-weight: 300; margin-bottom: 16px; }
.toc-cta-btn { display: block; text-align: center; background: var(--teal-light); color: #fff; padding: 12px 18px; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s; margin-bottom: 8px; }
.toc-cta-btn:hover { background: #16bec3; }
.toc-cta-link { display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: none; transition: color .15s; }
.toc-cta-link:hover { color: rgba(255,255,255,0.65); }

.cp-section { margin-bottom: 64px; }
.cp-section:last-child { margin-bottom: 0; }
.cp-body p:last-child { margin-bottom: 0; }
.cp-body a, .cp-cert-inner a { color: var(--teal); text-decoration: none; font-weight: 500; }
.cp-body a:hover, .cp-cert-inner a:hover { text-decoration: underline; }
.cp-body strong, .cp-cert-inner strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   COUNTRY PAGE — SCHOOL TYPE CARDS (accordion)
   ============================================================ */

.school-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.school-card { border: 1.5px solid var(--rule); border-radius: 16px; overflow: hidden; }
.school-card-header { padding: 20px 24px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--rule); cursor: pointer; user-select: none; }
.school-card-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.school-card-title { font-family: 'Fraunces',serif; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; flex: 1; user-select: text; }
.school-card-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
.badge-popular { background: var(--teal-pale); color: var(--teal-dark); }
.badge-flexible { background: #e8f5e9; color: #2e7d32; }
.badge-competitive { background: var(--amber-pale); color: var(--amber); }
.badge-secure { background: #e3f2fd; color: #1565c0; }
.badge-community { background: #f3e5f5; color: #6a1b9a; }
.school-card-header { border-bottom: none; }
.school-card-chevron { color: var(--muted); transition: transform .25s; font-size: 14px; }
.school-card.open .school-card-chevron { transform: rotate(180deg); }
.school-card-body { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.school-card.open .school-card-body { max-height: 2000px; }
.school-card-inner { padding: 24px; }
.school-card-inner p { font-size: 14px; color: var(--body); line-height: 1.75; font-weight: 300; margin-bottom: 12px; }
.school-card-inner p:last-child { margin-bottom: 0; }
.school-card-inner a { color: var(--teal); text-decoration: none; font-weight: 500; }
.school-card-inner a:hover { text-decoration: underline; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pros-cons-col { background: var(--teal-xpale); border-radius: 10px; padding: 14px 16px; }
.pros-cons-col.cons { background: #fff8f0; }
.pros-cons-col h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 10px; }
.pros-cons-col.cons h5 { color: var(--amber); }
.pros-cons-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pros-cons-col li { font-size: 13px; color: var(--body); font-weight: 300; display: flex; gap: 7px; line-height: 1.4; }
.pros-cons-col li::before { content: '\2713'; color: var(--teal); font-weight: 700; flex-shrink: 0; }
.pros-cons-col.cons li::before { content: '\2014'; color: var(--amber); }

/* ============================================================
   COUNTRY PAGE — SALARY TABLE
   ============================================================ */

.salary-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 20px; border-radius: 12px; border: 1.5px solid var(--rule); }
.salary-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.salary-table th { background: var(--teal-deep); color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 12px 18px; text-align: left; }
.salary-table td { padding: 14px 18px; font-size: 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.salary-table tr:last-child td { border-bottom: none; }
.salary-table tr:nth-child(even) td { background: var(--teal-xpale); }
.salary-table td:first-child { font-weight: 600; color: var(--ink); }
.salary-highlight { font-family: 'Fraunces',serif; font-size: 16px; font-weight: 700; color: var(--teal-dark); letter-spacing: -0.02em; }
.savings-callout { background: var(--teal-pale); border-radius: 12px; padding: 18px 22px; margin-top: 16px; display: flex; gap: 14px; align-items: flex-start; }
.savings-callout-icon { font-size: 22px; flex-shrink: 0; }
.savings-callout p { font-size: 14px; color: var(--teal-dark); line-height: 1.65; font-weight: 400; }
.savings-callout strong { font-weight: 700; }

/* ============================================================
   COUNTRY PAGE — HOW TO APPLY
   ============================================================ */

.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.apply-card { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; padding: 22px 24px; }
.apply-card-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.apply-card-title span { font-size: 18px; }
.apply-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; }
.apply-card a { color: var(--teal); font-weight: 500; text-decoration: none; }
.apply-card a:hover { text-decoration: underline; }

/* ============================================================
   COUNTRY PAGE — FEATURED EMPLOYERS
   ============================================================ */

.employer-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.employer-card { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.employer-name { font-family: 'Fraunces',serif; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 8px; }
.employer-desc { font-size: 14px; color: var(--muted); line-height: 1.7; font-weight: 300; }
.employer-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; }
.employer-link:hover { text-decoration: underline; }
.employer-badge { font-size: 11px; font-weight: 700; background: var(--teal-pale); color: var(--teal-dark); padding: 4px 10px; border-radius: 5px; white-space: nowrap; align-self: start; }

/* ============================================================
   COUNTRY PAGE — CITY CARDS
   ============================================================ */

.cities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.city-card { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden; transition: box-shadow .15s,transform .15s; display: block; }
.city-card:hover { box-shadow: 0 8px 24px rgba(13,115,119,0.1); transform: translateY(-2px); }
.city-img { height: 140px; background-size: cover; background-position: center; background-color: var(--teal-pale); }
.city-body { padding: 16px 18px; }
.city-name { font-family: 'Fraunces',serif; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 4px; }
.city-name a { color: var(--ink); text-decoration: none; }
.city-name a:hover { color: var(--teal); text-decoration: underline; }
.city-tag { display: inline-block; font-size: 11px; font-weight: 600; background: var(--teal-pale); color: var(--teal-dark); padding: 3px 9px; border-radius: 4px; margin-bottom: 8px; }
.city-desc { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 300; }
.city-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--teal); margin-top: 8px; text-decoration: none; }
.city-link:hover { text-decoration: underline; }

/* ============================================================
   COUNTRY PAGE — CERTIFICATION CTA SECTION
   ============================================================ */

.cp-cert { background: var(--sand); padding: var(--section-v) var(--section-h); }
.cp-cert-inner { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: center; }
.cert-badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cert-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--rule); border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cert-badge::before { content: '\2713'; color: var(--teal); font-weight: 700; }
.cert-card { background: var(--teal-deep); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; }
.cert-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%,rgba(20,163,168,0.2) 0%,transparent 60%); }
.cert-card-inner { position: relative; z-index: 1; }
.cert-card-hours { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,163,168,0.2); color: #7fe8eb; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 5px; letter-spacing: .05em; margin-bottom: 16px; }
.cert-card-title { font-family: 'Fraunces',serif; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; }
.cert-card-sub { font-size: 13px; color: rgba(255,255,255,0.48); font-weight: 300; line-height: 1.6; margin-bottom: 20px; }
.cert-card-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.cert-card-features li { font-size: 13px; color: rgba(255,255,255,0.65); display: flex; gap: 8px; line-height: 1.4; font-weight: 300; }
.cert-card-features li::before { content: '\2713'; color: #14a3a8; font-weight: 700; flex-shrink: 0; }
.cert-card .cert-card-btn { display: block; text-align: center; background: var(--teal-light); color: #fff; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s; margin-bottom: 10px; }
.cert-card .cert-card-btn:hover { background: #16bec3; }
.cert-card .cert-card-link { display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: none; transition: color .15s; }
.cert-card .cert-card-link:hover { color: rgba(255,255,255,0.65); }

/* ============================================================
   COUNTRY PAGE — JOB LISTINGS
   ============================================================ */

.cp-jobs { background: var(--warm-white); padding: var(--section-v) var(--section-h); }
.cp-jobs-inner { max-width: var(--wrap-max); margin: 0 auto; }
.cp-jobs-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 32px; }
.job-listings { display: flex; flex-direction: column; gap: 12px; }
.job-listing { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; padding: 20px 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; text-decoration: none; transition: box-shadow .15s,transform .15s; }
.job-listing:hover { box-shadow: 0 8px 24px rgba(13,115,119,0.08); transform: translateY(-2px); }
.jl-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.jl-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.jl-tag { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; font-weight: 300; }
.jl-salary { font-family: 'Fraunces',serif; font-size: 18px; font-weight: 700; color: var(--teal); letter-spacing: -0.02em; white-space: nowrap; }
.jl-apply { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cp-jobs-cta { text-align: center; margin-top: 24px; }


/* ============================================================
   COUNTRY PAGE — JOBS COMPACT STRIP
   ============================================================ */

.cp-jobs-strip {
  background: var(--teal-deep);
  padding: 48px var(--section-h);
  scroll-margin-top: 80px;
}
.cp-jobs-strip-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cp-jobs-strip h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.cp-jobs-strip p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  font-weight: 300;
  max-width: 620px;
}
.cp-jobs-strip-ctas {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cp-jobs-strip-ctas .btn-ghost-sm {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
}
.cp-jobs-strip-ctas .btn-ghost-sm:hover {
  border-color: #fff;
  color: #fff;
}

@media (max-width: 768px) {
  .cp-jobs-strip-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .cp-jobs-strip-ctas {
    flex-direction: column;
    width: 100%;
  }
  .cp-jobs-strip p { max-width: none; }
}

/* ============================================================
   COUNTRY PAGE — GRADUATE ARTICLES (dynamic PHP section)
   ============================================================ */

.cp-articles { background: var(--sand); padding: var(--section-v) var(--section-h); }
.cp-articles-inner { max-width: var(--wrap-max); margin: 0 auto; }
.cp-articles-header { margin-bottom: 36px; }
.cp-articles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.cp-articles-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.cp-articles-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cp-article-card { background: #fff; border-radius: 14px; border: 1.5px solid var(--rule); overflow: hidden; text-decoration: none; transition: box-shadow .15s,transform .15s; display: block; }
.cp-article-card:hover { box-shadow: 0 8px 24px rgba(13,115,119,0.1); transform: translateY(-2px); }
.cp-article-img { height: 140px; background-size: cover; background-position: center; background-color: var(--teal-pale); }
.cp-article-body { padding: 16px 18px; }
.cp-article-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 8px; }
.cp-article-title { font-family: 'Fraunces',serif; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; }
.cp-articles-empty { font-size: 14px; color: var(--muted); font-style: italic; }

/* ============================================================
   COUNTRY PAGE — FAQ
   ============================================================ */

.cp-faq { background: var(--warm-white); padding: var(--section-v) var(--section-h); scroll-margin-top: 80px; }
.cp-faq-inner { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: start; }
.cp-faq-sticky { position: sticky; top: 100px; padding-top: 12px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; }
.faq-q-text { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.faq-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.faq-icon svg { width: 12px; height: 12px; stroke: var(--teal); stroke-width: 2.5; transition: transform .25s; }
.faq-item.open .faq-icon { background: var(--teal); }
.faq-item.open .faq-icon svg { stroke: #fff; transform: rotate(180deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.75; font-weight: 300; }
.faq-a-inner a { color: var(--teal); text-decoration: none; font-weight: 500; }

/* ============================================================
   COUNTRY PAGE — FINAL CTA
   ============================================================ */

.final-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1040px) {
  :root { --section-v: 60px; --section-h: 32px; }
  .ont-nav-logo-panel { padding: 0 32px 0 16px; }
  .ont-nav-links { display: none; }
  .ont-nav-right .ont-nav-btn-ghost { display: none; }
  .ont-nav-dark { padding: 0 16px 0 20px; }
  .ont-nav-hamburger { display: flex; }
  .ont-footer { padding: 56px 32px 28px; }
  .ont-footer-grid { grid-template-columns: 1fr 1fr; }
  .ont-footer-brand { grid-column: 1 / -1; }
  .cp-layout { grid-template-columns: 1fr; }
  .cp-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cp-stats-inner { grid-template-columns: repeat(3,1fr); }
  .cp-req-grid { grid-template-columns: 1fr 1fr; }
  .cp-cert-inner { grid-template-columns: 1fr; }
  .cp-faq-inner { grid-template-columns: 1fr; }
  .cp-faq-sticky { position: static; }
  .cp-articles-grid, .cp-articles-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .cp-articles-grid.cols-2 { grid-template-columns: 1fr; }
  .cp-jobs-header { grid-template-columns: 1fr; }
  .benefit-row { grid-template-columns: 1fr; }
  .benefit-left { padding: 28px 32px; }
  .benefit-right { padding: 28px 32px; }
}

@media (max-width: 768px) {
  .cp-sidebar { display: none; }
  .benefit-left { padding: 24px 28px; }
  .benefit-right { padding: 24px 28px; }
  .benefit-num { font-size: 28px; }
}

@media (max-width: 640px) {
  :root { --section-v: 48px; --section-h: 22px; }
  .ont-footer { padding: 48px 22px 24px; }
  .ont-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .ont-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .cp-stats-inner { grid-template-columns: 1fr 1fr; }
  .cp-stat:last-child { grid-column: 1 / -1; }
  .cp-req-grid, .cities-grid, .apply-grid, .pros-cons,
  .cp-articles-grid, .cp-articles-grid.cols-3 { grid-template-columns: 1fr; }
  .employer-card { grid-template-columns: 1fr; }
}

/* ============================================================
   TEACH ABROAD PAGE
   ============================================================ */

/* Utilities */
.section-lead { font-size: 18px; color: var(--muted); line-height: 1.75; font-weight: 300; max-width: 560px; }
.ta-section { padding: var(--section-v) var(--section-h); }
.ta-wrap { max-width: var(--wrap-max); margin: 0 auto; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.section-intro .section-lead { margin-bottom: 0; }

/* Extra buttons */
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); color: rgba(255,255,255,0.88); padding: 16px 28px; border-radius: 11px; font-size: 15px; font-weight: 500; text-decoration: none; transition: all .2s; border: 1.5px solid rgba(255,255,255,0.25); line-height: 1; }
.btn-ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }
.btn-teal { display: inline-flex; align-items: center; gap: 7px; background: var(--teal); color: #fff; padding: 14px 28px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .2s; line-height: 1; }
.btn-teal:hover { background: var(--teal-mid); transform: translateY(-1px); color: #fff; }
.btn-primary-lg { display: inline-flex; align-items: center; justify-content: center; background: var(--teal-light); color: #fff; padding: 18px 42px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all .2s; line-height: 1; }
.btn-primary-lg:hover { background: #16bec3; transform: translateY(-2px); box-shadow: 0 16px 44px rgba(20,163,168,0.4); color: #fff; }
.btn-ghost-lg { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); padding: 18px 36px; border-radius: 12px; font-size: 16px; font-weight: 500; text-decoration: none; transition: all .2s; border: 1.5px solid rgba(255,255,255,0.22); line-height: 1; }
.btn-ghost-lg:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Hero */
.ta-hero { min-height: 92vh; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.ta-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform 10s ease; }
.ta-hero:hover .ta-hero-img { transform: scale(1.04); }
.ta-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,46,48,0.97) 0%, rgba(5,46,48,0.72) 38%, rgba(5,46,48,0.15) 70%, transparent 100%), linear-gradient(105deg, rgba(5,46,48,0.4) 0%, transparent 55%); }
.ta-hero-content { position: relative; z-index: 2; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--section-h) 80px; width: 100%; }
.ta-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.88); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 24px; }
.ta-hero-dot { width: 5px; height: 5px; background: #7fe8eb; border-radius: 50%; animation: ta-dot-blink 2.5s ease-in-out infinite; flex-shrink: 0; }
@keyframes ta-dot-blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.ta-hero h1 { font-family: 'Fraunces',serif; font-size: clamp(44px,6vw,78px); font-weight: 900; line-height: 1.01; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; max-width: 820px; }
.ta-hero h1 em { font-style: italic; color: #7fe8eb; }
.ta-hero-sub { font-size: 19px; color: rgba(255,255,255,0.7); line-height: 1.65; font-weight: 300; max-width: 580px; margin-bottom: 44px; }
.ta-hero-stats { display: flex; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; overflow: hidden; background: rgba(5,46,48,0.5); backdrop-filter: blur(12px); max-width: 660px; margin-bottom: 44px; }
.ta-hstat { padding: 20px 28px; border-right: 1px solid rgba(255,255,255,0.1); flex: 1; }
.ta-hstat:last-child { border-right: none; }
.ta-hstat-num { font-family: 'Fraunces',serif; font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.ta-hstat-num em { font-style: normal; color: #7fe8eb; }
.ta-hstat-label { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 300; margin-top: 3px; line-height: 1.35; }
.ta-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Requirements */
.requirements-section { background: var(--sand); }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.req-steps { display: flex; flex-direction: column; }
.req-step { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.req-step:first-child { padding-top: 0; }
.req-step:last-child { border-bottom: none; }
.req-num { width: 48px; height: 48px; background: var(--teal-deep); color: #7fe8eb; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces',serif; font-size: 18px; font-weight: 900; flex-shrink: 0; line-height: 1; }
.req-step h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 5px; line-height: 1.3; }
.req-step p { font-size: 14px; color: var(--muted); line-height: 1.65; font-weight: 300; }
.req-step a { color: var(--teal); text-decoration: none; font-weight: 600; }
.req-step a:hover { text-decoration: underline; }
.auth-callout { background: var(--amber-pale); border: 1.5px solid rgba(200,121,42,0.25); border-radius: 16px; padding: 28px; margin-top: 32px; }
.auth-callout-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--amber); margin-bottom: 10px; }
.auth-callout p { font-size: 14px; color: #7a4a1a; line-height: 1.65; font-weight: 300; }
.auth-callout a { color: var(--amber); font-weight: 600; text-decoration: none; }
.auth-callout a:hover { text-decoration: underline; }
/* Qualifier card (right column of requirements) */
.req-right { align-self: stretch; position: relative; }
.qualifier { background: #fff; border: 1.5px solid var(--rule); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 36px rgba(13,115,119,0.08); position: sticky; top: 96px; }
.q-header { background: var(--teal-deep); padding: 28px 28px 24px; }
.q-header-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #7fe8eb; margin-bottom: 8px; }
.q-header-title { font-family: 'Fraunces',serif; font-size: 21px; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1.2; }
.q-header-sub { font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 300; margin-top: 6px; line-height: 1.5; }
.q-toggles { padding: 20px 28px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.q-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.q-toggle-label { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.q-toggle-sub { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 2px; }
.q-toggle-wrap { position: relative; flex-shrink: 0; }
.q-toggle-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-toggle-track { display: block; width: 44px; height: 24px; background: #d0d0cc; border-radius: 12px; transition: background .2s; cursor: pointer; position: relative; }
.q-toggle-wrap input:checked + .q-toggle-track { background: var(--teal); }
.q-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,0.18); pointer-events: none; }
.q-toggle-wrap input:checked ~ .q-toggle-thumb { transform: translateX(20px); }
.q-result { padding: 24px 28px; transition: background .3s; }
.q-scenario { display: none; }
.q-scenario.is-active { display: block; }
.q-result-icon { font-size: 26px; margin-bottom: 10px; line-height: 1; }
.q-result-headline { font-family: 'Fraunces',serif; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.q-result-body { font-size: 13.5px; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 20px; }
.q-ctas { display: flex; flex-direction: column; gap: 10px; }
.q-result-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--teal); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s; font-family: 'Sora',sans-serif; line-height: 1; align-self: flex-start; }
.q-result-cta:hover { background: var(--teal-mid); }
.q-result-cta-ghost { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); padding: 8px 0; font-size: 13px; font-weight: 600; text-decoration: none; align-self: flex-start; }
.q-result-cta-ghost:hover { text-decoration: underline; }
.qualifier.res-full  .q-result { background: var(--teal-pale); }
.qualifier.res-domestic .q-result { background: #f0f7f0; }
.qualifier.res-nudge .q-result { background: var(--amber-pale); }

/* Benefits */
.benefits-list {
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}
.benefit-row {
  display: grid;
  grid-template-columns: 38% 62%;
  border-bottom: 1px solid var(--rule);
}
.benefit-row:last-child { border-bottom: none; }
.benefit-left {
  padding: 36px 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  background: var(--teal-deep);
  transition: background .2s;
}
.benefit-left:hover { background: #063436; }

/* ── Per-row background image (opt-in) ──────────────────────
   Add .has-bg-img to any .benefit-row and set the image via
   inline CSS var: style="--benefit-bg: url('...')". Rows
   without the class keep the flat teal-deep panel.
   ──────────────────────────────────────────────────────────── */
.benefit-row.has-bg-img .benefit-left { background: transparent; }
.benefit-row.has-bg-img .benefit-left:hover { background: transparent; }

.benefit-row.has-bg-img .benefit-left::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--benefit-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
}
.benefit-row.has-bg-img .benefit-left::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(5,46,48,0.78) 0%, rgba(13,115,119,0.68) 100%);
  transition: background .3s;
}
.benefit-row.has-bg-img .benefit-left:hover::after {
  background: linear-gradient(135deg, rgba(5,46,48,0.85) 0%, rgba(13,115,119,0.75) 100%);
}

.benefit-num, .benefit-title { position: relative; z-index: 1; }
.benefit-num {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--teal-light);
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
}
.benefit-title {
  font-family: 'Sora', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.35;
}
.benefit-right {
  background: var(--warm-white);
  padding: 36px 44px;
  display: flex;
  align-items: center;
}
.benefit-row:nth-child(even) .benefit-right { background: var(--sand); }
.benefit-desc {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 300;
}
.benefit-desc a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.benefit-desc a:hover { text-decoration: underline; }

/* Earnings */
.earnings-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.earning-card { background: var(--white); border: 1.5px solid var(--rule); border-radius: 16px; padding: 28px 22px; position: relative; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.earning-card:hover { box-shadow: 0 10px 32px rgba(13,115,119,0.1); transform: translateY(-3px); }
.earning-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.ec-entry::before { background: var(--teal-light); }
.ec-pro::before { background: var(--teal-dark); }
.ec-ielts::before { background: var(--amber); }
.ec-biz::before { background: var(--ink); }
.earning-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 10px; }
.earning-card h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.2; letter-spacing: -0.01em; }
.earning-amount { font-family: 'Fraunces',serif; font-size: 28px; font-weight: 900; color: var(--teal); letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; }
.earning-per { font-size: 12px; color: var(--muted); font-weight: 300; margin-bottom: 14px; }
.earning-card p { font-size: 13px; color: var(--muted); line-height: 1.6; font-weight: 300; }
.earning-req { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); background: var(--teal-pale); padding: 4px 9px; border-radius: 5px; }

/* Destinations */
.country-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.country-card { border-radius: 16px; overflow: hidden; position: relative; height: 240px; display: block; text-decoration: none; }
.country-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.country-card:hover .country-photo { transform: scale(1.07); }
.country-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,46,48,0.92) 0%, rgba(5,46,48,0.3) 55%, transparent 100%); }
.country-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; }
.country-region { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #7fe8eb; margin-bottom: 5px; }
.country-name { font-family: 'Fraunces',serif; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px; }
.country-salary { display: flex; align-items: center; justify-content: space-between; }
.country-sal-num { font-size: 14px; font-weight: 700; color: #fff; }
.country-benefits-tag { font-size: 11px; font-weight: 600; color: #7fe8eb; background: rgba(20,163,168,0.2); border: 1px solid rgba(20,163,168,0.35); padding: 3px 8px; border-radius: 4px; }
.dest-table-wrap { margin-top: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dest-table { width: 100%; border-collapse: collapse; border-radius: 14px; overflow: hidden; min-width: 600px; }
.dest-table th { background: var(--teal-deep); color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 14px 20px; text-align: left; }
.dest-table td { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid var(--rule); }
.dest-table tr:last-child td { border-bottom: none; }
.dest-table tr:hover td { background: var(--teal-xpale); }
.dest-table td:first-child a { color: var(--teal); text-decoration: none; font-weight: 600; }
.dest-table td:first-child a:hover { text-decoration: underline; }
.dest-region-row td { background: var(--teal-deep) !important; color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 10px 20px; }
.dest-salary { font-family: 'Fraunces',serif; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.benefits-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; }
.pill-yes { background: var(--teal-pale); color: var(--teal); }
.pill-no { background: #f0f0f0; color: #999; }

/* Best Countries */
.best-grid { display: flex; flex-direction: column; gap: 32px; }
.best-card { background: var(--white); border: 1.5px solid var(--rule); border-radius: 18px; overflow: hidden; transition: box-shadow .25s, transform .25s; text-decoration: none; display: grid; grid-template-columns: 280px 1fr; }
.best-card:hover { box-shadow: 0 14px 44px rgba(13,115,119,0.13); transform: translateY(-3px); }
.best-photo { background-size: cover; background-position: center; min-height: 260px; }
.best-body { padding: 32px 36px; }
.best-body-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.best-rank { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 6px; }
.best-card h4 { font-size: 26px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.best-salary-box { text-align: right; flex-shrink: 0; }
.best-salary { font-family: 'Fraunces',serif; font-size: 28px; font-weight: 900; color: var(--teal); letter-spacing: -0.04em; line-height: 1; }
.best-per { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 3px; }
.best-desc { font-size: 14px; color: var(--muted); line-height: 1.75; font-weight: 300; margin-bottom: 20px; }
.best-meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; background: var(--sand); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.best-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; }
.best-meta-val { font-size: 13px; font-weight: 600; color: var(--ink); }
.best-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.best-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); background: #efefed; padding: 4px 10px; border-radius: 5px; }
.best-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-size: 13px; font-weight: 700; }

/* FAQ — 2-column card layout (teach abroad page only) */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; align-items: start; }
/* Override the default country-page list-style FAQ for the grid variant */
.faq-section .faq-item { background: var(--sand); border: 1.5px solid var(--rule) !important; border-radius: 14px; transition: box-shadow .2s; }
.faq-section .faq-item:first-child { border-top: 1.5px solid var(--rule) !important; }
.faq-section .faq-item.open { box-shadow: 0 8px 28px rgba(13,115,119,0.08); }
.faq-section .faq-q { padding: 22px 24px; border-radius: 14px; }
.faq-section .faq-a-inner { padding: 0 24px 22px; }

/* Final CTA */
.ta-final-cta { background: var(--teal-deep); padding: var(--section-v) var(--section-h); text-align: center; position: relative; overflow: hidden; }
.ta-final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 110%, rgba(20,163,168,0.22) 0%, transparent 65%); }
.ta-final-cta-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.ta-final-cta .eyebrow { justify-content: center; color: #7fe8eb; }
.ta-final-cta .eyebrow::before { background: #7fe8eb; }
.ta-final-cta h2 { font-family: 'Fraunces',serif; font-size: clamp(34px,4.2vw,56px); font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1.07; margin-bottom: 16px; }
.ta-final-cta h2 em { font-style: italic; color: #7fe8eb; }
.ta-final-cta p { font-size: 18px; color: rgba(255,255,255,0.6); max-width: 500px; margin: 0 auto 44px; font-weight: 300; line-height: 1.7; }

/* Floating side nav */
.ta-side-nav { position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 150; display: flex; flex-direction: column; gap: 2px; transition: opacity .3s; }
.ta-side-nav.hidden { opacity: 0; pointer-events: none; }
.ta-sn-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 0; }
.ta-sn-track-wrap { position: relative; flex-shrink: 0; width: 3px; height: 32px; }
.ta-sn-track { position: absolute; inset: 0; background: rgba(13,115,119,0.18); border-radius: 2px; }
.ta-sn-fill { position: absolute; inset: 0; background: var(--teal); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.ta-sn-item.active .ta-sn-fill { transform: scaleY(1); }
.ta-sn-item.active .ta-sn-track { background: rgba(13,115,119,0.25); }
.ta-sn-label { font-size: 11px; font-weight: 600; white-space: nowrap; color: rgba(13,115,119,0.38); transition: color .2s, opacity .2s, transform .2s; }
.ta-sn-item:hover .ta-sn-label { color: var(--teal); }
.ta-sn-item.active .ta-sn-label { color: var(--teal); font-weight: 700; }

/* Collapse labels at mid-widths — tracks stay, labels appear on hover */
@media (max-width: 1447px) and (min-width: 1041px) {
  .ta-side-nav { left: 16px; }
  .ta-sn-label { opacity: 0; transform: translateX(-4px); pointer-events: none; }
  .ta-sn-item:hover .ta-sn-label { opacity: 1; transform: translateX(0); pointer-events: auto; }
  .ta-sn-item.active .ta-sn-label { opacity: 0; transform: translateX(-4px); }
  .ta-sn-item.active:hover .ta-sn-label { opacity: 1; transform: translateX(0); }
}

/* Teach Abroad responsive */
@media (max-width: 1040px) {
  .ta-hero-content { padding: 0 32px 64px; }
  .req-grid { grid-template-columns: 1fr; }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .earnings-cards { grid-template-columns: 1fr 1fr; }
  .country-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .ta-side-nav { display: none; }
  .benefit-row { grid-template-columns: 1fr; }
  .req-right { align-self: auto; }
  .qualifier { position: static; }
}
@media (max-width: 640px) {
  .ta-hero-content { padding: 0 22px 56px; }
  .ta-hero-stats { flex-direction: column; }
  .ta-hstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .ta-hstat:last-child { border-bottom: none; }
  .earnings-cards, .country-grid { grid-template-columns: 1fr; }
  .best-card { grid-template-columns: 1fr; }
  .best-photo { min-height: 200px; }
  .best-meta { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
   HUB PAGE — TESOL/TEFL Courses Hub Template
   Shared hub-* prefix components + page-specific sections
   ============================================================ */


/* ── Hub Hero ───────────────────────────────────────────────── */

.hub-hero {
  padding: 120px var(--section-h) 60px;
  position: relative;
  overflow: hidden;
  background: var(--teal-deep);
}
.hub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/09/TEFL-teach-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}
.hub-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,163,168,0.08) 0%, transparent 70%);
}
.hub-hero-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hub-hero .breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 24px;
}
.hub-hero .breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color .15s;
}
.hub-hero .breadcrumb a:hover {
  color: rgba(255,255,255,0.7);
}
.hub-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 18px;
  max-width: 700px;
}
.hub-hero h1 em {
  font-style: italic;
  color: #7fe8eb;
}
.hub-hero-tagline {
  font-size: 20px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  margin-bottom: 8px;
}
.hub-hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 32px;
}

/* Hub hero trust — 3-col grid with accreditation logos */
.hub-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 0;
  margin-top: 36px;
  align-items: start;
}
.hub-hero-trust-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hub-hero-trust-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.hub-hero-trust-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
  line-height: 1.4;
}

/* Hub hero trust pill variant (optional logo-pill row) */
.hub-hero-trust-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-hero-trust-pill img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.hub-hero-trust-pill span {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* Hero CTAs */
.hub-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


/* ── Mobile Jump Bar ────────────────────────────────────────── */

.mobile-jump-bar {
  display: none;
  background: var(--sand);
  border-bottom: 1px solid var(--rule);
  padding: 14px 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 70px;
  z-index: 90;
}
.mobile-jump-bar-inner {
  display: flex;
  gap: 8px;
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.hub-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: all .15s;
  font-family: 'Sora', sans-serif;
  white-space: nowrap;
  background: var(--white);
}
.hub-jump:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}
.hub-jump svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}


/* ── Course Comparison ──────────────────────────────────────── */

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.course-card {
  border-radius: 20px;
  border: 1.5px solid var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s;
}
.course-card:hover {
  box-shadow: 0 12px 40px rgba(13,115,119,0.08), 0 0 0 1px var(--teal);
}
.course-card--featured { }
.course-card-header {
  padding: 36px 36px 0;
  position: relative;
}
.course-card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 6px;
}
.course-card-tier {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal);
  margin-bottom: 8px;
}
.course-card h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.course-card-standard {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 12px;
}
.course-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 24px;
}
.course-card-price {
  padding: 20px 36px;
  background: var(--teal-xpale);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.course-card--featured .course-card-price {
  background: var(--teal-pale);
}
.price-main {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-alt {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
.course-card-body {
  padding: 28px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
  flex: 1;
}
.course-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
}
.course-card-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.course-card-rec {
  background: var(--sand);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 24px;
}
.course-card-rec h5 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: 8px;
}
.course-card-rec p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 300;
}
.course-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.course-card-meta span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.course-card-meta svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.course-card-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.course-card-ctas .btn-teal,
.course-card-ctas .btn-outline {
  padding: 13px 24px;
  font-size: 14px;
}
.course-card-upsell {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.course-card-upsell svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.course-card-upsell a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.course-card-upsell a:hover {
  text-decoration: underline;
}
.compare-help {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.compare-help a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.compare-help a:hover {
  text-decoration: underline;
}


/* ── Decision Box ───────────────────────────────────────────── */

.decision-box {
  background: var(--teal-deep);
  border-radius: 18px;
  padding: 40px 44px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: start;
}
.decision-col h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.decision-col p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  font-weight: 300;
}
.decision-col strong {
  color: #7fe8eb;
  font-weight: 600;
}
.decision-or {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding-top: 24px;
}
.decision-bottom {
  text-align: center;
  margin-top: 20px;
}
.decision-bottom a {
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .15s;
}
.decision-bottom a:hover {
  gap: 10px;
  color: var(--teal-dark);
}


/* ── Comparison Table ───────────────────────────────────────── */

.compare-detail {
  margin-top: 28px;
}
.compare-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 14px 28px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  transition: all .2s;
  margin: 0 auto;
  width: auto;
}
.compare-detail-toggle:hover {
  background: var(--teal-pale);
  border-color: var(--teal);
}
.compare-detail-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .3s;
  flex-shrink: 0;
}
.compare-detail.open .compare-detail-toggle svg {
  transform: rotate(180deg);
}
.compare-detail-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-detail.open .compare-detail-body {
  max-height: 2000px;
}
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 24px;
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.cmp-table th,
.cmp-table td {
  padding: 14px 20px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.cmp-table tr:last-child th,
.cmp-table tr:last-child td {
  border-bottom: none;
}
.cmp-table thead th {
  background: var(--teal-deep);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}
.cmp-table thead th:first-child { border-radius: 0; }
.cmp-table thead th:last-child { border-radius: 0; }
.cmp-table tbody tr:hover {
  background: var(--teal-xpale);
}
.cmp-table .cmp-cat {
  background: var(--sand);
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 20px;
}
.cmp-table .cmp-cat td {
  background: var(--sand);
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cmp-table td:nth-child(2),
.cmp-table td:nth-child(3),
.cmp-table th:nth-child(2),
.cmp-table th:nth-child(3) {
  text-align: center;
  width: 180px;
}
.cmp-check {
  color: var(--teal);
  display: inline-flex;
}
.cmp-cross {
  color: var(--muted);
  opacity: 0.3;
  display: inline-flex;
}
.cmp-label {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}


/* ── Specialist Courses ─────────────────────────────────────── */

/* Centered intro block (replaces inline style on hub) */
.specs-intro-center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}
.specs-intro-center .eyebrow {
  justify-content: center;
}
.specs-intro-lead {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
}
.specs-intro-lead strong {
  color: var(--ink);
}

/* Enrollment options box */
.specs-enroll-box {
  background: var(--teal-deep);
  border-radius: 16px;
  padding: 28px 36px;
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  color: #fff;
}
.specs-enroll-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 8px;
}
.specs-enroll-text {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  font-weight: 300;
  line-height: 1.6;
}
.specs-enroll-text strong {
  color: #fff;
}

.specs-enroll-note {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.specs-enroll-note svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}
.specs-enroll-note p {
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
}
.specs-enroll-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* prog-card — shared component */
.programs-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.prog-card {
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--rule);
  transition: box-shadow .25s, transform .25s;
}
.prog-card:hover {
  box-shadow: 0 16px 48px rgba(13,115,119,0.1);
  transform: translateY(-4px);
}
.prog-card-img {
  height: 180px;
  overflow: hidden;
  position: relative;
}
.prog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.prog-card:hover .prog-card-img img {
  transform: scale(1.05);
}
.prog-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 6px;
}
.prog-card-content {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prog-card-tier {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal);
  margin-bottom: 8px;
}
.prog-card h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.prog-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 20px;
}
.prog-card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}
.prog-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
}
.prog-card-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.prog-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.prog-card-meta span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.prog-card-meta svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.prog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--teal);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, transform .18s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
  align-self: flex-start;
}
.prog-card-cta:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
}

/* specs-section overrides for smaller specialist cards */
.specs-section .programs-core {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 0;
}
.specs-section .prog-card-img { height: 160px; }
.specs-section .prog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.specs-section .prog-card h3 { font-size: clamp(18px, 1.8vw, 22px); }
.specs-section .prog-card-content { padding: 24px; }
.specs-section .prog-card-desc { margin-bottom: 16px; }
.specs-section .prog-card-meta { margin-bottom: 16px; }
.specs-section .prog-card-cta { padding: 11px 20px; font-size: 13px; }


/* ── Career Paths ───────────────────────────────────────────── */

.careers-section {
  background: var(--warm-white);
  padding-bottom: 48px;
}
.careers-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  margin-top: 48px;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}
.careers-nav {
  background: var(--sand);
  border-right: 1.5px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.careers-nav-item {
  padding: 18px 22px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: background .15s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.careers-nav-item:last-child { border-bottom: none; }
.careers-nav-item:hover { background: var(--sand-deep); }
.careers-nav-item.active {
  background: var(--white);
  border-right-color: transparent;
  position: relative;
}
.careers-nav-item.active::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--teal);
}
.careers-nav-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  transition: color .15s;
}
.careers-nav-item.active h4 { color: var(--teal); }
.careers-nav-item span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.3;
}
.careers-nav-item.active span {
  color: var(--teal);
  font-weight: 500;
}
.careers-panel {
  padding: 36px 40px;
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
}
.careers-panel.active { display: flex; }
.careers-panel-img {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.careers-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.careers-panel h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.careers-panel-hook {
  font-size: 15px;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 16px;
}
.careers-panel p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 16px;
}
.careers-panel-bundle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--teal-pale);
  padding: 10px 16px;
  border-radius: 10px;
  line-height: 1.3;
}
.careers-panel-bundle svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex-shrink: 0;
}


/* ── How It Works ───────────────────────────────────────────── */

.how-section {
  background: var(--warm-white);
  padding-top: 48px;
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
  max-width: 560px;
}
.how-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.how-card:hover {
  box-shadow: 0 10px 32px rgba(13,115,119,0.08);
  transform: translateY(-3px);
}
.how-card-img {
  height: 140px;
  position: relative;
  overflow: hidden;
}
.how-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}
.how-card:hover .how-card-img img {
  transform: scale(1.05);
}
.how-card-num {
  position: absolute;
  top: 12px;
  left: 14px;
  background: var(--teal);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 900;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.how-card-body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.how-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.how-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 14px;
  flex: 1;
}
.how-card-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.how-card-details li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.45;
}
.how-card-details li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}

/* 5th card spans or sits in a 2-col bottom row */
.how-grid-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.how-card--wide { flex-direction: row; }
.how-card--wide .how-card-img { height: auto; width: 240px; flex-shrink: 0; }
.how-card--wide .how-card-body { padding: 26px 28px; }
.how-card--optional .how-card-num { background: var(--teal-light); }

/* Full-width step cards (Steps 1-3) */
.how-wide-step { margin-top: 20px; }
.how-wide-step .how-card { flex-direction: row; align-items: stretch; }
.how-wide-step .how-card-img { height: auto; width: 420px; flex-shrink: 0; }
.how-wide-step .how-card-body { padding: 32px 36px; }
.how-wide-step .how-card h4 { font-size: 20px; margin-bottom: 10px; }
.how-wide-step .how-card p { font-size: 14px; margin-bottom: 16px; }
.how-wide-step .how-card-details { gap: 9px; }
.how-wide-step .how-card-details li { font-size: 13px; }
.how-wide-step .how-card-details li strong { color: var(--ink); font-weight: 700; }
.how-wide-step--reverse .how-card { flex-direction: row-reverse; }
.how-wide-step--reverse .how-card-img { border-radius: 0; }

/* Tutor note */
.how-tutor-note {
  background: var(--teal-pale);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 300;
}

/* Assignments */
.how-assignments { margin-top: 18px; }
.how-assignments h5 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.how-assignments > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 12px;
}
.how-assignments-callout {
  background: var(--sand);
  border-radius: 12px;
  padding: 18px 20px;
}
.how-assignments-callout h6 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.how-assignments-callout p {
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 300;
}
.how-assignments-callout a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.how-assignments-callout a:hover { text-decoration: underline; }

/* What's included grid */
.how-included { margin-top: 18px; }
.how-included h5 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.how-included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 24px;
}
.how-included-grid li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.45;
  list-style: none;
}
.how-included-grid li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}


/* ── Content Blocks (CELTA, Practicum, Quality, Jobs, Worldwide) ── */

.content-block {
  background: var(--warm-white);
  padding: var(--section-v) var(--section-h);
  border-bottom: 1px solid var(--rule);
}
.content-block--sand {
  background: var(--sand);
  border-bottom: none;
}
.content-block:last-of-type { border-bottom: none; }
.cb-grid {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.cb-grid--center { align-items: center; }
.cb-text h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 14px;
}
.cb-text h3 em { font-style: italic; color: var(--teal); }
.cb-text p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 14px;
}
.cb-text p:last-child { margin-bottom: 0; }
.cb-text a.inline-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.cb-text a.inline-link:hover { text-decoration: underline; }
.cb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cb-callout {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.content-block--sand .cb-callout { background: var(--white); }
.cb-callout--accent {
  background: var(--teal-pale);
  border-color: rgba(13,115,119,0.15);
}
.cb-callout svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}
.cb-callout p {
  font-size: 13px;
  color: var(--body);
  line-height: 1.55;
  font-weight: 400;
}
.cb-callout strong { color: var(--ink); }
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--teal);
  color: #fff;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
  margin-top: 8px;
}
.cb-btn:hover { background: var(--teal-mid); }

/* New content-block utility classes */
.cb-note {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 8px;
}

/* Image card overlay (sidebar enrichment) */
.cb-image-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.cb-image-card > img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.cb-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5,46,48,0.25);
}
.cb-image-card-inner {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5,46,48,0.55) 0%, rgba(5,46,48,0.88) 100%);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
}
.cb-image-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.cb-image-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 14px;
}
.cb-image-card-link {
  font-size: 13px;
  font-weight: 700;
  color: #7fe8eb;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Video embed wrapper */
.cb-video-wrap {
  width: 100%;
  border-radius: 25px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.cb-video-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* Logo row for accreditation badges */
.cb-logo-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.cb-logo-row img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

/* Flush section (no bottom padding) */
.hub-section--flush {
  padding-bottom: 0;
}


/* ── Why OnTESOL + What's Included ──────────────────────────── */

.why-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
.why-prose {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 300;
  margin-top: 20px;
}
.why-prose p + p { margin-top: 16px; }
.why-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.why-pillar {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow .2s;
}
.why-pillar:hover { box-shadow: 0 6px 20px rgba(13,115,119,0.06); }
.why-pillar-icon {
  width: 42px;
  height: 42px;
  background: var(--teal-pale);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-pillar-icon svg { width: 20px; height: 20px; color: var(--teal); }
.why-pillar h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.why-pillar p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 300;
}

/* What's Included heading + subheading (new named classes) */
.included-heading {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.included-sub {
  font-size: 15px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
}

/* What's Included cards */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.included-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.included-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.included-card:nth-child(1)::before { background: linear-gradient(90deg, #e8634a, #f09a5b); }
.included-card:nth-child(2)::before { background: linear-gradient(90deg, var(--teal), var(--teal-light)); }
.included-card:nth-child(3)::before { background: linear-gradient(90deg, #d4a853, #e8c468); }
.included-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.included-card h4 svg { width: 22px; height: 22px; flex-shrink: 0; }
.included-card:nth-child(1) h4 svg { color: #e8634a; }
.included-card:nth-child(2) h4 svg { color: var(--teal); }
.included-card:nth-child(3) h4 svg { color: #d4a853; }
.included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.included-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 300;
}
.included-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.included-card:nth-child(1) .included-list li svg { color: #e8634a; }
.included-card:nth-child(2) .included-list li svg { color: var(--teal); }
.included-card:nth-child(3) .included-list li svg { color: #d4a853; }


/* ── Reviews ────────────────────────────────────────────────── */

.reviews-section { position: relative; overflow: hidden; }
.reviews-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1920&q=80');
  background-size: cover;
  background-position: center;
}
.reviews-overlay { position: absolute; inset: 0; background: rgba(5,46,48,0.94); }
.reviews-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
}
.reviews-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #7fe8eb;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviews-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: #7fe8eb;
  border-radius: 1px;
  flex-shrink: 0;
}
.reviews-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.reviews-heading {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 12px;
}
.reviews-heading em { font-style: italic; color: #7fe8eb; }
.reviews-lead {
  font-size: 17px;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  line-height: 1.7;
  max-width: 420px;
}
.reviews-aggregate {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.reviews-score {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.reviews-score-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reviews-stars {
  color: #f59e0b;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
}
.reviews-count {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 300;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.review-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-3px);
}
.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.review-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: .5px;
}
.review-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  padding: 4px 9px;
  border-radius: 5px;
}
.review-quote {
  font-size: 14.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  font-weight: 300;
  flex: 1;
  margin-bottom: 20px;
  font-style: italic;
}
.review-quote::before {
  content: '\201C';
  color: #7fe8eb;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
  margin-right: 2px;
}
.review-author {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.review-name { font-size: 14px; font-weight: 700; color: #fff; }
.review-detail { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 300; }
.reviews-footer {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.review-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7fe8eb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .18s;
}
.review-platform-link:hover { gap: 9px; }


/* ── FAQ — sticky sidebar layout ────────────────────────────── */

/* NOTE: .faq-section background, .faq-list, .faq-item, .faq-q,
   .faq-q-text, .faq-icon, .faq-a, .faq-a-inner already exist in
   style.css. Only hub-specific layout additions below. */

.faq-contact {
  font-size: 15px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  margin-top: 12px;
}
.faq-contact a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.faq-contact a:hover { text-decoration: underline; }


/* ── Final CTA ──────────────────────────────────────────────── */

.final-cta { position: relative; overflow: hidden; }
.final-cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1577896851231-70ef18881754?w=1920&q=80');
  background-size: cover;
  background-position: center 40%;
}
.final-cta-overlay { position: absolute; inset: 0; background: rgba(5,46,48,0.92); }
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--teal-deep);
  padding: 17px 38px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
}
.btn-white:hover {
  background: var(--teal-pale);
  transform: translateY(-2px);
}
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: 17px 34px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  border: 1.5px solid rgba(255,255,255,0.25);
  font-family: 'Sora', sans-serif;
  line-height: 1;
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.final-trust { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 48px; }
.final-trust span {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 6px;
}
.final-trust svg {
  width: 15px;
  height: 15px;
  color: #7fe8eb;
}


/* ── Additional utility classes ─────────────────────────────── */

.cb-image-card-icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cb-image-card-icon-row svg { width: 22px; height: 22px; flex-shrink: 0; }
.cb-sidebar--center { display: flex; align-items: center; justify-content: center; }
.how-wide-step--first { margin-top: 48px; }


/* ── Mobile Jump Bar visibility ─────────────────────────────────
   Show the top jump nav whenever the .ta-side-nav labels collapse.
   Side nav label-collapse breakpoint is 1447px (see Floating side
   nav rules above), so the jump bar takes over from there down.
   Below 1041px the side nav is hidden entirely and the jump bar
   continues to serve as the only on-page nav.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1447px) {
  .mobile-jump-bar { display: block; }
}

/* ── Hub Page Responsive ────────────────────────────────────── */

@media (max-width: 1040px) {
  .hub-hero { padding: 100px 32px 48px; }
  .compare-grid { grid-template-columns: 1fr; }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .why-top { grid-template-columns: 1fr; gap: 32px; }
  .specs-section .programs-core { grid-template-columns: 1fr; }
  .specs-enroll-box { grid-template-columns: 1fr; gap: 20px; }
  .careers-layout { grid-template-columns: 1fr; border-radius: 16px; }
  .careers-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1.5px solid var(--rule);
  }
  .careers-nav-item {
    border-bottom: none;
    border-right: 1px solid var(--rule);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 160px;
    padding: 14px 18px;
  }
  .careers-nav-item:last-child { border-right: none; }
  .careers-nav-item.active::after {
    right: auto; left: 0;
    top: auto; bottom: -2px;
    width: 100%; height: 3px;
  }
  .careers-panel { min-height: auto; padding: 28px 24px; }
  .reviews-header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .decision-box { grid-template-columns: 1fr; gap: 20px; }
  .decision-or { display: none; }
  .cb-grid { grid-template-columns: 1fr; gap: 32px; }
  .content-block { padding: 72px 32px; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .how-grid-bottom { grid-template-columns: 1fr; }
  .how-card--wide { flex-direction: column; }
  .how-card--wide .how-card-img { width: 100%; height: 140px; }
  .how-wide-step .how-card,
  .how-wide-step--reverse .how-card { flex-direction: column; }
  .how-wide-step .how-card-img { width: 100%; height: 200px; }
  .included-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-inner { padding: 72px 32px; }
  .hub-hero-trust { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 640px) {
  .hub-hero { padding: 90px 22px 40px; }
  .hub-hero h1 { font-size: 34px; }
  .hub-hero-tagline { font-size: 17px; }
  .hub-hero-trust { grid-template-columns: 1fr; gap: 20px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-wide-step .how-card,
  .how-wide-step--reverse .how-card { flex-direction: column; }
  .how-wide-step .how-card-img { width: 100%; height: 180px; }
  .how-wide-step .how-card-body { padding: 22px 22px 26px; }
  .included-grid { grid-template-columns: 1fr; }
  .how-included-grid { grid-template-columns: 1fr; }
  .hub-jump { font-size: 12px; padding: 7px 12px; }

  .course-card-header { padding: 28px 24px 0; }
  .course-card-price { padding: 16px 24px; }
  .course-card-body { padding: 20px 24px; }
  .final-trust { gap: 14px; }
  .content-block { padding: 56px 22px; }
  .decision-box { padding: 28px 24px; }
  .reviews-inner { padding: 56px 22px; }
  .specs-enroll-box { padding: 22px 24px; }
}

/* ========================================================================
   TEACH ENGLISH ONLINE (template-teach-english-online.php)
   ======================================================================== */

/* --- Why section: prose + image grid --- */
.teo-why { scroll-margin-top: 80px; }

.teo-prose {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}
.teo-prose-text p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 14px;
}
.teo-prose-text p:last-child { margin-bottom: 0; }
.teo-prose-text a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.teo-prose-text a:hover { text-decoration: underline; }
.teo-prose-text .section-heading { margin-bottom: 20px; }

/* Stylized frame inside .teo-prose right column — preserves the
   vertical offset previously provided by .teo-prose-img so the
   image aligns with the prose copy on the left. The frame's own
   styles (corner bracket + amber dot) come from .crs-live-visual. */
.teo-prose .crs-live-visual {
  margin-top: 56px;
}

/* --- How to Start: step cards --- */
.teo-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.teo-step-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--rule);
  transition: box-shadow .25s, transform .25s;
}
.teo-step-card:hover {
  box-shadow: 0 8px 28px rgba(13,115,119,0.08);
  transform: translateY(-2px);
}
.teo-step-img {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.teo-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teo-step-num {
  position: absolute;
  top: 14px; left: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teo-step-body { padding: 24px; }
.teo-step-body h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.teo-step-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 14px;
}
.teo-step-body p:last-child { margin-bottom: 0; }
.teo-step-body a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.teo-step-body a:hover { text-decoration: underline; }

/* --- Cert section overrides --- */
/* cp-cert is shared — only add scroll-margin */
#specialist { scroll-margin-top: 80px; }

/* --- Why OnTESOL: trust cards --- */
#why-ontesol { scroll-margin-top: 80px; }

.teo-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.teo-trust-card {
  background: var(--teal-pale);
  border-radius: 16px;
  padding: 32px 28px;
}
.teo-trust-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.teo-trust-icon svg {
  width: 24px; height: 24px;
  color: #fff;
}
.teo-trust-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.teo-trust-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
}

/* --- Scroll margin for all side-nav targets --- */
#why-online,
#qualifications,
#earnings,
#how-to-start,
#resources,
#faq { scroll-margin-top: 80px; }

/* --- Responsive --- */
@media (max-width: 1040px) {
  .teo-prose { grid-template-columns: 1fr; gap: 32px; }
  .teo-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .teo-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .teo-steps-grid { grid-template-columns: 1fr; }
  .teo-trust-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   COURSE DETAIL PAGE (template-120-hour-tesol.php)
   New components: crs-* prefix. Shared components (hub-hero, cp-stats,
   included-card/grid, reviews-*, cp-faq, ta-final-cta, ta-side-nav)
   are NOT redeclared — they live in their existing style.css sections.
   ======================================================================== */

/* ── Hero bg override — course-specific background image ──── */
.crs-hero::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/02/TESOL-classroom.jpg') !important;
}

/* ── Floating Enrollment Card (Overview + Accreditation) ──── */
.crs-float-wrapper {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}
.crs-float-main {
  min-width: 0;
}
.crs-float-aside {
  position: sticky;
  top: 70px;          /* directly under the 70px fixed nav */
  padding-top: 20px;  /* visible gap — survives Safari sticky-in-grid quirk */
  align-self: start;
}
.crs-enroll-card {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(13,115,119,0.08);
}
.crs-enroll-header {
  background: var(--teal-deep);
  padding: 24px 28px;
  color: #fff;
}
.crs-enroll-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7fe8eb;
  margin-bottom: 10px;
}
.crs-enroll-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.crs-enroll-amount {
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.crs-enroll-alt {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
}
.crs-enroll-body {
  padding: 24px 28px;
}
.crs-enroll-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
}
.crs-enroll-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.45;
  font-weight: 400;
}
.crs-enroll-features li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.crs-enroll-cta {
  display: block;
  text-align: center;
  background: var(--teal-light);
  color: #fff;
  padding: 15px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
  margin-bottom: 14px;
}
.crs-enroll-cta:hover {
  background: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,115,119,0.25);
}
.crs-enroll-save {
  background: var(--amber-pale);
  border-radius: 9px;
  padding: 12px 16px;
  text-align: center;
  margin-bottom: 16px;
}
.crs-enroll-save p {
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
  line-height: 1.5;
}
.crs-enroll-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.crs-enroll-trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.crs-enroll-trust svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--teal);
}

/* Sections inside float wrapper */
.crs-float-section {
  padding-top: var(--section-v);
  padding-bottom: var(--section-v);
}
.crs-float-section + .crs-float-section {
  border-top: 1px solid var(--rule);
}

/* ── Overview: Compact numbered pillars ────────────────────── */
.crs-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 36px;
}
.crs-pillar {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.crs-pillar:last-child { border-bottom: none; padding-bottom: 0; }
.crs-pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--teal-pale);
  margin-top: 2px;
}
.crs-pillar-icon svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
}
.crs-pillar h3 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.crs-pillar p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
}
.crs-pillar a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.crs-pillar a:hover { text-decoration: underline; }
.crs-pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .15s;
}
.crs-pillar-link:hover { gap: 10px; }
.crs-pillar-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Syllabus: Learning Outcomes grid ────────────────────── */
.crs-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.crs-outcome {
  padding: 22px 26px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.crs-outcome:nth-child(2n) { border-right: none; }
.crs-outcome:nth-last-child(-n+2) { border-bottom: none; }
.crs-outcome:last-child { border-bottom: none; }
.crs-outcome-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.crs-outcome-num {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 900;
  color: var(--teal);
}
.crs-outcome h4 {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.crs-outcome p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ── Accreditation: Stacked primary + secondary cards ────── */
.crs-accred-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.crs-accred-connector {
  z-index: 3;
  width: 44px;
  height: 44px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13,115,119,0.25);
  margin: -22px auto;
  position: relative;
}
.crs-accred-connector svg {
  width: 20px;
  height: 20px;
  color: #fff;
  transform: rotate(90deg);
}
.crs-accred-primary {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 18px 18px 0 0;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.crs-accred-primary-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 6px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.crs-accred-primary img {
  height: 44px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
  align-self: flex-start;
}
.crs-accred-primary h3 {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.crs-accred-primary > p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 16px;
}
.crs-accred-primary > p strong {
  color: var(--ink);
  font-weight: 700;
}
.crs-accred-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-dark);
  background: var(--teal-pale);
  padding: 8px 14px;
  border-radius: 8px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.crs-accred-badge svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
}
.crs-accred-secondary {
  background: var(--sand);
  border: 1.5px solid var(--rule);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.crs-accred-secondary-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.crs-accred-secondary-heading img {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.crs-accred-secondary-heading h3 {
  margin-bottom: 0;
}
.crs-accred-secondary-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.crs-accred-secondary-label svg {
  width: 14px;
  height: 14px;
}
.crs-accred-secondary h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.crs-accred-secondary > p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 8px;
}
.crs-accred-secondary > p:last-of-type { margin-bottom: 16px; }
.crs-accred-secondary > p strong {
  color: var(--ink);
  font-weight: 700;
}
.crs-accred-equiv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-dark);
  background: var(--teal-pale);
  padding: 7px 12px;
  border-radius: 7px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.crs-accred-equiv svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.crs-entry-reqs {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.crs-entry-reqs h4 {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.crs-entry-reqs ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.crs-entry-reqs li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 300;
}
.crs-entry-reqs li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.crs-accred-secondary .crs-entry-reqs li svg {
  color: var(--muted);
}

/* ── Live Classes Section ─────────────────────────────────── */
.crs-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.crs-live-content p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 14px;
}
.crs-live-content p strong {
  color: var(--ink);
  font-weight: 700;
}
.crs-live-content p a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.crs-live-content p a:hover { text-decoration: underline; }
.crs-live-visual {
  position: relative;
  padding: 16px;
}
.crs-live-visual::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 65%;
  border-right: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  border-radius: 0 0 20px 0;
  pointer-events: none;
}
.crs-live-visual::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background: var(--amber);
  opacity: 0.12;
  border-radius: 50%;
  pointer-events: none;
}
.crs-live-img {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.crs-live-img img {
  width: 100%;
  display: block;
}

/* Workshop cards — 2x2 grid */
.crs-ws-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
  margin-top: 48px;
}
.crs-workshop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.crs-ws-card {
  background: var(--teal-deep);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 22px;
  color: #fff;
  transition: border-color .2s, transform .2s;
}
.crs-ws-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}
.crs-ws-card-num {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--amber);
  margin-bottom: 10px;
}
.crs-ws-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.25;
}
.crs-ws-card p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  font-weight: 300;
}
.crs-ws-card--tutorial {
  background: var(--teal-dark);
  border-color: rgba(255,255,255,0.06);
}
.crs-ws-card--tutorial .crs-ws-card-num {
  color: #7fe8eb;
}

/* Schedule sidebar */
.crs-ws-schedule {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 28px;
}
.crs-ws-schedule h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.crs-ws-schedule .crs-schedule-table {
  margin-bottom: 20px;
}
.crs-ws-schedule .crs-schedule-note {
  margin-top: 0;
  max-width: none;
}

/* Schedule table */
.crs-schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.crs-schedule-table th,
.crs-schedule-table td {
  padding: 14px 20px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.crs-schedule-table tr:last-child td { border-bottom: none; }
.crs-schedule-table thead th {
  background: var(--teal-deep);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.crs-schedule-table tbody tr:hover {
  background: var(--teal-xpale);
}
.crs-schedule-table td {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 300;
}
.crs-schedule-table td strong {
  color: var(--ink);
  font-weight: 600;
}

/* Schedule note */
.crs-schedule-note {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 4px solid var(--amber);
  background: var(--sand);
  border-radius: 0 10px 10px 0;
}
.crs-schedule-note p {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.65;
  font-weight: 300;
}
.crs-schedule-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Syllabus / Curriculum Modules ────────────────────────── */
.crs-module {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color .2s;
}
.crs-module:hover {
  border-color: rgba(13,115,119,0.25);
}
.crs-module-header {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.crs-module-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crs-module-num span {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 900;
  color: #7fe8eb;
}
.crs-module-info { flex: 1; }
.crs-module-info h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.crs-module-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.crs-module-meta span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.crs-module-meta svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.crs-module-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  transition: transform .3s;
}
.crs-module-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.crs-module.open .crs-module-toggle {
  transform: rotate(180deg);
}
.crs-module-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.crs-module.open .crs-module-body {
  max-height: 2000px;
}
.crs-module-body-inner {
  padding: 0 28px 28px;
  padding-left: 92px;
}
.crs-module-desc {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 16px;
}
.crs-module-chapters {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crs-module-chapters li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 300;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.crs-module-chapters li:last-child { border-bottom: none; }
.crs-module-chapters li .ch-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  min-width: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Expandable chapters (Module 3 Methodology) */
.crs-module-chapters li.ch-expandable {
  flex-direction: column;
  gap: 0;
  padding: 0;
  cursor: pointer;
}
.ch-expand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  width: 100%;
}
.ch-expand-header:hover .ch-title { color: var(--teal); }
.ch-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  transition: color .15s;
}
.ch-expand-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .3s, color .2s;
}
.ch-expand-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.ch-expandable.open .ch-expand-icon {
  transform: rotate(180deg);
  color: var(--teal);
}
.ch-expand-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch-expandable.open .ch-expand-body {
  max-height: 200px;
}
.ch-expand-desc {
  padding: 0 0 12px 30px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
}

/* ── Tuition / Pricing ────────────────────────────────────── */
.crs-pricing-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.crs-price-card {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 20px;
  overflow: hidden;
}
.crs-price-card-sticky {
  position: sticky;
  top: 70px;          /* directly under the 70px fixed nav */
  padding-top: 20px;  /* visible gap — survives Safari sticky-in-grid quirk */
}
.crs-price-header {
  background: var(--teal-deep);
  padding: 28px 32px;
  color: #fff;
}
.crs-price-header h3 {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  color: #7fe8eb;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.crs-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.crs-price-amount {
  font-family: 'Fraunces', serif;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.crs-price-alt {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
}
.crs-price-body {
  padding: 28px 32px;
}
.crs-price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.crs-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.5;
  font-weight: 400;
}
.crs-price-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 0;
}
.crs-price-cta {
  display: block;
  text-align: center;
  background: var(--teal-light);
  color: #fff;
  padding: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
  margin-bottom: 16px;
}
.crs-price-cta:hover {
  background: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,115,119,0.25);
}
.crs-price-save {
  background: var(--amber-pale);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
}
.crs-price-save p {
  font-size: 13px;
  color: var(--amber);
  font-weight: 600;
  line-height: 1.5;
}
.crs-price-save strong {
  font-weight: 700;
}

/* Specialist add-ons */
.crs-addons {
  margin-top: 0;
}
.crs-addon {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
.crs-addon:hover {
  border-color: rgba(13,115,119,0.25);
}
.crs-addon h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.crs-addon > p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 14px;
}
.crs-addon-price {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.crs-addon-price .crs-addon-strike {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 300;
}
.crs-addon-price .crs-addon-now {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--teal);
}
.crs-addon-price .crs-addon-note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
}


/* ── Scroll margin for jump-bar / side-nav targets ────────── */
#overview,
#accreditation,
#live-classes,
#syllabus,
#tuition,
#reviews { scroll-margin-top: 80px; }


/* ── Sticky pricing card offset when the jump bar is visible ─
   .mobile-jump-bar appears at ≤1447px, sticks at top:70px, and
   is ~68px tall. The default .crs-float-aside top:90px puts the
   card behind it. Bump the sticky offset so the card clears the
   bar with ~18px of breathing room. At ≤1040px the existing
   responsive rule below turns the aside into position:static
   and hides it, so this only takes effect in the 1041–1447 band. */
@media (max-width: 1447px) {
  .crs-float-aside,
  .crs-price-card-sticky { top: 136px; }
}


/* ── Course Page Responsive ──────────────────────────────── */
@media (max-width: 1040px) {
  .crs-float-wrapper { grid-template-columns: 1fr; gap: 0; }
  .crs-float-aside { position: static; display: none; padding-top: 0; }
  .crs-live-grid { grid-template-columns: 1fr; }
  .crs-pricing-layout { grid-template-columns: 1fr; }
  .crs-price-card-sticky { position: static; padding-top: 0; }
  .crs-module-body-inner { padding-left: 28px; }
  .crs-ws-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .crs-outcomes { grid-template-columns: 1fr; }
  .crs-outcome { border-right: none; }
  .crs-outcome:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .crs-outcome:last-child { border-bottom: none; }
  .crs-workshop-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   250-HOUR TESOL DIPLOMA PAGE
   Only diploma-specific components go here.
   Shared components (hub-hero, cp-stats, crs-float-*, crs-pillar,
   crs-accred-*, crs-module, crs-live-*, crs-ws-*, crs-pricing-*,
   included-card/grid, reviews-*, cp-faq, ta-final-cta, ta-side-nav)
   are NOT redeclared — they live in their existing style.css sections.
   ======================================================================== */

/* ── Scroll-margin for diploma-specific side-nav / jump-bar targets ─
   #overview, #accreditation, #live-classes, #syllabus, #tuition, #reviews
   already get scroll-margin from the rule in the 120-hour section
   (selectors are global). #faq is covered by .cp-faq. Only the two
   diploma-only anchors need new rules. */
#how-it-works,
#practicum { scroll-margin-top: 80px; }

/* ── Hero bg override — diploma-specific background image ─── */
.page-template-template-250-hour-tesol-diploma .crs-hero::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2022/07/O-teach-english-ontesolmobile.jpg') !important;
}

/* ── Practicum Card ──────────────────────────────────────── */
.dip-practicum-card {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 36px;
}
.dip-practicum-header {
  background: var(--teal-deep);
  padding: 28px 32px;
}
.dip-practicum-header h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.dip-practicum-header p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
  line-height: 1.6;
}
.dip-practicum-body {
  padding: 32px;
}
.dip-practicum-body > p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 14px;
}
.dip-practicum-body > p strong {
  color: var(--ink);
  font-weight: 700;
}
.dip-practicum-body > p a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.dip-practicum-body > p a:hover {
  text-decoration: underline;
}
.dip-practicum-options {
  margin-top: 24px;
}
.dip-practicum-options h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.dip-prac-option {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.dip-prac-option:last-child {
  padding-bottom: 0;
}
.dip-prac-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--teal);
}
.dip-prac-option > div p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 8px;
}
.dip-prac-option > div p:last-child {
  margin-bottom: 0;
}
.dip-prac-option > div p strong {
  color: var(--ink);
  font-weight: 700;
}
.dip-prac-note {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 4px solid var(--amber);
  background: var(--sand);
  border-radius: 0 10px 10px 0;
}
.dip-prac-note p {
  font-size: 13px;
  color: var(--body);
  line-height: 1.65;
  font-weight: 300;
}
.dip-prac-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Diploma Page Responsive ─────────────────────────────── */
@media (max-width: 640px) {
  .dip-practicum-body { padding: 24px; }
}

/* ========================================================================
   SPECIALIST COURSE PAGES (TEYL, TEO, TBEC, IELTS)
   Page-specific layout for 20-hour specialist course templates.
   Shared components (crs-enroll-*, crs-module, crs-pillar, crs-live-visual,
   decision-box, programs-core, prog-card, cp-faq, ta-final-cta, ta-side-nav)
   are NOT redeclared — they live in their existing style.css sections.
   ======================================================================== */

/* ── Page-level 2-column grid (hero+content left, sticky card right) ── */
.spec-page-wrap {
  max-width: calc(var(--wrap-max) + var(--section-h) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0 48px;
}
.spec-page-main { min-width: 0; }
.spec-page-aside {
  align-self: stretch;
  z-index: 10;
  padding-right: var(--section-h);
}
.spec-page-aside .crs-enroll-card {
  position: sticky;
  top: 90px;
}

/* ── Hero band — full-width bleed from inside the grid ────── */
.spec-hero-band {
  position: relative;
  background: var(--teal-deep);
  padding: 48px var(--section-h) 40px;
  overflow: visible;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw - 340px - 48px);
  padding-left: calc(50vw - 50% + var(--section-h));
  padding-right: calc(50vw - 50% + var(--section-h));
}
.spec-hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0.15;
  pointer-events: none;
}
/* Per-page hero image override (same pattern as .crs-hero::after) */
.spec-hero-band--teyl::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2016/08/Teaching-English-to-kindergarten-kids-Daegu-South-Korea-1.jpg');
}
.spec-hero-band--teo::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2025/03/teo-hero.jpg');
}
.spec-hero-band--tbec::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2025/03/tbec-hero.jpg');
}
.spec-hero-band--ielts::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/...ielts-hero.jpg');
}
.spec-hero-inner { position: relative; z-index: 2; }
.spec-hero-inner h1 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 14px;
}
.spec-hero-inner h1 em {
  font-style: italic;
  color: #7fe8eb;
  font-variation-settings: 'opsz' 9;
}
.spec-hero-tagline {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  margin-bottom: 8px;
}
.spec-hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 28px;
}
.spec-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Trust bar — left-aligned to clear card column ────────── */
.spec-trust-bar {
  border-bottom: 1px solid var(--rule);
  padding: 20px var(--section-h);
  background: var(--white);
}
.spec-trust-items {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}
.spec-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.spec-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex-shrink: 0;
}
.spec-trust-item strong { color: var(--ink); }

/* ── Content sections inside left column ──────────────────── */
.spec-content-section {
  padding: var(--section-v) var(--section-h);
}
.spec-content-section + .spec-content-section {
  border-top: 1px solid var(--rule);
}

/* ── "Add to package" link under enroll CTA ───────────────── */
.crs-enroll-add {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-bottom: 16px;
  transition: color 0.15s;
}
.crs-enroll-add:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}
.crs-enroll-add span {
  font-weight: 400;
  color: var(--muted);
}

/* ── Who it's for — photo + stacked cards ─────────────────── */
.spec-audience-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 36px;
  align-items: start;
}
.spec-audience-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.spec-audience-item {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.spec-audience-item:hover {
  border-color: rgba(13,115,119,0.25);
  box-shadow: 0 8px 24px rgba(13,115,119,0.06);
}
.spec-audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.spec-audience-icon svg { width: 22px; height: 22px; color: var(--teal); }
.spec-audience-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.spec-audience-item p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ── Body text inside spec content sections ───────────────── */
.spec-body-text {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 14px;
}

/* ── Specialist page: 3-col "more courses" grid ───────────── */
.specs-section .spec-courses-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Specialist page responsive ───────────────────────────── */
@media (max-width: 1040px) {
  .spec-page-wrap { grid-template-columns: 1fr; }
  .spec-page-aside { display: none; }
  .spec-hero-band {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--section-h);
    padding-right: var(--section-h);
  }
  .spec-audience-layout { grid-template-columns: 1fr; }
  .specs-section .spec-courses-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spec-trust-items { gap: 16px; justify-content: center; }
}

/* ========================================================================
   SINGLE POST (single.php)
   Post hero, content layout, Gutenberg block styling, sidebar components.
   Shared components (breadcrumb, ta-section, ta-wrap, eyebrow,
   section-heading, stories-grid, story-card, ta-final-cta, final-trust,
   esl-section-header, btn-teal) are NOT redeclared.
   ======================================================================== */


/* ── Post Hero — half-height, featured image bg ─────────────── */

.post-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.post-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--teal-pale);
}
.post-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,46,48,0.92) 0%,
    rgba(5,46,48,0.55) 50%,
    rgba(5,46,48,0.2) 100%
  );
}
/* ── Hero <img> for LCP optimization ────────────────────────
   Templates that need LCP-optimized heroes place an <img> with
   fetchpriority="high" inside .post-hero-bg instead of using the
   inline background-image style. The ::after gradient overlay
   sits naturally above the img because pseudo-elements stack
   above content children when z-index is auto. */
.post-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--section-h) 48px;
}
.post-hero-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.post-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 800px;
}
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  flex-wrap: wrap;
}
.post-hero-meta-sep {
  color: rgba(255,255,255,0.2);
}
.post-hero-cat {
  color: #7fe8eb;
  text-decoration: none;
  font-weight: 600;
  transition: opacity .15s;
}
.post-hero-cat:hover {
  opacity: 0.8;
}


/* ── Post Layout — content + sidebar grid ───────────────────── */

.post-layout {
  background: var(--warm-white);
}
.post-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}


/* ── Post Content — Gutenberg block styling ─────────────────── */

.post-content {
  min-width: 0;
}

/* Headings */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 40px;
  margin-bottom: 16px;
}
.post-content h1 { font-size: 32px; font-weight: 900; }
.post-content h2 { font-size: 26px; font-weight: 900; }
.post-content h3 { font-size: 21px; font-weight: 700; }
.post-content h4 { font-size: 18px; font-weight: 700; }
.post-content h5 { font-size: 16px; font-weight: 700; }
.post-content h6 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* First heading after hero needs no top margin */
.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child {
  margin-top: 0;
}

/* Paragraphs */
.post-content p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 18px;
}

/* Links */
.post-content a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.post-content a:hover {
  text-decoration: underline;
}

/* Bold + italic */
.post-content strong { color: var(--ink); font-weight: 700; }
.post-content em { font-style: italic; }

/* Lists */
.post-content ul,
.post-content ol {
  margin-bottom: 20px;
  padding-left: 24px;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  margin-bottom: 8px;
  font-weight: 400;
}
.post-content li::marker {
  color: var(--teal);
}

/* Blockquote */
.post-content blockquote,
.post-content .wp-block-quote {
  border-left: 4px solid var(--teal);
  margin: 28px 0;
  padding: 20px 28px;
  background: var(--teal-xpale);
  border-radius: 0 12px 12px 0;
}
.post-content blockquote p,
.post-content .wp-block-quote p {
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 8px;
}
.post-content blockquote p:last-child,
.post-content .wp-block-quote p:last-child {
  margin-bottom: 0;
}
.post-content blockquote cite,
.post-content .wp-block-quote cite {
  font-size: 13px;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

/* Images */
.post-content img {
  border-radius: 12px;
  margin: 8px 0;
}
.post-content .wp-block-image {
  margin: 28px 0;
}
.post-content .wp-block-image figcaption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  font-weight: 400;
  line-height: 1.5;
}

/* Separator / HR */
.post-content hr,
.post-content .wp-block-separator {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 36px 0;
}

/* Tables */
.post-content table,
.post-content .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
}
.post-content th,
.post-content td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.post-content tr:last-child td {
  border-bottom: none;
}
.post-content thead th {
  background: var(--teal-deep);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.post-content tbody tr:hover {
  background: var(--teal-xpale);
}
.post-content td {
  color: var(--body);
  font-weight: 400;
  line-height: 1.5;
}

/* Code */
.post-content code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 14px;
  background: var(--sand);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.post-content pre,
.post-content .wp-block-code {
  background: var(--teal-deep);
  color: #e2f4f4;
  padding: 24px 28px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}
.post-content pre code,
.post-content .wp-block-code code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Buttons (Gutenberg) */
.post-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-light);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  transition: all .2s;
  line-height: 1;
}
.post-content .wp-block-button__link:hover {
  background: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,115,119,0.25);
  color: #fff;
  text-decoration: none;
}
.post-content .wp-block-buttons {
  margin: 24px 0;
}

/* Embeds / Video */
.post-content .wp-block-embed {
  margin: 28px 0;
}
.post-content .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}
.post-content .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Gallery */
.post-content .wp-block-gallery {
  margin: 28px 0;
  gap: 12px;
}
.post-content .wp-block-gallery .wp-block-image img {
  border-radius: 10px;
}

/* Pullquote */
.post-content .wp-block-pullquote {
  border-top: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  padding: 28px 0;
  margin: 36px 0;
  text-align: center;
}
.post-content .wp-block-pullquote p {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-style: italic;
  line-height: 1.4;
}
.post-content .wp-block-pullquote cite {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  font-style: normal;
}

/* Columns */
.post-content .wp-block-columns {
  margin: 28px 0;
  gap: 28px;
}

/* Cover block */
.post-content .wp-block-cover {
  border-radius: 12px;
  overflow: hidden;
  margin: 28px 0;
}

/* List block (nested) */
.post-content .wp-block-list ul,
.post-content .wp-block-list ol {
  margin-bottom: 8px;
}


/* ── Post Sidebar ───────────────────────────────────────────── */

.post-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-right: 4px;
}
.post-sidebar::-webkit-scrollbar {
  width: 6px;
}
.post-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.post-sidebar::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.post-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(13,115,119,0.25);
}

/* Back link */
.post-sb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-bottom: 24px;
  transition: gap .15s;
}
.post-sb-back:hover {
  gap: 8px;
}

/* Content box */
.post-sb-box {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.post-sb-heading {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Link list */
.post-sb-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post-sb-links a {
  display: block;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 7px;
  transition: all .15s;
  font-weight: 400;
  line-height: 1.4;
}
.post-sb-links a:hover {
  color: var(--teal);
  background: var(--teal-pale);
}

/* Country guide card — photo bg with overlay (country-card style) */
.post-sb-country-link {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  min-height: 160px;
  text-decoration: none;
  margin-bottom: 20px;
  transition: transform .2s, box-shadow .2s;
}
.post-sb-country-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5,46,48,0.25);
}
.post-sb-country-link:hover .post-sb-country-bg {
  transform: scale(1.07);
}
.post-sb-country-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--teal-dark);
  transition: transform .5s ease;
}
.post-sb-country-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,46,48,0.92) 0%, rgba(5,46,48,0.4) 55%, rgba(5,46,48,0.15) 100%);
}
.post-sb-country-inner {
  position: relative;
  z-index: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 160px;
}
.post-sb-country-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 6px;
}
.post-sb-country-name {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.post-sb-country-arrow {
  font-size: 13px;
  font-weight: 700;
  color: #7fe8eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* CTA box */
.post-sb-cta {
  background: var(--teal-deep);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.post-sb-cta-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 10px;
}
.post-sb-cta h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.post-sb-cta p {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 18px;
}
.post-sb-cta .btn-teal {
  width: 100%;
  text-align: center;
  justify-content: center;
}


/* ── Post Share Row ─────────────────────────────────────────
   End-of-article social share buttons (single.php). New classes only.
   Reuses tokens: --teal, --teal-pale, --ink, --rule, Fraunces, Sora. */
.post-share {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 44px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.post-share-label {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.post-share-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.post-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.post-share-btn svg {
  width: 18px;
  height: 18px;
}
.post-share-btn:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13,115,119,0.25);
  text-decoration: none;
}
/* Copy-link "Copied!" tooltip */
.post-share-btn--copy { position: relative; }
.post-share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.post-share-btn--copy.is-copied .post-share-copied {
  opacity: 1;
}


/* ── Single Post Responsive ──────────────────────────────────── */

@media (max-width: 1040px) {
  .post-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .post-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
    max-height: none;
    overflow: visible;
  }
  .post-sb-back {
    grid-column: 1 / -1;
  }
  .post-hero {
    min-height: 40vh;
  }
}

@media (max-width: 768px) {
  .post-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .post-hero {
    min-height: 35vh;
  }
  .post-hero-content {
    padding-bottom: 32px;
  }
  .post-hero h1 {
    font-size: 26px;
  }
  .post-content h2 { font-size: 22px; }
  .post-content h3 { font-size: 18px; }
}

/* ========================================================================
   ESL RESOURCES HUB (template-esl-resources.php)
   Only hub-specific components go here.
   Shared components (hub-hero, ta-section, ta-wrap, cp-article-card,
   cp-articles-grid, cb-image-card, cb-image-card-inner, cb-image-card-title,
   cb-image-card-desc, cb-image-card-link, ta-final-cta, ta-side-nav,
   eyebrow, eyebrow-white, section-heading, section-lead, btn-primary,
   btn-primary-lg, btn-ghost-lg, btn-outline, btn-white) are NOT redeclared.
   ======================================================================== */


/* ── Hero modifier — editorial (no trust grid, no bg image) ── */

.esl-hero {
  padding-bottom: 48px;
}
.esl-hero::after {
  display: none;
}


/* ── Topics Intro ───────────────────────────────────────────── */

.esl-topics-intro {
  margin-bottom: 40px;
}
.esl-topics-intro .section-lead {
  margin-top: 12px;
}


/* ── Topic Groups — 2×2 photo-backed cards (best-card style) ── */

.esl-groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.esl-group {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: box-shadow .25s, transform .25s;
}
.esl-group:hover {
  box-shadow: 0 14px 44px rgba(13,115,119,0.1);
  transform: translateY(-3px);
}
.esl-group-photo {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 240px;
}
.esl-group-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
}
.esl-group-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 12px;
  width: fit-content;
  font-family: 'Sora', sans-serif;
}
.esl-group--skills .esl-group-badge  { background: var(--teal-pale); color: var(--teal-dark); }
.esl-group--practice .esl-group-badge { background: var(--amber-pale); color: var(--amber); }
.esl-group--planning .esl-group-badge { background: rgba(8,82,85,0.08); color: var(--teal-dark); }
.esl-group--special .esl-group-badge  { background: var(--sand); color: var(--muted); }

.esl-group-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.esl-group-desc {
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 16px;
}
.esl-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
}
.esl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--body);
  background: var(--sand);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
}
.esl-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-xpale);
}
.esl-chip-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.35;
}


/* ── In-Depth Guides — 3-col cb-image-card grid ────────────── */

.esl-guides-section {
  margin-top: 40px;
}
.esl-guides-header {
  margin-bottom: 24px;
}
.esl-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* ── Lesson Plans — full-bleed photo overlay + category chips ─ */

.esl-lp-section {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.esl-lp-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.esl-lp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,46,48,0.88);
}
.esl-lp-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--section-v) var(--section-h);
}
.esl-lp-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.esl-lp-text h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 14px;
}
.esl-lp-text h2 em {
  font-style: italic;
  color: #7fe8eb;
}
.esl-lp-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 440px;
}
.esl-lp-cats-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 14px;
  font-family: 'Sora', sans-serif;
}
.esl-lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.esl-lp-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
  line-height: 1;
}
.esl-lp-chip:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}


/* ── Section Header — heading left + "view all" right ───────── */

.esl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
}
.esl-view-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
  padding-bottom: 6px;
}
.esl-view-all:hover {
  gap: 8px;
}


/* ── Articles Grid — 4-col (2 rows of 4) ───────────────────── */

.esl-articles-grid {
  grid-template-columns: repeat(4, 1fr);
}


/* ── Load More ──────────────────────────────────────────────── */

.esl-load-more {
  text-align: center;
  margin-top: 36px;
}


/* ── ESL Resources Hub Responsive ────────────────────────────── */

@media (max-width: 1040px) {
  .esl-groups-grid { grid-template-columns: 1fr; }
  .esl-group { grid-template-columns: 180px 1fr; }
  .esl-guides-grid { grid-template-columns: 1fr 1fr; }
  .esl-lp-inner { grid-template-columns: 1fr; gap: 32px; }
  .esl-section-header { flex-direction: column; align-items: flex-start; }
  .esl-articles-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .esl-group { grid-template-columns: 1fr; }
  .esl-group-photo { min-height: 180px; }
  .esl-group-chips { gap: 5px; }
  .esl-chip { padding: 6px 10px; font-size: 11px; }
  .esl-guides-grid { grid-template-columns: 1fr; }
  .esl-lp-chips { gap: 8px; }
  .esl-lp-chip { padding: 8px 14px; font-size: 12px; }
  .esl-articles-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   CATEGORY ARCHIVE (archive.php)
   Archive-specific styles only. Reuses: post-hero, post-hero-bg,
   post-hero-content, post-hero-inner, post-hero-meta, breadcrumb,
   cp-article-card, cp-article-img, cp-article-body, cp-article-tag,
   cp-article-title, esl-chip-count, post-sb-back, ta-final-cta,
   eyebrow, btn-primary-lg, btn-ghost-lg.
   ======================================================================== */


/* ── Archive Hero — slightly shorter ────────────────────────── */

.archive-hero {
  min-height: 40vh;
}


/* ── Archive Layout — 2-col (posts + sidebar) ───────────────── */

.archive-layout {
  background: var(--warm-white);
}
.archive-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}


/* ── Archive Main (left column) ─────────────────────────────── */

.archive-main {
  min-width: 0;
}

/* Category description */
.archive-intro {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 300;
  max-width: 640px;
  margin-bottom: 32px;
}
.archive-intro p {
  margin-bottom: 12px;
}
.archive-intro p:last-child {
  margin-bottom: 0;
}
.archive-intro a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.archive-intro a:hover {
  text-decoration: underline;
}

/* 2-col post grid */
.archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}


/* ── Archive Sidebar (right column) ─────────────────────────── */

.archive-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
}

/* "All [Category]" link at top */
.archive-sb-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  transition: background .15s;
}
.archive-sb-all:hover {
  background: var(--teal-xpale);
}

/* Grouped sections */
.archive-sb-group {
  border-bottom: 1px solid var(--rule);
}
.archive-sb-group:last-child {
  border-bottom: none;
}
.archive-sb-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.archive-sb-group-toggle svg {
  color: var(--muted);
  transition: transform .25s;
  flex-shrink: 0;
}
.archive-sb-group--open .archive-sb-group-toggle svg {
  transform: rotate(180deg);
  color: var(--teal);
}

/* Collapsible body */
.archive-sb-group-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}
.archive-sb-group--open .archive-sb-group-body {
  max-height: 600px;
  padding-bottom: 12px;
}

/* Individual category links */
.archive-sb-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 7px;
  transition: all .15s;
  font-weight: 400;
  line-height: 1.4;
}
.archive-sb-link:hover {
  color: var(--teal);
  background: var(--teal-pale);
}

/* Current category highlight */
.archive-sb-link--current {
  color: var(--teal);
  font-weight: 600;
  background: var(--teal-pale);
}


/* ── Pagination ─────────────────────────────────────────────── */

.archive-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.archive-pagination .page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.archive-pagination .page-numbers li {
  display: flex;
}
.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Sora', sans-serif;
}
.archive-pagination .page-numbers a {
  color: var(--body);
  background: var(--white);
  border: 1.5px solid var(--rule);
}
.archive-pagination .page-numbers a:hover {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-xpale);
}
.archive-pagination .page-numbers .current {
  color: #fff;
  background: var(--teal);
  border: 1.5px solid var(--teal);
}
.archive-pagination .page-numbers .dots {
  color: var(--muted);
  border: none;
  background: none;
  min-width: 24px;
}
.archive-pagination .page-numbers .prev,
.archive-pagination .page-numbers .next {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  border-color: transparent;
  background: none;
}
.archive-pagination .page-numbers .prev:hover,
.archive-pagination .page-numbers .next:hover {
  background: var(--teal-xpale);
  border-color: transparent;
}


/* ── Archive Responsive ──────────────────────────────────────── */

@media (max-width: 1040px) {
  .archive-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .archive-sidebar {
    position: static;
    border-top: 1px solid var(--rule);
    padding-top: 32px;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .archive-sidebar .post-sb-back {
    grid-column: 1 / -1;
  }
  .archive-sidebar .archive-sb-all {
    grid-column: 1 / -1;
  }
  .archive-hero { min-height: 35vh; }
}

@media (max-width: 768px) {
  .archive-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .archive-grid { grid-template-columns: 1fr; }
  .archive-hero { min-height: 30vh; }
}

/* ========================================================================
   TESL CANADA PAGE (template-tesl-canada.php)
   Page-specific overrides only. Shared components (hub-hero, cp-stats,
   cb-grid, crs-pillar, cmp-table, why-pillar, benefits-list, auth-callout,
   spec-audience, cp-req, course-card, compare-grid, cp-faq, paths-grid,
   path-card, ta-final-cta, final-trust, ta-side-nav) are NOT redeclared.
   ======================================================================== */

/* ── Hero background image override ───────────────────────── */
.hub-hero--tesl-canada::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2020/11/TESL-Canada-scaled.jpeg');
}

/* Hero jump-link buttons — smaller than standard btn-ghost-lg */
.tc-hero-btn {
  padding: 14px 24px;
  font-size: 14px;
}

/* Hero "2003" year display */
.tc-hero-year {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 900;
  color: #7fe8eb;
  line-height: 1;
  margin-bottom: 4px;
}

/* ── Final CTA background image ───────────────────────────── */
/* TODO: Replace Unsplash URL with a CDN-hosted image */
.tc-final-cta-bg {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2020/11/TESL-Canada-scaled.jpeg');
  background-position: center 40%;
}

/* ── Scroll-margin for side-nav targets ───────────────────── */
#about,
#standards,
#why-tesl-canada,
#job-requirements,
#who-is-it-for,
#requirements,
#programs,
#related { scroll-margin-top: 80px; }

/* ── Link styles for components that gain links on this page ─ */
.why-pillar a,
.spec-audience-item a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.why-pillar a:hover,
.spec-audience-item a:hover {
  text-decoration: underline;
}

/* ── Inline link utility (teal link inside body text) ─────── */
.inline-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.inline-link:hover {
  text-decoration: underline;
}

/* ── TESL Canada responsive — page-specific only ──────────── */
@media (max-width: 1040px) {
  .tc-hero-year { font-size: 40px; }
}

/* ── Eligibility checklist (TESL Canada) ──────────────────── */
.tc-elig-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: start;
  margin-top: 36px;
}
.tc-elig-list {
  position: relative;
}
.tc-elig-list::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(to bottom, var(--teal-pale), var(--teal) 30%, var(--teal) 70%, var(--teal-pale));
  border-radius: 1px;
}
.tc-elig-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.tc-elig-item:first-child {
  border-top: none;
  padding-top: 12px;
}
.tc-elig-item:last-child {
  padding-bottom: 12px;
}
.tc-elig-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.tc-elig-item h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tc-elig-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
}
.tc-elig-item p strong {
  color: var(--body);
  font-weight: 600;
}
.tc-elig-item p a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.tc-elig-item p a:hover {
  text-decoration: underline;
}
.tc-elig-scores {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tc-elig-score {
  background: var(--teal-pale);
  border-radius: 8px;
  padding: 10px 14px;
  flex: 1;
  min-width: 140px;
}
.tc-elig-score-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal);
  margin-bottom: 3px;
}
.tc-elig-score-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.tc-elig-score-val span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
}
/* Sidebar callout card */
.tc-elig-aside {
  background: var(--teal-deep);
  border-radius: 18px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.tc-elig-aside::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: var(--amber);
  opacity: 0.1;
  border-radius: 50%;
  pointer-events: none;
}
.tc-elig-aside::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 50px;
  height: 50px;
  background: var(--teal-light);
  opacity: 0.12;
  border-radius: 50%;
  pointer-events: none;
}
.tc-elig-aside-inner {
  position: relative;
  z-index: 1;
}
.tc-elig-aside-icon {
  width: 44px;
  height: 44px;
  background: rgba(127,232,235,0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.tc-elig-aside-icon svg {
  width: 22px;
  height: 22px;
  color: #7fe8eb;
}
.tc-elig-aside-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 8px;
}
.tc-elig-aside h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.tc-elig-aside p {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  font-weight: 300;
}
.tc-elig-aside p strong {
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}
.tc-elig-aside p a {
  color: #7fe8eb;
  font-weight: 600;
  text-decoration: none;
}
.tc-elig-aside p a:hover {
  text-decoration: underline;
}

/* ── Eligibility responsive ──────────────────────────────── */
@media (max-width: 1040px) {
  .tc-elig-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .tc-elig-scores {
    flex-direction: column;
  }
  .tc-elig-score {
    min-width: 0;
  }
}

/* ========================================================================
   ACCREDITATIONS PAGE (template-accreditations.php)
   Page-specific components and overrides. Shared components (hub-hero,
   ta-section, ta-wrap, bg-sand, eyebrow, eyebrow-white, display-heading,
   section-lead, ta-final-cta, final-trust, btn-white, btn-ghost-light,
   breadcrumb) are NOT redeclared.
   ======================================================================== */

/* ── Hero background image override ───────────────────────── */
.hub-hero--accreditations::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/09/TEFL-teach-bg.jpg');
}

/* ── Accreditation cards — 2-col linked cards ─────────────── */
.accred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.accred-card {
  background: var(--white);
  border: 2px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
  text-decoration: none;
  color: inherit;
}
.accred-card:hover {
  box-shadow: 0 16px 48px rgba(13,115,119,0.1);
  transform: translateY(-4px);
  text-decoration: none;
}
.accred-card-header {
  padding: 36px 36px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.accred-card-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-bottom: 20px;
}
.accred-card-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal);
  margin-bottom: 8px;
  font-family: 'Sora', sans-serif;
}
.accred-card h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.accred-card-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 24px;
}
.accred-card-body {
  padding: 0 36px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.accred-card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}
.accred-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.5;
}
.accred-card-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 1px;
}
.accred-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: gap .15s;
  font-family: 'Sora', sans-serif;
}
.accred-card-link:hover {
  gap: 10px;
  text-decoration: none;
}
.accred-card-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Divider strip ────────────────────────────────────────── */
.accred-strip {
  background: var(--teal-dark);
  padding: 28px var(--section-h);
  text-align: center;
}
.accred-strip p {
  max-width: var(--wrap-max);
  margin: 0 auto;
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  font-weight: 300;
}
.accred-strip strong {
  color: #fff;
  font-weight: 600;
}
.accred-strip a {
  color: #7fe8eb;
  font-weight: 600;
  text-decoration: none;
}
.accred-strip a:hover {
  text-decoration: underline;
}

/* ── Accreditations responsive ────────────────────────────── */
@media (max-width: 1040px) {
  .accred-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   ACCET PAGE (template-accet.php)
   Page-specific overrides only. Shared components (hub-hero, cp-stats,
   cb-grid, crs-pillar, cmp-table, why-pillar, paths-grid, path-card,
   ta-final-cta, final-trust, ta-side-nav) are NOT redeclared.
   ======================================================================== */

/* ── Hero background image override ───────────────────────── */
.hub-hero--accet::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/09/TEFL-teach-bg.jpg');
}

/* Hero jump-link buttons — smaller than standard btn-ghost-lg */
.ac-hero-btn {
  padding: 14px 24px;
  font-size: 14px;
}

/* Hero "2023" year display */
.ac-hero-year {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 900;
  color: #7fe8eb;
  line-height: 1;
  margin-bottom: 4px;
}

/* ── Final CTA background image ───────────────────────────── */
/* TODO: Replace with a proper CDN-hosted image */
.ac-final-cta-bg {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/09/TEFL-teach-bg.jpg');
  background-position: center 40%;
}

/* ── Scroll-margin for side-nav targets ───────────────────── */
#about,
#benefits,
#ceus,
#why-accet,
#related { scroll-margin-top: 80px; }

/* ── ACCET responsive — page-specific only ────────────────── */
@media (max-width: 1040px) {
  .ac-hero-year { font-size: 40px; }
}

/* ========================================================================
   TESOL CERTIFICATION CANADA (template-tesol-certification-canada.php)
   Shared components (hub-hero, cb-grid, cb-text, cb-callout, path-card,
   prog-card, programs-core, auth-callout, reviews-*, cp-faq,
   ta-final-cta, final-trust, ta-side-nav) are NOT redeclared.
   ======================================================================== */

/* ── Hero background image override ───────────────────────── */
.hub-hero--tcc::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2026/04/TESOL-Certification-Canada.jpg');
}

/* ── Highlight paragraph (teal left-border callout) ───────── */
.tcc-highlight {
  border-left: 4px solid var(--teal);
  padding: 20px 28px;
  background: var(--teal-xpale);
  border-radius: 0 12px 12px 0;
  margin-top: 8px;
}
.tcc-highlight p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 400;
  margin: 0;
}

/* ── Career path icon (used inside tc-elig-list) ──────────── */
.tcc-path-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tcc-path-icon svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* ============================================================
   ABOUT US PAGE
   ============================================================ */

/* ── Section Heading modifier (white text on dark bg) ─────── */
.section-heading--white { color: #fff; }
.section-heading--white em { color: #7fe8eb; }

/* ── Compact Page Header ─────────────────────────────────── */
.about-header {
  background: var(--teal-deep);
  padding: 72px var(--section-h) 56px;
  position: relative;
  overflow: hidden;
}
.about-header-bg {
  position: absolute;
  inset: 0;
  background: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2013/05/Toronto.jpg') center / cover no-repeat;
  opacity: 0.12;
}
.about-header::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,163,168,0.15) 0%, transparent 65%);
  pointer-events: none;
}
.about-header-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-header h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 600px;
}
.about-header h1 em {
  font-style: italic;
  color: #7fe8eb;
}
.about-header-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  font-weight: 300;
  max-width: 520px;
  margin-bottom: 44px;
}
.about-header .ta-hero-stats {
  max-width: 540px;
  margin-bottom: 0;
}

/* ── Our Story ───────────────────────────────────────────── */
.about-story-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 64px;
  align-items: start;
}
.about-story-prose p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 20px;
}
.about-story-prose p:last-child { margin-bottom: 0; }
.about-story-prose strong { color: var(--ink); font-weight: 600; }
.about-story-prose a {
  color: var(--teal);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.about-story-prose a:hover { border-bottom-color: var(--teal); }

/* Timeline sidebar */
.about-timeline {
  position: relative;
  padding-left: 32px;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--rule);
  border-radius: 1px;
}
.about-tl-item {
  position: relative;
  padding-bottom: 36px;
}
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-pale);
  border: 3px solid var(--teal);
}
.about-tl-year {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.about-tl-item p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}

/* ── Mission & Goals (dark section) ──────────────────────── */
.about-mission-section {
  background: var(--teal-deep);
  padding: var(--section-v) var(--section-h);
  position: relative;
  overflow: hidden;
}
.about-mission-bg {
  position: absolute;
  inset: 0;
  background: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2018/10/tesol-diploma-online.jpg') center / cover no-repeat;
  opacity: 0.12;
}
.about-mission-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,115,119,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.about-mission-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-mission-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: start;
}
.about-mission-lead {
  font-size: 18px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  font-weight: 300;
  max-width: 560px;
}
.about-mission-text {
  max-width: 780px;
}
.about-mission-text p {
  font-size: 15.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 28px;
}
.about-mission-text p:last-child { margin-bottom: 0; }
.about-mission-text p a {
  color: #7fe8eb;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.about-mission-text p a:hover { border-bottom-color: #7fe8eb; }
.about-mission-text .mission-label {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

/* ── Course Features ─────────────────────────────────────── */
.about-feat-prose p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  max-width: 860px;
}
.about-feat-prose a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.about-feat-prose a:hover { text-decoration: underline; }

.about-feat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--rule);
}
.about-feat-cell {
  padding: 32px 28px;
  background: var(--teal-xpale);
  border-right: 1.5px solid var(--rule);
  position: relative;
}
.about-feat-cell:last-child { border-right: none; }
.about-feat-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.about-feat-cell:nth-child(1)::before { background: linear-gradient(90deg, var(--teal), var(--teal-light)); }
.about-feat-cell:nth-child(2)::before { background: linear-gradient(90deg, #e8634a, #f09a5b); }
.about-feat-cell:nth-child(3)::before { background: linear-gradient(90deg, #d4a853, #e8c468); }
.about-feat-cell:nth-child(4)::before { background: linear-gradient(90deg, #5b8fd9, #7db4e8); }
.about-feat-cell svg {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
}
.about-feat-cell:nth-child(1) svg { color: var(--teal); }
.about-feat-cell:nth-child(2) svg { color: #e8634a; }
.about-feat-cell:nth-child(3) svg { color: #d4a853; }
.about-feat-cell:nth-child(4) svg { color: #5b8fd9; }
.about-feat-cell h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.about-feat-cell p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  font-weight: 300;
}

/* ── The OnTESOL Method ──────────────────────────────────── */
.about-method-lead {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
  max-width: 640px;
  margin-bottom: 48px;
}
.about-method-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.about-method-row + .about-method-row {
  border-top: none;
}
.about-m-card {
  padding: 40px 36px;
  border: 1.5px solid var(--rule);
  margin-left: -1.5px;
  margin-top: -1.5px;
  position: relative;
  background: var(--white);
  transition: background .2s;
}
.about-m-card:hover {
  background: var(--teal-xpale);
  z-index: 1;
}
.about-method-row:first-child .about-m-card:first-child { border-top-left-radius: 18px; }
.about-method-row:first-child .about-m-card:last-child { border-top-right-radius: 18px; }
.about-method-bottom .about-m-card { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.about-method-row:nth-child(2) .about-m-card:first-child { border-bottom-left-radius: 18px; }
.about-method-row:nth-child(2) .about-m-card:last-child { border-bottom-right-radius: 18px; }

.about-m-num {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--teal-pale);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  transition: color .2s;
}
.about-m-card:hover .about-m-num { color: var(--teal); opacity: 0.3; }
.about-m-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.about-m-card p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 300;
}

/* Fifth card — full width */
.about-method-bottom {
  display: grid;
  grid-template-columns: 1fr;
}
.about-method-bottom .about-m-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 36px;
  align-items: start;
}
.about-method-bottom .about-m-num {
  grid-row: 1 / 3;
  align-self: start;
  font-size: 56px;
}

/* ── Graduate Outcomes ───────────────────────────────────── */
.about-outcomes-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about-outcomes-text p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 300;
}
.about-outcomes-text a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.about-outcomes-text a:hover { text-decoration: underline; }

.about-outcomes-aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.about-outcomes-aside .about-link-list {
  list-style: none;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.about-link-list li {
  padding: 0;
  border-bottom: none;
}
.about-link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  padding: 10px 20px;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  transition: all .2s;
}
.about-link-list a:hover { background: var(--teal); color: #fff; }

/* ── About Us Responsive ─────────────────────────────────── */
@media (max-width: 1040px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-mission-intro { grid-template-columns: 1fr; gap: 16px; }
  .about-feat-strip { grid-template-columns: repeat(2, 1fr); }
  .about-feat-cell:nth-child(2) { border-right: none; }
  .about-feat-cell:nth-child(-n+2) { border-bottom: 1.5px solid var(--rule); }
  .about-method-row { grid-template-columns: 1fr; }
  .about-method-bottom .about-m-card { grid-template-columns: 1fr; gap: 0; }
  .about-method-bottom .about-m-num { grid-row: auto; }
  .about-method-row:first-child .about-m-card:first-child { border-radius: 18px 18px 0 0; }
  .about-method-row:first-child .about-m-card:last-child { border-radius: 0; }
  .about-method-row:nth-child(2) .about-m-card:first-child { border-radius: 0; }
  .about-method-row:nth-child(2) .about-m-card:last-child { border-radius: 0; }
  .about-method-bottom .about-m-card { border-radius: 0 0 18px 18px !important; }
}
@media (max-width: 640px) {
  .about-header { padding: 48px 24px 40px; }
  .about-feat-strip { grid-template-columns: 1fr; }
  .about-feat-cell { border-right: none !important; border-bottom: 1.5px solid var(--rule); }
  .about-feat-cell:last-child { border-bottom: none; }
  .about-mission-section { padding: 56px 24px; }
}

/* ============================================================
   CONTACT US PAGE
   ============================================================ */

/* ── Breadcrumb (scoped to .about-header compact page header) ─ */
.about-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}
.about-header .breadcrumb a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color .15s;
}
.about-header .breadcrumb a:hover { color: #7fe8eb; }
.about-header .breadcrumb [aria-current="page"] {
  color: rgba(255,255,255,0.8);
}
.about-header .breadcrumb span[aria-hidden="true"] {
  color: rgba(255,255,255,0.3);
}

/* ── Contact Grid (form + callback) ──────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Shared heading size inside contact cards */
.contact-card-heading {
  font-size: clamp(22px, 2vw, 28px) !important;
  margin-bottom: 12px;
}

/* ── Form Card ───────────────────────────────────────────── */
.contact-form-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  padding: 40px 36px;
}
.contact-form-card iframe {
  width: 100%;
  min-height: 560px;
  border: none;
  border-radius: 12px;
  background: var(--warm-white);
  margin-top: 24px;
  display: block;
}
.contact-intro {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}

/* ── Callback Card (dark teal accent) ────────────────────── */
.contact-callback-card {
  background: var(--teal-deep);
  border-radius: 18px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.contact-callback-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -150px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,163,168,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.contact-callback-card > * { position: relative; z-index: 1; }
.contact-callback-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 24px;
}
.contact-callback-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-callback-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  font-weight: 400;
}
.contact-callback-list svg {
  width: 18px;
  height: 18px;
  color: #7fe8eb;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Contact Info Grid ───────────────────────────────────── */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: start;
}

.contact-info-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-icon svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}
.contact-info-text h4 {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.contact-info-text p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
}
.contact-info-text a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.contact-info-text a:hover { text-decoration: underline; }

/* Map */
.contact-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--rule);
  box-shadow: 0 4px 18px rgba(0,0,0,0.04);
  background: var(--white);
}
.contact-map iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

/* ── Contact Us Responsive ───────────────────────────────── */
@media (max-width: 1040px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-info-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .contact-form-card,
  .contact-callback-card { padding: 32px 24px; }
  .contact-form-card iframe { min-height: 520px; }
  .contact-map iframe { min-height: 300px; }
}

/* ========================================================================
   TESL/TESOL PRACTICUM MODULE PAGE (template-tesl-practicum.php)
   Only practicum-specific components go here.
   Shared components (ta-hero, content-block, cb-grid, crs-live-visual,
   why-pillar, req-steps, auth-callout, dip-practicum-card family,
   cp-faq, ta-final-cta, ta-side-nav) are NOT redeclared — they live in
   their existing style.css sections.
   ======================================================================== */

/* ── Hero half-height override ────────────────────────────── */
.page-template-template-tesl-practicum .ta-hero { min-height: 58vh; }
.page-template-template-tesl-practicum .ta-hero-content { padding-bottom: 64px; }

/* ── Why-pillars modifier: 3-column grid (desktop) ────────── */
/* Existing .why-pillars is single-column; this modifier makes it 3-col
   for short card rows like "Who It's For" on the practicum page. */
.why-pillars--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ── dip-practicum-header tag + inline sub-label ─────────── */
/* Adds an "Option 1" / "Option 2" eyebrow badge above the h3
   inside the existing .dip-practicum-header. */
.dip-practicum-header-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7fe8eb;
	margin-bottom: 8px;
}
.dip-practicum-header-sub {
	opacity: .65;
	font-weight: 400;
	font-size: 16px;
}

/* ── Subheading + body-text helpers (practicum section runs) ─ */
.prac-subhead {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 16px;
	line-height: 1.3;
}
.prac-body-text {
	font-size: 15px;
	color: var(--body);
	line-height: 1.75;
	font-weight: 300;
	margin-bottom: 14px;
}
.prac-body-text:last-child { margin-bottom: 0; }
.prac-divided-block {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--rule);
}

/* ── Hour-tier cards (20-Hour / 50-Hour Practicum) ────────── */
.prac-tier-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 36px;
}
.prac-tier-card {
	background: var(--white);
	border: 1.5px solid var(--rule);
	border-radius: 16px;
	padding: 28px;
	transition: box-shadow .2s;
}
.prac-tier-card:hover { box-shadow: 0 10px 28px rgba(13,115,119,0.08); }
.prac-tier-tag {
	display: inline-block;
	background: var(--teal-pale);
	color: var(--teal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 12px;
}
.prac-tier-card h3 {
	font-family: 'Fraunces', serif;
	font-size: 22px;
	font-weight: 900;
	color: var(--ink);
	letter-spacing: -0.02em;
	margin-bottom: 6px;
	line-height: 1.2;
}
.prac-tier-card > p {
	font-size: 13.5px;
	color: var(--muted);
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 20px;
}
.prac-tier-card > p a { color: var(--teal); font-weight: 600; text-decoration: none; }
.prac-tier-card > p a:hover { text-decoration: underline; }
.prac-tier-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}
.prac-tier-split > div {
	background: var(--teal-xpale);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
}
.prac-tier-num {
	font-family: 'Fraunces', serif;
	font-size: 32px;
	font-weight: 900;
	color: var(--teal-deep);
	line-height: 1;
	letter-spacing: -0.03em;
	display: block;
	margin-bottom: 4px;
}
.prac-tier-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.4;
}

/* ── Pricing rows (Partner schools fee table) ─────────────── */
.prac-pricing {
	margin: 20px 0 16px;
	border: 1px solid var(--rule);
	border-radius: 12px;
	overflow: hidden;
}
.prac-pricing-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 20px;
	background: var(--teal-xpale);
}
.prac-pricing-row + .prac-pricing-row { border-top: 1px solid var(--rule); }
.prac-pricing-label {
	font-size: 13px;
	color: var(--body);
	font-weight: 500;
	line-height: 1.4;
}
.prac-pricing-label strong { color: var(--ink); font-weight: 700; }
.prac-pricing-value {
	font-family: 'Fraunces', serif;
	font-size: 16px;
	font-weight: 900;
	color: var(--teal);
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* ── Locations strip (sand pill with pin icon) ────────────── */
.prac-locations {
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--sand);
	border-radius: 10px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.prac-locations svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--teal);
	margin-top: 2px;
}
.prac-locations p {
	font-size: 13px;
	color: var(--body);
	line-height: 1.5;
	font-weight: 400;
}
.prac-locations p strong { color: var(--ink); font-weight: 700; }

/* ── 2-col options grid (Option 1 / Option 2 side-by-side) ── */
.prac-options-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
@media (min-width: 1100px) {
	.prac-options-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ── Dark teal fee-moderation callout ─────────────────────── */
.prac-fee-note {
	margin-top: 40px;
	background: var(--teal-deep);
	border-radius: 18px;
	padding: 32px 36px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	align-items: center;
}
.prac-fee-note-icon {
	width: 56px;
	height: 56px;
	background: rgba(127,232,235,0.15);
	border: 1px solid rgba(127,232,235,0.3);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.prac-fee-note-icon svg { width: 26px; height: 26px; color: #7fe8eb; }
.prac-fee-note h4 {
	font-family: 'Fraunces', serif;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.prac-fee-note p {
	font-size: 14px;
	color: rgba(255,255,255,0.75);
	line-height: 1.6;
	font-weight: 300;
}
.prac-fee-note p strong { color: #fff; font-weight: 600; }

/* ── "Read More" inline paragraph link ────────────────────── */
.prac-read-more {
	margin-top: 24px;
	font-size: 13.5px;
	color: var(--muted);
	font-weight: 400;
}
.prac-read-more strong { color: var(--ink); font-weight: 700; }
.prac-read-more a { color: var(--teal); font-weight: 600; text-decoration: none; }
.prac-read-more a:hover { text-decoration: underline; }

/* ── Practicum Page Responsive ────────────────────────────── */
@media (max-width: 1040px) {
	.why-pillars--cols-3 { grid-template-columns: 1fr; }
	.prac-tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.page-template-template-tesl-practicum .ta-hero-content { padding-bottom: 48px; }
	.prac-tier-split { grid-template-columns: 1fr; }
	.prac-fee-note {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 28px 24px;
	}
	.prac-fee-note-icon { margin: 0 auto; }
}

/* ============================================================
   COUNTRY PAGE — CERTIFICATION REVIEW (single inline testimonial)
   Used below the cp-cert-inner grid to show a graduate quote.
   ============================================================ */

.cp-cert-review-wrap {
  max-width: var(--wrap-max);
  margin: 36px auto 0;
  padding: 0 var(--section-h);
}
.cp-cert-review {
  background: var(--teal-deep);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cp-cert-review-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(20,163,168,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cp-cert-review-quote {
  position: relative;
  z-index: 1;
}
.cp-cert-review-quote p {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
  margin: 0;
}
.cp-cert-review-quote p::first-letter {
  /* the opening " is part of content, no extra styling needed */
}
.cp-cert-review-author {
  position: relative;
  z-index: 1;
  text-align: right;
  flex-shrink: 0;
}
.cp-cert-review-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.cp-cert-review-detail {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
}
.cp-cert-review-stars {
  color: #f59e0b;
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: .5px;
}

@media (max-width: 768px) {
  .cp-cert-review {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .cp-cert-review-author {
    text-align: left;
  }
}

/* ============================================================
   COUNTRY PAGE — SCHOOL TYPE ACCORDION CARDS
   Used on China page for job type breakdowns (language schools,
   public schools, international schools, universities).
   Accordion open/close handled by page.min.js.
   ============================================================ */

.school-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.school-card { background: var(--white); border: 1.5px solid var(--rule); border-radius: 16px; overflow: hidden; }
.school-card-header { padding: 20px 24px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.school-card-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.school-card-toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--teal); transition: transform .3s; }
.school-card-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.school-card.open .school-card-toggle { transform: rotate(180deg); }
.school-card-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(0.4,0,0.2,1); }
.school-card.open .school-card-body { max-height: 2000px; }
.school-card-body-inner { padding: 0 24px 24px; }
.school-card-body-inner p { font-size: 14px; color: var(--body); line-height: 1.7; font-weight: 300; margin-bottom: 12px; }
.school-card-body-inner p:last-child { margin-bottom: 0; }
.school-card-body-inner a { color: var(--teal); font-weight: 600; text-decoration: none; }
.school-card-body-inner a:hover { text-decoration: underline; }
.school-card-salary { font-size: 13px; font-weight: 600; color: var(--teal-dark); margin-top: 8px; }

/* ========================================================================
   HONG KONG COUNTRY PAGE (template-country-hong-kong.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-layout, cp-body, cp-sidebar, toc-box, salary-table,
   school-card, cp-cert, cert-card, cp-cert-review, cp-jobs-strip,
   cp-articles, cp-faq, ta-final-cta, final-trust, eyebrow,
   section-heading, breadcrumb, inline-link, btn-primary, btn-ghost-sm,
   btn-teal, btn-white, btn-ghost-light) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-hong-kong,
#salary,
#school-types,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-hong-kong,
#salary,
#school-types,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── Hong Kong responsive — page-specific only ───────────── */
@media (max-width: 1040px) {
  .cp-articles-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   SPAIN COUNTRY PAGE (template-country-spain.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-layout, cp-body, cp-sidebar, toc-box, salary-table,
   school-card, cp-cert, cert-card, cp-cert-review, cert-specialists,
   cp-jobs-strip, cp-articles, cp-faq, ta-final-cta, final-trust, eyebrow,
   section-heading, breadcrumb, inline-link, btn-primary, btn-ghost-sm,
   btn-teal, btn-white, btn-ghost-light) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-spain,
#job-market,
#salary,
#finding-jobs,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── Requirements grid: 3-column override (Spain has 3 cards) ── */
.cp-req-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Interview callout ───────────────────────────────────── */
.interview-callout {
  background: var(--sand);
  border-radius: 14px;
  padding: 24px 28px;
  margin-top: 24px;
  border-left: 4px solid var(--amber);
}
.interview-callout h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.interview-callout p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 0;
}

/* ── City cards: stacked horizontal layout (Spain) ───────── */
.cities-grid--stacked {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cities-grid--stacked .city-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 18px;
}
.cities-grid--stacked .city-img {
  width: 280px;
  min-height: 180px;
  height: auto;
  flex-shrink: 0;
}
.cities-grid--stacked .city-body {
  padding: 22px 24px;
}
.cities-grid--stacked .city-name {
  font-size: 20px;
}
.cities-grid--stacked .city-desc {
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── Spain responsive — page-specific only ───────────────── */
@media (max-width: 1040px) {
  .cp-req-grid--3 {
    grid-template-columns: 1fr;
  }
  .cities-grid--stacked .city-card {
    flex-direction: column;
  }
  .cities-grid--stacked .city-img {
    width: 100%;
    min-height: 160px;
  }
}

/* ========================================================================
   THAILAND COUNTRY PAGE (template-country-thailand.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-layout, cp-body, cp-sidebar, toc-box, salary-table,
   school-card, cp-cert, cert-card, cp-cert-review, cp-jobs-strip,
   cp-articles, cp-faq, ta-final-cta, final-trust, eyebrow,
   section-heading, breadcrumb, inline-link, btn-primary, btn-ghost-sm,
   btn-teal, btn-white, btn-ghost-light) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-thailand,
#salary,
#finding-jobs,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }


/* ============================================================
   COUNTRY PAGE — RECOMMENDED CERTIFICATION LINK STYLING
   Applies to every country page's cp-cert section.
   Replaces the inline style="color:var(--teal-dark);font-weight:600;"
   that older templates use on each <a> tag.
   ============================================================ */

.cp-cert-inner p a {
  color: var(--teal-dark);
  font-weight: 600;
}
.cp-cert-inner p a:hover {
  color: var(--teal);
  text-decoration: underline;
}


/* ========================================================================
   VIETNAM COUNTRY PAGE (template-country-vietnam.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-layout, cp-body, cp-sidebar, toc-box, salary-table,
   savings-callout, school-card, apply-grid, employer-card, cities-grid,
   city-card, cp-cert, cert-card, cp-jobs-strip, cp-articles, cp-faq,
   ta-final-cta, final-trust, eyebrow, section-heading, breadcrumb,
   inline-link, btn-primary, btn-ghost-sm, btn-teal) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-vietnam,
#job-market,
#salary,
#job-types,
#challenges,
#how-ontesol-prepares,
#how-to-apply,
#featured-employers,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ========================================================================
   GERMANY COUNTRY PAGE (template-country-germany.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid--3, cp-layout, cp-body, cp-sidebar,
   toc-box, salary-table, school-card, auth-callout, cities-grid,
   cities-grid--stacked, city-card, cp-cert, cert-card, cp-jobs-strip,
   cp-articles, cp-faq, ta-final-cta, final-trust, eyebrow,
   section-heading, breadcrumb, btn-primary, btn-ghost-sm) are NOT
   redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-germany,
#job-market,
#salary,
#visa-paths,
#how-to-apply,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ========================================================================
   TURKEY COUNTRY PAGE (template-country-turkey.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid--3, cp-layout, cp-body, cp-sidebar,
   toc-box, salary-table, school-card, auth-callout, cities-grid,
   cities-grid--stacked, city-card, cp-cert, cert-card, cp-cert-review,
   cp-jobs-strip, cp-articles, cp-faq, ta-final-cta, final-trust,
   eyebrow, section-heading, breadcrumb, inline-link, btn-primary,
   btn-ghost-sm) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-turkey,
#job-market,
#salary,
#how-to-apply,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ========================================================================
   UAE COUNTRY PAGE (template-country-uae.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid [4-col default], cp-layout, cp-body,
   cp-sidebar, toc-box, salary-table, school-card, auth-callout,
   cities-grid, cities-grid--stacked, city-card, cp-cert, cert-card,
   cp-cert-review, cp-jobs-strip, cp-articles, cp-faq, ta-final-cta,
   final-trust, eyebrow, section-heading, breadcrumb, inline-link,
   btn-primary, btn-ghost-sm) are NOT redeclared.
   ======================================================================== */

/* ── School card badge variant (new) ─────────────────────
   Amber-on-tan badge used on the UAE page to flag ADVETI
   as the most lucrative employer tier. Complements the
   existing .badge-popular (teal) and .badge-flexible (green)
   badges already in style.css. */
.school-card-badge.badge-premium { background: #fde8d0; color: #9a5514; }

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-uae,
#job-market,
#salary,
#how-to-apply,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ========================================================================
   TESTIMONIALS PAGE (template-testimonials.php)
   Shared components (hub-hero, ta-section, ta-wrap, section-intro,
   eyebrow, section-heading, section-lead, breadcrumb, story-card,
   stories-grid, story-img, story-tag, reviews-section, reviews-bg,
   reviews-overlay, reviews-inner, reviews-eyebrow, reviews-header,
   reviews-heading, reviews-lead, reviews-aggregate, reviews-score,
   reviews-score-detail, reviews-stars, reviews-count, reviews-grid,
   review-card, review-top, review-stars, review-source, review-quote,
   review-author, review-name, review-detail, reviews-footer,
   review-platform-link, ta-final-cta, final-btns, final-trust,
   eyebrow-white, all shared buttons) are NOT redeclared.
   ======================================================================== */


/* ── Masonry overrides for the two card grids on this page ───── */

.page-template-template-testimonials .stories-grid,
.page-template-template-testimonials .reviews-grid {
  display: block;
  columns: 3;
  column-gap: 20px;
  grid-template-columns: none;
}
.page-template-template-testimonials .stories-grid > .story-card,
.page-template-template-testimonials .reviews-grid > .review-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
}


/* ── External platform score cards (4-col trust bar) ─────────── */

.tst-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tst-platform {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .25s, transform .2s;
  position: relative;
}
.tst-platform:hover {
  border-color: rgba(13,115,119,0.28);
  box-shadow: 0 12px 32px rgba(13,115,119,0.08);
  transform: translateY(-2px);
  color: inherit;
}
.tst-platform-score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.tst-platform-score {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.tst-platform-score-denom {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.tst-platform-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
}
/* Partial-star rating (TEFL Course Review — 4.6/5 = 92%) */
.tst-platform:nth-child(3) .tst-platform-stars {
  background: linear-gradient(90deg, #f59e0b 92%, rgba(13,115,119,0.18) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tst-platform-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.tst-platform-count {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 14px;
}
.tst-platform-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
  transition: gap .18s;
}
.tst-platform:hover .tst-platform-cta { gap: 9px; }


/* ── Story-card modifier for testimonials (extended quote layout) ─ */

.story-card--testimonial .story-body { padding: 28px; gap: 0; }
.story-card--testimonial h4 {
  font-size: 19px;
  margin-bottom: 14px;
  line-height: 1.25;
}
.story-card--testimonial .tst-quote {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 300;
  font-style: italic;
  margin: 0 0 14px;
}
.story-card--testimonial .tst-quote:first-of-type::before {
  content: '\201C';
  color: var(--teal);
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 900;
  font-style: normal;
  margin-right: 2px;
  line-height: 0;
  vertical-align: -4px;
}
.story-card--testimonial .tst-quote + .tst-quote { margin-top: -4px; }

.tst-author {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tst-author-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.tst-author-meta {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
}
.tst-read-more {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: gap .18s;
  align-self: flex-start;
}
.tst-read-more:hover { gap: 9px; text-decoration: none; }


/* ── Continuation-paragraph spacing inside .review-card ──────── */

.review-quote--cont { margin-top: -12px; }
.review-quote + .review-quote::before { display: none; }


/* ── Testimonials page responsive ────────────────────────────── */

@media (max-width: 1040px) {
  .tst-platforms { grid-template-columns: 1fr 1fr; }
  .page-template-template-testimonials .stories-grid,
  .page-template-template-testimonials .reviews-grid {
    columns: 2;
  }
}
@media (max-width: 640px) {
  .tst-platforms { grid-template-columns: 1fr; }
  .tst-platform { padding: 22px; }
  .page-template-template-testimonials .stories-grid,
  .page-template-template-testimonials .reviews-grid {
    columns: 1;
  }
  .story-card--testimonial .story-body { padding: 24px; }
  .story-card--testimonial h4 { font-size: 18px; }
}

/* ========================================================================
   SOUTH KOREA — HAGWON PAGE (template-sk-hagwon.php)
   Subtype page under the South Korea country guide.

   Reuses (NOT redeclared):
   - post-hero, post-hero-bg, post-hero-content, post-hero-inner
   - post-sidebar, post-sb-back, post-sb-country-link, post-sb-country-bg,
     post-sb-country-shade, post-sb-country-inner, post-sb-country-label,
     post-sb-country-name, post-sb-country-arrow, post-sb-cta,
     post-sb-cta-eyebrow
   - cp-layout, cp-body (SEE NOTE below)
   - cp-jobs-strip, cp-jobs-strip-inner, cp-jobs-strip-text,
     cp-jobs-strip-ctas
   - breadcrumb, btn-primary, btn-ghost-sm, btn-teal
   ======================================================================== */

/* ── Column ordering fix ────────────────────────────────────
   The Hagwon page uses cp-layout with post-sidebar (mixing the
   country-page grid with the blog-post sidebar component).
   style.css's base rule only defines order for cp-sidebar, so
   post-sidebar falls back to order:0 and renders on the left.
   Force it into the second column here. */
.cp-layout .post-sidebar { order: 2; }

/* ── Post hero — page-title variant ─────────────────────────
   The post-hero component is already in style.css and sized for blog
   articles. For this subtype page we want a slightly different presence:
   H1 at page-heading scale, an optional lede paragraph, and a subtly
   shorter min-height. */
.post-hero h1 em {
  font-style: italic;
  color: #7fe8eb;
}
.post-hero-lede {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  font-weight: 300;
  line-height: 1.65;
  max-width: 720px;
  margin-top: 4px;
}
.post-hero-lede a {
  color: #7fe8eb;
  text-decoration: none;
  font-weight: 500;
}
.post-hero-lede a:hover { text-decoration: underline; }

/* ── cp-body heading styles — NOTE ────────────────────────────
   Country pages use cp-body within their own cp-layout. The existing
   .cp-body definition in style.css does NOT style h2/h3 (country pages
   use .section-heading explicitly). For this subtype page we write
   prose-style H2/H3 directly inside cp-body, so we add heading rules
   scoped to cp-body. These are additive — they do not affect country
   pages because country pages don't put bare h2/h3 elements inside
   cp-body (they use section-heading classes instead). */
.cp-body > h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 40px;
  margin-bottom: 16px;
}
.cp-body > h2:first-child { margin-top: 0; }
.cp-body > h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 28px;
  margin-bottom: 10px;
}

/* ── Hagwon list — featured hagwon cards ────────────────────── */
.hagwon-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 28px;
}
.hagwon-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 20px 24px;
}
.hagwon-card-title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hagwon-card-title .hagwon-num {
  background: var(--teal);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.hagwon-card p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 10px;
}
.hagwon-card p:last-child { margin-bottom: 0; }
.hagwon-card .hagwon-rating {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  font-weight: 300;
  margin-top: 4px;
}

/* ── Cert mini callout — inline cert recommendation ────────── */
.cert-mini {
  background: var(--sand);
  border-radius: 16px;
  padding: 28px;
  margin: 32px 0;
}
.cert-mini h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  margin-top: 0;
}
.cert-mini p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 12px;
}
.cert-mini p:last-of-type { margin-bottom: 16px; }
.cert-mini-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cert-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.cert-mini-badge::before {
  content: '\2713';
  color: var(--teal);
  font-weight: 700;
}

/* ── Numbered reasons grid ──────────────────────────────────── */
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.reason-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
}
.reason-num {
  background: var(--teal-pale);
  color: var(--teal-dark);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
}
.reason-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.reason-body {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
}
.reason-body strong { font-weight: 600; color: var(--ink); }

/* ── Hagwon page responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .reason-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========================================================================
   CANADA COUNTRY PAGE (template-country-canada.php)
   Career-guide lens (pay, cities, hiring). Complements:
   - /tesl-canada/                                  → credential
   - /tesol-certification/tesol-certification-canada/ → course products

   Reuses (NOT redeclared):
   - cp-hero, cp-stats, cp-requirements, cp-req-grid--3, cp-layout,
     cp-body, cp-sidebar, toc-box, toc-cta-box, salary-table,
     cities-grid, cities-grid--stacked, city-card, cp-jobs-strip,
     cp-articles, cp-faq, ta-final-cta, final-trust, breadcrumb,
     eyebrow, section-heading, inline-link, btn-primary, btn-ghost-sm
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-canada,
#job-opportunities,
#pay,
#hiring,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── Pay section cross-link paragraph ────────────────────── */
.pay-crosslink {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 400;
  margin-top: 16px;
}
.pay-crosslink strong { color: var(--ink); font-weight: 600; }

/* ── Requirements-strip inline "Read more" link color ────── */
.cp-req-note-link {
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: none;
}
.cp-req-note-link:hover {
  color: var(--teal);
  text-decoration: underline;
}

/* ── Certification referral (new component) ──────────────────
   Two-card hand-off between this page and (a) the TESL Canada
   credential explainer page, (b) the TESOL Certification Canada
   course conversion page. Written as a generic pattern so it can
   be reused on other pages that need a credential-vs-course split. */
.cp-cert-referral {
  background: var(--sand);
  padding: var(--section-v) var(--section-h);
}
.cp-cert-referral-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.cp-cert-referral-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.cp-cert-referral-intro h2 {
  font-size: clamp(24px, 2.8vw, 38px);
  margin-bottom: 14px;
}
.cp-cert-referral-intro p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  font-weight: 400;
}

.cp-cert-referral-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cp-cert-referral-card {
  display: block;
  border-radius: 16px;
  padding: 28px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.cp-cert-referral-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(5, 46, 48, 0.12);
}

.cp-cert-referral-card--light {
  background: #fff;
  border: 1.5px solid var(--rule);
}
.cp-cert-referral-card--light .cp-cert-referral-label { color: var(--teal); }
.cp-cert-referral-card--light .cp-cert-referral-title { color: var(--ink); }
.cp-cert-referral-card--light p { color: var(--muted); }
.cp-cert-referral-card--light .cp-cert-referral-arrow { color: var(--teal); }

.cp-cert-referral-card--dark {
  background: var(--teal-deep);
  position: relative;
  overflow: hidden;
}
.cp-cert-referral-card--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(20,163,168,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cp-cert-referral-card--dark > * {
  position: relative;
  z-index: 1;
}
.cp-cert-referral-card--dark .cp-cert-referral-label { color: #7fe8eb; }
.cp-cert-referral-card--dark .cp-cert-referral-title { color: #fff; }
.cp-cert-referral-card--dark p { color: rgba(255,255,255,0.55); }
.cp-cert-referral-card--dark .cp-cert-referral-arrow { color: #7fe8eb; }

.cp-cert-referral-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
  font-family: 'Sora', sans-serif;
}
.cp-cert-referral-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.cp-cert-referral-card p {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 14px;
}
.cp-cert-referral-arrow {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
}

@media (max-width: 1040px) {
  .cp-cert-referral-cards { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   US PAGE — NEW COMPONENTS (append the rules below to style.css)
   ════════════════════════════════════════════════════════════ */

/* ── Bold emphasis inside hero lede ───────────────────────────
   The cp-hero-sub paragraph is set in muted rgba white. <strong>
   tags inside need to brighten to white so emphasis is visible. */
.cp-hero-sub strong {
  color: #fff;
  font-weight: 600;
}

/* ── Trust strip — accreditation badges row ──────────────────
   Sits between cp-stats and cp-layout. Reusable on any page
   that wants to surface accreditation/recognition signals. */
.trust-strip {
  background: var(--warm-white);
  padding: 28px var(--section-h);
  border-bottom: 1px solid var(--rule);
}
.trust-strip-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex-shrink: 0;
}
.trust-item strong {
  color: var(--ink);
  font-weight: 700;
}
.trust-divider {
  width: 1px;
  height: 20px;
  background: var(--rule);
}

/* ── Persona grid — "Who is this for" 2x2 card layout ────── */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.persona-card {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.persona-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal-pale);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.persona-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.persona-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1.25;
}
.persona-body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}

/* ── Job paths — numbered job-type list ──────────────────── */
.job-paths {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.job-path {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 26px;
}
.job-path-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.job-path-num {
  background: var(--teal);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.job-path-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.job-path p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 0;
}
.job-path strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── CEU callout — informational accent box ────────────────
   Used here for the "K-12 licensed teachers earn CEUs" box.
   Reusable for any contextual callout that needs an icon +
   title + paragraph in a teal-tinted container. */
.ceu-callout {
  background: var(--teal-xpale);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
}
.ceu-callout-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ceu-callout-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}
.ceu-callout-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ceu-callout p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 0;
}
.ceu-callout a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.ceu-callout a:hover {
  text-decoration: underline;
}

/* ── Us-tips list — for "How to Apply" lead-with-strong list ── */
.us-tips {
  padding-left: 22px;
  margin: 12px 0 20px;
}
.us-tips li {
  font-size: 15px;
  color: var(--body);
  line-height: 1.8;
  margin-bottom: 10px;
}
.us-tips li strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Scroll-margin for TOC targets ───────────────────────── */
#who-for,
#requirements,
#pay,
#job-types,
#how-to-apply,
#certification,
#jobs,
#faq {
  scroll-margin-top: 80px;
}

/* ── US Page Responsive ──────────────────────────────────── */
@media (max-width: 1040px) {
  .persona-grid { grid-template-columns: 1fr; }
  .trust-strip-inner { gap: 24px; }
  .trust-divider { display: none; }
}
@media (max-width: 640px) {
  .ceu-callout { grid-template-columns: 1fr; gap: 14px; }
}

/* ========================================================================
   HOME PAGE (template-home.php)
   Page-specific overrides only. Shared components NOT redeclared:
   .hub-hero, .hub-hero-inner, .hub-hero-tagline, .hub-hero-sub,
   .hub-hero-ctas, .ta-section, .ta-wrap, .bg-sand, .bg-warm-white,
   .eyebrow, .eyebrow-white, .display-heading, .section-heading,
   .btn-primary-lg, .btn-ghost-lg, .btn-teal, .btn-outline,
   .cb-grid, .cb-grid--center, .cb-text, .cb-text h3, .cb-text p,
   .path-card, .path-card-bg, .path-card-shade, .path-card-inner,
   .paths-grid, .reviews-section, .reviews-bg, .reviews-overlay,
   .reviews-inner, .reviews-eyebrow, .reviews-header, .reviews-heading,
   .reviews-lead, .reviews-aggregate, .reviews-score, .reviews-stars,
   .reviews-count, .reviews-grid, .review-card, .review-top,
   .review-stars, .review-quote, .review-author, .review-name,
   .review-detail, .reviews-footer, .review-platform-link,
   .final-cta, .final-cta-bg, .final-cta-overlay, .final-trust.

   Home introduces these NEW components:
   .home-hero modifier (hero override), .home-hero-rating, .home-hero-trust*,
   .home-stats-strip, .home-stat*, .home-proof-bar, .home-proof-item,
   .discover-section, .discover-credential-line, .discover-header,
   .paths-grid--home, .path-card--hero, .path-card-cta-*, .paths-grid-right,
   .guide-row*, .tesl-bullets, .tesl-cta-row, .tesl-cred-stack,
   .tesl-cred-card, .tesl-cred-bg, .tesl-cred-shade, .tesl-cred-body,
   .tesl-cred-logo, .tesl-cred-name, .tesl-cred-desc,
   .courses-section, .courses-decoration*, .courses-header,
   .courses-teaser-grid, .course-teaser*, .courses-specialists*,
   .courses-compare-cta, .reviews-score-denom (review aggregate /5),
   .brochure-section, .brochure-inner, .brochure-header,
   .brochure-iframe-wrap, .home-final-cta*.
   ======================================================================== */


/* ── Hero overrides (scoped under .home-hero) ──────────────── */

.home-hero {
  padding: 100px 52px 80px;
  position: relative;
  overflow: hidden;
}
/* ::before now only neutralizes the inherited .hub-hero::before
   600x600 cyan circle. The hero photo moved to a real
   <img.home-hero-img> so the browser can discover it in the initial
   HTML and apply fetchpriority="high" (LCP fix). */
.home-hero::before {
  content: '';
  position: absolute; inset: 0;
  width: auto; height: auto; border-radius: 0;
  background: none;
}

/* Hero LCP photo — replaces the old ::before background-image.
   Paints below .home-hero::after (the ::after pseudo stacks above
   this real child) and below .hub-hero-inner (z-index:2). Mirrors
   the .cp-hero-img / .post-hero-img LCP pattern. */
.home-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.40;
  filter: saturate(0.85);
  display: block;
}
.home-hero::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(20,163,168,0.28) 0%, transparent 60%),
    linear-gradient(108deg, rgba(5,46,48,0.93) 0%, rgba(5,46,48,0.78) 48%, rgba(5,46,48,0.32) 100%),
    linear-gradient(to top, rgba(5,46,48,0.6) 0%, transparent 50%);
}
.home-hero .hub-hero-inner { position: relative; z-index: 2; }

/* Animation — staggered fade-up on hero content */
@keyframes home-hero-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.home-hero .hub-hero-inner > * { animation: home-hero-fade-up 0.6s ease both; }
.home-hero .hub-hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.home-hero .hub-hero-inner > *:nth-child(2) { animation-delay: 0.15s; }
.home-hero .hub-hero-inner > *:nth-child(3) { animation-delay: 0.25s; }
.home-hero .hub-hero-inner > *:nth-child(4) { animation-delay: 0.35s; }
.home-hero .hub-hero-inner > *:nth-child(5) { animation-delay: 0.45s; }
.home-hero .hub-hero-inner > *:nth-child(6) { animation-delay: 0.55s; }

/* H1 — three-line treatment with mixed weight + italic-cyan accent */
.home-hero h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  max-width: 920px;
}
.home-hero h1 strong { color: #fff; font-weight: 900; }
.home-hero h1 em { font-style: italic; color: #7fe8eb; font-weight: 900; }
.home-hero h1 .h1-light { font-weight: 400; color: #fff; }
.home-hero h1 .h1-em-white { color: #fff; }

/* Tagline — italic Fraunces in cyan, replaces default sans tagline */
.home-hero .hub-hero-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  color: #7fe8eb;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  max-width: 720px;
}

.home-hero .hub-hero-sub {
  font-size: 17px;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 36px;
}

.home-hero .hub-hero-ctas {
  margin-bottom: 20px;
}


/* ── Hero rating — golden stars + aggregate ─────────────── */

.home-hero-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.home-hero-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #f5b945;
}
.home-hero-rating-stars svg {
  width: 16px;
  height: 16px;
}
.home-hero-rating-text {
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.home-hero-rating-text strong {
  color: #fff;
  font-weight: 700;
}


/* ── Hero trust — inline horizontal logos+caption row ────── */
/* Note: distinct from the 3-column .hub-hero-trust used on
   tefl-tesol-certification hub. Class names prefixed home-* so
   the two patterns coexist without conflict. */

.home-hero-trust {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.home-hero-trust-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: rgba(255,255,255,0.5);
  margin-right: 6px;
}
.home-hero-trust-logos {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.home-hero-trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.home-hero-trust-caption {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.home-hero-trust-logo {
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.home-hero-trust-logo--tesl { height: 52px; }
.home-hero-trust-logo--accet { height: 38px; }


/* ── Stats strip — 3-column dark teal credibility row ────── */

.home-stats-strip {
  background: var(--teal-deep);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.home-stats-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.home-stat {
  padding: 32px 24px;
  border-right: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}
.home-stat:last-child { border-right: none; }
.home-stat-num {
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.home-stat-num em {
  font-style: normal;
  color: #7fe8eb;
}
.home-stat-label {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  margin-top: 7px;
  line-height: 1.4;
}


/* ── Proof bar — sand inline credentials row ─────────────── */

.home-proof-bar {
  background: var(--sand);
  border-bottom: 1px solid rgba(13,115,119,0.06);
}
.home-proof-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 26px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}
.home-proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  color: var(--body);
  font-weight: 400;
}
.home-proof-item svg {
  width: 19px; height: 19px;
  flex-shrink: 0;
  color: var(--teal);
}
.home-proof-item strong {
  font-weight: 700;
  color: var(--ink);
}


/* ── Discover section — header (centered) + credential line ─ */

.discover-section {
  background: var(--warm-white);
  position: relative;
  overflow: hidden;
}
.discover-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--sand) 0%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.discover-section::after {
  content: '';
  position: absolute;
  top: 200px; right: -200px;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127,232,235,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.discover-section .ta-wrap { position: relative; z-index: 1; }

.discover-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.discover-header .eyebrow { justify-content: center; }
.discover-header > p {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 28px;
}

.discover-credential-line {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.discover-credential-logos {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.discover-credential-logos img {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}
.discover-credential-logos img.cred-logo-accet { height: 26px; }
.discover-credential-divider {
  width: 1px;
  height: 22px;
  background: var(--rule);
}
.discover-credential-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
  max-width: 640px;
  font-weight: 400;
}
.discover-credential-text a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.discover-credential-text a:hover { text-decoration: underline; }


/* ── Paths grid (home variant) — 1.5fr left + 1fr right ──── */
/* Note: overrides the system .paths-grid (3-col) for home only.
   Right column stretches to match the hero's natural height. */

.paths-grid--home {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.paths-grid--home .path-card--hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 660px;
}
.paths-grid--home .path-card--hero .path-card-inner {
  width: 100%;
  padding: 48px 46px;
}
.paths-grid--home .path-card--hero .path-card-inner h3 {
  font-size: clamp(30px, 2.8vw, 40px);
  margin-bottom: 14px;
}
.paths-grid--home .path-card--hero .path-card-inner p {
  max-width: 480px;
  margin-bottom: 22px;
}

/* Right column — its own 2-row sub-grid that stretches to fill
   the parent grid cell (so cards match the hero's height). */
.paths-grid-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  height: 100%;
}
.paths-grid-right .path-card {
  height: 100%;
  min-height: 0;
}
.paths-grid-right .path-card .path-card-inner {
  min-height: 0;
}

/* Path card overrides — heavier shade gradient + readable body text.
   These touch the shared .path-card markup, so scoping under
   .discover-section keeps changes off other pages that use
   .path-card (TESOL Jobs, etc). */
.discover-section .path-card-shade {
  background: linear-gradient(to top,
    rgba(5,46,48,0.97) 0%,
    rgba(5,46,48,0.88) 30%,
    rgba(5,46,48,0.55) 60%,
    rgba(5,46,48,0.15) 100%);
}
.discover-section .path-card-inner p {
  font-family: 'Sora', sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Hero card multi-CTA pattern — primary button + chip-style country links */
.path-card--hero .path-card-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.path-card-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-light);
  color: #fff;
  padding: 13px 22px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1;
}
.path-card-cta-primary:hover {
  background: #16bec3;
  transform: translateY(-1px);
  color: #fff;
}
.path-card-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  padding: 11px 18px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.18);
}
.path-card-cta-chip:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
.path-card-cta-chip-flag {
  font-size: 14px;
  line-height: 1;
}


/* ── Guide row — full-width image-card link below paths ──── */

.guide-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s;
}
.guide-row:hover {
  box-shadow: 0 14px 40px rgba(13,115,119,0.1);
  transform: translateY(-2px);
}
.guide-row-img {
  background-size: cover;
  background-position: center;
  min-height: 180px;
}
.guide-row-text {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.guide-row-label {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--teal);
}
.guide-row-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 4px;
}
.guide-row-title em {
  font-style: italic;
  color: var(--teal);
}
.guide-row-desc {
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
  margin-top: 8px;
}
.guide-row-arrow {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.18s;
}
.guide-row:hover .guide-row-arrow { gap: 12px; }


/* ── TESL Canada section — bullet list + credential cards ── */

.tesl-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 32px;
}
.tesl-bullets li {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: 'Sora', sans-serif;
  font-size: 15px; color: var(--body); line-height: 1.55;
}
.tesl-bullets li svg {
  width: 18px; height: 18px; color: var(--teal);
  flex-shrink: 0; margin-top: 1px;
}
.tesl-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* TESL credential image cards on the right */
.tesl-cred-stack { display: flex; flex-direction: column; gap: 18px; }
.tesl-cred-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 200px;
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease;
}
.tesl-cred-card:hover { transform: translateY(-3px); }
.tesl-cred-card:hover .tesl-cred-bg { transform: scale(1.05); }
.tesl-cred-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s ease;
}
.tesl-cred-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,46,48,0.95) 0%, rgba(5,46,48,0.55) 50%, rgba(5,46,48,0.20) 100%);
}
.tesl-cred-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 24px;
  z-index: 1;
}
.tesl-cred-logo { margin-bottom: 14px; }
.tesl-cred-logo img {
  height: 52px; width: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.95;
}
.tesl-cred-logo--accet img { height: 38px; }
.tesl-cred-name {
  font-family: 'Sora', sans-serif;
  font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: #7fe8eb; margin-bottom: 7px;
}
.tesl-cred-desc {
  font-family: 'Sora', sans-serif;
  font-size: 14.5px; color: rgba(255,255,255,0.9);
  line-height: 1.5; font-weight: 400;
}


/* ── Courses teaser — 2-card teaser routing to the hub ───── */

.courses-section {
  background: var(--warm-white);
  position: relative;
  overflow: hidden;
}
.courses-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--sand) 0%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.courses-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 30%, rgba(200,121,42,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(127,232,235,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.courses-section .ta-wrap { position: relative; z-index: 1; }

/* Decorative geometry — hidden on tablet/mobile (conflicts with stacked cards) */
.courses-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.courses-decoration-circle {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
}
.courses-decoration-circle--lg {
  width: 220px; height: 220px;
  top: 80px; left: 4%;
  border-color: rgba(13,115,119,0.18);
}
.courses-decoration-circle--md {
  width: 140px; height: 140px;
  bottom: 100px; right: 6%;
  border-color: rgba(200,121,42,0.20);
}
.courses-decoration-circle--sm {
  width: 90px; height: 90px;
  top: 50%; right: 14%;
  border-color: rgba(127,232,235,0.28);
}
.courses-decoration-circle--dot {
  width: 14px; height: 14px;
  top: 24%; right: 22%;
  background: rgba(200,121,42,0.35);
  border: none;
}
.courses-decoration-circle--filled {
  width: 22px; height: 22px;
  bottom: 30%; left: 12%;
  background: rgba(13,115,119,0.22);
  border: none;
}
.courses-decoration-line {
  position: absolute;
  width: 180px;
  height: 1px;
  background: rgba(13,115,119,0.18);
  top: 38%; left: 8%;
  transform: rotate(-18deg);
  transform-origin: left center;
}

.courses-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  position: relative;
}
.courses-header::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--teal);
  margin: 0 auto 22px;
  opacity: 0.45;
}
.courses-header > p {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
  margin-top: 14px;
}

.courses-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.course-teaser {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.course-teaser:hover {
  transform: translateY(-4px);
}
.course-teaser--featured {
  background: var(--teal-deep);
  color: rgba(255,255,255,0.95);
}
.course-teaser--featured:hover {
  box-shadow: 0 18px 48px rgba(5,46,48,0.25);
}
.course-teaser--light {
  background: #fff;
  border: 1.5px solid var(--rule);
  color: var(--body);
}
.course-teaser--light:hover {
  border-color: var(--teal);
  box-shadow: 0 14px 40px rgba(13,115,119,0.1);
}

.course-teaser-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.course-teaser-hours {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.course-teaser--featured .course-teaser-hours { color: #fff; }
.course-teaser--light .course-teaser-hours { color: var(--ink); }
.course-teaser-popular {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  background: #7fe8eb;
  color: var(--teal-deep);
  padding: 5px 11px;
  border-radius: 6px;
  margin-left: auto;
}
.course-teaser h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 10px;
  text-wrap: balance;
}
.course-teaser--featured h3 { color: #fff; }
.course-teaser--light h3 { color: var(--ink); }
.course-teaser-audience {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.course-teaser--featured .course-teaser-audience { color: #7fe8eb; }
.course-teaser--light .course-teaser-audience { color: var(--teal); }
.course-teaser-pitch {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 22px;
  flex: 1;
}
.course-teaser--featured .course-teaser-pitch { color: rgba(255,255,255,0.82); }
.course-teaser--featured .course-teaser-pitch strong { color: #fff; font-weight: 700; }
.course-teaser--light .course-teaser-pitch { color: var(--body); }
.course-teaser--light .course-teaser-pitch strong { color: var(--ink); font-weight: 600; }
.course-teaser-recog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.course-teaser-recog-pill {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: 6px;
}
.course-teaser--featured .course-teaser-recog-pill {
  background: rgba(127,232,235,0.13);
  color: #7fe8eb;
}
.course-teaser--light .course-teaser-recog-pill {
  background: var(--teal-pale);
  color: var(--teal-dark);
}
.course-teaser-cta {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  transition: gap 0.18s;
}
.course-teaser--featured .course-teaser-cta { color: #7fe8eb; }
.course-teaser--light .course-teaser-cta { color: var(--teal); }
.course-teaser:hover .course-teaser-cta { gap: 12px; }

.courses-specialists {
  text-align: center;
  margin-bottom: 28px;
}
.courses-specialists-text {
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 400;
  max-width: 640px;
  margin: 0 auto;
}
.courses-specialists-text strong { color: var(--ink); font-weight: 600; }
.courses-specialists-text a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.courses-specialists-text a:hover { text-decoration: underline; }

.courses-compare-cta {
  text-align: center;
}


/* ── Reviews — aggregate score "/5" denominator + layout ────── */
/* The existing .reviews-header has flex-wrap: wrap, which can drop
   the aggregate below the heading column on certain widths. Force
   side-by-side on home: heading column grows, aggregate stays put. */

.reviews-section .reviews-header > div:first-child { flex: 1 1 480px; min-width: 0; }
.reviews-section .reviews-aggregate { flex: 0 0 auto; }

.reviews-score-denom {
  font-size: 0.5em;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin-left: 2px;
}


/* ── Brochure section — 2-column with iframe ─────────────── */

.brochure-section {
  background: var(--warm-white);
  padding: 88px 52px 96px;
  position: relative;
}
.brochure-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.brochure-header {
  text-align: left;
}
.brochure-header h2 {
  font-size: clamp(32px, 3.6vw, 44px);
  margin-bottom: 18px;
}
.brochure-header p {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  color: var(--body);
  line-height: 1.65;
  font-weight: 400;
}
.brochure-iframe-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 500px;
  padding: 0;
  box-sizing: border-box;
}
.brochure-iframe-wrap iframe {
  width: 100%;
  max-width: 540px;
  min-height: 500px;
  border: none;
  background: transparent;
}


/* ── Final CTA (home) — overrides shared .final-cta layout ── */

.home-final-cta {
  border-top: 1px solid rgba(127,232,235,0.12);
}
.home-final-cta .final-cta-bg {
  background-image: url('https://ontesol.com/wp-content/uploads/2021/05/how-should-an-ESL-teacher-Speak-in-class-1-edited.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.55;
  filter: saturate(0.9);
}
.home-final-cta .final-cta-overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(20,163,168,0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5,46,48,0.78) 0%, rgba(5,46,48,0.88) 50%, rgba(5,46,48,0.92) 100%);
}
.home-final-cta-inner {
  position: relative; z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 110px 52px;
  text-align: center;
}
.home-final-cta-inner .eyebrow { justify-content: center; margin-bottom: 16px; }
.home-final-cta-inner .display-heading {
  color: #fff;
  font-size: clamp(34px, 4.2vw, 52px);
  margin-bottom: 18px;
}
.home-final-cta-inner .display-heading em { color: #7fe8eb; }
.home-final-cta-lead {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  max-width: 540px;
  margin: 0 auto 40px;
  font-weight: 400;
  line-height: 1.65;
}
.home-final-cta-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}


/* ── Home responsive — page-specific breakpoints ─────────── */

@media (max-width: 1040px) {
  .home-hero { padding: 80px 32px 60px; }
  .home-hero-trust { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; }
  .home-hero-trust-logos { gap: 22px; }

  .home-stats-inner { padding: 0 32px; }
  .home-stat { padding: 26px 16px; }
  .home-stat-num { font-size: 32px; }
  .home-proof-inner { gap: 24px; padding: 22px 32px; }

  .discover-header { margin-bottom: 32px; }
  .paths-grid--home { grid-template-columns: 1fr; }
  .paths-grid--home .path-card--hero { min-height: 460px; grid-row: auto; }
  .paths-grid--home .path-card--hero .path-card-inner { padding: 32px 30px; }
  .paths-grid-right { grid-template-rows: auto; gap: 18px; height: auto; }

  .guide-row { grid-template-columns: 1fr; }
  .guide-row-img { min-height: 180px; }
  .guide-row-text { padding: 24px 28px; }

  .courses-teaser-grid { grid-template-columns: 1fr; }
  .course-teaser { padding: 32px 28px; }
  /* Hide decorative geometry on tablet/mobile — conflicts with
     stacked card text in narrow viewports */
  .courses-decoration { display: none; }
  .courses-section::after { display: none; }

  .home-final-cta-inner { padding: 80px 32px; }
  .brochure-section { padding: 72px 32px; }
  .brochure-inner { grid-template-columns: 1fr; gap: 36px; }
  .brochure-header { text-align: center; }
}

@media (max-width: 640px) {
  .home-hero { padding: 60px 22px 48px; }
  .home-hero h1 { font-size: 30px; }

  .home-stats-inner { grid-template-columns: 1fr; padding: 0 22px; }
  .home-stat { padding: 22px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .home-stat:last-child { border-bottom: none; }
  .home-stat-num { font-size: 30px; }
  .home-proof-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .home-proof-item { font-size: 13px; }

  .home-final-cta-inner { padding: 64px 22px; }
  .brochure-section { padding: 56px 22px; }
  .brochure-header h2 { font-size: 28px; }
}

/* ── Home — hero card mobile top-padding fix ────────────────
   .path-card--hero uses justify-content: flex-end + min-height,
   so when content fills the card on narrow mobile, the title
   sits flush near the top edge with only the tablet override's
   32px padding — which reads as crowded against the dark
   gradient. Lift padding-top so the title gets clear breathing
   room comparable to the right-column cards. */
@media (max-width: 640px) {
  .paths-grid--home .path-card--hero { height: auto; }
}


/* ========================================================================
   COMMUNICATIVE APPROACH PAGE (template-communicative-approach.php)
   Long-form resource page using the blog-post layout.
   Reuses (NOT redeclared):
   - post-hero, post-hero-bg, post-hero-content, post-hero-inner,
     post-hero-lede, post-hero h1 em
   - post-layout, post-wrap
   - post-content (all prose: h2/h3, p, ul/ol, hr, figure, img, blockquote)
   - post-sidebar, post-sb-back, post-sb-cta, post-sb-cta-eyebrow,
     post-sb-box, post-sb-heading, post-sb-links
   - cp-articles, cp-articles-inner, cp-articles-header,
     cp-articles-grid, cp-article-card, cp-article-img, cp-article-body,
     cp-article-tag, cp-article-title
   - ta-final-cta, ta-final-cta-inner, final-btns, final-trust
   - breadcrumb, breadcrumb-sep
   - eyebrow, eyebrow-white, section-heading
   - btn-teal, btn-primary-lg, btn-ghost-lg
   - crs-live-visual, crs-live-img (video ratio modifier added below)
   New components below: crs-live-img--video, inline-cta,
   post-sb-lead, cp-articles-viewall.
   ======================================================================== */

/* ── Stylized video frame — adds 16:9 ratio to crs-live-img ────────
   The base crs-live-visual / crs-live-img component is already in
   style.css and sized for static images. This modifier turns the
   inner box into a 16:9 aspect-ratio container so YouTube/Vimeo
   iframes fill it correctly while keeping the teal corner bracket
   and amber dot accents from the parent .crs-live-visual. */
.crs-live-img--video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: var(--teal-deep);
}
.crs-live-img--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Inline CTA — full-width promotional box inside .post-content ──
   Sits inline with prose to break up long content with a course
   promotion. Visually echoes .post-sb-cta (dark teal-deep) but
   sized for the main content column. */
.inline-cta {
  background: var(--teal-deep);
  border-radius: 16px;
  padding: 32px 36px;
  margin: 32px 0;
}
.inline-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fe8eb;
  margin-bottom: 10px;
}
.inline-cta h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.inline-cta p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 18px;
}
.inline-cta p a {
  color: #7fe8eb;
  font-weight: 600;
  text-decoration: none;
}
.inline-cta p a:hover { text-decoration: underline; }

/* Defensive: stop .post-content a hover underline from applying to
   the white CTA button inside .inline-cta */
.post-content .inline-cta a.btn-teal:hover { text-decoration: none; }

/* ── Sidebar lead-magnet box ───────────────────────────────────────
   Sand-colored card distinct from the dark teal .post-sb-cta to
   visually separate the free-guide offer from the paid-course CTA.
   Designed to host a popup trigger (Ontraport / similar). Reusable
   across blog templates by dropping different headlines/triggers in. */
.post-sb-lead {
  background: var(--sand);
  border: 1.5px solid var(--sand-deep);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
}
.post-sb-lead::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: var(--amber);
  opacity: 0.18;
  border-radius: 50%;
  pointer-events: none;
}
.post-sb-lead-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--amber);
  margin-bottom: 10px;
  position: relative;
}
.post-sb-lead-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.post-sb-lead-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 16px;
}
.post-sb-lead-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ── Articles "View all" centered link below grid ──────────────── */
.cp-articles-viewall {
  text-align: center;
  margin-top: 36px;
}

/* ── Communicative Approach page responsive ──────────────────────
   Most responsive behaviour is inherited from .post-wrap, .post-sidebar,
   .post-content, .cp-articles-grid, .ta-final-cta, etc. This block
   only handles the new components on small screens. */
@media (max-width: 640px) {
  .inline-cta { padding: 24px; }
  .inline-cta h3 { font-size: 19px; }
}

/* ========================================================================
   TAIWAN COUNTRY PAGE (template-country-taiwan.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid--3, cp-layout, cp-body, cp-sidebar,
   toc-box, toc-cta-box, salary-table, savings-callout, school-card,
   interview-callout, cities-grid, city-card, cp-cert, cert-card,
   cp-cert-review, cp-jobs-strip, cp-articles, cp-faq, ta-final-cta,
   final-trust, eyebrow, section-heading, breadcrumb, inline-link,
   btn-primary, btn-ghost-sm, btn-teal, btn-white, btn-ghost-light) are
   NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-taiwan,
#salary,
#school-types,
#finding-jobs,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── School-card badge variant: caution ──────────────────────
   Used on the Taiwan page to flag kindergarten work as legally
   restricted for foreign teachers on a standard work permit.
   Solid amber + white text reads stronger than badge-competitive
   (amber-pale + amber text), so the two coexist without conflict.
   Reusable on any page that needs a true warning marker. */
.badge-caution { background: var(--amber); color: #fff; }

/* ========================================================================
   TESL PAGE (template-tesl.php)
   Page-specific overrides only. Shared components (hub-hero, cb-grid,
   cb-text, cb-sidebar, cb-callout, cp-faq, ta-section, ta-wrap,
   ta-final-cta, final-trust, ta-side-nav, eyebrow, eyebrow-white,
   display-heading, section-intro, section-lead, breadcrumb, inline-link,
   crs-live-visual, crs-live-img, crs-pillars, crs-pillar, crs-pillar-icon,
   crs-pillar-link, req-steps, req-step, req-num,
   btn-teal, btn-primary-lg, btn-ghost-lg)
   are NOT redeclared.
   ======================================================================== */

/* ── Hero background image override ───────────────────────── */
.hub-hero--tesl::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2016/05/canada-1.jpg');
}

/* Hero "Canadian Language Schools" trust display */
.tesl-hero-trust-headline {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: #7fe8eb;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* ── Scroll-margin for side-nav targets ───────────────────── */
#about,
#why-required,
#choosing,
#where-teach,
#associations,
#faq { scroll-margin-top: 80px; }

/* ── About section — opening lead paragraph ───────────────── */
.tesl-lead {
  font-size: 16px;
  color: var(--body);
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 18px;
}
.tesl-lead strong { color: var(--ink); font-weight: 700; }
.tesl-lead-ink-link { color: var(--ink) !important; }
.tesl-lead-aside {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

/* OnTESOL credibility line */
.tesl-cred {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.7;
  padding: 14px 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
}

/* CTA-style inline link below body content */
.tesl-cta-line { margin-top: 18px; }

/* About sidebar — paired accreditation logos */
.tesl-accred-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.tesl-accred-logo {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.tesl-accred-logo img {
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Checklist (✓ rows with rule between items) ──────────── */
.tesl-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 24px;
}
.tesl-checklist li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 400;
}
.tesl-checklist li:last-child { border-bottom: none; }
.tesl-checklist li::before {
  content: "✓";
  color: var(--teal);
  font-weight: 700;
  margin-right: 10px;
}

/* Subhead used inside Choosing section's right-column card */
.tesl-subhead {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 28px 0 12px;
  color: var(--ink);
}
.tesl-subhead--card {
  font-size: 19px;
  margin: 0 0 14px;
}

/* Choosing section — right-column "ensures" card */
.tesl-ensures-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 28px 30px;
}
.tesl-ensures-card .tesl-checklist { margin: 0; }
.tesl-ensures-card .tesl-checklist li:last-child { padding-bottom: 0; }

/* ── Choosing — full-width "Planning to teach in Canada?" callout ── */
.tesl-canada-callout {
  margin-top: 48px;
  background: var(--teal-pale);
  border: 1.5px solid rgba(13,115,119,0.18);
  border-radius: 16px;
  padding: 28px 32px;
}
.tesl-canada-callout-top {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: center;
}
.tesl-canada-callout-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tesl-canada-callout-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.tesl-canada-callout-body h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tesl-canada-callout-body p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
.tesl-canada-callout-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(13,115,119,0.2);
}
.tesl-canada-callout-links-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-dark);
}
.tesl-canada-callout-links a {
  color: var(--teal);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.tesl-canada-callout-links a:hover { text-decoration: underline; }

/* ── Where to Teach — section bottom CTA wrapper ──────────
   Path rows themselves use the shared .crs-pillars / .crs-pillar
   component (already in style.css). */
.tesl-where-cta { text-align: center; margin-top: 40px; }

/* ── Associations — TESL Canada featured + 3-col provincial grid ── */
.tesl-canada-featured {
  margin-top: 36px;
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
.tesl-canada-featured-logo {
  background: var(--teal-xpale);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.tesl-canada-featured-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.tesl-canada-featured-body h3 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.tesl-canada-featured-body p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 12px;
}
.tesl-canada-featured-body p:last-of-type { margin-bottom: 0; }
.tesl-canada-featured-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.tesl-canada-featured-cta svg { width: 14px; height: 14px; }

.tesl-provincial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.tesl-provincial-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
}
.tesl-provincial-logo {
  height: 56px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}
.tesl-provincial-logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
.tesl-provincial-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.tesl-provincial-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 12px;
}
.tesl-provincial-card p:last-of-type { margin-bottom: 0; }
.tesl-provincial-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.tesl-provincial-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--teal);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.tesl-provincial-link a:hover { text-decoration: underline; }

/* ── TESL responsive — page-specific only ─────────────────── */
@media (max-width: 1040px) {
  .tesl-canada-featured {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 32px;
  }
  .tesl-canada-featured-logo { min-height: 120px; }
  .tesl-provincial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .tesl-provincial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tesl-canada-callout { padding: 24px; }
  .tesl-canada-callout-top {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }
  .tesl-canada-callout-icon { width: 48px; height: 48px; }
  .tesl-canada-callout-links { gap: 14px; }
  .tesl-accred-logo {
    min-height: 110px;
    padding: 18px 14px;
  }
}

/* ========================================================================
   CELTA CERTIFICATION PAGE (template-celta-certification.php)
   Shared components (ta-hero, ta-section, ta-wrap, section-intro, eyebrow,
   section-heading, display-heading, section-lead, cb-grid, cb-callout,
   req-steps, req-step, req-num, benefits-list, cmp-table, cp-cert-referral,
   ta-final-cta, final-trust, ta-side-nav, btn-primary-lg, btn-ghost-lg)
   are NOT redeclared.
   ======================================================================== */

/* Scroll-margin so anchor jumps + side nav targets clear the fixed top nav */
#about-celta,
#equivalent,
#better-than-celta,
#compare,
#next-steps { scroll-margin-top: 80px; }

/* ========================================================================
   TEFL INTERNSHIPS PAGE (template-tefl-internships.php)
   Free-standing comparison page: paid TEFL internship programs vs.
   OnTESOL's free job placement model.
   Page-specific overrides only. Shared components (ta-hero, ta-section,
   ta-wrap, section-intro, content-block / cb-grid / cb-text / cb-sidebar /
   cb-callout, req-steps, req-step, req-num, cp-faq, ta-final-cta,
   final-trust, ta-side-nav, eyebrow, section-heading, section-lead,
   inline-link, btn-primary-lg, btn-ghost-lg, btn-teal) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for side-nav targets ──────────────────── */
#problem,
#compare,
#latin-america,
#how-it-works,
#faq { scroll-margin-top: 80px; }


/* ── Country comparison panel (.intern-vs) ───────────────────
   Per-country split panel: OnTESOL free placement on the left
   (highlighted as the winner) vs. typical TEFL internship on
   the right. Stacked vertically, one panel per country.
   ============================================================ */

.intern-vs {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 28px;
  box-shadow: 0 4px 18px rgba(13,115,119,0.04);
}
.intern-vs + .intern-vs {
  margin-top: 24px;
}

/* Panel header — country flag + name + meta */
.intern-vs-head {
  background: var(--teal-deep);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.intern-vs-flag {
  font-size: 28px;
  line-height: 1;
}
.intern-vs-head h3 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.intern-vs-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin-left: auto;
}

/* Two-column body */
.intern-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.intern-vs-col {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}
.intern-vs-col + .intern-vs-col {
  border-left: 1px solid var(--rule);
}

/* Winner column — sand background to visually distinguish OnTESOL */
.intern-vs-col--win {
  background: var(--teal-xpale);
  position: relative;
}
.intern-vs-col--win::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--teal);
}

/* Badge at top of each column */
.intern-vs-badge {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.intern-vs-badge::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
}
.intern-vs-badge--neutral {
  color: var(--muted);
}
.intern-vs-badge--neutral::before {
  background: var(--muted);
  opacity: .35;
}

/* Comparison rows */
.intern-vs-rows {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
}
.intern-vs-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.intern-vs-rows li:last-child {
  border-bottom: none;
}
.intern-vs-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  flex-shrink: 0;
}
.intern-vs-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  line-height: 1.4;
}

/* Inline pill values for the highlighted "good" / "bad" cells */
.intern-vs-value--good {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--teal);
  letter-spacing: -0.02em;
}
.intern-vs-value--bad {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: -0.02em;
}

/* CTA / footer below rows */
.intern-vs-col .btn-teal {
  align-self: flex-start;
  margin-top: auto;
}
.intern-vs-foot {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: 4px;
}


/* ── TEFL Internships responsive ─────────────────────────── */
@media (max-width: 1040px) {
  .intern-vs-grid {
    grid-template-columns: 1fr;
  }
  .intern-vs-col + .intern-vs-col {
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  .intern-vs-col--win::before {
    width: 100%;
    height: 4px;
    bottom: auto;
  }
  .intern-vs-meta {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .intern-vs-head {
    padding: 18px 22px;
    gap: 12px;
  }
  .intern-vs-head h3 {
    font-size: 22px;
  }
  .intern-vs-col {
    padding: 22px 22px;
  }
  .intern-vs-rows li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .intern-vs-value {
    text-align: left;
  }
}

/* ============================================================
   GRAVITY FORMS — SHARED STYLES
   Applies wherever a Gravity Form is rendered in the DOM (i.e. via
   the [gravityform] shortcode, NOT iframe embeds). Aligns native
   GF markup with the design system: Sora typography, teal focus
   ring, warm-white inputs, btn-primary-lg–style submit, amber
   validation, teal-xpale confirmation.
   No parent prefix — the .gform_wrapper class itself is the scope.
   The iframe-embedded form on /contact-us/ is unaffected because
   its DOM lives inside the iframe, not the parent page.
   Used by: template-certificate-verification.php (and any future
   template that uses the [gravityform] shortcode).
   ============================================================ */

.gform_wrapper {
  font-family: 'Sora', sans-serif;
}
.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend {
  display: none;
}
.gform_wrapper .gfield {
  margin-bottom: 18px;
}
.gform_wrapper .gfield_label {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 8px;
  display: block;
  line-height: 1.4;
}
.gform_wrapper .gfield_required {
  color: var(--amber);
  margin-left: 4px;
  font-weight: 700;
}

/* Inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  background: var(--warm-white);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'Sora', sans-serif;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12);
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.gform_wrapper textarea {
  min-height: 120px;
  resize: vertical;
}

/* Field description (helper text under input) */
.gform_wrapper .gfield_description {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 6px;
  line-height: 1.5;
}

/* Date picker (jQuery UI) — sub-field labels */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_date_month label,
.gform_wrapper .gfield_date_day label,
.gform_wrapper .gfield_date_year label,
.gform_wrapper .screen-reader-text {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Checkbox + radio */
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  font-size: 14.5px;
  color: var(--body);
  font-weight: 400;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  accent-color: var(--teal);
}

/* Footer + submit button — matches .btn-primary-lg style */
.gform_wrapper .gform_footer {
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-light);
  color: #fff;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.gform_wrapper .gform_button:hover {
  background: #16bec3;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 163, 168, 0.4);
  color: #fff;
}
.gform_wrapper .gform_button:focus-visible {
  outline: 3px solid rgba(13, 115, 119, 0.35);
  outline-offset: 2px;
}

/* Validation states */
.gform_wrapper .validation_error,
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
  background: var(--amber-pale);
  border: 1.5px solid rgba(200, 121, 42, 0.25);
  color: #7a4a1a;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  margin: 12px 0;
  font-weight: 500;
  line-height: 1.5;
}
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: rgba(200, 121, 42, 0.55);
  background: var(--amber-pale);
}

/* Submission success */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  background: var(--teal-xpale);
  border-left: 4px solid var(--teal);
  padding: 18px 22px;
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
}

/* AJAX spinner */
.gform_wrapper .gform_ajax_spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* Responsive — full-width submit on mobile */
@media (max-width: 640px) {
  .gform_wrapper .gform_button {
    width: 100%;
    padding: 16px 24px;
  }
}

/* ============================================================
   GRAVITY FORMS — SHARED STYLES (extension)
   Adds field types not covered in the original shared GF block:
     - File upload (resume / CV uploads)
     - Complex multi-part fields: Name (first/last) and Address
       (street, line 2, city/state/zip, country) — the markup uses
       .ginput_complex with sub-spans like .ginput_left / .ginput_right
       and .name_first / .name_last
     - Standalone consent / Terms-of-Service checkbox row
     - "Hidden" placeholder label that GF outputs for hidden fields
   These selectors are scoped to .gform_wrapper so they apply on every
   page that renders a Gravity Form via shortcode.
   First used by: template-application-form-icon-thailand.php
   ============================================================ */

/* GF outputs literal "Hidden" labels for hidden fields like Enquiry
   source — suppress them so they don't render as a stray heading. */
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_hidden {
  display: none !important;
}

/* Sub-field labels under complex fields (e.g. "First", "Last",
   "Street Address") — small uppercase muted hint sitting *under*
   each input. */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_label_before_complex {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
  display: block;
}

/* Name field — first / last side by side on wider viewports.
   Falls back to a single column under 640px. */
.gform_wrapper .ginput_complex.ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gform_wrapper .ginput_complex.ginput_container_name > span {
  display: flex;
  flex-direction: column;
}

/* Address field — multi-row layout. Lines 1 & 2 full width,
   city / state on one row, zip / country on the next. */
.gform_wrapper .ginput_complex.ginput_container_address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gform_wrapper .ginput_complex.ginput_container_address .address_line_1,
.gform_wrapper .ginput_complex.ginput_container_address .address_line_2 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.gform_wrapper .ginput_complex.ginput_container_address .address_city,
.gform_wrapper .ginput_complex.ginput_container_address .address_state,
.gform_wrapper .ginput_complex.ginput_container_address .address_zip,
.gform_wrapper .ginput_complex.ginput_container_address .address_country {
  display: flex;
  flex-direction: column;
}

/* Stack complex fields on narrow viewports so sub-fields don't
   crush. Single-column at < 640px. */
@media (max-width: 640px) {
  .gform_wrapper .ginput_complex.ginput_container_name,
  .gform_wrapper .ginput_complex.ginput_container_address {
    grid-template-columns: 1fr;
  }
}

/* File upload — wrap the input in the same warm-white box as text
   inputs, but with a dashed border to read as a drop target. The
   native file picker button stays browser-default; we just frame
   it cleanly. */
.gform_wrapper input[type="file"] {
  width: 100%;
  background: var(--warm-white);
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-family: 'Sora', sans-serif;
  color: var(--body);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gform_wrapper input[type="file"]:hover,
.gform_wrapper input[type="file"]:focus {
  border-color: var(--teal);
  background: #fff;
  outline: none;
}
.gform_wrapper input[type="file"]::file-selector-button {
  background: var(--sand);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 14px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.gform_wrapper input[type="file"]::file-selector-button:hover {
  background: var(--sand-deep);
}
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper .gfield_fileupload_rules {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 6px;
  line-height: 1.5;
}

/* Standalone consent / Terms-of-Service checkbox row. GF renders
   this as a single-item .gfield_checkbox; the existing checkbox
   styles handle the input, but the label needs a touch more
   breathing room when it's the gating consent before submit. */
.gform_wrapper .gfield_consent .gfield_checkbox label,
.gform_wrapper .gfield_checkbox--consent label {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  font-weight: 400;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper .gfield_consent .gfield_label,
.gform_wrapper .gfield_consent .gfield_required {
  display: none;
}


/* ============================================================
   CERTIFICATE VERIFICATION PAGE (template-certificate-verification.php)
   Reuses (NOT redeclared):
   - about-header family (compact dark page header) — full styles in
     ABOUT US PAGE section
   - breadcrumb (scoped under .about-header) — defined in CONTACT US PAGE
   - ta-section, ta-wrap, bg-warm-white
   - contact-form-card (white card pattern from CONTACT US PAGE)
   - gform_wrapper styles — defined in GRAVITY FORMS — SHARED STYLES above
   Page-specific additions only: cv-inner, cv-intro, cv-note.
   ============================================================ */

/* ── Narrow centered wrapper for the verification flow ────── */
.cv-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Intro paragraphs above the form ──────────────────────── */
.cv-intro {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 16px;
}
.cv-intro:last-of-type { margin-bottom: 0; }
.cv-intro a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.cv-intro a:hover { text-decoration: underline; }

/* ── Pre-2018 certificate footnote (warm amber callout) ───── */
.cv-note {
  background: var(--amber-pale);
  border: 1.5px solid rgba(200, 121, 42, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0 32px;
  font-size: 14px;
  color: #7a4a1a;
  line-height: 1.65;
  font-weight: 400;
}
.cv-note strong {
  color: var(--amber);
  font-weight: 700;
}

/* ── Cert verification responsive ─────────────────────────── */
@media (max-width: 640px) {
  .cv-note {
    padding: 14px 16px;
    margin: 20px 0 24px;
  }
}

/* ========================================================================
   SAUDI ARABIA COUNTRY PAGE (template-country-saudi-arabia.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid [4-col default], cp-layout, cp-body,
   cp-sidebar, toc-box, toc-cta-box, salary-table, savings-callout,
   school-card [icon + badge variant], apply-grid, employer-card,
   auth-callout, cities-grid, cities-grid--stacked, city-card, cp-cert,
   cert-card, cp-jobs-strip, cp-articles, cp-faq, ta-final-cta,
   final-trust, eyebrow, eyebrow-white, section-heading, breadcrumb,
   btn-primary, btn-ghost-sm, btn-ghost-light, badge-premium,
   badge-popular, badge-flexible, badge-secure) are NOT redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-saudi,
#job-market,
#salary,
#visa-paths,
#how-to-apply,
#major-employers,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }


/* ============================================================
   ICON RECRUIT APPLICATION PAGE
   (template-application-form-icon-thailand.php)
   Reuses (NOT redeclared):
   - about-header family — full styles in ABOUT US PAGE section
   - breadcrumb (scoped under .about-header) — defined in CONTACT US PAGE
   - ta-section, ta-wrap, bg-warm-white
   - contact-form-card — defined in CONTACT US PAGE
   - gform_wrapper styles — defined in GRAVITY FORMS — SHARED STYLES
     (and the extension block above)
   Page-specific additions only: icr-inner, icr-intro, icr-prep.
   ============================================================ */

/* Slightly wider wrapper than cert-verify because Icon Recruit's
   form has multi-column complex fields (Name first/last, Address
   city/state). Centers the whole flow in a single column. */
.icr-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Intro paragraph above the prep checklist. */
.icr-intro {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 24px;
}
.icr-intro a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.icr-intro a:hover { text-decoration: underline; }

/* Prep checklist — what applicants need to have ready. Sand
   background card with a heading and bulleted list. */
.icr-prep {
  background: var(--sand);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 32px;
}
.icr-prep h2 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.3;
}
.icr-prep ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.icr-prep li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.65;
  font-weight: 400;
}
.icr-prep li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.icr-prep li strong {
  color: var(--ink);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 640px) {
  .icr-prep {
    padding: 20px 22px;
    margin-bottom: 24px;
  }
}

/* ============================================================
   FREE TESOL COURSE  (template-free-tesol-course.php)
   ------------------------------------------------------------
   Page-specific tweaks only. Reuses shared components:
   hub-hero, breadcrumb, ta-section, ta-wrap, eyebrow,
   section-heading, req-steps / req-step / req-num,
   content-block / cb-grid / cb-text / cb-sidebar / cb-callout,
   cp-articles / cp-articles-grid / cp-article-card,
   btn-primary-lg, btn-ghost-lg, cb-btn.
   No new components added — only modifiers + a couple of small
   wrappers for the form embed.
   ============================================================ */

/* Hero modifier — image background + single-line H1 on desktop */
.hub-hero--ftc::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2019/03/33967438622_e2e568f6f2_b.jpg');
  background-position: center 30%;
}
.hub-hero--ftc h1 { max-width: none; }
@media (min-width: 1041px) {
  .hub-hero--ftc h1 { white-space: nowrap; }
}

/* Form section — centered intro paragraph above the embed */
.ftc-form-intro {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 40px;
}
.ftc-form-intro .eyebrow { justify-content: center; }
.ftc-form-intro .section-heading { margin-bottom: 16px; }
.ftc-form-intro p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  font-weight: 400;
  margin: 0 auto;
}
.ftc-form-intro p a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.ftc-form-intro p a:hover { text-decoration: underline; }
.ftc-form-intro p strong { color: var(--ink); font-weight: 700; }

/* Form embed wrapper — white card, horizontal scroll fallback */
.ftc-form-embed {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 1040px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ftc-form-embed iframe,
.ftc-form-embed > div { max-width: 100%; }

@media (max-width: 640px) {
  .ftc-form-embed { padding: 18px 14px; border-radius: 14px; }
}

/* Curriculum heading block (simple top-aligned, no 2-col split) */
.ftc-curriculum-head { margin-bottom: 36px; }

/* Numbered step grid — 2-col modifier for .req-steps */
@media (min-width: 1041px) {
  .req-steps--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }
  .req-steps--cols .req-step {
    border-bottom: 1px solid var(--rule);
  }
  /* Kill bottom border on the final row only */
  .req-steps--cols .req-step:nth-last-child(-n+2):nth-child(odd),
  .req-steps--cols .req-step:nth-last-child(1) {
    border-bottom: none;
  }
}

/* ========================================================================
   SOUTH KOREA — EPIK PAGE (template-sk-epik.php)
   Subtype page under the South Korea country guide.

   Reuses (NOT redeclared):
   - post-hero, post-hero-bg, post-hero-content, post-hero-inner,
     post-hero h1 em, post-hero-lede
   - cp-layout, cp-body, cp-body > h2/h3/p
   - .cp-layout .post-sidebar { order: 2; }
   - post-sidebar + all sub-classes
   - cert-mini + child selectors
   - cp-jobs-strip + all sub-classes
   - cp-faq, cp-faq-inner, cp-faq-sticky, faq-list, faq-item/q/q-text/icon/a
   - eyebrow, section-heading
   - req-steps, req-step, req-num  (shared numbered steps)
   - ta-final-cta, ta-final-cta-inner, final-btns  (shared final CTA)
   - breadcrumb, btn-primary, btn-primary-lg, btn-ghost-sm, btn-teal
   ======================================================================== */

/* ── Hero logo badge ────────────────────────────────────────
   Shared component — reusable on any subtype page that needs
   a program/employer logo in the hero. Uses :has() to only
   apply flex when the logo is present; does NOT affect blog
   posts or the hagwon hero. */
.post-hero-inner:has(.post-hero-logo) {
  display: flex;
  align-items: flex-end;
  gap: 36px;
}
.post-hero-text { min-width: 0; }
.post-hero-logo {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-shadow: 0 6px 32px rgba(0,0,0,.22);
  margin-bottom: 8px;
}
.post-hero-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── EPIK highlights callout ────────────────────────────────
   Teal-tinted 2-col list for the 700+ locations. */
.epik-highlights {
  background: var(--teal-xpale);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0 28px;
}
.epik-highlights h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
  font-family: 'Sora', sans-serif;
}
.epik-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
.epik-highlights ul li {
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
  margin: 0;
}
.epik-highlights ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal);
}
.epik-highlights ul li strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Job snapshot card ──────────────────────────────────────
   Definition-list card for key job specs. Reusable. */
.job-snapshot {
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0 28px;
}
.job-snapshot h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-family: 'Sora', sans-serif;
}
.job-snapshot dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 20px;
  margin: 0;
}
.job-snapshot dt {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.job-snapshot dd {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.job-snapshot dd strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Requirements checklist box ─────────────────────────────
   Sand-bg checklist for entry requirements. Reusable. */
.req-box {
  background: var(--sand);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0 28px;
}
.req-box h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-family: 'Sora', sans-serif;
}
.req-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.req-box ul li {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.65;
  padding: 8px 0 8px 32px;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.req-box ul li:last-child { border-bottom: none; }
.req-box ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  opacity: .18;
}
.req-box ul li::after {
  content: '\2713';
  position: absolute;
  left: 4px;
  top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-dark);
}
.req-box ul li a {
  color: var(--teal-dark);
  font-weight: 600;
}
.req-box ul li a:hover { text-decoration: underline; }

/* ── Specificity fix — btn-teal inside cert-mini ────────────
   A higher-specificity ancestor rule overrides .btn-teal color. */
.cert-mini .btn-teal { color: #fff; }

/* ── Responsive — EPIK-specific ─────────────────────────── */
@media (max-width: 768px) {
  .post-hero-inner:has(.post-hero-logo) {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .post-hero-logo {
    width: 100px;
    height: 100px;
    padding: 14px;
    border-radius: 16px;
    order: -1;
  }
  .epik-highlights ul { grid-template-columns: 1fr; }
  .job-snapshot dl { grid-template-columns: 1fr; }
}

/* ========================================================================
   LEAD LANDING PAGES — template-lead-*.php family
   ------------------------------------------------------------------------
   Email-capture landing pages for free OnTESOL teaching guides.
   Used by: template-lead-contextualized-grammar.php (and 2 others to come).

   Reuses (NOT redeclared): ta-section, ta-wrap, bg-sand, bg-warm-white,
   breadcrumb, eyebrow, ta-hero-eyebrow, ta-hero-dot (+ ta-dot-blink),
   ta-hero-sub, section-heading, section-lead, section-intro, cb-grid,
   cb-grid--center, cb-text, crs-live-visual, crs-live-img, final-btns,
   btn-primary-lg, btn-outline.
   ======================================================================== */

/* ── Hero — split layout (pitch left, form card right) ───── */
.lead-hero {
  position: relative;
  background: var(--teal-deep);
  padding: 80px var(--section-h) 96px;
  overflow: hidden;
}
.lead-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 12% 18%, rgba(20,163,168,0.22) 0%, transparent 60%),
    radial-gradient(700px 500px at 92% 88%, rgba(127,232,235,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.lead-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

/* H1 — sized smaller than .ta-hero h1 (44-78px) for lead pages */
.lead-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 22px;
  max-width: 18ch;
}
.lead-hero h1 em { font-style: italic; color: #7fe8eb; }

/* Breadcrumb on dark hero — recolor in context (mirrors .cp-hero pattern) */
.lead-hero .breadcrumb,
.lead-hero .breadcrumb a { color: rgba(255,255,255,0.55); }
.lead-hero .breadcrumb a:hover { color: #7fe8eb; }
.lead-hero .breadcrumb [aria-current="page"] { color: rgba(255,255,255,0.85); font-weight: 600; }
.lead-hero .breadcrumb span[aria-hidden="true"] { color: rgba(255,255,255,0.3); }

/* Hero bullets — checkmark list (no existing match for vertical SVG-bullet list on dark) */
.lead-hero-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 0;
}
.lead-hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
}
.lead-hero-bullets svg {
  width: 18px;
  height: 18px;
  color: #7fe8eb;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Trust pill */
.lead-hero-trust {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* ── Form card (the lead-magnet focal point) ────────────── */
.lead-form-card {
  background: var(--white);
  border-radius: 22px;
  padding: 36px 32px 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
}
.lead-form-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 24px;
  right: 24px;
  height: 12px;
  background: linear-gradient(180deg, rgba(127,232,235,0.45), transparent);
  border-radius: 22px 22px 0 0;
  filter: blur(8px);
  pointer-events: none;
}
.lead-form-header { margin-bottom: 22px; text-align: center; }
.lead-form-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal);
  background: var(--teal-pale);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.lead-form-card h2 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.lead-form-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
  margin: 0;
}

/* Wrapper for the Ontraport script-injected form */
.lead-form-embed {
  margin: 0 -8px;
  min-height: 220px;     /* reserves space while script loads */
}
.lead-form-embed iframe,
.lead-form-embed > div { max-width: 100%; }

.lead-form-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
}
.lead-form-foot svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
  flex-shrink: 0;
}

/* Hero responsive */
@media (max-width: 1040px) {
  .lead-hero { padding: 64px 32px 72px; }
  .lead-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .lead-hero h1 { max-width: 24ch; }
  .lead-form-card { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .lead-hero { padding: 48px 22px 56px; }
  .lead-hero h1 { font-size: 32px; }
  .lead-form-card { padding: 28px 22px 22px; border-radius: 18px; }
  .lead-form-card h2 { font-size: 22px; }
}


/* ── What's Inside — 3-card grid ────────────────────────── */
.lead-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lead-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  padding: 32px 28px 30px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lead-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13,115,119,0.22);
  box-shadow: 0 18px 48px rgba(13,115,119,0.10);
}
.lead-card-num {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 900;
  color: var(--teal);
  letter-spacing: .08em;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lead-card-num::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--teal);
  display: inline-block;
}
.lead-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.lead-card-tag {
  font-size: 13px;
  color: var(--teal);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 14px;
}
.lead-card p:last-child {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
}

@media (max-width: 1040px) {
  .lead-cards { grid-template-columns: 1fr; gap: 18px; }
}


/* ── Bridge — center-aligned closing section ─────────────
   Uses .section-lead + .final-btns + .btn-outline, just adds
   centering + max-width. */
.lead-bridge {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.lead-bridge .eyebrow { justify-content: center; }
.lead-bridge .section-lead { margin: 0 auto 32px; max-width: 60ch; }

/* ========================================================================
   THANK YOU PAGE (template-thank-you.php)
   Post-form-submission landing for the brochure download.
   Reuses (NOT redeclared): ta-section, ta-wrap, bg-warm-white, bg-sand,
   eyebrow, eyebrow-white, display-heading, section-heading, section-intro,
   section-lead, cb-callout, paths-grid, path-card, path-card-bg,
   path-card-shade, path-card-inner, path-card-label, path-link,
   ta-final-cta, ta-final-cta-inner, final-btns, final-trust,
   btn-primary-lg, btn-ghost-lg.
   ======================================================================== */

/* Centers the contents of the confirmation section. The .cb-callout
   override pulls the spam-folder note back to a sensible reading width
   inside the centered column. */
.ty-center { text-align: center; max-width: 720px; margin: 0 auto; }
.ty-center .eyebrow { justify-content: center; }
.ty-center .section-lead { margin: 0 auto 32px; }
.ty-center .cb-callout { max-width: 540px; margin: 0 auto; text-align: left; }

/* ========================================================================
   TERMS OF SERVICE PAGE (template-terms-of-service.php)
   Reuses (NOT redeclared):
   - about-header family — full styles in ABOUT US PAGE section
   - breadcrumb (scoped under .about-header) — defined in CONTACT US PAGE
   - toc-box, toc-title, toc-list — defined in COUNTRY PAGE — TOC
   - post-content (h2/h3, p, ul, hr, strong, em, a, table base styles)
   Page-specific additions only: tos-meta, tos-layout, tos-wrap,
   tos-sidebar, tos-formula, tos-grade-table family, tos-grade-notes.
   ======================================================================== */

/* ── Header meta line (last updated + privacy link) ─────── */
.about-header .tos-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  margin-top: 4px;
}
.about-header .tos-meta strong {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.about-header .tos-meta-sep { color: rgba(255,255,255,0.3); }
.about-header .tos-meta a {
  color: #7fe8eb;
  text-decoration: none;
  font-weight: 500;
}
.about-header .tos-meta a:hover { text-decoration: underline; }

/* ── Layout: TOC sidebar (left) + prose (right) ──────────── */
.tos-layout { background: var(--warm-white); }
.tos-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}

/* ── Sticky TOC sidebar ───────────────────────────────────── */
.tos-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-right: 4px;
}
.tos-sidebar::-webkit-scrollbar { width: 6px; }
.tos-sidebar::-webkit-scrollbar-track { background: transparent; }
.tos-sidebar::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.tos-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(13,115,119,0.25);
}

/* Scroll-margin so anchor jumps clear the fixed top nav */
.post-content h2[id] { scroll-margin-top: 80px; }

/* ── Refund-formula callout ──────────────────────────────── */
.tos-formula {
  background: var(--sand);
  border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  margin: 20px 0 24px;
}
.tos-formula p {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

/* ── Grading scheme table ────────────────────────────────── */
.tos-grade-table { table-layout: fixed; }
.tos-grade-table .tos-col-class  { width: 42%; }
.tos-grade-table .tos-col-letter { width: 22%; }
.tos-grade-table .tos-col-score  { width: 36%; }
.tos-grade-table th[scope="rowgroup"] {
  vertical-align: middle;
  background: var(--teal-xpale);
  color: var(--teal-dark);
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 16px;
  text-align: left;
}
.tos-grade-table td.tos-grade-letter {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.tos-grade-table td.tos-grade-score {
  font-variant-numeric: tabular-nums;
  color: var(--body);
  white-space: nowrap;
}
.tos-grade-table tr.tos-grade-fail th[scope="rowgroup"] {
  background: var(--amber-pale);
  color: var(--amber);
}
.tos-grade-table tr.tos-grade-fail td.tos-grade-letter {
  color: var(--amber);
}

/* ── Notes block under the grading table ─────────────────── */
.tos-grade-notes {
  margin-top: -4px;
  padding: 14px 18px;
  background: var(--sand);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}
.tos-grade-notes p { margin-bottom: 6px; font-size: 14px; }
.tos-grade-notes p:last-child { margin-bottom: 0; }

/* ── TOS responsive ──────────────────────────────────────── */
@media (max-width: 1040px) {
  .tos-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tos-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 640px) {
  .tos-formula { padding: 14px 18px; }
  .tos-formula p { font-size: 13px; }
  .tos-grade-table .tos-col-class  { width: 46%; }
  .tos-grade-table .tos-col-letter { width: 18%; }
  .tos-grade-table .tos-col-score  { width: 36%; }
  .tos-grade-table th[scope="rowgroup"] { font-size: 13px; padding: 12px 12px; }
}

/* ============================================================
   MOBILE NAV — NESTED SUBMENUS
   Drives off the WP menu via OnTESOL_Mobile_Nav_Walker.
   Parent rows have a separate chevron toggle so the link
   itself still navigates to the parent page (option A).
   Replaces the old hardcoded .ont-nav-mobile-sub blocks.
   ============================================================ */

.ont-nav-mobile-list,
.ont-nav-mobile-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ont-nav-mobile-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ont-nav-mobile-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* Parent / top-level link — overrides the broad .ont-nav-mobile a rule */
.ont-nav-mobile-list .ont-nav-mobile-row > a {
  flex: 1;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 8px;
  border-bottom: 0;
  display: block;
  transition: color .15s;
}
.ont-nav-mobile-list .ont-nav-mobile-row > a:hover { color: #fff; }

/* Chevron toggle — separate hit target on the right */
.ont-nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  transition: color .15s, background .15s;
  padding: 0;
}
.ont-nav-mobile-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.ont-nav-mobile-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}
.ont-nav-mobile-item.is-expanded > .ont-nav-mobile-row > .ont-nav-mobile-toggle { color: #fff; }
.ont-nav-mobile-item.is-expanded > .ont-nav-mobile-row > .ont-nav-mobile-toggle svg {
  transform: rotate(180deg);
}

/* Children — collapsed by default, animated via inline maxHeight from JS */
.ont-nav-mobile-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: rgba(0,0,0,0.18);
}

.ont-nav-mobile-children .ont-nav-mobile-item {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ont-nav-mobile-children .ont-nav-mobile-item:last-child {
  border-bottom: 0;
}
.ont-nav-mobile-children .ont-nav-mobile-row > a {
  padding: 11px 8px 11px 24px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
}
.ont-nav-mobile-children .ont-nav-mobile-row > a:hover {
  color: rgba(255,255,255,0.9);
}

/* ============================================================
   MOBILE DRAWER — Accordion Submenus
   Mega-trigger parents from the WP primary menu are hidden in
   the drawer; tappable accordions below take their place.
   Toggle handled by nav.min.js (button + aria-expanded + .is-open).
============================================================ */

/* Hide the mega-menu parent <li>s inside the mobile drawer —
   the accordion sections below replace them. */
.ont-nav-mobile .ont-mega-trigger { display: none; }

.ont-nav-mobile-acc {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ont-nav-mobile-acc:first-of-type {
  margin-top: 4px;
}

/* Parent row: link (navigates) + chevron button (toggles panel). */
.ont-nav-mobile-acc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ont-nav-mobile .ont-nav-mobile-acc-row > .ont-nav-mobile-acc-link {
  flex: 1;
  padding: 14px 8px;
  color: rgba(255,255,255,0.85);
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
  transition: color .15s;
}
.ont-nav-mobile .ont-nav-mobile-acc-row > .ont-nav-mobile-acc-link:hover {
  color: #fff;
}

.ont-nav-mobile-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 14px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: color .15s;
}
.ont-nav-mobile-acc-toggle:hover,
.ont-nav-mobile-acc-toggle[aria-expanded="true"] {
  color: #fff;
}

.ont-nav-mobile-acc-chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .6;
  transition: transform .25s, opacity .15s;
}
.ont-nav-mobile-acc-toggle[aria-expanded="true"] .ont-nav-mobile-acc-chev {
  transform: rotate(180deg);
  opacity: 1;
}

.ont-nav-mobile-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ont-nav-mobile-acc-panel.is-open {
  max-height: 600px;
}
.ont-nav-mobile-acc-panel a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  padding: 11px 8px 11px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: block;
  transition: color .15s;
}
.ont-nav-mobile-acc-panel a:hover {
  color: rgba(255,255,255,0.95);
}

/* ============================================================
   REVIEWS HEADER — Mobile column-direction fix
   ============================================================ */

@media (max-width: 1040px) {
  .reviews-section .reviews-header > div:first-child { flex: 0 1 auto; }
}


/* ========================================================================
   COSTA RICA COUNTRY PAGE (template-country-costa-rica.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid--3, cp-layout, cp-body, cp-sidebar,
   toc-box, toc-cta-box, salary-table, savings-callout, interview-callout,
   persona-grid, persona-card, cities-grid, cities-grid--stacked, city-card,
   cp-cert, cert-card, cp-jobs-strip, cp-articles, cp-faq, ta-final-cta,
   final-trust, eyebrow, section-heading, breadcrumb, inline-link,
   btn-primary, btn-ghost-sm, btn-white, btn-ghost-light) are NOT
   redeclared.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-costa-rica,
#who,
#job-market,
#salary,
#finding-jobs,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }

/* ── Persona grid 3-col modifier ─────────────────────────────
   The shared .persona-grid is 2-col by default. Costa Rica has
   three audience profiles (gap-year, retirees, yoga teachers),
   so we add a 3-col modifier. Reusable on any page that needs
   three persona cards in a row. */
.persona-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Costa Rica responsive — page-specific only ──────────── */
@media (max-width: 1040px) {
  .persona-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   YOU CAN TEACH GRAMMAR BOOK PAGE (template-you-can-teach-grammar.php)
   Single-product book sales page modelled on the specialist course layout.
   Shared components (spec-page-wrap, spec-page-main, spec-page-aside,
   spec-hero-band, spec-hero-inner, spec-hero-tagline, spec-hero-sub,
   spec-hero-ctas, spec-trust-bar, spec-trust-items, spec-trust-item,
   spec-content-section, spec-body-text, spec-audience-layout,
   spec-audience-cards, spec-audience-item, crs-enroll-card,
   crs-enroll-body, crs-enroll-features, crs-enroll-cta, crs-enroll-trust,
   crs-pillars, crs-pillar, crs-module, crs-module-*, eyebrow,
   section-heading, section-lead, breadcrumb, cp-faq, faq-item,
   ta-final-cta, final-trust, ta-side-nav, bg-warm-white, bg-sand,
   btn-primary-lg, btn-ghost-lg, btn-teal) are NOT redeclared.
   ======================================================================== */

/* ── Hero bg override — book page specific ────────────────── */
.spec-hero-band--ycg::after {
  background-image: url('https://cdn-ontesol.pressidium.com/wp-content/uploads/2023/02/TESOL-classroom.jpg');
}

/* ── Book cover wrapper inside the sticky aside card ──────── */
/* Replaces the dark .crs-enroll-header on this page. Sand background
   gives the cover a "shelf" feel; padding keeps the image centred
   with room to breathe. */
.ycg-cover {
  background: var(--sand);
  padding: 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ycg-cover img {
  display: block;
  max-width: 100%;
  width: 220px;
  height: auto;
  box-shadow: 0 12px 32px rgba(5, 46, 48, 0.18);
  border-radius: 4px;
}

/* ── Spacing nudge — overview "Get it on Amazon" inline CTA ─ */
/* Re-uses .spec-hero-ctas (already a flex row of buttons) but needs
   top margin when used inside body content rather than the hero. */
.ycg-overview-ctas {
  margin-top: 24px;
}

/* ── Scroll-margin for new side-nav targets ───────────────── */
/* #overview, #faq already covered by other page-section rules. */
#approach,
#contents,
#audience { scroll-margin-top: 80px; }


/* ========================================================================
   CZECH REPUBLIC COUNTRY PAGE (template-country-czech-republic.php)
   Page-specific overrides only. Shared components (cp-hero, cp-stats,
   cp-requirements, cp-req-grid--3, cp-layout, cp-body, cp-sidebar,
   toc-box, toc-cta-box, salary-table, savings-callout, interview-callout,
   persona-grid, persona-grid--3, cities-grid, cities-grid--stacked,
   city-card, job-paths, job-path, cp-cert, cert-card, cp-jobs-strip,
   cp-articles, cp-faq, ta-final-cta, final-trust, eyebrow,
   section-heading, breadcrumb, btn-primary, btn-ghost-sm, btn-white,
   btn-ghost-light) are NOT redeclared.
   .persona-grid--3 was added with the Costa Rica page and is reused here.
   ======================================================================== */

/* ── Scroll-margin for TOC targets ───────────────────────── */
#why-czech,
#who,
#job-market,
#salary,
#visa,
#finding-jobs,
#cities,
#certification,
#jobs,
#faq,
#graduates { scroll-margin-top: 80px; }


/* ========================================================================
   404 PAGE (404.php)
   Custom error page that keeps visitors engaged and routes them to
   high-value pages. Reuses shared components — NOT redeclared here:
   ta-section, ta-wrap, bg-warm-white, section-intro, eyebrow, eyebrow-white,
   section-heading, section-lead, btn-primary-lg, btn-ghost-lg, ta-final-cta,
   ta-final-cta-inner, final-btns, final-trust, cp-cert-referral-card
   (+ --light / --dark), cp-cert-referral-label, cp-cert-referral-title,
   cp-cert-referral-arrow.
   New components below: e404-hero (+ inner / num / lead / search / ctas),
   e404-grid.
   ======================================================================== */

/* ── 404 hero — dark band, mirrors the ta-final-cta look ──────────── */
.e404-hero {
  background: var(--teal-deep);
  padding: var(--section-v) var(--section-h);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.e404-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% -10%, rgba(20,163,168,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.e404-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.e404-hero .eyebrow {
  justify-content: center;
  color: #7fe8eb;
}
.e404-hero .eyebrow::before {
  background: #7fe8eb;
}

/* Oversized 404 numeral — decorative, sits behind the heading */
.e404-num {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(96px, 18vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(127, 232, 235, 0.16);
  margin: 4px 0 -8px;
  user-select: none;
}

.e404-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.e404-hero h1 em {
  font-style: italic;
  color: #7fe8eb;
}

.e404-hero-lead {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}

/* ── Search form ──────────────────────────────────────────────────── */
.e404-search {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 36px;
}
.e404-search-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 15px 18px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  transition: border-color .15s, background .15s;
}
.e404-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.e404-search-input:focus {
  outline: none;
  border-color: #7fe8eb;
  background: rgba(255, 255, 255, 0.12);
}
.e404-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--teal-light);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 26px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.e404-search-btn:hover {
  background: #16bec3;
  transform: translateY(-1px);
}
.e404-search-btn svg {
  width: 18px;
  height: 18px;
}

.e404-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Destination grid (wraps reused cp-cert-referral-card items) ──── */
.e404-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .e404-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .e404-grid { grid-template-columns: 1fr; }
  .e404-search { flex-direction: column; }
  .e404-search-btn { padding: 14px 26px; justify-content: center; }
}

/* ========================================================================
   SEARCH RESULTS (search.php)
   ======================================================================== */
.search-hero .e404-search {
  margin: 6px 0 0;
}
 
/* Footer bottom: keep copyright left, group the two policy links on the right */
.ont-footer-bottom > span:first-child {
  margin-right: auto;
}

/* Divider before "Your Privacy Choices" */
.ont-footer-bottom .cc-footer-link::before {
  content: "|";
  margin: 0 12px;
  opacity: 0.4;
}

/* ========================================================================
   SOUTH KOREA COUNTRY PAGE — school-card deep-link CTAs
   (template-country-south-korea.php — EPIK & Hagwon accordion buttons)
   ======================================================================== */
.school-card-inner .btn-outline {
  margin-top: 22px;
}

/* ========================================================================
   FOUNDATIONAL VS PROFESSIONAL  (template-tesol-courses.php)
   Difference-intro alignment + head-to-head face-off + stat banner.
   Reuses (NOT redeclared): content-block, content-block--sand, cb-grid,
   cb-text, cmp-check, cmp-cross.
   ======================================================================== */

/* Aligned intro: heading + logos share row 1, both body columns share
   row 2 -> paragraphs start at the same height regardless of how the
   heading wraps. Modifier on the existing .cb-grid (which supplies the
   1fr 1fr columns + align-items:start). Only the gap is overridden so
   the heading sits tight above its paragraph. */
.cmp-diff-grid { gap: 0 56px; }
.cmp-diff-grid .cb-text h3 { margin-bottom: 18px; }

/* Logo cell: vertically centred against the heading band, horizontally
   centred within its column. */
.cmp-diff-logos {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.cmp-diff-logos img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

/* Head-to-head face-off */
.cmp-vs {
  max-width: var(--wrap-max);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cmp-vs-col {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.cmp-vs-col--us { border-color: rgba(13,115,119,0.28); }
.cmp-vs-head {
  padding: 18px 24px;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cmp-vs-col--us .cmp-vs-head    { background: var(--teal-deep); color: #fff; }
.cmp-vs-col--found .cmp-vs-head { background: var(--sand-deep); color: var(--muted); }
.cmp-vs-list { list-style: none; margin: 0; padding: 6px 24px 16px; }
.cmp-vs-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}
.cmp-vs-item:last-child { border-bottom: none; }
.cmp-vs-col--found .cmp-vs-item { color: var(--muted); }
.cmp-vs-item .cmp-check,
.cmp-vs-item .cmp-cross { margin-top: 1px; flex-shrink: 0; }

/* Social-proof stat banner */
.cmp-vs-stat {
  max-width: 820px;
  margin: 28px auto 0;
  text-align: center;
  background: var(--teal-pale);
  border-radius: 14px;
  padding: 24px 32px;
  font-family: 'Fraunces', serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.cmp-vs-stat strong { color: var(--teal); }

/* Responsive: stack to one column; reorder so the badges land right
   after the paragraph that names ACCET / TESL Canada. */
@media (max-width: 760px) {
  .cmp-diff-grid { grid-template-columns: 1fr; }
  .cmp-diff-grid > :nth-child(1) { order: 1; }  /* heading */
  .cmp-diff-grid > :nth-child(3) { order: 2; }  /* foundational paras */
  .cmp-diff-grid > :nth-child(4) { order: 3; }  /* professional paras */
  .cmp-diff-logos { order: 4; align-self: auto; margin-top: 6px; }
  .cmp-vs { grid-template-columns: 1fr; }
}

/* ========================================================================
   REQUEST A BROCHURE (template-request-brochure.php)
   Lead-capture landing page for the OnTESOL course brochure.
   ======================================================================== */

/* Heading block above the 3 why-pillar cards */
.rb-why-head { margin-bottom: 36px; }

/* ========================================================================
   TESOL GUIDE (post 107064) — in-article Table of Contents
   Single-post-only enhancement. 
   ======================================================================== */
.post-sb-links a.is-active {
  color: var(--teal);
  font-weight: 600;
  background: var(--teal-pale);
}

/* ========================================================================
   SIDEBAR "BROWSE ALL" LINK  (single.php — abroad sidebar)
   Placement-only tweak on the reused .esl-view-all component.
   ======================================================================== */
.post-sb-box .esl-view-all {
  margin-top: 14px;
}

/* ============================================================
   DESTINATION TABLE — PER-CONTINENT BLOCKS
   For the "All destinations" table in template-teach-abroad.php.
   Each continent = head bar + intro copy (full-width, wrap to
   viewport) + a mobile scroll hint + its own .dest-table that
   scrolls horizontally. Copy lives OUTSIDE the scroll container
   so it never overflows and iOS doesn't inflate its font on mobile.
   ============================================================ */

.dest-region {
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.dest-region:last-child { margin-bottom: 0; }

.dest-region-head {
  background: var(--teal-deep);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 13px 20px;
}

.dest-region-copy {
  background: var(--warm-white);
  padding: 18px 22px 20px;
}
.dest-region-desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  max-width: 90ch;
}
.dest-region-desc + .dest-region-desc { margin-top: 10px; }

/* Per-region table: kill inherited margin + corner radius (the
   .dest-region card owns the rounding) and recolor the header
   strip from the dark default to the faint label look. */
.dest-region .dest-table-wrap { margin-top: 0; }
.dest-region-table { border-radius: 0; }
.dest-region-table th {
  background: var(--teal-xpale);
  color: var(--muted);
  letter-spacing: .07em;
  padding: 9px 20px;
  border-bottom: 1px solid var(--rule);
}

/* Mobile-only horizontal-scroll affordance */
@keyframes dest-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.dest-region-scrollhint { display: none; }

@media (max-width: 640px) {
  .dest-region-head { font-size: 11px; padding: 12px 16px; }
  .dest-region-copy { padding: 16px 16px 18px; }
  .dest-region-desc { font-size: 13px; line-height: 1.6; }

  .dest-region-scrollhint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 2px 16px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
  }
  .dest-scroll-arrow {
    font-size: 15px;
    line-height: 1;
    color: var(--teal);
    animation: dest-nudge 1.4s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-scroll-arrow { animation: none; }
}

/* ============================================================
   FAQ ANSWER — RICH CONTENT (multi-paragraph + bullet lists)
   Additive styling for <p>/<ul>/<li> inside the shared
   .faq-a-inner. Inherits font-size/color/line-height from
   .faq-a-inner. No prior rules exist for these child elements.
   NOTE: .faq-a-inner is shared across all FAQ pages — this is
   additive and safe (single-<p> answers net to zero margin).
   ============================================================ */
.faq-a-inner p { margin: 0 0 12px; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner ul { list-style: none; margin: 0 0 12px; padding: 0; }
.faq-a-inner ul:last-child { margin-bottom: 0; }
.faq-a-inner li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.faq-a-inner li:last-child { margin-bottom: 0; }
.faq-a-inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}