/* Orange Language Institute — ported from the Claude Design handoff */

:root {
  --bg: #FFF8F0;
  --ink: #2C1A0F;
  --ink2: #4A3324;
  --muted: #6B5646;
  --soft: #7A6251;
  --soft2: #765D4C;
  --amber-ink: #8A5A2E;
  --orange: #F26F14;
  --orange-deep: #B34508;
  --orange-dark: #973603;
  --band: #B34508;
  --tint: #FFF3E6;
  --tint2: #FFE9D2;
  --beige: #F7EDE0;
  --green: #2F7D53;
  --green-tint: #E9F3EB;
  --dark: #3A2113;
  --line: rgba(44, 26, 15, .06);
  --line2: rgba(44, 26, 15, .07);
  --line3: rgba(44, 26, 15, .11);
  --line4: rgba(44, 26, 15, .13);
  --fd: 'Rubik', 'Vazirmatn', system-ui, sans-serif;
  --fb: 'Plus Jakarta Sans', 'Vazirmatn', system-ui, sans-serif;
}
html[lang="fa"] {
  --fd: 'Vazirmatn', 'Rubik', system-ui, sans-serif;
  --fb: 'Vazirmatn', 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
a { color: var(--orange-deep); text-decoration: none; }
a:hover { color: var(--orange-dark); }
button, input, textarea, select { font-family: inherit; }
img, video { max-width: 100%; display: block; }
::selection { background: #FFD9B0; color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green) !important;
}

.mono { font: 500 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #C2A896; }

@keyframes omRise { from { transform: translateY(18px); } to { transform: none; } }
[data-reveal][data-hide] { opacity: 0; }
[data-reveal].om-in { animation: omRise .75s cubic-bezier(.2, .75, .25, 1) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal][data-hide] { opacity: 1; }
  [data-reveal].om-in { animation: none; }
  .modal { animation: none; }
  .testi-track, .quiz-bar i { transition: none; }
}

.wrap { max-width: 1280px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--fb); text-align: center;
  transition: transform .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--orange-deep); color: #fff; padding: 18px 30px; font-size: 16px; }
.btn-primary:hover { background: #7D2B02; transform: translateY(-2px); color: #fff; }
.btn-primary.sm { padding: 13px 22px; font-size: 14.5px; }
.btn-primary.md { padding: 16px 22px; }
.btn-ghost {
  background: #fff; color: var(--ink); border: 1.5px solid var(--line4);
  padding: 18px 30px; font-size: 16px;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-deep); }
.btn-ghost.sm { padding: 15px 24px; font-size: 14.5px; }
.btn-cream { background: var(--bg); color: var(--orange-dark); padding: 18px 30px; font-size: 16px; }
.btn-cream:hover { transform: translateY(-2px); color: var(--orange-dark); }
.btn-cream.dark-ink { color: var(--dark); padding: 16px 28px; }
.btn-outline-cream {
  background: transparent; color: var(--bg);
  border: 1.5px solid rgba(255, 248, 240, .4); padding: 18px 30px; font-size: 16px;
}
.btn-outline-cream:hover { color: var(--bg); }
.btn-wa { background: #25D366; color: #08331A; padding: 16px 26px; }
.btn-wa:hover { color: #08331A; }
.btn-wa .dot { width: 9px; height: 9px; border-radius: 999px; background: #08331A; display: block; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  background: rgba(255, 248, 240, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line2);
}
.site-header .bar {
  max-width: 1280px; margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 48px);
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; min-height: 44px; cursor: pointer; flex: 0 0 auto; }
.brand-mark {
  display: block; width: 42px; height: 42px; flex: 0 0 auto;
  transition: transform .2s ease;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font: 600 19px/1 var(--fd); letter-spacing: -.02em; color: var(--ink); }
.brand-name span {
  font: 500 9.5px/1.4 var(--fb); letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); margin-top: 3px;
}
html[lang="fa"] .brand-name span { letter-spacing: 0; }

.main-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.main-nav a {
  padding: 9px 13px; border-radius: 999px;
  font: 500 14.5px/1 var(--fb); color: var(--ink2);
}
.main-nav a:hover { background: var(--tint2); color: var(--orange-dark); }
.main-nav a[aria-current="page"] { background: var(--tint2); color: var(--orange-dark); }
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lang-btn {
  display: flex; align-items: center; gap: 7px; background: #fff;
  border: 1.5px solid var(--line3); border-radius: 999px; padding: 9px 14px;
  min-width: 44px; min-height: 44px; justify-content: center;
  cursor: pointer; font: 600 13px/1 var(--fb); color: var(--ink);
}
.lang-btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.burger {
  width: 44px; height: 44px; border-radius: 14px; background: #fff;
  border: 1.5px solid var(--line3); cursor: pointer;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span { width: 17px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line2); background: var(--bg);
  padding: 14px clamp(18px, 4vw, 48px) 22px;
  flex-direction: column; gap: 4px;
}
.mobile-nav a {
  min-height: 44px; padding: 14px 12px; border-radius: 14px;
  display: flex; align-items: center;
  font: 500 16px/1 var(--fb); color: var(--ink);
  border-bottom: 1px solid rgba(44, 26, 15, .05);
}
.mobile-nav a[aria-current="page"] { color: var(--orange-deep); background: var(--tint); }
.mobile-nav .btn { margin-top: 12px; }
.mobile-nav.open {
  display: flex; max-height: calc(100dvh - 73px); overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 959.98px) {
  .main-nav, .header-actions .book-btn { display: none; }
  .burger { display: flex; }
}
@media (min-width: 960px) {
  .mobile-nav { display: none !important; }
}
@media (min-width: 960px) and (max-width: 1119.98px) {
  .site-header .bar { gap: 12px; }
  .main-nav a { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
  .header-actions .book-btn { display: none; }
}

/* ---------- sections ---------- */
.sec { padding: clamp(90px, 10vw, 152px) clamp(20px, 5vw, 56px); }
.sec-tight { padding: clamp(90px, 10vw, 144px) clamp(20px, 5vw, 56px); }
main > section[id] { scroll-margin-top: 92px; }
.eyebrow {
  font: 600 12px/1 var(--fb); letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-deep);
}
html[lang="fa"] .eyebrow { letter-spacing: 0; }
.eyebrow.green { color: var(--green); }
.eyebrow.amber { color: #FFB65C; }
.h-lg {
  margin: 16px 0 0; font: 600 clamp(30px, 4vw, 48px)/1.1 var(--fd);
  letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.sub {
  margin: 18px 0 0; font: 400 clamp(15.5px, 1.4vw, 17.5px)/1.65 var(--fb);
  color: var(--muted); text-wrap: pretty;
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 48px) clamp(56px, 7vw, 96px);
  background: radial-gradient(90% 70% at 80% 0%, #FFEEDB 0%, rgba(255, 238, 219, 0) 64%), var(--bg);
}
.hero .grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid rgba(217, 83, 10, .18); border-radius: 999px; padding: 8px 15px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); display: block; }
.badge span { font: 600 12.5px/1 var(--fb); color: var(--ink2); }
.hero h1 {
  margin: 22px 0 0; font: 600 clamp(38px, 6.2vw, 68px)/1.06 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.hero h1 .accent { color: var(--orange-deep); }
.hero .sub { margin: 22px 0 0; max-width: 52ch; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.66; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 20px; background: var(--beige);
}
.hero-video,
.hero-video-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video-fallback > * { width: 100%; height: 100%; }
.hero-video {
  z-index: 1; border-radius: inherit; object-fit: cover; object-position: center;
}
.hero-media.video-failed .hero-video { display: none; }
.hero-video-toggle {
  position: absolute; z-index: 2; inset-block-end: 14px; inset-inline-end: 14px;
  min-width: 44px; min-height: 44px; padding: 10px 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .62); border-radius: 999px;
  background: rgba(44, 26, 15, .84); color: #fff; cursor: pointer;
  font: 600 13px/1 var(--fb); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- stats ---------- */
.stats-band { padding: 0 clamp(18px, 4vw, 48px); margin-top: -28px; position: relative; z-index: 2; }
.stats-card {
  max-width: 1280px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(24px, 3vw, 38px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px;
}
.stat { padding: 14px 18px; border-radius: 20px; text-align: center; transition: background .25s; }
.stat:hover { background: var(--tint); }
.stat .n { font: 600 clamp(30px, 3.4vw, 42px)/1 var(--fd); letter-spacing: -.02em; color: var(--orange-deep); }
.stat .l { margin-top: 9px; font: 500 13.5px/1.45 var(--fb); color: var(--muted); }

/* ---------- why cards ---------- */
.card-grid {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px;
}
.why-card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(24px, 2.4vw, 32px); transition: border-color .25s;
}
.why-card:hover { border-color: rgba(242, 111, 20, .4); }
.why-card .icon {
  width: 50px; height: 50px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.why-card .icon i { width: 15px; height: 15px; border-radius: 5px; transform: rotate(45deg); }
.why-card h3 { margin: 20px 0 0; font: 600 20px/1.3 var(--fd); color: var(--ink); }
.why-card p { margin: 11px 0 0; font: 400 15px/1.62 var(--fb); color: var(--muted); text-wrap: pretty; }

/* ---------- how ---------- */
.how { background: var(--beige); }
.how .grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.how .sticky-col { position: sticky; top: 100px; }
@media (max-width: 767.98px) { .how .sticky-col { position: static; } }
.how .sub { max-width: 44ch; }
.how-photo { margin-top: 28px; aspect-ratio: 4 / 3; max-width: 460px; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; flex: 0 0 auto; }
.step .num {
  width: 44px; height: 44px; border-radius: 999px; background: #fff;
  border: 1.5px solid rgba(217, 83, 10, .28);
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--fd); color: var(--orange-deep);
}
.step .rail i { flex: 1; width: 2px; background: rgba(44, 26, 15, .09); min-height: 18px; }
.step .body { padding-bottom: 34px; }
.step h3 { margin: 10px 0 0; font: 600 19px/1.3 var(--fd); color: var(--ink); }
.step p { margin: 8px 0 0; max-width: 46ch; font: 400 15px/1.62 var(--fb); color: var(--muted); text-wrap: pretty; }

/* ---------- languages ---------- */
.languages { background: var(--band); }
.languages-shell {
  padding: clamp(42px, 5vw, 72px);
  background: linear-gradient(145deg, #fff 0%, var(--tint) 100%);
  border: 1px solid rgba(255, 248, 240, .5); border-radius: 38px;
  box-shadow: 0 26px 70px rgba(72, 41, 20, .26);
}
.lang-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; }
.lang-head > div { max-width: 600px; }
.lang-grid {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px;
}
.lang-card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .25s;
  box-shadow: 0 14px 30px rgba(72, 41, 20, .08);
}
.lang-card:hover { border-color: rgba(242, 111, 20, .4); }
.lang-card .photo { aspect-ratio: 16 / 10; padding: 12px 12px 0; }
.lang-card .inner { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.lang-card .name-row { display: flex; align-items: center; gap: 10px; }
.lang-card h3 { margin: 0; font: 600 24px/1.2 var(--fd); color: var(--ink); }
.lang-card .native { font: 500 13px/1 var(--fb); color: var(--soft); }
.lang-card .blurb { margin: 12px 0 0; font: 400 14.8px/1.62 var(--fb); color: var(--muted); text-wrap: pretty; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tag {
  background: var(--tint); border: 1px solid rgba(217, 83, 10, .14); border-radius: 999px;
  padding: 7px 12px; font: 500 12.5px/1 var(--fb); color: var(--amber-ink);
}

/* ---------- current classes ---------- */
.current-classes { background: var(--beige); }
.classes-head {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between;
}
.classes-head > div { max-width: 700px; }
.classes-head .sub { max-width: 62ch; }
.current-class-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px;
}
.current-class-card {
  min-width: 0; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px;
}
.current-class-card h3 { margin: 0; font: 600 20px/1.3 var(--fd); color: var(--ink); }
.course-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.course-list li {
  max-width: 100%; padding: 8px 12px; background: var(--green-tint); border: 1px solid rgba(47, 125, 83, .16);
  border-radius: 999px; color: var(--green); font: 600 12.5px/1.25 var(--fb); overflow-wrap: anywhere;
}

/* ---------- SEO landing pages ---------- */
.seo-main { background: var(--bg); }
.seo-hero {
  padding: clamp(58px, 7vw, 104px) clamp(18px, 4vw, 48px) clamp(54px, 7vw, 92px);
  background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%);
}
.seo-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.seo-hero-copy h1 {
  margin: 16px 0 0; max-width: 12ch;
  font: 600 clamp(38px, 6vw, 66px)/1.05 var(--fd);
  letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.seo-hero-copy .sub { max-width: 60ch; }
.seo-facts {
  margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.seo-facts div {
  min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 18px;
}
.seo-facts dt {
  margin: 0; font: 700 11px/1.2 var(--fb); color: var(--orange-deep);
  text-transform: uppercase; letter-spacing: .1em;
}
html[lang="fa"] .seo-facts dt { letter-spacing: 0; }
.seo-facts dd {
  margin: 8px 0 0; font: 600 14px/1.45 var(--fd); color: var(--ink);
  overflow-wrap: anywhere;
}
.seo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.seo-hero-media {
  aspect-ratio: 16 / 10; min-height: 280px; overflow: hidden; border-radius: 26px;
  background: var(--beige); box-shadow: 0 22px 60px rgba(72, 41, 20, .18);
}
.seo-section { padding: clamp(58px, 7vw, 96px) clamp(20px, 5vw, 56px); }
.seo-highlight-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.seo-highlight {
  min-width: 0; padding: 25px; background: #fff; border: 1px solid var(--line);
  border-radius: 22px;
}
.seo-highlight span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; background: var(--green-tint);
  color: var(--green); font: 700 12px/1 var(--fb);
}
.seo-highlight h2 {
  margin: 18px 0 0; font: 600 clamp(19px, 2vw, 24px)/1.24 var(--fd);
  color: var(--ink); text-wrap: balance;
}
.seo-body-band { background: var(--beige); }
.seo-body-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.seo-body-card {
  min-width: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(24px, 3vw, 34px);
}
.seo-body-card h2 { margin: 0; font: 600 23px/1.25 var(--fd); color: var(--ink); }
.seo-body-card p {
  margin: 13px 0 0; font: 400 15.5px/1.7 var(--fb); color: var(--muted);
  text-wrap: pretty;
}
.seo-faq { padding-top: clamp(58px, 7vw, 96px); }

/* ---------- SEO guide pages ---------- */
.guide-main { background: var(--bg); }
.guide-index-hero {
  padding: clamp(72px, 9vw, 124px) clamp(18px, 4vw, 48px) clamp(54px, 7vw, 84px);
}
.guide-index-head {
  max-width: 900px;
}
.guide-index-head h1 {
  margin: 16px 0 0; max-width: 13ch;
  font: 600 clamp(40px, 5.8vw, 72px)/1.02 var(--fd);
  color: var(--ink); text-wrap: balance;
}
.guide-index-head .sub { max-width: 66ch; }
.guide-hero {
  padding: clamp(58px, 7vw, 104px) clamp(18px, 4vw, 48px) clamp(46px, 6vw, 78px);
  background: linear-gradient(180deg, var(--green-tint) 0%, var(--bg) 100%);
}
.guide-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.guide-head h1 {
  margin: 16px 0 0; max-width: 15ch;
  font: 600 clamp(36px, 5.4vw, 64px)/1.06 var(--fd);
  color: var(--ink); text-wrap: balance;
}
.guide-head .sub { max-width: 66ch; }
.guide-summary {
  min-width: 0; padding: clamp(24px, 3vw, 34px); background: #fff;
  border: 1px solid var(--line); border-radius: 22px;
}
.guide-summary h2 { margin: 0; font: 600 21px/1.25 var(--fd); color: var(--ink); }
.guide-summary ol {
  margin: 20px 0 0; padding: 0; list-style: none; counter-reset: guide;
  display: grid; gap: 12px;
}
.guide-summary li {
  counter-increment: guide; display: grid; grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px; align-items: start; font: 500 14px/1.45 var(--fb); color: var(--muted);
}
.guide-summary li::before {
  content: counter(guide); display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: var(--tint);
  color: var(--orange-deep); font: 700 12px/1 var(--fb);
}
.guide-body {
  max-width: 930px; padding: clamp(42px, 6vw, 72px) clamp(18px, 4vw, 48px);
  display: grid; gap: 14px;
}
.guide-section {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px;
  padding: clamp(24px, 3vw, 34px); background: #fff; border: 1px solid var(--line);
  border-radius: 22px;
}
.guide-section > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; background: var(--green-tint);
  color: var(--green); font: 700 13px/1 var(--fb);
}
.guide-section h2 { margin: 0; font: 600 clamp(22px, 2.5vw, 30px)/1.22 var(--fd); color: var(--ink); }
.guide-section p {
  margin: 12px 0 0; font: 400 16px/1.78 var(--fb); color: var(--muted);
  text-wrap: pretty;
}
.guide-related { padding: clamp(58px, 7vw, 96px) clamp(20px, 5vw, 56px); background: var(--beige); }
.guide-index-list { background: #fff; padding-top: clamp(42px, 5vw, 72px); }
.seo-guide-related { background: #fff; padding-top: 0; }
.guide-card-grid {
  margin-top: clamp(28px, 4vw, 42px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px;
}
.guide-card {
  min-width: 0; display: block; padding: 24px; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; text-decoration: none; color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.guide-card span {
  display: inline-flex; color: var(--green); font: 700 11px/1.2 var(--fb);
  text-transform: uppercase; letter-spacing: .1em;
}
html[lang="fa"] .guide-card span { letter-spacing: 0; }
.guide-card h3 {
  margin: 12px 0 0; font: 600 20px/1.3 var(--fd); color: var(--ink);
  text-wrap: balance;
}
.guide-card p {
  margin: 10px 0 0; font: 400 14.5px/1.62 var(--fb); color: var(--muted);
  text-wrap: pretty;
}
.guide-card:hover {
  transform: translateY(-2px); border-color: rgba(47, 125, 83, .24);
  box-shadow: 0 16px 34px rgba(72, 41, 20, .08);
}

/* ---------- contact page ---------- */
.contact-main { background: var(--bg); }
.contact-hero {
  padding: clamp(62px, 8vw, 112px) clamp(18px, 4vw, 48px);
  background: linear-gradient(180deg, var(--green-tint) 0%, var(--bg) 100%);
}
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.contact-copy h1 {
  margin: 16px 0 0; max-width: 14ch;
  font: 600 clamp(38px, 5.6vw, 70px)/1.02 var(--fd);
  color: var(--ink); text-wrap: balance;
}
.contact-copy .sub { max-width: 66ch; }
.contact-panel,
.contact-action {
  min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px;
}
.contact-panel { padding: clamp(24px, 3vw, 34px); }
.contact-panel dl { margin: 0; display: grid; gap: 18px; }
.contact-panel div { display: grid; gap: 6px; }
.contact-panel dt {
  color: var(--green); font: 700 11px/1.2 var(--fb);
  text-transform: uppercase; letter-spacing: .1em;
}
html[lang="fa"] .contact-panel dt { letter-spacing: 0; }
.contact-panel dd {
  margin: 0; color: var(--ink); font: 500 15.5px/1.55 var(--fb);
}
.contact-panel a { color: var(--orange-deep); text-decoration: none; }
.contact-map-link {
  display: inline-flex; margin-top: 24px; font: 700 14px/1.2 var(--fb);
}
.contact-map { padding: 0 clamp(18px, 4vw, 48px) clamp(54px, 7vw, 90px); }
.contact-map-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px;
}
.contact-map-heading h2 {
  margin: 12px 0 0; font: 600 clamp(28px, 4vw, 44px)/1.12 var(--fd); color: var(--ink);
}
.contact-map iframe {
  display: block; width: 100%; height: clamp(320px, 44vw, 520px); border: 1px solid var(--line);
  border-radius: 20px; background: var(--green-tint);
}
.contact-section { padding: clamp(54px, 7vw, 90px) clamp(18px, 4vw, 48px); }
.contact-action-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.contact-action { padding: clamp(22px, 3vw, 30px); }
.contact-action span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; background: var(--tint);
  color: var(--orange-deep); font: 700 13px/1 var(--fb);
}
.contact-action h2 {
  margin: 18px 0 0; font: 600 23px/1.25 var(--fd); color: var(--ink);
}
.contact-action p {
  margin: 12px 0 20px; font: 400 15.5px/1.7 var(--fb); color: var(--muted);
  text-wrap: pretty;
}

/* ---------- ielts (dark) ---------- */
.ielts { background: var(--dark); }
.ielts .grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.ielts h2 {
  margin: 16px 0 0; font: 600 clamp(30px, 4vw, 46px)/1.12 var(--fd);
  letter-spacing: -.025em; color: var(--bg); text-wrap: balance;
}
.ielts .sub { max-width: 50ch; color: rgba(255, 248, 240, .78); line-height: 1.68; }
.ielts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 30px; }
.ielts-cell {
  background: rgba(255, 248, 240, .07); border: 1px solid rgba(255, 248, 240, .14);
  border-radius: 20px; padding: 20px;
}
.ielts-cell h3 { margin: 0; font: 600 16.5px/1.2 var(--fd); color: var(--bg); }
.ielts-cell p { margin: 8px 0 0; font: 400 13.5px/1.55 var(--fb); color: rgba(255, 248, 240, .7); }
.cap-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  background: rgba(255, 182, 92, .14); border: 1px solid rgba(255, 182, 92, .3);
  border-radius: 999px; padding: 11px 18px;
}
.cap-badge .dot { width: 8px; height: 8px; border-radius: 999px; background: #FFB65C; display: block; }
.cap-badge span { font: 600 13px/1 var(--fb); color: #FFD9B0; }
.ielts-photo { aspect-ratio: 4 / 5; }

/* ---------- adults ---------- */
.adults .grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.adults-photo { aspect-ratio: 5 / 4; }
.adults .sub { max-width: 50ch; }
@media (min-width: 768px) {
  .adults-photo { order: 1; }
  .adults-copy { order: 2; }
}
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.topic {
  background: var(--green-tint); border: 1px solid rgba(47, 125, 83, .16); border-radius: 999px;
  padding: 9px 15px; font: 500 13.5px/1 var(--fb); color: var(--green);
}

/* ---------- kids ---------- */
.kids {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, .12) 0 74px, transparent 75px),
    radial-gradient(circle at 92% 84%, rgba(255, 182, 92, .2) 0 118px, transparent 119px),
    var(--green);
}
.kids::before,
.kids::after {
  content: ''; position: absolute; z-index: -1; border-radius: 999px;
  border: 2px dashed rgba(255, 248, 240, .22); pointer-events: none;
}
.kids::before { width: 280px; height: 280px; inset: 40px auto auto -130px; }
.kids::after { width: 360px; height: 360px; inset: auto -160px -180px auto; }
.kids-shell {
  position: relative; padding: clamp(42px, 5vw, 72px); overflow: hidden;
  background: var(--tint2); border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 38px; box-shadow: 0 26px 70px rgba(26, 73, 50, .22);
}
.kids-mascot {
  position: absolute; z-index: 0; inset-block-start: -30px; inset-inline-end: -24px;
  width: clamp(112px, 12vw, 170px); height: auto; transform: rotate(8deg);
  pointer-events: none;
}
html[dir="rtl"] .kids-mascot { transform: rotate(-8deg); }
.kids-lead-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(28px, 5vw, 68px); align-items: end;
}
.kids .lead { max-width: 680px; }
.kids .lead h1 {
  margin: 16px 0 0; font: 600 clamp(32px, 4.4vw, 52px)/1.08 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.kids .lead .sub { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.68; }
.chip-row {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-end;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid rgba(44, 26, 15, .08); border-radius: 999px;
  padding: 11px 16px; font: 500 14px/1 var(--fb); color: var(--ink2);
}
.chip::before {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  border-radius: 999px; background: var(--orange);
}
.chip:nth-child(even) { background: var(--green-tint); }
.chip:nth-child(even)::before { background: var(--green); }
.kids-media-head { position: relative; z-index: 1; margin-top: clamp(46px, 6vw, 76px); max-width: 700px; }
.kids-media-head h2 {
  margin: 0; font: 600 clamp(25px, 3vw, 36px)/1.15 var(--fd);
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.kids-media-head p {
  margin: 12px 0 0; font: 400 15.5px/1.65 var(--fb); color: var(--muted); text-wrap: pretty;
}
.kids-photo-grid,
.kids-video-grid { position: relative; z-index: 1; margin: 26px 0 0; padding: 0; list-style: none; }
.kids-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 18px; align-items: start;
}
.kids-photo-card {
  margin: 0; padding: 8px; overflow: hidden; background: #fff;
  border: 1px solid rgba(44, 26, 15, .08); border-radius: 24px;
  box-shadow: 0 14px 30px rgba(72, 41, 20, .09);
}
.kids-photo-grid > li:nth-child(3n + 1) { transform: rotate(-1deg); }
.kids-photo-grid > li:nth-child(3n + 2) { transform: rotate(1deg); }
html[dir="rtl"] .kids-photo-grid > li:nth-child(3n + 1) { transform: rotate(1deg); }
html[dir="rtl"] .kids-photo-grid > li:nth-child(3n + 2) { transform: rotate(-1deg); }
.kids-photo-card > img,
.kids-photo-card > .media {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 17px; object-fit: cover;
}
.kids-photo-card figcaption {
  padding: 12px 10px 8px; font: 600 13.5px/1.4 var(--fb); color: var(--ink2);
}
.kids-video-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.kids-video-card { grid-column: span 4; min-width: 0; }
.kids-video-card:first-child,
.kids-video-card:nth-child(2) { grid-column: span 6; }
.kids-video-card figure {
  margin: 0; padding: 8px; overflow: hidden;
  background: #fff; border: 1px solid rgba(44, 26, 15, .08); border-radius: 24px;
}
.kids-video-card video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 17px; background: var(--dark);
}
.kids-video-card video:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.kids-video-card figcaption {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px;
  font: 600 13.5px/1.4 var(--fb); color: var(--ink2);
}
.kids-video-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 999px;
  background: var(--tint2); color: var(--orange-deep); font-size: 11px;
}

/* ---------- phonics ---------- */
.phonics-preview { background: var(--beige); }
.phonics-preview-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(26px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 5vw, 56px); overflow: hidden;
  background: #fff; border: 1px solid var(--line3); border-radius: 32px;
  box-shadow: 0 22px 50px rgba(72, 41, 20, .08);
}
.phonics-preview-card > div { max-width: 760px; }
.phonics-preview-card .sub { max-width: 58ch; }

.phonics-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(242, 111, 20, .16) 0 110px, transparent 111px),
    radial-gradient(circle at 92% 82%, rgba(47, 125, 83, .12) 0 150px, transparent 151px),
    var(--bg);
}
.phonics-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
  gap: clamp(34px, 6vw, 80px); align-items: center;
}
.phonics-intro { max-width: 760px; }
.phonics-intro h1 {
  margin: 18px 0 0; font: 600 clamp(36px, 5.5vw, 66px)/1.06 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.phonics-intro .sub { max-width: 62ch; font-size: clamp(16px, 1.5vw, 19px); }
.phonics-glossary { margin: 0; display: grid; gap: 14px; }
.phonics-glossary > div {
  padding: clamp(22px, 3vw, 30px); background: #fff;
  border: 1px solid var(--line3); border-radius: 24px;
  box-shadow: 0 16px 34px rgba(72, 41, 20, .07);
}
.phonics-glossary dt { font: 600 19px/1.25 var(--fd); color: var(--orange-deep); }
.phonics-glossary dd { margin: 9px 0 0; font: 400 14.5px/1.68 var(--fb); color: var(--muted); }
.phonics-glossary bdi { white-space: nowrap; }

.phonics-directions { background: var(--beige); }
.phonics-section-head { max-width: 720px; }
.phonics-direction-grid {
  margin-top: clamp(28px, 4vw, 44px); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.phonics-direction-card {
  position: relative; padding: clamp(26px, 4vw, 42px); overflow: hidden;
  background: #fff; border: 1px solid var(--line3); border-radius: 28px;
}
.phonics-direction-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--tint2); color: var(--orange-deep); font: 600 13px/1 var(--fd);
}
.phonics-direction-card h3 { margin: 20px 0 0; font: 600 24px/1.2 var(--fd); color: var(--ink); }
.phonics-direction-card p { margin: 12px 0 0; font: 400 15px/1.68 var(--fb); color: var(--muted); }
.phonics-example {
  display: block; margin-top: 24px; padding: 15px 18px;
  background: var(--green-tint); border-radius: 15px;
  font: 600 clamp(18px, 2.4vw, 24px)/1.2 ui-monospace, Menlo, monospace;
  color: var(--green); text-align: center;
}
.phonics-scope-note {
  max-width: 850px; margin: 18px 0 0; padding: 17px 20px;
  border-inline-start: 4px solid var(--orange); border-radius: 12px;
  background: rgba(255, 255, 255, .68); font: 500 14px/1.65 var(--fb); color: var(--ink2);
}

.phonics-method { background: var(--bg); }
.phonics-method-grid {
  max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.phonics-method-grid.has-photo { max-width: 1280px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phonics-method .sub { max-width: 62ch; }
.phonics-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.phonics-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px;
}
.phonics-item .num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--fd); color: var(--orange-deep);
}
.phonics-item h3 { margin: 5px 0 0; font: 600 15.5px/1.25 var(--fd); color: var(--ink); }
.phonics-item p { margin: 6px 0 0; font: 400 14px/1.55 var(--fb); color: var(--muted); }
.phonics-photo { aspect-ratio: 4 / 3; }

.phonics-practice { background: var(--green); }
.phonics-practice-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.phonics-practice-head .h-lg { color: #fff; }
.phonics-practice-head .sub { color: rgba(255, 255, 255, .82); }
.phonics-practice-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.phonics-practice-card {
  padding: clamp(25px, 3.5vw, 38px); background: var(--green-tint);
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 26px;
}
.phonics-card-mark {
  display: block; width: 34px; height: 8px; border-radius: 999px; background: var(--orange);
}
.phonics-practice-card:nth-child(even) .phonics-card-mark { background: var(--green); }
.phonics-practice-card h2 { margin: 22px 0 0; font: 600 21px/1.26 var(--fd); color: var(--ink); }
.phonics-practice-card p { margin: 12px 0 0; font: 400 14.5px/1.7 var(--fb); color: var(--muted); }

.phonics-evidence { background: var(--beige); }
.phonics-evidence-card {
  padding: clamp(28px, 5vw, 54px); background: #fff;
  border: 1px solid var(--line3); border-radius: 30px;
}
.phonics-evidence-card h2 { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.2 var(--fd); color: var(--ink); }
.phonics-evidence-card p { margin: 12px 0 0; max-width: 70ch; font: 400 14.5px/1.68 var(--fb); color: var(--muted); }
.phonics-evidence-card ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.phonics-evidence-card li a {
  display: inline-flex; min-height: 44px; align-items: center;
  font: 600 14px/1.45 var(--fb); text-decoration: underline; text-underline-offset: 3px;
}
.phonics-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- results ---------- */
.results { background: var(--beige); }
.results-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px;
}
.result-tile { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.result-tile .n { font: 600 clamp(28px, 3.2vw, 38px)/1 var(--fd); color: var(--green); letter-spacing: -.02em; }
.result-tile p { margin: 12px 0 0; font: 500 14.5px/1.55 var(--fb); color: var(--ink2); }
.stories-grid {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px;
}
.story {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.story p { margin: 0; font: 400 16px/1.62 var(--fb); color: var(--ink); text-wrap: pretty; }
.person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.person .avatar { width: 44px; height: 44px; flex: 0 0 auto; }
.person .who b { display: block; font: 600 14.5px/1.2 var(--fb); color: var(--ink); }
.person .who span { display: block; font: 500 13px/1.3 var(--fb); color: var(--soft2); margin-top: 3px; }

/* ---------- gallery ---------- */
.gallery-cols { margin-top: clamp(32px, 4vw, 48px); columns: 280px; column-gap: 18px; }
.gallery-item { break-inside: avoid; margin-bottom: 18px; }

/* ---------- performances ---------- */
.perf { background: var(--tint); }
.perf .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 60px); align-items: center;
}
.perf .sub { max-width: 48ch; }
.perf-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px;
}
.perf-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 22px; box-shadow: 0 18px 44px rgba(44, 26, 15, .12);
}
.perf-gallery-video { grid-column: 1 / -1; }
.perf-video { aspect-ratio: 16 / 10; }

/* ---------- testimonials ---------- */
.testi .head { text-align: center; max-width: 620px; margin: 0 auto; }
.testi-viewport { margin-top: clamp(32px, 4vw, 48px); overflow: hidden; border-radius: 24px; }
.testi-track { display: flex; transition: transform .55s cubic-bezier(.3, .8, .25, 1); }
.testi-slide { flex: 0 0 100%; padding: 2px; }
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 4vw, 48px); }
.testi-card .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stars { display: flex; gap: 4px; }
.stars i { width: 13px; height: 13px; background: var(--orange); display: block; border-radius: 3px; transform: rotate(45deg); }
.testi-card blockquote { margin: 22px 0 0; font: 400 clamp(17px, 2vw, 22px)/1.55 var(--fd); color: var(--ink); text-wrap: pretty; }
.testi-card .person { margin-top: 28px; }
.testi-card .avatar { width: 52px; height: 52px; }
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.testi-arrow {
  width: 46px; height: 46px; border-radius: 999px; background: #fff;
  border: 1.5px solid rgba(44, 26, 15, .12); cursor: pointer;
  font: 500 18px/1 var(--fb); color: var(--ink);
}
.testi-arrow:hover { border-color: var(--orange); color: var(--orange-deep); }
.testi-dots { display: flex; gap: 8px; }
.testi-dots button {
  width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; padding: 0; position: relative;
}
.testi-dots button::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
  border-radius: 999px; background: rgba(44, 26, 15, .3);
  transform: translate(-50%, -50%); transition: width .3s, background .3s;
}
.testi-dots button.on::before { width: 26px; background: var(--orange-deep); }

/* ---------- faq ---------- */
.faq-sec { padding: 0 clamp(20px, 5vw, 56px) clamp(90px, 10vw, 144px); }
.faq-sec .head { text-align: center; }
.faq-list { max-width: 900px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line2); border-radius: 20px; overflow: hidden; }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; padding: 22px 26px; text-align: start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font: 600 16.5px/1.4 var(--fd); color: var(--ink); }
.faq-item summary .sign {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--tint);
  color: var(--orange-deep); display: flex; align-items: center; justify-content: center;
  font: 500 17px/1 var(--fb);
}
.faq-item .sign::before { content: '+'; }
.faq-item[open] .sign::before { content: '−'; }
.faq-item .answer {
  margin: 0; padding: 0 26px 24px;
  font: 400 15.5px/1.68 var(--fb); color: var(--muted); max-width: 70ch; text-wrap: pretty;
}

/* ---------- CTA band ---------- */
.cta-sec { padding: 0 clamp(20px, 5vw, 56px) clamp(90px, 10vw, 144px); }
.cta-band {
  max-width: 1280px; margin: 0 auto; background: var(--band); border-radius: 24px;
  padding: clamp(36px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px; align-items: center; overflow: hidden; position: relative;
}
.cta-band > div { position: relative; z-index: 1; }
.cta-band h2 {
  margin: 0; font: 600 clamp(28px, 3.8vw, 44px)/1.1 var(--fd);
  letter-spacing: -.025em; color: var(--bg); text-wrap: balance; position: relative;
}
.cta-band p { margin: 16px 0 0; max-width: 44ch; font: 400 16.5px/1.65 var(--fb); color: var(--bg); position: relative; }
.cta-band .actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------- media placeholders ---------- */
.media, .ph { width: 100%; height: 100%; border-radius: 20px; }
img.media, video.media { object-fit: cover; }
.ph {
  position: relative; overflow: hidden; background: #F4EBE1;
  border: 1px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 14px; text-align: center; min-height: 72px;
}
.ph .k { display: flex; align-items: center; gap: 7px; }
.ph .k i { width: 6px; height: 6px; border-radius: 999px; background: var(--orange); display: block; flex: 0 0 auto; }
.ph .k span {
  font: 600 12px/1.3 var(--fb); letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-ink);
}
.ph .l { font: 500 13px/1.55 var(--fb); color: var(--soft2); max-width: 36ch; }
.ph.compact { gap: 0; padding: 0; }
.ph.compact::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #D9BFA9; }
.avatar .media, .avatar .ph { border-radius: 999px; }
.avatar img.media { width: 100%; height: 100%; aspect-ratio: 1; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); padding: clamp(52px, 6vw, 84px) clamp(18px, 4vw, 48px) 34px; }
.site-footer .cols {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
}
.site-footer .brand-mark { width: 38px; height: 38px; }
.site-footer .brand-line { display: flex; align-items: center; gap: 11px; }
.site-footer .brand-line b { font: 600 18px/1 var(--fd); color: var(--bg); }
.site-footer .blurb { margin: 16px 0 0; max-width: 30ch; font: 400 14px/1.62 var(--fb); color: rgba(255, 248, 240, .55); }
.social-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.social-row a {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 248, 240, .08); border: 1px solid rgba(255, 248, 240, .14);
  min-height: 44px; border-radius: 999px; padding: 9px 15px;
  font: 600 12.5px/1 var(--fb); color: #FFD9B0;
}
.site-footer h3 {
  margin: 0; font: 600 12px/1.4 var(--fb); letter-spacing: .16em; text-transform: uppercase;
  color: #FFB65C;
}
html[lang="fa"] .site-footer h3 { letter-spacing: 0; }
.site-footer .links { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.site-footer .links a {
  min-height: 44px; display: flex; align-items: center;
  font: 400 14.2px/1.4 var(--fb); color: rgba(255, 248, 240, .7);
}
.site-footer .links a:hover { color: var(--bg); }
.site-footer .visit { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.site-footer .visit p { margin: 0; max-width: 26ch; font: 400 14.2px/1.6 var(--fb); color: rgba(255, 248, 240, .62); }
.site-footer .visit .phone { font: 600 16px/1.3 var(--fd); color: var(--bg); }
.site-footer .visit a {
  min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere;
  font: 400 14.2px/1.4 var(--fb); color: rgba(255, 248, 240, .7);
}
.site-footer .visit .hours { font: 500 12.5px/1.6 var(--fb); color: rgba(255, 248, 240, .62); margin-top: 6px; }
.news-form { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.news-form .news-field { flex: 1 1 150px; min-width: 0; }
.news-form input {
  width: 100%; min-width: 0;
  background: rgba(255, 248, 240, .07); border: 1.5px solid rgba(255, 248, 240, .16);
  border-radius: 999px; padding: 13px 18px;
  font: 400 14px/1.3 var(--fb); color: var(--bg); outline: none;
}
.news-form input:focus { border-color: #FFB65C; }
.news-form input::placeholder { color: rgba(255, 248, 240, .5); }
.news-form button {
  min-height: 44px; background: var(--orange-deep); color: #fff; border: none;
  border-radius: 999px; padding: 13px 22px; cursor: pointer; font: 600 14px/1 var(--fb);
}
.news-thanks { margin: 12px 0 0; font: 500 13px/1.4 var(--fb); color: #8FD3A8; }
.news-error { margin: 12px 0 0; font: 500 13px/1.5 var(--fb); color: #FFD9B0; }
.site-footer .base {
  max-width: 1280px; margin: clamp(36px, 4vw, 56px) auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 248, 240, .1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
}
.site-footer .base span { font: 400 12.5px/1.4 var(--fb); color: rgba(255, 248, 240, .62); }
.site-footer.placement-footer { padding: 24px 18px; }
.site-footer.placement-footer .base { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer.placement-footer .base a {
  min-height: 44px; display: inline-flex; align-items: center;
  font: 500 13px/1.3 var(--fb); color: rgba(255, 248, 240, .72);
}

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(44, 26, 15, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vw, 48px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 540px; background: var(--bg); border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
  animation: omRise .4s cubic-bezier(.2, .8, .25, 1) both;
}
.modal .head { background: var(--band); padding: clamp(24px, 3.4vw, 34px); position: relative; }
.modal .close {
  position: absolute; top: 18px; inset-inline-end: 18px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255, 248, 240, .18); border: none; cursor: pointer;
  color: var(--bg); font: 400 18px/1 var(--fb);
}
.modal .head .eyebrow { color: var(--bg); font-size: 11.5px; }
.modal .head .phone {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px;
  font: 600 clamp(26px, 4.4vw, 36px)/1.1 var(--fd); color: var(--bg); letter-spacing: -.02em;
}
.modal .head p { margin: 10px 0 0; font: 400 13.5px/1.5 var(--fb); color: var(--bg); }
.modal .head .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal .head .row a { min-height: 44px; }
.modal .head .row .btn-wa { padding: 13px 20px; font-size: 14px; }
.modal .head .row .mail {
  display: inline-flex; align-items: center; background: rgba(255, 248, 240, .16); color: var(--bg);
  border-radius: 999px; padding: 13px 20px; font: 600 14px/1 var(--fb);
}
.modal .body { padding: clamp(24px, 3.4vw, 34px); }
.modal .body .form-h {
  font: 600 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
html[lang="fa"] .modal .body .form-h { letter-spacing: 0; }
.contact-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.contact-form label { margin-bottom: -6px; }
.contact-form label > span { font: 600 13px/1.3 var(--fb); color: var(--ink2); }
.contact-form input, .contact-form textarea {
  background: #fff; border: 1.5px solid rgba(44, 26, 15, .1); border-radius: 14px;
  padding: 14px 16px; font: 400 15px/1.3 var(--fb); color: var(--ink); outline: none;
}
.contact-form textarea { line-height: 1.5; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange); }
.contact-form .btn { padding: 17px 24px; font-size: 15.5px; }
.sent-box {
  background: var(--green-tint); border: 1px solid rgba(47, 125, 83, .2); border-radius: 20px;
  padding: 24px; text-align: center;
}
.sent-box b { display: block; font: 600 17px/1.4 var(--fd); color: var(--green); }
.sent-box p { margin: 8px 0 0; font: 400 14px/1.6 var(--fb); color: #4A6B54; }
.error-box {
  margin-top: 16px; background: #FFF0EC; border: 1px solid rgba(151, 54, 3, .25);
  border-radius: 14px; padding: 14px 16px; font: 500 14px/1.6 var(--fb); color: #7D2B02;
}
.honeypot {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- teachers page ---------- */
.page-head { max-width: 680px; }
.page-head h1 {
  margin: 16px 0 0; font: 600 clamp(34px, 5vw, 58px)/1.06 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.page-head .sub { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.66; }
.teacher-portrait-section { margin-top: clamp(36px, 5vw, 60px); }
.teacher-portrait-grid {
  margin: 24px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.teacher-portrait-grid li {
  position: relative; min-width: 0; overflow: hidden; background: #fff;
  border: 1px solid rgba(44, 26, 15, .08); border-radius: 999px 999px 22px 22px;
  box-shadow: 0 12px 30px rgba(78, 38, 12, .07);
}
.teacher-portrait-grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: cover;
}
.teacher-portrait-meta {
  position: absolute; inset-inline: 12px; bottom: 12px;
  padding: 12px 14px; background: rgba(255, 251, 246, .94);
  border: 1px solid rgba(44, 26, 15, .08); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(44, 26, 15, .12); backdrop-filter: blur(8px);
  text-align: start;
}
.teacher-portrait-meta h3 {
  margin: 0; font: 650 clamp(15px, 1.5vw, 18px)/1.2 var(--fd); color: var(--ink);
}
.teacher-portrait-meta p {
  margin: 5px 0 0; font: 600 clamp(11px, 1vw, 13px)/1.35 var(--fb); color: var(--orange-deep);
}
.teacher-portrait-head { max-width: 620px; }
.teacher-portrait-head h2 {
  margin: 0; font: 600 clamp(25px, 3vw, 36px)/1.15 var(--fd);
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.teacher-portrait-head p {
  margin: 12px 0 0; font: 400 15.5px/1.65 var(--fb); color: var(--muted);
}
.group-h { margin: clamp(44px, 5vw, 72px) 0 0; font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--fd); color: var(--ink); letter-spacing: -.02em; }
.group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: clamp(44px, 5vw, 68px) 0 0; }
.group-head h2 { margin: 0; font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--fd); color: var(--ink); letter-spacing: -.02em; }
.group-head span { font: 500 14px/1 var(--fb); color: var(--soft); }
.mgmt-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px;
}
.mgmt-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.mgmt-card .photo { aspect-ratio: 4 / 3; padding: 12px 12px 0; }
.mgmt-card .inner { padding: 24px 26px 28px; }
.mgmt-card h3 { margin: 0; font: 600 19px/1.2 var(--fd); color: var(--ink); }
.mgmt-card .role { margin-top: 7px; font: 600 13.5px/1.3 var(--fb); color: var(--orange-deep); }
.mgmt-card p { margin: 12px 0 0; font: 400 14.5px/1.6 var(--fb); color: var(--muted); text-wrap: pretty; }
.teach-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px;
}
.teach-card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px;
  transition: border-color .25s;
}
.teach-card:hover { border-color: rgba(242, 111, 20, .4); }
.teach-card .id-row { display: flex; gap: 16px; align-items: center; }
.teach-card .avatar { width: 76px; height: 76px; flex: 0 0 auto; }
.teach-card h3 { margin: 0; font: 600 17.5px/1.2 var(--fd); color: var(--ink); }
.teach-card .role { margin-top: 6px; font: 600 13px/1.3 var(--fb); color: var(--orange-deep); }
.teach-card .langs { margin-top: 5px; font: 500 12.5px/1.3 var(--fb); color: var(--soft2); }
.teach-card .bio { margin: 16px 0 0; font: 400 14.2px/1.6 var(--fb); color: var(--muted); text-wrap: pretty; }
.teach-card .philosophy {
  margin: 12px 0 0; padding-inline-start: 14px;
  border-inline-start: 2px solid rgba(242, 111, 20, .35);
  font: italic 400 14px/1.55 var(--fb); color: var(--amber-ink);
}
.teach-card .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.teach-card .chips span { border-radius: 999px; padding: 6px 11px; font: 500 12px/1 var(--fb); }
.teach-card .chips .y { background: var(--tint); color: var(--amber-ink); }
.teach-card .chips .s { background: var(--green-tint); color: var(--green); }
.join-band {
  margin-top: clamp(48px, 6vw, 80px); background: var(--beige); border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px; align-items: center;
}
.join-band h2 { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.15 var(--fd); color: var(--ink); letter-spacing: -.02em; }
.join-band p { margin: 12px 0 0; max-width: 46ch; font: 400 15.5px/1.62 var(--fb); color: var(--muted); }
.join-band .end { display: flex; justify-content: flex-end; }

/* ---------- placement page ---------- */
.pl-main { padding: clamp(32px, 4vw, 56px) clamp(18px, 4vw, 48px) clamp(64px, 8vw, 96px); min-height: 80vh; }
.pl-wrap { max-width: 820px; margin: 0 auto; }
.pl-head { text-align: center; }
.pl-head h1 {
  margin: 0; font: 600 clamp(30px, 4.4vw, 50px)/1.08 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.pl-head .sub { margin: 12px auto 0; max-width: 56ch; font-size: 15.5px; }
.placement-gate {
  margin-top: clamp(28px, 3.5vw, 44px); padding: 22px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
}
.placement-lock {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px;
  background: var(--green-tint); color: var(--green); font: 700 18px/1 var(--fb);
}
.placement-gate b { display: block; font: 600 16px/1.3 var(--fd); color: var(--ink); }
.placement-gate p { margin: 5px 0 0; font: 400 13.5px/1.55 var(--fb); color: var(--muted); }
.placement-gate .btn { min-height: 44px; white-space: nowrap; }
.placement-step-label {
  font: 700 11.5px/1.2 var(--fb); color: var(--orange-deep);
  letter-spacing: .12em; text-transform: uppercase;
}
html[lang="fa"] .placement-step-label { letter-spacing: 0; }
.placement-copy { margin: 12px 0 0; font: 400 15px/1.65 var(--fb); color: var(--muted); }
.placement-contact .quiz-q { margin-top: 0; }
.placement-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.placement-fields {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(110px, .55fr);
  gap: 16px; align-items: start;
}
.placement-field { display: flex; flex-direction: column; gap: 8px; }
.placement-field label { font: 600 13px/1.3 var(--fb); color: var(--ink2); }
.placement-field input {
  width: 100%; min-width: 0; background: var(--bg);
  border: 1.5px solid rgba(44, 26, 15, .12); border-radius: 14px;
  padding: 15px 16px; font: 400 16px/1.3 var(--fb); color: var(--ink); outline: none;
}
.placement-field input:focus { border-color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(242, 111, 20, .12); }
.placement-field small { font: 400 12.5px/1.5 var(--fb); color: var(--soft2); }
.placement-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.placement-consent { flex: 1 1 auto; max-width: 52ch; margin: 0; font: 400 12.5px/1.55 var(--fb); color: var(--soft2); }
.placement-start { flex: 0 0 auto; min-width: 180px; }
.placement-error {
  padding: 12px 14px; border: 1px solid rgba(151, 54, 3, .22); border-radius: 12px;
  background: #FFF0EC; color: #7D2B02; font: 600 13.5px/1.55 var(--fb);
}
.placement-instructions {
  margin: 18px 0 -8px; padding: 0;
  color: var(--soft2); font: 500 13px/1.55 var(--fb);
}
.placement-age-note { margin-top: 18px; }
.placement-guardian {
  margin-top: 18px; padding: 14px; display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid rgba(44, 26, 15, .1); border-radius: 14px; background: var(--bg);
  font: 500 13px/1.55 var(--fb); color: var(--ink2); cursor: pointer;
}
.placement-guardian input { width: 19px; height: 19px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--orange-deep); }
.quiz-card {
  margin-top: clamp(20px, 2.5vw, 28px); background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(22px, 3vw, 36px); scroll-margin-top: 92px;
}
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz-top .prog { font: 600 13px/1 var(--fb); color: var(--soft2); }
.quiz-bar { margin-top: 14px; height: 8px; border-radius: 999px; background: var(--beige); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange-deep); width: 0; transition: width .45s cubic-bezier(.3, .8, .25, 1); }
.quiz-q { margin: 30px 0 0; font: 600 clamp(20px, 2.4vw, 27px)/1.35 var(--fd); color: var(--ink); text-wrap: pretty; }
.quiz-q:focus-visible,
.res-card h2:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; border-radius: 8px; }
.quiz-opts { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px; text-align: start;
  background: var(--bg); border: 1.5px solid rgba(44, 26, 15, .1); border-radius: 18px;
  padding: 17px 20px; cursor: pointer; transition: border-color .2s, background .2s;
}
.quiz-opt.on { background: var(--tint); border-color: var(--orange-deep); }
.quiz-opt .key {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  background: var(--beige); color: var(--soft2);
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--fb);
}
.quiz-opt.on .key { background: var(--orange-deep); color: #fff; }
.quiz-opt .txt { font: 500 15.5px/1.45 var(--fb); color: var(--ink); }
.quiz-opt.unknown { background: #FAF8F5; border-style: dashed; }
.quiz-opt.unknown .txt { color: var(--muted); }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.quiz-foot-end { justify-content: flex-end; }
.quiz-back {
  min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer;
  font: 600 14.5px/1 var(--fb); color: var(--soft2); padding: 12px 4px;
}
.quiz-next { background: var(--orange-deep); color: #fff; border: none; border-radius: 999px; padding: 16px 30px; cursor: pointer; font: 600 15px/1 var(--fb); }
.quiz-next[disabled] { opacity: .45; cursor: default; }
.pl-result {
  margin-top: clamp(20px, 2.5vw, 28px); display: flex; flex-direction: column;
  gap: 20px; scroll-margin-top: 92px;
}
.res-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 3.6vw, 48px); text-align: center; }
.res-card .eyebrow { color: var(--soft2); }
.level-ball {
  margin: 18px auto 0; width: 132px; height: 132px; border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #FFB65C, #F26F14 62%, #D9530A);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px -18px rgba(217, 83, 10, .7);
}
.level-ball span { font: 600 46px/1 var(--fd); color: #fff; letter-spacing: -.02em; }
.res-card h2 { margin: 22px 0 0; font: 600 clamp(24px, 3vw, 34px)/1.2 var(--fd); color: var(--ink); letter-spacing: -.02em; }
.res-card .blurb { margin: 12px auto 0; max-width: 50ch; font: 400 15.5px/1.65 var(--fb); color: var(--muted); text-wrap: pretty; }
.placement-score { margin: 10px 0 0; font: 600 13.5px/1.4 var(--fb); color: var(--soft2); }
.placement-class {
  max-width: 560px; margin: 26px auto 0; padding: 22px;
  border: 1px solid rgba(242, 111, 20, .22); border-radius: 18px; background: var(--tint);
}
.placement-class > span {
  display: block; font: 700 11.5px/1.2 var(--fb); letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-deep);
}
html[lang="fa"] .placement-class > span { letter-spacing: 0; }
.placement-class strong { display: block; margin-top: 9px; font: 600 22px/1.25 var(--fd); color: var(--ink); }
.placement-class p { margin: 10px 0 0; font: 400 14px/1.6 var(--fb); color: var(--muted); }
.placement-result-note {
  max-width: 560px; margin: 18px auto 0; padding: 16px 18px;
  border-radius: 14px; background: var(--green-tint); text-align: start;
}
.placement-scope { margin: 0; font: 400 13px/1.6 var(--fb); color: var(--muted); }
.placement-saved { margin: 5px 0 0; font: 600 13.5px/1.6 var(--fb); color: var(--green); }
.skill-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; text-align: start; }
.skill .row { display: flex; justify-content: space-between; gap: 8px; }
.skill .row b { font: 600 13px/1 var(--fb); color: var(--ink2); }
.skill .row span { font: 600 13px/1 var(--fb); color: var(--soft); }
.skill .bar { margin-top: 9px; height: 7px; border-radius: 999px; background: var(--beige); overflow: hidden; }
.skill .bar i { display: block; height: 100%; border-radius: 999px; }
.retake {
  min-height: 44px; margin-top: 18px; background: none; border: none; cursor: pointer;
  font: 600 14px/1 var(--fb); color: var(--soft2); text-decoration: underline;
}
/* ---------- careers page ---------- */
.car-main { padding: clamp(40px, 5vw, 72px) clamp(18px, 4vw, 48px) clamp(72px, 9vw, 120px); }
.car-grid h1 {
  margin: 16px 0 0; font: 600 clamp(32px, 4.6vw, 54px)/1.06 var(--fd);
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.car-grid > div > .sub { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.66; }
.car-wrap { max-width: 1120px; margin: 0 auto; }
.car-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 60px); align-items: start;
}
.car-values { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.car-value {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px;
}
.car-value i { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; background: var(--orange); transform: rotate(45deg); margin-top: 6px; }
.car-value h3 { margin: 0; font: 600 15.5px/1.3 var(--fd); color: var(--ink); }
.car-value p { margin: 6px 0 0; font: 400 14px/1.58 var(--fb); color: var(--muted); }
.car-photo { margin-top: 24px; aspect-ratio: 16 / 10; }
.apply-card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(24px, 3vw, 40px); position: sticky; top: 100px;
  scroll-margin-top: 92px;
}
@media (max-width: 767.98px) { .apply-card { position: static; } }
.apply-card h2 { margin: 0; font: 600 22px/1.25 var(--fd); color: var(--ink); }
.apply-card .note { margin: 8px 0 0; font: 400 14px/1.55 var(--fb); color: var(--soft2); }
.apply-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.apply-form label { display: flex; flex-direction: column; gap: 7px; }
.apply-form .apply-field { display: flex; flex-direction: column; gap: 7px; }
.apply-form label > span { font: 600 12.5px/1 var(--fb); color: var(--ink2); }
.apply-form input, .apply-form textarea {
  background: var(--bg); border: 1.5px solid rgba(44, 26, 15, .1); border-radius: 14px;
  padding: 14px 16px; font: 400 15px/1.3 var(--fb); color: var(--ink); outline: none;
}
.apply-form textarea { line-height: 1.5; resize: vertical; }
.apply-form input:focus, .apply-form textarea:focus { border-color: var(--orange); }
.file-drop {
  border: 1.5px dashed rgba(217, 83, 10, .35); background: var(--tint);
  border-radius: 16px; padding: 20px; text-align: center;
}
.file-drop input { font: 400 13px/1.4 var(--fb); color: var(--muted); max-width: 100%; background: none; border: none; padding: 0; }
.file-drop .hint { margin-top: 8px; font: 500 11.5px/1.5 var(--fb); color: var(--amber-ink); }
.apply-form .btn { margin-top: 4px; padding: 17px 24px; font-size: 15.5px; }
.apply-card .sent-box { margin-top: 22px; }

/* teachers page main padding */
.teachers-main { padding: clamp(48px, 6vw, 88px) clamp(18px, 4vw, 48px) clamp(72px, 9vw, 120px); }

@media (max-width: 959.98px) {
  .kids-lead-grid { grid-template-columns: 1fr; }
  .kids .lead { padding-inline-end: 90px; }
  .kids-video-card,
  .kids-video-card:first-child,
  .kids-video-card:nth-child(2) { grid-column: span 6; }
  .phonics-hero-grid,
  .phonics-method-grid.has-photo { grid-template-columns: 1fr; }
  .phonics-glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact-form input,
  .contact-form textarea,
  .apply-form input,
  .apply-form textarea,
  .file-drop input,
  .news-form input {
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  html { scroll-behavior: auto; }
  .sec,
  .sec-tight { padding: 64px 18px; }
  .faq-sec,
  .cta-sec { padding-inline: 18px; padding-bottom: 64px; }
  .hero { padding: 40px 18px 64px; }

  .stats-band { padding-inline: 18px; margin-top: -20px; }
  .stats-card { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 10px; }
  .stat { padding: 12px 6px; }
  .stat .n { font-size: 24px; }
  .stat .l { font-size: 12.5px; }

  .ielts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ielts-cell { padding: 16px; }

  .seo-hero { padding: 46px 18px 64px; }
  .seo-hero-grid,
  .seo-highlight-grid,
  .seo-body-grid { grid-template-columns: 1fr; }
  .seo-hero-copy h1 { max-width: 13ch; font-size: clamp(32px, 9vw, 44px); }
  .seo-facts { grid-template-columns: 1fr; }
  .seo-actions { flex-direction: column; }
  .seo-actions .btn { width: 100%; }
  .seo-hero-media { min-height: 210px; border-radius: 22px; }
  .seo-section { padding: 64px 18px; }
  .seo-highlight,
  .seo-body-card { border-radius: 20px; }
  .guide-hero { padding: 46px 18px 56px; }
  .guide-index-hero { padding: 46px 18px 44px; }
  .guide-index-head h1 { max-width: 12ch; font-size: clamp(32px, 9vw, 44px); }
  .guide-hero-grid { grid-template-columns: 1fr; }
  .guide-head h1 { max-width: 13ch; font-size: clamp(32px, 9vw, 44px); }
  .guide-summary,
  .guide-section,
  .guide-card { border-radius: 20px; }
  .guide-body { padding: 42px 18px; }
  .guide-section { grid-template-columns: 1fr; gap: 16px; }
  .guide-related { padding: 64px 18px; }
  .contact-hero { padding: 46px 18px 56px; }
  .contact-grid,
  .contact-action-grid { grid-template-columns: 1fr; }
  .contact-copy h1 { max-width: 12ch; font-size: clamp(32px, 9vw, 44px); }
  .contact-panel,
  .contact-action { border-radius: 20px; }
  .contact-map-heading { align-items: start; flex-direction: column; }
  .contact-map iframe { border-radius: 16px; }
  .contact-section { padding: 54px 18px; }

  .languages { padding-inline: 14px; }
  .languages-shell { padding: 30px 16px; border-radius: 26px; }
  .lang-head .btn { width: 100%; }

  .kids { padding-inline: 14px; }
  .kids-shell { padding: 30px 16px; border-radius: 26px; }
  .kids-mascot { width: 88px; inset-block-start: -16px; inset-inline-end: -12px; }
  .kids .lead { padding-inline-end: 54px; }
  .kids-photo-grid { grid-template-columns: 1fr; gap: 14px; }
  .kids-photo-grid > li:nth-child(n) { transform: none; }
  .kids-video-grid { gap: 14px; }
  .kids-video-card,
  .kids-video-card:first-child,
  .kids-video-card:nth-child(2) { grid-column: span 12; }

  .phonics-preview-card { grid-template-columns: 1fr; padding: 26px 22px; border-radius: 24px; }
  .phonics-preview-card .btn { width: 100%; }
  .phonics-intro h1 { font-size: clamp(32px, 9vw, 44px); }
  .phonics-glossary,
  .phonics-direction-grid,
  .phonics-practice-grid { grid-template-columns: 1fr; }
  .phonics-direction-card,
  .phonics-practice-card { border-radius: 22px; }
  .phonics-evidence-card { padding: 25px 20px; border-radius: 24px; }
  .phonics-actions { flex-direction: column; }
  .phonics-actions .btn { width: 100%; }

  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .result-tile { padding: 20px; }
  .result-tile .n { min-width: 0; font-size: 22px; overflow-wrap: anywhere; }

  .gallery-cols {
    columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-item { height: clamp(150px, 47vw, 200px) !important; margin: 0; }
  .teacher-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .teacher-portrait-grid li { border-radius: 999px 999px 16px 16px; }
  .teacher-portrait-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center;
  }
  .teacher-portrait-meta { inset-inline: 8px; bottom: 8px; padding: 9px 10px; border-radius: 11px; }
  .teacher-portrait-meta h3 { font-size: 14px; }
  .teacher-portrait-meta p { font-size: 11.5px; }

  .cta-band .actions,
  .join-band .end { justify-content: flex-start; }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .site-footer .cols > div:first-child,
  .site-footer .cols > #newsletter { grid-column: 1 / -1; }

  .modal-overlay {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .pl-main { padding: 24px 16px 64px; }
  .pl-head h1 { font-size: clamp(27px, 8vw, 30px); }
  .pl-head .sub { margin-top: 9px; font-size: 14.5px; line-height: 1.5; }
  .placement-contact { margin-top: 18px; padding: 20px; }
  .placement-form { margin-top: 18px; gap: 12px; }
  .placement-fields { grid-template-columns: 1fr; gap: 12px; }
  .placement-field { gap: 6px; }
  .placement-field input { padding: 13px 14px; }
  .placement-actions { align-items: stretch; flex-direction: column; gap: 12px; }

  .placement-gate { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .placement-gate .btn { grid-column: 1 / -1; width: 100%; }
  .placement-start { width: 100%; }

  html[lang="fa"] .hero h1,
  html[lang="fa"] .h-lg,
  html[lang="fa"] .ielts h2,
  html[lang="fa"] .kids .lead h1,
  html[lang="fa"] .phonics-intro h1,
  html[lang="fa"] .seo-hero-copy h1,
  html[lang="fa"] .guide-head h1,
  html[lang="fa"] .cta-band h2,
  html[lang="fa"] .page-head h1,
  html[lang="fa"] .teacher-portrait-head h2,
  html[lang="fa"] .join-band h2,
  html[lang="fa"] .pl-head h1,
  html[lang="fa"] .car-grid h1 {
    letter-spacing: 0;
    line-height: 1.22;
  }
}

@media (hover: none) {
  .btn:hover { transform: none; }
}

@media (hover: hover) {
  .quiz-opt:hover { border-color: var(--orange-deep); }
}

@media (max-width: 374.98px) {
  .results-grid { grid-template-columns: 1fr; }
}