/* ==========================================================================
   Hartland Christian School — site styles
   Palette, type scale and section patterns mirror the previous Showit build.
   ========================================================================== */

:root {
  /* Brand blues — the accent family used across headings, links and bands */
  --navy:        #243b8a;  /* CTA band, academics bands */
  --blue-accent: #1d0ce9;  /* second half of split section headings */
  --blue-deep:   #09096d;  /* card captions */
  --blue-ink:    #0b029e;  /* testimonial attributions */
  --blue-pill:   #1a499b;  /* label pills on the overview grid */
  --blue-link:   #4141f4;  /* document links */
  --blue-soft:   #6d8bd7;  /* inline links on light backgrounds */
  --btn-blue:    rgba(71, 178, 238, 0.72); /* buttons on the navy band */
  --btn-blue-hi: rgba(71, 178, 238, 0.95);

  /* Neutrals */
  --white:      #ffffff;
  --grey:       #eeeeee;  /* alternating section band */
  --warm-grey:  #dfdeda;  /* overview / enrollment band */
  --ink:        #000000;
  --muted:      #4e4e4e;  /* scripture pull-quotes */
  --rule:       #cfcfcf;

  /* Inherited theme defaults, still used for page titles */
  --olive:      #49592e;
  --forest:     #142617;
  --gold:       #a79843;

  /* Type */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-script:  'Cardo', Georgia, serif;
  --f-cond:    'Fjalla One', Impact, sans-serif;
  --f-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-quote:   'Libre Baskerville', Georgia, serif;

  /* Layout */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 148px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--f-cond); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- typography */
.t-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.2; letter-spacing: .1em;
  color: var(--olive); text-align: center;
}
.t-eyebrow {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.875rem); line-height: 1.2; letter-spacing: .3em;
  color: var(--ink);
}
.t-eyebrow em { font-style: normal; color: var(--blue-accent); }
.t-cond {
  font-family: var(--f-cond); font-weight: 400; text-transform: uppercase;
  letter-spacing: .3em; line-height: 1.2;
}
.t-quote {
  font-family: var(--f-quote); font-style: italic; color: var(--muted);
  letter-spacing: .1em; line-height: 1.6; text-align: center;
}
.lede, .prose p { line-height: 1.8; }
.prose p + p { margin-top: 1.15em; }
.prose a { color: var(--blue-soft); }

/* Section heading: rule — words — rule. Second word takes the blue accent. */
.sec-head {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  justify-content: center; margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.sec-head::before, .sec-head::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--ink); opacity: .55; min-width: 2rem;
}
.sec-head--left { justify-content: flex-start; }
.sec-head--left::before { display: none; }
.sec-head h2 {
  font-family: var(--f-cond); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.35rem, 3vw, 1.875rem); letter-spacing: .3em; line-height: 1.2;
  text-align: center; white-space: nowrap;
}
.sec-head h2 em { font-style: normal; color: var(--blue-accent); }
.sec-head h2 .tone-deep { color: var(--blue-deep); }
/* nowrap keeps the rules tight to the words on wide screens, but a phone has
   no room for it and the page scrolls sideways — let the heading wrap there. */
@media (max-width: 760px) {
  .sec-head { gap: .8rem; }
  .sec-head h2 { white-space: normal; letter-spacing: .2em; }
  .sec-head::before, .sec-head::after { min-width: .75rem; }
}
/* "Service Times & Location" is set in the serif display face, all black */
.sec-head--serif h2 {
  font-family: var(--f-display); text-transform: none; letter-spacing: .04em;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--ink);
}

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--grey { background: var(--grey); }
.section--warm { background: var(--warm-grey); }
.section--navy { background: var(--navy); color: #fff; }
.section--gradient { background: linear-gradient(347deg, #fff 0%, var(--warm-grey) 100%); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: 1rem; line-height: 1.2; text-decoration: none;
  padding: .85em 1.6em; border-radius: 10px; transition: background-color .3s, color .3s, border-color .3s;
}
.btn--ghost { background: var(--grey); color: var(--blue-deep); }
.btn--ghost:hover { background: #e2e2e2; }
.btn--cta { background: var(--btn-blue); color: #fff; width: 100%; max-width: 375px; font-size: 1.1rem; }
.btn--cta:hover { background: var(--btn-blue-hi); }
.btn--solid { background: var(--navy); color: #fff; }
.btn--solid:hover { background: #1b2e6d; }
.btn .arw { transition: transform .3s; }
.btn:hover .arw { transform: translateX(4px); }

/* ==================================================================  header
   Eight links split either side of the crest. Each group carries the top and
   bottom hairline and flexes out to the window edge, so the rules run full
   bleed and break around the crest exactly as the original did. */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; padding-block: 1.15rem 1rem; }

.site-nav { display: flex; align-items: center; justify-content: center; }
.site-nav__list {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: clamp(.6rem, 1.9vw, 2.25rem);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding-block: .6rem;
}
.site-nav__list--left { justify-content: flex-end; padding-right: clamp(.75rem, 2vw, 2rem); }
.site-nav__list--right { justify-content: flex-start; padding-left: clamp(.75rem, 2vw, 2rem); }
.site-nav__list a {
  font-family: var(--f-script); font-size: 16px; letter-spacing: .2em;
  text-transform: lowercase; text-decoration: none; color: var(--ink);
  white-space: nowrap; transition: color .4s;
}
.site-nav__list a:hover { color: #0a3cfa; }
.site-nav__list a[aria-current="page"] { color: var(--blue-accent); }

.brand__crest {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.4vw, 1rem); text-decoration: none; padding-inline: clamp(.5rem, 1.5vw, 1.25rem);
}
.brand__crest img { width: 60px; height: auto; }
.brand__est {
  font-family: var(--f-script); font-style: italic; font-size: 15px;
  letter-spacing: .02em; color: var(--ink); line-height: 1;
}
.brand__name {
  display: block; margin-top: 1.35rem;
  font-family: var(--f-script); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2.3vw, 1.875rem); letter-spacing: .34em;
  color: var(--ink); text-align: center; line-height: 1.3; text-decoration: none;
  /* letter-spacing adds trailing space; nudge back to optical centre */
  text-indent: .34em;
}
/* the church wordmark is set smaller and in caps on the original */
.brand__name--church { text-transform: uppercase; font-size: clamp(.8rem, 1.5vw, 1.25rem); }

.nav-toggle { display: none; }

/* mobile header: hamburger at the left, crest centred, wordmark beneath */
@media (max-width: 1100px) {
  .site-nav__list { gap: clamp(.4rem, 1.2vw, 1.2rem); }
  .site-nav__list a { font-size: 14px; letter-spacing: .12em; }
}
@media (max-width: 900px) {
  :root { --header-h: 96px; }
  /* keep the sticky bar compact — it costs screen on every scroll */
  .site-header { padding-block: .3rem .35rem; position: relative; }
  /* menu button sits on the right, where the drawer's close button also is */
  .nav-toggle {
    display: flex; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); z-index: 2;
  }
  .nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }
  .site-nav__list--left, .site-nav__list--right { display: none; }
  .brand__crest { padding-inline: 0; }
  .brand__crest img { width: 34px; }
  .brand__est { font-size: 12px; }
  .brand__name { margin-top: .15rem; font-size: .95rem; letter-spacing: .16em; text-indent: .16em; }
  .brand__name--church { font-size: .85rem; }
  /* the church crest is squarer than the school's, so it needs the height set */
  .brand__crest { min-height: 46px; }

  /* ---- the drawer: full-height sheet with real rows and thumb-sized taps --- */
  .site-nav[data-open="true"] {
    position: fixed; inset: 0; height: 100dvh; background: #fff; z-index: 150;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0; padding: 0;
    overflow-y: auto; overscroll-behavior: contain;
    animation: drawerIn .28s cubic-bezier(.33, 1, .68, 1);
  }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .site-nav[data-open="true"] { animation: none; } }

  .site-nav[data-open="true"] .nav-drawer__top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .65rem .75rem .65rem 1.15rem;
    border-bottom: 3px solid var(--navy); position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .nav-drawer__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
  .nav-drawer__brand img { width: 30px; height: auto; flex: 0 0 auto; }
  .nav-drawer__brand span {
    font-family: var(--f-script); font-style: italic; font-size: .95rem; letter-spacing: .1em;
    line-height: 1.25; color: var(--ink);
  }

  .site-nav[data-open="true"] .site-nav__list--left,
  .site-nav[data-open="true"] .site-nav__list--right {
    display: flex; flex: 0 0 auto; flex-direction: column; gap: 0;
    border: 0; padding: 0; width: 100%;
  }
  .site-nav[data-open="true"] .site-nav__list li { width: 100%; }
  .site-nav[data-open="true"] .site-nav__list a {
    display: flex; align-items: center; width: 100%; min-height: 58px;
    padding: 0 1.15rem; border-bottom: 1px solid rgba(20, 30, 60, .09);
    font-family: var(--f-script); font-size: 1.15rem; letter-spacing: .16em;
    text-transform: lowercase; color: var(--ink);
    border-left: 4px solid transparent; transition: background-color .2s, border-color .2s, color .2s;
  }
  .site-nav[data-open="true"] .site-nav__list a::after {
    content: ""; margin-left: auto; width: 8px; height: 8px;
    border-right: 1.5px solid rgba(20,30,60,.3); border-top: 1.5px solid rgba(20,30,60,.3);
    transform: rotate(45deg);
  }
  .site-nav[data-open="true"] .site-nav__list a:active { background: rgba(36, 59, 138, .06); }
  .site-nav[data-open="true"] .site-nav__list a[aria-current="page"] {
    border-left-color: var(--navy); color: var(--navy);
    background: rgba(36, 59, 138, .05); font-weight: 700;
  }
  .site-nav[data-open="true"] .site-nav__list a[aria-current="page"]::after { border-color: var(--navy); }
  .site-nav[data-open="true"] .brand__crest { display: none; }

  /* the three things you actually want to do from a phone */
  .site-nav[data-open="true"] .nav-drawer__actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: auto; background: rgba(20, 30, 60, .09);
    border-top: 1px solid rgba(20, 30, 60, .09);
  }
  .nav-drawer__actions a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 76px; background: #fff; text-decoration: none; color: var(--navy);
  }
  .nav-drawer__actions a:active { background: rgba(36, 59, 138, .06); }
  .nav-drawer__actions svg { width: 20px; height: 20px; fill: currentColor; }
  .nav-drawer__actions span {
    font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
  }

  .site-nav[data-open="true"] .nav-close { display: grid; }
  .nav-close {
    display: none; width: 44px; height: 44px; place-items: center;
    flex: 0 0 auto; color: var(--ink);
  }
  .nav-close svg { width: 22px; height: 22px; fill: currentColor; }
}
/* drawer chrome is mobile-only */
.nav-drawer__top, .nav-drawer__actions { display: none; }
@media (min-width: 901px) { .nav-close { display: none; } }

/* =================================================================== hero */
.hero { background: #fff; }
.hero img { width: 100%; height: clamp(240px, 45vw, 560px); object-fit: cover; }
.hero--contain img { height: auto; object-fit: contain; }

/* ============================================================ split section */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--rev > :first-child { order: 2; }
}
.split__media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
/* the purpose/mission portraits are cropped tall, as on the previous site */
.split__media--tall img { aspect-ratio: 340 / 492; max-height: 492px; }
.split__body .sec-head { margin-bottom: 1.75rem; }

/* ============================================================ offer cards */
.cards { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; }
.card__media { overflow: hidden; aspect-ratio: 287 / 260; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__label {
  font-family: var(--f-cond); text-transform: uppercase; text-align: center;
  font-size: 1.25rem; letter-spacing: .06em; color: var(--blue-deep); line-height: 1.2;
}

/* ============================================================== carousel */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform .5s ease; }
.carousel__slide { flex: 0 0 100%; min-width: 0; }
.carousel[data-fade="true"] .carousel__track { display: block; transition: none; }
/* only collapse to one slide once the script is running; without it every
   slide stays visible so the content is still reachable */
.carousel[data-ready="true"][data-fade="true"] .carousel__slide { display: none; }
.carousel[data-ready="true"][data-fade="true"] .carousel__slide[data-active="true"] { display: block; animation: fade .45s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 64px; display: grid; place-items: center; color: var(--ink);
  transition: opacity .3s;
}
.carousel__btn:hover { opacity: .55; }
/* The track is inset so the arrows sit in their own gutter rather than on top
   of the quote text or the slide image. */
.carousel { padding-inline: 3.25rem; }
@media (min-width: 900px) { .carousel { padding-inline: clamp(4rem, 5.5vw, 5.5rem); } }
.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }
.carousel__btn svg { width: 22px; height: 44px; stroke: currentColor; stroke-width: 1.5; fill: none; }
@media (max-width: 720px) {
  .carousel { padding-inline: 2.5rem; }
  .carousel__btn { width: 34px; height: 44px; }
  .carousel__btn svg { width: 16px; height: 32px; }
}
@media (max-width: 420px) {
  /* no room for a gutter on a small phone — swipe and the dots carry it */
  .carousel { padding-inline: 0; }
  .carousel__btn { display: none; }
}
.carousel__dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.carousel__dots button {
  width: 9px; height: 9px; border-radius: 50%; background: transparent;
  border: 1px solid var(--blue-deep); padding: 0; transition: background-color .3s;
}
.carousel__dots button[aria-selected="true"] { background: var(--blue-deep); }

/* testimonial slide */
.review { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.review__quote { position: relative; padding-top: 2.5rem; }
.review__mark {
  position: absolute; top: -.25rem; left: 0;
  font-family: var(--f-display); font-size: 5rem; line-height: 1; color: var(--blue-deep); opacity: .35;
}
.review__text { font-size: .9rem; line-height: 1.8; text-align: center; }
.review__by {
  margin-top: 1.5rem; text-align: center; font-family: var(--f-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .26em; font-size: 1rem; color: var(--blue-ink);
}
.review__media { background: #fff; padding: 10px; }
.review__media img { width: 100%; aspect-ratio: 561 / 405; object-fit: cover; }

/* ============================================================== CTA band */
.cta { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 860px) { .cta { grid-template-columns: minmax(0, 1fr) minmax(0, 375px); } }
.cta h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.25rem, 5.5vw, 3.8rem); line-height: 1.2; letter-spacing: .1em; color: #fff; }
.cta p { margin-top: 1.25rem; color: #fff; font-size: 1rem; }
.cta__actions { display: grid; gap: 1.5rem; }
.cta__verse {
  margin-top: clamp(2rem, 5vw, 3.25rem); text-align: center; color: #fff;
  font-family: 'Times New Roman', Times, serif; font-size: .8rem; font-style: italic; letter-spacing: .02em;
}

/* =============================================================== footer */
.site-footer { background: #fff; padding-block: clamp(2.5rem, 5vw, 3.25rem); border-top: 1px solid var(--grey); }
.footer-grid {
  display: grid; gap: clamp(1.75rem, 4vw, 2.25rem); align-items: center;
  grid-template-columns: minmax(0, 1fr); justify-items: center;
}
/* equal side columns keep the centre block on the page's centre line */
@media (min-width: 820px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.7fr) 1px minmax(0, 1fr);
    justify-items: stretch;
    column-gap: clamp(1rem, 2vw, 1.75rem);
  }
}
.footer-rule { display: none; background: var(--rule); }
@media (min-width: 820px) { .footer-rule { display: block; align-self: stretch; min-height: 150px; } }

.footer-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); justify-content: center; }
@media (min-width: 820px) { .footer-nav { justify-content: flex-start; } }
.footer-nav ul { display: grid; }
.footer-nav__rule { width: 1px; align-self: stretch; background: var(--rule); }
.footer-nav a {
  font-family: var(--f-body); font-weight: 300; font-size: .8125rem;
  letter-spacing: .2em; line-height: 2.3; text-transform: uppercase;
  text-decoration: none; transition: color .3s; white-space: nowrap;
}
.footer-nav a:hover { color: #0a3cfa; }

.footer-main { text-align: center; }
.footer-main__name {
  font-family: var(--f-cond); font-weight: 400; font-size: clamp(1rem, 1.65vw, 1.4375rem);
  text-transform: uppercase; letter-spacing: .2em; line-height: 1.2;
  text-decoration: none; display: inline-block; text-indent: .2em;
  white-space: nowrap;  /* the original sets it on one line */
}
@media (max-width: 480px) { .footer-main__name { white-space: normal; letter-spacing: .12em; text-indent: .12em; } }
.footer-main p {
  margin-top: .85rem; font-family: var(--f-body); font-weight: 300; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .2em; line-height: 1.8; overflow-wrap: anywhere;
}
.footer-main__bold { font-weight: 700; }
.footer-main a { text-decoration: none; }
.footer-main a:hover { text-decoration: underline; }

.footer-aside { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.footer-aside img { width: clamp(64px, 7vw, 90px); height: auto; }
.footer-social { display: flex; align-items: center; gap: .7rem; }
.footer-social__rule { width: 1px; height: 26px; background: var(--rule); }
.footer-social a { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink); transition: color .3s; }
.footer-social a:hover { color: var(--blue-accent); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }

.footer-legal {
  margin-top: clamp(1.75rem, 4vw, 2.25rem); text-align: center;
  font-family: var(--f-body); font-weight: 300; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b;
}

/* ========================================================== page banners */
/* Title colour and size vary per page on the original — tuition is black at
   46px, athletics blue at 46px, academics/admissions olive at 30px — so both
   are driven by custom properties rather than one hard-coded rule. */
.page-title { text-align: center; }
.page-title h1 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .3em;
  font-size: var(--title-size, clamp(1.5rem, 3.2vw, 1.875rem));
  color: var(--title-color, var(--olive)); line-height: 1.2;
}
.page-title h1 em { font-style: normal; color: var(--blue-accent); }
.page-title--ink  { --title-color: var(--ink);  --title-size: clamp(1.75rem, 4.4vw, 2.875rem); }
.page-title--blue { --title-color: var(--ink);  --title-size: clamp(1.75rem, 4.4vw, 2.875rem); }
/* the contact heading keeps the serif display face, black, at a smaller size */
.page-title--serif h1 {
  font-family: var(--f-display); text-transform: none; letter-spacing: .1em;
  color: var(--ink); font-size: clamp(1.6rem, 3.2vw, 1.875rem);
}
.page-title .rule { width: min(413px, 60%); height: 1px; background: var(--ink); opacity: .6; margin: 1.25rem auto 0; }

/* rule — quote mark — rule, as under the athletics title */
.rule-mark { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); margin-top: 1.5rem; }
.rule-mark::before, .rule-mark::after {
  content: ""; flex: 0 1 413px; height: 1px; background: var(--ink); opacity: .75; min-width: 1.5rem;
}
.rule-mark__glyph { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); }
.rule-mark__glyph svg { width: clamp(30px, 4vw, 46px); height: auto; fill: currentColor; }

/* Montserrat, uppercase, widely tracked — the athletics scripture treatment */
.verse-caps {
  font-family: var(--f-body); font-weight: 400; font-size: clamp(.7rem, 1.3vw, .75rem);
  text-transform: uppercase; letter-spacing: .26em; line-height: 1.5;
  text-align: center; color: var(--ink);
  max-width: 768px; margin: 1.75rem auto 0;
}
.verse-caps--lg { font-size: clamp(.75rem, 1.5vw, .875rem); max-width: 900px; }
.verse-caps__ref { margin-top: 1.5rem; }
@media (min-width: 760px) { .verse-caps__ref { text-align: right; padding-right: clamp(0rem, 6vw, 6rem); } }
.page-title p { margin-top: 1.75rem; text-align: center; }

/* scripture panel */
.verse-panel { max-width: 900px; margin-inline: auto; text-align: center; }


.verse-card { background: #fff; padding: clamp(1.5rem, 4vw, 2rem); max-width: 480px; }
/* translucent card floated over the photograph, as on the original */
.photo-hero { position: relative; background: #fff; }
.photo-hero > img { width: 100%; height: clamp(320px, 52vw, 731px); object-fit: cover; }
.photo-hero__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding-bottom: clamp(1.25rem, 4vw, 3rem); pointer-events: none;
}
.photo-hero__overlay .wrap { display: flex; justify-content: flex-end; }
.verse-card--float {
  background: rgba(255, 255, 255, .8);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, .5);
  pointer-events: auto; backdrop-filter: blur(1px);
}
@media (max-width: 640px) {
  .photo-hero__overlay { position: static; padding: 0; }
  .photo-hero__overlay .wrap { justify-content: center; margin-top: -3rem; }
  .verse-card--float { background: rgba(255, 255, 255, .94); }
}
.verse-card p { font-family: var(--f-quote); font-style: italic; color: var(--muted); font-size: 1.05rem; letter-spacing: .1em; line-height: 1.6; text-align: center; }
.verse-card cite { display: block; margin-top: 1rem; font-style: italic; font-family: var(--f-quote); color: var(--muted); font-size: .85rem; text-align: center; }

/* ========================================================= mission cards */
.pillars { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pillar {
  background: #fff; border: 1px solid var(--grey); box-shadow: 4px 4px 5px rgba(0,0,0,.5);
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
}
.pillar__media { border: 1px solid var(--warm-grey); padding: 6px; width: 100%; }
.pillar__media img { width: 100%; aspect-ratio: 227 / 180; object-fit: cover; }
.pillar h3 { font-family: var(--f-script); font-size: 1.5rem; letter-spacing: .3em; line-height: 1.2; text-indent: .3em; }
.pillar__rule { width: 107px; height: 1px; background: var(--ink); opacity: .5; }
.pillar p { font-family: var(--f-script); font-size: .875rem; letter-spacing: .16em; line-height: 1.7; text-align: center; }

/* ======================================================== overview grid */
.overview { display: grid; gap: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.overview__item h3 { display: inline-block; }
.pill {
  display: inline-block; background: var(--blue-pill); color: #fff; border-radius: 10px;
  font-family: var(--f-cond); text-transform: none; letter-spacing: .3em; text-indent: .3em;
  font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.2; padding: .7em 1.1em; text-align: center;
}
.overview__item p { margin-top: 1.5rem; font-size: .9375rem; line-height: 1.5; letter-spacing: .07em; text-align: left; }
/* Reads inline at the surrounding text size — no bullet, no size jump. */
.doc-link {
  color: var(--navy); font-weight: 400; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .25s;
}
.doc-link:hover { color: var(--blue-accent); }

/* ======================================================= accordion (faith) */
.accordion { border-top: 1px solid rgba(0,0,0,.35); }
.accordion__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.accordion__title { font-family: var(--f-script); font-style: italic; font-size: 1.55rem; letter-spacing: .3em; line-height: 1.2; text-indent: .3em; }
.accordion__intro { font-family: var(--f-script); font-style: italic; font-size: .875rem; letter-spacing: .3em; line-height: 1.6; margin-top: 1rem; }
.accordion__toggle {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.25rem;
  font-family: var(--f-script); font-size: .75rem; letter-spacing: .3em; text-transform: lowercase;
}
.accordion__toggle svg { width: 14px; height: 14px; fill: currentColor; transition: transform .3s; }
.accordion__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.creed { display: grid; gap: 1.1rem; padding-top: 1.5rem; }
.creed li {
  position: relative; padding-left: 1.5rem;
  font-family: var(--f-script); font-size: .8125rem; letter-spacing: .3em; line-height: 1.7; text-align: left;
}
.creed li::before { content: "•"; position: absolute; left: 0; }

/* statement-of-faith long form (academics) */
.creed--plain li {
  font-family: var(--f-body); font-weight: 400; font-size: .8125rem;
  letter-spacing: .19em; line-height: 1.5;
}
.creed--plain b, .creed--plain u { font-weight: 600; }

/* ======================================================== learning bands */
.band { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .band--rev > .band__media { order: 2; }
}
.band__media img { width: 100%; height: 100%; min-height: 320px; max-height: 640px; object-fit: cover; }
.band__body { padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.band__body h2 { font-family: var(--f-cond); text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.2; letter-spacing: .04em; text-align: center; }
.band__rule { width: min(480px, 100%); height: 3px; background: currentColor; margin: 1.25rem auto; opacity: .9; }
.band__body p { margin-top: 1.75rem; text-align: left; font-size: 1rem; }
.band__body p.band__grades {
  font-family: var(--f-cond); text-transform: uppercase; font-size: 1.2rem;
  letter-spacing: .06em; text-align: center; margin-top: 0;
}
.band--navy { background: var(--navy); color: #fff; }
.band--warm { background: var(--warm-grey); color: var(--ink); }

/* ====================================================== enrollment steps */
.enroll { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .enroll { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.enroll__media img { width: 100%; height: 100%; max-height: 1400px; object-fit: cover; }
@media (min-width: 900px) { .enroll__media { position: sticky; top: calc(var(--header-h) + 2rem); } }
.steps { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); counter-reset: step; }
.step { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.step__num {
  width: 39px; height: 37px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--f-cond); font-size: 1.05rem; line-height: 1;
}
.step h3 {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; font-size: clamp(.95rem, 2vw, 1.15rem); line-height: 1.5; color: var(--forest);
}
.step p { margin-top: .9rem; font-size: .95rem; }
/* inline links read as links, rather than black underlined text */
.step p a {
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color .25s;
}
.step p a:hover { color: var(--blue-accent); }

/* =========================================================== contact page */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-grid__media img { width: 100%; aspect-ratio: 555 / 338; object-fit: cover; }
.contact-card h2 { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: var(--forest); text-align: center; }
.contact-card__rule { width: min(328px, 100%); height: 1px; background: var(--ink); opacity: .5; margin: 1.25rem auto 2rem; }
.contact-list { display: grid; gap: 1.75rem; }
.contact-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.contact-row svg { width: 34px; height: 34px; fill: var(--navy); }
/* the email address is one long unbreakable token on narrow screens */
.contact-row a { text-decoration: none; overflow-wrap: anywhere; }
.contact-row a:hover { text-decoration: underline; }
.contact-row address { font-style: normal; line-height: 1.6; }
.contact-note { margin-top: .35rem; font-size: .9rem; }
.map-embed { width: 100%; aspect-ratio: 1000 / 453; border: 0; }
@media (max-width: 700px) { .map-embed { aspect-ratio: 4 / 3; } }

/* ============================================================ church page */
/* Map and times sit as two panels of equal height, so neither column is left
   with a block of empty space under it. */
.service-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) { .service-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.map-frame {
  width: 100%; height: 100%; min-height: 460px; overflow: hidden;
  border: 1px solid rgba(36, 59, 138, .16);
  box-shadow: 0 6px 24px rgba(20, 30, 60, .12); background: var(--grey);
}
.map-embed { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
@media (max-width: 900px) { .map-frame, .map-embed { min-height: 340px; } }

.service-list {
  background: #fff; border: 1px solid rgba(20, 30, 60, .09);
  box-shadow: 0 2px 6px rgba(20, 30, 60, .05), 0 12px 30px rgba(20, 30, 60, .08);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.service-list h3 {
  font-family: var(--f-cond); font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; font-size: 1rem; color: var(--navy);
  padding-bottom: .6rem; border-bottom: 2px solid var(--navy);
}
.service-day h3 + ul { margin-top: .9rem; }
.service-day ul { display: grid; gap: .15rem; }
/* dotted leader between the service name and its time */
.service-day li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; }
.service-day li::after {
  content: ""; order: 1; flex: 1 1 auto;
  border-bottom: 1px dotted rgba(20, 30, 60, .35); transform: translateY(-.25em);
}
.service-day__name { font-family: var(--f-body); font-weight: 400; font-size: .95rem; letter-spacing: .03em; }
.service-day__time {
  order: 2; font-family: var(--f-cond); font-size: 1.05rem; letter-spacing: .06em;
  color: var(--navy); white-space: nowrap;
}
.service-note {
  font-size: .9rem; line-height: 1.7; color: #444;
  padding: .9rem 1.1rem; background: rgba(36, 59, 138, .05); border-left: 3px solid var(--navy);
}
.service-address { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: auto; }
.service-address svg { width: 24px; height: 24px; fill: var(--navy); }
.service-address address { font-style: normal; font-size: .95rem; line-height: 1.6; margin-top: .7rem; }
.service-directions {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; color: var(--navy); text-decoration: none;
}
.service-directions:hover { text-decoration: underline; }
.service-directions .arw { transition: transform .3s; }
.service-directions:hover .arw { transform: translateX(4px); }

.banner-split { position: relative; display: grid; place-items: center; min-height: clamp(220px, 30vw, 320px); background: var(--navy); text-align: center; padding: clamp(2rem, 5vw, 3rem) var(--gutter); }
.banner-split h2 { font-family: var(--f-display); font-weight: 400; color: #fff; letter-spacing: .3em; font-size: clamp(1.35rem, 3.4vw, 2.125rem); line-height: 1.4; text-indent: .3em; position: relative; z-index: 1; }
/* photographic band: the picture carries it, with a scrim so the words hold */
.banner-split--photo { background: #1a2540; overflow: hidden; }
.banner-split--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--bg); background-size: cover; background-position: center;
}
.banner-split--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(20, 34, 68, .45);
}

/* A faded photograph behind a section. The image sits in a pseudo-element at
   its own opacity so the content above keeps full contrast. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--bg); background-size: cover; background-position: center;
  opacity: var(--bg-opacity, .2);
}
.section--photo > * { position: relative; }

/* Each missionary slide sits on a faded photograph of where they serve. The
   image is a pseudo-element at 20% (50% on the opening verse) so it reads as
   scenery rather than competing with the family. */
.mission-slide--bg { position: relative; isolation: isolate; padding: clamp(1.5rem, 3vw, 2.5rem); }
.mission-slide--bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--bg); background-size: cover; background-position: center;
  opacity: var(--bg-opacity, .2);
}

.mission-slide { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .mission-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mission-slide h3 { font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.125rem); letter-spacing: .3em; line-height: 1.3; text-indent: .3em; grid-column: 1 / -1; text-align: center; }
.mission-facts { display: grid; gap: 1rem; }
.mission-facts div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .9rem; align-items: start; }
.mission-facts svg { width: 20px; height: 26px; fill: var(--navy); }
.mission-facts span { font-family: var(--f-quote); font-size: 1rem; letter-spacing: .1em; line-height: 1.7; }
.mission-slide__media { background: #fff; padding: 8px; }
.mission-slide__media img { width: 100%; aspect-ratio: 441 / 313; object-fit: cover; }
.mission-slide__media--tall img { aspect-ratio: 277 / 313; }
.other-missions { display: grid; gap: 1.75rem 3rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.other-missions h4 { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; }
.other-missions p { font-style: italic; margin-top: .35rem; font-size: .95rem; }

/* ========================================================= athletics page */
.team-slide { text-align: center; }
.team-slide h3 { font-family: var(--f-display); font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: .06em; color: var(--olive); line-height: 1.2; }
.team-slide__media { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.team-slide__media img { width: 100%; aspect-ratio: 1800 / 1286; object-fit: cover; }
.team-slide__caption { margin-top: 1.5rem; font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; line-height: 1.9; color: var(--forest); }
.collage { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 780px) { .collage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.collage img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.collage li:nth-child(4) img, .collage li:nth-child(5) img { aspect-ratio: 3 / 2; }
@media (min-width: 780px) { .collage li:nth-child(4), .collage li:nth-child(5) { grid-column: span 1; } }

.athletics-lede { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .athletics-lede { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.athletics-lede__media { background: #fff; padding: 10px; border: 1px solid var(--grey); }
.athletics-lede__media img { width: 100%; height: auto; object-fit: contain; }

/* =========================================================== tuition page */
.tuition-note { max-width: 940px; margin-inline: auto; }
.tuition-note p { text-align: left; }
.tuition-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ------------------------------------------------- fee schedule (/tuition/fees) */
.page-back { padding-top: clamp(1.25rem, 3vw, 2rem); }
.back-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; color: var(--navy); text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.back-link .arw { transition: transform .3s; }
.back-link:hover .arw { transform: translateX(-4px); }

.letterhead { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.letterhead p {
  font-family: var(--f-body); font-weight: 300; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .2em; line-height: 2;
}
/* the email is one long unbreakable token on a narrow phone */
.letterhead a { text-decoration: none; overflow-wrap: anywhere; }
.letterhead a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .letterhead .sep { display: none; }
  .letterhead .letterhead__contact a { display: block; }
}

/* two balanced columns — four cards otherwise land 3 + 1 */
.fee-grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 760px) { .fee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fee-card {
  background: #fff; border: 1px solid rgba(20, 30, 60, .1);
  box-shadow: 0 2px 6px rgba(20, 30, 60, .05), 0 12px 30px rgba(20, 30, 60, .08);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.fee-card > h3 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .18em;
  font-size: 1.05rem; color: var(--navy); line-height: 1.3;
  padding-bottom: .85rem; border-bottom: 2px solid var(--navy); margin-bottom: .35rem;
}
.fee-list { display: grid; }
.fee-list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem;
  padding: .85rem 0; border-bottom: 1px solid rgba(20, 30, 60, .09);
}
.fee-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fee-name { font-family: var(--f-body); font-weight: 400; font-size: .95rem; letter-spacing: .03em; line-height: 1.45; }
.fee-name small { display: block; font-weight: 300; font-size: .8rem; color: #5a5a5a; letter-spacing: .04em; }
.fee-amt {
  font-family: var(--f-cond); font-size: 1.15rem; letter-spacing: .04em;
  color: var(--navy); white-space: nowrap; text-align: right;
}
.fee-amt small {
  display: block; font-family: var(--f-body); font-weight: 300; font-size: .72rem;
  letter-spacing: .06em; color: #5a5a5a; text-transform: uppercase; white-space: normal;
}
@media (max-width: 430px) {
  .fee-list > div { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .fee-amt { text-align: left; }
}

.callout {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding: clamp(1.25rem, 3vw, 1.75rem); border-left: 4px solid var(--navy);
  background: rgba(36, 59, 138, .05);
}
.callout svg { width: 30px; height: 30px; fill: var(--navy); }
.callout h3 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: 1rem; color: var(--navy); margin-bottom: .4rem;
}
.callout p { font-size: .95rem; line-height: 1.7; }
.callout--gold { border-left-color: #8a7c2f; background: rgba(167, 152, 67, .12); }
.callout--gold svg { fill: #8a7c2f; }
.callout--gold h3 { color: #8a7c2f; }

.policy-list { display: grid; gap: 1.25rem; max-width: 940px; }
.policy-list p { font-size: .95rem; line-height: 1.8; text-align: left; }
.tuition-crest { display: grid; place-items: start center; }
.tuition-crest img { width: min(190px, 45vw); height: auto; }

@media print {
  .site-header, .site-footer, .section--navy, .skip-link, .page-back, .tuition-actions { display: none !important; }
  .section { padding-block: 1rem; }
  .fee-card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* ============================================================== handbook */
.hb-staff { display: grid; gap: .35rem; margin-bottom: 1.25rem; }
.hb-staff div { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hb-staff dt { font-weight: 600; }
.hb-staff dd { margin: 0; }
.hb-revised { color: #6b6b6b; margin-top: 1rem; }

/* ------------------------------------------------------- handbook search */
.hb-search-wrap { padding-top: clamp(2rem, 4vw, 3rem); }
.hb-search {
  display: flex; align-items: center; gap: .75rem;
  max-width: 640px; margin-inline: auto;
  background: #fff; border: 1px solid rgba(20, 30, 60, .18);
  box-shadow: 0 2px 10px rgba(20, 30, 60, .07);
  padding: .2rem .9rem; transition: border-color .25s, box-shadow .25s;
}
.hb-search:focus-within { border-color: var(--navy); box-shadow: 0 4px 18px rgba(36, 59, 138, .18); }
.hb-search__icon { flex: 0 0 auto; display: grid; place-items: center; }
.hb-search__icon svg { width: 18px; height: 18px; fill: var(--navy); }
.hb-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--f-body); font-weight: 300; font-size: 1rem; letter-spacing: .02em;
  padding: .75rem 0; color: var(--ink);
}
.hb-search input::-webkit-search-cancel-button { display: none; }
.hb-search__clear {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; line-height: 1;
  font-size: 1.3rem; color: #666; display: grid; place-items: center;
}
.hb-search__clear:hover { background: var(--grey); color: var(--ink); }
.hb-search__count {
  max-width: 640px; margin: .7rem auto 0; text-align: center;
  font-size: .8rem; letter-spacing: .06em; color: #5a5a5a; min-height: 1.2em;
}

.hb-results {
  max-width: 640px; margin: .75rem auto 0; display: grid; gap: .4rem;
  max-height: 420px; overflow-y: auto;
}
.hb-results a {
  display: grid; gap: .35rem; padding: .85rem 1rem; text-decoration: none;
  background: #fff; border: 1px solid rgba(20, 30, 60, .1);
  transition: border-color .2s, background-color .2s, transform .2s;
}
.hb-results a:hover { border-color: var(--navy); background: rgba(36, 59, 138, .04); transform: translateX(2px); }
.hb-results__title {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .85rem; color: var(--navy);
}
.hb-results__n {
  flex: 0 0 auto; background: var(--navy); color: #fff; border-radius: 999px;
  font-size: .68rem; letter-spacing: .06em; padding: .15rem .5rem;
}
.hb-results__n--soft { background: transparent; color: var(--navy); border: 1px solid rgba(36,59,138,.35); text-transform: none; letter-spacing: .04em; }
.hb-results__group {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: .7rem; color: #6b6b6b; padding: .6rem .25rem .1rem;
}
.hb-results__snip { font-size: .85rem; line-height: 1.6; color: #444; }
.hb-results mark { background: rgba(167, 152, 67, .35); color: inherit; padding: 0 .1em; }
.hb-results__empty {
  padding: .9rem 1rem; font-size: .9rem; color: #5a5a5a; text-align: center;
  background: var(--grey);
}

/* brief flash so it is obvious which section you landed on */
.hb-section.is-target > h2 { animation: hbFlash 1.6s ease; }
@keyframes hbFlash {
  0%, 40% { background: rgba(167, 152, 67, .28); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .hb-section.is-target > h2 { animation: none; } }

.hb-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); padding-block: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .hb-layout { grid-template-columns: 250px minmax(0, 1fr); } }

.hb-toc {
  background: var(--grey); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 3px solid var(--navy);
}
@media (min-width: 1000px) { .hb-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; } }
.hb-toc h2 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .22em;
  font-size: .95rem; color: var(--navy); margin-bottom: 1rem;
}
.hb-toc ol { list-style: none; counter-reset: toc; display: grid; gap: .15rem; }
.hb-toc li { counter-increment: toc; }
.hb-toc a {
  display: flex; gap: .6rem; padding: .4rem .5rem; text-decoration: none;
  font-size: .875rem; line-height: 1.45; border-radius: 4px; transition: background-color .25s, color .25s;
}
.hb-toc a::before { content: counter(toc) "."; color: var(--navy); font-family: var(--f-cond); flex: 0 0 1.4em; }
.hb-toc a:hover { background: #fff; color: var(--navy); }

.hb-body { display: grid; gap: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.hb-section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.hb-section > h2 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--navy); line-height: 1.25;
  padding-bottom: .75rem; border-bottom: 2px solid var(--navy); margin-bottom: 1.5rem;
}
.hb-section h3 {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: .95rem; color: var(--forest);
  margin-top: 2rem; margin-bottom: .75rem;
}
.hb-section h4 {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .85rem; color: var(--navy); margin-top: 1.25rem; margin-bottom: .5rem;
}
.hb-section p { font-size: .95rem; line-height: 1.8; text-align: left; }
.hb-section p + p { margin-top: 1em; }
.hb-ref { font-style: italic; color: #5a5a5a; font-size: .875rem !important; }
.hb-signoff { margin-top: 1.25rem !important; font-weight: 600; }

.hb-list { display: grid; gap: .55rem; margin-top: .75rem; }
.hb-list li { position: relative; padding-left: 1.35rem; font-size: .95rem; line-height: 1.7; }
.hb-list li::before { content: ""; position: absolute; left: .3rem; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
.hb-list--cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .55rem 1.5rem; }

.hb-steps { counter-reset: step; display: grid; gap: .65rem; margin-top: .75rem; list-style: none; padding: 0; }
.hb-steps li { counter-increment: step; position: relative; padding-left: 2.25rem; font-size: .95rem; line-height: 1.7; }
.hb-steps li::before {
  content: counter(step); position: absolute; left: 0; top: .1em;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--f-cond); font-size: .8rem;
}

.hb-defs { display: grid; gap: 1rem; margin-top: .5rem; }
.hb-defs > div { display: grid; gap: .2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(20,30,60,.09); }
.hb-defs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hb-defs dt { font-family: var(--f-body); font-weight: 600; letter-spacing: .06em; font-size: .9rem; color: var(--forest); }
.hb-defs dd { margin: 0; font-size: .95rem; line-height: 1.7; }

.hb-note {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  background: rgba(36, 59, 138, .05); border-left: 3px solid var(--navy);
}
.hb-note strong {
  display: block; font-family: var(--f-cond); font-weight: 400; text-transform: uppercase;
  letter-spacing: .16em; font-size: .8rem; color: var(--navy); margin-bottom: .35rem;
}
.hb-note p { font-size: .9rem !important; }

.hb-verse { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--gold); }
.hb-verse p { font-family: var(--f-quote); font-style: italic; color: var(--muted); font-size: .95rem !important; line-height: 1.75; }
.hb-verse cite { display: block; margin-top: .5rem; font-style: normal; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }

.hb-levels { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 820px) { .hb-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-level { background: #fff; border: 1px solid rgba(20,30,60,.1); box-shadow: 0 8px 24px rgba(20,30,60,.07); padding: 1.5rem 1.25rem; }
.hb-level h3 { margin-top: 0; color: var(--navy); font-family: var(--f-cond); letter-spacing: .2em; font-size: 1.05rem; }

.hb-two { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 820px) { .hb-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hb-credit-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 760px) { .hb-credit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-credits { background: #fff; border: 1px solid rgba(20,30,60,.1); box-shadow: 0 8px 24px rgba(20,30,60,.07); padding: 1.25rem; }
.hb-credits h4 { margin-top: 0; }
.hb-credits h4 span { display: block; font-family: var(--f-body); font-weight: 300; text-transform: none; letter-spacing: .04em; font-size: .78rem; color: #5a5a5a; margin-top: .2rem; }
.hb-credits table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.hb-credits th, .hb-credits td { text-align: left; padding: .4rem 0; border-bottom: 1px solid rgba(20,30,60,.08); font-weight: 400; }
.hb-credits thead th { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--navy); }
.hb-credits td { text-align: right; font-family: var(--f-cond); color: var(--navy); }

.hb-offences { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 820px) { .hb-offences { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-offences--two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .hb-offences--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-offences > div { background: var(--grey); padding: 1.25rem; }
.hb-offences h4 { margin-top: 0; }
.hb-offences .hb-list li { font-size: .875rem; }

.hb-scale { margin-top: 1.25rem; }
.hb-scale ul { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hb-scale li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: var(--grey); font-size: .85rem; }
.hb-scale li span:last-child { font-family: var(--f-cond); color: var(--navy); }

.hb-fees { display: grid; margin-top: .75rem; }
.hb-fees > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: .7rem 0; border-bottom: 1px solid rgba(20,30,60,.09); }
.hb-fees > div:last-child { border-bottom: 0; }
.hb-fee__name { font-size: .95rem; letter-spacing: .03em; }
.hb-fee__name small { display: block; font-size: .78rem; color: #5a5a5a; }
.hb-fee__amt { font-family: var(--f-cond); font-size: 1.1rem; color: var(--navy); white-space: nowrap; text-align: right; }
.hb-fee__amt small { display: block; font-family: var(--f-body); font-weight: 300; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #5a5a5a; white-space: normal; }
@media (max-width: 430px) {
  .hb-fees > div { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .hb-fee__amt { text-align: left; }
}

@media print {
  .hb-toc { display: none; }
  .hb-layout { display: block; }
  .hb-section { break-inside: auto; page-break-inside: auto; }
  .hb-section > h2 { break-after: avoid; }
}

/* ============================================================ menu page */
.menu-page { min-height: 70vh; display: grid; place-items: center; padding-block: 4rem; }
.menu-page ul { display: grid; gap: 1.5rem; text-align: center; }
.menu-page a { font-family: var(--f-script); font-size: 1.35rem; letter-spacing: .22em; text-transform: lowercase; text-decoration: none; }
.menu-page img { width: 60px; margin: 0 auto 2rem; }

/* ==========================================================================
   Mobile refinements — everything below only applies on small screens.
   Chiefly: give every tappable thing a thumb-sized target, and lift the
   smallest text up to a comfortable reading size.
   ========================================================================== */
@media (max-width: 900px) {
  /* footer navigation was 15px tall per link; make each a real row */
  .footer-nav { width: 100%; justify-content: center; gap: 0; align-items: stretch; }
  .footer-nav ul { flex: 1 1 0; }
  .footer-nav a {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 .5rem; line-height: 1.3;
  }
  .footer-nav__rule { align-self: stretch; }
  .footer-main p { margin-top: .5rem; }
  .footer-main a { display: inline-block; padding-block: .45rem; }
  .footer-main__name { padding-block: .35rem; }
  .footer-legal { font-size: .78rem; line-height: 1.6; }
  /* the address is 35 characters; the wide tracking split it mid-word */
  .footer-main__email { letter-spacing: .04em; }
  .footer-main__email a { text-transform: lowercase; }
  .footer-social a { width: 44px; height: 44px; }

  /* carousel dots: keep the dot small, make the target big */
  .carousel__dots { gap: 0; margin-top: 1.5rem; }
  .carousel__dots button {
    width: 34px; height: 34px; border-radius: 0; background: none; border: 0;
    display: grid; place-items: center; position: relative;
  }
  .carousel__dots button::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--blue-deep); background: transparent; transition: background-color .3s;
  }
  .carousel__dots button[aria-selected="true"] { background: none; }
  .carousel__dots button[aria-selected="true"]::before { background: var(--blue-deep); }

  /* inline links inside body copy get a taller hit area */
  .prose a, .step p a, .doc-link, .contact-row a, .service-directions,
  .back-link, .overview__item p a, .hb-defs a {
    display: inline-block; padding-block: .3rem;
  }

  /* the smallest set text on the site */
  .verse-caps { font-size: .75rem; line-height: 1.7; }
  .t-quote { font-size: .95rem; }
  .review__text { font-size: .95rem; }

  /* comfortable reading measure and rhythm */
  .section { padding-block: clamp(2.5rem, 9vw, 3.5rem); }
  .prose p, .hb-section p, .overview__item p { font-size: 1rem; line-height: 1.75; }
  .band__body p { font-size: 1rem; }

  /* headings shouldn't dominate a phone screen */
  .cta h2 { font-size: clamp(2rem, 11vw, 2.75rem); }

  /* remaining thumb targets */
  .brand__name { line-height: 1.3; padding-block: .45rem; }
  .btn { min-height: 46px; padding-block: .75em; }
  .letterhead a, .hb-staff a { display: inline-block; padding-block: .35rem; }
  .hb-search__clear { width: 40px; height: 40px; }
  .hb-toc a { min-height: 44px; align-items: center; }
  .hb-results a { padding-block: 1rem; }
  .accordion__toggle { min-height: 44px; }
}

@media (max-width: 480px) {
  /* stop the two footer nav columns crowding each other */
  .footer-nav a { font-size: .8rem; letter-spacing: .12em; }
  .footer-aside { flex-direction: column; gap: 1rem; }
}

/* ============================================================== utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.stack > * + * { margin-top: 1.5rem; }