/* ── Custom Properties ── */
:root {
  /* Brand olive green (matched to studio wall/logo) */
  --pine-900: #162410;
  --pine-800: #1e3418;
  --pine-700: #2a4820;
  --pine-600: #3a6028;
  --pine-500: #4e7a2c;  /* primary */
  --pine-400: #629638;
  --pine-300: #82b050;
  --pine-200: #aece80;
  --pine-100: #d0e4a8;
  --pine-50:  #eef6d8;

  /* Brand yellow-gold (from Instagram accent) */
  --gold:       #ccb81a;
  --gold-light: #dece30;
  --gold-warm:  #e8d848;

  --bark:     #5c3d2e;
  --mist-200: #a8c8d8;

  --cream:     #faf7f2;
  --white:     #ffffff;
  --charcoal:  #1c1c1e;
  --text-mute: #6b7c6a;

  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.18);

  --nav-h:       68px;
  --section-pad: 96px;
  --container:   1120px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

/* ── Container ── */
.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--pine-500);
  color: var(--white);
}
.btn-primary:hover { background: var(--pine-600); transform: translateY(-1px); }

.btn-ghost {
  color: var(--white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
}
.btn-ghost:hover { background: rgba(255,255,255,0.22); }

.btn-accent {
  background: var(--gold);
  color: var(--charcoal);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-accent:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,185,26,0.4);
}

.btn-outline-light {
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); }

.btn-full { width: 100%; padding-top: 0.8rem; padding-bottom: 0.8rem; }

.btn-lg {
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2rem;
  gap: 1.5rem;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.nav.scrolled {
  background: rgba(26, 36, 16, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.nav-brand-icon {
  width: 22px;
  height: 28px;
  color: var(--gold-light);
}

.nav-brand-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
}

.nav-links a {
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger svg { width: 24px; height: 24px; }

/* ── HERO ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Reserves clearance for the fixed nav (--nav-h) so hero-content's
     vertical centering happens within the space below it, not the full
     viewport height -- otherwise, on a short viewport, the centered
     content block can land close enough to the top to visually collide
     with the nav (border-box means this shrinks the content area rather
     than growing .hero past 100svh). */
  padding-top: var(--nav-h);
  /* Mirrors the padding-top reasoning above, but for .hero-scroll-cue:
     that element is position:absolute; bottom:2.5rem, entirely outside
     .hero-content's own layout, so centering never accounted for it --
     whenever hero-content's natural height left its bottom (the Explore
     Classes button) within that same ~2.5rem+36px zone, the scroll cue
     rendered on top of it. This isn't viewport-size-specific (reported on
     both a Pixel 7 Pro and a MacBook Air): it happens any time the
     content block is tall enough relative to .hero, regardless of why.
     Reserving this space here keeps hero-content's centering clear of the
     cue's zone the same way padding-top keeps it clear of the nav's. */
  padding-bottom: 5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

/* Gradient overlay so nav text stays readable */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 35, 15, 0.35) 0%,
    transparent 30%,
    transparent 60%,
    rgba(20, 35, 15, 0.20) 100%
  );
  pointer-events: none;
}

/* Fog animation layers */
.fog {
  position: absolute;
  left: -50%;
  width: 200%;
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
}

.fog-1 {
  bottom: 28%;
  height: 90px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(210,228,215,0.28) 0%, transparent 100%);
  animation: fog-drift-1 18s ease-in-out infinite alternate;
}

.fog-2 {
  bottom: 37%;
  height: 70px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(210,228,215,0.18) 0%, transparent 100%);
  animation: fog-drift-2 25s ease-in-out infinite alternate;
}

.fog-3 {
  bottom: 46%;
  height: 55px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(210,228,215,0.12) 0%, transparent 100%);
  animation: fog-drift-3 34s ease-in-out infinite alternate;
}

@keyframes fog-drift-1 {
  from { transform: translateX(-8%); }
  to   { transform: translateX(8%);  }
}
@keyframes fog-drift-2 {
  from { transform: translateX(10%); }
  to   { transform: translateX(-10%); }
}
@keyframes fog-drift-3 {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%);  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* .hero-content is a flex item of .hero -- without this it won't shrink
     below its children's natural (unwrapped) content width, which on a
     phone forces it wider than the viewport. Since .hero has
     overflow:hidden (not scroll), the result is clipped title/tagline
     text on both edges instead of the text wrapping or scaling down. */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hero-pretitle {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.hero-logo {
  max-height: 420px;
  /* The uploaded logo is a wide wordmark image -- max-height alone doesn't
     stop it rendering wider than a phone screen, since width:auto lets it
     grow to whatever its aspect ratio needs at 420px tall. Capping to the
     actual available width (.hero-content already accounts for its own
     padding) is what .hero-content's own min-width:0 fix couldn't reach,
     since that only constrains the container, not this image's intrinsic
     size. */
  max-width: min(960px, 100%);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.45));
  margin-block: 0.5rem;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 2px 32px rgba(0,0,0,0.4);
  line-height: 1.05;
}

.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,255,255,0.82);
  font-style: italic;
  font-family: 'Playfair Display', serif;
  max-width: 480px;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.5);
  width: 36px;
  height: 36px;
  animation: bounce 2.4s ease infinite;
  transition: color 0.2s;
}
.hero-scroll-cue:hover { color: rgba(255,255,255,0.9); }
.hero-scroll-cue svg { width: 100%; height: 100%; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── SECTIONS ── */
.section {
  padding-block: var(--section-pad);
  background: var(--white);
}

.section-alt    { background: var(--cream); }
.section-forest { background: var(--pine-600); }
.section-dark   { background: var(--pine-900); }

.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pine-500);
  margin-bottom: 0.6rem;
}

.section-label--light { color: var(--pine-200); }

h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--pine-900);
  margin-bottom: 1.5rem;
}

.text-light { color: var(--white); }

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.section-split--reverse .section-text { order: 2; }
.section-split--reverse > *:first-child { order: 1; }

/* Styled on the container, not a descendant `p` selector -- same reasoning
   as .partnership-text above: rich text (About's body) may be legacy bare
   text with no <p> wrapper, which a `p`-only rule would silently miss. */
.section-text {
  color: var(--text-mute);
  font-size: 1.05rem;
  line-height: 1.75;
}

.section-text p { margin-bottom: 1rem; }

/* ── ABOUT DECO ── */
.section-deco {
  display: flex;
  justify-content: center;
  align-items: center;
}

.deco-tree {
  width: 160px;
  height: 240px;
  filter: drop-shadow(0 8px 24px rgba(60,96,40,0.2));
}

.about-photo-wrap {
  width: 280px;
  height: 340px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--pine-100);
  overflow: hidden;
  filter: drop-shadow(0 8px 24px rgba(60,96,40,0.2));
}

.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── TEACHER ── */
.teacher-credentials {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.teacher-credentials li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text-mute);
}

.teacher-credentials svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pine-500);
}

.teacher-portrait-wrap {
  display: flex;
  justify-content: center;
}

.teacher-portrait {
  width: 280px;
  height: 340px;
  background: var(--pine-50);
  border-radius: var(--radius-lg);
  border: 2px solid var(--pine-100);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.teacher-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-portrait-icon { width: 80px; height: 100px; }

.teacher-portrait-label {
  font-size: 0.8rem;
  color: var(--pine-400);
  font-style: italic;
}

.teacher-title-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pine-500);
  font-style: italic;
}

.staff-entry-name {
  font-size: 1.6rem;
  color: var(--pine-900);
  margin: 0.25rem 0 0.75rem;
}

.staff-divider + .staff-entry {
  margin-top: 3rem;
}

.staff-divider {
  height: 1px;
  background: var(--pine-100);
  margin: 3rem auto 0;
  max-width: 640px;
}

/* ── PARTNERSHIPS ── */
.partnership-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
  margin-top: 2rem;
}

/* Styled on the container itself, not a descendant `p` selector -- a
   partnership's description may be legacy bare text with no <p> wrapper
   (anything not yet re-saved through the Quill editor), and a
   `.partnership-text p` rule would silently never match that, losing color/
   sizing entirely. Real <p> tags (freshly-edited content) still inherit
   these via normal cascade. */
.partnership-text {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 540px;
}

.partnership-text p { margin-bottom: 1rem; }

/* Buttons deliberately live in their own row below the text, not relying on
   the rich text's own paragraph break to separate them -- robust regardless
   of whether the description ends up wrapped in a <p> or not. */
.partnership-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.partnership-badge { opacity: 0.9; flex-shrink: 0; }
.partnership-badge svg { width: 120px; height: 120px; }

.partnership-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 3rem auto;
  max-width: 640px;
}

/* ── CLASSES ── */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.class-card {
  background: var(--white);
  border: 1.5px solid #dde8d5;
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.class-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--pine-300);
}

.class-icon {
  width: 44px;
  height: 44px;
  background: var(--pine-50);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pine-500);
  margin-bottom: 0.25rem;
}

.class-icon svg { width: 24px; height: 24px; }

.class-card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.25rem;
}

.class-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine-400);
}

.class-card h3 { font-size: 1.2rem; color: var(--pine-900); }
.class-card p  { font-size: 0.93rem; color: var(--text-mute); line-height: 1.6; }

/* ── CONTACT ── */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
  margin-top: 2rem;
}

/* Color lives on the wrapper (not just the child `p`) so it also applies
   when contact_subtext has no CMS content yet and the template falls back
   to plain text with no `<p>` wrapper -- otherwise that fallback text
   inherits the body's dark text color, which is nearly invisible against
   this section's dark-green background. */
.contact-info {
  color: rgba(255,255,255,0.72);
}

.contact-info p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-details li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
}

.contact-details svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pine-300);
}

/* ── FORMS ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form .form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.3); }

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--pine-300);
  background: rgba(255,255,255,0.10);
}

.contact-form textarea { resize: vertical; min-height: 110px; }

.form-feedback { font-size: 0.9rem; margin-top: 0.5rem; min-height: 1.2em; }
.form-feedback--success { color: #7ec89a; }
.form-feedback--error   { color: #f97878; }

/* ── Site toast notification ── */
.site-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1.5rem);
  background: #1a3d24;
  color: #fff;
  padding: 0.9rem 1.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.site-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── FOOTER ── */
.footer {
  background: var(--pine-900);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-block: 2rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.7);
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
}

.footer-brand svg { width: 18px; height: 22px; color: var(--gold-light); }
.footer-brand img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }

.footer-copy {
  color: rgba(255,255,255,0.3);
  font-size: 0.8rem;
}

/* ── AUTH MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 26, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 0.2s ease;
}

.modal-overlay[hidden] { display: none; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.25rem;
  width: min(420px, 100%);
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: slide-up 0.25s ease;
}

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--charcoal); background: var(--cream); }
.modal-close svg { width: 18px; height: 18px; }

.modal-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.modal-brand svg { width: 28px; height: 36px; color: var(--pine-500); }
.modal-brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }

.modal-tabs {
  display: flex;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 1.75rem;
}

.modal-tab {
  flex: 1;
  padding: 0.55rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-mute);
  transition: all 0.2s;
}

.modal-tab.active {
  background: var(--white);
  color: var(--pine-700);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.modal-panel { display: block; }
.modal-panel.hidden { display: none; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.phone-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #d0dad2;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}

.phone-input-wrap:focus-within {
  border-color: var(--pine-400);
}

.phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--pine-50);
  color: var(--pine-600);
  font-size: 0.9rem;
  font-weight: 600;
  border-right: 1.5px solid #d0dad2;
  user-select: none;
  white-space: nowrap;
}

.phone-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
  outline: none !important;
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--charcoal);
  line-height: 1.4;
  cursor: pointer;
}

.form-checkbox-row input {
  margin-top: 0.15rem;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--pine-500);
}

.form-checkbox-row a {
  color: var(--pine-600);
  text-decoration: underline;
}

.auth-form .form-group label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--charcoal);
}

.auth-form .form-group label::after {
  content: ' *';
  color: #c0392b;
}

.auth-form input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #d0dad2;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.auth-form input:focus { border-color: var(--pine-400); }
.auth-form input::placeholder { color: #aab8a8; }

/* Passkey login (modal is on a light background -- .btn-ghost is styled
   for the dark hero sections, so this button gets its own light variant) */
.passkey-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; font-size: 0.8rem; color: #7a8a78; }
.passkey-divider::before, .passkey-divider::after { content: ''; flex: 1; height: 1px; background: #d0dad2; }
.btn-modal-ghost {
  color: var(--pine-500);
  background: transparent;
  border: 1.5px solid #d0dad2;
}
.btn-modal-ghost:hover { background: var(--pine-50); border-color: var(--pine-400); }
.passkey-status-message { font-size: 0.82rem; color: #7a8a78; margin-top: 0.5rem; min-height: 1.1rem; }
.passkey-status-message[data-status-enum="server-error"] { color: #c0392b; }

/* Form feedback */
.form-error {
  font-size: 0.82rem;
  color: #c0392b;
  background: #fdf0ee;
  border: 1px solid #f5c6c0;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  display: none;
}

.form-error.visible { display: block; }

.form-success {
  font-size: 0.85rem;
  color: var(--pine-700);
  background: var(--pine-50);
  border: 1px solid var(--pine-200);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  display: none;
  text-align: center;
  font-weight: 500;
}

.form-success.visible { display: block; }

.auth-switch {
  text-align: center;
  font-size: 0.83rem;
  color: var(--text-mute);
  margin-top: 0.25rem;
}

.link-btn {
  color: var(--pine-500);
  font-weight: 500;
  font-size: inherit;
  transition: color 0.15s;
}
.link-btn:hover { color: var(--pine-700); text-decoration: underline; }

/* reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden; }

/* ── Responsive ── */
@media (max-width: 900px) {
  :root { --section-pad: 64px; }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 36, 16, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.75rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  .nav-links.open a { padding: 0.7rem 0.9rem; }
  .nav-hamburger { display: inline-flex; }
  /* With .nav-links hidden, .nav's justify-content:space-between only has
     two remaining items (.nav-brand and .nav-auth+.nav-hamburger) to
     distribute space between -- without this, .nav-auth lands roughly
     centered between the brand and the hamburger instead of sitting next
     to it. margin-left:auto makes .nav-auth consume all the leftover
     space itself, pushing it (and the hamburger right after it) flush to
     the right edge as one group -- .nav's own `gap` still spaces the two
     apart normally. */
  .nav-auth { margin-left: auto; }

  .section-split,
  .section-split--reverse {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .section-split--reverse .section-text { order: 0; }
  .section-split--reverse > *:first-child { order: 0; }

  .partnership-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .partnership-badge { display: none; }

  .contact-split { grid-template-columns: 1fr; gap: 3rem; }
  .teacher-portrait { width: 100%; max-width: 320px; }
}

@media (max-width: 600px) {
  .nav { padding-inline: 1rem; }
  .nav-brand span { display: none; }
  .hero-title { font-size: 2.6rem; }
  .class-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 2rem 1.5rem; }
}

/* A phone in landscape has very little height to work with -- .hero's
   min-height:600px floor and .hero-logo's max-height:420px were sized for
   portrait/desktop and together force the hero far taller than the
   screen, so the logo dominates and overlaps the nav/buttons above it and
   the subtitle/button below. Drop the floor (100svh already handles
   normal cases) and shrink the logo drastically once there's this little
   vertical room, regardless of orientation label -- what matters is the
   available height, not whether the device reports itself as landscape. */
@media (max-height: 500px) {
  /* height:auto + min-height (not a fixed height) lets the section grow
     to fit its content when the content needs more room than the screen
     provides, instead of staying locked to exactly 100svh and either
     clipping (overflow:hidden) or letting the next section's opaque
     background render immediately after a too-short box and visually
     overlap whatever got clipped -- which is what was happening to the
     "Explore Classes" button. The trade-off is a touch of scroll to see
     the very bottom of the hero on the shortest devices, which is a much
     safer failure mode than overlap/clipping. */
  /* padding-block's bottom value would otherwise override the base
     .hero rule's padding-bottom:5rem (the scroll-cue clearance fix) down
     to 2rem here, reintroducing the exact Explore-Classes/scroll-cue
     overlap this is meant to prevent -- keep it at the same 5rem. */
  .hero { height: auto; min-height: 100svh; padding-block: calc(var(--nav-h) + 2.5rem) 5rem; }
  /* Less aggressive than before now that .hero can grow to fit content
     (height:auto above) instead of being locked to a fixed, short box --
     110px made the logo look jarringly tiny next to portrait's up-to-
     420px; there's no longer a hard ceiling forcing it that small. */
  .hero-logo { max-height: 180px; }
}