/* One Yuitor blue, navy and teal system for every exported page. */
:root,
#root,
#root.dark {
  color-scheme: light;
  --brand-blue: hsl(221 83% 53%);
  --brand-blue-deep: hsl(222 65% 39%);
  --brand-teal: hsl(180 80% 35%);
  --brand-deep-teal: hsl(182 85% 30%);
  --brand-navy: hsl(222 47% 11%);
  --brand-paper: #f5f9fc;
  --brand-white: #fff;
  --brand-copy: #344b5e;
  --brand-muted: #657b8e;
  --brand-line: #dbe6ef;

  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --card-border: 210 26% 89%;
  --border: 210 26% 87%;
  --input: 210 20% 82%;
  --ring: 221 83% 53%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 180 80% 35%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 35% 94%;
  --muted-foreground: 214 18% 36%;
  --accent: 182 85% 30%;
  --accent-foreground: 0 0% 100%;
  --navy: 222 47% 11%;
  --navy-foreground: 0 0% 100%;
  --teal: 182 85% 30%;
  --teal-foreground: 0 0% 100%;
  --sidebar: 210 40% 98%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-border: 210 26% 87%;
  --sidebar-primary: 221 83% 53%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 35% 94%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-ring: 221 83% 53%;

  /* Compatibility aliases used by older route and portal styles. */
  --yu-brand-plum: var(--brand-navy);
  --yu-brand-violet: var(--brand-blue);
  --yu-brand-violet-deep: var(--brand-blue-deep);
  --yu-brand-gold: var(--brand-teal);
  --yu-brand-cream: var(--brand-paper);
  --yu-brand-lavender: #edf5fa;
  --yu-brand-line: var(--brand-line);
  --yu-brand-copy: var(--brand-copy);
  --yu-brand-muted: var(--brand-muted);
}

html { scroll-behavior: smooth; background: var(--brand-paper); }
body, #root {
  min-height: 100%;
  background: var(--brand-paper) !important;
  color: var(--brand-navy);
  font-family: "DM Sans", "Manrope", Arial, sans-serif;
}
#root :is(h1,h2,h3,h4,h5,h6) { color: var(--brand-navy); }
#root ::selection { color: #fff; background: var(--brand-blue); }
#root :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid var(--brand-teal) !important;
  outline-offset: 3px;
}
#root main.yu-monochrome-main:not(:has(.yu-home)) {
  background: var(--brand-paper) !important;
  color: var(--brand-copy) !important;
}
#root main:not(.yu-home) :is(input,select,textarea) {
  border-color: var(--brand-line) !important;
  background: #fff !important;
  color: var(--brand-navy) !important;
}
#root main:not(.yu-home) thead { background: #e8f1f8 !important; }
#root main:not(.yu-home) thead th { color: var(--brand-navy) !important; }

/* Announcement strip, desktop navigation and mobile menu. */
#root .yu-shared-notice {
  border-color: rgb(18 161 161 / 42%) !important;
  background: var(--brand-navy) !important;
  color: #f7fbff !important;
}
#root .yu-shared-notice :is(svg,button) { color: #78d3d3 !important; }
#root .yu-shared-header { font-family: "DM Sans", "Manrope", Arial, sans-serif; }
#root .yu-shared-header > div:first-child {
  border-color: rgb(255 255 255 / 14%) !important;
  background: linear-gradient(100deg, var(--brand-navy), #123c52 55%, var(--brand-deep-teal)) !important;
}
#root .yu-shared-header > div:first-child .container :is(a,span) { color: #f4f9fc !important; }
#root .yu-shared-header > div:first-child svg { color: #69c9cc !important; }
#root .yu-shared-header > div:nth-child(2) {
  border-color: var(--brand-line) !important;
  background: rgb(255 255 255 / 98%) !important;
  box-shadow: 0 9px 28px rgb(15 23 42 / 9%) !important;
}
#root .yu-shared-header [data-testid="link-logo"] > div:first-child,
#root footer.yu-shared-footer a.group > div:first-child {
  border-color: #cfe0eb !important;
  background: #eef6fa !important;
}
#root .yu-shared-header [data-testid="link-logo"] span:first-of-type,
#root .yu-shared-header [data-testid="link-logo"] p:first-of-type {
  background: none !important;
  color: var(--brand-navy) !important;
  -webkit-text-fill-color: var(--brand-navy) !important;
}
#root .yu-shared-header [data-testid="link-logo"] span:last-of-type,
#root .yu-shared-header [data-testid="link-logo"] p:last-of-type { color: #557184 !important; }
#root .yu-shared-header nav > a,
#root .yu-shared-header nav > div > button,
#root .yu-shared-header [data-testid="link-enquire"],
#root .yu-shared-header [data-testid="link-call-now"] { color: var(--brand-navy) !important; }
#root .yu-shared-header [data-testid="link-enquire"] {
  border-color: var(--brand-blue) !important;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-deep)) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgb(37 99 235 / 20%) !important;
}
#root .yu-shared-header [data-testid="link-call-now"] {
  border-color: #b9d9e5 !important;
  background: #fff !important;
  color: var(--brand-deep-teal) !important;
}
#root .yu-shared-header nav > a:hover,
#root .yu-shared-header nav > div > button:hover { color: var(--brand-blue) !important; }
#root .yu-shared-header [data-testid="button-hamburger"] {
  border-color: #c9dce8 !important;
  color: var(--brand-blue-deep) !important;
}
#root .yu-shared-header [data-testid="button-hamburger"]:hover { background: #edf6fa !important; }
#root .yu-mobile-menu { background: #fff !important; color: var(--brand-navy) !important; }
#root .yu-mobile-menu > div:first-child {
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-deep-teal)) !important;
  color: #fff !important;
}
#root .yu-mobile-menu > div:first-child :is(p,a,span) { color: #fff !important; }
#root .yu-mobile-menu > div:first-child p:nth-of-type(2) { color: #d4e9ef !important; }
#root .yu-mobile-menu a { color: var(--brand-navy) !important; }

/* Shared footer and its unchanged facts strip. */
#root footer.yu-shared-footer {
  border-top: 1px solid #124c5b !important;
  background: linear-gradient(145deg, var(--brand-navy), #102b3d 62%, #0c454b) !important;
  color: #edf6fa !important;
}
#root footer.yu-shared-footer > div:first-child {
  border-color: rgb(255 255 255 / 14%) !important;
  background: linear-gradient(95deg, #104e5d, #123c52 56%, var(--brand-navy)) !important;
}
#root footer.yu-shared-footer > div:first-child > div > div > div {
  border-color: rgb(255 255 255 / 16%) !important;
}
#root footer.yu-shared-footer > div:first-child svg { color: #78d3d3 !important; }
#root footer.yu-shared-footer > div:first-child :is(p,span) { color: #eaf6fa !important; }
#root footer.yu-shared-footer :is(p,a,span,li) { color: #d4e2e9 !important; }
#root footer.yu-shared-footer :is(h1,h2,h3,h4),
#root footer.yu-shared-footer a.group p:first-of-type {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#root footer.yu-shared-footer a.group p:last-of-type,
#root footer.yu-shared-footer [class*="text-[#7BB5FF]"] { color: #78d3d3 !important; }
#root footer.yu-shared-footer a:hover { color: #8fe0df !important; }
#root footer.yu-shared-footer svg { color: #76cdd0 !important; }
#root footer.yu-shared-footer a[href^="https://wa.me"] {
  background: #16874d !important;
  color: #fff !important;
}
#root footer.yu-shared-footer a[href^="https://wa.me"] * { color: #fff !important; }
#root footer.yu-shared-footer > div:last-child { border-color: rgb(255 255 255 / 16%) !important; }

/* Keep hard-coded legacy route accents on the shared brand colors. */
#root [class*="bg-[#F5EEFF]"] { background-color: #eaf5f7 !important; }
#root [class*="bg-[#0056B3]"], #root [class*="bg-[#1677FF]"] { background-color: var(--brand-blue) !important; }
#root [class*="bg-[#003D80]"], #root [class*="bg-[#0A0A0A]"] { background-color: var(--brand-navy) !important; }
#root [class*="bg-[#111111]"] { background-color: #123c52 !important; }
#root [class*="bg-[#7BB5FF]"] { background-color: var(--brand-teal) !important; }
#root [class*="bg-[#BFDFFF]"] { background-color: #d9eff4 !important; }
#root [class*="text-[#0056B3]"], #root [class*="text-[#1677FF]"],
#root [class*="text-[#00458F]"] {
  color: var(--brand-blue-deep) !important;
  -webkit-text-fill-color: var(--brand-blue-deep) !important;
}
#root [class*="text-[#7BB5FF]"], #root [class*="text-[#BFDFFF]"] {
  color: #167c82 !important;
  -webkit-text-fill-color: #167c82 !important;
}
#root [class*="border-[#0056B3]"] { border-color: var(--brand-blue) !important; }
#root [class*="from-[#0056B3]"] {
  --tw-gradient-from: var(--brand-blue) !important;
  --tw-gradient-to: var(--brand-blue-deep) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
#root main.yu-monochrome-main section.relative:has(> img) > div.absolute.inset-0.bg-gradient-to-br {
  background-image: linear-gradient(132deg, rgb(15 23 42 / 93%), rgb(11 143 147 / 80%) 58%, rgb(37 99 235 / 62%)) !important;
}
#root main.yu-monochrome-main section.relative:has(> img) h1 { color: #fff !important; }
#root main.yu-monochrome-main section.relative:has(> img) p { color: rgb(255 255 255 / 90%) !important; }

/* Homepage palette: blue and teal surfaces with the CTA ring motif used selectively. */
.yn-home {
  --yn-ink: var(--brand-navy);
  --yn-muted: #5c7184;
  --yn-line: #dbe6ef;
  --yn-paper: #f6fafe;
  --yn-lilac: var(--brand-blue);
  --yn-plum: var(--brand-navy);
  --yn-coral: var(--brand-teal);
  --yn-lime: #74d1d1;
  background: var(--brand-paper) !important;
  color: var(--brand-navy) !important;
}
.yn-home :is(h1,h2,h3) { color: var(--brand-navy); }
.yn-home h1 em, .yn-home h2 em { color: var(--brand-blue) !important; }
.yn-hero { background: #f1f7fb !important; }
.yn-hero-glow {
  background:
    radial-gradient(ellipse at 82% 40%, rgb(37 99 235 / 11%), transparent 38%),
    radial-gradient(ellipse at 12% 92%, rgb(18 161 161 / 10%), transparent 32%),
    linear-gradient(130deg, #fafdff, #edf5fa 70%, #eaf4f8) !important;
}
.yn-hero-glow::after {
  border-color: rgb(37 99 235 / 15%) !important;
  box-shadow: 0 0 0 42px rgb(37 99 235 / 4%), 0 0 0 94px rgb(18 161 161 / 4%) !important;
}
.yn-reviews::before {
  border-color: rgb(120 211 211 / 22%) !important;
  box-shadow: 0 0 0 50px rgb(255 255 255 / 2%), 0 0 0 112px rgb(120 211 211 / 4%) !important;
}
.yn-location-pill { border-color: #cfe1ed !important; color: #34556e !important; }
.yn-hero-visual::before { border-color: #b9d6e6 !important; }
.yn-photo-stamp { background: #9de0df !important; color: var(--brand-navy) !important; }
.yn-hero-lede, .yn-section-heading > p, .yn-heading-split > p { color: #526a7d !important; }
.yn-button-primary {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-deep)) !important;
  box-shadow: 0 10px 23px rgb(37 99 235 / 20%) !important;
}
.yn-button-primary:hover { background: var(--brand-blue-deep) !important; }
.yn-button-outline { border-color: #bfd4e3 !important; color: var(--brand-navy) !important; }
.yn-note-dot { background: var(--brand-teal) !important; box-shadow: 0 0 0 4px rgb(18 161 161 / 15%) !important; }
.yn-card-icon, .yn-faq-toggle { background: #e3f2f5 !important; color: var(--brand-deep-teal) !important; }
.yn-price-card:hover { border-color: #8db9de !important; }
.yn-price-arrow, .yn-price-link, .yn-text-link { color: var(--brand-blue-deep) !important; }
.yn-comparison, .yn-why { background: #f0f6fa !important; }
.yn-compare-table thead { background: #e5eff6 !important; }
.yn-table-wrap { border-color: var(--brand-line) !important; }
.yn-compare-table tbody th, .yn-compare-table td { border-color: #e5edf3 !important; }
.yn-compare-table .yn-table-highlight { background: #e8f5f5 !important; color: var(--brand-navy) !important; }
.yn-compare-table thead .yn-table-highlight { color: var(--brand-deep-teal) !important; }
.yn-check { background: #d8eeee !important; color: #126a70 !important; }
.yn-review-main .yn-eyebrow, .yn-review-main .yn-eyebrow-number { color: #a8e2e2 !important; }
.yn-review-main h2 em { color: #78d3d3 !important; }
.yn-review-note { border-color: rgb(180 224 233 / 27%) !important; background: rgb(255 255 255 / 7%) !important; }
.yn-quote-mark, .yn-review-signoff { color: #79d2d2 !important; }
.yn-review-note p, .yn-review-main > p { color: #d5e5ec !important; }
.yn-teacher-photo { background: #e6f0f7 !important; }
.yn-teacher-photo::before { border-color: rgb(38 102 232 / 18%) !important; }
.yn-teacher-photo::after { background: rgb(18 161 161 / 25%) !important; }
.yn-teacher-photo::before, .yn-teacher-photo::after {
  display: none !important;
  content: none !important;
}
.yn-teacher-photo img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.yn-faculty-rs { background: linear-gradient(145deg, #e2edfa, #d7eeed) !important; }
.yn-faculty-pa { background: linear-gradient(145deg, #e5f3f4, #e2eafb) !important; }
.yn-faculty-vg { background: linear-gradient(145deg, #dceafa, #e3f1f4) !important; }
.yn-faculty-sy { background: linear-gradient(145deg, #e1f1f2, #e2eafa) !important; }
.yn-teacher-monogram { color: var(--brand-navy) !important; }
.yn-teacher-role, .yn-experience span { color: var(--brand-deep-teal) !important; }
.yn-teacher-disclaimer { color: #5c7184 !important; }
.yn-reason-grid, .yn-reason-card { border-color: #d8e5ed !important; }
.yn-faq { background: #fff !important; }
.yn-faq-toggle { background: #e9f3f8 !important; color: var(--brand-blue-deep) !important; }
.yn-faq-item.is-open .yn-faq-toggle { background: var(--brand-blue) !important; color: #fff !important; }
.yn-cta {
  background: linear-gradient(128deg, var(--brand-navy), #12394b 58%, #0b5154) !important;
}
.yn-cta-pattern { border-color: rgb(117 218 220 / 24%) !important; }
.yn-cta .yn-eyebrow, .yn-cta .yn-eyebrow-number { color: #b9e6e7 !important; }
.yn-cta h2 em { color: #78d3d3 !important; }
.yn-cta .yn-button-accent { background: #72d0d0 !important; color: #102c3f !important; }
.yn-cta .yn-button-accent:hover { background: #a0e3e3 !important; }
.yn-cta-side-label, .yn-cta-map { color: #8bd9d9 !important; }

/* Keep portal surfaces on the same palette while retaining semantic status colors. */
#root main.portal-main { background: var(--brand-paper) !important; color: var(--brand-copy) !important; }
.portal-kicker::before { background: var(--brand-teal) !important; }
.portal-button {
  border-color: var(--brand-blue-deep) !important;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-deep)) !important;
}
.portal-button--quiet { border-color: var(--brand-line) !important; background: #fff !important; color: var(--brand-blue-deep) !important; }
.portal-tab[aria-selected="true"] { border-bottom-color: var(--brand-blue) !important; color: var(--brand-blue-deep) !important; }
.portal-table th { background: #e8f1f8 !important; color: var(--brand-navy) !important; }
.portal-tabs, .portal-tab { border-color: var(--brand-line) !important; }

/* A quiet, page-wide echo of the CTA circles—behind content, never over cards or text. */
#root main.yu-monochrome-main,
#root main.portal-main {
  position: relative;
  isolation: isolate;
}
#root main.yu-monochrome-main::before,
#root main.portal-main::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 18%, transparent 0 62px, rgb(37 99 235 / 5%) 63px 64px, transparent 65px 116px, rgb(18 161 161 / 4%) 117px 118px, transparent 119px 174px),
    radial-gradient(circle at 9% 78%, transparent 0 72px, rgb(18 161 161 / 4%) 73px 74px, transparent 75px 132px, rgb(37 99 235 / 3%) 133px 134px, transparent 135px 196px);
  background-position: center top;
  background-size: 100% 820px;
  background-repeat: repeat-y;
  content: "";
  pointer-events: none;
}
#root main.yu-monochrome-main:not(:has(.yn-home)) section,
#root main.portal-main section,
#root .yn-home > section:not(.yn-hero):not(.yn-reviews):not(.yn-cta) {
  position: relative;
  isolation: isolate;
}
#root main.yu-monochrome-main:not(:has(.yn-home)) section::before,
#root main.portal-main section::before,
#root .yn-home > section:not(.yn-hero):not(.yn-reviews):not(.yn-cta)::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(circle at 92% 22%, transparent 0 58px, rgb(37 99 235 / 4%) 59px 60px, transparent 61px 108px, rgb(18 161 161 / 3%) 109px 110px, transparent 111px 164px),
    radial-gradient(circle at 6% 82%, transparent 0 64px, rgb(18 161 161 / 3%) 65px 66px, transparent 67px 118px, rgb(37 99 235 / 2%) 119px 120px, transparent 121px 174px);
  content: "";
  pointer-events: none;
}

@media (max-width: 760px) {
  #root .yu-shared-header > div:first-child { background: var(--brand-navy) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #root *, #root *::before, #root *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}