/* ==========================================================================
   SITE REFINEMENT -- September 2026 (branch site-refinement)
   One layer on top of style.css, loaded after it. The palette is NOT
   changed: the darker oat, beige and brown grounds stay (Mady, 27 Sep 2026,
   "do not lighten up the pages"). This layer only
     1. names the existing grounds so new pieces can use them;
     2. makes body text a little clearer, same Cormorant headings;
     3. gives photographs one treatment: 14px corners, no shadow, no blanket
        filter -- each photo's colour is finished in the image file itself
        (tools/finish-photos.py), with its crop chosen per placement;
     4. calms boxes, buttons and spacing.
   ========================================================================== */

@media screen {
  html body:has(> .site-header) {
    --paper: var(--page-parchment, #CEC1AE);      /* the page ground       */
    --paper-intro: var(--section-linen, #DDD2C0); /* introductions         */
    --paper-deep: var(--section-stone, #BCAF9B);  /* the deeper oat bands  */
    --paper-card: var(--surface-card, #E4DACA);   /* cards on either       */
    --paper-field: #F1EBE1;                        /* form fields only      */
    --edge: rgba(74, 59, 48, 0.18);
    --ink: #3A2E26;            /* body text: a shade deeper than walnut, for
                                  contrast on the darker grounds            */
    --ink-soft: #4F4036;
    --photo-radius: 14px;
    color: var(--ink);
  }
}

/* -- body text: a touch larger and one weight heavier -------------------- */
/* :where() keeps these at zero specificity, so every existing colour rule
   for the dark panels (the homepage hero, feature cards) still wins. */
:where(body:has(> .site-header) main) :where(p, li, dd, .field-consent-note) { font-weight: 500; }
:where(body:has(> .site-header) main) :where(p) { color: var(--ink); }

/* -- interior introductions: less decorative space above ---------------- */
body:not(.home):has(> .site-header) .site-header + .brand-flourish {
  height: 56px;
  --nav-divider-sprig: 44px;
}

/* -- the closing sprig strip mirrors the header strip (27 Sep 2026) ------
   The strip above the footer was 78px with a 50px sprig and no rules,
   the one under the header 56px with a 44px sprig between two fading
   hairlines -- the same mark treated two ways on one page. It now takes
   the header strip's exact geometry and hairlines, at every width. The
   artwork itself is unchanged. */
body:has(> .site-header) > .brand-flourish:has(+ .site-footer) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-divider-gap);
  height: 56px;
  padding: 0 1rem;
  overflow: hidden; /* a hairline can never widen the page */
}
body:has(> .site-header) > .brand-flourish:has(+ .site-footer)::before,
body:has(> .site-header) > .brand-flourish:has(+ .site-footer)::after {
  content: "";
  flex: 0 1 var(--nav-divider-line);
  min-width: 0;
  height: var(--nav-divider-line-weight);
}
body:has(> .site-header) > .brand-flourish:has(+ .site-footer)::before {
  background: linear-gradient(to right, rgba(191, 179, 166, 0) 0%, var(--nav-divider-line-color) 55%, rgba(191, 179, 166, 0) 100%);
}
body:has(> .site-header) > .brand-flourish:has(+ .site-footer)::after {
  background: linear-gradient(to left, rgba(191, 179, 166, 0) 0%, var(--nav-divider-line-color) 55%, rgba(191, 179, 166, 0) 100%);
}
body:has(> .site-header) > .brand-flourish:has(+ .site-footer) img {
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  margin: 0;
}
body:has(> .site-header) .page-header.page-intro {
  background: var(--paper-intro);
  border-bottom: 0;
  padding: 1.1rem 0 1.6rem;
}
body:has(> .site-header) .page-header.page-intro h1 { margin-bottom: 0.45rem; }
body:has(> .site-header) .page-header.page-intro p {
  max-width: 36rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* -- photographs ---------------------------------------------------------- */
/* A simple rectangle, 14px corners, no shadow, no filter. Each photo sets
   its focal point: --fp (desktop) and --fp-m (phone). Colour adjustments
   live in the image file itself, tuned per photo. */
body:has(> .site-header) .photo-frame {
  margin: 0;
  border-radius: var(--photo-radius);
  overflow: hidden;
  background: var(--paper-deep);
}
body:has(> .site-header) .photo-frame picture { display: block; height: 100%; }
body:has(> .site-header) .photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fp, 50% 50%);
  filter: none;
  box-shadow: none;
  border-radius: 0;
}
@media (max-width: 640px) {
  body:has(> .site-header) .photo-frame img { object-position: var(--fp-m, var(--fp, 50% 50%)); }
}

/* -- buttons: one shape, two weights ------------------------------------- */
body:has(> .site-header) main .btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */
body:has(> .site-header) .contact-surface {
  background: var(--paper-deep);
  padding-top: 0.6rem;
  padding-bottom: 3rem;
}
.contact-layout {
  display: grid;
  gap: 1.6rem;
  grid-template-areas: "quick" "form" "photo";
}
.contact-quick { grid-area: quick; }
.contact-form-wrap { grid-area: form; min-width: 0; }
.contact-photo { grid-area: photo; }

@media (min-width: 860px) {
  body:has(> .site-header) .contact-layout {
    max-width: 1120px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "form quick" "form photo";
    column-gap: clamp(2.4rem, 5vw, 4.5rem);
    row-gap: 1.6rem;
    align-items: start;
  }
  body:has(> .site-header) .contact-form input,
  body:has(> .site-header) .contact-form select,
  body:has(> .site-header) .contact-form textarea { max-width: none; }
}

/* the form, on one clear surface */
.contact-form-wrap {
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.contact-form-title {
  font-size: 1.75rem;
  margin: 0 0 1.1rem;
}
body:has(> .site-header) .contact-form input,
body:has(> .site-header) .contact-form select,
body:has(> .site-header) .contact-form textarea {
  background: var(--paper-field);
  border-color: rgba(74, 59, 48, 0.28);
}
body:has(> .site-header) .contact-form .field label {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* the compact column: booking, email, phone -- together */
.contact-quick-title {
  font-size: 1.35rem;
  margin: 0 0 0.7rem;
}
.contact-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}
.contact-method {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--edge);
}
.contact-method-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.contact-method-note { font-size: 1.02rem; line-height: 1.45; font-weight: 500; }
.contact-method a:not(.btn) {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--mid-wood);
  justify-self: start;
}
.contact-method a:not(.btn):hover { border-bottom-color: var(--forest); }
.contact-method .btn {
  justify-self: start;
  margin-top: 0.55rem;
  padding: 0.62em 1.35em;
  font-size: 1rem;
}

/* the photograph: a supporting detail, a portrait crop around the hand and
   belly that fills the column beside the longer form */
.contact-photo { aspect-ratio: 4 / 5; max-width: 420px; --fp: 50% 40%; }

/* Phone: the choice of methods is compact and comes before the form;
   the photograph waits until after it. */
@media (max-width: 859px) {
  .contact-quick-title { font-size: 1.2rem; }
  /* one compact card: the call first, then email and phone as short rows */
  .contact-methods {
    border: 1px solid var(--edge);
    border-radius: 16px;
    background: var(--paper-card);
    padding: 0 1rem;
  }
  .contact-method { padding: 0.8rem 0; }
  .contact-method:last-child { border-bottom: 0; }
  .contact-method:not(.contact-method-book) {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 1rem;
  }
  .contact-method:not(.contact-method-book) a { justify-self: end; font-size: 1.08rem; }
  .contact-method .btn { justify-self: stretch; text-align: center; }
  .contact-photo { aspect-ratio: 4 / 3; max-width: 520px; --fp-m: 50% 38%; }
}
@media (max-width: 359px) {
  .contact-method:not(.contact-method-book) { grid-template-columns: 1fr; }
  .contact-method:not(.contact-method-book) a { justify-self: start; }
}

/* supporting section: quieter, below the main contact area */
body:has(> .site-header) .contact-extra {
  background: var(--paper);
  border-top: 1px solid var(--edge);
  padding: 2.4rem 0 2.6rem;
}
.contact-extra-grid {
  display: grid;
  gap: 1.8rem;
  max-width: 1120px;
}
@media (min-width: 860px) {
  .contact-extra-grid { grid-template-columns: 1.2fr 1fr 0.8fr; gap: 3rem; }
}
.contact-extra h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
body:has(> .site-header) .contact-extra .contact-pro-note { margin: 0; max-width: none; font-size: 1.02rem; }
.contact-extra .contact-more { margin: 0; }
.contact-social { display: grid; gap: 0.5rem; margin: 0; }
.contact-social a { border-bottom: 1px solid var(--mid-wood); justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; }
.contact-social svg { width: 1.05em; height: 1.05em; }

/* keyboard focus stays obvious on every new control */
body:has(> .site-header) :is(.contact-method, .contact-extra) a:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
/* My Approach: the photo is one quiet rectangle -- no double shadow, no
   blanket filter; a steady 4:3 frame with its own focal point. */
body:has(> .site-header) .approach-media.photo-frame {
  aspect-ratio: 5 / 4;
  box-shadow: none;
  border-radius: var(--photo-radius);
}
body:has(> .site-header) .approach-media.photo-frame :is(img, picture) {
  height: 100%;
  border-radius: 0;
  filter: none;
  box-shadow: none;
}
body:has(> .site-header) main > section.approach-editorial {
  background: var(--paper-deep);
}
body:has(> .site-header) .approach-editorial .values-list li::before { background: var(--mid-wood); }

/* "Let's talk about what your family needs": the phone layout that put each
   number beside its heading was removed 27 Sep 2026 at Mady's request -- she
   prefers each number centred over its own step. That layout lives in
   style.css ("Let's talk steps on phones", 7092c53); nothing here overrides it. */

/* ==========================================================================
   SERVICE CATEGORY PAGES
   ========================================================================== */
/* Introduction: text beside a compact photo on desktop; on a phone the
   photo follows the introduction at a modest height, so the offerings
   stay close. */
body:has(> .site-header) .svc-hero.svc-intro {
  background: var(--paper-intro);
  padding: 1.2rem 0 2rem;
  border-bottom: 0;
}
.svc-intro-grid {
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
@media (min-width: 900px) {
  .svc-intro-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2.2rem, 5vw, 4.5rem);
    max-width: 1120px;
  }
}
body:has(> .site-header) .svc-intro-text h1 { margin: 0.2rem 0 0.4rem; }
body:has(> .site-header) .svc-intro .svc-hero-statement { font-size: 1.3rem; margin-bottom: 0.4rem; }
body:has(> .site-header) .svc-intro .svc-hero-intro { color: var(--ink); max-width: 34rem; }
.svc-intro-photo { aspect-ratio: 4 / 3; width: 100%; }
@media (max-width: 899px) {
  .svc-intro-photo { aspect-ratio: 16 / 10; max-width: 560px; order: 2; }
}

/* "On this page": plain in-page jumps -- a down-arrow, not a pill button,
   so they can't be mistaken for links to other pages. */
body:has(> .site-header) .svc-jump ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; padding: 0; margin: 0; list-style: none; }
body:has(> .site-header) .svc-jump a {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--forest);
  border-bottom: 1px solid var(--mid-wood);
  font-size: 1.05rem;
  font-weight: 500;
}
body:has(> .site-header) .svc-jump a::after { content: " \2193"; font-size: 0.9em; }
body:has(> .site-header) .svc-intro .faq-jump-title { margin: 1.4rem 0 0.4rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
body:has(> .site-header) .svc-intro .faq-jump { background: none; border: 0; padding: 0; box-shadow: none; }

/* Offerings: the essentials sit in the summary, visible before opening. */
body:has(> .site-header) main > section.svc-subject-service { background: var(--paper); }
.svc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  margin-top: 0.45rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}
.svc-facts > span + span::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 0.7rem;
  border-radius: 50%;
  background: var(--mid-wood);
  vertical-align: middle;
}
.svc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest);
  letter-spacing: 0.02em;
}
.svc-toggle .faq-item-chevron { position: static; }
.svc-toggle-less { display: none; }
details[open] > summary .svc-toggle-more { display: none; }
details[open] > summary .svc-toggle-less { display: inline; }

/* one compact area for classes, related support and reading */
body:has(> .site-header) main > section.svc-more {
  background: var(--paper-deep);
  border-top: 1px solid var(--edge);
  padding: 2.4rem 0 1rem;
}
.svc-more .container { max-width: 1120px; }
.svc-more-title { font-size: 1.6rem; margin: 0 0 1.1rem; }
.svc-more-grid { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .svc-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.svc-more-col h3 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
}
.svc-more-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.svc-more-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--edge);
}
.svc-more-list a {
  color: var(--forest);
  font-size: 1.08rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.svc-more-list a::after { content: " \2192"; }
.svc-more-list a:hover, .svc-more-list a:focus-visible { border-bottom-color: var(--forest); }
.svc-more-list .svc-item-status { margin: 0; font-size: 0.66rem; }
body:has(> .site-header) main > section.svc-cta { background: var(--paper); }

/* one shared width for the introduction and the offering cards */
@media (min-width: 900px) {
  body:has(> .site-header) .svc-intro > .container.svc-intro-grid { max-width: 1000px; }
  body:has(> .site-header) main > section.svc-subject-service > details { max-width: calc(1000px - 3.2rem); }
  body:has(> .site-header) .svc-accordion-body .container > :is(p, ul, .svc-investment, h3, h4, form, .leaf-list) { max-width: 44rem; }
  body:has(> .site-header) .svc-more .container { max-width: calc(1000px - 3.2rem); padding-inline: 0; }
}
body:has(> .site-header) main > section.svc-subject-service { padding: 0.45rem 0; }
body:has(> .site-header) main > section.svc-subject-service:first-of-type { padding-top: 1.6rem; }
body:has(> .site-header) main > section.svc-subject-service:last-of-type { padding-bottom: 2.2rem; }
@media (max-width: 899px) {
  body:has(> .site-header) main > section.svc-subject-service > details {
    margin-inline: clamp(0.75rem, 4vw, 1.6rem);
    width: auto;
  }
}
@media (max-width: 599px) {
  .svc-facts { display: grid; gap: 0.1rem; }
  .svc-facts > span + span::before { display: none; }
}

/* ==========================================================================
   POLICY PAGES (privacy, terms, accessibility, shop terms)
   One reading surface on the page ground: no outer panel, no card inside a
   card. Contents on the left on wide screens; a comfortable measure.
   ========================================================================== */
body:has(> .site-header) .pv-section { background: var(--paper); padding-top: 1.4rem; }
body:has(> .site-header) .lf-surface {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 1080px;
}
body:has(> .site-header) .lf-prose.lf-article {
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 18px;
  box-shadow: none;
  padding: clamp(1.3rem, 4vw, 2.6rem) clamp(1.1rem, 4.5vw, 3rem);
}
body:has(> .site-header) .lf-prose :is(p, li) { font-size: 1.14rem; line-height: 1.68; }
body:has(> .site-header) .lf-toc {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0.4rem 0 0;
}
body:has(> .site-header) .lf-toc ol { border-left: 1px solid var(--edge); padding-left: 0.9rem; }
body:has(> .site-header) .lf-toc a { color: var(--ink-soft); font-weight: 500; }
body:has(> .site-header) .lf-block + .lf-block::before { background: var(--edge); width: 100%; height: 1px; }
/* the summary stays prominent; the boxes inside the article become quiet
   rules instead of more nested cards */
body:has(> .site-header) .pv-summary {
  background: var(--paper-deep);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}
body:has(> .site-header) :is(.pv-callout, .pv-exceptions, .pv-note, .pv-contact) {
  background: none;
  border: 0;
  border-left: 2px solid var(--mid-wood);
  border-radius: 0;
  box-shadow: none;
  padding: 0.1rem 0 0.1rem 1rem;
}
.pv-ask {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--edge);
}
.pv-ask a { border-bottom: 1px solid var(--mid-wood); }
body:has(> .site-header) :is(.pv-hero, .ij-hero, .svc-hero, .page-header) p { color: var(--ink-soft); }


/* ==========================================================================
   PHOTOGRAPHS, SITE-WIDE
   The 26 Sep blanket filter and drop shadow come off every photograph; the
   colour work now lives in each file. Category photos on Services share one
   4:5 frame.
   ========================================================================== */
body:has(> .site-header) :is(.photo-complete, .services-cat-photos, .approach-media, .photo-frame) :is(img, picture) {
  filter: none;
  box-shadow: none;
}
body:has(> .site-header) .approach-media { box-shadow: none; }
body:has(> .site-header) .services-cat-photos .photo-feature-frame {
  max-width: 380px;
  aspect-ratio: 4 / 5;
  border-radius: var(--photo-radius);
  overflow: hidden;
  box-shadow: none;
}
body:has(> .site-header) .services-cat-photos .photo-feature-frame :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
@media (max-width: 780px) {
  body:has(> .site-header) .services-cat-photos .photo-feature-frame { aspect-ratio: 4 / 3; max-width: 520px; }
  body:has(> .site-header) .services-cat-photos .photo-feature-frame img { object-position: 50% 38%; }
}
body:has(> .site-header) .classes-education .photo-feature { margin-bottom: 0; }
body:has(> .site-header) .panel-service-link.is-static { cursor: default; }
body:has(> .site-header) .panel-service-link.is-static:hover { background: none; }

/* ==========================================================================
   LINK KINDS -- expand, jump, go
   Expanders say "Details" with a chevron; in-page jumps carry a down-arrow;
   links to another page carry a right-arrow.
   ========================================================================== */
body:has(> .site-header) .svc-jump a[href^="#"]::after { content: " \2193"; }
body:has(> .site-header) .svc-jump a:not([href^="#"])::after { content: " \2192"; }

/* A class described on another page, shown in the Classes list as a card
   that matches the accordions but links out instead of opening. */
body:has(> .site-header) main > section.svc-linked { background: var(--paper); padding: 0.45rem 0; }
.svc-linked-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  max-width: calc(1000px - 3.2rem);
  margin: 0 auto;
  padding: 1.35rem 1.5rem;
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.svc-linked-card:hover { border-color: var(--mid-wood); }
.svc-linked-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.svc-linked-card .svc-subject-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  color: var(--walnut);
  margin-right: 0.5rem;
}
.svc-linked-card .svc-accordion-hint { display: block; font-style: italic; margin-top: 0.3rem; }
.svc-go {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
  border-bottom: 1px solid var(--mid-wood);
}
@media (max-width: 899px) {
  .svc-linked-card { margin-inline: clamp(0.75rem, 4vw, 1.6rem); flex-direction: column; }
}

/* ==========================================================================
   BUTTONS -- one shape everywhere (the header button was 10px), two weights
   ========================================================================== */
body:has(> .site-header) .btn,
body:has(> .site-header) .btn.nav-cta,
body:has(> .site-header) .newsletter-submit { border-radius: 999px; }
body:has(> .site-header) .newsletter-form .newsletter-submit:not(.btn-primary) {
  background: var(--forest);
  color: var(--warm-ivory, #F3EFE7);
  border: 1px solid var(--forest);
}
body:has(> .site-header) .newsletter-band .newsletter-submit:not(.btn-primary) {
  background: var(--paper-card);
  color: var(--walnut);
  border-color: var(--paper-card);
}

/* ==========================================================================
   BOXES -- calmer cards: one radius, a hairline edge, no floating shadows
   ========================================================================== */
body:has(> .site-header) :is(.svc-cta-panel, .journey-panel-card, .cm-card, .booking-card, .res-card, .svc-accordion, .blog-newsletter-card) {
  border-radius: 16px;
  box-shadow: none;
}
body:has(> .site-header) .svc-cta-panel {
  background: var(--paper-card);
  border: 1px solid var(--edge);
}


/* ==========================================================================
   COMMUNITY, RESOURCES, NEWSLETTER, INCLUSION & JUSTICE
   ========================================================================== */
/* Community: a directory. Lighter cards, no decorative top rule, and the
   action is a text link that says where it goes. */
body:has(> .site-header) .cm-card {
  background: var(--paper-card);
  border: 1px solid var(--edge);
  box-shadow: none;
}
body:has(> .site-header) .cm-card::before { display: none; }
body:has(> .site-header) .cm-card p { font-size: 1.1rem; margin-bottom: 0.9rem; }
body:has(> .site-header) .cm-card-link {
  align-self: flex-start;
  min-height: 44px;
  width: auto;
  justify-content: flex-start;
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
}
body:has(> .site-header) .cm-card-link::after { content: "\2192"; margin-left: 0.4em; }
body:has(> .site-header) .cm-card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the eyebrow repeats the breadcrumb right above it */
body:has(> .site-header) .page-intro .breadcrumb + .eyebrow,
body:has(> .site-header) .page-intro .page-crumbs + .eyebrow { display: none; }

/* Resources: name, then what it is, then who it's for, then where -- the
   place is a plain label, not a pill that looks like the filters above. */
body:has(> .site-header) .res-card { box-shadow: none; border: 1px solid var(--edge); background: var(--paper-card); }
body:has(> .site-header) .res-name { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.35rem; }
body:has(> .site-header) .res-name a { text-decoration-thickness: 1px; text-decoration-color: var(--mid-wood); }
body:has(> .site-header) .res-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin: 0.4rem 0 0.2rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}
body:has(> .site-header) .res-reach::before {
  content: "Reaches";
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body:has(> .site-header) .res-reach-chip {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
body:has(> .site-header) .res-reach-chip + .res-reach-chip::before { content: "\00B7"; margin-right: 0.5rem; color: var(--mid-wood); }
body:has(> .site-header) .res-filters { box-shadow: none; border: 1px solid var(--edge); background: var(--paper-card); }

/* Newsletter forms: one field and button style on every page, whether the
   card is light or dark. */
body:has(> .site-header) :is(.newsletter-form, .lead-magnet-card) input:is([type="text"], [type="email"]) {
  background: var(--paper-field);
  border: 1px solid rgba(74, 59, 48, 0.28);
  border-radius: 10px;
  color: var(--walnut);
}
body:has(> .site-header) .newsletter-field label { font-weight: 600; }
body:has(> .site-header) .blog-newsletter-card .newsletter-submit:not(.btn-primary),
body:has(> .site-header) .blog-newsletter-card .btn-primary.newsletter-submit {
  background: var(--paper-card);
  color: var(--walnut);
  border-color: var(--paper-card);
}

/* Inclusion & Justice: fewer boxes inside boxes. Resource groups keep their
   fold (the one place the rules allow it) but their items become hairline
   rows instead of a card inside a card. Commitments stay open. */
body:has(> .site-header) .ij-res-group { box-shadow: none; }
body:has(> .site-header) .ij-res-group :is(li, article) {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
body:has(> .site-header) .lf-prose :is(.ij-commitments, .ij-quiet) { box-shadow: none; }

/* Shop terms: the same reading surface as the other policy pages. */
body:has(> .site-header) .shop-narrow .legal.lf-article { max-width: 46rem; margin-inline: auto; }

/* "Also helpful" heading lines up with its three columns (an older
   .svc-resources h2 rule centred it in a 720px measure). */
body:has(> .site-header) .svc-more .svc-more-title { max-width: none; margin-left: 0; margin-right: 0; }
/* the Full-Spectrum panel on Services takes the same card colour as the rest */
body:has(> .site-header) .services-duo-panel { background: var(--paper-card); border: 1px solid var(--edge); box-shadow: none; }