/* ==========================================================================
   STILLMIND MENTAL HEALTH · THE PAPER BANDS

   Who we help and Services: the two short paper sections that run
   between the dark booking path and the dark footer.

   They share a file because they share one problem. Each is about half a
   screen tall, and half a screen is not enough distance for a layered
   parallax scene to read as depth. The hero gets a full screen and the
   booking path gets 2.2, which is why both can carry real travel. These
   cannot, so they do not pretend to: they carry one still landscape
   between them instead.

   WHY THEY PAINT THEIR OWN PAPER
   The atmosphere layer is fixed at z-index 0 and these sit above it, so
   a transparent section would let the drifting colour fields show
   through. That looks good and it breaks something measured: the
   booking path's bottom gradient resolves to exactly --c-paper, and if
   what follows is paper plus a soft tint, the seam returns as a faint
   step. The tint varies with scroll, so it could not even be matched.
   Flat paper here keeps that boundary at the 3 of 255 it was measured
   at. The atmosphere does its work on the inner pages, which do no seam
   work at all.
   ========================================================================== */

/* ====================================================================
   UNIFIED PANORAMA PLATE ACROSS ALL MIDDLE SECTIONS
   One serene misty dawn woodland landscape flowing continuously across
   Who we help, Services, Starting care, and FAQ.
   ==================================================================== */

.home-bands {
  position: relative;
  z-index: var(--z-raised);
  background: var(--c-paper);
  margin-top: calc(var(--seam-lift) * -1);
  border-radius: var(--seam-radius) var(--seam-radius) 0 0;
  box-shadow: 0 -12px 36px rgba(15, 35, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
  isolation: isolate;
}

.home-bands::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/band/home-panorama.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 92%, transparent 100%);
}

.home-bands > .band,
.home-bands > .services,
.home-bands > .home-provider,
.home-bands > .steps-section,
.home-bands > .home-faq,
.home-bands > .home-local-seo {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Balanced, serene vertical rhythm across middle sections */
.home-bands > .band--who {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-bands > .services {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-bands > .home-provider,
.home-provider {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-bands > .steps-section {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.home-bands > .home-faq {
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.home-bands > .home-local-seo,
.home-local-seo {
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--seam-lift) + 1.5rem);
}

.band,
.services {
  position: relative;
  z-index: var(--z-raised);
  isolation: isolate;
  background: var(--c-paper);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.home-bands .band--who {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.home-bands .band--who::before,
.home-bands .services::before {
  display: none;
}

/* CLOSING THE PAPER RUN: NOT HERE ANY MORE, AND NOT ANYWHERE

   .services::after used to fade this section into --c-ink so the footer
   could start from that colour. Two problems, one of which was known.

   The known one is in the note this replaces: the rule had to live on
   whichever section happened to be last in the paper run, so it had
   already been moved once, from .band--experience, and no gate could
   catch forgetting to move it again.

   The unknown one is that it had two copies elsewhere doing the same
   job for the inner pages, .page-cta::after and .svc-close::after,
   word for word. Three rules, one boundary, and the same grey ramp the
   hero had.

   All three are deleted. The footer lifts over whatever is above it
   instead, from one rule in footer.css, which is correct on all 21
   pages and cannot be left behind when a section order changes.
   -------------------------------------------------------------------- */

/* The plate is a ::before at z-index 0, so the copy has to sit above it. */
.band > .container,
.services > .container {
  position: relative;
  z-index: 2;
}

/* ====================================================================
   THE PLATE

   One landscape cut in two, top half behind Who we help and bottom half
   behind Services, so the run reads as a single place rather than as two
   sections that each happen to have a picture. See tools/build-bands.sh
   for the cut and why this source.

   It does not move. See the note on the rule below for why: movement
   and continuity turned out to be mutually exclusive here, and the
   continuity is the point. No JavaScript, no scroll listener, no view
   timeline: two background images and a mask.
   ==================================================================== */

.band--who::before,
.services::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;

  /* THIS PLATE DOES NOT MOVE, AND THAT IS THE DECISION.
     The plan called for a few percent of drift. It cannot have both that
     and a continuous landscape, and continuity is the thing that was
     actually asked for.
     The two halves only read as one place while the section boundary
     falls on the same row of the source on both sides of it. Anything
     that shifts a half inside its own box moves that row: scaling about
     the centre pulled the halves apart by 22 of 255, and overscanning
     the boxes by 4% pushed them apart by the same amount in the opposite
     direction. Both were measured, both were visible as a rule straight
     across the page, and neither is worth four percent of movement on a
     section half a screen tall.
     The hero and the booking path are where this site does depth. They
     have the distance for it. This is a ground. */

  /* A ground, not a subject, and the number is arithmetic rather than
     taste.

     The source has a dark forested ridge in it. At 0.5 that ridge
     composited to rgb(127,130,122) behind body copy, and --c-text needs
     about 137 of grey to hold 4.5:1. Nine runs failed at 0.5, all of
     them where the ridge happened to fall, and none of them visible to
     the contrast sweep: it rebuilds a backdrop from ancestor background
     COLOURS and a ::before carrying an IMAGE is not one. That is the
     same blind spot that let the hero's AGES label ship at 4.24.

     Paper is 250. The darkest pixel of the plate is about 4. So the
     composite is 250 - 246a, and a = 0.34 puts the worst case at 166,
     which clears 4.5:1 with room for the crop to move. */
  opacity: 0.34;
}

.band--who::before {
  background-image: var(--band-top);
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
}

.services::before {
  background-image: var(--band-bottom);
  background-position: center top;
  /* Fades out before the closing gradient into ink starts, so the two
     never fight over the same pixels. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
}

/* Per-device cuts. These differ in CROP, not only in size, which is why
   they are separate files picked by media query rather than a srcset. */
:root {
  --band-top:    url("../img/band/top-phone.jpg");
  --band-bottom: url("../img/band/bottom-phone.jpg");
}

@media (min-width: 600px) {
  :root {
    --band-top:    url("../img/band/top-tablet.jpg");
    --band-bottom: url("../img/band/bottom-tablet.jpg");
  }
}

@media (min-width: 900px) {
  :root {
    --band-top:    url("../img/band/top-desktop.jpg");
    --band-bottom: url("../img/band/bottom-desktop.jpg");
  }
}

@supports (background-image: image-set(url("../img/band/top-phone.avif") type("image/avif"))) {
  :root {
    --band-top:    image-set(url("../img/band/top-phone.avif") type("image/avif"));
    --band-bottom: image-set(url("../img/band/bottom-phone.avif") type("image/avif"));
  }
  @media (min-width: 600px) {
    :root {
      --band-top:    image-set(url("../img/band/top-tablet.avif") type("image/avif"));
      --band-bottom: image-set(url("../img/band/bottom-tablet.avif") type("image/avif"));
    }
  }
  @media (min-width: 900px) {
    :root {
      --band-top:    image-set(url("../img/band/top-desktop.avif") type("image/avif"));
      --band-bottom: image-set(url("../img/band/bottom-desktop.avif") type("image/avif"));
    }
  }
}

/* --------------------------------------------------------------------
   Who we help

   Named conditions, as plain labels rather than cards or icons. An icon
   beside "Psychotic disorders" would be decoration standing in for
   information, and there is no honest pictogram for most of this list.
   -------------------------------------------------------------------- */

/* .section-head ships a 64px margin below it, which is the gap between a
   chapter heading and its body. These two sections are half a screen
   each, so at 64px the heading floated away from the thing it labels and
   the section read as mostly gap. 32px keeps them related. */
/* .section-head ships a 64px margin below it, which is the gap between a
   chapter heading and its body. These sections are half a screen each,
   so at 64px the heading floated away from the thing it labels. */
.band .section-head,
.services .section-head,
.steps-section .section-head {
  margin-bottom: var(--s-3);
  gap: var(--s-2);
}

.steps-section .steps-grid {
  margin-top: 0;
}

.band__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Narrower than they were. Seven of these wrapped to four rows on a
   phone and 199px is a lot of page to name seven conditions; trimming
   the horizontal padding fits them into three. */
.band__tags li {
  padding: 0.375rem var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline);
  font-size: var(--t-sm);
  color: var(--c-text-2);
}

.band__note {
  margin: var(--s-3) 0 0;
  max-width: var(--measure);
  /* Primary ink, not --c-text-2. Two reasons that point the same way.
     It is the sentence that actually answers "is this for me", so it is
     not secondary content. And it sits directly above the join, which is
     the one place the plate has to stay at full strength for the two
     halves to meet, so it is the most demanding spot on the band:
     measured at 3.74:1 in --c-text-2 and 7.2:1 in --c-text. */
  color: var(--c-text);
}

.band__note .link { white-space: nowrap; }

/* Links on the bands take the forest token, not the brand green.

   --c-brand is tuned against flat paper, where it measures about 7:1.
   Over the plate it was the weakest run on either band, and the band is
   the one place it cannot be made lighter underneath, because the plate
   has to stay at full strength at the bottom of Who we help for the two
   halves to meet.

   The alternative was dimming the photograph, and that was measured
   rather than argued: 0.34 gives 4.51:1, 0.30 gives 4.88, 0.26 gives
   5.31. Buying 0.8 of contrast by throwing away a quarter of the picture
   is a bad trade when the body text beside it already sits at 7.8:1 on
   the same pixels. The colour was the problem, not the ground.

   These links are underlined at rest, so the darker green costs nothing
   in how obviously they read as links. */
.band .link,
.services .link { color: var(--c-forest); }

/* --------------------------------------------------------------------
   The practice
   -------------------------------------------------------------------- */

.band__prose {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.band__prose h2 { margin: 0; }
.band__prose p { margin: 0; color: var(--c-text-2); }

/* --------------------------------------------------------------------
   Meet Your Provider (Homepage Card)
   -------------------------------------------------------------------- */

.home-provider__card {
  display: grid;
  gap: var(--s-4);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
  box-shadow: var(--e-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .home-provider__card {
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: var(--s-5) var(--s-6);
    align-items: center;
  }
}

.home-provider__photo {
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(15, 35, 31, 0.08);
}

@media (min-width: 768px) {
  .home-provider__photo {
    max-width: none;
    margin-inline: 0;
  }
}

.home-provider__content {
  display: flex;
  flex-direction: column;
}

.home-provider__content h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: var(--s-1) 0;
  line-height: var(--lh-tight);
}

.home-provider__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h4);
  color: var(--c-brand);
  margin: 0 0 var(--s-2);
}

.home-provider__desc {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
  margin: 0 0 var(--s-3);
  max-width: 60ch;
}

.home-provider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --------------------------------------------------------------------
   Steps Section & Cards (Insurance & Pricing Page)
   Matches the signature 3-cards + wide banner layout from homepage
   -------------------------------------------------------------------- */

.page-body .steps-section {
  max-width: none;
}

.page-body .steps-section .section-head {
  max-width: var(--measure);
  margin-bottom: var(--s-5);
  gap: var(--s-3);
}

.page-body .steps-section .section-head h2 {
  font-size: var(--t-h2);
  margin: 0;
}

.page-body .steps-section .section-head .section-sub {
  font-size: var(--t-lead);
  color: var(--c-text-2);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.page-body .steps-cta {
  margin-top: var(--s-5);
}

.pricing-note {
  font-size: var(--t-sm);
  color: var(--c-text-3);
  margin-top: var(--s-4);
  text-align: center;
}

/* --------------------------------------------------------------------
   Local Care & Service Areas (Prominent Feature Card)
   -------------------------------------------------------------------- */

.home-local-seo {
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--seam-lift) + 1.5rem);
}

.home-local-seo__card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(39, 100, 70, 0.2);
  border-radius: var(--r-xl, 20px);
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
  box-shadow: 0 16px 40px -12px rgba(15, 35, 31, 0.08), 0 2px 8px rgba(15, 35, 31, 0.04);
  overflow: hidden;
}

.home-local-seo__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-brand), #476E64, #739B8F);
}

.home-local-seo__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: 0;
}

@media (min-width: 860px) {
  .home-local-seo__main {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
  }
}

.home-local-seo__header {
  max-width: 65ch;
}

.home-local-seo__header h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: var(--lh-tight);
  color: var(--c-text);
  margin-top: var(--s-1);
  margin-bottom: var(--s-2);
}

.home-local-seo__lead {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
  margin: 0;
}

.home-local-seo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  flex: none;
}

@media (max-width: 640px) {
  .home-local-seo__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .home-local-seo__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .home-local-seo__card {
    padding: 1.5rem 1.25rem;
    border-radius: var(--r-lg, 16px);
  }
}