/* Here For It. Built from the approved Figma (file "Here For It", page 156:26, home 318:2000)
   and the brand sheet (page 55:2). Roca is the brand display face; the subscription that
   carried it is gone, so Fraunces set soft stands in until a Roca web license is in place. */

:root {
  /* Brand sheet tokens */
  --primary-orange: #FFC38F;
  --secondary-pink: #FE9F91;
  --secondary-cream: #F6EEE5;
  --secondary-blue: #394C73;
  --secondary-dark: #211E24;
  --red: #F48678;
  --orange: #F7B374;
  --yellow: #F6D476;
  --green: #97D8B0;
  --indigo: #8893CB;
  --violet: #BEA2E7;
  --black: #474448;
  --brown: #B99A78;
  --turquoise: #ACE2E0;
  --pink: #FED6CB;
  --white: #FFFFFF;

  /* Each service carries one brand color */
  --s-red: var(--red);
  --s-orange: var(--orange);
  --s-green: var(--green);
  --s-blue: var(--turquoise);
  --s-lilac: var(--violet);
  --s-yellow: var(--yellow);

  /* Working names */
  --bg: var(--secondary-cream);
  --ink: var(--secondary-blue);
  --ink-soft: #5A6889;
  --accent-title: #E36F5E; /* brand red, deepened so large titles clear 3:1 on cream */
  --line: rgba(57, 76, 115, 0.14);
  --btn: var(--primary-orange);
  --btn-hover: #FFB676;

  --display: "Roca", "Fraunces", Georgia, serif;
  --text: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale. Text stays quiet so the display serif and the color can lead. */
  --t-xs: 0.8125rem;
  --t-small: 0.875rem;
  --t-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --t-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);

  --wrap: 1180px;
  --narrow: 780px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --radius: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip;
  font-family: var(--text); font-size: var(--t-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 {
  margin: 0; color: var(--ink); text-wrap: balance;
  font-family: var(--display); font-weight: 360;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.12; letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); font-weight: 400; line-height: 1.55; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 999px; }
.muted { color: var(--ink-soft); }

/* Buttons, pill as in the approved home */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--ink);
  font: 500 .9375rem/1 var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease-out);
}
/* A wash of pink rises through the button on hover */
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: var(--secondary-pink); transform: translateY(102%) scaleX(1.2); border-radius: 50% 50% 0 0;
  transition: transform .5s var(--ease-out), border-radius .5s var(--ease-out);
}
.btn:hover::before { transform: none; border-radius: inherit; }
.btn:active { transform: scale(.97); }
.btn--cream { background: var(--secondary-cream); }
.btn--cream::before { background: var(--white); }
/* Secondary on the cream page, white so it never competes with the orange action nearby. */
.btn--white { background: var(--white); }
.btn--white::before { background: color-mix(in oklch, var(--secondary-pink) 35%, var(--white)); }
.btn--sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .875rem; }
.link { font-weight: 500; text-decoration: underline; text-decoration-skip-ink: none; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: var(--secondary-pink); }
.link:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.center .actions { justify-content: center; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 50; view-transition-name: site-head;
  background: transparent;
  border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s;
}
.site-head.is-stuck { background: var(--bg); border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 80px; }
.brand { display: inline-flex; align-items: flex-end; gap: 8px; color: var(--ink); text-decoration: none; }
.brand .wm { height: 30px; width: auto; }
.brand .it { height: 30px; width: auto; transform: translateY(1px); }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a:not(.btn) { font-size: .875rem; font-weight: 400; text-decoration: none; padding-block: .35rem; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.nav a:not(.btn):hover { border-bottom-color: var(--secondary-pink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.menu-btn { display: none; }
@media (max-width: 920px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
}
.sheet {
  border: 0; padding: 0; margin: 0; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  background: var(--bg); color: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .35s var(--ease-out), display .35s allow-discrete, overlay .35s allow-discrete;
}
.sheet:popover-open { clip-path: inset(0); }
@starting-style { .sheet:popover-open { clip-path: inset(0 0 100% 0); } }
.sheet-top { display: flex; justify-content: space-between; align-items: center; min-height: 80px; }
.sheet nav { display: grid; padding-top: 1rem; }
.sheet nav a:not(.btn) { font: 360 2rem/1.2 var(--display); font-variation-settings: "SOFT" 100; text-decoration: none; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.sheet nav .btn { margin-top: 1.75rem; justify-self: start; }

/* Sections */
.section { padding-block: clamp(3.5rem, 2.25rem + 4vw, 6.5rem); }
.section--flush { padding-top: 0; }
/* The hero already holds its own space under it, so the section after it starts close. */
.hero + .section { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Hero. The people, the shape and the loose brushstrokes of the "it" share the stage. */
/* The hero holds the first screen under the header, with the words and the shape centered in it. */
.hero { position: relative; isolation: isolate; display: grid; align-content: center; min-height: min(calc(100svh - 81px), 42rem); padding-block: clamp(2rem, 1rem + 3vw, 4rem); overflow-x: clip; }
/* Brand color as soft light behind the people, drifting slowly */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -8% -8% 38%; pointer-events: none;
  background:
    radial-gradient(38% 42% at 55% 45%, color-mix(in srgb, var(--primary-orange) 60%, transparent), transparent 70%),
    radial-gradient(30% 34% at 80% 72%, color-mix(in srgb, var(--pink) 85%, transparent), transparent 70%),
    radial-gradient(26% 30% at 34% 78%, color-mix(in srgb, var(--turquoise) 50%, transparent), transparent 72%),
    radial-gradient(24% 26% at 78% 18%, color-mix(in srgb, var(--yellow) 45%, transparent), transparent 72%);
  filter: blur(36px);
  animation: glow 22s ease-in-out infinite alternate;
}
@media (max-width: 820px) { .hero::before { inset: 20% -20% 10% -20%; } }

.hero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "title art" "rest art";
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.hero-title { grid-area: title; align-self: end; position: relative; z-index: 2; font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; }
.hero-rest { grid-area: rest; align-self: start; position: relative; z-index: 2; }
.hero-art { grid-area: art; position: relative; }
.checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; }
.checks .tick { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-orange); display: grid; place-items: center; margin-top: .2em; }
.checks .tick svg { width: 10px; height: 10px; }
.checks .tick path { stroke-dasharray: 16; stroke-dashoffset: 0; }
.btn--lg { min-height: 52px; padding: .85rem 1.7rem; font-size: 1rem; }

.morph { position: relative; z-index: 1; }
.morph svg { width: 100%; height: auto; overflow: visible; }
.morph .shapes { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.morph .lines { transform: translate(calc(var(--px, 0) * -1.6px), calc(var(--py, 0) * -1.6px)); opacity: .95; }
/* People change through the shape, so only the one on stage shows. */
.morph .hm-person { opacity: 0; }
.morph .hm-person.is-on { opacity: 1; }

@media (max-width: 820px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "title" "art" "rest"; min-height: 0; }
  .hero-art { width: min(100% - 1.5rem, 440px); justify-self: center; margin-top: .75rem; }
}

/* Words rise into place, one after another */
.w { display: inline-block; vertical-align: top; }

/* Hero entrance, after the title */

/* Danielle's page opens like the home page, her name and words beside her in the living
   hero shape. She opens out through it the way people change in the home hero. */
.hero-pr { margin-top: .9rem; font-weight: 500; }
.hero-bio { margin-top: 1.25rem; max-width: 36rem; }

/* What is it */
.intro .it-big { width: clamp(120px, 10vw + 60px, 170px); height: auto; margin: 0 auto 2rem; overflow: visible; }
.paint path { transform-box: fill-box; transform-origin: center; }
/* The it pours itself in, see site.js. Until that is set up the strokes wait unseen, and
   if the script never runs they simply appear after a moment. */
.js .paint:not(.is-ready) path { visibility: hidden; animation: paint-safe 0s 2.5s forwards; }
@keyframes paint-safe { to { visibility: visible; } }
.intro h2 { margin-top: .5rem; }
.intro .lead { margin-top: 1.5rem; }

/* Who's here sits on flat brand blue with cream words, so they read easily. */
.band, .bb-cband.band { position: relative; overflow: clip; color: var(--secondary-cream); background: var(--secondary-blue); }
.band h2 { color: var(--secondary-cream); }
.band > * { position: relative; }
@keyframes glow { 50% { transform: translate(5%, 3%) rotate(6deg); } to { transform: translate(-4%, -5%) rotate(-5deg); } }
.band .lead { margin-top: 1.25rem; }
.band .copy { margin-top: 1.5rem; text-align: left; }
.svc-intro .copy { margin-top: 1.5rem; text-align: left; }
/* On phones the long Who's here paragraph shows its first lines, with the rest a tap away. */
.more { display: none; margin-top: .75rem; padding: .25rem 0; border: 0; background: none; color: inherit; font: 500 .9375rem/1.4 var(--text); text-decoration: underline; text-decoration-skip-ink: none; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: var(--secondary-pink); cursor: pointer; }
@media (max-width: 760px) {
  .copy[data-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .copy[data-clamp].is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .more { display: block; margin-inline: 0 auto; }
}

/* Portraits on the therapists page sit in a slow living shape of brand color */
.team { list-style: none; padding: 0; margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; display: flex; justify-content: center; gap: clamp(1.5rem, .5rem + 3vw, 3.25rem); flex-wrap: wrap; }
.person { display: grid; justify-items: center; gap: .6rem; text-decoration: none; color: inherit; width: clamp(150px, 10vw + 96px, 250px); }
/* One portrait everywhere, on Therapists, on each profile and in Who's here, built like the
   home hero. The real person stands in front of the orange into pink oblong with a white
   loop around it, cut off at the shoulders by the oblong's lower edge. */
.person .ph, .profile .ph, .who-stage--pt { position: relative; display: block; width: 100%; aspect-ratio: 400 / 440; }
.pt { display: block; width: 100%; height: auto; overflow: visible; }
.pt-person { transition: transform .7s var(--ease-out); }
a.person:hover .pt-person { transform: translateY(-6px); }
/* The services list keeps its photo on a shape of each service's color. */
.who-stage { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.who-stage .ph-bg {
  position: absolute; inset: 9% -7% -7% 9%; pointer-events: none; background: var(--c);
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
  animation: shape 14s ease-in-out infinite alternate;
  transition: background-color .8s var(--ease-out);
}
@keyframes shape {
  50% { border-radius: 58% 42% 45% 55% / 44% 58% 42% 56%; }
  to { border-radius: 40% 60% 52% 48% / 58% 46% 54% 42%; }
}
.who-stage .ph-img { position: absolute; inset: 0; overflow: hidden; background: var(--secondary-cream); }
a.person:hover img { transform: scale(1.06); }
@keyframes blob {
  50% { border-radius: 58% 42% 45% 55% / 44% 58% 42% 56%; rotate: 12deg; }
  to { border-radius: 40% 60% 52% 48% / 58% 46% 54% 42%; rotate: -8deg; }
}
.person .nm { font: 360 1.3rem/1.2 var(--display); font-variation-settings: "SOFT" 100; }
a.person .nm { text-decoration: underline; text-decoration-skip-ink: none; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .2s; }
a.person:hover .nm { text-decoration-color: currentColor; }
.person .pr { font-size: var(--t-small); margin-top: -.6rem; }

/* Who's here. Names in the display serif, and the portrait of whoever you point at. */
.who { --who-fg: var(--ink); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); align-items: center; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.band .who { --who-fg: var(--secondary-cream); --who-on: var(--primary-orange); }
.who-list { grid-column: 2 / 7; }
.who-stage { grid-column: 8 / 12; margin: 4% 7%; width: auto; }
.who-stage--pt { aspect-ratio: 400 / 440; grid-column: 7 / 13; margin: 0 6%; }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.who-name {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 1rem;
  padding-block: .2rem; color: var(--who-fg); text-decoration: none;
  transition: color .2s ease;
}
.who-name:focus-visible { outline: 3px solid var(--who-fg); outline-offset: 4px; border-radius: 8px; }
.who-name.is-on { color: var(--who-on, var(--who-fg)); }

.who-nm { font: 360 clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem)/1.1 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -0.015em; }
.who-pr { font-size: var(--t-small); clip-path: inset(-20% 100% -20% 0); transition: clip-path .5s var(--ease-out); }
.who-name.is-on .who-pr { clip-path: inset(-20% -4% -20% 0); }
.who-ph { display: none; }
.who-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; clip-path: circle(0% at 50% 58%); transition: clip-path .8s var(--ease-out); }
.who-img.is-prev { z-index: 1; clip-path: circle(80% at 50% 58%); transition: none; }
.who-img.is-on { z-index: 2; clip-path: circle(80% at 50% 58%); }
/* With Danielle on her own, the question and its answer sit side by side. Who's here and
   her words on the left, her in the living shape with her name under it on the right. */
.who-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); row-gap: 2rem; align-items: center; }
.who-split-copy { grid-column: 1 / 7; }
.who-split-copy .lead { margin-top: 1rem; }
.who-split-copy .copy { margin-top: 1.25rem; text-align: left; }
.who-split-copy .actions { margin-top: 1.75rem; }
.who-split-art { grid-column: 8 / 13; margin: 0; width: min(100%, 440px); justify-self: center; }
.who-split-art figcaption { display: grid; justify-items: center; gap: .25rem; margin-top: .5rem; text-align: center; }
.who-split-art .who-solo-nm { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.who-split-art .who-solo-pr { margin: 0; }
@media (max-width: 860px) {
  .who-split { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .who-split-art { margin-block: 1.5rem .5rem; }
  .who-split-copy, .who-split-art { grid-column: 1 / -1; }
  .who-split-art { grid-row: 2; width: min(100%, 360px); }
  .who-split-copy { display: contents; }
  .who-split-copy h2 { grid-row: 1; }
}
/* With Danielle on her own, her name sits where the list was, beside her portrait. */
.who--solo { margin-top: clamp(1rem, .5rem + 2vw, 2.5rem); }
.who--solo .who-solo-copy { grid-column: 2 / 7; }
.who--solo .who-art { grid-column: 7 / 13; width: 80%; justify-self: center; }
.who-solo-nm { margin: 0; font: 360 clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem)/1.1 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -0.015em; }
.who-solo-pr { margin-top: .5rem; font-size: var(--t-small); }
.who--solo .actions { margin-top: 1.75rem; }
.band .wrap.actions { justify-content: center; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (max-width: 760px) {
  .who { display: block; }
  .who-stage { display: none; }
  .who-list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--gutter) 1rem; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
  .who-list li { flex: 0 0 62%; scroll-snap-align: center; }
  .who-name { display: grid; gap: .6rem; color: var(--who-fg); translate: none; }
  .who-name.is-on { translate: none; }
  .who-ph { display: block; position: relative; aspect-ratio: 400 / 440; }
  .who--solo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .who--solo .who-art { grid-column: auto; grid-row: 1; width: min(100%, 380px); justify-self: center; }
  .who--solo .who-solo-copy { grid-column: auto; text-align: center; }
  .who--solo .actions { justify-content: center; }

  .who-nm { font-size: 1.6rem; }
  .who-pr { clip-path: none; }
}

/* Insurance logos run past slowly */

/* Groups that arrive one after another */

/* Hassle-free */
.logos { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.logos img { height: var(--lh, 30px); width: auto; mix-blend-mode: multiply; }
@media (max-width: 480px) { .logos img { height: calc(var(--lh, 30px) * .85); } }

/* FAQ, white cards as approved */
.faq { display: grid; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: left; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.25; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 6px; border-radius: 6px; }
/* A plus in an orange circle that turns into a close mark and goes pink when open */
.faq .pm { flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--ink-soft); transition: color .2s, rotate .2s var(--ease-out); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; translate: -50% -50%; }
.faq .pm::after { rotate: 90deg; }
.faq summary:hover .pm { color: var(--ink); }
.faq details[open] .pm { rotate: 45deg; color: var(--ink); }
.faq details::details-content { block-size: 0; overflow: clip; }
.faq details[open]::details-content { block-size: auto; }
.faq .a { padding: 0 4.5rem 1.75rem 0; max-width: 62ch; }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: .75rem; }

/* Home FAQs, heading on the left and the questions on the right */
.faq-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); row-gap: 1.5rem; align-items: start; }
.faq-side { grid-column: 1 / 5; position: sticky; top: 120px; }
.faq-side .actions { margin-top: 1.75rem; }
.faq-split .faq { grid-column: 6 / 13; margin-top: 0; }
@media (max-width: 820px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-side, .faq-split .faq { grid-column: 1 / -1; position: static; }
  .faq-side { display: contents; }
  .faq-side .actions { order: 3; margin-top: .5rem; }
  .faq .a { padding-right: 0; }
}

/* Inner pages */
.section--top { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--top h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; }
.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; }
.page-head .lead { margin-top: 1.25rem; max-width: 46rem; }
.page-head p:not(.lead) { margin-top: 1.25rem; max-width: 52rem; }
.crumb { display: inline-flex; gap: .35rem; align-items: center; font-weight: 500; font-size: var(--t-small); text-decoration: none; margin-bottom: 1.5rem; }
.crumb:hover { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: .2em; }

/* Services opens on its name in the middle with the five service photos placed around it,
   each in its oblong on its own color, labeled, and a link to its section. They hold still. */
.svc-open { padding-block: clamp(1.5rem, .5rem + 3vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.svc-open-in { position: relative; height: clamp(560px, 30vw + 300px, 740px); }
.svc-open-head { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.5rem; text-align: center; pointer-events: none; }
.svc-open-head h1 { font-size: clamp(3rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.svc-open-head .actions { margin-top: 0; pointer-events: auto; }
.svc-tile { position: absolute; z-index: 1; display: grid; justify-items: start; width: var(--w); text-decoration: none; color: var(--ink); }
.svc-tile-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; }
/* The photos and their color shapes are there from the first frame. Pointing at a tile
   eases the photo in a touch inside its oblong. Nothing that moves on hover catches the
   pointer, so the tile never flickers. */
.svc-tile-bg { position: absolute; inset: 10% -6% -8% 8%; background: var(--c); border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%; pointer-events: none; transition: translate .7s var(--ease-out); }
.svc-tile-win { position: relative; display: block; width: 100%; height: 100%; overflow: clip; }
.svc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: scale .7s var(--ease-out); }
.svc-tile-nm { position: relative; z-index: 2; margin: -1.1rem 0 0 6%; padding: .4rem .9rem; border-radius: 999px; background: color-mix(in oklch, var(--c) 30%, var(--secondary-cream)); font-size: var(--t-small); font-weight: 500; line-height: 1.2; }
.svc-tile:hover img { scale: 1.05; }

.svc-tile:hover .svc-tile-bg { translate: 2% 3%; }
.svc-tile:focus-visible { outline: none; }
.svc-tile:focus-visible .svc-tile-nm { outline: 3px solid var(--ink); outline-offset: 2px; }
.svc-tile.t1 { --w: 25%; --d: .7; left: 0; top: 6%; }
.svc-tile.t2 { --w: 27%; --d: 1.1; right: 0; top: 2%; }
.svc-tile.t3 { --w: 24%; --d: 1.3; left: 8%; bottom: 0; }
.svc-tile.t4 { --w: 23%; --d: .9; right: 6%; bottom: 3%; }
.svc-tile.t5 { --w: 17%; --d: .5; left: 41.5%; top: 0; }
@media (max-width: 860px) {
  .svc-open-in { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.25rem; }
  .svc-open-head { position: static; grid-column: 1 / -1; margin-bottom: .5rem; }
  .svc-open .svc-tile { position: relative; inset: auto; width: auto; translate: none; }
  .svc-open .svc-tile.t5 { grid-column: 1 / -1; width: 62%; justify-self: center; }
  .svc-tile-nm { font-size: var(--t-xs); }
}

/* Services, alternating rows as approved. Each photo opens out of a soft shape into its
   frame, sits on a living blob of its service color, and drifts a little as you scroll. */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 5vw, 6rem); align-items: center; padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
.svc:nth-child(even) .pic { order: -1; }
.svc h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: 1rem; }
.pic { position: relative; }
.pic-bg {
  position: absolute; inset: 7% -5% -7% 9%; z-index: 0; background: var(--c, var(--pink));
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
}
.svc:nth-child(even) .pic-bg { inset: 7% 9% -7% -5%; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Each photo sits in the brand oblong from the hero, its own version per service. */
.pic-img { position: relative; z-index: 1; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.pic-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The photo side sits a step smaller than its column, so the words lead each row. */
.svc .pic { width: 80%; justify-self: center; }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; } .svc:nth-child(even) .pic { order: 0; } .svc .pic { width: auto; margin-inline: .75rem; } }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.feature .logos { justify-content: flex-start; margin-top: 1.25rem; }
.feature .panel img { width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.price { font: 360 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.2 var(--display); font-variation-settings: "SOFT" 100; margin: 1.5rem 0 .5rem; }

/* Inner pages open the way the home hero does, a large title on the left with its line
   under it and the page's own brand piece on the right. What follows each opening is
   whatever suits that page's content. */
.ptop { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ptop-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); row-gap: 2.5rem; align-items: center; }
.ptop--top .ptop-in { align-items: start; }
.ptop--rule .ptop-in { align-items: center; padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); border-bottom: 1px solid var(--line); }
.ptop-head { grid-column: 1 / 7; }
.ptop-head h1, .faq-page .faq-side h1 { font-size: clamp(3rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.ptop-head .lead { margin-top: 1.25rem; max-width: 30rem; }
.ptop-head .actions { margin-top: 1.75rem; }
.ptop-head .pr { margin-top: .9rem; font-weight: 500; }
.ptop-head .bio { margin-top: 1.25rem; max-width: 36rem; }
.ptop-side { grid-column: 8 / 13; }
.ptop p { margin-bottom: 0; }
.ptop-head > p + p { margin-top: 1rem; }
@media (max-width: 860px) { .ptop-head, .ptop-side { grid-column: 1 / -1; } }

/* Pricing. The price large in the display serif beside the page name, and below the rule
   the two ways to pay side by side. The Mentaya benefits check goes beside them once the
   real one is embedded; a picture of its form read as a broken form. */
.pr-label { font-weight: 500; font-size: var(--t-small); color: var(--ink-soft); }
.pr-cost { margin-top: .4rem; font: 360 clamp(3.5rem, 2rem + 4.5vw, 6rem)/1 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -0.03em; }
.pr-dur { margin-top: .6rem; font-size: var(--t-lead); }
.pr-note { margin-top: .3rem; font-size: var(--t-small); color: var(--ink-soft); }
.ptop-side .actions { margin-top: 1.75rem; }
.pr-pay { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(3.5rem, 2.25rem + 4vw, 6.5rem); }
.pr-pay-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); row-gap: 3rem; align-items: start; }
.pr-way { grid-column: 1 / 7; }
.pr-way + .pr-way { grid-column: 8 / 13; }
.pr-way p { margin: .75rem 0 0; max-width: 34rem; }
.pr-way h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.pr-way .logos { justify-content: flex-start; margin-top: 1.5rem; }
.pr-check { grid-column: 8 / 13; margin: 0; }
.pr-check img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 28px 56px -32px rgba(57, 76, 115, .35); }
@media (max-width: 860px) { .pr-way, .pr-way + .pr-way { grid-column: 1 / -1; } .pr-way + .pr-way { padding-top: 2.25rem; border-top: 1px solid var(--line); } }

/* Services opens with its five photos gathered on the right, where the home hero keeps its
   people, each on its own color and labeled, a link to its row below. */
/* The group sits loose, each photo nudged off the grid, and each one drifts a few pixels
   up and down on its own slow time, so they never move together. */
.ptop-side.svc-cluster { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.4rem; row-gap: 2.25rem; align-items: start; }
.svc-cluster .svc-tile-nm { white-space: nowrap; }
.svc-cluster .svc-tile { position: relative; inset: auto; width: auto; grid-column: span 2; animation: drift 7s ease-in-out infinite alternate; }
.svc-cluster .svc-tile:nth-child(1) { margin-top: .75rem; animation-duration: 7.4s; animation-delay: -2s; }
.svc-cluster .svc-tile:nth-child(2) { margin-top: 3.25rem; margin-left: -.5rem; animation-duration: 8.6s; animation-delay: -5s; }
.svc-cluster .svc-tile:nth-child(3) { margin-top: -.25rem; margin-left: .75rem; animation-duration: 6.8s; animation-delay: -1s; }
.svc-cluster .svc-tile:nth-child(4) { grid-column: 2 / 4; margin-left: -1.5rem; margin-top: .5rem; animation-duration: 9.2s; animation-delay: -3.5s; }
.svc-cluster .svc-tile:nth-child(5) { grid-column: 4 / 6; margin-left: 1rem; margin-top: 2rem; animation-duration: 7.9s; animation-delay: -6s; }
@keyframes drift { from { translate: 0 -3px; } to { translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .svc-cluster .svc-tile { animation: none; } }
@media (max-width: 860px) {
  .ptop-side.svc-cluster { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; row-gap: 1.5rem; padding-right: .75rem; width: 100%; max-width: 580px; }
  .svc-cluster .svc-tile, .svc-cluster .svc-tile:nth-child(4), .svc-cluster .svc-tile:nth-child(5) { grid-column: auto; margin: 0; }
  .svc-cluster .svc-tile:nth-child(2) { margin-top: 1.5rem; }
  .svc-cluster .svc-tile:nth-child(5) { grid-column: 1 / -1; width: 50%; justify-self: center; }
}

/* Danielle's page. Her name, pronouns and story on the left, her in the living hero shape
   on the right. */
.ptop-art { width: min(100%, 440px); justify-self: center; }
@media (max-width: 860px) {
  .ptop--person .ptop-in { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ptop--person .ptop-head { display: contents; }
  .ptop--person .ptop-head h1 { order: 1; }
  .ptop--person .ptop-head .pr { order: 2; }
  .ptop--person .ptop-art { order: 3; width: min(100%, 380px); margin-block: 1.5rem .5rem; }
  .ptop--person .ptop-head .bio { order: 4; }
  .ptop--person .ptop-head .actions { order: 5; }
}

/* FAQs opens like the home FAQ section, its name on the left with the questions beside it. */
.faq-page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2.25rem + 4vw, 6.5rem); }
.faq-page .faq-side p { margin: 1.25rem 0 0; max-width: 22rem; }

/* Therapists grid */
.team--grid { justify-content: flex-start; margin-top: 0; row-gap: 2.5rem; }

/* Profile */
.profile { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 2rem clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.profile .ph { max-width: 440px; margin: 7%; width: auto; }
.profile .pr { font-weight: 500; margin: .75rem 0 1.75rem; }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } .profile .ph { max-width: 300px; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.contact .lead a { overflow-wrap: anywhere; }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 500; font-size: .875rem; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid transparent; border-radius: 12px; padding: .8rem 1rem; min-height: 52px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-orange) 55%, transparent); }
.form .btn { justify-self: start; margin-top: .5rem; }
.prose { max-width: 44rem; }

/* Footer, cream with the pink rule as approved */
/* A page that ends on a section already has its space, so the footer adds none. */
main:has(> .section:last-child, > .hero:last-child) + .site-foot { margin-top: 0; }
.site-foot { margin-top: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--secondary-pink); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; }
.foot-top h2 { font-size: 1.5rem; }
.foot-top p { font-size: var(--t-small); margin-top: .25rem; }
.foot-legal { text-align: right; font-size: var(--t-small); }
.foot-legal ul { display: flex; gap: .25rem 1.5rem; justify-content: flex-end; list-style: none; padding: 0; margin: 0 0 .5rem; }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: .2em; }
.crisis { margin-top: 2.5rem; text-align: center; font-size: var(--t-small); line-height: 1.8; }
.crisis p { margin: 0; }
.crisis a { text-decoration: underline; text-decoration-skip-ink: none; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: .2em; }
@media (max-width: 860px) { .foot-legal { text-align: left; } .foot-legal ul { justify-content: flex-start; } }
@media (max-width: 640px) { .crisis { text-align: left; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* Brand book. One long page in her colors, no boxes. */
/* Every brand book row sits on one 12 column grid. Headings take 1 to 5, everything that answers them starts at 6. */
.bb-grid, .bb-head, .bb-cover-in, .bb-itgrid, .bb-cband .wrap, .bb-faces, .bb-row, .bb-shape { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bb-gap); }
:root { --bb-gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.bb-cover { padding-block: clamp(1.5rem, .5rem + 3vw, 3.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.bb-cover-in { align-items: end; row-gap: 2rem; }
.bb-cover-mark { grid-column: 1 / 6; }
.bb-cover-side { grid-column: 6 / 13; }
.bb-it-cover { display: block; width: 100%; max-height: min(64svh, 600px); height: auto; overflow: visible; }
.bb-cover-side { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); padding-bottom: .5rem; }
.bb-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding-top: .5rem; font-size: var(--t-small); }
.bb-toc span { color: var(--ink-soft); }
.bb-toc a { font-weight: 500; text-decoration: underline; text-decoration-skip-ink: none; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: var(--secondary-pink); transition: text-decoration-color .2s; }
.bb-toc a:hover { text-decoration-color: currentColor; }
.bb-kicker { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.bb-lockup { display: inline-flex; align-items: flex-end; gap: 14px; color: var(--ink); }
.bb-lockup .wm { height: clamp(40px, 2rem + 2vw, 64px); width: auto; }
.bb-lockup .it { height: clamp(40px, 2rem + 2vw, 64px); width: auto; transform: translateY(2px); }
.bb-cover-line { margin: 0; max-width: 20ch; font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.015em; }

.bb-sec { padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.bb-sec--top0 { padding-top: 0; }
.bb-head { row-gap: 1rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bb-head h2 { grid-column: 1 / 6; font-size: var(--t-h2); }
.bb-head p { grid-column: 6 / 13; margin: 0; max-width: 46ch; }
.bb-head-side { grid-column: 6 / 13; }
.bb-head-side p { margin: 0; max-width: 46ch; }
.bb-head-side .actions { margin-top: 1.5rem; }
.bb-head--pad { padding-top: clamp(1rem, .5rem + 2vw, 2rem); }

.bb-itgrid { row-gap: 2rem; align-items: center; }
.bb-itgrid > svg { grid-column: 1 / 6; }
.bb-itgrid > .bb-flag { grid-column: 6 / 13; }
.bb-it-mark { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: 0; overflow: visible; }
.bb-it-mark g path { transition: opacity .35s ease; }
.bb-it-mark.is-dim g path { opacity: .1; }
.bb-it-mark.is-dim g path.is-on { opacity: 1; }
.bb-flag { list-style: none; margin: 0; padding: 0; display: flex; height: min(56svh, 520px); border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bb-flag li { position: relative; flex: 1 1 0; min-width: 0; background: var(--c); display: grid; align-content: end; gap: 2px; padding: 0 8px 16px; color: var(--secondary-dark); cursor: default; transition: flex-grow .6s var(--ease-out), opacity .3s; outline-offset: -4px; }
.bb-flag li.is-dark { color: var(--secondary-cream); }
.bb-flag li.is-on { flex-grow: 3.2; }
.bb-flag.is-picking li:not(.is-on) { opacity: .55; }
.bb-flag li { overflow: hidden; }
.bb-flag.is-picking li:not(.is-on) .nm { visibility: hidden; }
.bb-flag .nm { font-size: .75rem; font-weight: 500; white-space: nowrap; }
.bb-flag .hx { font-size: .6875rem; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease-out); }
.bb-flag li.is-on .hx { clip-path: inset(0 -4% 0 0); }

.bb-bands { display: grid; }
.bb-cband { background: var(--c); color: var(--fg, var(--secondary-dark)); padding-block: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); }
.bb-cband .wrap { row-gap: .75rem; align-items: baseline; }
.bb-cband h3 { grid-column: 1 / 6; }
.bb-cband .use { grid-column: 6 / 10; }
.bb-cband .hex { grid-column: 10 / 13; }
.bb-cband h3 { color: inherit; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.bb-cband p { margin: 0; }
.bb-cband .hex { font-size: var(--t-lead); font-weight: 500; letter-spacing: .01em; text-align: right; }
.bb-cband .hex span { display: block; font-size: var(--t-xs); font-weight: 400; opacity: .7; letter-spacing: 0; }
.bb-cband.band { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.bb-faces { row-gap: 3rem; }
.bb-face:first-child { grid-column: 1 / 6; }
.bb-face:last-child { grid-column: 6 / 13; }
.bb-face .aa { display: block; font-size: clamp(7rem, 4rem + 11vw, 14rem); line-height: .85; letter-spacing: -0.03em; }
.bb-face .aa.d { font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; }
.bb-face .aa.t { font-family: var(--text); font-weight: 500; letter-spacing: -0.05em; }
.bb-face .fn { margin: 1.75rem 0 0; font-size: var(--t-lead); font-weight: 500; }
.bb-face .fn span { display: block; font-size: var(--t-small); font-weight: 400; color: var(--ink-soft); }
.bb-face .abc { margin: 1rem 0 0; font-size: var(--t-xs); letter-spacing: .12em; color: var(--ink-soft); }
.bb-scale { display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.bb-row { row-gap: .5rem; align-items: baseline; }
.bb-row .spec { grid-column: 1 / 6; }
.bb-row > :last-child { grid-column: 6 / 13; }
.bb-row p { margin: 0; }
.bb-row .spec { font-size: var(--t-xs); color: var(--ink-soft); }
.bb-row .spec b { display: block; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.bb-row .h1-s, .bb-row .h2-s, .bb-row .h3-s { font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.02em; }
.bb-row .h1-s { font-size: var(--t-h1); line-height: 1.08; max-width: 18ch; }
.bb-row .h2-s { font-size: var(--t-h2); line-height: 1.1; }
.bb-row .h3-s { font-size: var(--t-h3); line-height: 1.15; }
.bb-row .body-s { max-width: 60ch; }
.bb-row .small-s { font-size: var(--t-small); }

.bb-voice { background: var(--secondary-blue); color: var(--secondary-cream); padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.bb-voice h2 { color: var(--secondary-cream); }
.bb-voice .bb-group { margin-top: 0; color: var(--secondary-cream); }
.bb-quotes { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); margin-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.bb-quotes figure { margin: 0; }
.bb-quotes figcaption { margin-top: .75rem; font-family: var(--text); font-size: var(--t-small); letter-spacing: 0; color: color-mix(in srgb, var(--secondary-cream) 75%, transparent); }
.bb-quotes blockquote { margin: 0; max-width: 20ch; font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(2rem, 1.3rem + 3vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; }
.bb-quotes figure:nth-child(2) { justify-self: end; text-align: right; }
.bb-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem); font-size: var(--t-small); line-height: 1.55; }
.bb-rules li { padding-top: 1rem; border-top: 1.5px solid color-mix(in srgb, var(--secondary-cream) 30%, transparent); }

.bb-shape { row-gap: 3rem; align-items: center; }
.bb-shape > div:first-child { grid-column: 1 / 6; }
.bb-shape > .hero-art { grid-column: 6 / 13; }
.bb-shape h2 { font-size: var(--t-h2); margin-bottom: 1.25rem; }
.bb-shape p { max-width: 42ch; }
.bb-shape .hero-art { grid-area: auto; grid-column: 6 / 13; width: 100%; max-width: 600px; justify-self: start; }
.bb-pals { margin-top: 2rem; display: flex; gap: .85rem; }
.bb-pals button { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 0 var(--bg), 0 0 0 0 var(--ink); transition: scale .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.bb-pals button:hover { scale: 1.08; }
.bb-pals button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.bb-note { margin-top: 2rem; font-size: var(--t-small); color: var(--ink-soft); }

.bb-photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 9rem + 9vw, 300px); gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.bb-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; }
.bb-photos .p1 { grid-column: 1 / 8; grid-row: span 2; }
.bb-photos .p2 { grid-column: 8 / 13; }
.bb-photos .p3 { grid-column: 8 / 13; }
.bb-photos .p4 { grid-column: 1 / 6; }
.bb-photos .p5 { grid-column: 6 / 13; }

.bb-comp { padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.bb-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.bb-c .cap { margin: 0 0 1.25rem; font-size: var(--t-small); font-weight: 500; }
.bb-c .form { gap: 1rem; }

@media (max-width: 920px) {
  .bb-cover-in, .bb-head, .bb-itgrid, .bb-shape, .bb-cgrid, .bb-faces, .bb-cband .wrap, .bb-row { grid-template-columns: 1fr; }
  .bb-cover-in > *, .bb-head > *, .bb-itgrid > *, .bb-shape > *, .bb-faces > *, .bb-cband .wrap > *, .bb-row > *, .bb-shape .hero-art { grid-column: 1 / -1; }
  .bb-it-cover { width: auto; height: min(46svh, 360px); }
  .bb-it-mark { max-width: 200px; }
  .bb-flag { flex-direction: column; height: auto; }
  .bb-flag li { flex: none; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; }
  .bb-flag li.is-on { flex-grow: 0; }
  .bb-flag .hx { clip-path: none; }
  .bb-cband .hex { text-align: left; }
  .bb-rules { grid-template-columns: 1fr 1fr; }
  .bb-quotes figure:nth-child(2) { justify-self: start; text-align: left; }
  .bb-photos { grid-auto-rows: 180px; }
  .bb-photos .p1 { grid-column: 1 / 13; grid-row: span 1; }
  .bb-photos .p2, .bb-photos .p4 { grid-column: 1 / 7; }
  .bb-photos .p3, .bb-photos .p5 { grid-column: 7 / 13; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-flag li, .bb-it-mark g path { transition: none; }
  .js [data-stagger] > *, .js .hero .tick, .js .hero .morph { transform: none !important; }
  .js .paint path { visibility: visible !important; }
  .js .hero--person .pt-person, .js .hero--person .pt-shape, .js .hero--person .pt-loop { transform: none !important; }
  .js .hero .checks li, .js .hero .actions, .who-pr { clip-path: none !important; }
}

/* Book a session. A full screen layer in the brand cream. One question at a time in the display serif, centered, answered by tapping
   a row that fills with the button orange. Same flow on its own page at /book. */
.book-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.book-dialog::backdrop { background: transparent; }
html.is-booking { overflow: hidden; }
body:has(.book[data-page]) .site-head, body:has(.book[data-page]) .site-foot { display: none; }

.book { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
.book-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 1.25rem; width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; padding-block: 1.25rem; }
.book-icon { grid-row: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.book-icon:hover { background: var(--white); border-color: transparent; }
.book-back { grid-column: 1; }
.book-back[hidden] { display: grid; visibility: hidden; }
.book-close { grid-column: 3; }
.book-bar { grid-column: 2; justify-self: center; width: min(100%, 320px); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.book-bar span { display: block; height: 100%; width: 100%; background: var(--primary-orange); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .7s var(--ease-out); }

.book-body { display: grid; justify-items: center; align-content: start; padding: clamp(2rem, 1rem + 6vh, 6rem) var(--gutter) 4rem; }
.book-step { display: none; width: min(100%, 34rem); }
.book-step.is-on { display: block; }
.book-q { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; text-align: center; outline: none; }
.book-sub { margin-top: 1rem; text-align: center; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-soft); }
.book-sub .link { color: var(--ink); }
.book-step .actions { justify-content: center; margin-top: 2.25rem; }
.book-it { display: block; width: 92px; height: auto; margin: 0 auto 1.75rem; overflow: visible; }

/* Answers. Pills like the buttons, white on the cream, with the same pink wash rising on hover. */
.book-opts { display: grid; gap: .65rem; margin-top: 2.25rem; }
.book-opts--tight { margin-top: 1rem; }
.book-opt { position: relative; display: block; cursor: pointer; }
.book-opt input, .book-day input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.book-row { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: .2rem; align-content: center; min-height: 60px; padding: .85rem 4rem .85rem 1.5rem; border-radius: 30px; background: var(--white); transition: background-color .25s; }
.book-row::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: color-mix(in oklch, var(--secondary-pink) 35%, var(--white)); transform: translateY(102%) scaleX(1.2); border-radius: 50% 50% 0 0; transition: transform .5s var(--ease-out), border-radius .5s var(--ease-out); }
.book-opt:hover .book-row::before { transform: none; border-radius: inherit; }
.book-lbl { font-weight: 500; font-size: 1rem; line-height: 1.3; }
.book-sub2 { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }
.book-tick { position: absolute; right: 1.25rem; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s, box-shadow .25s; }
.book-tick svg { width: 12px; height: 12px; }
.book-tick path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s ease .05s; }
.book-opt input:checked ~ .book-row { background: var(--primary-orange); }
.book-opt input:checked ~ .book-row::before { transform: translateY(102%); }
.book-opt input:checked ~ .book-tick { background: var(--white); box-shadow: none; }
.book-opt input:checked ~ .book-tick path { stroke-dashoffset: 0; }
.book-opt input:focus-visible ~ .book-row, .book-day input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Days and the way to reach you are small pills in a row. */
.book-days, .book-how { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.25rem; }
.book-how { justify-content: flex-start; margin: 0; padding: 0; border: 0; }
.book-how legend { width: 100%; margin-bottom: .5rem; font-weight: 500; font-size: .875rem; }
.book-day { position: relative; cursor: pointer; }
.book-day span { display: grid; place-items: center; min-width: 58px; min-height: 48px; padding: .5rem 1rem; border-radius: 999px; background: var(--white); font-weight: 500; font-size: .9375rem; transition: background-color .25s; }
.book-day:hover span { background: color-mix(in oklch, var(--secondary-pink) 35%, var(--white)); }
.book-day input:checked + span { background: var(--primary-orange); }

.book-form { margin-top: 2.25rem; gap: 1.15rem; }
.book-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .book-pair { grid-template-columns: 1fr; } }
.book-form .actions { justify-content: flex-start; margin-top: .5rem; }
.book-crisis { font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); }
.book-crisis a { color: var(--ink); font-weight: 500; }


/* Brand book, design system half. Reference layout with a side index. */
.bb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.75rem 1.25rem; margin-top: .75rem; }
.bb-sw { display: grid; gap: .2rem; align-content: start; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: copy; }
.bb-sw .chip { height: 96px; border-radius: 16px; margin-bottom: .6rem; box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease-out); }
.bb-sw:hover .chip { transform: translateY(-3px); }
.bb-sw .nm { font-weight: 500; font-size: var(--t-small); }
.bb-sw code { font-size: .75rem; color: var(--ink-soft); }
.bb-sw .hx { font-size: var(--t-small); }
.bb-sw .use { font-size: .75rem; color: var(--ink-soft); }
.bb-sw.is-copied .hx::after { content: "  Copied"; font-weight: 500; }
.bb-sys { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(4.5rem, 3rem + 5vw, 8rem); }
.bb-sysnav { position: sticky; top: 112px; align-self: start; display: grid; gap: .55rem; }
.bb-sysnav a { font-size: var(--t-small); text-decoration: none; color: var(--ink-soft); padding-left: 14px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.bb-sysnav a:hover, .bb-sysnav a.is-on { color: var(--ink); border-left-color: var(--primary-orange); }
.bb-sysbody { display: grid; gap: clamp(4rem, 3rem + 3vw, 6rem); min-width: 0; }
.bb-sysbody h3 { font-size: var(--t-h3); margin-bottom: .75rem; }
.bb-lede { margin: 0 0 1.75rem; max-width: 60ch; }
.bb-group { margin: 2.25rem 0 .5rem; font-size: var(--t-small); font-weight: 500; }
.bb-table { display: grid; border-top: 1px solid var(--line); }
.bb-tok, .bb-trow, .bb-srow, .bb-crow { display: grid; align-items: center; gap: 1rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); text-align: left; }
.bb-tok { grid-template-columns: 28px minmax(0, 14rem) minmax(0, 9rem) minmax(0, 1fr); width: 100%; background: none; border-inline: 0; border-top: 0; color: inherit; font: inherit; cursor: copy; transition: background-color .2s; }
.bb-tok:hover { background: color-mix(in srgb, var(--white) 55%, transparent); }
.bb-tok.is-copied .note::after { content: "Copied"; color: var(--ink); font-weight: 500; margin-left: .5rem; }
.bb-tok .dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.bb-sysbody .nm { display: grid; gap: .15rem; font-weight: 500; }
.bb-sysbody .nm code { font-weight: 400; color: var(--ink-soft); font-size: .75rem; }
.bb-lrow { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 9rem) minmax(0, 1fr); align-items: center; gap: 1rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.bb-lrow .note { color: var(--ink-soft); }
.bb-tok .note { color: var(--ink-soft); }
.bb-trow { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
.bb-srow { grid-template-columns: minmax(0, 14rem) minmax(0, 9rem) minmax(0, 1fr); }
.bb-srow .smp { color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-srow .t-h1, .bb-srow .t-h2, .bb-srow .t-h3 { font-family: var(--display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.02em; }
.bb-crow { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); align-items: baseline; }
.bb-crow .where { color: var(--ink-soft); }
.bb-crow .txt { font-size: var(--t-body); }
.bb-sysbody code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8125rem; }
.bb-demo { padding-block: 1.5rem; }
.bb-demo.band { padding: 2rem; border-radius: 28px; margin-block: .5rem 1rem; }
.bb-demo .form { max-width: 560px; }
.bb-code { position: relative; margin-top: 1.25rem; border-radius: 16px; background: var(--secondary-dark); color: var(--secondary-cream); }
.bb-code pre { margin: 0; padding: 1.25rem 1.5rem; overflow-x: auto; line-height: 1.6; }
.bb-code code { font-size: .8125rem; white-space: pre; }
.bb-copy { position: absolute; top: .75rem; right: .75rem; border: 0; border-radius: 999px; padding: .35rem .85rem; font: 500 .75rem/1 var(--text); color: var(--secondary-dark); background: var(--primary-orange); cursor: pointer; }
.bb-copy.is-copied { background: var(--secondary-pink); }
@media (max-width: 920px) {
  .bb-sys { grid-template-columns: 1fr; }
  .bb-sysnav { position: static; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .bb-sysnav a { padding-left: 0; border-left: 0; }
  .bb-tok { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .bb-tok .note { grid-column: 2 / -1; }
  .bb-srow { grid-template-columns: 1fr; gap: .25rem; }
  .bb-trow, .bb-crow, .bb-lrow { grid-template-columns: 1fr; gap: .25rem; }
}