/* ============================================================
   MYTECH Study Abroad — public website
   Design system. Palette derived from the brand logo (teal/aqua),
   with a restrained warm coral accent used only for emphasis.
   Mobile-first; everything scales up at >720px.
   ============================================================ */

:root {
  /* Brand palette (from logo) */
  --ink:        #0c2b2e;   /* primary text — deepest teal */
  --ink-soft:   #456265;   /* secondary text */
  --teal:       #1b8392;   /* brand primary */
  --teal-700:   #0f5f6b;
  --teal-900:   #0d3b41;
  --aqua-50:    #f3fafb;
  --aqua-100:   #e1f3f5;
  --aqua-200:   #c5e9ee;
  --line:       #d7e7e9;   /* hairlines / borders */
  --accent:     #ff7a59;   /* warm coral — emphasis only */
  --accent-deep:#e85f3d;
  --accent-soft:#ffe7df;
  --white:      #ffffff;
  --paper:      #f7fbfb;   /* page background (teal-tinted, not cream) */

  /* Effects */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(12,43,46,.06), 0 2px 8px rgba(12,43,46,.05);
  --shadow:    0 12px 30px rgba(12,43,46,.10);
  --shadow-lg: 0 24px 60px rgba(12,43,46,.16);
  --ring: 0 0 0 3px rgba(27,131,146,.30);

  /* Type */
  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1160px;
  --gut: clamp(18px, 5vw, 40px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(2.15rem, 7vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
p  { color: var(--ink-soft); }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--ink-soft); }

.eyebrow {
  font-family: var(--body);
  font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 9vw, 110px); }
.section--tint { background: linear-gradient(180deg, var(--aqua-50), var(--white)); }
.center { text-align: center; }
.section__head { max-width: 640px; margin-inline: auto; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head p { margin-top: .8rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--primary { background: var(--teal); color: var(--white); box-shadow: 0 8px 20px rgba(27,131,146,.28); }
.btn--primary:hover { background: var(--teal-700); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,131,146,.34); }
.btn--ghost { background: transparent; color: var(--teal-900); border-color: var(--line); }
.btn--ghost:hover { background: var(--white); border-color: var(--teal); transform: translateY(-2px); }
.btn--wa { background: #1fab53; color:#fff; box-shadow: 0 8px 20px rgba(31,171,83,.26); }
.btn--wa:hover { background:#198f44; transform: translateY(-2px); }
.btn--lg { padding: 1.1rem 1.8rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,251,251,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(247,251,251,.94); }
.site-header .wrap { max-width: 1280px; }
.nav { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; text-decoration: none; }
.brand img { height: 48px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--ink); letter-spacing: -.005em; }
.brand__sub { font-family: var(--display); font-weight: 600; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin-top: .22rem; }
.nav__links { display: none; margin-left: auto; align-items: center; gap: 1rem; flex-wrap: nowrap; }
.nav__links a { position: relative; font-weight: 500; color: var(--ink-soft); font-size: .92rem; white-space: nowrap; transition: color .15s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav__links a:hover { color: var(--teal); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: none; align-items: center; gap: .6rem; margin-left: 1rem; flex-shrink: 0; white-space: nowrap; }
.nav__login { font-weight: 600; color: var(--teal-900); padding: .55rem .9rem; border-radius: 999px; white-space: nowrap; transition: background .15s; }
.nav__login:hover { background: var(--aqua-100); }
@media (max-width: 400px) {
  .brand img { height: 42px; }
  .brand__name { font-size: 1.3rem; }
  .brand__sub { font-size: .57rem; letter-spacing: .15em; }
}
.nav__toggle {
  margin-left: auto; display: inline-flex; flex-direction: column; gap: 5px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 11px 10px;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: 70px 0 auto 0; z-index: 49;
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 1rem var(--gut) 1.4rem; box-shadow: var(--shadow);
  display: grid; gap: .3rem; transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: .22s ease;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a { padding: .85rem .4rem; font-weight: 600; border-bottom: 1px solid var(--aqua-100); color: var(--ink); }
.mobile-menu .btn { margin-top: .8rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(18px, 3.5vw, 38px); padding-bottom: clamp(26px, 4.5vw, 48px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    url("/assets/hero-bg.svg") no-repeat right center / contain,
    radial-gradient(60% 50% at 85% 0%, var(--aqua-100), transparent 70%),
    radial-gradient(50% 40% at 0% 30%, #fff3ee, transparent 70%);
}
.hero__grid { display: grid; gap: clamp(20px, 3.5vw, 40px); align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem .4rem .5rem;
  font-size: .85rem; font-weight: 600; color: var(--teal-900); box-shadow: var(--shadow-sm); margin-bottom: 1.2rem;
}
.hero__badge i { width: 9px; height: 9px; border-radius: 50%; background: #1fab53; box-shadow: 0 0 0 4px rgba(31,171,83,.18); }
.hero__topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; }
.hero__topbar .hero__badge { margin-bottom: 0; }
.btn-calc { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); color: var(--teal-900); border: 1.5px solid var(--teal); border-radius: 999px; padding: .55rem 1.05rem; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; }
.btn-calc:hover, .btn-calc:focus-visible { background: var(--teal); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-calc svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.85rem); margin-bottom: .6rem; }
.hero .lead { font-size: clamp(1rem, 1.9vw, 1.1rem); margin-bottom: 0; }
.hero h1 .u { position: relative; white-space: nowrap; color: var(--teal); }
.hero h1 .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .34em;
  background: var(--accent-soft); z-index: -1; border-radius: 4px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.stat .n { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--ink); line-height: 1; }
.stat .n b { color: var(--accent-deep); }
.stat .l { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; }

/* boarding-pass signature card */
.pass {
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); overflow: hidden; max-width: 420px; margin-inline: auto;
}
.pass__top { background: linear-gradient(135deg, var(--teal-900), var(--teal)); color: #fff; padding: 1.3rem 1.4rem; position: relative; }
.pass__top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 20px;
  background: radial-gradient(circle at 10px 10px, transparent 9px, var(--white) 10px) repeat-x; background-size: 22px 20px;
}
.pass__route { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.pass__route .dots { flex: 1; border-top: 2px dotted rgba(255,255,255,.6); position: relative; margin: 0 .4rem; }
.pass__route .dots::after { content: "\2708"; position: absolute; right: -2px; top: -.82em; font-size: 1rem; }
.pass__top small { opacity: .85; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.pass__body { padding: 1.2rem 1.4rem 1.5rem; display: grid; gap: .9rem; }
.pass__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.pass__field small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; color: var(--ink-soft); }
.pass__field b { font-family: var(--display); font-size: 1.02rem; }

/* ============================================================
   CARD GRIDS (services / countries / steps / features)
   ============================================================ */
.grid { display: grid; gap: 1.1rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--aqua-200); }
.card__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--aqua-100); color: var(--teal-700); margin-bottom: 1rem; }
.card__ic svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .96rem; }

/* country = luggage-tag motif */
.tag {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.3rem 1.2rem; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .2s;
  overflow: hidden;
}
.tag:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tag::before { content: ""; position: absolute; top: 14px; left: 14px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--aqua-200); }
.tag .flag { font-size: 2rem; line-height: 1; margin-bottom: .6rem; margin-left: 1.4rem; }
.flag .fi { border-radius: 4px; box-shadow: 0 0 0 1px rgba(12,43,46,.10); vertical-align: middle; }
.eyebrow .fi { font-size: 1.15em; border-radius: 2px; vertical-align: -0.14em; margin-right: .25em; box-shadow: 0 0 0 1px rgba(12,43,46,.12); }
.tag h3 { font-size: 1.12rem; }
.tag p { font-size: .88rem; margin-top: .15rem; }
.tag .arrow { margin-top: .8rem; color: var(--teal); font-weight: 600; font-size: .9rem; display: inline-flex; gap: .3rem; }

/* process steps with dotted flight path */
.steps { display: grid; gap: 1.3rem; position: relative; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; display: flex; gap: 1rem; align-items: flex-start; box-shadow: var(--shadow-sm); }
.step .num { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--teal-900); color: #fff; font-family: var(--display); font-weight: 800; display: grid; place-items: center; }
.step h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.step p { font-size: .94rem; }

/* ============================================================
   LEAD FORM
   ============================================================ */
.lead-section { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #fff; }
.lead-card { background: var(--white); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 4vw, 2.4rem); }
.lead-grid { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; }
.lead-section h2 { color: #fff; }
.lead-section .lead { color: rgba(255,255,255,.86); }
.lead-points { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: .7rem; }
.lead-points li { display: flex; gap: .6rem; align-items: flex-start; color: rgba(255,255,255,.92); font-weight: 500; }
.lead-points svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: .15rem; }

.field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--accent-deep); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; padding: .8rem .9rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--aqua-50); color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: var(--ring); }
.field textarea { resize: vertical; min-height: 92px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }
.form-msg { margin-top: .9rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: #e6f7ec; color: #14794a; border: 1px solid #b6e6c8; }
.form-msg.err { background: #fdecec; color: #b53535; border: 1px solid #f5c6c6; }
.form-success { display: none; text-align: center; padding: 1.5rem .5rem; }
.form-success.show { display: block; }
.form-success .tick { width: 64px; height: 64px; border-radius: 50%; background: #e6f7ec; color: #1fab53; display: grid; place-items: center; margin: 0 auto 1rem; }
.form-success .tick svg { width: 34px; height: 34px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: rgba(255,255,255,.78); padding-block: clamp(48px, 7vw, 72px) 0; }
.footer-grid { display: grid; gap: 2.2rem; }
.site-footer .brand { color: #fff; margin-bottom: 1rem; }
.site-footer .brand__name { color: #fff; }
.site-footer h4 { color: #fff; font-family: var(--body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 2.1; transition: color .15s; }
.site-footer a:hover { color: var(--accent); }
.foot-contact li { list-style: none; display: flex; gap: .6rem; margin-bottom: .7rem; font-size: .94rem; align-items: flex-start; }
.foot-contact svg { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: .25rem; }
.foot-list { list-style: none; padding: 0; }
.foot-bottom { margin-top: 2.6rem; border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.4rem 1.6rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.socials a:hover { background: var(--teal); }
.socials svg { width: 18px; height: 18px; }

/* ============================================================
   STICKY MOBILE ACTION BAR
   ============================================================ */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(12,43,46,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a { background: var(--white); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .6rem; font-size: .72rem; font-weight: 600; color: var(--ink); }
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar a.cta { background: var(--teal); color: #fff; }
.mobile-bar a.wa { color: #198f44; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

/* ============================================================
   RESPONSIVE — tablet & up
   ============================================================ */
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .nav__links, .nav__actions { display: flex; }
  .nav__toggle { display: none; }
}
@media (min-width: 960px) {
  .mobile-bar { display: none; }
  body { padding-bottom: 0 !important; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .lead-grid { grid-template-columns: 1fr 1.05fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
}
/* leave room for the sticky bar on phones */
@media (max-width: 959px) { body { padding-bottom: 64px; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Featured country tile + specialty pill (added in v110)
   ============================================================ */
.pill {
  display: inline-block; margin-left: 1.4rem; margin-bottom: .55rem;
  background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: .26rem .62rem; border-radius: 999px;
}
.tag--feature { background: linear-gradient(135deg, var(--teal-900), var(--teal)); border-color: transparent; }
.tag--feature::before { border-color: rgba(255,255,255,.45); }
.tag--feature h3 { color: #fff; }
.tag--feature p { color: rgba(255,255,255,.86); }
.tag--feature .arrow { color: #fff; }
@media (min-width: 720px) { .tag--feature { grid-column: span 2; } }

/* ============================================================
   Sub-pages (Services, Country, Contact, FAQ) — added v111
   ============================================================ */
.page-hero { position: relative; padding-block: clamp(40px, 7vw, 80px) clamp(28px, 5vw, 48px); overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(70% 60% at 80% 0%, var(--aqua-100), transparent 70%); }
.page-hero h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); margin-bottom: .8rem; }
.page-hero .lead { max-width: 60ch; }
.breadcrumb { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb a { color: var(--teal); font-weight: 600; }
.breadcrumb span { margin: 0 .4rem; opacity: .5; }

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1rem; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose ul { margin: 0 0 1rem; padding-left: 0; list-style: none; display: grid; gap: .55rem; }
.prose ul li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* quick facts */
.facts { display: grid; gap: 1rem; }
.fact { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--shadow-sm); }
.fact .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.fact .v { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin-top: .3rem; line-height: 1.1; }
.fact .d { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* services detailed list */
.svc { display: flex; gap: 1.1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.svc:last-child { border-bottom: 0; }
.svc__ic { flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--aqua-100); color: var(--teal-700); display: grid; place-items: center; }
.svc__ic svg { width: 26px; height: 26px; }
.svc h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.svc p { font-size: .98rem; }

/* FAQ accordion (no JS needed) */
.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: .8rem; }
details.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
details.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--teal); transition: transform .2s; line-height: 1; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq__a { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }
details.faq .faq__a p { margin-bottom: .6rem; }

/* map */
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0; }
.map-embed iframe { width: 100%; height: 340px; border: 0; }

/* contact methods */
.contact-methods { display: grid; gap: 1rem; }
.cmethod { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem; box-shadow: var(--shadow-sm); }
.cmethod__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--aqua-100); color: var(--teal-700); display: grid; place-items: center; }
.cmethod__ic svg { width: 22px; height: 22px; }
.cmethod .k { font-weight: 700; color: var(--ink); }
.cmethod a, .cmethod .v { color: var(--ink-soft); }
.cmethod a:hover { color: var(--teal); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--teal-900), var(--teal-700)); color: #fff; border-radius: var(--r-lg); padding: clamp(1.8rem, 5vw, 3rem); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 52ch; margin: 0 auto 1.4rem; }
.cta-band .hero__cta { justify-content: center; }

/* ============================================================
   Public catalog (universities & courses search) — Phase 4b
   ============================================================ */
.cat-filters { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-bottom:1.2rem; }
.cat-input { padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--white); color:var(--ink); min-width:160px; }
.cat-input[type="search"] { flex:1; min-width:220px; }
.cat-input:focus-visible { outline:none; box-shadow:var(--ring); border-color:var(--teal); }
.cat-switch { margin-left:auto; color:var(--teal); font-weight:600; font-size:.92rem; white-space:nowrap; }
.cat-status { min-height:1.4rem; margin-bottom:.9rem; }
.cat-count { color:var(--ink-soft); font-size:.92rem; font-weight:600; }
.cat-back { color:var(--teal); font-weight:600; }

.cat-card { display:flex; flex-direction:column; }
.cat-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cat-logo { width:48px; height:48px; object-fit:contain; border-radius:8px; background:var(--white); }
.cat-logo--ph { display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--teal); background:var(--aqua-50); }
.cat-logo--lg { width:72px; height:72px; }
.cat-rank { background:var(--accent-soft); color:var(--accent-deep); font-weight:700; font-size:.82rem; padding:.2rem .6rem; border-radius:20px; }
.cat-chip { align-self:flex-start; background:var(--aqua-50); color:var(--teal); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; padding:.22rem .6rem; border-radius:6px; margin-bottom:.5rem; }
.cat-loc { color:var(--ink-soft); font-size:.9rem; margin-bottom:.4rem; }
.cat-course-name { font-size:1.05rem; line-height:1.3; }
.cat-meta { color:var(--ink-soft); font-size:.88rem; margin-bottom:.25rem; }
.cat-approx { color:var(--ink-soft); font-size:.78rem; opacity:.8; }
.cat-uni { font-weight:600; font-size:.9rem; margin:.4rem 0 .2rem; }
.cat-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.9rem; }
.btn--sm { padding:.5rem .85rem; font-size:.85rem; }

.cat-skel { height:210px; border-radius:var(--r); background:linear-gradient(100deg, var(--aqua-50) 30%, #eef7f8 50%, var(--aqua-50) 70%); background-size:200% 100%; animation:catShimmer 1.2s infinite; }
@keyframes catShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.cat-empty { grid-column:1 / -1; text-align:center; padding:2.6rem 1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r); }
.cat-empty h3 { margin-bottom:.4rem; }
.cat-empty p { color:var(--ink-soft); margin-bottom:1.1rem; }

.cat-pager { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.8rem; }
.cat-pg { padding:.55rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white); color:var(--ink); font-weight:600; cursor:pointer; }
.cat-pg:hover:not([disabled]) { border-color:var(--teal); color:var(--teal); }
.cat-pg[disabled] { opacity:.45; cursor:not-allowed; }
.cat-pg-info { color:var(--ink-soft); font-size:.9rem; }

/* detail view */
.cat-detail { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,4vw,2.2rem); box-shadow:var(--shadow-sm); }
.cat-detail__head { display:flex; gap:1.1rem; align-items:flex-start; }
.cat-detail__head h2 { margin:.15rem 0 .25rem; }
.cat-detail__top { min-height:0; }
.cat-site { display:inline-block; margin-top:.5rem; color:var(--teal); font-weight:600; font-size:.92rem; }
.cat-detail__desc { color:var(--ink-soft); margin-top:1rem; line-height:1.6; }
.cat-detail__h { margin:1.8rem 0 .9rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.cat-courses { display:flex; flex-direction:column; gap:.7rem; }
.cat-crow { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm); }
.cat-crow__main { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.cat-crow__name { font-weight:600; }
.cat-crow__field { color:var(--ink-soft); font-size:.88rem; }
.cat-crow__meta { display:flex; align-items:center; gap:.9rem; color:var(--ink-soft); font-size:.86rem; flex-wrap:wrap; }
.cat-detail__cta { margin-top:1.6rem; text-align:center; }

/* Homepage search-catalog band */
.home-search { display:flex; gap:.6rem; max-width:620px; margin:1.6rem auto 0; }
.home-search input { flex:1; padding:.95rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--white); color:var(--ink); }
.home-search input:focus-visible { outline:none; box-shadow:var(--ring); border-color:var(--teal); }
.home-search .btn { white-space:nowrap; }
@media (max-width:520px){ .home-search { flex-direction:column; } .home-search .btn { width:100%; } }

/* ---- Blog / article typography (Phase 5) ---- */
.prose h2 { margin: 2rem 0 .7rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; }
.prose ol { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .55rem; color: var(--ink-soft); }
.prose ol li { padding-left: .3rem; }
.prose a { color: var(--teal); font-weight: 600; }
.prose strong { color: var(--ink); }
.post-meta { color: var(--ink-soft); font-size: .9rem; margin-top: .4rem; }

/* ── Office gallery (About / homepage) ───────────────────────────── */
.office-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.office-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (min-width: 760px) { .office-gallery { grid-template-columns: repeat(4, 1fr); } }

/* differentiator grid */
.diff-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 600px)  { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .diff-grid { grid-template-columns: repeat(4, 1fr); } }
.diff-card {
  background: var(--white, #fff); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.4rem; text-align: center; transition: box-shadow .25s, transform .25s;
}
.diff-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.diff-ic { width: 48px; height: 48px; margin: 0 auto .9rem; display: flex; align-items: center; justify-content: center;
  background: var(--sky, #e0f2fe); border-radius: 50%; color: var(--teal); }
.diff-ic svg { width: 24px; height: 24px; }
.diff-card h4 { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .45rem; line-height: 1.3; }
.diff-card p  { font-size: .82rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ── Testimonials ────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 700px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: flex; flex-direction: column; gap: .85rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.quote__stars { color: #f5a623; font-size: 1rem; letter-spacing: .12em; }
.quote p { color: var(--ink-soft); font-size: .97rem; line-height: 1.6; margin: 0; }
.quote__by { margin-top: auto; font-weight: 700; color: var(--ink); font-size: .95rem; }
.quote__by span { display: block; margin-top: .15rem; font-weight: 500; color: var(--ink-soft); font-size: .82rem; }

/* ── Tighter vertical rhythm on content-light country pages ──────── */
.study-page .section { padding-block: clamp(36px, 5.5vw, 66px); }

/* ── Partner logo grid (About / homepage) ────────────────────────── */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 560px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.partner { display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.2rem; min-height: 88px; box-shadow: var(--shadow-sm); }
.partner img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }

/* ============================================================
   Work Gallery — grid + lightbox (photos managed in the CRM)
   ============================================================ */
.g-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin-top:22px; }
.g-grid--strip { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
.g-item { margin:0; position:relative; border-radius:12px; overflow:hidden; cursor:zoom-in; background:#f1f5f9; aspect-ratio:4/3; }
.g-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.g-item:hover img { transform:scale(1.04); }
.g-cap { position:absolute; left:0; right:0; bottom:0; padding:18px 12px 10px; color:#fff; font-size:13px; line-height:1.4;
         background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); display:flex; flex-direction:column; gap:2px; }
.g-cap strong { font-weight:600; }
.g-cap span { opacity:.85; font-size:12px; }
.g-empty { color:#64748b; padding:28px 0; }

.g-box { position:fixed; inset:0; background:rgba(15,23,42,.92); z-index:9999; display:none;
         align-items:center; justify-content:center; flex-direction:column; padding:24px; }
.g-box.is-open { display:flex; }
.g-box__img { max-width:min(1100px, 94vw); max-height:82vh; object-fit:contain; border-radius:8px; }
.g-box__cap { color:#e2e8f0; font-size:14px; margin-top:14px; text-align:center; max-width:760px; }
.g-box__x { position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:34px;
            line-height:1; cursor:pointer; padding:4px 10px; }