/* ==========================================================================
   Still Waters Christian Fellowship Academy
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'crave-fine';
  src: url('../assets/fonts/crave-fine-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'crave-fine';
  src: url('../assets/fonts/crave-fine-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'crave-fine';
  src: url('../assets/fonts/crave-fine-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'crave-fine';
  src: url('../assets/fonts/crave-fine-700-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'brandon-grot-w01-light';
  src: url('../assets/fonts/brandon-grot-w01-light-400-normal.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green-dark:  #2e3e2f;  /* header, cards, body text */
  --green-mid:   #3d5a45;  /* hero, buttons, accents  */
  --sage:        #a3baa5;  /* footer, page banners    */
  --cream:       #f3f1e6;  /* light sections, light text */
  --off-white:   #fdfcfa;
  --white:       #ffffff;
  --blue-pale:   #d1e3f1;  /* philosophy sections */
  --blush:       #e9d2c3;  /* CTA overlay */

  --serif: 'crave-fine', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'brandon-grot-w01-light', 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;

  --container: 1426px;
  --gutter: 45px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17.8px;
  line-height: 1.5;
  color: var(--green-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 1204px; margin: 0 auto; padding: 0; }

.section { position: relative; }
.section__inner { position: relative; z-index: 1; }

/* ---------- Type ---------- */
.serif { font-family: var(--serif); }

.display {                       /* hero wordmark */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5.6vw, 66.8px);
  line-height: 1.1;
  text-align: center;
}
.h-xl {                          /* page titles */
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 62.3px);
  line-height: 1.1;
}
.h-lg {                          /* section titles */
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 49px);
  line-height: 1.1;
}
.h-md {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 40px);
  line-height: 1.2;
}
.h-sm {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 35.6px);
  line-height: 1.1;
}
.eyebrow {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.lead {
  font-size: 20px;
  line-height: 1.5;
}
.body-text { font-size: 17.8px; line-height: 26.7px; }
.body-text + .body-text { margin-top: 1em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  font-size: 17.8px;
  line-height: 1.5;
  text-decoration: none;
  padding: 17.8px 35.6px;
  border: 0.8px solid var(--green-dark);
  background: var(--green-mid);
  color: var(--cream);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--green-dark); color: var(--cream); }

.btn--light {
  background: var(--cream);
  color: var(--green-mid);
  border-color: var(--green-mid);
}
.btn--light:hover, .btn--light:focus-visible { background: var(--white); color: var(--green-dark); }

.btn--wide { width: 100%; max-width: 553px; }

/* Inline text links (underline on hover, like the source site) */
.link-inline {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.link-inline:hover { border-bottom-color: transparent; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sage);
  min-height: 224px;
  display: flex;
  align-items: center;
}
.site-footer p {
  font-size: 15.6px;
  line-height: 1.5;
  text-align: center;
  color: var(--green-dark);
  width: 100%;
}

/* ---------- Home: hero ---------- */
.hero {
  min-height: 661px;
  background: var(--green-mid);
  display: flex;
  align-items: flex-start;
  padding: 89px 0;
  position: relative;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .display { color: var(--green-mid); }

/* ---------- Home: about ---------- */
.about {
  background: var(--cream);
  padding: 50px 0 91px;
}
.about__grid {
  display: grid;
  grid-template-columns: 39.4% 40.8%;
  column-gap: 15.6%;
  row-gap: 60px;
  align-items: start;
}
.about__copy { padding-top: 61px; }
.about__copy .h-xl { margin-bottom: 20px; }
.about__copy p { font-weight: 700; }
.about__media img {
  width: 100%;
  height: 537px;
  object-fit: cover;
}

/* ---------- Home: mission ---------- */
.mission {
  background: var(--green-dark);
  color: var(--cream);
  padding: 54px 0;
  min-height: 335px;
  display: flex;
  align-items: center;
  text-align: center;
}
.mission .h-lg { margin-bottom: 24px; }
.mission__body {
  font-size: 20px;
  line-height: 1.125;
  font-weight: 400;
  max-width: 880px;
  margin: 0 auto;
}

/* ---------- Home: philosophy ---------- */
.philosophy {
  background: var(--blue-pale);
  padding: 65px 0 44px;
  text-align: center;
}
.philosophy .h-lg { margin-bottom: 30px; }
.philosophy__intro {
  max-width: 890px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}
.philosophy__intro p + p { margin-top: 1em; }

.pillars {
  background: var(--blue-pale);
  padding: 27px 0;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pillar {
  background: var(--green-dark);
  color: var(--cream);
  padding: 40px 62px 39px;
}
.pillar h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26.7px;
  line-height: 1.3;
  margin-bottom: 14px;
}
.pillar p { font-size: 17.8px; line-height: 26.7px; }
.pillar p + p { margin-top: 1em; }
.pillar h3 + p { margin-top: 0; }
.pillar__sub { margin-top: 16px !important; }
.pillar ul {
  list-style: none;
  margin: 14px 0 0;
  padding-left: 30px;
}
.pillar ul li { font-size: 17.8px; line-height: 26.7px; }

.cta-band {
  background: var(--blue-pale);
  padding: 20px 0 69px;
  text-align: center;
}

/* ---------- Home: note from Kim ---------- */
.kim-note {
  background: var(--green-dark);
  color: var(--cream);
  padding: 44px 0 68px;
}
.kim-note .h-lg { margin-bottom: 10px; }
.kim-note__sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22.3px;
  line-height: 1.4;
  margin-bottom: 24px;
}
.kim-note__body {
  max-width: 1047px;
  font-size: 20px;
  line-height: 22.5px;
  letter-spacing: 1px;
}
.kim-note__body p + p { margin-top: 1.4em; }
.kim-note .btn { margin-top: 4px; }

/* ---------- Home: the details ---------- */
.details {
  background: var(--white);
  padding: 89px 0;
}
.details__grid {
  display: grid;
  grid-template-columns: 29% 67.7%;
  column-gap: 3.3%;
  row-gap: 40px;
  align-items: start;
}
.details__item + .details__item { margin-top: 76px; }
.details__item h5 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26.7px;
  line-height: 1.3;
  margin-bottom: 17px;
}
.details__item p { font-size: 17.8px; line-height: 26.7px; }

/* ---------- Home: join CTA ---------- */
.join {
  position: relative;
  min-height: 737px;
  display: flex;
  align-items: flex-start;
  padding: 95px 0;
  overflow: hidden;
  background: var(--blush);
}
.join__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Not `.join__bg + .join__veil`: the responsive-image build wraps .join__bg
   in a <picture>, so .join__veil is a sibling of the wrapper, not of the
   img — an adjacent-sibling selector on .join__bg never matches. */
.join__veil {
  position: absolute;
  inset: 0;
  background: rgba(233, 210, 195, 0.73);
}
.join .h-lg { margin-bottom: 32px; }

/* ---------- Home: scripture ---------- */
.scripture {
  background: var(--green-mid);
  color: var(--sage);
  min-height: 380px;
  display: flex;
  align-items: center;
  padding: 86px 0 76px;
  text-align: center;
}
.scripture blockquote {
  margin: 0 auto;
  max-width: 997px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 35.6px);
  line-height: 1.1;
}
.scripture cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
}

/* ---------- Page banners ---------- */
.page-banner {
  background: var(--sage);
  min-height: 202px;
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.page-banner .h-xl { color: var(--green-dark); }

.page-banner--dark {
  background: var(--cream);
  min-height: 0;
  padding: 49px 0 0;
}
.page-banner--dark .page-banner__panel {
  background: var(--green-mid);
  min-height: 314px;
  display: flex;
  align-items: center;
  padding: 60px 40px;
}
.page-banner--dark .h-xl { color: var(--sage); }

.divider-band { background: var(--sage); height: 45px; }

/* ==========================================================================
   Classes & Calendar
   ========================================================================== */
.calendar {
  background: var(--sage);
  padding: 89px 0 93px;
}
.calendar .h-lg { margin-bottom: 76px; }
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  margin-bottom: 84px;
}
.calendar__card {
  background: var(--green-mid);
  color: var(--off-white);
  min-height: 251px;
  padding: 40px;
}
.calendar__card h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 35.6px);
  line-height: 1.1;
  margin-bottom: 22px;
}
.calendar__card p { font-size: 17.8px; line-height: 26.7px; }
.calendar__downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 100px;
  max-width: 1210px;
  margin: 0 auto;
}

.classes-intro {
  background: var(--green-dark);
  color: var(--off-white);
  padding: 64px 0 111px;
}
.classes-intro .h-lg { color: var(--cream); margin-bottom: 7px; }
.classes-intro__notes p { font-size: 17.8px; line-height: 26.7px; max-width: 973px; }
.classes-intro__notes p + p { margin-top: 0; }
.classes-intro h2.h-jump {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26.7px;
  line-height: 1.1;
  color: var(--cream);
  margin: 21px 0 14px;
}
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 45px;
}
.jump-links .btn { min-width: 203px; }

/* Grade sections */
.grade {
  background: var(--cream);
  padding: 50px 0 65px;
}
.grade .h-lg { margin-bottom: 8px; }
.grade__note { font-size: 17.8px; line-height: 26.7px; margin-bottom: 26px; }

/* ---------- Accordion ---------- */
.accordion { background: var(--cream); }
.accordion__item { border-top: 0.8px solid var(--green-mid); }
.accordion__item:last-child { border-bottom: 0.8px solid var(--green-mid); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 16.7px 22.3px;
  font-family: var(--sans);
  font-size: 22.3px;
  line-height: 1.5;
  color: var(--green-dark);
  text-align: left;
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--green-mid); }

.accordion__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.accordion__icon::before {
  top: 50%; left: 5px; right: 5px; height: 2px;
  transform: translateY(-50%);
}
.accordion__icon::after {
  left: 50%; top: 5px; bottom: 5px; width: 2px;
  transform: translateX(-50%);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.accordion__panel { display: none; padding: 0 22.3px 34px 53px; }
.accordion__panel[data-open] { display: block; }

.class-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.class-row__meta p {
  font-size: 17.8px;
  line-height: 26.7px;
  font-weight: 700;
}
.class-row__actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.class-row__actions .btn { min-width: 269px; }
.class-row__actions .btn--single { min-width: 337px; }

/* ==========================================================================
   Enrollment
   ========================================================================== */
.enroll-steps { background: var(--white); padding: 112px 0 116px; }
.enroll-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 890fr);
  gap: 50px;
  align-items: start;
}
.enroll-steps__grid > .h-sm { max-width: 400px; }
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 30px;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17.8px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.step p { font-size: 17.8px; line-height: 26.7px; }

.resources { background: var(--white); padding: 32px 0 67px; }
.resources .h-md { margin-bottom: 8px; }
.resources__sub { font-size: 26.7px; line-height: 1.2; margin-bottom: 42px; }
.resources__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 100px;
  max-width: 1290px;
  margin: 0 auto;
}
.resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.resource__name {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
}
.resource .btn { min-width: 144px; padding: 17.8px 24px; }

.enroll-image img {
  width: 100%;
  height: 498px;
  object-fit: cover;
}

/* ==========================================================================
   Teachers
   ========================================================================== */
.teachers { background: var(--cream); padding: 56px 0 169px; }
.teachers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 8px;
  padding: 0 40px;
}
.teacher {
  background: var(--green-mid);
  color: var(--off-white);
  display: flex;
  flex-direction: column;
  min-height: 579px;
  padding: 22px 22px 0;
}
.teacher__name {
  font-family: var(--serif);
  font-size: 26.7px;
  line-height: 1.3;
}
.teacher__subjects {
  font-size: 17.8px;
  line-height: 26.7px;
  margin-top: 8px;
}
.teacher__photo {
  margin-top: auto;
  width: calc(100% + 44px);
  max-width: none;
  margin-left: -22px;
  height: 442px;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   Kim's Note
   ========================================================================== */
.letter { background: var(--cream); padding: 85px 0 61px; }
.letter__inner { max-width: 761px; }
.letter .h-lg { margin-bottom: 6px; }
.letter__lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 3px;
}
.letter__body p { font-size: 20px; line-height: 30px; }
.letter__body p + p { margin-top: 30px; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cream);
  color: var(--green-dark);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; }
.site-header :focus-visible,
.mission :focus-visible,
.pillar :focus-visible,
.kim-note :focus-visible { outline-color: var(--cream); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .about__grid { gap: 48px 60px; }
  .details__grid { grid-template-columns: 1fr; gap: 28px; }
  .enroll-steps__grid { grid-template-columns: 1fr; }
  .calendar__grid { gap: 28px; }
  .teachers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .accordion__panel { padding-left: 22.3px; }
}

@media (max-width: 860px) {

  .about__grid { grid-template-columns: 1fr; }
  .about__media img { height: 380px; }
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { padding: 32px; }
  .calendar__grid,
  .calendar__downloads,
  .steps,
  .resources__grid { grid-template-columns: 1fr; }
  .calendar__downloads { gap: 20px; }
  .btn--wide { max-width: none; }
  .class-row { flex-direction: column; align-items: stretch; }
  .class-row__actions .btn,
  .class-row__actions .btn--single { min-width: 0; flex: 1 1 200px; }
  .jump-links .btn { flex: 1 1 140px; min-width: 0; }
  .hero { min-height: 420px; padding: 56px 0; }
  .join { min-height: 480px; padding: 64px 0; }
  .enroll-image img { height: 320px; }
  .resource { flex-direction: column; align-items: stretch; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .teachers__grid { grid-template-columns: 1fr; }
  .teacher { min-height: 0; }
  .accordion__trigger { font-size: 19px; padding: 14px 12px; }
  .accordion__panel { padding: 0 12px 24px; }
  .page-banner--dark .page-banner__panel { padding: 40px 24px; min-height: 220px; }
  .eyebrow { letter-spacing: 3px; }
}

@media print {
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   Responsive images + mobile hardening
   ========================================================================== */

/* <picture> must not become the flex item / positioned box — hand layout
   back to the <img> inside it. */
.teacher picture,
.hero picture,
.join picture,
.about__media picture,
.enroll-image picture { display: contents; }

.teacher__photo,
.hero__bg,
.join__bg,
.about__media img,
.enroll-image img { background: rgba(163, 186, 165, .25); }

a, button { -webkit-tap-highlight-color: rgba(61, 90, 69, .15); }
.btn:active { transform: translateY(1px); }

@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 48px 0; }
  .join { min-height: 0; padding: 48px 0; }
  .page-banner { min-height: 0; padding: 40px 0; }
  .scripture { min-height: 0; padding: 48px 0; }
  .site-header { position: static; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .display { font-size: 1.9rem; }
  .h-xl { font-size: 1.95rem; }
  .h-lg { font-size: 1.7rem; }
  .eyebrow { font-size: 1.5rem; letter-spacing: 2px; }
  .btn { padding: 15px 20px; font-size: 16.5px; }
  .jump-links .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ==========================================================================
   v2 additions
   Everything above is inherited from the v1 recreation unchanged.
   ========================================================================== */

/* ---------- Hero with call to action ---------- */
.hero--cta {
  min-height: 720px;
  align-items: center;
  padding: 80px 0;
  text-align: center;
}
.hero__panel {
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px 40px 48px;
  background: rgba(243, 241, 230, 0.82);
}
.hero__panel .display { margin-bottom: 18px; }
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--green-dark);
  max-width: 720px;
  margin: 0 auto 30px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Home: "Who We Are" (compact, no image) ---------- */
.about--home { padding: 84px 0 76px; }
.about--home .about__intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.about--home .h-xl { margin-bottom: 18px; }
.about--home .body-text { text-align: left; }
.about--home .btn { margin-top: 24px; }

/* ---------- "Joining is simple" band ---------- */
.steps-band {
  background: var(--green-mid);
  color: var(--cream);
  padding: 56px 0 64px;
  text-align: center;
}
.steps-band .h-lg { margin-bottom: 10px; }
.steps-band__sub {
  font-size: 18px;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto 34px;
}
.steps-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 34px;
  text-align: left;
}
.step-card {
  background: var(--green-dark);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.step-card__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--green-mid);
  border: 0.8px solid var(--sage);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
}
.step-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 1.25;
}
.step-card p { font-size: 15.5px; line-height: 23px; }

/* ---------- Class filter toolbar ---------- */
.class-filter {
  background: var(--cream);
  padding: 56px 0 0;
}
.class-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 40px;
  padding-bottom: 22px;
  border-bottom: 0.8px solid var(--green-mid);
}
.field-label {
  display: block;
  font-family: var(--serif);
  font-size: 17.8px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--green-dark);
}
.class-filter__search { flex: 1 1 320px; min-width: 260px; }

.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 17.8px;
  line-height: 1.5;
  color: var(--green-dark);
  background: var(--white);
  border: 0.8px solid var(--green-mid);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #7d8a7e; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(61, 90, 69, 0.18);
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--green-mid) 50%),
    linear-gradient(135deg, var(--green-mid) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.4;
  padding: 11px 20px;
  background: transparent;
  color: var(--green-mid);
  border: 0.8px solid var(--green-mid);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.chip:hover { background: rgba(61, 90, 69, .1); }
.chip[aria-pressed="true"] { background: var(--green-mid); color: var(--cream); }

.filter-status {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--green-dark);
  padding: 18px 0 0;
}
.filter-empty {
  background: var(--cream);
  padding: 0 0 40px;
}
.filter-empty__inner {
  border: 0.8px dashed var(--green-mid);
  padding: 48px 30px;
  text-align: center;
}
.filter-empty__inner p { font-size: 20px; line-height: 1.5; margin-bottom: 20px; }

/* Teacher name surfaced in the collapsed accordion header */
.accordion__trigger { align-items: baseline; }
.accordion__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.accordion__teacher {
  font-size: 16.5px;
  color: var(--green-mid);
  opacity: .85;
}
.grade[hidden], .accordion__item[hidden] { display: none !important; }

/* ---------- Weekly schedule table ---------- */
.schedule {
  background: var(--cream);
  padding: 74px 0 80px;
}
.schedule .h-lg { margin-bottom: 10px; }
.schedule__intro {
  font-size: 17.8px;
  line-height: 26.7px;
  max-width: 900px;
  margin-bottom: 34px;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0.8px solid var(--green-mid);
  background: var(--white);
}
.schedule-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 15.6px;
  line-height: 1.45;
}
.schedule-table th,
.schedule-table td {
  border: 0.8px solid rgba(61, 90, 69, .35);
  padding: 14px 16px;
  vertical-align: top;
  text-align: left;
}
.schedule-table thead th {
  background: var(--green-dark);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;
}
.schedule-table tbody th[scope="row"] {
  background: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--green-dark);
  white-space: nowrap;
}
.schedule-table tbody tr:nth-child(even) td { background: rgba(243, 241, 230, .45); }
.schedule-table .row--break th,
.schedule-table .row--break td {
  background: var(--sage);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--green-dark);
  text-align: center;
}
.schedule-table .cell--span {
  background: rgba(163, 186, 165, .3);
}
.slot__name { display: block; font-weight: 700; }
.slot__teacher { display: block; color: var(--green-mid); }
.slot__sem {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.8px dotted rgba(61, 90, 69, .4);
}
.slot__tag {
  display: block;
  font-size: 13.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--green-mid);
}
.schedule__note {
  font-size: 16px;
  line-height: 25px;
  margin-top: 22px;
  max-width: 900px;
}
.schedule__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }

/* ---------- Forms ---------- */
.enroll-form-section {
  background: var(--cream);
  padding: 76px 0 84px;
}
.form-shell {
  background: var(--white);
  border: 0.8px solid var(--green-mid);
  padding: 48px 52px 52px;
  max-width: 980px;
  margin: 0 auto;
}
.form-shell > .h-md { margin-bottom: 10px; }
.form-shell__intro { font-size: 17.8px; line-height: 26.7px; margin-bottom: 40px; }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 42px;
}
.fieldset > legend {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26.7px;
  line-height: 1.2;
  color: var(--green-dark);
  padding: 0 0 6px;
  margin-bottom: 22px;
  border-bottom: 0.8px solid var(--sage);
  width: 100%;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 30px;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.req { color: #8c3b2a; }
.hint { font-size: 15.5px; line-height: 1.45; color: var(--green-mid); margin-top: 7px; }

.error-msg {
  display: none;
  font-size: 15.5px;
  line-height: 1.45;
  color: #8c3b2a;
  margin-top: 7px;
}
.field.is-invalid .error-msg { display: block; }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: #8c3b2a; }

/* Whole row is the tap target: padding keeps it >= 44px tall (WCAG 2.5.8). */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.choice input {
  margin-top: 2px;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--green-mid);
}
.choice-list { display: flex; flex-direction: column; gap: 2px; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
}

/* Student blocks */
.student-block {
  border: 0.8px solid var(--sage);
  background: rgba(243, 241, 230, .5);
  padding: 28px 30px 30px;
  margin-bottom: 20px;
}
.student-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.student-block__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22.3px;
  line-height: 1.2;
}
.btn-text {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--green-mid);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.btn-text:hover { color: var(--green-dark); }
.student-classes { margin-top: 22px; }
.student-classes__empty { font-size: 16.5px; color: var(--green-mid); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  padding-top: 8px;
}
.form-note { font-size: 15.5px; line-height: 1.5; color: var(--green-mid); flex: 1 1 260px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  border: 0.8px solid #8c3b2a;
  background: rgba(140, 59, 42, .07);
  color: #8c3b2a;
  padding: 16px 20px;
  font-size: 16.5px;
  line-height: 1.5;
  margin-bottom: 28px;
}
.form-success {
  border: 0.8px solid var(--green-mid);
  background: var(--white);
  padding: 56px 52px 60px;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.form-success .h-md { margin-bottom: 16px; }
.form-success p { font-size: 18px; line-height: 28px; max-width: 620px; margin: 0 auto 14px; }
.form-success__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 30px; }

/* ---------- Tuition ---------- */
.tuition { background: var(--white); padding: 80px 0; }
.tuition .h-lg { margin-bottom: 12px; }
.tuition__intro { font-size: 17.8px; line-height: 26.7px; max-width: 900px; margin-bottom: 34px; }
.tuition-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 17px;
}
.tuition-table th,
.tuition-table td {
  border: 0.8px solid rgba(61, 90, 69, .35);
  padding: 18px 20px;
  text-align: center;
}
.tuition-table thead th {
  background: var(--green-mid);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
}
.tuition-table tbody th[scope="row"] {
  background: rgba(163, 186, 165, .35);
  text-align: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--green-dark);
}
.tuition-table td { background: var(--white); font-weight: 700; }
.tuition__footnote { font-size: 16px; line-height: 25px; margin-top: 18px; font-style: italic; }
.role-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.role-card { background: var(--green-mid); color: var(--cream); padding: 34px 34px 36px; }
.role-card h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 18px;
}
.role-card p { font-size: 16.5px; line-height: 26px; }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); padding: 76px 0 86px; }
.faq .h-lg { margin-bottom: 30px; }
.faq .accordion { background: transparent; }
.faq .accordion__panel { padding: 0 22.3px 28px; }
.faq .accordion__panel p { font-size: 17.8px; line-height: 26.7px; max-width: 900px; }
.faq .accordion__panel p + p { margin-top: 1em; }

/* ---------- Paper fallback / resources ---------- */
.paper { background: var(--white); padding: 66px 0 74px; }
.paper .h-md { margin-bottom: 8px; }

/* ---------- 404 ---------- */
.notfound {
  background: var(--cream);
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 100px 0;
  text-align: center;
}
.notfound .h-xl { margin-bottom: 18px; }
.notfound p { font-size: 20px; line-height: 1.5; margin-bottom: 30px; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ==========================================================================
   v2 responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .steps-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .form-shell { padding: 40px 34px 44px; }
  .role-cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {

  .hero--cta { min-height: 0; padding: 56px 0; }
  .hero__panel { padding: 30px 22px 34px; }
  .hero__actions .btn { flex: 1 1 220px; }

  .steps-band__grid { grid-template-columns: 1fr; gap: 16px; }
  .field-grid, .choice-grid { grid-template-columns: 1fr; }
  .form-shell, .form-success { padding: 32px 22px 36px; }
  .student-block { padding: 22px 20px 24px; }
  .class-filter__bar { flex-direction: column; align-items: stretch; }
  .schedule__actions .btn { flex: 1 1 240px; }
}

@media (max-width: 620px) {
  .accordion__label { flex-direction: column; gap: 2px; }
  .hero__panel { background: rgba(243, 241, 230, 0.9); }
  .form-shell, .form-success { padding: 26px 16px 30px; }
  .student-block { padding: 18px 14px 20px; }
  .step-card { padding: 18px 18px 20px; }
}

/* ==========================================================================
   Responsive images
   <picture> wrappers must not become the flex item / positioned box —
   display:contents hands layout back to the <img> inside.
   ========================================================================== */
.teacher picture,
.hero picture,
.join picture,
.about__media picture,
.enroll-image picture { display: contents; }

/* Reserve space from the intrinsic width/height so nothing jumps as
   images decode (cumulative layout shift). */
.teacher__photo,
.hero__bg,
.join__bg,
.about__media img,
.enroll-image img { background: rgba(163, 186, 165, .25); }

/* ==========================================================================
   Mobile hardening
   ========================================================================== */

/* Stop iOS grey-flashing every tap; we supply our own :active states. */
a, button, .chip, label.choice {
  -webkit-tap-highlight-color: rgba(61, 90, 69, .15);
}
.btn:active { transform: translateY(1px); }

/* Inputs must stay >= 16px or iOS Safari zooms the page on focus. */
.input, .select, .textarea { font-size: max(16px, 17.8px); }

/* Landscape phones: reclaim vertical space from the tall hero sections. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero--cta { min-height: 0; padding: 40px 0; }
  .join { min-height: 0; padding: 48px 0; }
  .page-banner { min-height: 0; padding: 40px 0; }
  .scripture { min-height: 0; padding: 48px 0; }
  .site-header { position: static; }
}

/* Small phones (iPhone SE and below). */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .display { font-size: 1.9rem; }
  .h-xl { font-size: 1.95rem; }
  .h-lg { font-size: 1.7rem; }
  .eyebrow { font-size: 1.5rem; letter-spacing: 2px; }
  .btn { padding: 15px 20px; font-size: 16.5px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .jump-links .btn { flex: 1 1 100%; }
  .schedule__actions .btn,
  .form-success__actions .btn,
  .notfound__actions .btn { flex: 1 1 100%; }
}

/* Tell people the timetable scrolls sideways, since it is cut off on phones. */
.table-scroll { position: relative; }
.scroll-hint {
  display: none;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--green-mid);
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .scroll-hint { display: block; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}


/* ==========================================================================
   v3: hamburger header, split classes/schedule, tuition up front
   ========================================================================== */

/* ---------- Slim header + hamburger (all breakpoints) ---------- */
.site-header {
  background: var(--green-dark);
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header__bar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream);
  padding: 6px 2px;
}
.wordmark__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--green-mid);
  border: 0.8px solid var(--sage);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--cream);
}
.wordmark__text {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .5px;
  white-space: nowrap;
}
.wordmark__text span { opacity: .72; }
.wordmark:hover .wordmark__mark { background: var(--sage); color: var(--green-dark); }

.hamburger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  background: none;
  border: 0.8px solid transparent;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .6px;
  cursor: pointer;
}
.hamburger:hover, .hamburger:focus-visible { border-color: var(--sage); }
.hamburger__box {
  position: relative;
  width: 22px;
  height: 16px;
  flex: 0 0 auto;
}
.hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.hamburger__bar:nth-child(1) { top: 0; }
.hamburger__bar:nth-child(2) { top: 7.2px; }
.hamburger__bar:nth-child(3) { top: 14.4px; }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }

/* ---------- Menu panel ---------- */
.site-menu {
  background: var(--green-dark);
  border-top: 0.8px solid rgba(163, 186, 165, .35);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu[hidden] { display: none; }
.site-menu__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding-top: 20px;
  padding-bottom: 24px;
}
.site-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 30px;
}
.site-menu nav a {
  display: inline-block;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .6px;
  color: var(--cream);
  text-decoration: none;
  padding: 11px 2px;
  border-bottom: 1px solid transparent;
}
.site-menu nav a:hover,
.site-menu nav a:focus-visible { border-bottom-color: var(--cream); }
.site-menu nav a[aria-current="page"] { border-bottom-color: var(--sage); opacity: .85; }

.menu-enroll {
  background: var(--cream);
  color: var(--green-mid);
  border-color: var(--cream);
  padding: 14px 28px;
  font-size: 17px;
}
.menu-enroll:hover, .menu-enroll:focus-visible {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(46, 62, 47, .45);
}
.menu-scrim[hidden] { display: none; }

/* ---------- Page banner subheads ---------- */
.page-banner__sub {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 14px;
  max-width: 720px;
  color: var(--green-dark);
}
.page-banner--dark .page-banner__sub { color: var(--cream); opacity: .9; }

/* ---------- Home: tuition snapshot ---------- */
.tuition-snapshot {
  background: var(--cream);
  padding: 76px 0 84px;
}
.tuition-snapshot .h-lg { margin-bottom: 14px; }
.tuition-snapshot__intro {
  font-size: 18px;
  line-height: 1.55;
  max-width: 820px;
  margin-bottom: 40px;
}
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.price-card {
  background: var(--white);
  border: 0.8px solid var(--green-mid);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
}
.price-card h3 {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 16px;
  min-height: 46px;
}
.price-card__figure {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--green-dark);
}
.price-card__figure span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .5px;
}
.price-card__note {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--green-mid);
}
.tuition-snapshot__foot {
  margin-top: 22px;
  font-size: 16px;
  font-style: italic;
  color: var(--green-mid);
}

.join__sub { font-size: 18px; line-height: 1.5; margin: -18px 0 26px; }
.about--page { padding-top: 64px; }
.about--page .about__copy { padding-top: 0; }
.about__copy .btn { margin-top: 28px; }

/* ---------- Footer nav ---------- */
.site-footer { flex-direction: column; padding: 44px 0; min-height: 0; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  margin-bottom: 22px;
}
.site-footer__nav a {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--green-dark);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
}
.site-footer__nav a:hover { border-bottom-color: var(--green-dark); }

/* ==========================================================================
   Classes page — cards
   ========================================================================== */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.class-card {
  background: var(--white);
  border: 0.8px solid var(--sage);
  border-left: 3px solid var(--green-mid);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
}
.class-card__head { margin-bottom: 18px; }
.class-card__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--green-dark);
}
.class-card__teacher {
  margin-top: 8px;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--green-mid);
}
.label {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-mid);
  opacity: .8;
  margin-right: 6px;
}

.class-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 0.8px solid rgba(163, 186, 165, .6);
  border-bottom: 0.8px solid rgba(163, 186, 165, .6);
}
.class-card__meta dt {
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-mid);
  opacity: .8;
  margin-bottom: 3px;
}
.class-card__meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--green-dark);
}
.class-card__time {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--green-mid);
}
.class-card__notes {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.class-card__notes li {
  font-size: 16.5px;
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.class-card__notes li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: 5px; height: 5px;
  background: var(--sage);
}
.class-card__docs {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  background: var(--cream);
  border: 0.8px solid var(--sage);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--green-dark);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.doc-link:hover, .doc-link:focus-visible {
  background: var(--white);
  border-color: var(--green-mid);
}
.doc-link__icon {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .8px;
  padding: 3px 6px;
  background: var(--green-mid);
  color: var(--cream);
}
.class-card__nodocs {
  margin-top: auto;
  font-size: 16px;
  color: var(--green-mid);
  opacity: .8;
  font-style: italic;
}
.grade[hidden], .class-card[hidden] { display: none !important; }

/* ==========================================================================
   Schedule page
   ========================================================================== */
.schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 26px;
}
.schedule__head .h-lg { margin-bottom: 10px; }
.schedule__head .schedule__intro { margin-bottom: 0; }
.schedule__filter { flex: 0 0 auto; min-width: 260px; }

/* Class name and teacher are different roles, so they read differently:
   the class is a serif heading, the teacher a smaller sans byline. */
.slot__name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--green-dark);
}
.slot__teacher {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--green-mid);
}
.slot__note, .slot__tag {
  display: block;
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--green-mid);
  opacity: .85;
}
.slot__note { margin-top: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; font-style: italic; }
.slot__alt {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 0.8px dotted rgba(61, 90, 69, .45);
}
.slot__alt .slot__name { font-size: 16px; font-weight: 400; }
.slot__flag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--blush);
  color: #7a3f22;
  vertical-align: middle;
}
.slot__period {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--green-dark);
}
.slot__time {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--green-mid);
  white-space: nowrap;
}
.schedule-table th[data-band][hidden],
.schedule-table td[data-band][hidden] { display: none; }
.schedule-table.is-filtered { min-width: 0; }

.calendar__card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 35.6px);
  line-height: 1.1;
  margin-bottom: 22px;
}

/* ==========================================================================
   v3 responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .price-cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .site-menu__inner { flex-direction: column; align-items: stretch; }
  .site-menu nav ul { flex-direction: column; gap: 0; }
  .site-menu nav a { font-size: 21px; padding: 13px 0; }
  .menu-enroll { width: 100%; }
  .wordmark__text span { display: none; }
  .schedule__head { flex-direction: column; align-items: stretch; }
  .schedule__filter { min-width: 0; }
  .class-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hamburger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wordmark__text { font-size: 18px; }
  .class-card { padding: 22px 20px 20px; }
  .price-card { padding: 24px 22px 26px; }
}

@media (max-width: 380px) {
  .wordmark__text { font-size: 16px; }
  .price-card__figure { font-size: 40px; }
}

/* The .label helper is tuned for the white class cards. On the green teacher
   cards that colour is the card background, so it must be re-stated — a
   green-on-green label is invisible. */
.teacher .label {
  color: var(--cream);
  opacity: .8;
}
.teacher__grades {
  font-size: 16px;
  line-height: 1.4;
  color: var(--off-white);
  margin-top: 6px;
}

/* ==========================================================================
   Home page compaction (round 2)
   ========================================================================== */

/* ---------- Scripture now sits over the landscape photo instead of its
   own green band below; the "Interested in joining?" CTA moved into its
   own compact solid band underneath. v1 keeps the original two-section
   layout, so these overrides are v2-only. ---------- */
.join {
  min-height: 0;
  padding: 84px 0;
  align-items: center;
  text-align: center;
}
.join__veil {
  /* 78% keeps the photo visible while still clearing WCAG AA against its
     single brightest pixel (a highlight in the sky) at every text size
     used below — verified against the actual asset, not assumed. */
  background: rgba(46, 62, 47, .78);
}
.join__verse {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--cream);
}
.join__verse cite {
  /* Solid cream, not a dimmed opacity — against the darkest surviving patch
     of sky in the photo, opacity below ~0.9 drops under 4.5:1. Letter
     spacing does the work of setting it apart from the verse instead. */
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cream);
}

.join-cta {
  background: var(--green-mid);
  color: var(--cream);
  padding: 52px 0 60px;
  text-align: center;
}
.join-cta .h-lg { margin-bottom: 10px; }
.join-cta__sub { font-size: 18px; line-height: 1.5; margin-bottom: 26px; }

/* ---------- Kim's-note readability fix ----------
   The home-page excerpt inherited a 22.5px line-height on 20px text
   (1.125 ratio) plus 1px letter-spacing from the original Wix measurement
   — legible enough for v1's faithful recreation, but noticeably tighter
   than every other body paragraph on the page. v2 favours readability. */
.kim-note__body {
  line-height: 30px;
  letter-spacing: normal;
}

@media (max-width: 860px) {
  .join { padding: 56px 0; }
  .join-cta { padding: 44px 0 50px; }
}

/* ---------- Full-day price cards ----------------------------------------
   The card leads with the all-day total and shows the undiscounted figure
   struck through above it. The strikethrough is decorative — a
   visually-hidden "Regular price" label carries the meaning for screen
   readers, since <s> alone is not announced by most of them. */
.price-card__was {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--green-mid);
  margin-bottom: 4px;
  min-height: 22px;
}
.price-card__was s { text-decoration-thickness: 1.5px; }

.price-card__save {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--green-dark);
}
.price-card .price-card__note {
  margin-top: 6px;
  font-size: 15px;
}
.price-card__figure span { white-space: nowrap; }

.tuition__subhead {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--green-dark);
  margin: 44px 0 8px;
}
.tuition .price-cards { margin-bottom: 8px; }

@media (max-width: 380px) {
  .price-card__was { font-size: 19px; }
}

/* ---------- Grouped menu -------------------------------------------------
   The menu is organised by what a visitor is trying to do rather than as one
   flat list, so "Tuition" reads as part of joining rather than as a stray
   item. Every entry is a whole page. */
.site-menu__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  flex: 1 1 auto;
}
.site-menu__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-menu__heading {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}
.site-menu__cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-menu__note {
  font-size: 14px;
  line-height: 1.4;
  color: var(--sage);
  max-width: 240px;
}

.cta-band__lead {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 22px;
  color: var(--green-dark);
}
.cta-band .schedule__actions { justify-content: center; }

@media (max-width: 860px) {
  .site-menu__nav { flex-direction: column; gap: 20px; }
  .site-menu__cta { align-items: stretch; width: 100%; }
  .site-menu__note { max-width: none; text-align: center; }
}

/* ---------- Fall calendar ------------------------------------------------
   Derived from the co-op's own stated dates (Aug 20 - Dec 3, Thursdays, less
   Fall Break and Thanksgiving), not transcribed from the PDF scan. */
.cal-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.cal-month__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--green-dark);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 0.8px solid var(--sage);
}
.cal-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-day {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--white);
  border-left: 3px solid var(--green-mid);
}
.cal-day__num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--green-dark);
  min-width: 22px;
}
.cal-day__why { font-size: 14.5px; color: var(--green-mid); }
.cal-day--off {
  background: rgba(163, 186, 165, .28);
  border-left-color: var(--sage);
}
/* The tinted break-day background lifts the floor, so these labels need the
   darker green to clear AA - --green-mid only reaches 3.69:1 here. */
.cal-day--off .cal-day__num { color: var(--green-dark); }
.cal-day--off .cal-day__why { font-style: italic; color: var(--green-dark); }


/* ==========================================================================
   v4: motion

   Principles for this site: everything is a settle, not an entrance. Short
   distances, generous easing, nothing that bounces, loops or draws attention
   to itself. Motion is opt-in via the .js-anim class that the inline script
   in <head> sets, so a browser without JavaScript renders the finished state
   with no hidden content.
   ========================================================================== */

:root {
  --dur-micro: 180ms;   /* hovers, presses */
  --dur-base:  320ms;   /* menus, panels  */
  --dur-slow:  560ms;   /* scroll reveals */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Scroll reveals

   IMPORTANT: this selector list is mirrored by REVEAL in v2/js/site.js.
   If you add a target here, add it there too. Content cannot be stranded:
   the hidden state applies only while .js-anim is set, and a timer armed in
   <head> adds .reveal-all if site.js never runs.

   The lists use :where(), not :is(). :is() adopts the specificity of its
   most specific argument -- `.about--page .about__copy` would make this rule
   (0,3,0) and it would beat `.js-anim .is-in` (0,2,0), so revealing would
   silently do nothing. :where() contributes zero specificity.
   -------------------------------------------------------------------------- */
.js-anim :where(
  .hero__panel,
  .about__intro,
  .about--page .about__copy,
  .about--page .about__media,
  .page-banner .h-xl,
  .page-banner__sub,
  .page-banner__panel,
  .tuition-snapshot .h-lg,
  .tuition-snapshot__intro,
  .tuition-snapshot__foot,
  .price-card,
  .steps-band .h-lg,
  .steps-band__sub,
  .step-card,
  .steps-band > .container > .btn,
  .mission .h-lg,
  .mission__body,
  .philosophy .h-lg,
  .philosophy__intro,
  .pillar,
  .details__item,
  .eyebrow,
  .kim-note .h-lg,
  .kim-note__sub,
  .kim-note__body,
  .kim-note .btn,
  .join__verse,
  .join-cta .h-lg,
  .join-cta__sub,
  .join-cta .btn,
  .scripture blockquote,
  .calendar .h-lg,
  .calendar__card,
  .schedule__head,
  .table-scroll,
  .schedule__note,
  .schedule__actions,
  .classes-intro__notes,
  .class-card,
  .teacher,
  .form-shell,
  .faq .h-lg,
  .faq .accordion,
  .tuition .h-lg,
  .tuition__intro,
  .tuition-table,
  .role-card,
  .resource,
  .letter__inner,
  .notfound .h-xl,
  .notfound p,
  .notfound__actions
) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-anim .is-in { opacity: 1; transform: none; }

/* Blanket failsafe: once .reveal-all is set, nothing may remain hidden. */
.js-anim.reveal-all :where(
  .hero__panel, .about__intro, .about--page .about__copy,
  .about--page .about__media, .page-banner .h-xl, .page-banner__sub,
  .page-banner__panel, .tuition-snapshot .h-lg, .tuition-snapshot__intro,
  .tuition-snapshot__foot, .price-card, .steps-band .h-lg, .steps-band__sub,
  .step-card, .steps-band > .container > .btn, .mission .h-lg, .mission__body,
  .philosophy .h-lg, .philosophy__intro, .pillar, .details__item, .eyebrow,
  .kim-note .h-lg, .kim-note__sub, .kim-note__body, .kim-note .btn,
  .join__verse, .join-cta .h-lg, .join-cta__sub, .join-cta .btn,
  .scripture blockquote, .calendar .h-lg, .calendar__card, .schedule__head,
  .table-scroll, .schedule__note, .schedule__actions, .classes-intro__notes,
  .class-card, .teacher, .form-shell, .faq .h-lg, .faq .accordion,
  .tuition .h-lg, .tuition__intro, .tuition-table, .role-card, .resource,
  .letter__inner, .notfound .h-xl, .notfound p, .notfound__actions
) {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

/* --------------------------------------------------------------------------
   Hero: the photograph settles rather than snapping into place
   -------------------------------------------------------------------------- */
@keyframes heroSettle {
  from { transform: scale(1.04); }
  to   { transform: none; }
}
.js-anim .hero__bg { animation: heroSettle 1600ms var(--ease-out) both; }
.js-anim .hero__panel { transition-delay: 120ms; }

/* --------------------------------------------------------------------------
   Menu panel
   -------------------------------------------------------------------------- */
.js-anim .site-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--dur-base) var(--ease-soft),
    opacity 240ms var(--ease-soft);
}
.js-anim .site-menu.is-open {
  max-height: calc(100vh - 64px);
  opacity: 1;
  overflow-y: auto;
}

@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.js-anim .site-menu.is-open nav li,
.js-anim .site-menu.is-open .menu-enroll {
  animation: menuItemIn var(--dur-base) var(--ease-out) both;
}
.js-anim .site-menu.is-open nav li:nth-child(1) { animation-delay: 40ms; }
.js-anim .site-menu.is-open nav li:nth-child(2) { animation-delay: 70ms; }
.js-anim .site-menu.is-open nav li:nth-child(3) { animation-delay: 100ms; }
.js-anim .site-menu.is-open nav li:nth-child(4) { animation-delay: 130ms; }
.js-anim .site-menu.is-open nav li:nth-child(5) { animation-delay: 160ms; }
.js-anim .site-menu.is-open nav li:nth-child(6) { animation-delay: 190ms; }
.js-anim .site-menu.is-open .menu-enroll        { animation-delay: 220ms; }

.menu-scrim {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.menu-scrim.is-on { opacity: 1; }

/* Nav underline grows from the left instead of blinking on */
.site-menu nav a { position: relative; border-bottom-color: transparent; }
.site-menu nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-menu nav a:hover::after,
.site-menu nav a:focus-visible::after { transform: scaleX(1); }
.site-menu nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--sage);
}

/* --------------------------------------------------------------------------
   Accordion (the FAQ): height animates via grid-template-rows, which needs
   no JavaScript measurement and stays correct when the text reflows.
   -------------------------------------------------------------------------- */
.js-anim .accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  opacity: 0;
  transition:
    grid-template-rows var(--dur-base) var(--ease-soft),
    opacity var(--dur-micro) var(--ease-soft);
}
.js-anim .accordion__panel[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Vertical padding must live INSIDE the clipped box. A grid item's automatic
   minimum size includes its padding, so `padding-bottom` here would stop the
   0fr track collapsing past 28px and leave a gap under every closed panel. */
.js-anim .accordion__panel > .accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 22.3px;
}
.js-anim .accordion__panel > .accordion__panel-inner > :last-child {
  padding-bottom: 28px;
}
.js-anim .accordion__icon::before,
.js-anim .accordion__icon::after {
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-micro);
}
.js-anim .accordion__trigger[aria-expanded="true"] .accordion__icon::before {
  transform: translateY(-50%) rotate(180deg);
}

/* --------------------------------------------------------------------------
   Micro-interactions. The design is flat, so lifts use translate, not shadow.
   -------------------------------------------------------------------------- */
.btn {
  transition:
    background-color var(--dur-micro) var(--ease-soft),
    color var(--dur-micro) var(--ease-soft),
    border-color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.class-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.class-card:hover { transform: translateY(-2px); border-left-color: var(--green-dark); }

.price-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.price-card:hover { transform: translateY(-3px); border-color: var(--green-dark); }

.teacher { overflow: hidden; }
.teacher__photo { transition: transform 620ms var(--ease-out); }
.teacher:hover .teacher__photo { transform: scale(1.035); }

.doc-link__icon { transition: transform var(--dur-micro) var(--ease-out); }
.doc-link:hover .doc-link__icon { transform: translateX(2px); }

.chip {
  transition:
    background-color var(--dur-micro) var(--ease-soft),
    color var(--dur-micro) var(--ease-soft),
    transform var(--dur-micro) var(--ease-out);
}
.chip:active { transform: translateY(1px); }

.wordmark__mark {
  transition:
    background-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}
.link-inline { transition: border-color var(--dur-micro) var(--ease-soft); }

/* --------------------------------------------------------------------------
   Filtering — a brief settle so swapped content does not just pop
   -------------------------------------------------------------------------- */
@keyframes settleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.js-anim .class-card.just-filtered {
  animation: settleIn var(--dur-base) var(--ease-out) both;
}
.js-anim .schedule-table { transition: opacity var(--dur-micro) var(--ease-soft); }
.js-anim .schedule-table.is-swapping { opacity: .45; }

/* Form feedback arrives rather than appears */
.js-anim .form-success:not([hidden]) {
  animation: settleIn var(--dur-slow) var(--ease-out) both;
}
.js-anim .form-alert:not([hidden]) {
  animation: settleIn var(--dur-base) var(--ease-out) both;
}
.js-anim .student-block.is-new {
  animation: settleIn var(--dur-base) var(--ease-out) both;
}
.input, .select, .textarea {
  transition:
    border-color var(--dur-micro) var(--ease-soft),
    box-shadow var(--dur-micro) var(--ease-soft);
}

/* Photos fade up as they decode, so lazy-loaded images do not snap in.

   The hidden state is opt-in: JavaScript adds .img-fade only to images that
   are still loading, and removes it on load or error. An image the browser
   never fetches (a lazy one far below the fold) therefore never gets hidden,
   and a broken image still leaves its alt text visible. */
.js-anim img.img-fade {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.js-anim img.img-fade.is-loaded { opacity: 1; }
/* The failsafe un-hides photos too, so a stalled decode cannot leave a gap. */
.js-anim.reveal-all img.img-fade { opacity: 1; }

/* --------------------------------------------------------------------------
   Respect a reduced-motion preference: no reveals, no settles, no hidden
   starting states — just the finished page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim *,
  .js-anim *::before,
  .js-anim *::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .js-anim .site-menu:not(.is-open) { max-height: 0; }
  .js-anim .accordion__panel { grid-template-rows: 0fr; }
  .js-anim .accordion__panel[data-open] { grid-template-rows: 1fr; }
}