/* Variant B: the same content with quiet depth, satin icons and raised surfaces. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/lexend/lexend-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/lexend/lexend-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --relief-shadow: 0 14px 36px rgb(25 69 112 / 6%), 0 2px 5px rgb(25 69 112 / 3%);
  --relief-line: #dbe6ef;
}
html { scroll-padding-top: 126px; }
/* A single background carries the halos across section boundaries. */
body {
  font-family: "Lexend", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse 68% 16% at 108% 4%, rgb(201 225 252 / 70%) 0, rgb(201 225 252 / 28%) 42%, transparent 80%),
    radial-gradient(ellipse 62% 18% at -12% 23%, rgb(210 232 253 / 75%) 0, rgb(210 232 253 / 30%) 42%, transparent 80%),
    radial-gradient(ellipse 68% 17% at 108% 44%, rgb(201 225 252 / 65%) 0, rgb(201 225 252 / 26%) 42%, transparent 80%),
    radial-gradient(ellipse 62% 18% at -12% 66%, rgb(210 232 253 / 70%) 0, rgb(210 232 253 / 28%) 42%, transparent 80%),
    radial-gradient(ellipse 68% 18% at 108% 96%, rgb(201 225 252 / 60%) 0, rgb(201 225 252 / 24%) 42%, transparent 80%),
    #fafcff;
}
.hero, .services, .approach, .method, .courses, .student-section, .site-footer {
  background: transparent;
}
.student-section { border-bottom: 0; }
.header-inner { min-height: 110px; }
.brand { flex: 0 1 300px; min-width: 0; }
.brand img { width: 300px; max-width: 100%; height: auto; }
.footer-brand { display: block; flex: 0 1 260px; min-width: 0; }
.footer-brand img { width: 260px; max-width: 100%; height: auto; }
.relief-icon {
  fill: none;
  stroke: none;
  overflow: visible;
}
.micro-illustration {
  display: block;
  object-fit: contain;
}
.eyebrow {
  position: relative;
  padding-bottom: 8px;
  gap: 0;
}
.eyebrow::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(110deg, #6bb5f7, #155caa);
  box-shadow: 0 1px 1px rgb(21 92 170 / 18%);
}
.contact .eyebrow::before {
  background: linear-gradient(110deg, #d2eaff, #8dbfed);
}
.hero-photo {
  position: relative;
}
.photo-frame {
  border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: 0 20px 44px rgb(31 62 91 / 9%), 0 3px 8px rgb(31 62 91 / 3%);
}
.hero-photo figcaption {
  padding-top: 22px;
}
.hero-illustration {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.hero-illustration .photo-frame {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-illustration .photo-frame img {
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}
.hero-reassurance {
  gap: 24px;
}
.hero-reassurance .relief-icon {
  width: 30px;
  height: 30px;
}
.hero-reassurance li {
  gap: 7px;
}
.button-primary {
  border-color: #1761aa;
  background: linear-gradient(170deg, #2876bc, #155caa 74%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 23%), 0 2px 0 #104d8d, 0 6px 12px rgb(21 92 170 / 13%);
}
.button-primary:hover {
  background: linear-gradient(170deg, #226caf, #104f96 74%);
}
.button-primary:active {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 0 #104d8d;
}
.button-secondary,
.menu-toggle {
  background: linear-gradient(170deg, #fff, #f4f8fc);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgb(24 69 111 / 4%);
}
.pathways {
  border-color: var(--relief-line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 12px rgb(30 64 96 / 2%), 0 12px 30px rgb(30 64 96 / 5%);
  background: linear-gradient(175deg, #fff, #fcfdff);
}
.pathway {
  padding: 25px 28px;
  min-height: 138px;
  gap: 20px;
}
.pathway:first-child {
  border-right-color: var(--relief-line);
  border-radius: 19px 0 0 0;
}
.pathway:last-child {
  border-radius: 0 19px 0 0;
}
.pathway:hover {
  background: #f6faff;
}
.icon-tile,
.icon-tile.warm {
  display: grid;
  flex-basis: 78px;
  width: 78px;
  height: 78px;
  background: transparent;
  border-radius: 0;
}
.icon-tile .relief-icon {
  width: 78px;
  height: 78px;
}
.icon-tile .help-bubble,
.icon-tile .learning-books {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.services-layout {
  gap: 60px;
  grid-template-columns: .8fr 1.3fr;
}
.service-grid {
  gap: 22px;
}
.service-card,
.service-card:nth-child(n+3) {
  position: relative;
  padding: 26px;
  border: 1px solid var(--relief-line);
  border-radius: 18px;
  background: linear-gradient(155deg, #fff 30%, #f8fbfe);
  box-shadow: var(--relief-shadow), inset 0 1px 0 #fff;
}
.service-icon {
  position: static;
  width: 74px;
  height: 74px;
  margin: -5px 0 14px -5px;
}
.service-illustration {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: contain;
}
.service-card h3 {
  font-size: 1.22rem;
}
.check-list {
  gap: 14px;
}
.check-list li {
  align-items: center;
  gap: 10px;
}
.check-list .relief-icon {
  width: 29px;
  height: 29px;
}
.method-steps {
  gap: 32px;
}
.step-number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #e3edf8;
  border-radius: 17px;
  background: radial-gradient(ellipse at 28% 14%, #fff 0 26%, transparent 72%), linear-gradient(145deg, #fff 6%, #f0f6ff 60%, #dbe9f9);
  box-shadow: inset 1px 2px 3px #fff, inset -2px -3px 5px rgb(86 139 194 / 12%), 0 2px 0 #d4e2f2, 0 4px 0 #cbdced, 0 8px 13px rgb(30 79 126 / 10%);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.4px;
}
.step-digit {
  display: block;
  color: #0879e4;
  font-size: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 -1px 0 #83bdf4, 0 1px 0 #075db5, 0 2px 0 #0752a0, 0 3px 2px rgb(17 69 121 / 18%);
  transform: translateY(-1px);
}
.course-card {
  border-color: var(--relief-line);
  background: linear-gradient(165deg, #fff 55%, #f6faff);
  box-shadow: var(--relief-shadow), inset 0 1px 0 #fff;
}
.contact-form {
  border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: 0 24px 50px rgb(6 28 48 / 15%), 0 4px 8px rgb(6 28 48 / 7%);
}
.form-field input,
.form-field textarea {
  box-shadow: inset 0 2px 3px rgb(23 61 96 / 3%);
}
.student-inner > .icon-tile {
  flex-basis: 62px;
  width: 62px;
  height: 62px;
  background: transparent;
}
.student-inner > .icon-tile .relief-icon {
  width: 62px;
  height: 62px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pathway .icon-tile {
    transition: transform .22s ease;
  }
  .pathway:hover .icon-tile {
    transform: translateY(-2px);
  }
}
@media (max-width: 1200px) {
  html { scroll-padding-top: 110px; }
  .header-inner { min-height: 94px; }
  .brand { flex: 0 1 260px; }
  .brand img { width: 260px; }
}
@media (max-width: 1100px) {
  .services-layout { gap: 36px; grid-template-columns: .8fr 1.3fr; }
  .service-card, .service-card:nth-child(n+3) { padding: 22px; }
  .pathway { padding-inline: 22px; gap: 14px; }
  .icon-tile, .icon-tile.warm { flex-basis: 66px; width: 66px; height: 66px; }
  .icon-tile .relief-icon { width: 66px; height: 66px; }
}
@media (max-width: 800px) {
  .hero-illustration { max-width: 360px; }
  .services-layout { grid-template-columns: 1fr; }
  .pathways { grid-template-columns: 1fr; }
  .pathway { min-height: 122px; }
  .pathway .icon-tile { display: grid; }
  .pathway:first-child { border-right: 0; border-bottom: 1px solid var(--relief-line); border-radius: 19px 19px 0 0; }
  .pathway:last-child { border-radius: 0; }
  .student-inner > .icon-tile { display: none; }
}
@media (max-width: 680px) {
  .method-steps li, .method-steps li+li { padding-left: 78px; min-height: 78px; }
  .step-number { width: 55px; height: 55px; font-size: 1.2rem; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 102px; }
  .header-inner { min-height: 86px; }
  .brand { flex: 0 1 225px; }
  .brand img { width: 225px; }
  .menu-toggle { flex-shrink: 0; }
  .footer-brand { flex-basis: 225px; }
  .footer-brand img { width: 225px; }
  .hero-reassurance { gap: 12px 18px; }
  .hero-reassurance .relief-icon { width: 27px; height: 27px; }
  .hero-photo figcaption { padding-top: 17px; }
  .pathway { padding: 20px 16px; min-height: 126px; gap: 12px; }
  .pathway .icon-tile, .pathway .icon-tile.warm { flex-basis: 62px; width: 62px; height: 62px; }
  .pathway .icon-tile .relief-icon { width: 62px; height: 62px; }
  .pathway h2 { font-size: 1.13rem; }
  .pathway-arrow { width: 18px; height: 18px; }
  .service-grid { gap: 18px; }
  .service-card, .service-card:nth-child(n+3), .service-card:last-child {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 24px 18px;
    border: 1px solid var(--relief-line);
    border-radius: 14px;
  }
  .service-card .service-icon { position: static; grid-row: 1 / 3; width: 60px; height: 60px; margin: -5px 0 0 -5px; }
  .service-card h3 { grid-column: 2; font-size: 1.18rem; margin-bottom: 0; }
  .service-card p { grid-column: 2; }
  .check-list .relief-icon { width: 27px; height: 27px; }
  .method-steps li, .method-steps li+li { padding-left: 74px; }
  .step-number { width: 52px; height: 52px; border-radius: 15px; }
}
@media print {
  body { background: #fff; }
  .hero, .services, .approach, .method, .courses, .student-section { background: #fff; }
  .service-card, .course-card, .photo-frame, .step-number { box-shadow: none; }
  .eyebrow::before, .contact .eyebrow::before { background: currentColor; box-shadow: none; }
}