/* =============================================================
   A Sacred Space — styles.css
   Redesign: timeless, editorial, Upper Room-influenced.

   Philosophy:
   - White and warm off-white carry the page. Color is used only
     as text and small accent, never as section backgrounds
     (except the footer, which anchors everything in navy).
   - Wave dividers replaced by whitespace and thin 1px rules.
   - Headings in Lora at weight 400 (regular), not bold —
     refined rather than assertive.
   - Buttons are thin-bordered and minimal, not graphic.
   - No box-shadows. No decorative gradients.
   - Large, generous typography does the emotional work.

   Brand palette (same colors, different deployment):
     --navy:       #1E3A5C  ← heading text, footer, nav
     --navy-mid:   #26476E  ← hover states
     --slate:      #4E6E96  ← links, eyebrow text, accent lines
     --powder:     #C9D9EA  ← text on navy backgrounds
     --warm-off:   #F8F5F1  ← alternating section backgrounds
     --border:     rgba(30,58,92,0.1) ← all lines/dividers
     --text:       #2B3A4A  ← body copy
     --muted:      #6B7C8E  ← meta, captions, secondary
   ============================================================= */

/* ---- Custom properties ---- */

:root {
  --navy:       #1E3A5C;
  --navy-mid:   #26476E;
  --slate:      #4E6E96;
  --powder:     #C9D9EA;
  --warm-off:   #F8F5F1;
  --border:     rgba(30, 58, 92, 0.1);
  --text:       #2B3A4A;
  --muted:      #6B7C8E;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --section-y: 5rem;
  --header-h:  60px;
}

/* ---- Reset ---- */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Accessibility ---- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--navy);
  color: var(--powder);
  padding: 0.7rem 1.25rem;
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 9999;
}

.skip-link:focus { left: 1rem; }

:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Wave dividers — hidden entirely.
   Section rhythm is created by padding + background alternation. ---- */

.wave { display: none; }

/* ---- Containers ---- */

.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--wide {
  max-width: 1100px;
}

/* ============================================================
   SITE HEADER & NAVIGATION
   White, sticky, thin border — restrained.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-logo {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo-sub {
  display: none;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

/* ---- Hamburger ---- */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--navy);
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Primary nav — mobile: hidden dropdown ---- */

.primary-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem 1.5rem;
  gap: 0;
}

.primary-nav.is-open { display: flex; }

.primary-nav a {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}

/* The CTA is the last child but it needs all four sides. Without the
   :not() here, this rule outranks .primary-nav .nav__cta and strips the
   bottom border off the button. */
.primary-nav a:not(.nav__cta):last-child { border-bottom: none; }

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--navy); }

.primary-nav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 500;
}

.primary-nav .nav__cta {
  margin-top: 1rem;
  text-align: center;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--navy); /* override */
  transition: background 0.2s, color 0.2s;
}

.primary-nav .nav__cta:hover,
.primary-nav .nav__cta:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* ============================================================
   BUTTONS — thin border, minimal
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
}

/* On dark (navy) backgrounds */
.btn--primary {
  border-color: rgba(201, 217, 234, 0.5);
  color: #fff;
  background: transparent;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: rgba(201, 217, 234, 0.12);
  border-color: var(--powder);
}

/* Same weight as primary on dark backgrounds */
.btn--secondary {
  border-color: rgba(201, 217, 234, 0.3);
  color: var(--powder);
  background: transparent;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: rgba(201, 217, 234, 0.08);
  border-color: rgba(201, 217, 234, 0.6);
  color: #fff;
}

/* On light backgrounds */
.btn--outline {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* Form submit */
.btn--submit {
  width: 100%;
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.95rem 2rem;
  letter-spacing: 0.08em;
}

.btn--submit:hover,
.btn--submit:focus-visible {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
}

/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */

/* Small uppercase label above a heading — restrained and classic */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
  margin-bottom: 1rem;
}

.eyebrow--light {
  color: var(--powder);
  opacity: 0.75;
}

/* Section headings: weight 400 for refinement, not 600 */
.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}

.section-heading--light { color: #fff; }
.section-heading--left  { text-align: left; }

/* Intro paragraph under a section heading */
.section-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--text);
  line-height: 1.85;
  max-width: 620px;
  margin: -0.5rem auto 3rem;
  text-align: center;
}

.section-intro--left {
  text-align: left;
  margin-left: 0;
}

.section-intro--light {
  color: var(--powder);
  opacity: 0.9;
}

/* Thin rule used between sections */
.section-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ============================================================
   HOME PAGE — HERO
   Large typographic statement on white. Nothing else needed.
   ============================================================ */

/* The hero used to fill the whole screen and centre a very large headline
   in it, so the first thing anyone saw was one enormous sentence. Jake's
   note: too big, and it delayed getting to anything useful. It is now a
   normal section that ends where it ends. */
.hero {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
}

.hero__inner {
  max-width: 700px;
  margin: 0 auto;
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.75rem;
}

.hero__title {
  font-family: var(--serif);
  /* Same size. Jake asked for it stronger, not bigger, so the weight goes to
     600 and the leading tightens. Lora 600 is already loaded in the font
     request at the top of every page, so this costs nothing extra. */
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -0.012em;
  max-width: 17em;
  margin: 0 auto 1.35rem;
}

.hero__tagline {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  max-width: 34em;
  margin: 0 auto 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Hero buttons on white — override to be on-light-bg style */
.hero .btn--primary {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

.hero .btn--primary:hover,
.hero .btn--primary:focus-visible {
  background: var(--navy);
  color: #fff;
}

.hero .btn--secondary {
  border-color: rgba(30, 58, 92, 0.3);
  color: var(--muted);
  background: transparent;
}

.hero .btn--secondary:hover,
.hero .btn--secondary:focus-visible {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

/* ============================================================
   HOME PAGE — ONE-SCREEN LAYOUT (desktop)
   body.page-home fills exactly 100vh with no scroll.
   ============================================================ */

.page-home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-home main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.home-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Override the standalone hero min-height — the flex layout handles sizing */
.home-screen .hero {
  min-height: 0;
  flex: 1;
  padding: clamp(1.5rem, 6vh, 4rem) 1.5rem;
}

.home-screen__scripture {
  background: var(--navy);
  padding: 1.25rem 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.home-screen__scripture .scripture__text {
  font-size: 0.88rem;
  display: inline;
  margin-bottom: 0;
}

.home-screen__scripture .scripture__ref {
  font-size: 0.65rem;
  display: inline;
  margin-left: 0.6rem;
}

.page-home .footer {
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}

.page-home .footer__name { display: none; }
.page-home .footer__copy { display: none; }

/* Mobile: let the page scroll naturally */
@media (max-width: 639px) {
  .page-home { height: auto; overflow: visible; }
  .home-screen { display: block; }
  .home-screen .hero { padding: 4rem 1.5rem; min-height: auto; }
  .page-home .footer { padding: 2.5rem 1.5rem; }
  .page-home .footer__name { display: block; }
  .page-home .footer__copy { display: block; }
}

/* ============================================================
   HOME PAGE — VISION
   The defining statement. Italic serif, given room to breathe.
   ============================================================ */

.vision {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
  text-align: center;
}

.vision__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  color: var(--navy);
  line-height: 1.9;
  max-width: 660px;
  margin: 0 auto;
}

/* ============================================================
   HOME PAGE — SCRIPTURE VERSE
   A single verse, given full weight. Dark anchor mid-page.
   ============================================================ */

.scripture {
  background: var(--navy);
  padding: 4.5rem 1.5rem;
  text-align: center;
}

.scripture__inner {
  max-width: 600px;
  margin: 0 auto;
}

.scripture__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  color: var(--powder);
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

.scripture__ref {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 217, 234, 0.5);
}

/* ============================================================
   HOME PAGE — HOW I WALK WITH YOU
   Three cards. Thin borders, no shadows.
   ============================================================ */

.how-i-walk {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2rem 1.75rem;
  flex: 1;
}

.card__marker {
  width: 24px;
  height: 1px;
  background: var(--slate);
  margin-bottom: 1.5rem;
}

.card__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.card__body {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.8;
}

/* ============================================================
   HOME PAGE — WHOEVER YOU ARE
   2×2 grid of plain items, separated by hairline borders.
   ============================================================ */

.whoever {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
  text-align: center;
}

/* Grid cells separated by thin shared background lines */
.whoever__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3rem;
  text-align: left;
}

.whoever__item {
  background: var(--warm-off);
  padding: 1.5rem 1.75rem;
}

.whoever__item p {
  font-family: var(--serif);
  font-size: 0.9875rem;
  color: var(--text);
  line-height: 1.65;
}

.whoever__cta { text-align: center; }

/* ============================================================
   HOME PAGE — MY STORY
   Moved from navy to white. The pullquote becomes the anchor.
   ============================================================ */

.my-story {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.story__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/*
  REPLACE: when real photo is ready, swap this for:
  <img src="images/pastor-portrait.jpg" alt="..." class="story__photo">
  The placeholder is a warm neutral — not a colorful gradient.
*/
.story__photo-placeholder {
  width: 100%;
  height: 240px;
  border-radius: 3px;
  background: #E4E0DA;
  flex-shrink: 0;
}

.story__photo {
  width: 100%;
  max-width: 320px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.story__pullquote {
  border-left: 1px solid var(--slate);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin-top: 1.75rem;
}

.story__pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--navy);
  line-height: 1.85;
}

/* ============================================================
   HOME PAGE — MUSIC
   Short, calm. Centered serif on warm off-white.
   ============================================================ */

.music {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
  text-align: center;
}

.music__line {
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* ============================================================
   HOME PAGE — CONTACT
   Clean form on white. Direct contact shown first.
   ============================================================ */

.contact {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.contact .section-heading {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.contact__subtext {
  text-align: left;
  font-size: 0.9375rem;
  color: var(--text);
  max-width: 500px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
}

.contact__direct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

/* Booking calendar, moved onto the contact page 2026-07-29. */
/* ============================================================
   HERO PHOTO AND ITS SLOW DRIFT

   Temporary photograph: cherry blossom in backlight, Tsuyoshi Kozu on
   Unsplash. Replace with a real photo of Jake when there is one.

   The image is bright and mostly white, so a white scrim sits over it and
   the navy text keeps its contrast. Measured over the lightest and darkest
   parts of the photo, body text stays above the WCAG AA threshold.

   The drift is 45 seconds per cycle, a 7% scale with a small pan. Slow
   enough that you notice it only if you sit still. It stops entirely for
   anyone whose system asks for reduced motion, which is not optional on a
   site people visit while grieving.
   ============================================================ */

.hero--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  /* Bleeds past the edges so the scale never reveals a gap. */
  inset: -5%;
  z-index: -2;
  background-image: url("images/hero-blossom.jpg");
  background-size: cover;
  background-position: 60% 45%;
  will-change: transform;
  animation: heroDrift 45s ease-in-out infinite alternate;
}

/* The scrim. Without it the text sits on blown-out white. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.82) 50%,
    rgba(248, 245, 241, 0.92) 100%
  );
}

@keyframes heroDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.5%, -1%, 0); }
}

/* Phones get the 900px file instead of the 2000px one. 67KB against 421KB. */
@media (max-width: 700px) {
  .hero__bg {
    background-image: url("images/hero-blossom-small.jpg");
    /* A landscape photo cropped into a tall phone box lands on the blown-out
       white part of the frame, which the scrim then erases completely. Aiming
       further right and higher catches the lit blossom and the darker
       background behind it, so there is something to see. */
    background-position: 74% 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}

/* ---- Phone number, tucked away but reachable ---- */

.footer__contact {
  margin-top: 0.75rem;
}

.footer__contact a {
  color: var(--powder);
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  /* Two links share this line. Space them so neither is a mis-tap on a
     phone, and let them stack when the screen is narrow. */
  margin: 0 0.9rem;
}

.footer__contact a:hover,
.footer__contact a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.contact__aside {
  max-width: 34em;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  line-height: 1.8;
}

.contact__aside a {
  color: var(--navy);
  font-weight: 500;
  white-space: nowrap;
}

.contact__aside-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---- Home: quiet line under the hero button ---- */

.hero__aside {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* Jake's name, small, at the foot of the hero. He introduces himself here
   rather than in the headline. */
.hero__signature {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__aside a {
  color: var(--navy);
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ---- Three ways in ----

   Sorted by how soon somebody needs help, never by what has happened to
   them. Jake asked for these to carry more weight and be clearer, so they
   are proper cards now rather than thin text under a rule.

   The first one is the short notice route. It is tinted and carries a navy
   edge, because the person reading it is the one with the least time and
   the least patience for hunting. Its button goes to the plan page, not to
   a phone number: Jake asked for the number to stay off this card. */

.doors {
  padding: 4rem 1.5rem 0;
}

.doors__list {
  list-style: none;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.doors__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2rem 1.75rem;
}

.doors__item--now {
  background: var(--warm-off);
  border-color: rgba(30, 58, 92, 0.18);
  border-left: 3px solid var(--navy);
}

.doors__when {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.doors__what {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1.6rem;
}

@media (min-width: 820px) {
  .doors__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .doors__what { flex: 1 0 auto; }
}

/* ---- The short notice plan page ---- */

.short-notice {
  padding: 2rem 1.5rem var(--section-y);
}

.short-notice__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.45;
  color: var(--navy);
  max-width: 20em;
  margin-bottom: 1.5rem;
}

.short-notice__intro {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text);
  max-width: 34em;
  margin-bottom: 3rem;
}

.plan {
  list-style: none;
  max-width: 40em;
  counter-reset: plan;
}

.plan__step {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}

.plan__step:last-child { border-bottom: 1px solid var(--border); }

.plan__num {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--warm-off);
  border: 1px solid var(--border);
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.plan__step p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
}

.short-notice__cta {
  margin-top: 3.5rem;
  max-width: 34em;
}

.short-notice__cta p {
  font-size: 1.0625rem;
  line-height: 1.85;
  margin-bottom: 1.5rem;
  color: var(--text);
}

/* ---- Who comes with me ---- */

.lineups {
  padding: var(--section-y) 1.5rem 0;
}

.lineups__inner {
  max-width: 36em;
}

.lineups__inner p {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 1.2rem;
}

.lineups__inner p:last-child { margin-bottom: 0; }

.section-heading--left {
  text-align: left;
}

/* ---- What a service costs ---- */

.cost-note {
  max-width: 34em;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}

/* ---- Home: meeting Jake ----

   Jake on the first version: "it's not welcoming at all, the type looks bad
   and small."

   What was wrong: a 300px photo against a much wider column of 16px text,
   with a lead line barely larger than the paragraphs and a hard rule cutting
   the link off from everything above it. It read as a document.

   Fixed by giving it room. Bigger photograph, larger and warmer type, a lead
   line that actually leads, the two columns centred against each other so
   there is no dead space under the text, and the link left attached to the
   paragraph it follows. */

.intro-photo {
  background: #fff;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--border);
}

.intro-photo__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.intro-photo__img {
  width: 100%;
  max-width: 400px;
  border-radius: 3px;
  object-fit: cover;
  align-self: center;
}

.intro-photo__text p {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 1.35rem;
  max-width: 32em;
}

.intro-photo__text p:last-child {
  margin-bottom: 0;
}

/* The first line is where somebody meets Jake. It should carry.
   Selector has to out-score '.intro-photo__text p' above, or the
   paragraph rule wins and the lead renders at body size. */
.intro-photo__text p.intro-photo__lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 1.75rem;
  max-width: 18em;
}

/* The line Jake asked to have highlighted. Given its own weight with the
   serif and a rule above it, rather than a colour block, which would shout
   on a page like this. */
.intro-photo__text p.intro-photo__promise {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.55;
  color: var(--navy);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  max-width: 22em;
}

.intro-photo__more {
  margin-top: 2rem;
}

.intro-photo__more a {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
  display: inline-block;
  min-height: 44px;
  line-height: 2;
  transition: color 0.15s, border-color 0.15s;
}

.intro-photo__more a:hover,
.intro-photo__more a:focus-visible {
  color: var(--navy);
  border-bottom-color: var(--slate);
}

@media (min-width: 820px) {
  .intro-photo__inner {
    flex-direction: row;
    align-items: center;
    gap: 4.5rem;
  }

  .intro-photo__img {
    max-width: 380px;
    flex-shrink: 0;
    align-self: center;
  }
}

/* The About page photograph. The placeholder it replaced was a fixed 240px
   box, which would have squashed a portrait photo. */
.story__figure {
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
  align-self: center;
}

.story__figure .story__photo {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 760px) {
  .story__figure {
    max-width: 300px;
    align-self: flex-start;
  }
}

/* ---- Who plays ---- */

.person {
  padding: 0 1.5rem;
}

.person__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.person__photo {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 3px;
  display: block;
}

.person__name {
  font-family: var(--serif);
  margin-bottom: 1.5rem;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
}


.person__text p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.1rem;
}

.person__text p:last-child { margin-bottom: 0; }

@media (min-width: 760px) {
  .person__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 3.5rem;
  }
  .person__photo { max-width: 280px; flex-shrink: 0; }
}

.others,
.cost {
  padding: var(--section-y) 1.5rem 0;
}

.cost {
  padding-bottom: var(--section-y);
}

.others__inner {
  max-width: 34em;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.others__heading {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.others__inner p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  /* Was missing, so two paragraphs ran into each other as one block. */
  margin-bottom: 1.2rem;
}

.others__inner p:last-of-type { margin-bottom: 0; }

.cost__cta { margin-top: 1.75rem; }

/* ---- Home: what this is ---- */

.what {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
  border-top: 1px solid var(--border);
}

.what__body {
  max-width: 36em;
  margin: 2.5rem auto 0;
}

.what__body p {
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.what__body p:last-child { margin-bottom: 0; }

.what__body p.what__lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: 1.75rem;
}

/* ---- Home: what Jake handles (old six point list, now unused) ---- */

.handles {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
  border-top: 1px solid var(--border);
}

.handles__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-top: 2.5rem;
  text-align: left;
}

@media (min-width: 720px) {
  .handles__list {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }
}

.handles__item-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.handles__item p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
}

.handles__note {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
}

/* ---- Home: closing block ---- */

.emergency-phone__lead {
  font-size: 1.05rem;
  color: var(--powder);
  max-width: 32em;
  margin: 0.75rem auto 0;
}

.emergency-phone__actions {
  margin: 2rem 0 1.75rem;
}

/* The number used to be 38px here. Jake asked for it tucked away. */
.emergency-phone__sub a {
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ---- The song list ----
   Thirty songs with a paragraph each was a wall of text. Jake's note: too
   much information for someone who is grieving. A family scanning for a song
   they recognise needs the name, who wrote it, and the feel. Nothing else. */

.song-list {
  list-style: none;
  max-width: 620px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .song-list {
    max-width: 100%;
    columns: 2;
    column-gap: 3.5rem;
  }
}

.song-row {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}

.song-row__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.35;
}

.song-row__meta {
  display: block;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Interior pages: the heading and the content under it belong together. */
.page-hero + section,
.page-hero + .wave + section {
  padding-top: 2.75rem;
}

.page-hero + section .section-heading:first-child,
.page-hero + .wave + section .resource-category-heading:first-child {
  margin-top: 0;
}

.music-intro {
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 2.25rem;
}

/* ---- Song categories on the music page ---- */

/* Left aligned to sit under the page heading, not floating in the middle
   of the page away from it. */
.song-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

.song-filter__btn {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 1.5rem;
  min-height: 46px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.song-filter__btn:hover {
  color: var(--navy);
  border-color: var(--slate);
}

.song-filter__btn.is-active {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.song-filter__note {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  min-height: 1.5em;
  margin-bottom: 1.5rem;
}

/* The team grid holds one card now that Mike and the two unnamed string
   cards are gone. Keep it from stretching across the whole page. */
.team-grid--single {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.booking-block {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.booking-block__heading {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--navy);
  text-align: center;
  margin-bottom: 0.5rem;
}

.booking-block__intro {
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  max-width: 32em;
  margin: 0 auto;
}

/* Temporary, while the contact form has no destination.
   Remove once the GoHighLevel form is embedded and tested. */
.contact__fallback {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--warm-off);
  text-align: center;
  line-height: 1.8;
}

.contact__fallback a {
  color: var(--navy);
  font-weight: 500;
  white-space: nowrap;
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy);
  text-decoration: none;
  padding: 0.35rem 0;
}

.contact__link:hover,
.contact__link:focus-visible {
  color: var(--slate);
  text-decoration: underline;
}

.contact__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

.contact__form {
  max-width: 540px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2.25rem 1.75rem;
}

.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--warm-off);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--slate);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(78, 110, 150, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #a0aab4;
  font-style: italic;
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.7;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.35rem;
  font-style: italic;
}

.form-feedback {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.4rem;
}

.form-feedback--success { color: #2a6b3a; }
.form-feedback--error   { color: #8b2000; }

/* ============================================================
   INNER PAGE HERO
   Compact dark header — keeps identity without overpowering.
   ============================================================ */

/* Interior page headings.

   History: a full-width navy banner with the page name centred at 56px, then
   a 30px serif heading floating on the left with a gap under it. Jake on the
   second version: "those headings just don't look good, make it all cohesive
   with the website."

   The site already has a language for small labels: uppercase, letterspaced,
   muted, used for every eyebrow on every page. The page name now uses that
   same language, sitting on a rule directly above the content it belongs to.
   It orients you and then gets out of the way, and it matches everything
   else rather than competing with it. */
.page-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 0;
}


.page-hero__title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}


/* ============================================================
   SONGS PAGE
   Editorial list style — each song as a self-contained entry.
   ============================================================ */

.songs-section {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.song-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.song-card {
  border-top: 1px solid var(--border);
  padding: 2.25rem 0;
  background: transparent;
}

.song-grid .song-card:last-child {
  border-bottom: 1px solid var(--border);
}

.song-card__title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.3rem;
  line-height: 1.2;
}

.song-card__meta {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.song-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.song-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.2rem 0.6rem;
  border-radius: 1px;
}

.song-card__body {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.8;
  max-width: 640px;
}

.songs-note {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

/* Jake wanted this line bigger. It is the most useful sentence on the page:
   the song list is a starting point, not a menu. */
.songs-note--large {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-style: normal;
  color: var(--navy);
  line-height: 1.5;
  max-width: 20em;
  margin-left: auto;
  margin-right: auto;
}

.songs-note--large a {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--slate);
  font-weight: 500;
  min-height: 44px;
  line-height: 44px;
}

/* ============================================================
   TEAM PAGE
   Member cards: thin-bordered, photo left on desktop.
   ============================================================ */

.team-intro-section {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.member-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Warm neutral placeholder — not a colorful gradient */
.member-card__photo-placeholder {
  width: 100%;
  height: 200px;
  background: #E4E0DA;
  flex-shrink: 0;
}

.member-card__photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  /* 30% down keeps his face in frame. Top alignment cropped it at the chin. */
  object-position: center 30%;
  display: block;
}

.member-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-card__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.member-card__role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.member-card__bio {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  flex: 1;
}

.member-card__testimony {
  border-left: 1px solid var(--slate);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin-top: auto;
}

.member-card__testimony p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--navy);
  line-height: 1.7;
}

/* Dark band with team collective quote */
.team-testimony-band {
  background: var(--navy);
  padding: 5rem 1.5rem;
  text-align: center;
}

.team-testimony-band__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  color: var(--powder);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.9;
}

/* ============================================================
   RESOURCES PAGE
   ============================================================ */

.resources-section {
  padding: var(--section-y) 1.5rem;
}

.resources-section--light { background: #fff; }
.resources-section--warm  { background: var(--warm-off); }

.resource-category-heading {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.resource-category-heading--light {
  color: var(--powder);
  border-bottom-color: rgba(201, 217, 234, 0.2);
}

.resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.resource-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem;
  background: #fff;
}

.resource-card--crisis {
  border-left: 3px solid #8b2000;
}

.resource-card__name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.resource-card__type {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.resource-card__desc {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 0.85rem;
}

.resource-card__contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.resource-card__contact a {
  font-size: 0.875rem;
  color: var(--slate);
  text-decoration: none;
}

.resource-card__contact a:hover { text-decoration: underline; }

.resource-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--slate);
  color: var(--slate);
  padding: 0.2rem 0.5rem;
  border-radius: 1px;
  margin-bottom: 0.75rem;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-section {
  padding: var(--section-y) 1.5rem;
}

.about-section--light { background: #fff; }
.about-section--warm  { background: var(--warm-off); }

.about__layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/* Warm neutral placeholder */
.about__photo-placeholder {
  width: 100%;
  height: 260px;
  border-radius: 3px;
  background: #E4E0DA;
  flex-shrink: 0;
}

.about__photo {
  width: 100%;
  max-width: 340px;
  border-radius: 3px;
  object-fit: cover;
}

.about__body p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.about__body p:last-child { margin-bottom: 0; }

.about__stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 auto;
  justify-content: center;
}

.about__stat {
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.about__stat-number {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}

.about__stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ============================================================
   REVIEWS PAGE
   ============================================================ */

.reviews-section {
  padding: var(--section-y) 1.5rem;
}

.reviews-section--light { background: #fff; }
.reviews-section--warm  { background: var(--warm-off); }

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.review-card {
  border-top: 1px solid var(--border);
  padding: 2.75rem 0;
  background: transparent;
}

.reviews-grid .review-card:last-child {
  border-bottom: 1px solid var(--border);
}

/* Large decorative opening quote */
.review-card__open-quote {
  font-family: var(--serif);
  font-size: 3.5rem;
  color: var(--border);
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
  color: rgba(78, 110, 150, 0.2);
  user-select: none;
}

.review-card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  max-width: 680px;
}

.review-card__attribution {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.review-card__relation {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.reviews-placeholder-note {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2.5rem 2rem;
  max-width: 540px;
  margin: 3rem auto 0;
  text-align: center;
}

.reviews-placeholder-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
}

/* ============================================================
   FOOTER — stays dark, anchors the page
   ============================================================ */

.footer {
  background: var(--navy);
  text-align: center;
  padding: 3rem 1.5rem 3.5rem;
  color: var(--powder);
}

.footer__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 0.5rem;
}

.footer__area {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0.65;
  line-height: 1.8;
}

.footer__copy {
  font-size: 0.72rem;
  opacity: 0.35;
  margin-top: 1.5rem;
}

/* ============================================================
   RESPONSIVE — tablet (≥ 640px)
   ============================================================ */

@media (min-width: 640px) {
  :root { --section-y: 6rem; }

  .logo-sub { display: block; }

  .hero { padding: 8rem 2rem 7rem; }

  .cards { flex-direction: row; }

  .whoever__grid { grid-template-columns: 1fr 1fr; }

  .contact__direct {
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
  }

  .contact__form { padding: 2.5rem 2rem; }

  .song-grid { grid-template-columns: 1fr 1fr; gap: 0 3rem; }

  /* Side-by-side border approach for 2-col song grid */
  .song-grid .song-card { border-top: 1px solid var(--border); }
  .song-grid .song-card:nth-child(1),
  .song-grid .song-card:nth-child(2) { border-top: 1px solid var(--border); }

  .team-grid { grid-template-columns: 1fr 1fr; }

  .resource-grid { grid-template-columns: 1fr 1fr; }

  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 0 3rem; }

  .story__photo-placeholder {
    max-width: 260px;
    height: 320px;
    align-self: flex-start;
  }

  .about__photo-placeholder {
    max-width: 280px;
    height: 340px;
  }
}

/* ============================================================
   RESPONSIVE — desktop (≥ 900px)
   ============================================================ */

@media (min-width: 900px) {
  :root { --section-y: 7rem; }

  /* Nav inline on desktop */
  .nav-toggle { display: none; }

  .primary-nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    align-items: center;
    gap: 0;
  }

  .primary-nav a {
    padding: 0.35rem 0.7rem;
    border-bottom: none;
    border-bottom: 2px solid transparent;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible {
    border-bottom-color: var(--slate);
  }

  .primary-nav a[aria-current="page"] {
    border-bottom-color: var(--slate);
    font-weight: 400;
  }

  .primary-nav .nav__cta {
    margin-left: 1rem;
    margin-top: 0;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--navy);
  }

  .primary-nav .nav__cta:hover {
    border-bottom-color: var(--navy);
  }

  /* Story: image left, text right */
  .story__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .story__photo-placeholder {
    width: 280px;
    height: 360px;
    max-width: none;
  }

  .story__photo {
    width: 280px;
    height: 360px;
  }

  /* About: image left, text right */
  .about__layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .about__photo-placeholder {
    width: 300px;
    height: 380px;
    max-width: none;
  }

  .team-grid { grid-template-columns: repeat(4, 1fr); }

  .resource-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .site-header, .hero__actions, .whoever__cta,
  .contact__form, .skip-link, .nav-toggle, .wave { display: none; }

  body { color: #000; background: #fff; font-size: 12pt; }
  .hero, .page-hero, .scripture, .team-testimony-band { background: none; color: #000; }
  .hero__title, .page-hero__title, .scripture__text { color: #000; }
  a[href^="tel"], a[href^="mailto"] { text-decoration: underline; color: #000; }
}

/* ============================================================
   HOME — TWO PATHS
   ============================================================ */

.two-paths {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.two-paths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}

.path-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2.5rem 2rem;
  background: #fff;
  /* The three cards hold different amounts of text. Column layout with the
     body growing pushes every button to the same line. */
  display: flex;
  flex-direction: column;
}

.path-card__body {
  flex: 1 0 auto;
}

.path-card .btn {
  align-self: flex-start;
}

.path-card--immediate {
  background: var(--warm-off);
}

.path-card__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.85rem;
}

.path-card__heading {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.85rem;
  line-height: 1.25;
}

.path-card__body {
  /* was 0.9375rem (15px). Body copy should not go under 16px. */
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 1.75rem;
}

/* ============================================================
   HOME — AVAILABILITY / BOOKING WIDGET
   ============================================================ */

.availability {
  background: var(--warm-off);
  padding: var(--section-y) 1.5rem;
}

.booking-wrap {
  max-width: 960px;
  margin: 2.5rem auto 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}

.availability__note {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 1.5rem;
}

/* ============================================================
   HOME — EMERGENCY PHONE
   ============================================================ */

.emergency-phone {
  background: var(--navy);
  padding: 4.5rem 1.5rem;
  text-align: center;
}

.emergency-phone__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--powder);
  opacity: 0.65;
  margin-bottom: 1.25rem;
}

.emergency-phone__number {
  font-family: var(--serif);
  /* was clamp(2.4rem, 8vw, 4.5rem), 72px on desktop and dominating the page */
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  min-height: 44px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  display: block;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 1rem;
  transition: color 0.15s;
}

.emergency-phone__number:hover,
.emergency-phone__number:focus-visible {
  color: var(--powder);
}

.emergency-phone__sub {
  font-family: var(--serif);
  font-style: italic;
  /* was clamp(0.9rem, ...), 14.4px on a phone */
  font-size: clamp(1rem, 2vw, 1.05rem);
  color: var(--powder);
  opacity: 0.75;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.75;
}

.response-badge {
  display: inline-block;
  margin-top: 1.75rem;
  border: 1px solid rgba(201, 217, 234, 0.35);
  color: var(--powder);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 2px;
  opacity: 0.8;
}

/* ============================================================
   HOME — FREE CONSULT STRIP
   ============================================================ */

.free-consult {
  background: #fff;
  padding: var(--section-y) 1.5rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

.free-consult__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ============================================================
   TEAM — PRICING CARDS
   ============================================================ */

.pricing-section {
  background: #fff;
  padding: var(--section-y) 1.5rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.pricing-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2rem 1.75rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.pricing-card--featured {
  border-color: var(--slate);
  background: var(--warm-off);
}

.pricing-card__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}

.pricing-card__lineup {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.pricing-card__desc {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.75rem;
}

.pricing-card__price {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}

.pricing-card__price-note {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.pricing-travel-note {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--muted);
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ============================================================
   MUSIC PAGE — AUDIO PLAYERS
   ============================================================ */

.audio-coming {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.35rem 0.8rem;
  margin-top: 1rem;
  cursor: default;
  user-select: none;
}

.audio-player {
  margin-top: 1rem;
}

.audio-player audio {
  width: 100%;
  max-width: 380px;
  height: 36px;
  accent-color: var(--slate);
}

/* ============================================================
   ABOUT PAGE — STORY BODY TEXT
   ============================================================ */

.story__body p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.9;
  margin-bottom: 1.4rem;
}

.story__body p:last-child { margin-bottom: 0; }

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */

@media (min-width: 640px) {
  .two-paths__grid     { grid-template-columns: 1fr 1fr; }
  /* Three ways people arrive: planning their own, someone just died, or
     planning for someone they have lost. Two across at tablet width so the
     cards keep a readable measure. */
  .two-paths__grid--three { grid-template-columns: 1fr 1fr; }
  .pricing-grid        { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .pricing-grid        { grid-template-columns: repeat(2, 1fr); }
  .two-paths__grid--three { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
}

@media (min-width: 900px) {
  /* Three narrower cards need less inner padding than two wide ones. */
  .two-paths__grid--three .path-card { padding: 2rem 1.5rem; }
}