/* ==========================================================================
   Therapeutic Guidance, LLC — Jessica Giambra, LCSW, CADC
   Kennett Square, Pennsylvania

   Design direction: "Brandywine winter"
   A cool, quiet, Chester County palette — bone, cold slate, dry-grass ochre.
   Type is deliberately inverted from the therapy-website norm: a modern
   grotesque for display, an old-style serif for reading, so the page reads
   like a letter rather than a brochure.
   Signature element: the bearing rail down the left margin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --paper:      #F0EEE8;  /* bone — main ground */
  --paper-2:    #E5E3DA;  /* deeper bone — alternating bands */
  --paper-3:    #FAF9F6;  /* card surface */
  --ink:        #23262B;  /* cold near-black */
  --ink-soft:   #434A52;
  --slate:      #5F6A74;  /* cold shadow — secondary text, rules */
  --slate-pale: #C3C6C2;
  --deep:       #2B3A44;  /* deep slate-blue — dark fields, footer */
  --deep-2:     #233039;
  --ochre:      #A8763A;  /* dry winter grass — the one warm accent */
  --ochre-soft: #C9A16A;
  --error:      #9A3B32;  /* used for form errors and the crisis callout */
  --line:       rgba(35, 38, 43, 0.14);
  --line-soft:  rgba(35, 38, 43, 0.08);
  --line-dark:  rgba(240, 238, 232, 0.16);

  /* Type */
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.22vw, 1.18rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.90vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.60rem + 1.60vw, 3.00rem);
  --step-4:  clamp(2.40rem, 1.75rem + 2.90vw, 4.25rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(4rem, 9vw, 7.5rem);
  --wrap:   72rem;
  --measure: 34rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-1); letter-spacing: -0.016em; }
h4 { font-size: var(--step-0); letter-spacing: -0.010em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong { font-weight: 600; }

::selection { background: var(--ochre); color: var(--paper); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--display);
  font-size: var(--step--1);
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); position: relative; display: flow-root; }
/* flow-root contains child margins. Without it, a band whose top padding is
   zeroed (#steps on the home page follows #work in the same deep tone) lets
   its first child's top margin collapse out of the section, and the page
   ground shows through as a pale stripe between two dark bands. */
.band--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.tone-paper2 { background: var(--paper-2); }
.tone-deep   { background: var(--deep); color: var(--paper); }
.tone-deep h1, .tone-deep h2, .tone-deep h3 { color: var(--paper); }

.eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--ochre);
  flex: none;
}
.tone-deep .eyebrow { color: var(--ochre-soft); }
.tone-deep .eyebrow::before { background: var(--ochre-soft); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 38rem;
}
.tone-deep .lede { color: rgba(240, 238, 232, 0.82); }

.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head p { margin-top: 1.1rem; }

.hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--deep); color: var(--paper); }
.btn--solid:hover { background: var(--ochre); }

.btn--line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: rgba(35, 38, 43, 0.04); }

.tone-deep .btn--solid { background: var(--ochre); color: #fff; }
.tone-deep .btn--solid:hover { background: var(--paper); color: var(--ink); }
.tone-deep .btn--line { border-color: var(--line-dark); color: var(--paper); }
.tone-deep .btn--line:hover { border-color: var(--paper); background: rgba(240, 238, 232, 0.07); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  max-width: none;
}

.link {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ochre);
  padding-bottom: 2px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.link:hover { color: var(--ochre); }
.tone-deep .link { color: var(--paper); border-color: var(--ochre-soft); }
.tone-deep .link:hover { color: var(--ochre-soft); }

.tel-link {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(240, 238, 232, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.site-head[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: rgba(240, 238, 232, 0.95);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; color: var(--ochre); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.22rem;
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.4rem;
  transition: color 160ms var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.head-cta { display: flex; align-items: center; gap: 1.1rem; }
.head-cta .tel-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.head-cta .tel-link:hover { border-bottom-color: var(--ochre); }
.head-cta .btn { padding: 0.7rem 1.2rem; font-size: 0.85rem; }

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. The bearing rail — signature element
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  left: clamp(1.25rem, 2.4vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}
.rail li { margin: 0; }
.rail a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.62rem 0;
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0.55;
  max-width: 7.5rem;
  transition: opacity 220ms var(--ease), color 220ms var(--ease);
}
.rail-tick {
  width: 0.85rem;
  height: 1px;
  background: currentColor;
  flex: none;
  transition: width 260ms var(--ease), background 260ms var(--ease);
}
.rail a:hover { opacity: 1; }
.rail a[aria-current="true"] {
  opacity: 1;
  color: var(--ink);
}
.rail a[aria-current="true"] .rail-tick {
  width: 1.9rem;
  background: var(--ochre);
}

/* Only once there is genuinely clear margin beside the 72rem content column. */
@media (min-width: 1400px) {
  .rail { display: flex; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 8vw, 6.5rem);
}

.hero-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--slate);
  opacity: 0.10;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero-copy h1 { margin-bottom: 1.5rem; }
.hero-copy h1 em {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.hero-copy .lede { margin-bottom: 2rem; }
.hero-copy .btn-row { margin-bottom: 2rem; }

.hero-note {
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--slate);
  line-height: 1.55;
  max-width: 26rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

/* Portrait */
.portrait-stack { position: relative; }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.portrait-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  padding: 1.75rem;
  color: var(--slate);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(95, 106, 116, 0.055) 11px 22px
    );
}
.portrait-empty strong {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.portrait-empty span { max-width: 16rem; line-height: 1.5; }

.credential-card {
  position: absolute;
  right: -1px;
  bottom: -1.75rem;
  background: var(--deep);
  color: var(--paper);
  padding: 1.15rem 1.4rem;
  max-width: 15.5rem;
}
.credential-card dt {
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre-soft);
  margin-bottom: 0.35rem;
}
.credential-card dd {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(240, 238, 232, 0.9);
}
.credential-card dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. Recognition list ("you might be here because…")
   -------------------------------------------------------------------------- */

/* Hairlines come from each cell's own border (overlapped by -1px so shared
   edges stay 1px), not from a coloured grid background showing through the
   gaps — the item count is editable in the admin, and with the background
   trick any count that isn't a multiple of three left grey dead cells. */
.recognition {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0 1px 1px 0;
  margin: 0;
}
.recognition li {
  border: 1px solid var(--line);
  margin: 0 -1px -1px 0;
  background: var(--paper);
  padding: 1.6rem 1.5rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  transition: background 200ms var(--ease);
}
.recognition li:hover { background: var(--paper-3); }
.recognition li::before {
  content: "";
  width: 0.7rem;
  height: 1px;
  background: var(--ochre);
  margin-top: 0.85rem;
  flex: none;
}
.tone-paper2 .recognition li { background: var(--paper-2); }
.tone-paper2 .recognition li:hover { background: var(--paper); }

.recognition-after {
  margin-top: 2rem;
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   9. Cards (services / approaches)
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Four cards read better as a 2 x 2 block than as three-plus-an-orphan. */
@media (min-width: 60rem) {
  .card-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.card:hover { border-color: var(--slate-pale); transform: translateY(-2px); }
.card h3 { margin: 0; }
.card p { font-size: 0.98rem; color: var(--ink-soft); max-width: 32rem; }
.card-tag {
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre);
}
.card .link { margin-top: auto; align-self: flex-start; }

.tone-deep .card {
  background: rgba(240, 238, 232, 0.05);
  border-color: var(--line-dark);
}
.tone-deep .card:hover { border-color: rgba(240, 238, 232, 0.32); }
.tone-deep .card p { color: rgba(240, 238, 232, 0.78); }
.tone-deep .card-tag { color: var(--ochre-soft); }

/* ---------------------------------------------------------------------------
   DOCUMENT LIST — the consent and privacy PDFs on getting-started.html.
   The whole row is the link, so it stays an easy target on a phone.
   --------------------------------------------------------------------------- */
.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
}
.doc-list a {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding: 1.15rem clamp(1rem, 2.5vw, 1.5rem);
  background: var(--paper-3);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.doc-list a:hover { border-color: var(--slate-pale); transform: translateY(-2px); }
.doc-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
}
.doc-meta {
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre);
  white-space: nowrap;
}
.doc-desc {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   METHOD FEATURE — the modality Jessica actually specialises in, lifted out of
   the card grid on services.html so it does not read as one option among six.
   Borrows the rail's ochre marker line rather than inventing a new device.
   --------------------------------------------------------------------------- */
.method-feature {
  border-left: 2px solid var(--ochre);
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 48rem;
}
.method-feature h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin: 0.4rem 0 1rem;
}
.method-feature p { max-width: 44rem; }
.method-feature-ask {
  margin: 1.6rem 0 0.85rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
}
.tone-deep .method-feature { border-left-color: var(--ochre-soft); }
.tone-deep .method-feature p { color: rgba(240, 238, 232, 0.78); }

/* --------------------------------------------------------------------------
   10. Steps — a real sequence, so it earns its numbers
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
}
.steps li {
  position: relative;
  padding: 2rem 1.75rem 0 0;
  border-top: 1px solid var(--line-dark);
}
.steps li + li { padding-left: 1.75rem; }
.step-num {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ochre-soft);
  display: block;
  margin-bottom: 0.9rem;
}
.steps h3 { font-size: var(--step-0); margin-bottom: 0.6rem; }
.steps p {
  font-size: 0.95rem;
  color: rgba(240, 238, 232, 0.76);
  max-width: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Pull quote
   -------------------------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.36;
  font-weight: 300;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.quote blockquote p { max-width: none; margin-bottom: 0; }
.quote figcaption {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
}
.quote-mark {
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
  color: var(--ochre);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   12. Facts / detail rows
   -------------------------------------------------------------------------- */

.facts {
  margin: 0;
  border-top: 1px solid var(--line);
}
.fact {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.fact dt {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.fact dd { margin: 0; }
.fact dd p { max-width: 36rem; }
.fact-lead {
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.35rem;
}
.fact-note {
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--slate);
  line-height: 1.55;
  display: block;
  max-width: 34rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip-list li {
  font-family: var(--display);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--paper-3);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 160ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ochre); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid var(--slate);
  border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 0 1.6rem; }
.faq-body p { font-size: 1rem; color: var(--ink-soft); max-width: 40rem; }

/* --------------------------------------------------------------------------
   14. Prose (about page)
   -------------------------------------------------------------------------- */

.prose { max-width: 36rem; }
.prose p { font-size: 1.08rem; line-height: 1.68; }
.prose p + h3 { margin-top: 2.5rem; }
.prose h3 + p { margin-top: 0.9rem; }
.prose .signature {
  font-family: var(--body);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink);
  margin-top: 2rem;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.aside-card {
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky;
  top: 7rem;
}
.aside-card h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.1rem;
}
.aside-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.85rem;
}
.aside-list li {
  font-family: var(--display);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  position: relative;
}
.aside-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.55rem;
  height: 1px;
  background: var(--ochre);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.field .req { color: var(--ochre); }

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--slate-pale); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ochre);
  background: #fff;
  outline: none;
}
.field-hint {
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.5;
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  grid-column: 1 / -1;
}
.consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; flex: none; accent-color: var(--ochre); }
.consent label {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.5;
}

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Field-level errors ---------------------------------------------------- */

.field-error {
  font-family: var(--display);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--error);
  margin: 0;
  max-width: none;
  display: none;
}
.field-error[data-visible="true"] { display: block; }
.field-error--full { grid-column: 1 / -1; margin-top: -0.5rem; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--error);
  background: rgba(154, 59, 50, 0.04);
}
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* Form-level status ------------------------------------------------------ */

.form-status {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--ochre);
  background: rgba(168, 118, 58, 0.08);
  max-width: none;
  margin: 0;
  display: none;
}
.form-status[data-visible="true"] { display: block; }
.form-status[data-tone="error"] {
  border-left-color: var(--error);
  background: rgba(154, 59, 50, 0.07);
  color: var(--ink);
}

/* Confirmation panel — replaces the form once a message has sent --------- */

.form-sent {
  border: 1px solid var(--line);
  border-left: 2px solid var(--ochre);
  background: var(--paper-3);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.form-sent:focus { outline: none; }
.form-sent:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.form-sent h3 { margin-bottom: 1rem; }
.form-sent p { font-size: 1.02rem; color: var(--ink-soft); }
.form-sent-note {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--slate);
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   16. Notices
   -------------------------------------------------------------------------- */

.notice {
  border-left: 2px solid var(--ochre);
  padding: 1.1rem 0 1.1rem 1.4rem;
  background: rgba(168, 118, 58, 0.06);
}
.notice h4 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 0.6rem;
}
.notice p {
  font-family: var(--display);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
}
.notice a { color: var(--ink); text-underline-offset: 3px; }

.notice--urgent { border-left-color: var(--error); background: rgba(154, 59, 50, 0.07); }
.notice--urgent h4 { color: var(--error); }

/* --------------------------------------------------------------------------
   17. Contact detail block
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.detail-list { margin: 0; display: grid; gap: 1.6rem; }
.detail-list > div { display: grid; gap: 0.35rem; }
.detail-list dt {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
}
.detail-list dd { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.detail-list dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.detail-list dd a:hover { border-bottom-color: var(--ochre); }

.hours { margin: 0; display: grid; gap: 0.5rem; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--display);
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.hours dt { color: var(--ink-soft); font-weight: 500; }
.hours dd { margin: 0; color: var(--slate); font-variant-numeric: tabular-nums; }

.map-frame {
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.72) contrast(0.95); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1.25rem; }
.cta-band p { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--deep-2);
  color: rgba(240, 238, 232, 0.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-family: var(--display);
  font-size: 0.88rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--line-dark);
}
.site-foot h4 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre-soft);
  margin-bottom: 1.1rem;
}
.site-foot .brand-name { color: var(--paper); font-size: 1.05rem; }
.site-foot .brand-sub { color: rgba(240, 238, 232, 0.55); }
.site-foot p { max-width: 24rem; line-height: 1.6; margin-bottom: 1rem; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.foot-links a { text-decoration: none; transition: color 160ms var(--ease); }
.foot-links a:hover { color: var(--paper); }

.foot-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(240, 238, 232, 0.5);
  line-height: 1.6;
}
.foot-bottom p { max-width: 42rem; margin: 0; }

.crisis-strip {
  background: var(--deep);
  color: rgba(240, 238, 232, 0.85);
  font-family: var(--display);
  font-size: 0.82rem;
  line-height: 1.6;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line-dark);
}
.crisis-strip .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: baseline; }
.crisis-strip strong { color: var(--ochre-soft); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem; }
.crisis-strip a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.crisis-strip a:hover { border-bottom-color: var(--ochre-soft); }

/* --------------------------------------------------------------------------
   20. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { max-width: 20ch; margin-bottom: 1.5rem; }
.page-head .lede { max-width: 40rem; }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */

/* Scoped to .js so the page is fully readable if JavaScript never runs. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait-stack { max-width: 26rem; }
  .credential-card { position: static; margin-top: 1rem; max-width: none; }
  .two-col,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps li + li { padding-left: 0; }
  .recognition { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The five-item nav plus phone plus button needs about 1030px. Below that it
   becomes a drawer — the header stays sticky, so the phone number stays reachable. */
@media (max-width: 64rem) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -28px rgba(35, 38, 43, 0.45);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 0.95rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a::after { display: none; }
  .menu-toggle { display: flex; }
}

@media (max-width: 52rem) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

@media (max-width: 40rem) {
  .head-inner { gap: 0.9rem; }
  .head-cta { gap: 0.85rem; }
  .head-cta .tel-link { font-size: 0.82rem; }
  .brand { gap: 0.55rem; }
  .brand-mark { width: 1.6rem; height: 1.6rem; }
  .brand-name { font-size: 0.86rem; white-space: nowrap; }
  .brand-sub { display: none; }
  .head-cta .btn { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .recognition { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   23. Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-head, .rail, .crisis-strip, .hero-contours, .menu-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 1.5rem; }
  /* Sections not yet scrolled into view are still at opacity 0 from the
     scroll reveal — without this, printing the fees page straight after
     opening it produced an almost entirely blank sheet. The transition is
     switched off too so the change is instant: a real PDF render printed
     fine without it, but a style check taken while the 700ms fade was still
     running read the sections as hidden, so this removes the window. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Dark bands and the footer set light text on their children, not just on
     themselves, so the children need forcing too or they print white on white. */
  .tone-deep, .tone-deep *, .site-foot, .site-foot * { background: transparent !important; color: #000 !important; }
  .tone-deep, .site-foot { background: #fff !important; }
  .map-frame, .btn-row { display: none !important; }
}