/* ============================================================
   SENTRY TUTORING, style.css
   Light, Apple-like system: white page, black buttons, one accent
   reserved for booking actions and links. The scroll films stay
   dark and full-bleed inside the light page.

   The iOS Safari handling (svh heights, safe areas, the film that
   stops short of the bottom edge on phones) came from the Refine
   Detailing site, where it was tested on real iPhones. The comments
   explain why each rule exists; keep them when editing.
   ============================================================ */

:root {
  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #000000;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --accent: #0a5bd6;
  --accent-hover: #0f66e8;
  --accent-soft: rgba(10, 91, 214, 0.18);
  --radius: 18px;
  --font-display: "Inter", "SF Pro Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Inter", "SF Pro Text", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-brand: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --nav-h: 58px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* this is the colour the browser paints its own chrome from */
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* deliberately no overflow-x here. Setting it on the body propagates to the
     viewport and changes how Safari treats the page; sites that render
     correctly on iOS set none, so neither does this one. Horizontal overflow
     is kept out by the layout instead, and checked at 320px up. */
}

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }

.skip-link {
  /* parked above the page rather than off to the side: a negative left
     offset is horizontal overflow, and the page can no longer rely on
     hidden overflow to swallow it */
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-150%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.h2 .dim { color: var(--muted); }

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 32px;
}

/* the accent is reserved for booking actions and inline links */
.textlink {
  color: var(--accent);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}
.textlink::after { content: " ›"; }
.textlink:hover { text-decoration: underline; }

/* ---------- layout ---------- */

.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.container--narrow { width: min(840px, calc(100% - 48px)); }

@supports (padding: env(safe-area-inset-left)) {
  .container,
  .container--narrow,
  .nav__inner {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.section { padding: clamp(84px, 12vh, 140px) 0; position: relative; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.35s var(--ease-out);
}

/* standard button: black */
.btn--dark,
.btn--ghost {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover,
.btn--ghost:hover { background: #000; transform: translateY(-1px); }

/* booking button: the one place the accent is spent */
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* quiet secondary: grey pill */
.btn--soft {
  background: #e8e8ed;
  color: var(--ink);
}
.btn--soft:hover { background: #dededf; transform: translateY(-1px); }

.btn--whatsapp {
  background: #22c55e;
  color: #052e12;
}
.btn--whatsapp:hover { transform: translateY(-1px); }

.btn--big { padding: 16px 32px; font-size: 16px; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}

.nav.is-solid { border-bottom-color: var(--line); }

.nav__inner {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.nav__mark { display: inline-flex; width: 24px; color: var(--ink); }
.nav__mark svg { width: 100%; height: auto; }

.nav__word,
.footer__word {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.3em;
}

.nav__links { display: flex; gap: 26px; }

.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--ink); }

.nav__cta { padding: 9px 20px; font-size: 14px; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  /* a phone has less room to give away above the fold */
  :root { --nav-h: 46px; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(251, 251, 253, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s var(--ease-out), opacity 0.3s, visibility 0s linear 0.3s;
  }
  .nav__links.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.3s var(--ease-out), opacity 0.3s, visibility 0s;
  }
  .nav__links a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__cta { display: none; }
  .nav__mark { width: 19px; }
  .nav__word { font-size: 14px; letter-spacing: 0.26em; }
  .nav__brand { gap: 9px; }
  /* the bar is 46px, the tap target stays a full 40 */
  .nav__burger {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    margin-right: -8px;
  }
  .nav__burger span { height: 1.5px; }
  /* solid, not frosted: the blur is what Safari struggled with over a film */
  .nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   SCROLL FILMS
   These sections stay dark and full-bleed: footage on black,
   white type, inside the light page. Colors here are fixed on
   purpose; they belong to the film, not the page theme.
   ============================================================ */

.scrub { position: relative; height: 340vh; background: #000; }
.scrub--short { height: 260vh; }

.scrub__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 10%, #16181c 0%, #050607 70%);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.scrub__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 32%),
    radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.scrub__stage {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 clamp(24px, 7vw, 96px);
  z-index: 3;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  color: #fff;
}

.scrub__stage .eyebrow { color: rgba(255, 255, 255, 0.65); }

.scrub__stage.is-live { pointer-events: auto; }

/* keep invisible stage CTAs out of the keyboard tab order */
.scrub__stage:not(.is-live) .scrub__ctas { visibility: hidden; }

.scrub__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 7.4vw, 86px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}

.scrub__title--xl { font-size: clamp(56px, 11vw, 150px); font-weight: 800; letter-spacing: -0.035em; }

.scrub__sub {
  font-size: clamp(16px, 2.2vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  margin: 18px 0 26px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.scrub__ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* the white text link that pairs with the accent pill on footage */
.scrub__ctas .textlink { color: #fff; }
.scrub__ctas .textlink:hover { text-decoration: underline; }

.scrub__hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  transition: opacity 0.4s ease;
}

.scrub__hint-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  /* the words do the nudging: a soft bob downward, not a bounce that draws the eye */
  animation: hintBob 2.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes hintBob {
  0%, 100% { transform: translateY(0); opacity: 0.62; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scrub__hint-label { animation: none; opacity: 0.8; }
}

.scrub__meter {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.scrub__meter-track {
  width: clamp(80px, 12vw, 150px);
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  overflow: hidden;
}

.scrub__meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 860px) {
  /* The film stops short of the bottom edge, so nothing sticky sits where the
     browser looks for a colour to tint its bar with. The section's own
     background, which is ordinary page content and is not sampled, carries on
     below it, and the vignette fades the film into it so the join does not
     read. This is what finally kept Safari's bottom bar stable on Refine;
     nothing that came after it made the bar better and several things made
     it worse, so leave it be. */
  .scrub__sticky { height: calc(100svh - 112px); }

  /* The portrait crop of each film is centred on its subject, a sheet of
     paper, so a caption in the middle of the screen sits on the paper and
     white type on white paper reads as nothing. On phones the captions live
     in the bottom third instead, and the vignette below is deepened so the
     footage under them is always dark. The desktop frame is wide enough for
     the type to sit beside the paper, so it keeps the centred layout. */
  .scrub__stage {
    top: auto;
    bottom: clamp(64px, 11%, 120px);
  }

  .scrub__vignette {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 18%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 52%),
      radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
  }

  /* the white film has no vignette element, so its bottom edge is faded into
     the background continuing below it by a pseudo-element */
  .scrub--light .scrub__sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* tall enough to sit behind the low captions as well as fade the edge */
    height: 42%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(0deg, var(--bg) 0%, rgba(251, 251, 253, 0.92) 55%, rgba(251, 251, 253, 0) 100%);
  }
}

@media (max-width: 640px) {
  .scrub { height: 300vh; }
  .scrub--short { height: 240vh; }
  .scrub__meter { display: none; }
}

/* the white film: same scrub engine, light styling, dark type */
.scrub--light { background: var(--bg); height: 260vh; }
.scrub--light .scrub__canvas { background: var(--bg); }
.scrub--light .scrub__title { color: var(--ink); text-shadow: none; }
.scrub--light .scrub__sub { color: var(--muted); text-shadow: none; }
.scrub--light .scrub__stage { color: var(--ink); }
.scrub--light .scrub__stage .eyebrow { color: var(--muted); }

@media (max-width: 640px) {
  .scrub--light { height: 230vh; }
}

/* scroll parallax on media (driven from main.js) */
[data-parallax] img { transition: none; will-change: transform; }

/* ---------- intro ---------- */

.intro { background: var(--bg); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chips li {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}

/* ---------- subjects ---------- */

.subjects { background: var(--bg-2); }

.subjects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 960px) { .subjects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .subjects__grid { grid-template-columns: 1fr; } }

.subject {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.subject:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

.subject__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.subject__levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

.subject__levels span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: #e8e8ed;
  padding: 4px 10px;
  border-radius: 999px;
}

.subject__blurb { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; flex: 1; }

.subject__more {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.subject__more::after { content: " ›"; }
.subject__more:hover { text-decoration: underline; }

/* ---------- the tutors ---------- */

.tutors { background: var(--bg); }

.tutors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 34px 0 28px;
}
@media (max-width: 960px) { .tutors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tutors__grid { grid-template-columns: 1fr; } }

.tutorcard {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.tutorcard__photo { position: relative; aspect-ratio: 4 / 3; background: #e8e8ed; }
.tutorcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tutorcard__photo.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 40%, #d6d6db 0%, #e8e8ed 100%);
}
.tutorcard__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 18px 22px 2px; }
.tutorcard__edu { color: var(--text); font-size: 14px; margin: 0 22px 4px; }
.tutorcard__subjects { color: var(--muted); font-size: 13.5px; margin: 0 22px 4px; }
.tutorcard__detail { color: var(--muted); font-size: 13px; margin: 0 22px 20px; }

/* the accent-ticked chips: the checks every tutor has passed */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: #e8e8ed;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.checks li::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-1px) rotate(-45deg);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.stat__value { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.stat__label { color: var(--muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* safeguarding promises: a plain ticked list on a card */
.promise {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  max-width: 720px;
}
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.promise li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text); }
.promise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- how it works ---------- */

.steps { background: var(--bg); }

.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 860px) { .steps__grid { grid-template-columns: 1fr; } }

.step {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 26px 24px;
}
.step__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; color: var(--muted); }
.step h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 8px; }
.step p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* ---------- packages ---------- */

.packages { background: var(--bg-2); }

.packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1080px) { .packages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .packages__grid { grid-template-columns: 1fr; } }

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.pack:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

/* the featured package is the black card */
.pack--featured {
  background: var(--ink);
  color: #fff;
}
.pack--featured .pack__blurb,
.pack--featured .pack__duration,
.pack--featured .pack__price .from { color: rgba(255, 255, 255, 0.6); }
.pack--featured .pack__features li { color: rgba(255, 255, 255, 0.88); }
.pack--featured .pack__duration::before { border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 3px -1px 0 -1px rgba(255, 255, 255, 0.6); }
.pack--featured .pack__features li::before { border-color: #fff; }
.pack--featured .pack__addon { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.3); }

.pack__badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack--featured .pack__badge { background: var(--accent); }

.pack__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}

.pack__blurb { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; min-height: 42px; }

.pack__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

.pack__price .from { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }

.pack__price .amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.pack__duration {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pack__duration::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  box-shadow: inset 3px -1px 0 -1px var(--muted);
}

.pack__subjects { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.pack__subjects span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: #e8e8ed;
  padding: 4px 10px;
  border-radius: 999px;
}
.pack--featured .pack__subjects span { background: rgba(255, 255, 255, 0.14); color: #fff; }

.pack__features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 9px;
  flex: 1;
}

.pack__features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text);
}

.pack__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.pack__addon {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 18px;
}

.pack .btn { width: 100%; }

.pack__more {
  margin-top: auto;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.pack__more::after { content: " ›"; }
.pack__more:hover { text-decoration: underline; }

.pack--compact { padding-bottom: 22px; }
.pack--compact .pack__blurb { min-height: 0; }
.pack--compact .pack__duration { margin-bottom: 12px; }
.pack--compact.pack--featured .pack__more { color: #fff; }

.voc {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 640px;
}

/* ---------- monthly plans ---------- */

.membership { background: var(--bg-2); }

.membership__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 860px) { .membership__grid { grid-template-columns: 1fr; } }

.club {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 0;
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.club:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

.club__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.club__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.club__save {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: #e8e8ed;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.club__price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }

.club__price .amount { font-family: var(--font-display); font-size: 46px; font-weight: 700; letter-spacing: -0.03em; }

.club__price .per { color: var(--muted); font-size: 14px; }

.club__visits { color: var(--text); font-weight: 600; margin: 0 0 6px; }

.club__worth { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.club__worth s { opacity: 0.85; }

.club__perks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }

.club__perks li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text); }

.club__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.club .btn { align-self: flex-start; }

.club--single { max-width: 560px; margin-top: 34px; }

/* ---------- results ---------- */

.results { background: var(--bg); }

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 960px) { .results__grid { grid-template-columns: 1fr; } }

.result {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 26px 24px 22px;
}

.result__jump {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.result__from { font-size: 30px; color: var(--muted); }
.result__to { font-size: 46px; color: var(--ink); }

.result__arrow {
  width: 26px;
  height: 2px;
  background: var(--muted);
  position: relative;
  flex: none;
}
.result__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}

.result__subject {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.result blockquote { margin: 0 0 14px; color: var(--text); font-size: 15.5px; flex: 1; }
.result blockquote::before { content: "“"; }
.result blockquote::after { content: "”"; }
.result figcaption { color: var(--muted); font-size: 13.5px; }

/* ---------- before/after ---------- */

.ba { margin: 0; }
.ba--wide { max-width: 920px; }

.ba__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0d10;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  --split: 50%;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__img--after { clip-path: inset(0 0 0 var(--split)); }

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transform: translateX(-1px);
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ba__handle::before,
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #1d1d1f;
  border-left: 2px solid #1d1d1f;
}

.ba__handle::before { left: 9px; transform: translateY(-50%) rotate(-45deg); }
.ba__handle::after { right: 9px; transform: translateY(-50%) rotate(135deg); }

.ba__tag {
  position: absolute;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }

.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  touch-action: pan-y;
}

.ba__frame:has(.ba__range:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ba figcaption { padding: 12px 6px 0; color: var(--muted); font-size: 13.5px; }

/* ---------- process ---------- */

.process { background: var(--bg-2); }

.process__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.process__step {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.process__step:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.process__step:nth-child(even) .process__media { order: 2; }

.process__media { height: 100%; min-height: 240px; position: relative; background: #e8e8ed; }

.process__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.process__step:hover .process__media img { transform: scale(1.045); }

.process__body { padding: clamp(22px, 3vw, 40px); }

.process__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.process__body h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 10px 0 10px;
}

.process__body p { color: var(--muted); margin: 0; max-width: 440px; }

@media (max-width: 760px) {
  .process__step,
  .process__step:nth-child(even) { grid-template-columns: 1fr; }
  .process__step:nth-child(even) .process__media { order: 0; }
  .process__media { min-height: 200px; }
}

/* ---------- FAQ ---------- */

.faq { background: var(--bg-2); }

.faq__list { display: grid; gap: 12px; margin-top: 34px; }

.faq__item {
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
  padding: 0 22px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  position: relative;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}

.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.faq__item p { margin: 0 0 20px; color: var(--muted); }

/* ---------- booking ---------- */

.book { background: var(--bg); }

.book__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

@media (max-width: 920px) { .book__grid { grid-template-columns: 1fr; } }

.book__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.book__phone {
  color: var(--accent);
  text-decoration: none;
  font-size: 15px;
}
.book__phone:hover { text-decoration: underline; }

.book__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
  padding: clamp(22px, 3vw, 34px);
}

@media (max-width: 560px) { .book__form { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.field .opt { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.field input.is-invalid { border-color: #d92d20; }

.book__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.book__small { color: var(--muted); font-size: 13px; margin: 0; }

.book__error { color: #d92d20; font-size: 13.5px; margin: 0; }
.book__error:empty { display: none; }

/* ---------- footer ---------- */

.footer { background: var(--bg-2); border-top: 1px solid var(--line); }

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 34px;
  padding: 48px 0 26px;
  justify-content: space-between;
}

.footer__brand { display: flex; gap: 14px; align-items: center; color: var(--ink); }

.footer__mark { display: inline-flex; width: 28px; color: var(--ink); }
.footer__mark svg { width: 100%; height: auto; }

.footer__area { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }

.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

.footer__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.footer__links a:hover { color: var(--ink); }

.footer__contact { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.footer__contact a { color: var(--muted); text-decoration: none; }
.footer__contact a:hover { color: var(--ink); }

.footer__social { display: inline-flex; align-items: center; gap: 9px; }

.footer__glyph {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ink);
  transition: color 0.2s ease;
}
.footer__glyph svg { width: 100%; height: 100%; display: block; }
.footer__social:hover .footer__glyph { color: var(--accent); }

/* the home indicator on an iPhone sits inside the page when it runs edge to
   edge, so the last line of the footer keeps clear of it */
.footer__legal { padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer__legal p { color: #86868b; font-size: 12.5px; margin: 0; }

/* ---------- multipage components ---------- */

.page-hero {
  padding: calc(var(--nav-h) + clamp(64px, 12vh, 120px)) 0 clamp(36px, 6vh, 64px);
  background: var(--bg);
  text-align: center;
}

.page-hero .lead { margin-left: auto; margin-right: auto; }
.page-hero--tight { padding-bottom: clamp(20px, 4vh, 40px); }

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.section__actions { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

.clubchips { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

.clubchip {
  display: grid;
  gap: 2px;
  min-width: 230px;
  padding: 18px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.clubchip:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); }
.clubchip__name { font-family: var(--font-display); font-weight: 700; }
.clubchip__price { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.clubchip__price i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--muted); }
.clubchip__visits { color: var(--muted); font-size: 13px; }

/* ---------- where we teach ---------- */

.areas { background: var(--bg); }

.areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.areas__list li {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.areas__note { color: var(--muted); font-size: 14.5px; margin: 0; }

.areas__list--sm { gap: 8px; margin-bottom: 14px; }
.areas__list--sm li { padding: 7px 14px; font-size: 13px; }

.book__areas { margin-top: 40px; }
.book__areas-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* the closing band goes black, like the films */
.ctaband {
  text-align: center;
  border: 0;
  border-radius: calc(var(--radius) + 10px);
  padding: clamp(48px, 8vw, 84px) clamp(22px, 5vw, 60px);
  background: var(--ink);
  color: #fff;
}
.ctaband .h2 { color: #fff; }
.ctaband .lead { color: rgba(255, 255, 255, 0.65); margin-left: auto; margin-right: auto; }
.ctaband__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ctaband .textlink { color: #fff; }

.perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 860px) { .perks__grid { grid-template-columns: 1fr; } }

.perk {
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 26px 24px;
}
.perk__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; color: var(--muted); }
.perk h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 8px; }
.perk p { color: var(--muted); margin: 0; font-size: 14.5px; }

.book--page { padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 90px)); }

/* ---------- reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .scrub { height: auto !important; }
  .scrub__sticky { position: relative; height: 100svh; }
  .scrub__stage { position: relative; opacity: 1 !important; transform: none !important; padding-block: 20px; }
  .scrub__hint, .scrub__meter { display: none; }
}

/* ---------- what a lesson needs ---------- */

.access {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  max-width: 640px;
}

.access__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.access__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }

.access__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text);
}

.access__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.access__note { color: var(--muted); font-size: 13.5px; margin: 0; }

/* checkbox in the booking form */

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.check input:checked { background: var(--accent); border-color: var(--accent); }

.check input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }