/* ==========================================================================
   Judith Andrews, Ph.D.
   Stylesheet. Tokens first, then base, components, sections, motion.
   Breakpoints (chosen where the composition changes, not framework defaults):
     700px   tablet compositions begin (two column layouts, overlapping panel)
     980px   desktop editorial grid (12 columns)
     1080px  full header navigation
   ========================================================================== */

/* ---------- Fonts (self hosted, variable) ---------- */
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Metric matched fallbacks keep layout shift minimal while fonts load */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88%;
  ascent-override: 104%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 93%;
  ascent-override: 110%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --petrol: #0E4B5A;
  --petrol-hover: #0A3E4B;
  --petrol-deep: #0A3A46;
  --dusty: #5C8A8F;
  --dusty-light: #A9C6C6;
  --plum: #7A5A73;
  --plum-light: #DCC7D5;
  --sand: #E6D9C8;
  --sand-soft: #EEE5D8;
  --paper: #F3EDE3;
  --ivory: #F8F4ED;
  --surface: #FCFAF7;
  --ink: #25242A;
  --ink-soft: #3A383F;
  --muted: #68646A;
  /* Section grounds. Neighbours always change hue family (warm, cool, plum)
     or step in depth, never repeat, and never jump further than the page can absorb. */
  --tone-ivory: #F8F4ED;   /* warm light */
  --tone-surface: #FCFAF7; /* bright neutral */
  --tone-linen: #F3EBDF;   /* warm, a step deeper */
  --tone-sand: #EDE2D2;    /* warm, deeper again */
  --tone-mist: #E7EFED;    /* cool light, from dusty teal */
  --tone-sea: #DCE8E6;     /* cool, a step deeper */
  --tone-plum: #F3EBF0;    /* plum light */
  --tone-petrol: #0E4B5A;  /* the authority color */
  --tone-ink: #25242A;     /* footer only */

  --rule: rgba(37, 36, 42, 0.14);
  --rule-strong: rgba(37, 36, 42, 0.22);
  --on-dark: #F8F4ED;
  --on-dark-soft: rgba(248, 244, 237, 0.84);
  --rule-dark: rgba(248, 244, 237, 0.16);

  --serif: "Cormorant", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Fallback", "Segoe UI", Arial, sans-serif;

  --gutter: max(clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --max: 76rem;
  --max-wide: 86rem;
  --bleed: max(var(--gutter), (100vw - var(--max)) / 2);
  --bleed-wide: max(var(--gutter), (100vw - var(--max-wide)) / 2);

  --header-h: 3.5rem;
  --radius: 3px;

  --ease: cubic-bezier(0.33, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.2, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .22 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 980px) {
  :root { --header-h: 4.1rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(14, 75, 90, 0.12);
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main, .site-footer { overflow-x: clip; }

/* ---------- Section tone map ----------
   warm  ivory      Hero
   cool  mist       Practice
   warm  sand       Approach (the photograph straddles mist into sand)
   bright surface   Children
   cool  sea        Individuals
   dark  petrol     Couples
   warm  linen      Families
   plum  plum       Evaluation
   warm  ivory      Experience
   cool  mist       About
   warm  sand       Disaster response
   bright surface   Professional community
   plum  plum       FAQ
   warm  linen      Appointments and Fees
   bright surface   Patient Forms
   cool  sea        Houston (Location)
   dark  petrol     Contact
   ink              Footer
*/
.hero        { --bg: var(--tone-ivory); }
.practice    { --bg: var(--tone-mist); }
.approach    { --bg: var(--tone-sand); }
.children    { --bg: var(--tone-surface); }
.individuals { --bg: var(--tone-sea); }
.couples     { --bg: var(--tone-petrol); }
.families    { --bg: var(--tone-linen); }
.evaluation  { --bg: var(--tone-plum); }
.experience  { --bg: var(--tone-ivory); }
.about       { --bg: var(--tone-mist); }
.response    { --bg: var(--tone-sand); }
.community   { --bg: var(--tone-surface); }
.faq         { --bg: var(--tone-plum); }
.fees        { --bg: var(--tone-linen); }
.forms       { --bg: var(--tone-surface); }
.houston     { --bg: var(--tone-sea); }
.contact     { --bg: var(--tone-petrol); }
main > section { background-color: var(--bg); }
.approach {
  background: linear-gradient(to bottom, var(--tone-mist) 0, var(--tone-mist) var(--straddle), var(--bg) var(--straddle));
}

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: rgba(122, 90, 115, 0.2); color: var(--ink); }
.tone-petrol ::selection, .site-footer ::selection { background: rgba(230, 217, 200, 0.3); color: var(--on-dark); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}
.tone-petrol :focus-visible,
.site-footer :focus-visible { outline-color: var(--sand); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--petrol);
  color: var(--surface);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Layout helpers ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 1.1rem;
}
.eyebrow__dot { color: var(--dusty); margin-inline: 0.45em; }
@media (max-width: 479.98px) {
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; }
  .eyebrow__dot { margin-inline: 0.3em; }
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.45rem + 2.1vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.h2--large { font-size: clamp(2.25rem, 1.45rem + 3vw, 4rem); line-height: 1.04; }
.h2--medium { font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.8rem); }

.prose { max-width: 37rem; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.prose__lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.prose .prose__lead + p { margin-top: 1.25em; }

.lede { max-width: 34rem; text-wrap: pretty; color: var(--ink-soft); }

.pull { margin: 0; }
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pull__line {
  display: block;
  padding: 0 0.14em 0.14em;
  margin: 0 -0.14em -0.14em;
}
.pull__line--strong {
  font-style: normal;
  font-weight: 500;
  color: var(--petrol);
}

.folio {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 0.8;
  color: var(--dusty);
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn--primary { background: var(--petrol); color: var(--surface); }
.btn--primary:hover {
  background: var(--petrol-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(14, 75, 90, 0.7);
}
.btn--light { background: var(--ivory); color: var(--petrol); }
.btn--light:hover {
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.55);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--small { min-height: 2.75rem; padding: 0.6rem 1.15rem; font-size: 0.94rem; }

.text-link,
.inline-link {
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(14, 75, 90, 0.3), rgba(14, 75, 90, 0.3));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size 0.45s var(--ease-out), color 0.2s var(--ease);
}
.text-link:hover, .inline-link:hover,
.text-link:focus-visible, .inline-link:focus-visible { background-size: 100% 1px, 100% 1px; }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--petrol);
  background-position: 0 calc(100% - 0.55rem), 0 calc(100% - 0.55rem);
}
.inline-link { color: var(--petrol); padding-bottom: 1px; }
.tone-petrol .inline-link { color: var(--on-dark); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 237, 0);
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.site-header.is-scrolled,
.site-header.menu-open {
  background: var(--ivory);
  box-shadow: 0 1px 0 rgba(37, 36, 42, 0.07), 0 10px 30px -26px rgba(37, 36, 42, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.38rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
}
.brand__role {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.site-nav__list a:hover { color: var(--petrol); }
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list a[aria-current="true"] { color: var(--petrol); }

.site-nav__extra { display: none; }

.site-header__cta { display: none; flex: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.25rem 0 0.5rem;
  margin-right: -0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.menu-toggle__icon {
  position: relative;
  width: 1.35rem;
  height: 0.7rem;
}
.menu-toggle__icon span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), top 0.35s var(--ease);
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: calc(50% - 0.75px); }
.menu-toggle__icon span:nth-child(3) { top: calc(100% - 1.5px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Phone header */
@media (max-width: 699.98px) {
  .site-header { box-shadow: 0 1px 0 var(--rule); }
  .site-header.is-scrolled, .site-header.menu-open { box-shadow: 0 1px 0 var(--rule), 0 10px 30px -26px rgba(37, 36, 42, 0.5); }
  .brand__name { font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.28rem); }
  .brand__role { margin-top: 0.15rem; letter-spacing: 0.18em; }
  .menu-toggle { gap: 0.65rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; }
  .menu-toggle__icon { width: 1.4rem; height: 0.8rem; }
}

/* Mobile and tablet navigation panel (enhanced with JS) */
@media (max-width: 1079.98px) {
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ivory);
    box-shadow: 0 24px 40px -30px rgba(37, 36, 42, 0.45);
    padding: 0.5rem var(--gutter) 1.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
    max-height: calc(100dvh - var(--header-h));
    overscroll-behavior: contain;
    overflow-y: auto;
  }
  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out), visibility 0s;
  }
  .js .site-nav__list { display: grid; }
  .js .site-nav__list a {
    display: flex;
    width: 100%;
    min-height: 3.25rem;
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--rule);
  }
  .js .site-nav__list a::after { display: none; }
  .js .site-nav__extra {
    display: grid;
    gap: 0.25rem;
    margin-top: 1.25rem;
  }
  .site-nav__detail {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--petrol);
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
  }

  /* Without JS: a simple wrapped row of links under the name */
  .no-js .menu-toggle { display: none; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 0.5rem; }
  .no-js .site-nav { order: 3; width: 100%; }
  .no-js .site-nav__list { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
}
@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 1080px) {
  .menu-toggle { display: none; }
  .site-nav { margin-left: auto; }
  .site-nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
  .brand { margin-right: 0; }
  .site-header__cta { margin-left: clamp(1.25rem, 2.5vw, 2.5rem); }
}

/* ==========================================================================
   Media frames and placeholders
   Each .frame reserves its aspect ratio per breakpoint through
   --r-m (mobile), --r-t (tablet), --r-d (desktop). Real images dropped in
   later inherit the same box, so nothing shifts.
   ========================================================================== */
.frame {
  --r: var(--r-m, 3 / 2);
  --pos: var(--pos-m, 50% 50%);
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--r);
  border-radius: var(--radius);
  background: var(--sand);
}
@media (min-width: 700px) {
  .frame { --r: var(--r-t, var(--r-m, 3 / 2)); --pos: var(--pos-t, var(--pos-m, 50% 50%)); }
}
@media (min-width: 980px) {
  .frame { --r: var(--r-d, var(--r-t, 3 / 2)); --pos: var(--pos-d, var(--pos-t, 50% 50%)); }
}
.frame > img,
.frame > picture,
.frame > picture > img,
.frame > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.frame > img,
.frame > picture > img {
  object-fit: cover;
  object-position: var(--pos);
}

.ph {
  --ph-a: #EDE3D6;
  --ph-b: #DDCDB9;
  --ph-ink: #4A4038;
  display: flex;
  align-items: flex-end;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  color: var(--ph-ink);
  background-color: var(--ph-b);
  background-image:
    var(--grain),
    linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 64%),
    radial-gradient(120% 90% at 80% 8%, rgba(255, 255, 255, 0.5), transparent 62%),
    linear-gradient(165deg, var(--ph-a), var(--ph-b));
}
.ph__label {
  display: grid;
  gap: 0.3rem;
  max-width: 24rem;
}
.ph__kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  opacity: 0.8;
}
.ph__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.15;
}
.ph__note {
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0.88;
}
.ph--ivory     { --ph-a: #F4EEE5; --ph-b: #E5DACB; }
.ph--sand      { --ph-a: #EDE3D6; --ph-b: #DBCAB5; }
.ph--sand-deep { --ph-a: #E8DCCB; --ph-b: #D2BFA6; --ph-ink: #45392F; }
.ph--paper     { --ph-a: #F7F2EA; --ph-b: #E7DED1; }
.ph--teal      { --ph-a: #DDE6E4; --ph-b: #BFD0CF; --ph-ink: #2C4A50; }
.ph--teal-deep { --ph-a: #CFDCDB; --ph-b: #A8BFC0; --ph-ink: #24434A; }
.ph--sand-teal { --ph-a: #E9E2D6; --ph-b: #C8D3CF; --ph-ink: #34494C; }
.ph--plum      { --ph-a: #EEE5EA; --ph-b: #D9C9D3; --ph-ink: #4F3C4B; }
.ph--petrol    { --ph-a: #22606E; --ph-b: #15505E; --ph-ink: rgba(248, 244, 237, 0.9); }
.ph--hero .ph__label { max-width: 27rem; }
@media (max-width: 699.98px) {
  .ph--hero { align-items: flex-start; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(1rem, 2.6vw, 2.75rem); }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.55rem, 1.65rem + 3.8vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
}
.hero__audience {
  margin-top: clamp(0.9rem, 1.6vw, 1.35rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.25;
  color: var(--petrol);
}
.hero__body { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.hero__body p { max-width: 35rem; color: var(--ink-soft); text-wrap: pretty; }
.hero__body p + p { margin-top: 0.85em; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
}

.hero__media { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* Portrait: Dr. Andrews' photograph on its own, set like a mounted print.
   The frame keeps a 4:5 shape, so a new photograph only needs the image files replaced. */
.profile {
  position: relative;
  z-index: 2;
  margin: 0;
  background: var(--sand);
  border-radius: 4px;
  overflow: hidden;
  /* Even, layered shadow: close contact shade plus a wide soft falloff on every side,
     so the photograph lifts off the page without drawing the eye to the shadow itself. */
  box-shadow:
    0 0 0 1px rgba(37, 36, 42, 0.04),
    0 1px 3px rgba(37, 36, 42, 0.06),
    0 6px 16px rgba(37, 36, 42, 0.07),
    0 18px 42px rgba(14, 75, 90, 0.11);
}
.profile__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ==========================================================================
   Phones (below 700px): the hero is composed for the phone itself
   The headline and her photograph share the top of the screen, side by side,
   with the italic line tucked under the headline. The introduction then runs
   the full width, both actions follow, then the family photograph.
   ========================================================================== */
@media (max-width: 699.98px) {
  .hero { padding-top: 0.7rem; }
  .hero .eyebrow { margin-bottom: 0.5rem; }

  /* headline column and photograph column */
  .hero__grid { grid-template-columns: minmax(0, 1fr) 35%; column-gap: clamp(0.85rem, 3.5vw, 1.25rem); }
  .hero__head, .hero__body { display: contents; }
  .hero .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .hero__title { grid-column: 1; grid-row: 2; }
  .hero__audience { grid-column: 1; grid-row: 3; align-self: start; }
  .profile { grid-column: 2; grid-row: 2 / 4; align-self: start; }
  .hero__text { grid-column: 1 / -1; grid-row: 4; margin-top: 1.15rem; }
  .hero__media { grid-column: 1 / -1; grid-row: 5; }

  .hero__title {
    /* sized to the screen so it always sets in three lines beside the photograph */
    max-width: none;
    font-size: clamp(1.6rem, 7.9vw, 2.35rem);
    line-height: 1.04;
  }
  .hero__audience {
    margin-top: 0.55rem;
    font-size: clamp(1rem, 0.62rem + 1.9vw, 1.2rem);
    line-height: 1.3;
    text-wrap: balance;
  }
  .hero__body p { font-size: 0.9375rem; line-height: 1.5; text-wrap: wrap; }
  .hero__body p + p { margin-top: 0.55em; }

  .profile {
    width: 100%;
    /* top edge level with the capitals of the headline */
    margin-top: 0.4rem;
    border-radius: 10px;
  }

  /* Two equal buttons side by side */
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.1rem; }
  .actions .btn,
  .actions .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
  .actions .text-link {
    background: rgba(14, 75, 90, 0.09);
    background-image: none;
    color: var(--petrol);
    transition: background-color 0.25s var(--ease);
  }
  .actions .text-link:active { background-color: rgba(14, 75, 90, 0.16); }

  .hero__media { margin-top: 2rem; }
}
/* Narrowest phones (under 360px) */
@media (max-width: 359.98px) {
  .actions { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}
/* The head has no box of its own on phones, so its parts make the entrance individually */
@media (max-width: 699.98px) and (prefers-reduced-motion: no-preference) {
  .js .hero__head > * { animation: enter-rise 1.1s var(--ease-out) 0.05s both; }
  .js .hero__head > .hero__title { animation-delay: 0.1s; }
  .js .hero__head > .hero__audience { animation-delay: 0.16s; }
}


/* Tablet: text and photograph share a row, the family photograph below */
@media (min-width: 700px) {
  .hero__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  /* the body wrapper steps aside so its text and the photograph each take their own place in the grid */
  .hero__body { display: contents; }
  .hero__head { grid-column: 1 / -1; grid-row: 1; }
  .hero__text { grid-column: 1 / 6; grid-row: 2; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
  .hero__media { grid-column: 1 / -1; grid-row: 3; margin-top: 4rem; }
  .profile {
    grid-column: 6 / -1;
    grid-row: 2 / 4;
    align-self: start;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }
  .hero__title { max-width: 11.5em; }
}
/* Tablet only: the headline keeps to the left so the photograph can start just below the headline's top line, as on desktop */
@media (min-width: 700px) and (max-width: 979.98px) {
  .hero__head { grid-column: 1 / 6; }
  .profile { grid-row: 1 / 3; align-self: start; margin-top: clamp(2rem, 1.2rem + 1.2vw, 2.75rem); margin-bottom: 0; }
}

/* Desktop: headline and text to the left, the photograph to the right, overlapping the family photograph */
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__head { grid-column: 1 / 9; }
  .hero__text { grid-column: 1 / 7; }
  .hero__media { grid-column: 1 / -1; margin-top: clamp(2rem, 3vw, 3rem); }
  .profile {
    grid-column: 8 / -1;
    justify-self: end;
    width: min(100%, clamp(18.5rem, 27vw, 25rem));
    /* Top edge level with the headline, so headline, text and photograph read as one block
       and no empty corner opens above the photograph */
    grid-row: 1 / 3;
    align-self: start;
    margin-top: clamp(3.5rem, 2.7rem + 1.2vw, 4.25rem);
    margin-bottom: 0;
    margin-right: clamp(2.5rem, 5vw - 0.5rem, 6.5rem);
  }
  .hero__title { max-width: 11.5em; }
}

/* ==========================================================================
   Practice navigator
   ========================================================================== */
.practice {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 6.5vw, 6rem);
}
.practice__intro .lede { margin-top: 1.4rem; }
.contents { margin-top: clamp(2rem, 5vw, 3rem); }
.contents__list { border-top: 1px solid var(--rule); }
.contents__link {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num title arrow"
    "num desc arrow";
  column-gap: 0.9rem;
  align-items: baseline;
  padding: 1rem 0.5rem 1.05rem;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.35s var(--ease);
}
.contents__num {
  grid-area: num;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--dusty);
}
.contents__title {
  grid-area: title;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  line-height: 1.1;
  color: var(--ink);
  transition: color 0.3s var(--ease), transform 0.5s var(--ease-out);
}
.contents__desc {
  grid-area: desc;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
  transition: transform 0.5s var(--ease-out);
}
.contents__arrow {
  grid-area: arrow;
  align-self: center;
  position: relative;
  width: 1.5rem;
  height: 1px;
  margin-left: 0.5rem;
  background: var(--petrol);
  opacity: 0.45;
  transition: width 0.45s var(--ease-out), opacity 0.3s var(--ease);
}
.contents__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--petrol);
  border-right: 1px solid var(--petrol);
  transform: rotate(45deg);
  transform-origin: 100% 0;
}
.contents__link:hover,
.contents__link:focus-visible { background-color: rgba(252, 250, 247, 0.75); }
.contents__link:hover .contents__title,
.contents__link:focus-visible .contents__title { color: var(--petrol); transform: translateX(0.3rem); }
.contents__link:hover .contents__desc,
.contents__link:focus-visible .contents__desc { transform: translateX(0.3rem); }
.contents__link:hover .contents__arrow,
.contents__link:focus-visible .contents__arrow { width: 2.6rem; opacity: 1; }
.contents__link:focus-visible { outline-offset: -2px; }

@media (min-width: 700px) {
  .contents__link { grid-template-columns: 3rem minmax(0, 1fr) auto; padding: 1.15rem 0.75rem 1.2rem; }
}
@media (min-width: 980px) {
  .practice__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .practice__intro { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 2rem); }
  .contents { grid-column: 7 / -1; margin-top: 0.4rem; }
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach {
  --straddle: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}
.approach__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.approach__copy { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.approach__copy .prose { margin-top: 1.5rem; }
.approach__pull { margin-top: clamp(3rem, 6vw, 5rem); }
.approach__pull .pull__line--strong { margin-left: clamp(1.5rem, 8vw, 9rem); }
@media (max-width: 479.98px) {
  .approach__pull p { font-size: 1.5rem; }
  .approach__pull .pull__line--strong { margin-left: 0.75rem; }
}

@media (min-width: 980px) {
  /* The whole photograph (4:3, uncropped) on the left with the pull statement beneath it;
     the copy runs down the right beside both, so neither side is left empty */
  .approach__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
  }
  .approach__media {
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: start;
    margin-left: calc(-1 * var(--bleed));
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .approach__copy {
    grid-column: 8 / -1;
    grid-row: 1 / 3;
    margin-top: 0;
    padding-top: calc(var(--straddle) + clamp(2rem, 3vw, 3rem));
    padding-left: clamp(1rem, 2.5vw, 2.5rem);
  }
  .approach__pull { grid-column: 1 / 8; grid-row: 2; align-self: start; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
  .approach__pull p { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.9rem); }
  .approach__pull .pull__line--strong { margin-left: calc((100% + var(--gap)) / 7); }
}

/* ==========================================================================
   Chapter heads (shared by the five practice sections)
   ========================================================================== */
.chapter__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: baseline;
}
.chapter__head .folio { grid-column: 1; grid-row: 1; }
.chapter__head .eyebrow { grid-column: 2; grid-row: 1; margin-bottom: 0; }
.chapter__head .h2 { grid-column: 1 / -1; grid-row: 2; margin-top: 1.1rem; }
.chapter__head + .prose { margin-top: 1.6rem; }

/* ==========================================================================
   I. Children
   ========================================================================== */
.children {
  padding-top: clamp(4.5rem, 9vw, 8.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.children__grid { display: flex; flex-direction: column; }
.children__copy { display: contents; }
.children .chapter__head { order: 1; }
.children__media-col { order: 2; margin-top: 2rem; }
.children .prose { order: 3; margin-top: 2rem; }
.evidence { order: 4; }

.evidence {
  display: grid;
  gap: 1.1rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.evidence__item {
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-strong);
}
.evidence dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--petrol);
}
.evidence dd {
  margin-top: 0.25rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 700px) {
  .children__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .children__copy { display: block; grid-column: 2; }
  .children__media-col { grid-column: 1; grid-row: 1; align-self: stretch; margin-top: 0; }
  .children__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 700px) and (max-width: 979.98px) {
  .evidence { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 980px) {
  .children__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .children__media-col { grid-column: 1 / 6; }
  .children__copy { grid-column: 7 / -1; padding-top: clamp(1rem, 3vw, 3rem); }
}

/* ==========================================================================
   II. Individuals
   ========================================================================== */
.individuals {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}
.individuals__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.individuals__copy {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
  margin-left: clamp(0.75rem, 4vw, 1.5rem);
  padding: clamp(1.4rem, 3.4vw, 3rem);
  padding-bottom: 0.5rem;
  background: var(--bg);
  border-radius: var(--radius);
}
.individuals__pull { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pull--side p {
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.4rem);
  line-height: 1.16;
  color: var(--petrol);
}

@media (min-width: 700px) {
  /* The photograph's subject stands at the left, so the copy sheet overlaps from the right */
  .individuals__copy { margin-top: -7rem; margin-left: 14%; padding-bottom: clamp(1.4rem, 3.4vw, 3rem); }
  .individuals__pull { margin-right: 20%; }
}
@media (min-width: 980px) {
  .individuals__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  /* the photo's row hugs the photo; the long copy's extra height goes to the second row */
  .individuals__grid { grid-template-rows: auto 1fr; }
  .individuals__media { grid-column: 1 / 9; grid-row: 1; }
  .individuals__copy {
    grid-column: 6 / -1;
    grid-row: 1 / 3;
    align-self: start;
    margin: clamp(11rem, 19vw, 18rem) 0 0;
    padding: clamp(2rem, 3.2vw, 3.25rem) 0 0 clamp(2rem, 3.6vw, 3.5rem);
    background: var(--bg);
  }
  .individuals__copy::before {
    /* extends the paper into the right margin so the copy reads as one sheet laid over the photograph */
    content: "";
    position: absolute;
    inset: 0 auto 0 100%;
    width: var(--bleed-wide);
    background: var(--bg);
  }
  .individuals__pull { grid-column: 1 / 6; grid-row: 2; margin: clamp(2rem, 3vw, 2.75rem) 0 0; align-self: start; }
}

/* ==========================================================================
   III. Couples (petrol)
   ========================================================================== */
.tone-petrol {
  background: var(--petrol);
  color: var(--on-dark-soft);
}
.tone-petrol .h2 { color: var(--on-dark); }
.tone-petrol .eyebrow { color: var(--plum-light); }
.tone-petrol .eyebrow__dot { color: var(--dusty-light); }
.tone-petrol .folio { color: var(--dusty-light); }

.couples {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}
.couples__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.couples__copy { margin-top: clamp(2.25rem, 5vw, 3rem); }

@media (min-width: 980px) {
  .couples__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .couples__media { grid-column: 1 / 8; grid-row: 1; }
  .couples__copy { grid-column: 8 / -1; grid-row: 1; margin: 0 0 0 clamp(0rem, 2vw, 2rem); }
  .couples .h2 { font-size: clamp(2rem, 1.3rem + 1.5vw, 2.9rem); }
}

/* ==========================================================================
   IV. Families
   ========================================================================== */
.families {
  padding-top: clamp(4.5rem, 8vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.families__grid { display: flex; flex-direction: column; }
.families__head { order: 1; }
.families__media { order: 2; margin-top: 2rem; }
.families__copy { order: 3; margin-top: 2rem; }

@media (min-width: 700px) {
  .families__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .families__head { grid-column: 1 / -1; grid-row: 1; }
  .families__media { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(2rem, 4vw, 3rem); }
  .families__copy { grid-column: 2 / -1; grid-row: 3; margin-top: clamp(2rem, 4vw, 3rem); }
}
@media (min-width: 980px) {
  .families__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .families__head { grid-column: 1 / 11; }
  .families__copy { grid-column: 1 / 6; grid-row: 2; margin-top: clamp(3rem, 5vw, 4.5rem); }
  .families__media {
    grid-column: 7 / -1;
    grid-row: 2;
    margin-top: clamp(3rem, 5vw, 4.5rem);
    margin-right: calc(-1 * var(--bleed));
    border-radius: var(--radius) 0 0 var(--radius);
    align-self: start;
  }
}

/* ==========================================================================
   V. Psychological evaluation
   ========================================================================== */
.evaluation {
  padding-top: clamp(4.5rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.evaluation__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.evaluation__media { margin-top: 2.25rem; max-width: 30rem; }

.sequence {
  position: relative;
  display: grid;
  gap: 1.35rem;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-left: 1.75rem;
}
.sequence::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--petrol);
  opacity: 0.35;
  transform-origin: top;
}
.sequence__step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
}
.sequence__step::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.55em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--petrol);
}
.sequence__step:last-child::before { background: var(--petrol); }
.sequence__num {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
  transform: translateY(-0.2em);
}

@media (min-width: 700px) {
  .evaluation__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .evaluation__copy { grid-column: 1; grid-row: 1; }
  .evaluation__media { grid-column: 2; grid-row: 1; align-self: start; margin-top: 3.5rem; max-width: none; }
  .sequence {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    padding-left: 0;
    padding-top: 1.75rem;
  }
  .sequence::before {
    left: 0.3rem; right: 0;
    top: 0.3rem; bottom: auto;
    width: auto; height: 1px;
    transform-origin: left;
  }
  .sequence__step { display: grid; gap: 0.35rem; }
  .sequence__step::before { left: 0; top: -1.75rem; }
}
@media (min-width: 980px) {
  .evaluation__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .evaluation__copy { grid-column: 1 / 7; }
  .evaluation__media { grid-column: 8 / 12; margin-top: clamp(4rem, 7vw, 6rem); }
  .sequence { grid-column: 1 / 11; }
}

/* ==========================================================================
   Experience
   ========================================================================== */
.experience {
  padding-top: clamp(4.5rem, 8vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.experience__head .h2 { max-width: 20ch; }
/* Desktop: the headline and the 1994 statement share the first row, so neither half sits empty */
@media (min-width: 980px) {
  .experience__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .experience__head { grid-column: 1 / 7; }
  .experience .proof { grid-column: 7 / -1; margin-top: 0; font-size: clamp(2.6rem, 1.2rem + 3.2vw, 4.6rem); }
  .experience .ledger { grid-column: 1 / -1; }
}
.proof {
  margin-top: clamp(2.25rem, 5vw, 4rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.35rem + 4.3vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--petrol);
  text-wrap: balance;
  max-width: 17ch;
}
.proof__year { font-style: italic; color: var(--plum); white-space: nowrap; }

.ledger {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
  margin-top: clamp(2.75rem, 6vw, 4.75rem);
}
.ledger__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.ledger__item { padding-block: 0.9rem; }
.ledger__main {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink);
}
.ledger__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.97rem;
  color: var(--muted);
}
.ledger__list:not(.ledger__list--timeline) .ledger__item { border-top: 1px solid var(--rule); }
.ledger__list:not(.ledger__list--timeline) .ledger__item:last-child { border-bottom: 1px solid var(--rule); }

.ledger__list--timeline { position: relative; padding-left: 1.75rem; }
.ledger__list--timeline::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 1.6rem;
  bottom: 1.8rem;
  width: 1px;
  background: var(--dusty);
  opacity: 0.55;
  transform-origin: top;
}
.ledger__list--timeline .ledger__item { position: relative; }
.ledger__list--timeline .ledger__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 1.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--petrol);
}
.ledger__list--timeline .ledger__item:first-child::before { background: var(--petrol); }

@media (min-width: 700px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
}
@media (min-width: 980px) {
  .ledger { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ledger__group:first-child { grid-column: 1 / 7; }
  .ledger__group:last-child { grid-column: 8 / -1; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  padding-top: clamp(4.5rem, 8vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}
.about__grid { display: flex; flex-direction: column; }
.about__copy { display: contents; }
.about__copy > header { order: 1; }
.about__media { order: 2; margin-top: 2rem; width: min(100%, 21rem); }
.about .prose { order: 3; margin-top: 2rem; }
.prose--voice { font-size: 1.04em; }

@media (min-width: 700px) {
  .about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .about__copy { display: block; grid-column: 1; grid-row: 1; }
  .about__media { grid-column: 2; grid-row: 1; width: 100%; margin-top: clamp(3rem, 7vw, 6rem); }
}
@media (min-width: 980px) {
  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about__copy { grid-column: 1 / 8; }
  .about__media { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ==========================================================================
   Disaster response
   ========================================================================== */
.response {
  padding-top: clamp(4.5rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.response__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.response__copy { margin-top: 1.6rem; }
.response__media { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.response__pull {
  position: relative;
  z-index: 2;
  margin: -2.5rem 0 0 clamp(1.25rem, 8vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.4rem, 3.2vw, 2.5rem);
  background: var(--petrol);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -34px rgba(10, 58, 70, 0.8);
}
.response__pull p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
  line-height: 1.15;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .response__pull { justify-self: end; width: min(78%, 30rem); margin: -4.5rem clamp(1rem, 4vw, 2.5rem) 0 0; }
}
@media (min-width: 980px) {
  .response__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .response__head { grid-column: 1 / 6; grid-row: 1; }
  .response__copy { grid-column: 7 / -1; grid-row: 1; margin-top: 2.4rem; }
  .response__media { grid-column: 1 / 11; grid-row: 2; margin-top: clamp(3rem, 5vw, 4.5rem); }
  .response__pull {
    grid-column: 8 / -1;
    grid-row: 2;
    align-self: end;
    width: auto;
    margin: 0 0 clamp(-3.5rem, -4vw, -2rem);
  }
}

/* ==========================================================================
   Professional community
   ========================================================================== */
.community {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.community__intro p:not(.eyebrow) { margin-top: 1.25rem; max-width: 32rem; color: var(--ink-soft); }
.community__intro .text-link { margin-top: 0.75rem; }
.orgs {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.org {
  display: grid;
  grid-template-columns: clamp(7.5rem, 22vw, 10rem) minmax(0, 1fr);
  align-items: center;
  column-gap: 1.25rem;
}
.org__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(37, 36, 42, 0.07);
}
.org__logo span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.org__img { width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: contain; }
.org__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
}

@media (min-width: 980px) {
  .community__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .community__intro { grid-column: 1 / 7; }
  .orgs { grid-column: 8 / -1; margin-top: 0; gap: 2rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
.faq__list { margin-top: clamp(2rem, 4vw, 2.75rem); border-bottom: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3rem;
  padding: 1.2rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.12rem + 0.65vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.qa__text { text-wrap: balance; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__q:hover { color: var(--petrol); }
.qa__q:focus-visible { outline-offset: 4px; }
.qa__icon {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--petrol);
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
.qa__a {
  max-width: 40rem;
  padding: 0 clamp(0rem, 4vw, 3rem) 1.6rem 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.qa__a p + p { margin-top: 0.8em; }

@media (min-width: 980px) {
  .faq__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .faq__head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
  .faq__list { grid-column: 6 / -1; margin-top: 0; }
}

/* ==========================================================================
   Houston
   ========================================================================== */
.houston {
  padding-top: clamp(4.5rem, 8vw, 7rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
.houston__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.houston__copy p:not(.eyebrow) { margin-top: 1.25rem; max-width: 30rem; color: var(--ink-soft); }
.houston__media { margin-top: clamp(2.25rem, 5vw, 3rem); }
.visit {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 5vw, 3rem);
}
.visit__item { padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.visit__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
}
.visit dd { margin-top: 0.4rem; }
.visit__main {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
}
.visit__sub, .visit__addr { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }

@media (min-width: 700px) {
  .visit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 980px) {
  .houston__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  /* Content starts at the top of the section: copy and visit details down the left,
     the photograph beside them from the same top line, sized to match their height */
  .houston__grid { grid-template-rows: auto 1fr; }
  .houston__copy { grid-column: 1 / 5; grid-row: 1; align-self: start; }
  .houston__copy .h2 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.9rem); }
  .houston__media {
    grid-column: 5 / -1;
    grid-row: 1 / 3;
    margin-top: 0;
    margin-left: clamp(0.5rem, 1.5vw, 1.5rem);
    margin-right: calc(-1 * var(--bleed-wide));
    border-radius: var(--radius) 0 0 var(--radius);
    align-self: start;
  }
  .visit { grid-column: 1 / 5; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(2rem, 3vw, 2.5rem); align-self: start; }
  .visit__item { padding-top: 0.75rem; }
}

/* Location directions (copy supplied by Dr. Andrews), under the Houston grid */
.directions {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.directions__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
}
.directions__cols { display: grid; gap: 1em; margin-top: 1rem; }
.directions .prose { max-width: 38rem; color: var(--ink-soft); }
@media (min-width: 700px) {
  .directions__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
}
@media (min-width: 980px) {
  .directions { grid-column: 1 / -1; grid-row: 3; }
}

/* ==========================================================================
   Approach: Dr. Andrews' therapy material, two editorial columns
   ========================================================================== */
.approach__more {
  display: grid;
  gap: 1em;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.approach__col { max-width: 38rem; }
.approach__sub {
  margin-top: 1.6em;
  margin-bottom: 0.55em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem);
  line-height: 1.2;
  color: var(--petrol);
}
.prose .approach__sub + p { margin-top: 0; }
@media (min-width: 980px) {
  .approach__more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

/* Phones: the longer therapy text opens on request, so the section reads as a page rather than a wall.
   Without JavaScript everything simply shows. */
.approach__toggle-wrap { display: none; }
@media (max-width: 699.98px) {
  .js .approach__toggle-wrap { display: block; }
  .js .approach__more.is-collapsed {
    max-height: 17rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
    mask-image: linear-gradient(to bottom, #000 45%, transparent);
  }
  .approach__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.85rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: rgba(14, 75, 90, 0.09);
    color: var(--petrol);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s var(--ease);
  }
  .approach__toggle:active { background-color: rgba(14, 75, 90, 0.16); }
  .approach__toggle[hidden] { display: none; }
}

/* Evaluation: Dr. Andrews' own sentence, set as her voice */
.voice { margin-top: 1.75rem; max-width: 34rem; }
.voice__quote { margin: 0; }
.voice__quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.voice__by {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
}

/* ==========================================================================
   Appointments and Fees (copy supplied by Dr. Andrews)
   ========================================================================== */
.fees {
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
}
.fees__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.fees__card {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.fees__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink);
}
.fees__role {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
}
.fees__body { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3rem); }
.fees__sub {
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
}
.fees__body .prose { max-width: 40rem; color: var(--ink-soft); }
.fees__lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
@media (min-width: 980px) {
  .fees__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .fees__head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
  .fees__body { grid-column: 6 / -1; margin-top: 0; }
}

/* ==========================================================================
   Patient Forms
   Restrained document rows in the same language as the practice contents list
   ========================================================================== */
.forms {
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.forms__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.forms__head .prose { margin-top: 1.25rem; max-width: 30rem; color: var(--ink-soft); }
.docs { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }
.doc {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas:
    "icon text"
    "actions actions";
  column-gap: 1rem;
  row-gap: 1rem;
  padding: 1.35rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.doc__icon {
  grid-area: icon;
  position: relative;
  display: block;
  width: 2rem;
  height: 2.5rem;
  margin-top: 0.2rem;
  color: var(--dusty);
}
.doc__icon svg { width: 100%; height: 100%; }
.doc__type {
  position: absolute;
  left: 0; right: 0;
  bottom: 0.45rem;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--petrol);
}
.doc__text { grid-area: text; min-width: 0; }
.doc__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
}
.doc__desc { margin-top: 0.3rem; font-size: 0.97rem; line-height: 1.5; color: var(--muted); max-width: 32rem; }
.doc__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.doc__actions .btn { min-height: 2.75rem; flex: 1 1 9rem; }

.btn--quiet { background: rgba(14, 75, 90, 0.08); color: var(--petrol); }
.btn--quiet:hover { background: rgba(14, 75, 90, 0.14); transform: translateY(-1px); }

.forms__note {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.forms__note-title {
  margin-bottom: 0.35rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
}

/* Actions sit beside the text wherever the row is wide enough */
@media (min-width: 560px) {
  .doc { grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "icon text actions"; align-items: center; }
  .doc__actions { flex-wrap: nowrap; }
  .doc__actions .btn { flex: none; }
}
@media (min-width: 980px) {
  .forms__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .forms__head { grid-column: 1 / 5; grid-row: 1 / 3; }
  .docs { grid-column: 6 / -1; grid-row: 1; margin-top: 0.4rem; }
  .forms__note { grid-column: 6 / -1; grid-row: 2; }
}
/* Narrow desktop: the list column is too tight for both, so actions drop below the text */
@media (min-width: 980px) and (max-width: 1199.98px) {
  .doc { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "icon text" ". actions"; align-items: start; }
}

/* ==========================================================================
   Contact (petrol)
   ========================================================================== */
.contact {
  padding-top: clamp(4.5rem, 9vw, 8rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.contact__main .h2 { max-width: 14ch; }
.contact__main .prose { margin-top: 1.5rem; max-width: 34rem; }
.contact__main .btn { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

.contact__details { margin-top: clamp(2.75rem, 5vw, 3.5rem); }
.contact__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 1.35rem + 0.6vw, 1.85rem);
  line-height: 1.15;
  color: var(--on-dark);
}
.contact__role {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dusty-light);
}
.contact__list {
  display: grid;
  gap: 0.2rem;
  margin-top: 1.4rem;
}
.contact__row { display: block; padding-block: 0.35rem; color: var(--on-dark-soft); }
.contact__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 2.75rem;
  padding-block: 0;
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(248, 244, 237, 0.3), rgba(248, 244, 237, 0.3));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.5rem), 0 calc(100% - 0.5rem);
  background-size: 0% 1px, 100% 1px;
  transition: background-size 0.45s var(--ease-out);
}
.contact__link:hover, .contact__link:focus-visible { background-size: 100% 1px, 100% 1px; }

.contact__notes {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.note { font-size: 0.97rem; line-height: 1.6; }
.note__title {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.55rem;
}
.note--urgent {
  padding: 1.1rem 1.25rem;
  background: rgba(3, 30, 38, 0.32);
  border-radius: var(--radius);
  color: var(--on-dark);
}

@media (min-width: 700px) {
  .contact__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .note--urgent { padding: 1.25rem 1.5rem; }
}
@media (min-width: 980px) {
  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .contact__main { grid-column: 1 / 7; grid-row: 1; }
  .contact__details { grid-column: 8 / -1; grid-row: 1; align-self: end; margin-top: 0; padding-bottom: 0.25rem; }
  .contact__notes { grid-column: 1 / -1; grid-row: 2; grid-template-columns: subgrid; }
  .contact__notes .note:first-child { grid-column: 1 / 7; }
  .contact__notes .note--urgent { grid-column: 8 / -1; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--tone-ink);
  color: var(--on-dark-soft);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.95rem;
}
.site-footer__grid {
  display: grid;
  gap: 1.5rem;
}
.site-footer__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--on-dark);
}
.site-footer__meta {
  margin-top: 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dusty-light);
}
.site-footer__meta span[aria-hidden] { margin-inline: 0.4em; }
.nowrap { white-space: nowrap; }
.site-footer__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dusty-light);
  margin-bottom: 0.35rem;
}
.site-footer__col li { line-height: 1.45; }
/* Page links sit in one quiet row instead of a tall column */
.site-footer nav ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--on-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.35rem);
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out);
}
.site-footer a:hover, .site-footer a:focus-visible { background-size: 100% 1px; }
.site-footer__col:not(nav) li:not(:has(a)) { padding-block: 0.25rem; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 2rem;
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.85rem;
  color: rgba(248, 244, 237, 0.72);
}
.site-footer__legal ul { display: flex; gap: 1.5rem; }

@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1.5rem 2.5rem; }
  .site-footer__brand, .site-footer__legal { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .site-footer__brand { grid-column: 1; }
  .site-footer__legal { margin-top: 1rem; }
}

/* ==========================================================================
   Touch refinements
   ========================================================================== */
@media (max-width: 1079.98px), (pointer: coarse) {
  .site-footer a { min-height: 2.75rem; }
  .site-footer__col li + li { margin-top: 0; }
  .site-footer nav ul { column-gap: 1.1rem; }
}
@media (hover: none) {
  .btn--primary:hover, .btn--light:hover, .btn--quiet:hover { transform: none; box-shadow: none; }
  .btn--primary:hover { background: var(--petrol); }
  .btn--light:hover { background: var(--ivory); }
  .btn--quiet:hover { background: rgba(14, 75, 90, 0.08); }
  .contents__link:hover { background-color: transparent; }
  .contents__link:hover .contents__title,
  .contents__link:hover .contents__desc { transform: none; }
  .contents__link:hover .contents__title { color: var(--ink); }
  .contents__link:hover .contents__arrow { width: 1.5rem; opacity: 0.45; }
  .qa__q:hover { color: var(--ink); }
  .text-link:hover, .inline-link:hover, .contact__link:hover { background-size: 0% 1px, 100% 1px; }
  .site-footer a:hover { background-size: 0% 1px; }
  .site-nav__list a:hover { color: var(--ink); }
  .site-nav__list a:hover::after { transform: scaleX(0); }
}
/* Pressed feedback on touch: a brief, quiet dip */
.btn:active { opacity: 0.92; }
.contents__link:active { background-color: rgba(230, 217, 200, 0.38); }

/* ==========================================================================
   Motion
   Settling, never bouncing. Everything here is progressive: without JS or
   with reduced motion, content is simply present.
   ========================================================================== */

/* Hero entrance: almost imperceptible */
@keyframes enter-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-settle {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.js [data-enter="1"] { animation: enter-rise 1.1s var(--ease-out) 0.05s both; }
.js .hero__text[data-enter="2"] { animation: enter-rise 1.1s var(--ease-out) 0.18s both; }
.js .hero__media[data-enter="2"] { animation: enter-fade 1.4s var(--ease-soft) 0.25s both; }
.js [data-enter="3"] { animation: enter-settle 1.4s var(--ease-out) 0.45s both; }

/* Scroll reveals */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s var(--ease-out) calc(var(--i, 0) * 90ms),
    transform 1s var(--ease-out) calc(var(--i, 0) * 90ms);
}
.js [data-reveal="stagger"] { transform: translateY(12px); }
.js [data-reveal="settle"] { transform: translateY(10px); transition-duration: 1.2s, 1.2s; }
.js [data-reveal="proof"] { transform: translateY(22px); transition-duration: 1.2s, 1.3s; }
.js [data-reveal="rise-late"] { transition-delay: 0.35s, 0.35s; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Image reveals: each direction is used once or twice, never everywhere */
/* The mask sits on the photograph inside the frame, never on the frame itself:
   the frame is what the scroll observer watches, and a fully clipped element
   is treated as invisible, so it would never be revealed. */
.js [data-reveal^="mask"] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js [data-reveal="mask-up"] { --mask-from: inset(100% 0 0 0); }
.js [data-reveal="mask-down"] { --mask-from: inset(0 0 100% 0); }
.js [data-reveal="mask-side"] { --mask-from: inset(0 100% 0 0); }
.js [data-reveal="mask-side-right"] { --mask-from: inset(0 0 0 100%); }
.js [data-reveal^="mask"] > * {
  clip-path: var(--mask-from);
  transform: scale(1.045);
  transition: clip-path 1.35s var(--ease-out), transform 1.8s var(--ease-out);
}
.js [data-reveal^="mask"].is-in > * { clip-path: inset(0 0 0 0); transform: none; }

.js [data-reveal="fade-settle"] {
  transform: translateY(12px);
  transition: opacity 1.3s var(--ease-soft), transform 1.5s var(--ease-out);
}
.js [data-reveal="fade-settle"].is-in { transform: none; }

/* Pull statements: each line is uncovered left to right */
.js [data-reveal="lines"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="lines"] .pull__line {
  clip-path: inset(0 100% 0 0);
  opacity: 0.2;
  transition: clip-path 1.3s var(--ease-out), opacity 1s var(--ease);
}
.js [data-reveal="lines"] .pull__line + .pull__line { transition-delay: 0.45s; }
.js [data-reveal="lines"].is-in .pull__line { clip-path: inset(0 0 0 0); opacity: 1; }

/* Evaluation sequence: the line draws, then the steps arrive */
.js [data-reveal="sequence"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="sequence"]::before { transform: scaleY(0); transition: transform 1.4s var(--ease-out) 0.1s; }
@media (min-width: 700px) {
  .js [data-reveal="sequence"]::before { transform: scaleX(0); }
}
.js [data-reveal="sequence"].is-in::before { transform: none; }
.js [data-reveal="sequence"] .sequence__step { opacity: 0; transform: translateY(8px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.js [data-reveal="sequence"] .sequence__step:nth-child(2) { transition-delay: 0.35s; }
.js [data-reveal="sequence"] .sequence__step:nth-child(3) { transition-delay: 0.7s; }
.js [data-reveal="sequence"].is-in .sequence__step { opacity: 1; transform: none; }

/* Education timeline line draws as the credentials arrive */
.js .ledger__list--timeline::before { transform: scaleY(0); transition: transform 1.6s var(--ease-out) 0.2s; }
.js .ledger__list--timeline.is-in::before { transform: none; }

/* Gentle scroll linked drift for two wide photographs (native, no library) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .frame--drift > * {
      top: -5%;
      bottom: auto;
      height: 110%;
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift {
      from { transform: translateY(-3.5%); }
      to   { transform: translateY(3.5%); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal] > *,
  .js [data-reveal] .pull__line,
  .js [data-reveal] .sequence__step,
  .js [data-enter] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js [data-reveal]::before,
  .js .ledger__list--timeline::before { transform: none !important; }
}


/* ==========================================================================
   Evaluation with the clarity landscape
   The tall photograph stands on the right; the heading, Dr. Andrews' sentence
   and the three steps run down the left beside it. The steps stay vertical at
   every size, reading downward like the light coming over the mountains.
   ========================================================================== */
@media (min-width: 700px) {
  .evaluation__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .evaluation__copy { grid-column: 1; grid-row: 1; }
  .evaluation__media { grid-column: 2; grid-row: 1 / 3; margin-top: 0; max-width: none; align-self: start; }
  .sequence {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: 0;
    padding-left: 1.75rem;
  }
  .sequence::before {
    left: 0.3rem; right: auto;
    top: 0.9rem; bottom: 0.9rem;
    width: 1px; height: auto;
    transform-origin: top;
  }
  .sequence__step { display: flex; gap: 0.9rem; }
  .sequence__step::before { left: -1.75rem; top: 0.55em; }
  .js [data-reveal="sequence"]::before { transform: scaleY(0); }
  .js [data-reveal="sequence"].is-in::before { transform: none; }
}
@media (min-width: 980px) {
  .evaluation__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .evaluation__copy { grid-column: 1 / 7; padding-top: clamp(1rem, 3vw, 3rem); }
  .evaluation__media { grid-column: 8 / -1; }
  .sequence { grid-column: 1 / 7; }
}

/* Professional affiliations as names only (no logos), set like the credentials ledger */
.orgs--names { gap: 0; }
.orgs--names .org {
  display: block;
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
}
.orgs--names .org:last-child { border-bottom: 1px solid var(--rule); }
.orgs--names .org__name { font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem); }


/* ==========================================================================
   Section rhythm
   One fluid scale for the space above and below every section: about 44px on
   phones, 55px on tablets, 65px on small laptops and 84px on large screens.
   Small (s) and large (l) steps keep the page from feeling mechanical.
   ========================================================================== */
:root {
  --sy: clamp(2.75rem, 1.5rem + 4vw, 5.25rem);
  --sy-s: calc(var(--sy) * 0.8);
  --sy-l: calc(var(--sy) * 1.2);
}
.practice    { padding-top: var(--sy);   padding-bottom: var(--sy); }
.approach    { padding-bottom: var(--sy); }
.children    { padding-top: var(--sy-l); padding-bottom: var(--sy-s); }
.individuals { padding-top: var(--sy-s); padding-bottom: var(--sy); }
.couples     { padding-top: var(--sy);   padding-bottom: var(--sy); }
.families    { padding-top: var(--sy);   padding-bottom: var(--sy-s); }
.evaluation  { padding-top: var(--sy);   padding-bottom: var(--sy); }
.experience  { padding-top: var(--sy);   padding-bottom: var(--sy-s); }
.about       { padding-top: var(--sy);   padding-bottom: var(--sy); }
.response    { padding-top: var(--sy);   padding-bottom: var(--sy); }
.community   { padding-top: var(--sy);   padding-bottom: var(--sy-s); }
.faq         { padding-top: var(--sy-s); padding-bottom: var(--sy); }
.fees        { padding-top: var(--sy);   padding-bottom: var(--sy); }
.forms       { padding-top: var(--sy);   padding-bottom: var(--sy); }
.houston     { padding-top: var(--sy);   padding-bottom: var(--sy); }
.contact     { padding-top: var(--sy-l); padding-bottom: var(--sy); }
@media (min-width: 980px) {
  /* the petrol statement hangs below the disaster response photograph; leave room for it */
  .community { padding-top: calc(var(--sy) + 3rem); }
}

/* ==========================================================================
   Phone refinements by section (below 700px)
   ========================================================================== */
@media (max-width: 699.98px) {
  /* a little ivory under the family photograph before the next section */
  .hero__media { margin-bottom: var(--sy-s); }

  /* Individuals: plain full width copy under the photograph (no inset sheet on phones) */
  .individuals__copy {
    margin: 1.75rem 0 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  /* About: the portrait spans the column like every other photograph */
  .about__media { width: 100%; }

  /* FAQ: questions use the full width instead of a balanced narrow block */
  .qa__text { text-wrap: pretty; }
}

/* Narrowest phones: the icon alone opens the menu (the word stays available to screen readers),
   so the name and role keep to one line each and the bar keeps its height */
@media (max-width: 359.98px) {
  .menu-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .menu-toggle { padding-inline: 0.6rem; }
}

/* ==========================================================================
   Phone footer: compact, like a commercial site footer
   Name, one line of page links, phone and email on one line, legal line.
   Affiliations are shown in their own section above, so they are left out here.
   Column labels stay available to screen readers.
   ========================================================================== */
@media (max-width: 699.98px) {
  .site-footer { padding-top: 2rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); font-size: 0.94rem; }
  .site-footer__grid { gap: 0.9rem; }
  .site-footer__name { font-size: 1.4rem; }
  .site-footer__meta { margin-top: 0.3rem; }
  .site-footer__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .site-footer__col--affil { display: none; }
  .site-footer a { min-height: 2.25rem; }
  .site-footer nav ul { column-gap: 1.15rem; row-gap: 0; }
  .site-footer__col--contact ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
  .site-footer__col--contact li + li { margin-top: 0; }
  .site-footer__legal {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    gap: 0 1.25rem;
    font-size: 0.82rem;
  }
  .site-footer__legal ul { gap: 1.15rem; }
}


/* ==========================================================================
   About without a portrait (until Dr. Andrews' professional headshot arrives)
   Heading on the left, her words on the right; stacked on phones and tablets.
   ========================================================================== */
.about__grid--text .prose { max-width: 38rem; }
@media (min-width: 700px) {
  .about__grid--text { display: block; }
  .about__grid--text .about__copy { display: block; }
}
@media (min-width: 980px) {
  .about__grid--text .about__copy {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .about__grid--text .about__copy > header { grid-column: 1 / 6; }
  .about__grid--text .prose { grid-column: 7 / -1; margin-top: 0.4rem; }
}

/* Patient forms: how to return completed forms */
.forms__head .forms__return { color: var(--ink); font-weight: 500; }


/* ==========================================================================
   Section photographs at about half their former size (Dr. Andrews, 9 October).
   The hero family photograph and her portrait are not affected.
   Phones: the whole landscape photograph is shown at the full width (no tall crops),
   which roughly halves the height; the one upright photograph (Children) is narrowed.
   Tablet and desktop: each photograph takes about half its former width, and the
   text beside it widens to use the space. Overlaps that relied on a large photograph
   are replaced by simple side by side placement.
   ========================================================================== */
@media (max-width: 699.98px) {
  .approach__media { --r-m: 16 / 9 !important; }
  .individuals__media { --r-m: 3 / 2 !important; }
  .couples__media { --r-m: 16 / 10 !important; }
  .families__media { --r-m: 16 / 9 !important; }
  .response__media { --r-m: 16 / 9 !important; }
  .houston__media { --r-m: 16 / 9 !important; }
  .children__media { width: 58%; }
}

@media (min-width: 700px) and (max-width: 979.98px) {
  .approach__media,
  .individuals__media,
  .couples__media,
  .families__media,
  .response__media,
  .houston__media { width: 55%; }
  .children__grid { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); }
  /* the copy no longer climbs over the photograph */
  .individuals__copy { margin-top: clamp(1.75rem, 4vw, 2.5rem); margin-left: 0; padding-bottom: 0; }
  .response__pull { justify-self: start; margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
}

@media (min-width: 980px) {
  /* Therapy: photograph on the left, its statement beneath, the copy wider on the right */
  .approach__media { grid-column: 1 / 5; margin-left: 0; border-radius: var(--radius); }
  .approach__copy { grid-column: 6 / -1; padding-left: 0; }
  .approach__pull { grid-column: 1 / 6; }

  /* Children */
  .children__media-col { grid-column: 1 / 4; }
  .children__copy { grid-column: 5 / -1; }

  /* Individuals: photograph and copy side by side, no overlap */
  /* same edges as the neighbouring sections now that the photograph is smaller */
  .individuals__grid.wrap--wide { width: min(100% - 2 * var(--gutter), var(--max)); }
  .individuals__media { grid-column: 1 / 5; }
  .individuals__copy {
    grid-column: 6 / -1;
    grid-row: 1 / 3;
    margin: 0;
    padding: 0;
  }
  .individuals__copy::before { content: none; }

  /* Couples */
  .couples__media { grid-column: 1 / 5; }
  .couples__copy { grid-column: 6 / -1; margin-left: 0; }

  /* Families: copy on the left, photograph on the right */
  .families__copy { grid-column: 1 / 7; }
  .families__media { grid-column: 9 / -1; margin-right: 0; border-radius: var(--radius); }

  /* Disaster response: photograph on the left, the statement beside it */
  .response__media { grid-column: 1 / 6; }
  .response__pull { grid-column: 7 / -1; align-self: center; margin: clamp(3rem, 5vw, 4.5rem) 0 0; }

  /* Houston: copy and details on the left, photograph on the right */
  .houston__copy, .visit { grid-column: 1 / 7; }
  .houston__media { grid-column: 8 / -1; margin-left: 0; margin-right: 0; border-radius: var(--radius); }
}

/* ==========================================================================
   Print
   A clean reading copy on white paper. Nothing overlaps: elements that are
   layered on screen (the petrol disaster statement, the Individuals text sheet)
   return to normal reading order. Decorative photographs are left out; the
   portrait of Dr. Andrews prints. Kept last so it overrides screen rules.
   ========================================================================== */
@media print {
  @page { margin: 12mm 12mm 14mm; }
  body { background: #fff !important; color: #25242A; }
  main, .site-footer { overflow: visible !important; }

  /* Her name heads the first page; navigation is not printed */
  .site-header { position: static !important; background: none !important; box-shadow: none !important; border-bottom: 1px solid #cfc8bd; }
  .site-nav, .menu-toggle, .site-header__cta, .skip-link { display: none !important; }

  .frame { display: none !important; }

  /* Every section on white paper with dark text */
  main > section, .approach { background: none !important; }
  main > section { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
  .tone-petrol, .tone-petrol *, .site-footer, .site-footer * { color: #25242A !important; }
  .tone-petrol .eyebrow, .site-footer__label, .site-footer__meta { color: #7A5A73 !important; }
  .note--urgent { background: none !important; border: 1px solid #b9b2a8; }
  .site-footer { background: none !important; border-top: 1px solid #cfc8bd; }

  /* Buttons print as outlined labels (backgrounds are not printed by default) */
  .btn, .actions .text-link { background: none !important; color: #0E4B5A !important; box-shadow: none !important; border: 1px solid #0E4B5A; transform: none !important; }

  /* Everything still waiting for its scroll animation is shown */
  .js [data-reveal], .js [data-reveal] *, .js [data-enter] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .js [data-reveal]::before, .js .ledger__list--timeline::before { transform: none !important; }

  /* Layered on screen, in reading order on paper */
  .response__pull {
    grid-column: 1 / -1 !important; grid-row: auto !important;
    justify-self: stretch !important; align-self: auto !important;
    width: auto !important; margin: 1.25rem 0 0 !important;
    padding: 0.4rem 0 0.4rem 1rem !important;
    background: none !important; box-shadow: none !important;
    border-left: 3px solid #0E4B5A;
  }
  .response__pull p { color: #0E4B5A !important; }
  .individuals__copy { margin: 1.25rem 0 0 !important; padding: 0 !important; background: none !important; }
  .individuals__copy::before { display: none !important; }
  .children__grid, .families__grid, .children__copy { display: block !important; }
  .children__media-col { display: none !important; }
  .families__copy { margin-top: 1rem !important; }
  .approach__copy { padding-top: 0 !important; margin-top: 0 !important; }
  .profile { box-shadow: none !important; margin-bottom: 0 !important; break-inside: avoid; }

  /* FAQ answers are printed (opened by a small script before printing; this line covers newer browsers too) */
  details.qa::details-content { content-visibility: visible; display: block; }
  .qa__icon { display: none; }

  /* Sensible page breaks */
  h1, h2, h3, .eyebrow, .chapter__head, .qa__q, .fees__sub, .directions__title { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .qa, .doc, .ledger__item, .visit__item, .note, .contents__item, .response__pull, .fees__card, .forms__note, .evidence__item, .profile { break-inside: avoid; page-break-inside: avoid; }
  /* On paper the footer links are not clickable: drop the link list so the email address has room for one line */
  .site-footer nav.site-footer__col { display: none !important; }
  .site-footer__col--contact a { white-space: nowrap; }
}


/* ==========================================================================
   October 21 final review: Judith's specific requests
   ========================================================================== */
/* Family photograph: half its previous width at every breakpoint as requested;
   preserve its natural proportions. */
.hero__media {
  width: 50%;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}
/* Gentle onward navigation after the early credentials section, so visitors
   can continue reading the therapy material rather than jumping to the end. */
.experience__next {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--petrol);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}
.experience__next:hover { color: var(--plum); }
.experience__next span { font-size: 1.15em; }

/* Office photograph replaces the generic Houston image; caption is outside
   the frame, so the building isn't cropped and the note remains legible. */
.office-photo { overflow: visible; }
.office-photo__frame { width: 100%; aspect-ratio: 3 / 2; }
.office-photo__caption {
  margin-top: 0.65rem;
  max-width: 37rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 980px) {
  .office-photo { align-self: start; }
}
@media print {
  .office-photo__caption { display: none !important; }
}

/* The Children's section now has two credential highlights after removal of
   the Family Context box. Keep both columns balanced on wide screens. */
@media (min-width: 980px) {
  .children .evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}