/* Page-specific layout. Home page rules are .hp-*. */

/* ---- Home: hero ---- */
.hp-hero { background: var(--warm); padding: 56px 0 72px; overflow: hidden; }
.hp-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 56px; align-items: center; }
.hp-kicker { display: inline-block; background: var(--crimson); color: #fff; font-weight: 700; font-size: .88rem; padding: 4px 10px; margin-bottom: 18px; }
.hp-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; color: var(--navy-deep); margin-bottom: 20px; max-width: 14ch; }
.hp-hero-lead { color: var(--ink); font-size: 1.2rem; line-height: 1.55; max-width: 46ch; margin-bottom: 28px; }
.hp-hero-note { color: var(--muted); font-size: .92rem; margin: 14px 0 0; max-width: 56ch; }

/* The picture: a photo, a tutor's video window on top of it, and the booked lesson. */
.hp-hero-visual { position: relative; margin: 0 0 0 24px; }
.hp-hero-photo { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 40% center; }
.hp-call { position: absolute; left: -28px; bottom: 56px; width: 38%; background: var(--navy-deep); border: 4px solid #fff; box-shadow: 0 18px 40px rgba(2, 52, 79, .28); }
.hp-call-face { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.hp-call-bar { display: flex; align-items: center; gap: 7px; padding: 6px 9px; color: #fff; font-size: .74rem; font-weight: 600; }
.hp-call-dot { width: 8px; height: 8px; background: #3DD68C; }
.hp-booked { position: absolute; right: -14px; top: 28px; display: flex; align-items: stretch; background: #fff; box-shadow: 0 18px 40px rgba(2, 52, 79, .22); }
.hp-booked-day { display: grid; place-content: center; text-align: center; padding: 10px 14px; background: var(--crimson); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.15; }
.hp-booked-day abbr { text-decoration: none; }
.hp-booked-day strong { display: block; font-size: 1.15rem; }
.hp-booked-what { padding: 10px 16px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.hp-booked-what strong { display: block; color: var(--ink); font-size: .98rem; }

/* Subject + grade chooser: a white panel wherever it appears. */
.tutor-search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; background: var(--paper); color: var(--ink); padding: 16px; border: 1px solid var(--line); }
.tutor-search .field label { font-size: .86rem; color: var(--muted); }
.tutor-search .button { white-space: nowrap; }

/* The example week (How it works). One crimson cell: the lesson. */
.week { margin: 0; background: var(--paper); color: var(--ink); padding: 22px 22px 18px; border: 1px solid var(--line); }
.week table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 5px; }
.week caption { text-align: left; font-weight: 650; font-size: 1rem; padding: 0 5px 10px; }
.week thead th { font-size: .82rem; font-weight: 650; color: var(--muted); padding: 0 0 4px; }
.week thead abbr { text-decoration: none; }
.week thead td { width: 46px; }
.week tbody th { font-size: .8rem; font-weight: 400; color: var(--muted); text-align: right; padding-right: 6px; white-space: nowrap; }
.week .slot { height: 58px; background: var(--page); font-size: .8rem; text-align: center; vertical-align: middle; padding: 4px; }
.week .slot.open { background: var(--fog-light); color: var(--navy); font-weight: 650; box-shadow: inset 0 0 0 1px var(--fog); }
.week .slot.booked { background: var(--crimson); color: #fff; text-align: left; padding: 7px 8px; line-height: 1.25; }
.week .slot.booked strong { display: block; font-size: .9rem; }
.week .slot.booked span:not(.visually-hidden) { display: block; font-size: .7rem; }
.week figcaption { font-size: .86rem; color: var(--muted); padding: 10px 5px 0; }

/* ---- Home: the numbers band ---- */
.hp-numbers { background: var(--navy); color: #fff; }
.hp-numbers dl { margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.hp-numbers dl > div { padding: 30px 28px; border-left: 1px solid rgba(199, 217, 232, .25); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.hp-numbers dl > div:first-child { border-left: 0; padding-left: 0; }
.hp-numbers dd { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.05; color: #fff; }
.hp-numbers dt { margin-top: 8px; color: var(--fog); font-size: .95rem; }

/* ---- Home: which one sounds like your house ---- */
.hp-where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hp-where img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 20px; }
.hp-where h3 { font-size: 1.3rem; }
.hp-where p { color: var(--muted); margin: 0; }
.hp-after { margin: 28px 0 0; }
.hp-rate { font-size: 1.2rem; line-height: 1.5; color: var(--ink) !important; font-weight: 500; }

/* ---- Home: certified teachers (the one dark band) ---- */
.hp-teacher { background: var(--navy); color: #fff; padding: 64px 0; }
.hp-teacher-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.hp-teacher-photo { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }
.hp-teacher-copy { align-self: center; padding: 8px 0 8px 64px; }
.hp-teacher h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.08; margin-bottom: 22px; }
.hp-teacher p { color: var(--fog); font-size: 1.1rem; max-width: 46ch; }
.text-link.light { color: #fff; }
.text-link.light:hover { color: var(--fog); }

/* ---- Home: steps beside a photo ---- */
.hp-how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.hp-how .steps { grid-template-columns: 1fr; }
.hp-how .step { display: grid; grid-template-columns: 48px 1fr; border-left: 0; border-top: 1px solid var(--line); padding: 22px 24px; }
.hp-how .step:first-child { border-top: 0; }
.hp-how .step::before { margin: 0; font-size: 1.9rem; }
.hp-how-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 62% center; }

/* ---- Home: you stay in charge ---- */
.hp-parent { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.hp-parent-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hp-parent-copy h2 { margin-bottom: 20px; }

/* ---- What tutors teach: subjects down, grade levels across ---- */
.curriculum { width: 100%; background: var(--paper); border: 1px solid var(--line); }
.curriculum th, .curriculum td { padding: 18px 20px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); text-align: left; vertical-align: top; }
.curriculum tr > :first-child { border-left: 0; }
.curriculum tbody tr:last-child > * { border-bottom: 0; }
.curriculum thead th { background: var(--page); font-weight: 650; }
.curriculum thead th:first-child { color: var(--muted); font-size: .9rem; vertical-align: bottom; }
.curriculum-range { display: block; font-size: .86rem; font-weight: 400; color: var(--muted); }
.curriculum tbody th { width: 22%; font-size: 1.1rem; font-weight: 650; }
.curriculum tbody th a { display: inline-flex; align-items: center; gap: 10px; }
.curriculum td { color: var(--muted); font-size: .98rem; }
.curriculum a { color: var(--navy); text-decoration: none; }
.curriculum a:hover { text-decoration: underline; }

/* ---- Home: the strip for teachers ---- */
.hp-teachers { background: var(--warm); border-top: 1px solid var(--line); }
.hp-teachers .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 32px; padding-top: 22px; padding-bottom: 22px; }
.hp-teachers p { margin: 0; }

/* ---- How it works ---- */
.need-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.need-grid h3 { display: flex; gap: 10px; align-items: flex-start; }
.need-grid h3 .icon { color: var(--navy); margin-top: .12em; }
.need-grid p { color: var(--muted); margin: 0; font-size: .98rem; }

/* ---- Pricing ---- */
.price-example .muted { margin: 12px 0 0; }

/* ---- About ---- */
.two-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.door { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--crimson); padding: 28px; display: grid; gap: 14px; justify-items: start; align-content: start; }
.door h2 { font-size: 1.4rem; margin: 0; }
.door p { margin: 0; color: var(--muted); }

/* ---- Become a tutor ---- */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--line); }
.scope-col { padding: 28px 30px; }
.scope-col + .scope-col { border-left: 1px solid var(--line); }
.scope-col h3 { font-size: 1.3rem; padding-bottom: 14px; border-bottom: 3px solid var(--navy); margin-bottom: 0; }
.scope-col ul { list-style: none; margin: 0; padding: 0; }
.scope-col li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.scope-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.scope-col strong, .scope-col span { display: block; }
.scope-col span { color: var(--muted); font-size: .96rem; }

/* ---- Questions ---- */
.jump-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 24px 0 0; font-weight: 650; }
.faq-groups { max-width: 860px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 1.5rem; }

/* ---- Contact ---- */
.contact-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; }
.contact-card { background: var(--warm); border: 1px solid var(--line); border-top: 3px solid var(--crimson); padding: 26px; }
.contact-card h2 { font-size: 1.3rem; }
.contact-card .check-list { font-size: .96rem; }
.contact-card > :last-child { margin-bottom: 0; }

/* ---- Narrow screens ---- */
@media (max-width: 1000px) {
  .hp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hp-hero-visual { margin: 0 14px 0 28px; max-width: 620px; }
  .hp-teacher-grid, .hp-how, .hp-parent { grid-template-columns: 1fr; gap: 36px; }
  .hp-teacher-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .hp-teacher-copy { padding: 0; }
  .hp-how-photo { aspect-ratio: 16 / 10; }
  .week { max-width: 560px; }
  .hp-numbers dl { grid-template-columns: 1fr 1fr; }
  .hp-numbers dl > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hp-numbers dl > div:nth-child(-n+2) { border-bottom: 1px solid rgba(199, 217, 232, .25); }
  .need-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .hp-hero { padding: 32px 0 48px; }
  .hp-hero-visual { margin: 0 6px 0 16px; }
  .hp-call { left: -16px; bottom: 34px; width: 42%; border-width: 3px; }
  .hp-booked { right: -6px; top: 14px; }
  .hp-booked-what { padding: 8px 10px; font-size: .74rem; }
  .hp-booked-what strong { font-size: .86rem; }
  .hp-booked-day { padding: 8px 10px; }
  .tutor-search { grid-template-columns: 1fr; }
  .week { padding: 14px 10px 12px; }
  .week table { border-spacing: 3px; }
  .week thead td { width: 34px; }
  .week .slot { height: 50px; font-size: .72rem; padding: 2px; }
  .week .slot.booked { padding: 5px; }
  .week .slot.booked strong { font-size: .78rem; }
  .week .slot.booked span:not(.visually-hidden) { font-size: .62rem; }
  .hp-numbers dl > div { padding: 22px 0 22px 18px; }
  .hp-where { grid-template-columns: 1fr; gap: 36px; }
  .need-grid, .two-doors, .scope-grid { grid-template-columns: 1fr; }
  .scope-col + .scope-col { border-left: 0; border-top: 1px solid var(--line); }

  /* The curriculum table becomes one block per subject. */
  .curriculum, .curriculum tbody, .curriculum tr, .curriculum th, .curriculum td { display: block; }
  .curriculum thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .curriculum tbody tr { border-bottom: 1px solid var(--line); padding: 16px 0; }
  .curriculum tbody tr:last-child { border-bottom: 0; }
  .curriculum tbody th, .curriculum td { border: 0; padding: 4px 18px; width: auto; }
  .curriculum td::before { content: attr(data-label) ": "; font-weight: 650; color: var(--ink); }
}

/* ---- Inner page headers with a photo ---- */
.page-hero-split.photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.page-hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero-photo.small { max-width: 360px; justify-self: end; }
.page-hero-grid > .page-hero-photo.small { width: 360px; }
.glance-band { background: var(--paper); padding-bottom: 0; }
.glance.wide { display: grid; grid-template-columns: 220px 1fr; gap: 12px 40px; align-items: start; }
.glance.wide h2 { margin: 0; }
.glance.wide .glance-list, .glance.wide .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.glance.wide .glance-list > div:nth-child(2) { border-top: 0; padding-top: 0; }
.glance.wide .glance-note { grid-column: 2; margin-top: 4px; }
.band-photo { width: calc(100% + 52px); max-width: none; margin: -26px -26px 8px; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 1000px) {
  .page-hero-split.photo { grid-template-columns: 1fr; }
  .page-hero-photo { aspect-ratio: 16 / 9; }
  .glance.wide { grid-template-columns: 1fr; }
  .glance.wide .glance-note { grid-column: 1; }
}
@media (max-width: 760px) {
  .glance.wide .glance-list, .glance.wide .check-list { grid-template-columns: 1fr; }
  .glance.wide .glance-list > div:nth-child(2) { border-top: 1px solid var(--line); padding-top: 9px; }
  .page-hero-grid > .page-hero-photo.small { display: none; }
}