/* TutorFit – DESKTOP layout (loaded at min-width: 960px). */

.section { padding-block: var(--space-9); }

/* ---------- Header ---------- */
.hdr { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.hdr .brand { height: 46px; flex: none; }
.hdr-nav { margin-left: auto; }
.hdr-nav ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.hdr-nav a {
  position: relative; display: block; white-space: nowrap; padding: 10px 12px; border-radius: 10px;
  font-size: .9375rem; font-weight: 600; color: var(--c-slate); text-decoration: none;
}
.hdr-nav a:hover { color: var(--c-indigo); background: var(--c-indigo-50); }
.hdr-nav a.is-active { color: var(--c-indigo); }
.hdr-nav a.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c-saffron);
}
.hdr-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.hdr-wa { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--c-wa); text-decoration: none; }
.hdr-wa svg { width: 20px; height: 20px; }
.hdr-wa:hover { color: var(--c-wa-hover); text-decoration: underline; }
.hdr-cta__short { display: none; }
/* Full "Book Free Consultation" label fits down to 1024px; below that use "Book Free Call". */
@media (max-width: 1023px) {
  .hdr-cta__long { display: none; }
  .hdr-cta__short { display: inline; }
}
@media (max-width: 1120px) {
  .hdr .brand { height: 40px; }
  .hdr-nav a { font-size: .875rem; padding-inline: 7px; }
}
@media (max-width: 1180px) {
  .hdr { gap: 16px; }
  .hdr-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hdr-wa svg { width: 26px; height: 26px; }
  .hdr-nav a { padding-inline: 9px; }
}

/* ---------- WhatsApp FAB ---------- */
.wa-fab { right: 28px; bottom: 28px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 56px 0 96px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.hero__where { margin-bottom: 28px; }
.hero h1 { font-size: clamp(2.9rem, 1.2rem + 3vw, 4rem); line-height: 1.04; max-width: 15ch; font-variation-settings: 'SOFT' 60; }
.hero__sub { margin-top: 24px; max-width: 34em; }
.hero__ctas { display: flex; gap: 14px; margin-top: 36px; }
.hero__fine { margin-top: 14px; font-size: var(--fs-sm); color: var(--c-slate); }
.hero__trust { display: flex; gap: 28px; margin: 40px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--c-line); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-indigo); line-height: 1.3; }
.hero__trust svg { width: 24px; height: 24px; flex: none; color: var(--c-teal-700); }

.collage { position: relative; height: 600px; margin: 0; }
.collage::before { display: none;
  content: ""; position: absolute; left: 6%; top: 4%; width: 92%; height: 100%;
  background: var(--c-saffron-100);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V38C0 20 26 9 50 0c24 9 50 20 50 38v62z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V38C0 20 26 9 50 0c24 9 50 20 50 38v62z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .7;
}
.collage img { position: absolute; filter: drop-shadow(0 24px 30px rgba(31, 42, 107, .18)); }
.collage__main { left: 8%; top: 40px; width: 60%; z-index: 2; }
.collage__book { right: 0; top: 0; width: 36%; z-index: 1; }
.collage__match { right: 2%; bottom: 0; width: 40%; z-index: 3; }
.badge {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 14px; background: var(--c-white); box-shadow: var(--shadow-2);
  font-size: .8125rem; line-height: 1.35; color: var(--c-slate); max-width: 290px;
}
.badge strong { display: block; font-size: .9375rem; color: var(--c-indigo); white-space: nowrap; }
.badge__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.badge__icon svg { width: 24px; height: 24px; }
.badge__icon--teal { background: var(--c-teal-100); color: var(--c-teal-700); }
.badge__icon--saffron { background: var(--c-saffron-100); color: var(--c-saffron-600); }
.badge--a { left: -4%; bottom: 18%; }
.badge--b { left: -6%; top: 20%; }

/* ---------- Boards band ---------- */
.boards { background: var(--c-white); border-block: 1px solid var(--c-line); padding: 44px 0; }
.boards__inner { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.boards__title { font-size: 1.625rem; line-height: 1.2; }
.boards__rows { display: grid; gap: 16px; }
.boards__row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: baseline; }
.boards__label { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--c-slate); letter-spacing: 0; padding-top: 8px; }

/* ---------- Comparison table ---------- */
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp-table thead td:first-child { width: 21%; }
.cmp-table thead th:not(.cmp-table__us) { width: 37%; }
.cmp-table thead th, .cmp-table thead td { padding: 22px 28px; text-align: left; vertical-align: bottom; }
.cmp-table thead th:not(.cmp-table__us) { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--c-slate); }
.cmp-table tbody th {
  padding: 22px 28px 22px 0; text-align: left; vertical-align: top; width: 22%;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; color: var(--c-indigo); line-height: 1.3;
  border-top: 1px solid var(--c-line);
}
.cmp-table tbody td { padding: 22px 28px; vertical-align: top; border-top: 1px solid var(--c-line); line-height: 1.5; }
.cmp-table__self { color: var(--c-slate); }
.cmp-table td, .cmp-table th { position: relative; }
.cmp-table tbody td { padding-left: 64px; }
.cmp-ic { display: inline-grid; width: 26px; height: 26px; }
.cmp-table .cmp-ic { position: absolute; left: 26px; top: 21px; }
.cmp-ic svg { width: 26px; height: 26px; }
.cmp-ic--no { color: #8A8FA3; }
.cmp-ic--yes { color: var(--c-saffron); }
.cmp-table__us { background: var(--c-indigo); color: #fff; font-weight: 600; }
.cmp-table tbody td.cmp-table__us { border-top-color: rgba(255, 255, 255, .12); }
.cmp-table thead .cmp-table__us { border-radius: 20px 20px 0 0; padding-top: 28px; }
.cmp-table thead .cmp-table__us img { height: 34px; width: auto; }
.cmp-table tbody tr:last-child .cmp-table__us { border-radius: 0 0 20px 20px; padding-bottom: 30px; }

/* ---------- Steps: ascending timeline ---------- */
.steps__track { position: relative; }
.steps__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; align-items: start; }
.steps .step { background: var(--c-white); border-radius: var(--r-md); padding: 28px 26px 30px; box-shadow: var(--shadow-1); }
.steps .step:nth-child(1) { margin-top: 168px; }
.steps .step:nth-child(2) { margin-top: 112px; }
.steps .step:nth-child(3) { margin-top: 56px; }
.steps .step:nth-child(4) { margin-top: 0; box-shadow: var(--shadow-2); outline: 2px solid var(--c-saffron); outline-offset: -2px; }
.steps .step__num {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px;
  background: var(--c-indigo); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.625rem; font-variation-settings: 'SOFT' 100;
}
.steps .step:nth-child(4) .step__num { background: var(--c-saffron); color: var(--c-indigo); }
.steps .step h3 { font-size: 1.25rem; }
.steps .step p { margin-top: 10px; color: var(--c-slate); font-size: .96875rem; }
.steps__path { position: absolute; left: 0; top: -28px; width: 100%; height: 200px; z-index: 0; overflow: visible; }

/* ---------- Localities grid ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1279px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc-col { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 24px 24px 20px; }
.loc-col h3 { font-size: 1.125rem; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 2px solid var(--c-saffron); }
.loc-col ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 12px; }
.loc-col li { font-size: .875rem; line-height: 1.35; padding: 5px 0; color: var(--c-ink); break-inside: avoid; }
.loc-ask { margin-top: 32px; display: flex; gap: 10px; align-items: baseline; font-size: 1.0625rem; color: var(--c-slate); }

/* ---------- Verification checks ---------- */
.checks__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
.check-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 24px 24px 28px; }
.check-card img { width: 112px; height: auto; margin: -4px 0 14px -8px; }
.check-card__n { font-size: var(--fs-xs); font-weight: 700; color: var(--c-teal-700); }
.check-card h3 { margin-top: 4px; font-size: 1.25rem; }
.check-card p:last-child { margin-top: 8px; color: var(--c-slate); font-size: .96875rem; }
.checks__also { margin-top: 36px; max-width: 72ch; color: var(--c-slate); }

/* ---------- Promise ---------- */
.promise__grid { display: grid; grid-template-columns: 400px 1fr; gap: 88px; align-items: center; }
.promise__art {
  aspect-ratio: 4 / 5; display: grid; place-items: center; position: relative;
  background-color: var(--c-indigo);
  background-image:
    linear-gradient(0deg, var(--c-saffron) 0 14px, transparent 14px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 26px);
}
.promise__art::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--c-indigo-700); box-shadow: 0 0 0 14px rgba(46, 59, 138, .45); }
.promise__art img { position: relative; }
.promise__art img { width: 128px; opacity: .95; }
.promise__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.promise__copy .lead { margin-top: 18px; max-width: 46ch; }
.promise__list { margin-top: 28px; font-size: 1.0625rem; }
.promise__list li + li { margin-top: 14px; }
.promise__sign { margin-top: 32px; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--c-indigo); display: flex; align-items: center; gap: 14px; }
.promise__sign::before { content: ""; width: 40px; height: 2px; background: var(--c-saffron); }

/* ---------- Founding families ---------- */
.founding { padding-top: 0; }
.founding__card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center;
  padding: 44px 48px; border-radius: var(--r-lg); background: var(--c-saffron-100);
}
.founding__mark { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c-indigo); color: var(--c-saffron); }
.founding__mark svg { width: 36px; height: 36px; }
.founding__copy h2 { font-size: 2rem; }
.founding__copy p { margin-top: 10px; max-width: 62ch; color: #3D4257; }

/* ---------- Audiences ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aud { display: flex; flex-direction: column; padding: 32px 30px; border-radius: 20px; background: var(--c-paper); border: 1px solid var(--c-line); border-top: 6px solid var(--c-saffron); }
.aud--tutors { border-top-color: var(--c-teal); }
.aud--schools { border-top-color: var(--c-indigo); }
.aud h3 { font-size: 1.625rem; }
.aud > p { margin-top: 10px; color: var(--c-slate); }
.aud .tick-list { margin: 20px 0 28px; font-weight: 600; font-size: .96875rem; }
.aud .btn { margin-top: auto; align-self: flex-start; }

/* ---------- FAQ ---------- */
.faq__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.faq__head .lead { margin-top: 12px; max-width: 52ch; }
.faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; border-top: 1px solid var(--c-line); }

/* ---------- Final CTA ---------- */
.final-cta { padding: 104px 0; }
.final-cta::before, .final-cta::after {
  content: ""; position: absolute; bottom: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V38C0 20 26 9 50 0c24 9 50 20 50 38v62z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V38C0 20 26 9 50 0c24 9 50 20 50 38v62z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.final-cta::after { right: 6%; width: 380px; height: 470px; background: var(--c-indigo-700); opacity: .6; }
.final-cta::before { right: calc(6% + 95px); width: 190px; height: 290px; background: linear-gradient(180deg, rgba(252, 213, 138, .42), rgba(252, 213, 138, .04)); z-index: 1; }
.final-cta__inner { position: relative; z-index: 2; }
.final-cta h2 { max-width: 17ch; font-size: 3rem; }
.final-cta .lead { margin-top: 18px; max-width: 46ch; }
.final-cta__actions { display: flex; gap: 14px; margin-top: 36px; }

/* ---------- Footer ---------- */
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 48px; padding-block: 72px 56px; }
.footer-brand .brand { height: 44px; }
.footer-brand p { margin-top: 20px; max-width: 34ch; line-height: 1.6; }
.footer-col h2 { margin-bottom: 18px; }
.footer-city { color: #A9B2E6; }
.footer-bottom__inner { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; }
.footer-policies { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: 72px 56px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.prose-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
.prose-toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: var(--fs-sm); }
.prose-toc ol { list-style: none; padding: 0; margin: 12px 0 0; border-left: 2px solid var(--c-line); }
.prose-toc a { display: block; padding: 6px 0 6px 16px; color: var(--c-slate); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.prose-toc a:hover { color: var(--c-indigo); border-left-color: var(--c-saffron); }
.about-hero__grid { display: grid; grid-template-columns: 1fr 220px; gap: 64px; align-items: end; }
.about-hero h1 { max-width: 16ch; }
.about-hero__art { width: 200px; margin-bottom: -56px; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.values__card { border-top: 4px solid var(--c-saffron); }
.values__card p { margin-top: 10px; color: var(--c-slate); font-size: .96875rem; }
.policy .prose h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.policy .draft-banner { margin-top: 24px; max-width: 70ch; }
.page-404 { padding-block: 96px 120px; }
.page-404__grid { display: grid; grid-template-columns: 1fr 260px; gap: 72px; align-items: center; }
.page-404__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }