/* Homepage bands — the sections unique to home/index.html.
   Shell pieces (header, nav, buttons, footer, page hero, shared lists) live in
   shell.css. Interior page bands live in interior.css.

   Light system (owner direction 2026-10-06): the homepage runs on the same
   light surfaces as the Work With Me page — white chrome, white and pale
   bands, ink type, one blue accent. The bands that used to open on navy (hero,
   philosophy, closing) now carry a light wash instead of a dark scrim, so no
   dark full-width section remains.

   The copy and section order are the approved mock home:
     hero -> who I help -> philosophy -> why -> closing.
   The mock's results band is intentionally omitted: its three quotes are
   unverified, so the band is not published rather than carried as invented
   testimonials. The .results rules are kept below for the day verified quotes
   exist. */

/* ---------- Hero ----------
   The portrait zone and the band height live in homepage-hero-light.css; this
   file owns the band surface and the type. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--wm-ink);
}

.hero-copy { max-width: 640px; }
.hero .eyebrow { margin-bottom: var(--sp-4); color: var(--wm-gray); }

.hero h1 {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--wm-ink);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-sans);
}

.hero h1 span { color: var(--wm-blue); }

.hero-description {
  max-width: 44ch;
  margin: var(--sp-5) 0 var(--sp-5);
  color: #1b2233;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* ---------- Who I help ---------- */

.help { padding: var(--band) 0; background: var(--white); }

.help-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.55fr);
  align-items: end;
  gap: clamp(var(--sp-5), 4.5vw, var(--sp-8));
  padding-bottom: var(--sp-4);
}

.help h2,
.results h2 {
  margin: var(--sp-4) 0 0;
  color: var(--wm-ink);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.help h2 span { color: var(--wm-blue); }

.help-intro {
  max-width: 46ch;
  margin: 0 0 var(--sp-1);
  color: var(--wm-gray);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}

.audience-card {
  position: relative;
  /* aspect-ratio pairs with a min-height, so the card needs a definite width
     or the ratio transfers the floor height into a width of its own. */
  width: 100%;
  min-width: 0;
  min-height: 176px;
  aspect-ratio: 2.25;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--wm-navy);
}

/* Photograph card: the caption is light on a bottom gradient. Not a dark
   section, just the surface a photo caption needs. */
.audience-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, oklch(0.13 0.05 255 / 0.8), transparent 62%);
  content: "";
}

.audience-card img {
  width: 100%;
  height: 100%;
  min-height: 176px;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.96) contrast(1.02);
}

.audience-card figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 14px;
  left: 18px;
  color: var(--white);
}

.audience-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
}

.audience-card span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---------- Philosophy ---------- */

.philosophy {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--wm-ink);
}

/* The photograph and its wash are layers behind the copy, not blocks above it.
   Both are sized to the band's centered content column (.shell) instead of the
   full viewport, so the image never runs wider than the copy it sits behind:
   same width, same centering, at every breakpoint. */
.philosophy-media,
.philosophy-scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

.philosophy-media { overflow: hidden; }

.philosophy-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.96) contrast(1.02);
}

/* Light wash: a strong white film keeps the photograph as a soft texture and
   holds ink type well clear of AA. */
.philosophy-scrim {
  z-index: 1;
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.96) 0%, oklch(1 0 0 / 0.92) 38%, oklch(1 0 0 / 0.88) 70%, oklch(1 0 0 / 0.9) 100%),
    linear-gradient(0deg, oklch(1 0 0 / 0.4), transparent 62%);
}

.philosophy-shell {
  display: grid;
  min-height: 356px;
  grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.42fr);
  align-items: center;
  gap: clamp(36px, 8vw, 128px);
}

.philosophy-copy { max-width: 505px; }

.philosophy h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.philosophy h2 span { color: var(--wm-blue); }

.philosophy-copy > p:not(.eyebrow) {
  max-width: 46ch;
  margin: var(--sp-5) 0 var(--sp-5);
  color: var(--wm-gray);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.philosophy-footer {
  padding-bottom: var(--sp-4);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Why work with me ---------- */

.why { padding: var(--band) 0; background: var(--white); }

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: stretch;
}

.why-media {
  min-height: 345px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-muted);
}

.why-media img {
  width: 100%;
  height: 100%;
  min-height: 345px;
  object-fit: cover;
  object-position: 62% 26%;
  filter: saturate(0.94) contrast(1.02);
}

.why-copy { padding: 0; }

.why-heading { align-self: start; }

.why h2 {
  max-width: 12ch;
  margin: var(--sp-4) 0 var(--sp-5);
  color: var(--wm-ink);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.why h2 span { color: var(--wm-blue); }

/* ---------- Closing CTA ---------- */

main > .final-cta { min-height: 360px; }

main > .final-cta .final-shell {
  min-height: 360px;
  align-items: center;
}

main > .final-cta .final-copy { max-width: 680px; }
main > .final-cta .final-description { max-width: 48ch; }

/* The closing sunset is a layer behind the copy, so it takes the same centered
   content column as the text instead of bleeding to the viewport edges. */
body.home-light .final-media,
body.home-light .final-scrim {
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

body.home-light .final-media { overflow: hidden; border-radius: 16px; }
body.home-light .final-scrim { border-radius: 16px; }

/* ---------- Results (retained for verified quotes; not used today) ---------- */

.results { padding: var(--band) 0; background: var(--paper-muted); }

.results-heading { display: block; }
.results-heading h2 { margin: var(--sp-4) 0 0; }
.results h2 span { color: var(--wm-blue); }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: var(--sp-5);
}

.quote-card {
  min-height: 0;
  padding: var(--sp-5);
  border-radius: 16px;
  background: var(--white);
}

.quote-card blockquote {
  max-width: 40ch;
  margin: 0;
  color: var(--wm-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.quote-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: var(--sp-4);
}

.quote-card cite {
  color: var(--wm-gray);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-style: normal;
  letter-spacing: 0.07em;
}

.stars {
  color: var(--wm-blue);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ---------- Homepage responsive ---------- */

@media (max-width: 780px) {
  .help { padding: var(--band) 0; }
  .help-heading { grid-template-columns: 1fr; gap: var(--sp-5); }
  .audience-grid { grid-template-columns: 1fr; gap: 8px; }
  .audience-card { min-height: 160px; aspect-ratio: 2.1; }
  .audience-card img { min-height: 100%; }

  /* The philosophy photograph becomes a block on top and the copy sits on the
     light band below it. */
  .philosophy { min-height: 0; padding-bottom: var(--sp-8); }
  .philosophy-media {
    top: 0;
    bottom: auto;
    height: clamp(168px, 36vw, 248px);
    border-radius: 16px;
  }
  .philosophy-media img { object-position: 50% 48%; }
  .philosophy-scrim {
    top: 0;
    bottom: auto;
    height: clamp(168px, 36vw, 248px);
    border-radius: 16px;
    background: linear-gradient(
      180deg,
      oklch(1 0 0 / 0.05) 0%,
      oklch(1 0 0 / 0.4) 58%,
      var(--paper) 100%
    );
  }
  .philosophy-shell {
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--sp-5);
    padding-top: calc(clamp(168px, 36vw, 248px) + var(--sp-5));
  }
  .philosophy h2 { max-width: 600px; }
  .philosophy-footer { position: static; padding: var(--sp-4) 0 0; }

  .why { padding: var(--band) 0; }
  .why-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .why h2 { max-width: 16ch; }
  .why-media, .why-media img { min-height: 330px; }
  .why-copy { padding: 0 0 var(--sp-5); }

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

  main > .final-cta,
  main > .final-cta .final-shell { min-height: 0; }
  main > .final-cta .final-shell { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}

@media (max-width: 480px) {
  .help h2, .results h2 { font-size: clamp(40px, 13vw, 58px); }
  .philosophy h2 { font-size: clamp(40px, 13vw, 58px); }
  .why h2 { font-size: clamp(36px, 12vw, 54px); }
}