/* ==========================================================================
   STILLMIND MENTAL HEALTH · SERVICE PAGES

   The six service pages, the services index and "what we treat".

   WHY THIS EXISTS ALONGSIDE page.css
   page.css builds a document: one column at a 66ch measure, everything
   stacked. That is right for the legal notices and for contact, where the
   job is to be read straight through.

   A service page is not read straight through. Someone arrives already
   deciding, and the two questions they have are "is this the right thing
   for me" and "how do I start". The facts that answer the first one, and
   the control that answers the second, should be visible while they read
   rather than waiting at the bottom. So this is a two-column layout with a
   sticky sidebar, which is the shape the previous version of this site used
   and the one thing about it that was clearly right.

   Everything here is built from tokens.css and reuses the existing
   grammar: .bezel > .core, .eyebrow, .btn, .container, .crumb.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero

   Breadcrumb, eyebrow, title, lead, two actions, and a plate. The plate is
   a landscape, not a photograph of a consulting room or of a clinician:
   there is no photograph of the actual clinician to use, and a stock one
   depicts a person who does not work here. See tools/build-service-plates.sh.
   -------------------------------------------------------------------- */

.svc-hero {
  position: relative;
  padding-top: clamp(7rem, 13vw, 10rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.svc-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* The image goes beside the text only when there is room for both to be
   worth having. Below this it sits under the lead, where it is a full
   width band rather than a stamp. */
@media (min-width: 900px) {
  .svc-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

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

.svc-hero__body h1 { margin: 0; }
.svc-hero__body .lead { margin: 0; }

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

@media (max-width: 540px) {
  .svc-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .svc-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.svc-hero__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ring-hairline), var(--e-1);
  /* Reserve the shape before the file lands, so the lead and the buttons
     do not jump when it does. */
  aspect-ratio: 3 / 2;
  background: var(--c-paper-sunk);
}

.svc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------
   The two-column body
   -------------------------------------------------------------------- */

.svc-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* 20rem is what the facts panel needs without its values wrapping every
   other line, and the article keeps minmax(0, 1fr) so long words and the
   card grid inside it can still shrink. Below 1000 the sidebar stops being
   a sidebar and becomes the first thing under the hero, which is the right
   order on a phone: the facts before the prose. */
@media (min-width: 1000px) {
  .svc-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.svc-article { min-width: 0; }

.svc-article > * + * { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

.svc-article section { max-width: var(--measure); }

.svc-article h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  box-shadow: inset 0 -1px 0 var(--c-stone);
}

.svc-article h3 {
  font-size: var(--t-h4);
  margin: var(--s-6) 0 var(--s-3);
}

.svc-article p { margin: 0 0 var(--s-4); color: var(--c-text-2); }
.svc-article p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------
   Sidebar

   Sticky, so the facts and the booking control stay with the reader
   through a long page. 7rem clears the fixed header, which is the same
   number .page-section uses for scroll-margin-top and for the same reason.
   -------------------------------------------------------------------- */

.svc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  max-width: var(--measure);
}

@media (min-width: 1000px) {
  .svc-aside {
    position: sticky;
    top: 7rem;
    max-width: none;
  }
}

.sidebar-box {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline), var(--e-1);
}

.sidebar-box h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-h4);
}

.sidebar-box dl { margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }

.sidebar-box__row { display: flex; flex-direction: column; gap: var(--s-1); }

.sidebar-box dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.sidebar-box dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text);
  line-height: var(--lh-relaxed);
}

/* The booking control, separated from the facts by a rule so it reads as
   the conclusion of the panel rather than another row of it. */
.sidebar-box__action {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  box-shadow: inset 0 1px 0 var(--c-stone);
}

.sidebar-box__action .btn { width: 100%; justify-content: space-between; }

.sidebar-box ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-box li + li { box-shadow: inset 0 1px 0 var(--c-stone); }

.sidebar-box li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  /* 44px of target without the panel growing airy: 0.6875rem top and
     bottom plus the line box clears it. */
  padding-block: 0.6875rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
}

.sidebar-box li a:hover { color: var(--c-brand-hover); text-decoration: underline; }

.sidebar-box li a span[aria-hidden] { color: var(--c-sage); }

/* --------------------------------------------------------------------
   Inline call to action

   The banner that sits between sections. Its job is to catch someone at
   the moment a section has answered their question, rather than making
   them scroll to the bottom to act on it.
   -------------------------------------------------------------------- */

.cta-inline {
  max-width: var(--measure);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-brand-soft);
  box-shadow: var(--ring-hairline);
}

.cta-inline h2,
.cta-inline h3 {
  margin: var(--s-3) 0 var(--s-3);
  font-size: var(--t-h4);
  /* Overrides the rule under .svc-article h2: inside a tinted panel a
     hairline under the heading reads as a seam in the panel. */
  padding-bottom: 0;
  box-shadow: none;
}

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

.cta-inline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (max-width: 540px) {
  .cta-inline__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-inline__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* The quieter variant, for a banner that is information rather than an
   invitation. Paper instead of brand tint. */
.cta-inline--plain {
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline), var(--e-1);
}

/* The crisis variant keeps the crisis palette wherever it appears. */
.cta-inline--crisis {
  background: var(--c-crisis-bg);
  box-shadow: inset 0 0 0 1px var(--c-crisis-border);
}

.cta-inline--crisis h2,
.cta-inline--crisis h3 { color: var(--c-crisis); }

/* --------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.card-grid > li,
.card-grid > div {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline);
}

/* h2 is in this list because the services index uses one per card, which is
   the correct level for a service sitting under the page h1. Without it the
   cards inherit the global h2 size and each name runs to three lines. The
   heading level is a document-structure decision; the size is not. */
.card-grid h2,
.card-grid h3,
.card-grid h4 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
}

.card-grid p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  line-height: var(--lh-relaxed);
}

/* A card that is itself a link, used by the services index. */
.card-grid a.card-grid__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
}

.card-grid__go {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
}

@media (hover: hover) {
  .card-grid a.card-grid__link:hover .card-grid__go { text-decoration: underline; }
}

/* --------------------------------------------------------------------
   Closing panel

   A dark card on paper, with the page still resolving into the footer's
   ink underneath it.

   Two things are happening and they are easy to confuse. The CARD is
   --c-forest, a panel you can see the edges of. The GRADIENT below it
   still runs paper to --c-ink, which is what stops the footer starting on
   a hard edge; that boundary was measured at 3 of 255 and the gradient is
   the only reason. Making the card --c-ink instead would merge it into the
   footer and lose the panel.
   -------------------------------------------------------------------- */

.svc-close {
  position: relative;
  z-index: var(--z-raised);
  isolation: isolate;
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* Third and last copy of the fade into ink, deleted with the other two.
   The footer lifts over this section instead; see footer.css. */

.svc-close__panel {
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--c-forest);
  text-align: center;
}

.svc-close__panel h2 {
  margin: 0 auto;
  max-width: 20ch;
  font-size: var(--t-h3);
  color: var(--c-text-invert);
}

/* A short rule under the heading, centred. The previous version of this
   site drew it full width, which made the panel look like two stacked
   boxes. */
.svc-close__panel h2::after {
  content: "";
  display: block;
  width: min(14rem, 60%);
  height: 1px;
  margin: var(--s-5) auto 0;
  background: rgba(214, 228, 224, 0.28);
}

.svc-close__panel p {
  margin: var(--s-5) auto 0;
  max-width: 46ch;
  color: var(--c-text-invert-2);
}

/* The panel is --c-forest and --c-brand is only a shade lighter than it, so
   the default green button would sink into the panel it is sitting on. Sage
   tint with ink type is the pairing that carries here, and it is the same
   move .on-dark already makes for secondary buttons elsewhere. */
.svc-close__panel .btn {
  --btn-bg: var(--c-sage-tint);
  --btn-fg: var(--c-ink);
  --btn-icon-bg: rgba(15, 35, 31, 0.12);
  margin-top: var(--s-6);
}

.svc-close__panel .btn:hover {
  --btn-bg: var(--c-text-invert);
  background: var(--btn-bg);
}

/* --------------------------------------------------------------------
   Services index
   -------------------------------------------------------------------- */

.svc-index { padding-bottom: clamp(3rem, 6vw, 5rem); }

.svc-index .card-grid { max-width: none; }

@media (min-width: 900px) {
  .svc-index .card-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}

.svc-index__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: var(--measure-tight);
  color: var(--c-text-2);
}

/* --------------------------------------------------------------------
   AEO Answer Capsules & FAQ
   -------------------------------------------------------------------- */

.svc-faq {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-stone);
}

.svc-faq h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-5);
  color: var(--c-text);
}

.faq-capsule {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--c-paper-raised);
  border: 1px solid var(--c-stone);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px rgba(15, 35, 31, 0.03);
}

.faq-capsule h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
}

.faq-capsule p {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

.faq-capsule p strong {
  color: var(--c-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Service Comparison Table
   -------------------------------------------------------------------- */

.svc-compare {
  margin-top: var(--s-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.svc-compare:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.svc-compare[data-reveal] {
  transform: none;
}

.svc-compare h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
}

.compare-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-stone);
  background: var(--c-paper-raised);
  overflow: hidden;
}

.compare-table th {
  background: rgba(39, 100, 70, 0.06);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--c-stone);
}

.compare-table th[scope="row"] {
  font-weight: 600;
  background: transparent;
  border-bottom: 1px solid var(--c-stone);
}

.compare-table td {
  padding: var(--s-3) var(--s-4);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  border-bottom: 1px solid var(--c-stone);
}

.compare-table tr:last-child th[scope="row"],
.compare-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 680px) {
  .svc-compare {
    overflow-x: visible;
  }

  .compare-table {
    display: block;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    overflow: visible;
  }

  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .compare-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .compare-table tr {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #FFFFFF;
    border: 1px solid var(--c-stone);
    border-radius: var(--r-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: 0 2px 8px rgba(15, 35, 31, 0.04);
  }

  .compare-table th[scope="row"] {
    display: block;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--c-stone);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .compare-table th[scope="row"] a {
    color: var(--c-brand);
    text-decoration: none;
  }

  .compare-table th[scope="row"] a:hover {
    text-decoration: underline;
  }

  .compare-table td {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.25rem 0;
    border-bottom: none;
    font-size: var(--t-sm);
    line-height: var(--lh-relaxed);
  }

  .compare-table td::before {
    content: attr(data-label);
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--c-sage);
  }
}

/* --------------------------------------------------------------------
   Interactive Clinical Screener Teaser in Service Article
   -------------------------------------------------------------------- */

.svc-assess-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-4), 3vw, var(--s-5));
  border-radius: var(--r-md);
  background: var(--c-paper-raised);
  border: 1px solid var(--c-stone);
  box-shadow: var(--e-1);
}

@media (min-width: 640px) {
  .svc-assess-teaser {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
  }
}

.svc-assess-teaser__body {
  flex: 1;
  min-width: 0;
}

.svc-assess-teaser__body .eyebrow {
  display: block;
  margin-bottom: var(--s-1);
}

.svc-assess-teaser__title {
  font-size: var(--t-h4);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-2);
  border: 0;
  box-shadow: none;
  padding-bottom: 0;
}

.svc-assess-teaser__body p {
  font-size: var(--t-sm);
  color: var(--c-text-2);
  margin: 0;
  line-height: var(--lh-body);
}

.svc-assess-teaser__action {
  flex-shrink: 0;
}

.svc-assess-teaser__action .btn {
  white-space: nowrap;
}