/* ============================================================
   Ember Therapy — stylesheet
   Order: tokens → base → layout → type → components → responsive
   All breakpoint overrides live in the RESPONSIVE block at the
   very end, so later base rules can never silently win.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper: #F6F2EC;
  --ink: #2B2621;
  --body: #4A443C;
  --muted: #6E655A;
  --faint: #9A8D7E;
  --accent: #B08968;
  --brown: #5A4E43;
  --clay: #BCAB99;
  --sand: #EDE6DC;
  --cream: #FBF7F1;
  --tan: #D6C3AE;
  --cta: #A89684;
  --peach: #EFD2B8;

  --rule: rgba(43, 38, 33, 0.09);
  --rule-strong: rgba(43, 38, 33, 0.16);
  --rule-light: rgba(246, 242, 236, 0.22);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1320px;
  --gutter: 40px;
  --header-h: 78px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--tan); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  transition: top 160ms ease;
}
.skip-link:focus { top: 16px; color: var(--paper); }

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

@keyframes emberRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 1000px; }
.wrap--prose { max-width: 900px; }
.wrap--form { max-width: 760px; }

section { position: relative; }

.band { }
.band--rule { border-bottom: 1px solid var(--rule); }
.band--brown { background: var(--brown); color: var(--paper); }
.band--clay { background: var(--clay); color: var(--ink); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--sand { background: var(--sand); color: var(--ink); }
.band--cta { background: var(--cta); color: var(--cream); }

.pad { padding-top: 100px; padding-bottom: 100px; }
.pad--hero { padding-top: 104px; padding-bottom: 66px; }
.pad--page { padding-top: 90px; padding-bottom: 70px; }
.pad--tight { padding-top: 80px; padding-bottom: 80px; }
/* Pulls a ruled block up under its intro; the intro band already carries
   70px of bottom padding, so the two together were leaving a 150px hole. */
.pad--pull-up { padding-top: 18px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1000px;
}
.split--wide { max-width: 1050px; gap: 60px; }

.two-col {
  display: grid;
  gap: 80px;
  align-items: start;
}
.two-col--media { grid-template-columns: 0.85fr 1.15fr; }
.two-col--portrait { grid-template-columns: 0.62fr 1.38fr; gap: 70px; }
.two-col--sticky { grid-template-columns: 0.8fr 1.2fr; }
.two-col--quote { grid-template-columns: 1fr 0.8fr; }

.sticky-col { position: sticky; top: calc(var(--header-h) + 42px); }

/* "Why Ember" — heading and photograph stack in the left column on desktop,
   while the prose spans both rows on the right. */
.why-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  /* The body used to start level with the heading, leaving it floating above
     the photograph. Dropping it into the second row lines its first line up
     with the top of the still life. */
  grid-template-areas: "head ." "media body";
  grid-template-rows: auto 1fr;
  gap: 40px 80px;
  align-items: start;
}
.why-grid__head { grid-area: head; }
.why-grid__body { grid-area: body; }
.why-grid__media { grid-area: media; }
/* The still life stretches to the height of the essay beside it instead of
   holding a fixed ratio, so the image and the text finish on the same line.
   `cover` plus the bottom anchor keeps the base of the composition whatever
   height the copy ends up being. */
.why-grid__media { align-self: stretch; }
.why-grid__media .media--still {
  height: 100%;
  aspect-ratio: auto;
  min-height: 340px;
}

.stack { display: flex; flex-direction: column; gap: 22px; }
.stack--tight { gap: 16px; }

.enter { animation: emberRise 420ms ease both; }
.enter--slow { animation-duration: 700ms; }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 28px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow--light { color: rgba(246, 242, 236, 0.55); }
.eyebrow--center { text-align: center; }
.eyebrow--airy { margin-bottom: 50px; }
.eyebrow__more { }

.display, .h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.99;
  margin-bottom: 46px;
  max-width: 20ch;
}
.h1 {
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: 1;
  margin-bottom: 34px;
  max-width: 22ch;
}
.h1--tight { max-width: 18ch; }
.h1--short { max-width: 16ch; }
.h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  max-width: 24ch;
}
.h3 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

em, .em { font-style: italic; color: var(--accent); }
.band--brown em, .band--ink em { color: var(--tan); }
.band--clay em { color: var(--paper); }

.lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}
.lede--soft { color: var(--muted); }
.lede--wide { max-width: 74ch; }
.lede--measure { max-width: 70ch; }
.lede--light { color: rgba(246, 242, 236, 0.78); }
.lede--bright { color: rgba(246, 242, 236, 0.92); }

.prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 19px;
  line-height: 1.72;
  color: var(--body);
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p { margin: 0; }
.prose--bio { font-size: 18.5px; gap: 20px; max-width: 64ch; }
.prose--dark { color: #3E3730; line-height: 1.7; }

/* ---------- Long-form policy pages (privacy, terms) ---------- */
/* The masthead and colophon are centred; the prose column is centred in its
   wrap rather than ranged left, but its own text stays ranged left -- a
   document this long is unreadable centre-aligned. */
.policy__head { text-align: center; margin-bottom: 54px; }
.policy__brand {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 38, 33, 0.6);
}
.policy__meta {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.prose--policy { margin-left: auto; margin-right: auto; }
.policy__h2 {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.policy__h3 {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(43, 38, 33, 0.72);
}
.policy__list {
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.policy__list li { padding-left: 4px; }
.policy__list li::marker { color: var(--clay); }
.policy__foot {
  margin: 64px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.policy__foot p { margin: 0; }
.prose .dim { color: rgba(43, 38, 33, 0.62); }

.pull {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.btn:hover { background: #3D362E; color: var(--paper); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--sm { padding: 10px 20px; font-size: 13.5px; }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: #F3DCC6; color: var(--ink); }
.btn--submit {
  align-self: start;
  padding: 17px 42px;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 242, 236, 0.82);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.brand:hover { color: inherit; }
.brand:hover .brand__name { color: var(--accent); }
.brand__name { font-family: var(--serif); font-size: 25px; transition: color 180ms ease; }
.brand__tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 18px;
  font-size: 13.5px;
  color: #575047;
}
.nav__link {
  padding: 0 0 3px;
  font-size: 13.5px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin: -8px -10px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
}

/* Mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  display: none;
  flex-direction: column;
  animation: emberRise 240ms ease both;
}
.menu.is-open { display: flex; }
.menu__top {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(246, 242, 236, 0.14);
}
.menu__brand { font-family: var(--serif); font-size: 22px; }
.menu__close {
  width: 46px;
  height: 46px;
  margin-right: -10px;
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.menu__nav {
  flex: 1;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.menu__link {
  padding: 14px 0;
  border-bottom: 1px solid rgba(246, 242, 236, 0.12);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.15;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.menu__link:hover { color: var(--tan); }
.menu__link[aria-current="page"] { color: var(--tan); }
.menu__num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(246, 242, 236, 0.4);
}
.menu__foot { padding: 20px 22px; }
.menu__foot .btn { width: 100%; }

body.menu-open { overflow: hidden; }

/* ---------- Media blocks ---------- */
/* The photograph is the top background layer; the warm gradient beneath
   shows through if the file has not been added yet, so the block always
   reads as intentional rather than broken. */
.media {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--peach);
}
.media--still {
  /* Cropped to 5:4 -- roughly the lower half of the 1068x1600 file. `cover`
     fills the box and `bottom` anchors the crop there, so the base of the
     composition stays and the trim comes off the top. */
  aspect-ratio: 5 / 4;
  background-image: url('../img/still-life.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
  background-position: center bottom, center;
  border-radius: 22px;
}

.media--portrait {
  aspect-ratio: 4 / 5;
  background-image: url('../img/portrait-v2.jpg'),
    linear-gradient(150deg, #EFD2B8 0%, #D9BFA4 46%, #BCAB99 100%);
  background-position: center 18%, center;
  /* Matches the radius on the form fields rather than introducing a second
     curve; the gradient fallback is rounded with it. */
  border-radius: 22px;
}

.media--grief {
  /* Native file is only 429x642, so cap the display width at its own size
     rather than let the 644px column upscale it into mush. */
  aspect-ratio: 429 / 642;
  max-width: 400px;
  margin-bottom: 34px;
  background-image: url('../img/grief-is-different.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
}

.media--quote {
  /* Native file is 393x588; capped below that so it stays sharp. Centred to
     sit under the centred Kubler-Ross quote. */
  aspect-ratio: 393 / 588;
  max-width: 360px;
  margin: 46px auto 0;
  background-image: url('../img/quote-image.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
}

.media--emdr {
  /* Native file is 436x652; capped below that so it stays sharp. Closes the
     NICE-approaches band beneath the two cards. */
  aspect-ratio: 436 / 652;
  max-width: 400px;
  margin: 56px auto 0;
  background-image: url('../img/emdr-archway.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
}

.media--faq {
  /* Native file is 384x575; capped below that so it stays sharp. */
  aspect-ratio: 384 / 575;
  max-width: 360px;
  margin-top: 46px;
  background-image: url('../img/faq-room.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
}

/* Feathered edge: the photograph dissolves into its band instead of ending on
   a hard rectangle. The mask fades every background layer at once, so the
   fallback gradient feathers identically if the file is ever missing.
   It fades to whatever sits behind, so the blend is invisible when photo and
   band are the same value (the FAQ room on paper) and reads as a soft vignette
   when they differ (the grief photo, which is lighter than the clay). */
.media--feather {
  -webkit-mask-image: radial-gradient(ellipse 84% 78% at 50% 50%,
    #000 44%, rgba(0, 0, 0, 0.72) 68%, transparent 97%);
          mask-image: radial-gradient(ellipse 84% 78% at 50% 50%,
    #000 44%, rgba(0, 0, 0, 0.72) 68%, transparent 97%);
}

.media--contact {
  /* Native file is 443x664; capped below that so it stays sharp. Centred to
     match .form-head, which centres its heading and intro. */
  aspect-ratio: 443 / 664;
  max-width: 400px;
  margin: 6px auto 30px;
  background-image: url('../img/next-step.jpeg'),
    linear-gradient(160deg, #EFD2B8 0%, #E2C6AA 40%, #C9B49E 100%);
}

/* ---------- Insurer logos ---------- */
.insurers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  align-items: center;
}
.insurer {
  position: relative;
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insurer img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Shown by ember.js only when the logo file is missing */
.insurer__fallback {
  display: none;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.insurer.is-missing img { display: none; }
.insurer.is-missing .insurer__fallback { display: block; }

/* ---------- Hairline card grids ---------- */
/* Each card draws its own left/top hairline into the 1px gap, rather than the
   container painting a tint behind everything — so a ragged final row leaves
   no empty tinted cell where a card would have been. */
.grid-hairline {
  display: grid;
  gap: 1px;
  background: none;
}
.grid-hairline--3 { grid-template-columns: repeat(3, 1fr); }
.grid-hairline--2 { grid-template-columns: 1fr 1fr; }

.grid-hairline > .card { position: relative; }
.grid-hairline > .card::before,
.grid-hairline > .card::after {
  content: "";
  position: absolute;
  background: var(--rule-light);
}
.grid-hairline > .card::before { top: 0; bottom: 0; left: -1px; width: 1px; }
.grid-hairline > .card::after { left: 0; right: 0; top: -1px; height: 1px; }
.grid-hairline--3 > .card:nth-child(3n + 1)::before { content: none; }
.grid-hairline--3 > .card:nth-child(-n + 3)::after { content: none; }
.grid-hairline--2 > .card:nth-child(2n + 1)::before { content: none; }
.grid-hairline--2 > .card:nth-child(-n + 2)::after { content: none; }

/* Boxed variant: the cards share the brown of the band they sit on, so as a
   hairline grid they read as one mass. Real gaps plus an outline make each
   credential a discrete box. The seventh card would otherwise be stranded
   alone in column 1, so it moves under the middle of the row above. */
.grid-hairline--boxed { gap: 16px; }
.grid-hairline--boxed > .card {
  border: 1px solid var(--rule-light);
  background: rgba(43, 38, 33, 0.28);
}
.grid-hairline--boxed > .card::before,
.grid-hairline--boxed > .card::after { content: none; }
.grid-hairline--boxed > .card:nth-child(7):last-child { grid-column: 2; }

.card {
  background: var(--brown);
  padding: 34px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 230px;
}
.card--wide { padding: 40px 38px 46px; min-height: 0; gap: 16px; }
.card__num { font-family: var(--serif); font-size: 14px; color: var(--tan); }
.card__title { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0; }
.card--wide .card__title { font-size: 30px; line-height: 1.18; }
.card__body { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(246, 242, 236, 0.72); }
.card--wide .card__body { font-size: 17px; line-height: 1.7; color: rgba(246, 242, 236, 0.75); }

/* Light-background rule grid (models, orgs) */
.grid-ruled {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(43, 38, 33, 0.14);
  /* Tiles carry the right and bottom rules, so the left edge is the grid's
     own -- without it the ruled block reads as an open bracket, not a box. */
  border-left: 1px solid rgba(43, 38, 33, 0.14);
}
.tile {
  border-bottom: 1px solid rgba(43, 38, 33, 0.14);
  border-right: 1px solid rgba(43, 38, 33, 0.14);
  padding: 38px 34px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tile--tall { min-height: 230px; padding-bottom: 42px; }
.tile__num { font-family: var(--serif); font-size: 14px; color: var(--accent); }
.tile__title { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.2; margin: 0; letter-spacing: -0.005em; }
.tile__title--org { font-size: 30px; letter-spacing: -0.01em; }
.tile__body { margin: 0; font-size: 16.5px; line-height: 1.68; color: var(--muted); }
.tile__body--grow { flex: 1; line-height: 1.65; }
.tile__link {
  align-self: start;
  font-size: 15px;
  color: var(--accent);
  border-bottom: 1px solid rgba(176, 137, 104, 0.4);
  padding-bottom: 2px;
}
.tile__link:hover { border-bottom-color: var(--accent); }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--rule-strong); }
.accordion--light { border-top-color: var(--rule-light); }

.acc-item { border-bottom: 1px solid var(--rule-strong); }
.accordion--light .acc-item { border-bottom-color: var(--rule-light); }

.acc-h { margin: 0; font: inherit; font-weight: inherit; }

.acc-head {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
  cursor: pointer;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
  text-align: left;
  transition: color 180ms ease;
}
.acc-head:hover { color: var(--accent); }
.accordion--light .acc-head { color: var(--paper); }
.accordion--light .acc-head:hover { color: var(--tan); }

.acc-num {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--faint);
  min-width: 26px;
}
.accordion--light .acc-num { color: rgba(246, 242, 236, 0.5); }

.acc-label { flex: 1; }

.acc-sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  align-self: center;
  opacity: 0.5;
}
.accordion--light .acc-sign { opacity: 0.6; }
.acc-sign::before, .acc-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-sign::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.acc-sign::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.acc-head[aria-expanded="true"] .acc-sign::after { transform: translate(-50%, -50%) scaleY(0); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }

.acc-body {
  margin: 0;
  padding: 0 0 28px 46px;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--muted);
  white-space: pre-line;
}
.accordion--light .acc-body { color: rgba(246, 242, 236, 0.72); max-width: 62ch; }
.acc-body--faq { max-width: 66ch; line-height: 1.75; }

/* ---------- Quotes ---------- */
.quote-figure {
  margin: 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(43, 38, 33, 0.3);
}
.quote-figure blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.quote-figure figcaption {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 38, 33, 0.6);
}

/* The client-experience quote takes the same ink ground as the Kubler-Ross
   quote that follows it, so the two read as a pair against the clay band. */
.quote-figure--ink {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  padding: 40px;
  text-align: center;
}
.quote-figure--ink figcaption { color: rgba(246, 242, 236, 0.5); }

/* Two quote panels side by side under the section heading. Brown rather than
   ink so they read as panels resting on the clay, not holes cut through it.
   Equal-height by grid; the flex centring keeps the shorter quote optically
   middled rather than stranded at the top of its panel. */
.quote-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 52px;
}
.quote-figure--panel {
  max-width: none;
  margin: 0;
  padding: 46px 40px;
  background: var(--brown);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-figure--panel { border-radius: 22px; }
.quote-figure--panel blockquote { font-size: clamp(20px, 1.75vw, 25px); }
.quote-figure--panel em { color: var(--tan); }
.prose--centred { margin-left: auto; margin-right: auto; }


/* ---------- CTA band ---------- */
.cta-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: end;
}
.cta-band__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  max-width: 18ch;
}
.cta-band__body {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.7;
  color: rgba(251, 247, 241, 0.9);
  max-width: 60ch;
  text-wrap: pretty;
}
.cta-band .btn { justify-self: start; padding: 17px 36px; font-size: 15.5px; }

/* ---------- Fees ---------- */
.fees { display: flex; flex-direction: column; gap: 18px; }
.fee {
  background: var(--cream);
  padding: 40px 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
}
.fee__title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; margin: 0 0 14px; }
.fee__price { margin: 0; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); }
.fee__meta {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.fee__body { margin: 0; font-size: 17px; line-height: 1.72; color: var(--body); text-wrap: pretty; }
.fee__list {
  margin: 18px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Crisis rows ---------- */
.crisis { border-top: 1px solid var(--rule-light); }
.crisis__row {
  border-bottom: 1px solid var(--rule-light);
  padding: 30px 0;
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.3fr;
  gap: 40px;
  align-items: baseline;
}
.crisis__key {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 242, 236, 0.6);
}
.crisis__val { font-family: var(--serif); font-size: 27px; line-height: 1.2; }
.crisis__val a:hover { color: var(--tan); }
.crisis__desc { display: block; font-size: 16.5px; line-height: 1.6; color: rgba(246, 242, 236, 0.8); }
.crisis__when { display: block; margin-top: 8px; font-size: 14px; color: rgba(246, 242, 236, 0.55); }

/* ---------- FAQ groups ---------- */
.faq-groups { display: flex; flex-direction: column; gap: 64px; }
.faq-group__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.faq-group__num { font-family: var(--serif); font-size: 14px; color: var(--accent); }
.faq-group__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
}

/* ---------- Contact form ---------- */
.form-head { text-align: center; margin-bottom: 46px; }
.form-head .h1 { margin: 0 auto 22px; max-width: none; text-align: center; }
.form-head p {
  margin: 0 auto;
  max-width: 48ch;
  font-size: 18.5px;
  line-height: 1.65;
  color: #5C544A;
  text-wrap: pretty;
}

.form { display: flex; flex-direction: column; gap: 26px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { font-size: 17px; }
.field__opt { color: var(--faint); font-size: 15px; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  border: 1px solid rgba(43, 38, 33, 0.45);
  border-radius: 999px;
  background: none;
  padding: 16px 22px;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea {
  border-radius: 22px;
  padding: 18px 22px;
  line-height: 1.6;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.22);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.field.is-invalid input, .field.is-invalid textarea { border-color: #9C4A3C; }
.field__error {
  display: none;
  font-size: 14px;
  color: #9C4A3C;
}
.field.is-invalid .field__error { display: block; }

.consent {
  display: flex;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.consent input {
  margin-top: 4px;
  accent-color: var(--brown);
  width: 17px;
  height: 17px;
  flex: none;
}
.consent.is-invalid { color: #9C4A3C; }

.form-status {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.form-status h2 { font-family: var(--serif); font-weight: 400; font-size: 38px; margin: 0; }
.form-status p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--muted); }
.form-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--faint); }
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer__inner { padding-top: 90px; padding-bottom: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.footer-brand { font-family: var(--serif); font-size: 30px; margin: 0 0 12px; }
.footer-tag {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(246, 242, 236, 0.6);
  max-width: 34ch;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(246, 242, 236, 0.78);
}
.footer-col a { text-align: left; }
.footer-col a:hover { color: var(--tan); }
.footer-head {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 242, 236, 0.4);
}
.footer-mail { color: var(--tan); }
.footer-base {
  margin-top: 70px;
  padding: 24px 0 50px;
  border-top: 1px solid rgba(246, 242, 236, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(246, 242, 236, 0.45);
}

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 var(--gutter) 24px;
}
.sticky-cta .btn {
  pointer-events: auto;
  padding: 17px 38px;
  box-shadow: 0 20px 44px -18px rgba(43, 38, 33, 0.65);
}
body.has-sticky-cta .site-footer__inner { padding-bottom: 90px; }

/* Spam trap. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill this one in. Never seen by a person. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================
   RESPONSIVE — every breakpoint override lives here, at the end.
   ============================================================ */

@media (max-width: 1080px) {
  .grid-hairline--3 { grid-template-columns: 1fr 1fr; }
  .grid-hairline--boxed > .card:nth-child(7):last-child { grid-column: auto; }
  .grid-hairline--3 > .card::before,
  .grid-hairline--3 > .card::after { content: ""; }
  .grid-hairline--3 > .card:nth-child(2n + 1)::before { content: none; }
  .grid-hairline--3 > .card:nth-child(-n + 2)::after { content: none; }
  .grid-ruled { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 900px) {
  :root { --gutter: 30px; }
  .two-col, .two-col--media, .two-col--portrait, .two-col--sticky, .two-col--quote { gap: 50px; }
  .cta-band { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .fee { grid-template-columns: 1fr; gap: 26px; }
  .crisis__row { grid-template-columns: 1fr; gap: 10px; }
  .crisis__when { margin-top: 4px; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; --header-h: 68px; }

  .site-header__inner { padding: 16px var(--gutter); flex-wrap: nowrap; }
  .brand__tag { display: none; }
  .brand__name { font-size: 22px; }
  .nav { display: none; }
  .nav-toggle { display: flex; }

  .pad, .pad--hero, .pad--page, .pad--tight { padding-top: 46px; padding-bottom: 46px; }
  .pad--hero { padding-top: 48px; padding-bottom: 44px; }
  .pad--page { padding-top: 44px; padding-bottom: 40px; }
  .pad--pull-up { padding-top: 10px; }

  .split, .split--wide { grid-template-columns: 1fr; gap: 16px; max-width: none; }
  .two-col, .two-col--media, .two-col--portrait, .two-col--sticky, .two-col--quote {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .sticky-col { position: static; top: auto; }

  .why-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "media";
    grid-template-rows: auto;
    gap: 0;
  }
  .why-grid__media .media--still {
    height: auto;
    aspect-ratio: 5 / 4;
    min-height: 0;
  }

  .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; margin-bottom: 20px; }
  .eyebrow--airy { margin-bottom: 26px; }

  .display { font-size: 48px; margin-bottom: 24px; max-width: none; }
  .h1, .h1--tight, .h1--short { font-size: 40px; line-height: 1.02; margin-bottom: 20px; max-width: none; }
  .h2 { font-size: 34px; margin-bottom: 18px; max-width: none; }
  .h3 { font-size: 24px; }

  .lede { font-size: 17px; line-height: 1.65; }
  .lede--soft { font-size: 16.5px; }
  .prose, .prose--bio { font-size: 17px; line-height: 1.65; gap: 16px; max-width: none; }
  .pull { font-size: 25px; }

  .btn { width: 100%; padding: 17px; font-size: 15.5px; }
  .btn--sm { width: auto; padding: 10px 18px; font-size: 13px; }
  .btn--hero { margin-top: 30px; }
  .cta-band .btn { width: 100%; }
  .btn--submit { width: 100%; padding: 16px; }

  /* Media: on mobile the still life sits below the copy and goes square */
  .media--still { margin-top: 28px; }
  .media--grief { max-width: 300px; margin-bottom: 26px; }
  .media--quote { max-width: 260px; margin-top: 32px; }
  .media--emdr { max-width: 280px; margin-top: 34px; }
  .media--faq { max-width: 280px; margin-top: 32px; }
  .media--contact { max-width: 260px; margin-bottom: 26px; }
  .order-first-mobile { order: -1; }

  .grid-hairline, .grid-hairline--3, .grid-hairline--2 {
    grid-template-columns: 1fr;
    gap: 14px;
    background: none;
  }
  .grid-hairline > .card::before,
  .grid-hairline > .card::after { content: none; }
  .card, .card--wide {
    border: 1px solid rgba(246, 242, 236, 0.25);
    padding: 22px 20px;
    min-height: 0;
    gap: 10px;
  }
  .card__num { font-size: 12.5px; }
  .card__title, .card--wide .card__title { font-size: 24px; }
  .card__body, .card--wide .card__body { font-size: 15.5px; line-height: 1.62; }

  .grid-ruled { grid-template-columns: 1fr; }
  .tile, .tile--tall {
    border-right: 0;
    padding: 22px 0;
    min-height: 0;
    gap: 8px;
  }
  .tile__num { font-size: 12px; }
  .tile__title { font-size: 24px; }
  .tile__title--org { font-size: 26px; }
  .tile__body { font-size: 16px; line-height: 1.6; }

  .insurers { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .insurer { height: 60px; }
  .insurer__fallback { font-size: 22px; }

  .acc-head { min-height: 60px; padding: 19px 0; gap: 14px; font-size: 18px; }
  .acc-num { font-size: 12px; min-width: 22px; }
  .acc-body, .accordion--light .acc-body, .acc-body--faq {
    padding: 0 0 22px 36px;
    font-size: 16px;
    line-height: 1.68;
    max-width: none;
  }

  .quote-figure { margin-top: 30px; padding-top: 26px; }
  .quote-figure--ink {
    margin: 30px calc(-1 * var(--gutter)) 0;
    padding: 34px var(--gutter) 46px;
  }
  .quote-pair { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
  .quote-figure--panel {
    margin: 0;
    padding: 32px 26px 36px;
  }
  .quote-figure--panel blockquote { font-size: 21px; line-height: 1.34; }
  .quote-figure blockquote { font-size: 23px; line-height: 1.32; }
  .quote-figure figcaption { margin-top: 18px; font-size: 11px; }

  .cta-band__title { font-size: 36px; max-width: none; }
  .cta-band__body { font-size: 17px; line-height: 1.65; }

  .fees { gap: 14px; }
  .fee { padding: 26px 22px 28px; gap: 16px; }
  .eyebrow__more { display: none; }
  .fee__title { font-size: 27px; margin-bottom: 10px; }
  .fee__price { font-size: 34px; }
  .fee__meta { margin: 8px 0 16px; font-size: 11.5px; }
  .fee__body { font-size: 16px; line-height: 1.68; }
  .fee__list { margin-top: 14px; padding-left: 18px; gap: 7px; font-size: 15.5px; }

  .crisis__row { padding: 22px 0; gap: 8px; }
  .crisis__key { font-size: 10.5px; }
  .crisis__val { font-size: 25px; }
  .crisis__desc { font-size: 16px; }
  .crisis__when { font-size: 13.5px; }

  .faq-groups { gap: 40px; }
  .faq-group__head { gap: 12px; margin-bottom: 10px; }
  .faq-group__num { font-size: 12px; }
  .faq-group__title { font-size: 28px; line-height: 1.15; }

  .form-head { margin-bottom: 32px; }
  .form-head p { font-size: 17px; line-height: 1.62; }
  .form { gap: 22px; }
  .form__row { grid-template-columns: 1fr; gap: 22px; }
  .field { gap: 9px; }
  .field__label { font-size: 16.5px; }
  .field__opt { font-size: 14.5px; }
  .field input, .field textarea { padding: 15px 20px; font-size: 16.5px; }
  .field textarea { border-radius: 20px; padding: 16px 20px; }
  .consent { font-size: 14px; line-height: 1.55; }
  .form-status { padding: 20px 0; }
  .form-status h2 { font-size: 32px; }
  .form-status p { font-size: 16.5px; line-height: 1.65; }

  .site-footer__inner { padding-top: 50px; padding-bottom: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-brand { font-size: 26px; margin-bottom: 10px; }
  .footer-tag { font-size: 15px; max-width: none; }
  .footer-head { font-size: 10px; }
  .footer-base {
    margin-top: 32px;
    padding: 18px 0 30px;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
  }

  .sticky-cta { padding: 0 var(--gutter) 18px; }
  .sticky-cta .btn { max-width: 386px; padding: 16px; }
  body.has-sticky-cta .site-footer__inner { padding-bottom: 80px; }

}

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

@media print {
  .site-header, .sticky-cta, .menu, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .acc-panel { grid-template-rows: 1fr !important; }
  .band--brown, .band--ink, .band--clay, .band--cta { background: #fff !important; color: #000 !important; }
}