/* ==========================================================================
   Deandrea "DeeDee" Miller, LMSW — Counseling & Family Services
   Single stylesheet. Design tokens live in :root; change them there, not here.
   Palette is sampled from the brand mockups. Nothing on this site is pure
   white — depth comes from layering warm cream tones.
   ========================================================================== */

/* --- Fonts (self-hosted; no third-party requests) ------------------------ */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/ebgaramond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/ebgaramond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/ebgaramond-italic-400.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/sourcesans3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/sourcesans3-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Petit Formal Script";
  src: url("../assets/fonts/petitformalscript-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --cream:        #FAF7F0;
  --cream-fade:   rgba(250, 247, 240, 0);  /* --cream at zero alpha, for feathered edges */
  --cream-raised: #FDFBF6;
  --cream-sunk:   #F1EDE1;
  --cream-edge:   #E8E1D2;
  --brown:        #3B2416;
  --brown-soft:   #5A4030;
  --ink:          #2E2A26;
  --ink-muted:    #6B635A;
  --olive:        #5C6B3C;
  --olive-light:  #8A9A5B;
  --alert:        #7C3A2E;

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-script:  "Petit Formal Script", "Segoe Script", cursive;

  --maxw:   1120px;
  --maxw-prose: 68ch;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(59, 36, 22, .05), 0 10px 26px -14px rgba(59, 36, 22, .18);
  --shadow-lift: 0 2px 4px rgba(59, 36, 22, .06), 0 18px 34px -16px rgba(59, 36, 22, .24);
}

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

/* The hidden attribute is only display:none at UA-stylesheet strength, so any
   class that sets display (.panel-sunk is grid) silently overrides it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brown);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--olive); text-underline-offset: .18em; }
a:hover { color: var(--brown); }

img { max-width: 100%; height: auto; display: block; }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--brown); color: var(--cream);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.section { padding: clamp(2.6rem, 5vw, 4.4rem) 0; }
.section--tight { padding: clamp(1.8rem, 3vw, 2.6rem) 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--olive); margin: 0 0 .8rem;
}

.script { font-family: var(--font-script); color: var(--olive); font-weight: 400; }

.lede { font-size: 1.09rem; color: var(--brown-soft); }

.centered { text-align: center; }
.measure { max-width: 62ch; margin-inline: auto; }

/* --- Ornament divider (the leaf sprig from her brand) -------------------- */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: .85rem; margin: 1.1rem auto 1.4rem;
  max-width: 340px; color: var(--olive-light);
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--cream-edge), transparent);
}
.ornament svg { flex: none; width: 30px; height: 12px; }

/* --- Header / navigation ------------------------------------------------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--cream-edge);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 46px; height: auto; }
.brand-name {
  font-family: var(--font-display); color: var(--brown);
  font-weight: 600; font-size: 1.02rem; line-height: 1.15;
}
.brand-role {
  font-family: var(--font-body); color: var(--olive);
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
}

.nav ul {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav li + li { border-left: 1px solid var(--cream-edge); }
.nav a {
  display: block; padding: .45rem .95rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--brown-soft);
}
.nav a:hover { color: var(--olive); }
.nav a[aria-current="page"] {
  color: var(--olive);
  box-shadow: inset 0 -2px 0 var(--olive);
}

.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  background: var(--cream-raised); color: var(--brown);
  border: 1px solid var(--cream-edge); border-radius: var(--radius);
  padding: .55rem .9rem; font: 600 .78rem var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle svg { width: 16px; height: 16px; }

/* --- Buttons ------------------------------------------------------------- */
.btn-schedule {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--olive); color: var(--cream);
  text-decoration: none; border-radius: var(--radius);
  padding: .85rem 1.7rem;
  font: 600 .92rem var(--font-body);
  letter-spacing: .11em; text-transform: uppercase;
  box-shadow: var(--shadow-card);
  transition: background .18s ease, transform .18s ease;
}
.btn-schedule:hover {
  background: var(--brown); color: var(--cream); transform: translateY(-1px);
}
.btn-schedule svg { width: 18px; height: 18px; flex: none; }

/* Same size and shape as .btn-schedule so neither route reads as the lesser
   option, but outlined rather than filled so the page still has one clear
   first choice. Used for the Gmail fallback on the schedule page. */
.btn-schedule--alt {
  background: transparent; color: var(--brown);
  box-shadow: inset 0 0 0 1.5px var(--olive-light);
}
.btn-schedule--alt:hover { background: var(--cream-raised); color: var(--brown); }

.btn-quiet {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .82rem var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive); text-decoration: none;
}
.btn-quiet:hover { color: var(--brown); }
.btn-quiet::after { content: "→"; transition: transform .18s ease; }
.btn-quiet:hover::after { transform: translateX(3px); }

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero { text-align: center; padding: clamp(2rem, 4vw, 3.2rem) 0 1rem; }
.page-hero img.hero-mark { width: min(260px, 62vw); margin: 0 auto 1.2rem; }
.page-hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.15rem);
  letter-spacing: .015em; text-transform: uppercase;
}
.page-hero .script { font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); display: block; margin-bottom: 1.4rem; }

/* --- Card grid ----------------------------------------------------------- */
/* Cards stretch to a common height per row. Left to their natural heights the
   grid reads as ragged and unfinished, since the service descriptions vary a
   lot in length. */
.card-grid {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--cream-raised);
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius);
  padding: 1.7rem 1.35rem;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card .icon { color: var(--olive); width: 40px; height: 40px; margin: 0 auto .9rem; }
.card h3 {
  font-size: 1.06rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .55rem;
}
.card p { font-size: .95rem; color: var(--ink); line-height: 1.65; }
.card .ornament { max-width: 90px; margin: .5rem auto .85rem; }

/* --- Home: hero ---------------------------------------------------------- */
.hero-home { text-align: center; padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.4rem); }
.hero-home img { width: min(330px, 74vw); margin: 0 auto 1.5rem; }
.hero-home h1 {
  font-size: clamp(1.75rem, 1rem + 2.9vw, 2.9rem);
  letter-spacing: .02em; margin-bottom: .35rem;
}
.hero-home .role {
  font: 600 .84rem var(--font-body);
  letter-spacing: .24em; text-transform: uppercase; color: var(--olive);
  margin-bottom: 1.1rem;
}
.hero-home .tagline { font-family: var(--font-script); color: var(--olive); font-size: clamp(1.25rem, .9rem + 1.5vw, 1.85rem); }

/* --- Home: pathway cards ------------------------------------------------- */
.pathway {
  display: block; text-decoration: none; text-align: left;
  background: var(--cream-raised);
  border: 1px solid var(--cream-edge); border-radius: var(--radius);
  padding: 1.9rem 1.7rem; box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.pathway .icon { color: var(--olive); width: 34px; height: 34px; margin-bottom: .9rem; }
.pathway h3 { font-size: 1.28rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
.pathway p { color: var(--ink); font-size: .97rem; margin-bottom: 1rem; }

/* --- Home signature: Beneath the Surface --------------------------------- */
/* Her logo names wounds in the roots and outcomes in the leaves. That
   duality is the thesis of her practice, so it gets to be the page's
   one memorable moment. */
.beneath { background: var(--cream-sunk); border-block: 1px solid var(--cream-edge); }

.duality {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.6rem); align-items: start;
  margin-top: 2rem;
}
.duality-col { text-align: center; }
.duality-col h3 {
  font-size: .82rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--olive);
  margin-bottom: 1.1rem;
}
.word-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .55rem; }
.word-cloud span {
  font-family: var(--font-display); font-size: 1.02rem;
  padding: .2rem .7rem; border-radius: 999px;
}
.roots span {
  color: var(--brown-soft); font-style: italic;
  background: rgba(59, 36, 22, .05);
}
.leaves span {
  color: var(--olive); background: rgba(92, 107, 60, .1);
}
.trunk { width: 1px; align-self: stretch; background: linear-gradient(to bottom, var(--cream-edge), var(--olive-light), var(--cream-edge)); position: relative; }
.trunk::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--olive); border-radius: 50%;
}

/* --- Home: approach ------------------------------------------------------ */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1.8rem; }
.approach-item { text-align: center; }
.approach-item .icon { color: var(--olive); width: 34px; height: 34px; margin: 0 auto .8rem; }
.approach-item h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.approach-item p { font-size: .95rem; color: var(--ink); }

/* Actions under the home page's welcome paragraph. Centred to match the copy
   above them, and stacking on a phone so neither tap target has to shrink.
   The margin is larger above than below: the buttons belong to the paragraph
   they follow, not to the cards beneath. */
.lede-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1rem 1.6rem; margin: 2.2rem 0 .4rem;
}

/* --- Home: introduction -------------------------------------------------- */
/* Her portrait beside the block that names her. Narrower than .wrap and
   centred in it, so the photo and text stay a readable pair instead of being
   flung to opposite edges of a wide screen. Asymmetric on purpose — the three
   sections above it are all centred, and this is the last beat before the CTA.
   The .portrait class is shared with the about page: it carries the feathered
   edge and the 348:528 frame, which this headshot was cropped to match. */
.intro-row {
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 860px; margin-inline: auto;
}
/* Lighter than the about page's 30px. That value is tuned for a full-length
   photo, where the fade lands on background; here the subject's head sits near
   the top edge and a 30px fade dissolves her hair. */
.intro-row .portrait { --feather: 16px; }

/* --- About --------------------------------------------------------------- */
/* Standalone prose blocks centre in the wrap; inside .bio-top the column is
   already positioned by the grid, so it stays pinned beside the portrait. */
.prose { max-width: var(--maxw-prose); margin-inline: auto; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.72; }
.prose p { margin-bottom: 1.15em; }
.bio-top .prose { margin-inline: 0; }

/* Pulled line between beats of the bio — her own words, set as a breath. */
.pull-quote { max-width: 38ch; margin: clamp(2.2rem, 4.5vw, 3.4rem) auto; text-align: center; }
.pull-quote .ornament { margin: 0 auto .9rem; max-width: 250px; }
.pull-quote p {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.42rem, 3.6vw, 2rem); line-height: 1.34;
  color: var(--olive);
  text-wrap: balance;
}

.closing-line {
  max-width: 46ch; margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  text-align: center;
  font-family: var(--font-display); font-size: 1.24rem; line-height: 1.6;
  color: var(--brown-soft);
  text-wrap: balance;
}

/* Climbing vines in the gutters beside the centred bio.
   One tileable 60x200 segment repeated down the y-axis: the stem leaves the
   top and enters the bottom on the same tangent, so the joins are invisible.
   The right vine is the left one mirrored. Decorative only — drawn in
   pseudo-elements so there is nothing for a screen reader to announce. */
.vined { position: relative; }
.vined::before,
.vined::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='200' viewBox='0 0 60 200'%3E%3Cpath d='M30 0C46 40 46 60 30 100C14 140 14 160 30 200' fill='none' stroke='%238A9A5B' stroke-width='1.3' stroke-opacity='.5'/%3E%3Cpath d='M42 50c2-7 9-11 16-11 0 8-7 13-16 11z' fill='%238A9A5B' fill-opacity='.34'/%3E%3Cpath d='M42 50c2 7 9 11 16 11 0-8-7-13-16-11z' fill='%238A9A5B' fill-opacity='.24'/%3E%3Cpath d='M18 150c-2-7-9-11-16-11 0 8 7 13 16 11z' fill='%238A9A5B' fill-opacity='.34'/%3E%3Cpath d='M18 150c-2 7-9 11-16 11 0-8 7-13 16-11z' fill='%238A9A5B' fill-opacity='.24'/%3E%3C/svg%3E") repeat-y center top;
  /* Grow in at the top, thin out at the bottom rather than cutting off. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
}
.vined::before { left: 60px; }
.vined::after  { right: 60px; transform: scaleX(-1); }

/* Below this width the gutters are too narrow to hold a vine without
   crowding the text, so it goes away entirely. */
@media (max-width: 1080px) {
  .vined::before, .vined::after { display: none; }
}

.bio-top { display: grid; grid-template-columns: 340px 1fr; gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start; }
/* align-self overrides .bio-top's align-items:start so the portrait centres
   against the four paragraphs beside it instead of hanging from the top. */
.portrait { position: relative; align-self: center; --feather: 30px; }
.portrait img { width: 100%; aspect-ratio: 348 / 528; object-fit: cover; }

/* The two photos are opposite orientations, so equal columns would force one of
   them into a hard crop. Columns are instead weighted to each photo's aspect
   ratio (1.333 wide per unit height, 1.0 wide per unit height), which makes the
   two images land at exactly the same height without either being squashed. */
.photo-row { display: grid; grid-template-columns: 1.333fr 1fr; gap: 1.15rem; margin: clamp(2.2rem, 4.5vw, 3.2rem) 0; }
.photo-row figure { margin: 0; position: relative; --feather: 44px; }
.photo-row figure:nth-child(1) img { aspect-ratio: 4 / 3; }
.photo-row figure:nth-child(2) img { aspect-ratio: 1 / 1; }
.photo-row img { width: 100%; object-fit: cover; }

/* Feather photo edges into the page rather than framing them: an overlay of
   the page cream fading to nothing on all four sides. A border or shadow would
   defeat it, so feathered photos carry neither. The distance is a length, not a
   percentage, so photos of different widths soften by the same visual amount —
   each host sets its own --feather. Only works over the flat cream background;
   over a panel or a tinted section this reads as a cream halo. */
.photo-row figure::after,
.portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,  var(--cream), var(--cream-fade) var(--feather),
                    var(--cream-fade) calc(100% - var(--feather)), var(--cream)),
    linear-gradient(to bottom, var(--cream), var(--cream-fade) var(--feather),
                    var(--cream-fade) calc(100% - var(--feather)), var(--cream));
}
.photo-row figcaption { font-size: .86rem; color: var(--ink-muted); margin-top: .5rem; text-align: center; }

.credentials { list-style: none; margin: 0; padding: 0; max-width: var(--maxw-prose); }
.credentials li {
  position: relative; padding-left: 1.5rem; margin-bottom: .6rem;
  font-family: var(--font-display); font-size: 1.08rem; color: var(--brown-soft);
}
.credentials li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--olive-light);
}

/* --- Panels -------------------------------------------------------------- */
.panel-sunk {
  background: var(--cream-sunk); border: 1px solid var(--cream-edge);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
}
.panel-sunk .icon { color: var(--olive); width: 46px; height: 46px; }
.panel-sunk h2 { font-size: 1.3rem; margin-bottom: .7rem; }
.panel-sunk p { font-size: .97rem; }
.panel-sunk hr { border: 0; border-top: 1px solid var(--cream-edge); margin: 1rem 0; }

/* --- Scheduling routes --------------------------------------------------- */
.route + .route, .route + p, .route + .notice { margin-top: 1.15rem; }
.route .btn-schedule { margin: .4rem 0 .2rem; }
.route .notice { margin: 1rem 0 .2rem; }
.route-detail {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--brown);
  word-break: break-word; margin-bottom: .6rem;
}
.route-detail a { color: var(--brown); text-decoration: none; }
.route-detail a:hover { color: var(--olive); text-decoration: underline; }
.route-note { font-size: .89rem; color: var(--ink-muted); margin-bottom: 0; }
/* Notes stack when a route needs more than one; .route-note zeroes its bottom
   margin, so the gap has to come from the pair rather than the element. */
.route-note + .route-note { margin-top: .6rem; }

/* The primary button and its fallback link. Wraps to two lines on a narrow
   phone rather than shrinking the tap target; align-items keeps the quiet link
   centred against the taller solid button when they do sit side by side. */
.btn-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 1.4rem; margin-bottom: 1rem;
}

.notice {
  background: var(--cream-raised); border: 1px solid var(--cream-edge);
  border-left: 3px solid var(--olive-light);
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
  font-size: .95rem; color: var(--brown-soft); margin-bottom: 1rem;
}
.notice strong { color: var(--brown); }
.notice--urgent { border-left-color: var(--alert); }

/* --- Crisis panel (Resources) -------------------------------------------- */
.crisis-panel {
  background: var(--cream-raised); border: 1px solid var(--cream-edge);
  border-top: 4px solid var(--alert); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-card);
}
.crisis-panel h2 { color: var(--alert); font-size: 1.35rem; margin-bottom: .3rem; }
.crisis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.3rem; }
.crisis-item {
  background: var(--cream); border: 1px solid var(--cream-edge);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.crisis-item h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.crisis-item .number {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--alert); text-decoration: none; display: inline-block; margin-bottom: .2rem;
}
.crisis-item .number:hover { text-decoration: underline; }
.crisis-item p { font-size: .9rem; color: var(--ink-muted); margin: 0; }

/* --- Resources list ------------------------------------------------------ */
.resource-group { margin-bottom: 2.2rem; }
.resource-group h3 { font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; }
.resource-list { list-style: none; margin: .9rem 0 0; padding: 0; }
.resource-list li {
  background: var(--cream-raised); border: 1px solid var(--cream-edge);
  border-radius: var(--radius); padding: .9rem 1.2rem; margin-bottom: .6rem;
  color: var(--ink-muted); font-size: .96rem;
}

/* Stands in for a resource-list until DeeDee supplies the content. Same card
   as a list item so the section keeps its shape when the real items land. */
.coming-soon {
  background: var(--cream-raised); border: 1px solid var(--cream-edge);
  border-radius: var(--radius); padding: .9rem 1.2rem; margin: .9rem 0 0;
  color: var(--olive); font-family: var(--font-display); font-style: italic;
  font-size: 1.02rem;
}

/* --- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.contact-card {
  background: var(--cream-raised); border: 1px solid var(--cream-edge);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-card); text-align: center;
}
.contact-card .icon { color: var(--olive); width: 42px; height: 42px; margin: 0 auto 1rem; }
.contact-card .email {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--brown);
  word-break: break-word; display: inline-block; margin-bottom: .35rem;
}
.contact-card .phone { margin-bottom: .5rem; }
/* Sits between the phone number and the button, so the number is never mistaken
   for a landline that can't take a text. Narrower than the card to keep it from
   running the full width as a wall of small type. */
.contact-card .card-note {
  font-size: .89rem; color: var(--ink-muted); line-height: 1.55;
  max-width: 30ch; margin: 0 auto 1.2rem;
}
.contact-card .phone a {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--brown);
  text-decoration: none;
}
.contact-card .phone a:hover { color: var(--olive); text-decoration: underline; }
.expect { list-style: none; margin: 1rem 0 0; padding: 0; }
.expect li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; font-size: .97rem; }
.expect li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--olive-light);
}

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  background: var(--cream-sunk); border-top: 1px solid var(--cream-edge);
  text-align: center; padding: clamp(2.2rem, 4vw, 3.2rem) 0;
}
.cta-band .script { display: block; font-size: clamp(1.2rem, .9rem + 1.4vw, 1.75rem); margin-bottom: 1.3rem; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--brown); color: var(--cream-sunk);
  padding: 2.4rem 0 2rem; font-size: .92rem;
}
.site-footer a { color: var(--cream-sunk); }
.site-footer a:hover { color: var(--olive-light); }
.footer-top { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: flex-start; }
.footer-name { font-family: var(--font-display); font-size: 1.22rem; color: var(--cream); margin-bottom: .2rem; }
.footer-tag { font-family: var(--font-script); color: var(--olive-light); font-size: 1.08rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.disclaimer {
  margin-top: 1.8rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(250, 247, 240, .16);
  font-size: .84rem; color: rgba(250, 247, 240, .68); line-height: 1.6;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bio-top { grid-template-columns: 260px 1fr; }
}

/* The nav collapses earlier than everything else. Seven items plus the brand
   need about 1050px; below that "Family & Court" wraps mid-label and the brand
   name breaks across two lines. This sat at 860px when there were six items.
   It is deliberately its own query rather than moving the breakpoint below:
   the photo grids and prose columns in the 860 block are fine at 900-1000px
   and restacking them there would be a regression. */
@media (max-width: 1050px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream-raised); border-bottom: 1px solid var(--cream-edge);
    box-shadow: var(--shadow-card);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav li + li { border-left: 0; border-top: 1px solid var(--cream-edge); }
  .nav a { padding: .95rem 1.25rem; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--olive); }
  .site-header { position: relative; }
  .header-inner { position: relative; }
}

@media (max-width: 860px) {
  .site-header { position: relative; }
  .header-inner { position: relative; }

  .approach { grid-template-columns: 1fr; gap: 1.9rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .bio-top { grid-template-columns: 1fr; }
  /* Stacked, the portrait sits above the text and centres itself; the copy
     below it stays centred to match the rest of the home page on a phone. */
  .intro-row { grid-template-columns: 1fr; text-align: center; }
  .portrait { max-width: 320px; margin-inline: auto; }
  .duality { grid-template-columns: 1fr; gap: 1.6rem; }
  .trunk { width: 100%; height: 1px; background: linear-gradient(to right, var(--cream-edge), var(--olive-light), var(--cream-edge)); }
  .panel-sunk { grid-template-columns: 1fr; }
  .panel-sunk .icon { margin-inline: auto; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .card-grid, .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .crisis-grid { grid-template-columns: 1fr; }
  /* Stacked, a full-width 4:5 frame would run absurdly tall on a phone. */
  .photo-row { grid-template-columns: 1fr; }
  .photo-row figure:nth-child(2) { max-width: 340px; margin-inline: auto; }
  .footer-top { flex-direction: column; }
}

/* --- Motion -------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover, .pathway:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .cta-band, .nav-toggle { display: none; }
  body { background: var(--cream); }
}