/*
Theme Name: UniAdmission
Author: UniAdmission
Description: Lightweight custom theme for Elementor (free). Dynamic header and footer, one main CSS file, one main JS file.
Version: 0.17.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: uniadmission
*/

/* =========================================================
   1. DESIGN TOKENS  (change colours / fonts / sizes here only)
   ========================================================= */
:root {
  /* Colours */
  --ua-bg: #ffffff;          /* main background */
  --ua-bg-alt: #F6FCFF;      /* secondary background */
  --ua-navy: #012533;        /* headings, ALL button bg, gradient start */
  --ua-navy-2: #002642;      /* gradient end */
  --ua-gradient: linear-gradient(135deg, var(--ua-navy) 0%, var(--ua-navy-2) 100%);   /* footer, CTA, finance band, active tab */
  --ua-hover: #f5a623;       /* ALL button hover bg */
  --ua-text: #55657a;        /* body text (provisional) */
  --ua-ink: #16263d;         /* strong text (provisional) */
  --ua-line: #dbe3ed;        /* borders (provisional) */
  --ua-star: #f5b301;        /* rating stars */
  --ua-white: #ffffff;

  /* Font */
  --ua-font: "Poppins", sans-serif;

  /* Type scale (desktop) */
  --ua-fs-h1: 52px;
  --ua-fs-h2: 40px;
  --ua-fs-h3: 24px;
  --ua-fs-h4: 20px;
  --ua-fs-lead: 18px;
  --ua-fs-body: 16px;
  --ua-fs-small: 14px;
  --ua-fs-eyebrow: 15px;
  --ua-fs-btn: 16px;
  --ua-fs-nav: 15px;

  /* Layout */
  --ua-container: 1200px;
  --ua-gutter: 20px;
  --ua-section-pad: 80px;
  --ua-radius: 12px;
  --ua-radius-pill: 999px;
  --ua-shadow: 0 2px 12px rgba(1, 37, 51, .08);
  --ua-shadow-hover: 0 10px 28px rgba(1, 37, 51, .14);

  /* Motion (change speed / feel here only) */
  --ua-ease: cubic-bezier(.22, .61, .36, 1);
  --ua-dur: .25s;          /* hovers, focus, small UI */
  --ua-dur-slow: .7s;      /* scroll reveal */
  --ua-dur-menu: .55s;     /* mobile menu + its dropdown */
  --ua-ease-soft: cubic-bezier(.45, .05, .25, 1);   /* gentle start AND end */
  --ua-header-h: 88px;
  --ua-field-h: 44px;       /* height of EVERY form field + form button */
}

@media (max-width: 1024px) {
  :root {
    --ua-fs-h1: 44px;
    --ua-fs-h2: 34px;
    --ua-fs-h3: 22px;
    --ua-fs-h4: 18px;
    --ua-section-pad: 64px;
    --ua-header-h: 80px;
  }
}
@media (max-width: 767px) {
  :root {
    --ua-fs-h1: 34px;
    --ua-fs-h2: 28px;
    --ua-fs-h3: 20px;
    --ua-fs-h4: 18px;
    --ua-fs-lead: 17px;
    --ua-fs-eyebrow: 14px;
    --ua-section-pad: 48px;
    --ua-header-h: 72px;
  }
}

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ua-font);
  font-size: var(--ua-fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ua-text);
  background: var(--ua-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ua-navy); }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* =========================================================
   3. TYPOGRAPHY  (same size for the same level everywhere)
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.ua-h1, .ua-h2, .ua-h3, .ua-h4 {
  font-family: var(--ua-font);
  color: var(--ua-navy);
  margin: 0 0 16px;
}
h1, .ua-h1 { font-size: var(--ua-fs-h1); font-weight: 700; line-height: 1.15; }
h2, .ua-h2 { font-size: var(--ua-fs-h2); font-weight: 700; line-height: 1.2; }
h3, .ua-h3 { font-size: var(--ua-fs-h3); font-weight: 600; line-height: 1.3; }
h4, .ua-h4 { font-size: var(--ua-fs-h4); font-weight: 600; line-height: 1.3; }
h5, h6     { font-size: var(--ua-fs-body); font-weight: 600; line-height: 1.3; }

.ua-lead  { font-size: var(--ua-fs-lead); line-height: 1.7; }
.ua-small { font-size: var(--ua-fs-small); line-height: 1.6; }
.ua-eyebrow {
  display: block;
  font-size: var(--ua-fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ua-hover);
  margin: 0 0 16px;
}

/* =========================================================
   4. LAYOUT  (no margin around blocks; spacing = padding/gap)
   ========================================================= */
.ua-container {
  width: 100%;
  max-width: calc(var(--ua-container) + var(--ua-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--ua-gutter);
}
.ua-section { margin: 0; padding: var(--ua-section-pad) 0; background: var(--ua-bg); }
.ua-section--alt  { background: var(--ua-bg-alt); }
.ua-section--navy { background: var(--ua-gradient); color: var(--ua-white); }
.ua-section--navy h1, .ua-section--navy h2, .ua-section--navy h3, .ua-section--navy h4 { color: var(--ua-white); }

.ua-card {
  background: var(--ua-bg);
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  padding: 24px;
}
.ua-section:not(.ua-section--alt) .ua-card--shadow,
.ua-card--shadow { box-shadow: var(--ua-shadow); }
.ua-section:not(.ua-section--alt) .ua-card { background: var(--ua-bg-alt); }
.ua-section--alt .ua-card { background: var(--ua-bg); }

.screen-reader-text, .ua-skip {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.ua-skip:focus {
  position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
  background: var(--ua-white); color: var(--ua-navy); padding: 10px 14px; z-index: 10000; border-radius: 8px;
}

/* =========================================================
   5. BUTTONS  (one system: navy, orange hover)
   ========================================================= */
.ua-btn,
.wpcf7 input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ua-font); font-size: var(--ua-fs-btn); font-weight: 600; line-height: 1;
  padding: 14px 28px;
  background: var(--ua-navy); color: var(--ua-white);
  border: 2px solid var(--ua-navy); border-radius: var(--ua-radius-pill);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease);
}
.ua-btn:hover,
.wpcf7 input[type="submit"]:hover {
  background: var(--ua-hover); border-color: var(--ua-hover); color: var(--ua-navy);
}
.ua-btn--outline { background: transparent; color: var(--ua-navy); }
.ua-btn--white   { background: var(--ua-white); border-color: var(--ua-white); color: var(--ua-navy); }
.ua-btn--block   { display: flex; width: 100%; }
.ua-btn:focus-visible,
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 2px; }
.ua-section--navy .ua-btn:focus-visible { outline-color: var(--ua-white); }

/* =========================================================
   6. FORMS (Contact Form 7)
   ========================================================= */
.wpcf7 label { display: block; margin-bottom: 12px; font-size: var(--ua-fs-small); font-weight: 600; color: var(--ua-navy); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input, .wpcf7 select, .wpcf7 textarea { font-family: var(--ua-font); }
.ua-form__title { font-size: var(--ua-fs-h4); margin: 0 0 4px; }
.ua-form__sub { font-size: var(--ua-fs-small); line-height: 1.6; margin: 0 0 20px; }
/* ALL single-line fields (text, email, tel, select): identical height + font size.
   !important so Elementor / plugin / browser defaults can never change them. */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select {
  display: block; width: 100%; margin: 0;
  height: var(--ua-field-h) !important; min-height: var(--ua-field-h) !important; max-height: var(--ua-field-h) !important;
  padding: 0 16px !important; box-sizing: border-box !important;
  font-family: var(--ua-font) !important; font-size: var(--ua-fs-body) !important; font-weight: 400 !important; line-height: 1.4 !important;
  color: var(--ua-ink);
  background-color: var(--ua-white); border: 1px solid var(--ua-line); border-radius: 8px;
}
.wpcf7 form textarea {
  display: block; width: 100%; margin: 0; padding: 12px 16px; box-sizing: border-box;
  font-family: var(--ua-font); font-size: var(--ua-fs-body); line-height: 1.4; color: var(--ua-ink);
  background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: 8px;
}
.wpcf7 form textarea { min-height: 120px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { text-overflow: ellipsis; }
.wpcf7 ::placeholder { color: #66758a; opacity: 1; }
.wpcf7 form select {
  -webkit-appearance: none; appearance: none; padding-right: 44px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ua-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355657a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.wpcf7 select.is-placeholder { color: #66758a; }
.wpcf7 select option { color: var(--ua-ink); }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--ua-navy); }
.wpcf7 input[type="submit"] { width: 100%; height: var(--ua-field-h); padding-top: 0; padding-bottom: 0; }
.wpcf7-not-valid-tip { font-size: var(--ua-fs-small); color: #c0392b; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; border-radius: 8px; font-size: var(--ua-fs-small); }

/* =========================================================
   7. HEADER  (normal header, scrolls away with the page: logo | menu | button; hamburger on tablet + mobile)
   ========================================================= */
.ua-header { position: relative; z-index: 999; margin: 0; background: var(--ua-bg); border-bottom: 1px solid var(--ua-line); transition: box-shadow var(--ua-dur) var(--ua-ease); }
.ua-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--ua-header-h); padding-top: 16px; padding-bottom: 16px; gap: 32px; }

/* Logo */
.ua-logo, .custom-logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.custom-logo { max-height: 52px; width: auto; }
.ua-logo__icon { flex-shrink: 0; }
.ua-logo__bg { fill: var(--ua-navy); }
.ua-logo__cap { fill: var(--ua-white); }
.ua-logo__tassel { stroke: var(--ua-hover); }
.ua-logo__dot { fill: var(--ua-hover); }
.ua-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.ua-logo__name { font-size: 20px; font-weight: 700; color: var(--ua-navy); letter-spacing: .01em; }
.ua-logo__tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ua-hover); margin-top: 4px; }

/* Nav (desktop) */
.ua-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 32px; }
.ua-menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0 auto 0 0; padding: 0; }
.ua-menu li { position: relative; display: flex; align-items: center; gap: 2px; margin: 0; }
.ua-menu a { font-size: var(--ua-fs-nav); font-weight: 500; line-height: 1.4; color: var(--ua-navy); text-decoration: none; padding: 8px 0; }
.ua-menu a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ua-menu .current-menu-item > a { font-weight: 600; }
.ua-nav__btn { flex-shrink: 0; }

/* Chevron button */
.ua-caret { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; color: var(--ua-navy); cursor: pointer; }
.ua-caret svg { transition: transform var(--ua-dur) var(--ua-ease); }
.menu-item-has-children.is-open > .ua-caret svg { transform: rotate(180deg); }

/* Sub-menu */
.ua-menu .sub-menu { display: none; list-style: none; margin: 0; padding: 8px; }
.ua-menu .sub-menu a { display: block; padding: 10px 16px; white-space: nowrap; border-radius: 8px; }
.ua-menu .sub-menu a:hover { background: var(--ua-bg-alt); text-decoration: none; }

@media (min-width: 1025px) {
  .ua-menu .sub-menu {
    display: block; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--ua-dur) var(--ua-ease), transform var(--ua-dur) var(--ua-ease), visibility 0s linear var(--ua-dur);
    position: absolute; top: 100%; left: -16px; min-width: 200px; margin-top: 12px;
    background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: var(--ua-radius); box-shadow: var(--ua-shadow);
  }
  .ua-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
  .ua-menu li:hover > .sub-menu,
  .ua-menu li:focus-within > .sub-menu,
  .ua-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .ua-menu li:hover > .ua-caret svg,
  .ua-menu li:focus-within > .ua-caret svg { transform: rotate(180deg); }
  .ua-burger { display: none; }
}

/* Hamburger + dropdown panel (tablet + mobile): button sits inside the panel */
.ua-burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.ua-burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ua-navy); border-radius: 2px; transition: transform var(--ua-dur) var(--ua-ease), opacity var(--ua-dur) var(--ua-ease), top var(--ua-dur) var(--ua-ease); }
.ua-burger span:nth-child(1) { top: 14px; }
.ua-burger span:nth-child(2) { top: 21px; }
.ua-burger span:nth-child(3) { top: 28px; }
.ua-header.is-open .ua-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.ua-header.is-open .ua-burger span:nth-child(2) { opacity: 0; }
.ua-header.is-open .ua-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .ua-burger { display: block; }
  .ua-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    visibility: hidden; opacity: 0; transform: translateY(-14px); pointer-events: none;
    transition: opacity var(--ua-dur-menu) var(--ua-ease-soft), transform var(--ua-dur-menu) var(--ua-ease-soft), visibility 0s linear var(--ua-dur-menu);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
    padding: 24px var(--ua-gutter) 32px; background: var(--ua-white); border-bottom: 1px solid var(--ua-line);
    max-height: calc(100vh - var(--ua-header-h)); max-height: calc(100dvh - var(--ua-header-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  html.ua-menu-open { overflow: hidden; }
  .ua-header.is-open .ua-nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .ua-menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .ua-menu li { flex-wrap: wrap; justify-content: space-between; gap: 0; border-bottom: 1px solid var(--ua-line); }
  .ua-menu li > a { flex: 1; padding: 16px 0; }
  .ua-menu li > .ua-caret { width: 44px; height: 44px; }
  .ua-menu .sub-menu {
    display: block; flex-basis: 100%; padding: 0 0 0 16px; overflow: hidden;
    height: 0; opacity: 0; visibility: hidden;
    transition: height var(--ua-dur-menu) var(--ua-ease-soft), opacity var(--ua-dur-menu) var(--ua-ease-soft), visibility 0s linear var(--ua-dur-menu);
  }
  .ua-menu .sub-menu li:last-child { padding-bottom: 8px; }
  .ua-caret svg { transition-duration: .4s; }
  .ua-menu li.is-open > .sub-menu { height: var(--ua-sub-h, auto); opacity: 1; visibility: visible; transition-delay: 0s; }
  /* menu items fade in one after another when the panel opens */
  .ua-header.is-open .ua-menu > li, .ua-header.is-open .ua-nav__btn { animation: ua-fade-up var(--ua-dur-menu) var(--ua-ease-soft) both; }
  .ua-header.is-open .ua-menu > li:nth-child(1) { animation-delay: .08s; }
  .ua-header.is-open .ua-menu > li:nth-child(2) { animation-delay: .14s; }
  .ua-header.is-open .ua-menu > li:nth-child(3) { animation-delay: .20s; }
  .ua-header.is-open .ua-menu > li:nth-child(4) { animation-delay: .26s; }
  .ua-header.is-open .ua-menu > li:nth-child(5) { animation-delay: .32s; }
  .ua-header.is-open .ua-menu > li:nth-child(6) { animation-delay: .38s; }
  .ua-header.is-open .ua-menu > li:nth-child(n+7) { animation-delay: .44s; }
  .ua-header.is-open .ua-nav__btn { animation-delay: .5s; }
  .ua-menu .sub-menu a { padding: 12px 0; border-radius: 0; }
  .ua-menu .sub-menu li { border-bottom: 0; }
  .ua-nav__btn { display: flex; width: 100%; }
}

/* =========================================================
   8. FOOTER  (brand | course | useful links | contact | follow)
   ========================================================= */
.ua-footer { margin: 0; padding: var(--ua-section-pad) 0 0; background: var(--ua-gradient); color: rgba(255, 255, 255, .8); font-size: var(--ua-fs-body); }
.ua-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color var(--ua-dur) var(--ua-ease); }
.ua-footer a:hover { color: var(--ua-hover); }
.ua-footer ul { list-style: none; margin: 0; padding: 0; }

.ua-footer__grid { display: grid; grid-template-columns: 1.4fr 1.15fr 1fr 1.3fr auto; gap: 40px; }
.ua-footer__title { font-size: var(--ua-fs-h4); font-weight: 600; line-height: 1.3; color: var(--ua-white); margin: 0 0 24px; }
.ua-footer__desc { margin: 24px 0 0; line-height: 1.8; }

/* Logo on dark background */
.ua-footer .ua-logo__bg { fill: var(--ua-white); }
.ua-footer .ua-logo__cap { fill: var(--ua-navy); }
.ua-footer .ua-logo__name { color: var(--ua-white); }
.ua-footer .ua-logo__tag { color: rgba(255, 255, 255, .7); }
.ua-footer__logo-img { max-height: 52px; width: auto; }

/* Menus */
.ua-footer__menu { display: flex; flex-direction: column; gap: 12px; }
.ua-footer__menu a { font-size: var(--ua-fs-nav); }

/* Contact */
.ua-footer__contact { display: flex; flex-direction: column; gap: 16px; }
.ua-footer__contact li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.ua-footer__ico { flex-shrink: 0; margin-top: 3px; color: var(--ua-hover); }

/* Social */
.ua-footer__social { display: flex; flex-wrap: wrap; gap: 12px; }
.ua-footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  color: var(--ua-white); border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  transition: background-color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease);
}
.ua-footer__social a:hover { background: var(--ua-hover); border-color: var(--ua-hover); color: var(--ua-navy); }

/* Bottom bar */
.ua-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 48px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: var(--ua-fs-small);
}
.ua-footer__bottom p { margin: 0; }
.ua-footer__bottom a { color: var(--ua-hover); }
.ua-footer__bottom a:hover { color: var(--ua-white); }

@media (max-width: 1024px) {
  .ua-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
  .ua-footer__brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 767px) {
  .ua-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .ua-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   9. ELEMENTOR HELPERS  (no margin around blocks, full-width HTML)
   ========================================================= */
.elementor { --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
.elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-widget-html, .elementor-widget-shortcode { width: 100%; }
.elementor-widget-html > .elementor-widget-container { margin: 0; padding: 0; }
.e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--ua-container); }

/* =========================================================
   10. HOMEPAGE SECTIONS  (added one by one below)
   ========================================================= */

/* ---------- 10.1 HOME BANNER (one HTML block: text left, Contact Form 7 right) ---------- */
.ua-banner { margin: 0; padding: var(--ua-section-pad) 0; background: var(--ua-bg-alt); }
.ua-banner__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; }

.ua-banner__title { margin: 0 0 24px; }
.ua-banner__title span { display: block; color: var(--ua-hover); }
.ua-banner__text .ua-lead { max-width: 540px; margin: 0 0 32px; }
.ua-banner__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }

.ua-banner__card {
  background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: var(--ua-radius);
  box-shadow: var(--ua-shadow); padding: 32px;
}

/* Elementor: let the band run edge to edge, even inside a Boxed container */
.elementor .e-con:has(.ua-banner, .ua-section, .ua-pagehead) { width: 100%; max-width: none; padding: 0; }
.elementor .e-con > .e-con-inner:has(.ua-banner, .ua-section, .ua-pagehead) { width: 100%; max-width: none; padding: 0; }

/* Tablet: still two columns (form stays on the right) */
@media (max-width: 1024px) {
  .ua-banner__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
  .ua-banner__card { padding: 24px; }
}
/* Mobile: stacked, text first then form */
@media (max-width: 767px) {
  .ua-banner__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ua-banner__actions .ua-btn { width: 100%; }
}

/* ---------- 10.2 WHO IS THIS FOR (.ua-audience): one white panel, four columns split by thin lines ---------- */
.ua-icon { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; color: var(--ua-white); background: var(--ua-gradient); border-radius: 14px; }
.ua-audience__inner { display: grid; gap: 48px; }
.ua-audience__head { max-width: 720px; margin: 0 auto; text-align: center; }
.ua-audience__head h2 { margin: 0 0 16px; }
.ua-audience__head .ua-lead { margin: 0; }
.ua-audience__panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: var(--ua-radius); }
.ua-audience__item { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; }
.ua-audience__item + .ua-audience__item { border-left: 1px solid var(--ua-line); }
.ua-audience__item .ua-icon { margin-bottom: 8px; }
.ua-audience__item h3 { margin: 0; }
.ua-audience__item p { margin: 0; }

@media (max-width: 1024px) {
  .ua-audience__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-audience__item + .ua-audience__item { border-left: 0; }
  .ua-audience__item:nth-child(even) { border-left: 1px solid var(--ua-line); }
  .ua-audience__item:nth-child(n+3) { border-top: 1px solid var(--ua-line); }
}
@media (max-width: 767px) {
  .ua-audience__panel { grid-template-columns: minmax(0, 1fr); }
  .ua-audience__item { padding: 28px 24px; }
  .ua-audience__item:nth-child(even) { border-left: 0; }
  .ua-audience__item + .ua-audience__item { border-top: 1px solid var(--ua-line); }
}

/* ---------- 10.3 SERVICES (.ua-services): clean 2 x 2 grid, icon beside text, thin line above each item ---------- */
.ua-services__inner { display: grid; gap: 48px; }
.ua-services__head { text-align: center; }
.ua-services__head h2 { margin: 0; }
.ua-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.ua-service { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 32px; border-top: 1px solid var(--ua-line); }
.ua-service h3 { margin: 0 0 8px; }
.ua-service p { margin: 0; }

@media (max-width: 767px) {
  .ua-services__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ua-service { gap: 16px; padding-top: 24px; }
}

/* ---------- 10.4 TESTIMONIAL CAROUSEL (.ua-testimonials) ---------- */
.ua-testimonials__inner { display: grid; gap: 48px; }
.ua-testimonials__head { text-align: center; }
.ua-testimonials__head h2 { margin: 0; }
.ua-carousel { display: grid; gap: 32px; }
.ua-carousel__track {
  position: relative; display: flex; gap: 24px; padding: 4px 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ua-carousel__track::-webkit-scrollbar { display: none; }
.ua-carousel__track:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 4px; }
.ua-carousel__slide { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }

.ua-review {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: var(--ua-radius); box-shadow: var(--ua-shadow);
}
.ua-review__stars { display: block; color: var(--ua-star); }
.ua-review__text { margin: 0; color: var(--ua-ink); }
.ua-review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ua-review .ua-review__photo { width: 56px !important; height: 56px !important; max-width: none; aspect-ratio: 1 / 1; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; background: var(--ua-bg-alt); }
.ua-review__name { font-weight: 600; color: var(--ua-navy); }

.ua-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ua-carousel__btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--ua-field-h); height: var(--ua-field-h); padding: 0;
  color: var(--ua-navy); background: transparent; border: 1.5px solid var(--ua-navy); border-radius: 50%; cursor: pointer;
  transition: background-color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease);
}
.ua-carousel__btn:hover:not(:disabled) { background: var(--ua-hover); border-color: var(--ua-hover); }
.ua-carousel__btn:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 2px; }
.ua-carousel__btn:disabled { opacity: .35; cursor: default; }
.ua-carousel__dots { display: flex; align-items: center; gap: 8px; }
.ua-carousel__dot { width: 10px; height: 10px; padding: 0; background: var(--ua-line); border: 0; border-radius: 50%; cursor: pointer; transition: background-color var(--ua-dur) var(--ua-ease), width var(--ua-dur) var(--ua-ease); }
.ua-carousel__dot[aria-current="true"] { width: 24px; border-radius: 999px; background: var(--ua-navy); }
.ua-carousel__dot:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 2px; }
.ua-testimonials.is-static .ua-carousel__nav { display: none; }   /* nothing to scroll: hide arrows + dots */

@media (max-width: 1024px) { .ua-carousel__slide { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px)  { .ua-carousel__slide { flex-basis: 100%; } }

/* ---------- 10.6 COURSES (.ua-courses): tab list left, 2 x 2 subject cards (4 at a time) sliding right ---------- */
.ua-nowrap { white-space: nowrap; }
.ua-courses__inner { display: grid; gap: 48px; }
.ua-courses__head { max-width: 920px; margin: 0 auto; text-align: center; }
.ua-courses__head h2 { margin: 0 0 16px; }
.ua-courses__head .ua-lead { margin: 0; }
.ua-courses__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: stretch; }

/* tab list: this sets the height of the whole block */
.ua-courses__tabs { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ua-courses__tab {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 16px; text-align: left;
  font-family: var(--ua-font); font-size: var(--ua-fs-nav); font-weight: 500; line-height: 1.3; color: var(--ua-navy);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease);
}
.ua-courses__tab:hover { background: var(--ua-hover); }
.ua-courses__tab[aria-selected="true"] { background: var(--ua-gradient); color: var(--ua-white); }
.ua-courses__tab:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 2px; }

/* panel: pinned inside the stage (never taller than the tab list); cards on top, arrows + counter at the bottom */
.ua-courses__stage { position: relative; min-width: 0; }
.ua-courses__panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ua-courses__panel[hidden] { display: none; }
.ua-courses__panel:not([hidden]) { animation: ua-fade-up .4s var(--ua-ease) both; }
.ua-courses__nav { display: flex; align-items: center; justify-content: center; gap: 16px; flex: none; }
.ua-courses__count { font-size: var(--ua-fs-small); color: var(--ua-text); }
.ua-courses__count strong { color: var(--ua-navy); }
.ua-courses__panel.is-static .ua-courses__nav { display: none; }

/* 2 rows x 2 columns visible = 4 cards; arrows slide one column at a time */
.ua-courses .ua-carousel__track {
  flex: 1; min-height: 0; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: calc((100% - 16px) / 2);
  gap: 16px; padding: 4px 2px;
}

/* subject card: image (takes the spare height), title, short description, button */
.ua-subject {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: var(--ua-radius); box-shadow: var(--ua-shadow);
}
.ua-subject__media { position: relative; flex: 0 0 38%; min-height: 0; overflow: hidden; background: var(--ua-bg-alt); }
.ua-subject__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.ua-subject__body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 6px; padding: 14px 16px 16px; }
.ua-subject__title { margin: 0; font-size: var(--ua-fs-body); font-weight: 600; line-height: 1.35; color: var(--ua-navy); }
.ua-subject__desc { margin: 0; font-size: var(--ua-fs-small); line-height: 1.5; }
.ua-subject__btn { margin-top: auto; padding: 10px 16px; }
.ua-subject__btn::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* tablet + mobile: tabs become a swipeable row of chips; cards go back to one scrolling row */
@media (max-width: 1024px) {
  .ua-courses__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ua-courses__tabs { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-overflow-scrolling: touch; }
  .ua-courses__tabs::-webkit-scrollbar { display: none; }
  .ua-courses__tab { flex: 0 0 auto; width: auto; min-height: 40px; white-space: nowrap; padding: 8px 20px; background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: 999px; }
  .ua-courses__tab:hover { border-color: var(--ua-hover); }
  .ua-courses__tab[aria-selected="true"] { border-color: var(--ua-navy); }
  .ua-courses__panel { position: static; }
  .ua-courses .ua-carousel__track { flex: none; display: flex; padding: 4px 2px 12px; }
  .ua-courses .ua-carousel__slide { flex: 0 0 calc((100% - 16px) / 2); }
  .ua-subject__media { flex: none; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
    .ua-courses .ua-carousel__slide { flex-basis: 80%; }
}

/* ---------- 10.7 FAQ (.ua-faq): sticky intro left, open-ended numbered rows right ---------- */
.ua-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ua-faq__intro { position: sticky; top: 24px; }
.ua-faq__intro h2 { margin: 0 0 16px; }
.ua-faq__intro .ua-lead { margin: 0 0 32px; }

.ua-faq__list { border-bottom: 1px solid var(--ua-line); }
.ua-faq__item { border-top: 1px solid var(--ua-line); }
.ua-faq__item summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; column-gap: 16px;
  padding: 24px 0; list-style: none; cursor: pointer;
}
.ua-faq__item summary::-webkit-details-marker { display: none; }
.ua-faq__item summary:focus-visible { outline: 2px solid var(--ua-navy); outline-offset: 4px; border-radius: 4px; }
.ua-faq__num { font-size: var(--ua-fs-small); font-weight: 600; color: var(--ua-hover); }
.ua-faq__q { font-size: var(--ua-fs-h4); font-weight: 600; line-height: 1.35; color: var(--ua-navy); }

/* plus turns into a minus (filled circle) when open */
.ua-faq__icon {
  position: relative; width: 32px; height: 32px; border: 1.5px solid var(--ua-line); border-radius: 50%;
  transition: background-color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease);
}
.ua-faq__icon::before, .ua-faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--ua-navy); border-radius: 2px; transition: transform var(--ua-dur) var(--ua-ease), background-color var(--ua-dur) var(--ua-ease);
}
.ua-faq__icon::after { transform: rotate(90deg); }
.ua-section--alt .ua-faq__icon { background: var(--ua-white); }   /* white circles read better on the tinted background */
.ua-faq__item summary:hover .ua-faq__icon { border-color: var(--ua-navy); }
.ua-faq__item[open] .ua-faq__icon { background: var(--ua-navy); border-color: var(--ua-navy); }
.ua-faq__item[open] .ua-faq__icon::before, .ua-faq__item[open] .ua-faq__icon::after { background: var(--ua-white); }
.ua-faq__item[open] .ua-faq__icon::after { transform: rotate(0deg); }

.ua-faq__a { padding: 0 48px 24px 56px; }
.ua-faq__a p { margin: 0; max-width: 640px; }
.ua-faq__item[open] .ua-faq__a { animation: ua-fade-up .35s var(--ua-ease) both; }

@media (max-width: 1024px) {
  .ua-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ua-faq__intro { position: static; }
}
@media (max-width: 767px) {
  .ua-faq__item summary { grid-template-columns: 28px minmax(0, 1fr) 32px; column-gap: 12px; padding: 20px 0; }
  .ua-faq__a { padding: 0 0 20px 40px; }
  .ua-faq__intro .ua-btn { width: 100%; }
}

/* ---------- 10.8 CTA + CONTACT (.ua-cta): one navy panel, call-to-action left, "talk to us" card right ---------- */
.ua-cta__panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center;
  padding: 56px; color: var(--ua-white); border-radius: calc(var(--ua-radius) * 1.5);
  background-color: var(--ua-navy); background-image: radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%), var(--ua-gradient);
}
.ua-cta__panel::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; pointer-events: none; }
.ua-cta__main, .ua-cta__talk { position: relative; z-index: 1; }
.ua-cta .ua-eyebrow { color: rgba(255, 255, 255, .7); }
.ua-cta h2 { margin: 0 0 16px; color: var(--ua-white); }
.ua-cta .ua-lead { margin: 0 0 32px; color: rgba(255, 255, 255, .85); }

.ua-cta__talk { padding: 32px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--ua-radius); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ua-cta__label { display: block; margin: 0 0 8px; font-size: var(--ua-fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ua-cta__talk h3 { margin: 0 0 8px; color: var(--ua-white); }
.ua-cta__talk p { margin: 0 0 24px; font-size: var(--ua-fs-small); line-height: 1.6; color: rgba(255, 255, 255, .8); }

.ua-cta__links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ua-cta__link {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; color: var(--ua-white); text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  transition: background-color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease);
}
.ua-cta__ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; color: var(--ua-navy); background: var(--ua-white); border-radius: 50%; }
.ua-cta__txt { display: flex; flex-direction: column; line-height: 1.3; }
.ua-cta__txt small { font-size: var(--ua-fs-small); color: rgba(255, 255, 255, .7); transition: color var(--ua-dur) var(--ua-ease); }
.ua-cta__txt strong { font-size: var(--ua-fs-body); font-weight: 600; }
.ua-cta__link:hover { background: var(--ua-hover); border-color: var(--ua-hover); color: var(--ua-navy); }
.ua-cta__link:hover .ua-cta__txt small { color: var(--ua-navy); }
.ua-cta__link:focus-visible { outline: 2px solid var(--ua-white); outline-offset: 2px; }

@media (max-width: 1024px) {
  .ua-cta__panel { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px; }
}
@media (max-width: 767px) {
  .ua-cta__panel { padding: 24px; gap: 32px; }
  .ua-cta__talk { padding: 20px; }
  .ua-cta__main .ua-btn { width: 100%; }
}

/* ---------- 10.9 STUDENT FINANCE (.ua-finance): navy gradient band, everything centred in one clean column ---------- */
.ua-section.ua-finance {
  color: var(--ua-white); background-color: var(--ua-navy);
  background-image: radial-gradient(55% 90% at 100% 0%, rgba(245, 166, 35, .14) 0%, rgba(245, 166, 35, 0) 60%), var(--ua-gradient);
}
.ua-finance__inner { display: grid; gap: 48px; max-width: calc(880px + var(--ua-gutter) * 2); text-align: center; }
.ua-finance h2 { margin: 0; color: var(--ua-white); }
.ua-finance__headline { display: grid; gap: 4px; margin: 0 0 16px; color: var(--ua-white); }
.ua-finance__upto { font-size: var(--ua-fs-h4); font-weight: 600; color: rgba(255, 255, 255, .75); }
.ua-finance__amount { font-size: var(--ua-fs-h1); font-weight: 700; line-height: 1.05; color: var(--ua-hover); }
.ua-finance__label { font-size: var(--ua-fs-h3); font-weight: 600; line-height: 1.3; color: var(--ua-white); }
.ua-finance__total .ua-lead { margin: 0; color: rgba(255, 255, 255, .85); }
.ua-finance__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ua-finance__stats li { display: grid; gap: 4px; padding: 28px 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--ua-radius); }
.ua-finance__stats strong { font-size: var(--ua-fs-h3); font-weight: 700; line-height: 1.2; color: var(--ua-white); }
.ua-finance__stats span { color: rgba(255, 255, 255, .75); }
.ua-finance__foot { display: grid; gap: 12px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .18); }
.ua-finance__foot .ua-lead { margin: 0; color: rgba(255, 255, 255, .92); }
.ua-finance__note { margin: 0 auto; max-width: 780px; font-size: var(--ua-fs-small); line-height: 1.6; color: rgba(255, 255, 255, .65); }

@media (max-width: 767px) {
  .ua-finance__inner { gap: 40px; }
  .ua-finance__stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- 10.10 PAGE HEADER (.ua-pagehead): inner-page title, photo + navy overlay, title and short paragraph ---------- */
.ua-pagehead { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 360px; margin: 0; padding: 112px 0; overflow: hidden; color: var(--ua-white); background: var(--ua-navy); }
.ua-pagehead .ua-pagehead__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 25%; border-radius: 0;
  animation: ua-zoom-out 1.6s var(--ua-ease) both;
}
/* overlay: navy gradient keeps the text readable on any photo and ties it to the brand colours */
.ua-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(1, 37, 51, .92) 0%, rgba(0, 38, 66, .82) 100%); }
.ua-pagehead__inner { display: grid; gap: 16px; max-width: calc(820px + var(--ua-gutter) * 2); text-align: center; }
.ua-pagehead h1 { margin: 0; color: var(--ua-white); }
.ua-pagehead .ua-lead { margin: 0 auto; max-width: 680px; color: rgba(255, 255, 255, .92); }
@keyframes ua-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (max-width: 1024px) {
  .ua-pagehead { min-height: 300px; padding: 88px 0; }
}
@media (max-width: 767px) {
  .ua-pagehead { min-height: 260px; padding: 64px 0; }
}

/* ---------- 10.11 MISSION + VISION (.ua-duo): centred heading, two image cards side by side ---------- */
.ua-eyebrow--pill { display: inline-block; padding: 6px 16px; background: var(--ua-gradient); border-radius: 999px; }
.ua-duo__inner { display: grid; gap: 48px; }
.ua-duo__head { max-width: 760px; margin: 0 auto; text-align: center; }
.ua-duo__head h2 { margin: 0 0 16px; }
.ua-duo__head .ua-lead { margin: 0; }
.ua-duo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ua-duo__card { display: flex; flex-direction: column; gap: 24px; padding: 16px; background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: calc(var(--ua-radius) * 1.5); box-shadow: var(--ua-shadow); }
.ua-duo__media { aspect-ratio: 19 / 10; overflow: hidden; background: var(--ua-bg-alt); border-radius: var(--ua-radius); }
.ua-duo__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; transition: transform var(--ua-dur-slow) var(--ua-ease); }
.ua-duo__card:hover .ua-duo__media img { transform: scale(1.04); }
.ua-duo__body { padding: 0 8px 8px; }
.ua-duo__body h3 { margin: 0 0 12px; }
.ua-duo__body p { margin: 0; }

@media (max-width: 767px) {
  .ua-duo__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10.12 CHARTER (.ua-charter): one section, two side-by-side panels (students | university partners) ---------- */
.ua-charter__inner { display: grid; gap: 48px; }
.ua-charter__head { max-width: 720px; margin: 0 auto; text-align: center; }
.ua-charter__head h2 { margin: 0 0 16px; }
.ua-charter__head .ua-lead { margin: 0; }
.ua-charter__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ua-charter__panel { padding: 40px; background: var(--ua-bg-alt); border: 1px solid var(--ua-line); border-radius: calc(var(--ua-radius) * 1.5); }
.ua-charter__panel h3 { margin: 0 0 8px; }
.ua-charter__list { margin: 0; padding: 0; list-style: none; }
.ua-charter__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--ua-line); }
.ua-charter__list li:first-child { margin-top: 12px; }
.ua-charter__icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ua-navy); background: var(--ua-white); border: 1px solid var(--ua-line); border-radius: 50%; }
.ua-charter__list h4 { margin: 0 0 4px; }
.ua-charter__list p { margin: 0; }

/* the student panel is dark, so the two read as a pair */
.ua-charter__panel--dark { color: rgba(255, 255, 255, .8); background-color: var(--ua-navy); background-image: var(--ua-gradient); border-color: transparent; }
.ua-charter__panel--dark h3, .ua-charter__panel--dark h4 { color: var(--ua-white); }
.ua-charter__panel--dark .ua-charter__list li { border-top-color: rgba(255, 255, 255, .16); }
.ua-charter__panel--dark .ua-charter__icon { color: var(--ua-hover); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }

@media (max-width: 1024px) {
  .ua-charter__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ua-charter__panel { padding: 24px; }
}

/* ---------- 10.13 STATS COUNTER (.ua-stats): four numbers that count up when they scroll into view ---------- */
.ua-section.ua-stats { padding: 56px 0; }
.ua-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ua-stat { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 24px; }
.ua-stat + .ua-stat { border-left: 1px solid var(--ua-line); }
.ua-stat__num { font-size: var(--ua-fs-h2); font-weight: 700; line-height: 1; white-space: nowrap; color: var(--ua-navy); font-variant-numeric: tabular-nums; }
.ua-stat__suffix { color: var(--ua-hover); }
.ua-stat__label { max-width: 110px; font-size: var(--ua-fs-body); font-weight: 600; line-height: 1.3; color: var(--ua-navy); }

@media (max-width: 1024px) {
  .ua-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-stat { flex-direction: column; gap: 8px; padding: 24px 16px; text-align: center; }
  .ua-stat__label { max-width: none; }
  .ua-stat + .ua-stat { border-left: 0; }
  .ua-stat:nth-child(even) { border-left: 1px solid var(--ua-line); }
  .ua-stat:nth-child(n+3) { border-top: 1px solid var(--ua-line); }
}
@media (max-width: 767px) {
  .ua-section.ua-stats { padding: 32px 0; }
}

/* ---------- 10.14 PROCESS (.ua-process): navy gradient band, five glass cards joined by short lines (stacked on tablet + mobile) ---------- */
.ua-section.ua-process {
  color: var(--ua-white); background-color: var(--ua-navy);
  background-image: radial-gradient(50% 80% at 0% 0%, rgba(245, 166, 35, .10) 0%, rgba(245, 166, 35, 0) 60%), var(--ua-gradient);
}
.ua-process__inner { display: grid; gap: 56px; }
.ua-process__head { max-width: 720px; margin: 0 auto; text-align: center; }
.ua-process__head h2 { margin: 0 0 16px; color: var(--ua-white); }
.ua-process__head .ua-lead { margin: 0; color: rgba(255, 255, 255, .85); }
.ua-process__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ua-step { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--ua-radius); }
.ua-step__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; font-size: var(--ua-fs-h4); font-weight: 700; color: var(--ua-navy); background: var(--ua-hover); border-radius: 50%; }
.ua-step:not(:last-child)::after { content: ""; position: absolute; top: 46px; left: 100%; width: 24px; height: 2px; background: rgba(245, 166, 35, .55); }
.ua-step h3 { margin: 0; color: var(--ua-white); }
.ua-step p { margin: 0; font-size: var(--ua-fs-small); line-height: 1.6; color: rgba(255, 255, 255, .75); }

@media (max-width: 1024px) {
  .ua-process__steps { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; }
  .ua-step:not(:last-child)::after { top: 100%; left: 46px; width: 2px; height: 16px; }
}

/* ---------- 10.15 PRINCIPLES (.ua-principles): centred heading, four open columns with an icon each ---------- */
.ua-principles__inner { display: grid; gap: 56px; }
.ua-principles__head { text-align: center; }
.ua-principles__head h2 { margin: 0; }
.ua-principles__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.ua-principle { display: grid; justify-items: center; gap: 12px; align-content: start; text-align: center; }
.ua-principle .ua-icon { margin-bottom: 8px; }
.ua-principle h3 { margin: 0; }
.ua-principle p { margin: 0; max-width: 260px; }

@media (max-width: 1024px) {
  .ua-principles__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ua-principles__items { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* =========================================================
   11. MOTION  (smooth scrolling, transitions, reveal on scroll)
   Applies to the whole site and to any section added later.
   ========================================================= */

/* Smooth scrolling for anchor links */
html { scroll-behavior: smooth; scroll-padding-top: 16px; interpolate-size: allow-keywords; }
:root:has(body.admin-bar) { scroll-padding-top: 48px; }

/* One consistent, gentle transition on every interactive element (components can still override) */
a, button, input, select, textarea, summary {
  transition: color var(--ua-dur) var(--ua-ease), background-color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease),
              box-shadow var(--ua-dur) var(--ua-ease), transform var(--ua-dur) var(--ua-ease), opacity var(--ua-dur) var(--ua-ease);
}
.ua-btn:active, .ua-carousel__btn:active { transform: scale(.97); }
.wpcf7 form input:focus, .wpcf7 form select:focus, .wpcf7 form textarea:focus { box-shadow: 0 0 0 3px rgba(1, 37, 51, .12); }

/* Cards lift slightly on hover */
@media (hover: hover) {
  .ua-review, .ua-subject { transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease); }
  .ua-review:hover, .ua-subject:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-hover); }
}

/* Images fade in once loaded (class added by main.js only while an image is still loading) */
.ua-img-fade { opacity: 0; transition: opacity .5s var(--ua-ease); }
.ua-img-fade.is-loaded { opacity: 1; }

/* Scroll reveal: main.js adds .ua-reveal to blocks, then .is-visible when they enter the screen, then removes both */
@keyframes ua-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ua-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--ua-dur-slow) var(--ua-ease) var(--ua-delay, 0ms), transform var(--ua-dur-slow) var(--ua-ease) var(--ua-delay, 0ms);
}
.ua-reveal[data-ua-reveal="fade"]  { transform: none; }
.ua-reveal[data-ua-reveal="left"]  { transform: translateX(-32px); }
.ua-reveal[data-ua-reveal="right"] { transform: translateX(32px); }
.ua-reveal[data-ua-reveal="zoom"]  { transform: scale(.94); }
.ua-reveal.is-visible { opacity: 1; transform: none; }

/* Smooth open / close for accordions (<details>), e.g. the FAQ */
.ua-section details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ua-ease), content-visibility .35s allow-discrete; }
.ua-section details[open]::details-content { block-size: auto; }

/* Smooth cross-fade between pages (browsers that support it; others navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }

/* People who prefer less motion get none of it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ua-reveal { opacity: 1; transform: none; }
}
@media print { .ua-reveal, .ua-img-fade { opacity: 1 !important; transform: none !important; } }