/* SonoMe Diagnostic — main stylesheet (design v3: rounded headline font, light sky hero, coloured headings;
   owner feedback of 2026-10-09).
   Tokens mirror ../../design-tokens.json. Change values there first, then here. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --white: #FFFFFF;
  --mist: #EEF7FB;
  --ink: #0C2733;
  --ink-soft: #3F5661;
  --deep: #0A4D66;          /* dark panels (clinics panel on /services, assistant header) */
  --sky: #BFE6F7;           /* home hero background: light sky, ink text on top */
  --on-deep-soft: #D3E8F1;  /* secondary text on deep and ink */
  --rule: #C6DAE3;
  --blue: #19A6DB;          /* logo blue: fills, graphics and, since 2026-10-17, all h1/h2 (Joyboy: match the logo exactly) */
  --blue-deep: #0E607F;     /* text and links on light backgrounds */
  --type-blue: #0B6A94;     /* the readable heading blue (4.5:1 on white, mist, sky, pale panels); now only the home hero title on sky */
  --type-green: #457010;    /* no longer used for heading words (owner, 2026-10-17: titles in one colour); kept for any future green text that must pass 4.5:1 */
  --heading: var(--blue);   /* h1 and h2: exact logo blue (Joyboy, 2026-10-17; 2.79:1 on white, below WCAG AA, accepted). Dark and filled sections set it to white or ink; the sky hero keeps --type-blue */
  --blue-pale: #DDF1FA;
  --green: #80B52F;         /* logo green: fills only, with ink text on top */
  --green-press: #73A22A;
  --green-pale: #ECF5DC;

  /* Type */
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", Verdana, Arial, sans-serif;
  --text-base: 1.125rem;
  --text-small: 1rem;
  --text-lead: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --text-h3: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  --text-h2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --text-h1: clamp(2.5rem, 1.1rem + 4.4vw, 4rem);

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-pill: 999px;
  --radius-panel: 28px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadow (design-tokens.json: shadow.lg) */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Logo green, see-through: the light ring around the "Ask a question" button */
  --green-ring: rgba(128, 181, 47, 0.4);
  --green-glow: rgba(128, 181, 47, 0.6);
  --green-clear: rgba(128, 181, 47, 0);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

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

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1,
h2 {
  color: var(--heading);
}

/* A highlighted word or phrase inside a heading. Since 2026-10-17 (owner: titles in one colour)
   it keeps the heading colour; the class stays for the underline and the line break on /baby-packages. */
.hl {
  color: inherit;
}

/* "You" in the home headline: a hand-drawn underline, as on the original site. */
.hl--underline {
  padding-block-end: 0.14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C32 3 74 3 116 6 M10 14 C42 9 82 9 110 12' fill='none' stroke='%2319A6DB' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% 0.3em;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

a {
  color: var(--blue-deep);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

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

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

/* For screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
}

.skip-link:focus {
  inset-block-start: 1rem;
  outline-color: var(--green);
}

/* Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}

.btn--large {
  min-height: 58px;
  padding: 1rem 1.9rem;
  font-size: var(--text-base);
}

.btn--primary {
  background: var(--green);
  color: var(--ink);
}

.btn--primary:hover {
  background: var(--green-press);
  color: var(--ink);
}

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.btn--on-dark:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.text-link {
  min-width: 44px;
  font-weight: 700;
}

/* Header ------------------------------------------------------------- */

.site-header {
  background: var(--white);
}

.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-header__logo img {
  width: 9.5rem;
}

/* Six menu links sit on one line beside the logo from 56rem; the Menu button is used below that. */
@media (min-width: 56rem) {
  .site-header__row {
    flex-wrap: nowrap;
  }

  .site-nav {
    flex-wrap: nowrap;
  }
}

.nav-toggle {
  display: none;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  cursor: pointer;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.site-nav__list a {
  display: inline-block;
  padding-block: 0.7rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list a:hover {
  text-decoration: underline;
}

.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.35em;
}

@media (max-width: 55.99rem) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .js .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 0.5rem 1rem;
  }

  .js .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }
}

/* Hero --------------------------------------------------------------- */

.hero {
  --heading: var(--type-blue); /* logo blue on sky is about 1.5:1, unreadable; the hero title keeps the darker blue */
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--sky);
  color: var(--ink);
  border-end-start-radius: 50% clamp(2rem, 5vw, 5rem);
  border-end-end-radius: 50% clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.hero :focus-visible {
  outline-color: var(--ink);
}

.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero__title {
  max-width: 17ch;
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.hero__lead {
  max-width: 33rem;
  margin-block-start: 1.75rem;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block-start: 2.25rem;
}

.hero__scene {
  width: min(100%, 34rem);
  margin: 0 auto;
}

/* Hero skit: resting state, shown to visitors with reduced motion: the car parked and empty,
   the sonographer standing at the open door, a heart over the house.
   With motion on, the skit goes further and ends with her inside and the door closed. */

.scene-wheel,
.scene-leg,
.scene-arm,
.scene-door,
.scene-heart {
  transform-box: fill-box;
}

.scene-wheel {
  transform-origin: center;
}

.scene-leg,
.scene-arm {
  transform-origin: 50% 0;
}

.scene-heart {
  transform-origin: center bottom;
}

.scene-door {
  transform-origin: 0 50%;
  transform: scaleX(0.2);
}

.scene-driver,
.scene-home-signal {
  opacity: 0;
}

.proof {
  display: grid;
  gap: 0.9rem 2rem;
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-block: 1.5rem 1rem;
  border-block-start: 1px solid rgba(12, 39, 51, 0.22);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
}

.proof li {
  position: relative;
  padding-inline-start: 2rem;
}

.proof li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.1em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%230C2733' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 36rem) {
  .proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 58rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
  }

  .hero__scene {
    width: calc(100% + 4rem);
    max-width: 42rem;
    margin-inline: auto -4rem;
  }

  .proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Inner pages (faqs, appointments) --------------------------------------
   A calmer layout than the home page: white, a heading rail on the left that
   stays in view, and the content in a single column on the right. The home
   page keeps its own style; do not bring its hero or color bands in here. */

.inner {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--section);
}

.inner__grid {
  display: grid;
  gap: 3rem;
}

.inner__title {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.inner__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--green);
}

.inner__lead {
  max-width: 26rem;
  margin-block-start: 1.5rem;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.inner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

@media (min-width: 60rem) {
  .inner__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .inner__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The rail only stays in view when the window is tall enough to show all of it. */
@media (min-width: 60rem) and (min-height: 48rem) {
  .inner__rail {
    position: sticky;
    inset-block-start: 2.5rem;
  }
}

.inner__jump {
  display: inline-block;
  margin-block-start: 1.25rem;
  padding-block: 0.5rem;
}

/* Rail details (appointments): who to call and when. */

.rail-contact {
  max-width: 26rem;
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 2px solid var(--ink);
}

.rail-contact__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.rail-contact__list {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
}

.rail-contact__list dt {
  color: var(--ink-soft);
  font-size: var(--text-small);
  font-weight: 600;
}

.rail-contact__list dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-lead);
  line-height: 1.4;
}

.rail-contact__number {
  display: inline-block;
  padding-block: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration-color: var(--green);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.14em;
  white-space: nowrap;
}

/* Bulleted list with green dots, used inside answers. */

.dots li {
  position: relative;
  padding-inline-start: 1.4rem;
}

.dots li + li {
  margin-block-start: 0.5rem;
}

.dots li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--green);
}

/* Ruled list of short sections (appointments). */

.ledger {
  border-block-end: 2px solid var(--ink);
}

.ledger__item {
  padding-block: 1.75rem 2rem;
  border-block-start: 2px solid var(--ink);
}

.ledger__item h2 {
  max-width: 24ch;
  margin-block-end: 0.9rem;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ledger__item p,
.ledger__item ul {
  max-width: 36rem;
  color: var(--ink-soft);
}

.ledger__item p + p {
  margin-block-start: 0.6rem;
}

.ledger__item .text-link {
  display: inline-block;
  margin-block-start: 0.6rem;
  padding-block: 0.5rem;
}

/* Question list (faqs): each row opens to show its answer. */

.svc-list {
  border-block-end: 2px solid var(--ink);
}

.svc {
  border-block-start: 2px solid var(--ink);
}

.svc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
}

.svc summary::-webkit-details-marker {
  display: none;
}

.svc__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: pretty;
}

.svc__icon {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green);
  transition: background-color 150ms var(--ease);
}

.svc__icon::before,
.svc__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1rem;
  height: 0.2rem;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease);
}

.svc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.svc[open] .svc__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.svc summary:hover .svc__icon {
  background: var(--green-press);
}

.svc__body {
  max-width: 36rem;
  padding-block-end: 1.75rem;
  color: var(--ink-soft);
}

.svc__body > * + * {
  margin-block-start: 0.6rem;
}

.svc__body .text-link {
  display: inline-block;
  padding-block: 0.5rem;
}

.svc__label {
  color: var(--ink);
  font-weight: 700;
}

.note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-block-start: 3rem;
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  border-radius: var(--radius-panel);
  background: var(--green-pale);
}

/* Stacked note (appointments: service area). */

.note--stack {
  display: block;
}

.note--stack h2 {
  max-width: 22ch;
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  line-height: 1.1;
}

.note--stack p {
  max-width: 34rem;
  margin-block-start: 0.75rem;
}

/* Insurance and payment panel (faqs). The header links straight to it. */

.pay {
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: var(--radius-panel);
  background: var(--blue-pale);
  scroll-margin-block-start: 1.5rem;
}

.pay h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.08;
}

.pay p {
  max-width: 34rem;
  margin-block-start: 1rem;
  font-size: var(--text-lead);
  line-height: 1.45;
}

.pay p + p {
  margin-block-start: 0.5rem;
}

.pay .btn {
  margin-block-start: 1.75rem;
}

/* Request forms (appointments, providers). On appointments the fields sit on a pale panel
   above the ruled sections; on providers `.request--wide` sets them two across inside a panel. */

.request {
  display: grid;
  gap: 1.25rem;
  margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  border-radius: var(--radius-panel);
  background: var(--mist);
}

.request__name {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.request__name legend {
  margin-block-end: 0.6rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.field label {
  display: block;
  margin-block-end: 0.4rem;
  font-weight: 700;
}

.field__req {
  color: var(--ink-soft);
  font-weight: 400;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink-soft);
  border-radius: calc(var(--radius-panel) / 2);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  border-radius: calc(var(--radius-panel) / 2);
}

.field select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink-soft);
  border-radius: calc(var(--radius-panel) / 2);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.field select:focus-visible {
  border-color: var(--ink);
  border-radius: calc(var(--radius-panel) / 2);
}

/* A set of tick boxes (providers form). */

.choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices legend {
  margin-block-end: 0.4rem;
  padding: 0;
  font-weight: 700;
}

.choices label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
}

.choices input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--blue-deep);
}

.request .btn {
  justify-self: start;
  cursor: pointer;
}

.request__status {
  font-weight: 600;
}

@media (min-width: 36rem) {
  .request__name {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .request__name legend {
    grid-column: 1 / -1;
  }
}

/* Closing line on an inner page: plain type, no band. */

.inner-close {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.inner-close h2 {
  max-width: 14ch;
}

/* Services page --------------------------------------------------------
   Its own structure (v4): no rail, no cards. A full-width heading, then the
   12 studies as an index set in heavy type, two across. A short line
   under each name says what the exam looks at. One pale green capsule asks the
   question back; one deep blue panel is for clinics. */

.studies {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
}

.studies__title {
  font-size: clamp(3rem, 0.9rem + 8.6vw, 7.75rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

.studies__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  border-radius: var(--radius-pill);
  background: var(--green);
}

.studies__intro {
  display: grid;
  gap: 1.75rem;
  margin-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.studies__lead {
  max-width: 30rem;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.studies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* The index. */

.studies__list {
  display: grid;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-block-end: 1px solid var(--rule);
}

.study {
  padding-block: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  border-block-start: 1px solid var(--rule);
}

.study__name {
  font-size: clamp(2.1rem, 1.4rem + 2.7vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* The part in brackets is set smaller so the study's name leads. */
.study__detail {
  display: block;
  margin-block-start: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.study__about {
  max-width: 28rem;
  margin-block-start: 0.85rem;
  color: var(--ink-soft);
}

.studies__after {
  max-width: 36rem;
  margin-block-start: 1.5rem;
  color: var(--ink-soft);
}

/* "Don't see the study you need?": one pale green capsule. */

.ask {
  display: grid;
  gap: 1.25rem 2.5rem;
  justify-items: start;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.25rem) clamp(1.5rem, 0.9rem + 3vw, 3.25rem);
  border-radius: var(--radius-panel);
  background: var(--green-pale);
}

.ask p {
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

/* For clinics: one deep blue panel, the four points side by side. */

.clinics {
  --heading: var(--white);
  margin-block-start: 1.5rem;
  padding: clamp(2rem, 1.2rem + 4vw, 4rem);
  border-radius: var(--radius-panel);
  background: var(--deep);
  color: var(--white);
}

.clinics :focus-visible {
  outline-color: var(--white);
}

.clinics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.clinics__list {
  display: grid;
  gap: 1.5rem 2rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.clinics__list li {
  padding-block-start: 1.1rem;
  border-block-start: 0.3rem solid var(--green);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 36rem) {
  .clinics__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 52rem) {
  .studies__intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
  }

  .studies__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ask {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: var(--radius-pill);
  }
}

@media (min-width: 64rem) {
  .clinics__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Baby packages page (/baby-packages) --------------------------------------------
   Its own structure: a big heading and tagline, the welcome text beside a pale green "why" panel,
   four package cards, the add-ons as a price list, one sky panel for the gender reveal, then the
   owner's notes at reading size. */

.packages {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
}

/* Heading, tagline and the baby drawing. On a phone the drawing sits small beside the tagline, so it
   adds no height; on wide screens it stands beside the heading and tagline. */
.packages__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "tagline art";
  column-gap: 1rem;
  align-items: center;
}

.packages__title {
  grid-area: title;
  font-size: clamp(2.75rem, 1rem + 6vw, 5.75rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
}

/* "Baby Packages" keeps to its own line. */
.packages__title .hl {
  display: block;
}

.packages__art {
  grid-area: art;
  width: clamp(6.75rem, 30vw, 11rem);
  height: auto;
  margin-block-start: 0.75rem;
}

.packages__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  border-radius: var(--radius-pill);
  background: var(--green);
}

.packages__tagline {
  grid-area: tagline;
  max-width: 24ch;
  margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.packages__top {
  display: grid;
  gap: 2.25rem;
  margin-block-start: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}

.packages__lead {
  max-width: 36rem;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.packages__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
}

.why {
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  border-radius: var(--radius-panel);
  background: var(--green-pale);
}

.why h2 {
  --heading: var(--ink);
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

.why .checks {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-block-start: 1.25rem;
}

/* The four packages. */

.pkgs {
  display: grid;
  gap: 1.25rem;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.pkg {
  --pkg-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --pkg-fill: var(--blue-pale);
  padding: var(--pkg-pad);
  border-radius: var(--radius-panel);
  background: var(--pkg-fill);
}

.pkg:nth-child(even) {
  --pkg-fill: var(--green-pale);
}

.pkg__name {
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.2rem);
  line-height: 1.05;
}

.pkg__price {
  margin-block-start: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
  font-weight: 700;
  line-height: 1;
}

.pkg__for {
  margin-block-start: 1rem;
  color: var(--ink-soft);
}

/* "What's included": a button that opens that one package's list and twin fee. Every list starts
   closed, on every screen. Without JavaScript the button is a plain label and the lists are shown. */
.pkg__more {
  margin-block-start: 1.25rem;
  border-block-start: 1px solid rgba(12, 39, 51, 0.22);
  font: inherit;
  letter-spacing: 0;
}

.pkg__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: 700 var(--text-base) / 1.3 var(--font-body);
  text-align: start;
  cursor: pointer;
}

.pkg__toggle .svc__icon {
  width: 2rem;
  height: 2rem;
}

.pkg__toggle .svc__icon::before,
.pkg__toggle .svc__icon::after {
  width: 0.8rem;
}

.pkg.is-open .svc__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.pkg__toggle:hover .svc__icon {
  background: var(--green-press);
}

.no-js .pkg__toggle {
  cursor: auto;
}

.no-js .pkg__toggle .svc__icon {
  display: none;
}

.js .pkg:not(.is-open) .pkg__body {
  display: none;
}

.pkg__body {
  display: flex;
  flex-direction: column;
}

.pkg__list {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  margin-block: 0.5rem 1.5rem;
}

.pkg__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

.pkg__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.42em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--green);
}

/* The twin fee is a charge, not something included: it sits apart at the foot of the card. */
.pkg__fee {
  margin-block-start: auto;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid rgba(12, 39, 51, 0.22);
  font-size: var(--text-small);
  line-height: 1.4;
}

/* Add-ons: a plain price list. */

.addons {
  display: grid;
  gap: 1.5rem;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.addons__list {
  border-block-end: 1px solid var(--rule);
}

.addons__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 0.95rem;
  border-block-start: 1px solid var(--rule);
  font-weight: 600;
  line-height: 1.35;
}

.addons__price {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 600;
}

/* Gender reveal: the one sky panel on the page. */

.reveal {
  display: grid;
  gap: 2rem;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding: clamp(1.75rem, 1.1rem + 4vw, 4rem);
  border-radius: var(--radius-panel);
  background: var(--sky);
}

.reveal h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}

.reveal__lead {
  margin-block-start: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.2;
}

.reveal__lead + p {
  max-width: 36rem;
  margin-block-start: 0.9rem;
}

.reveal__aside {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: calc(var(--radius-panel) - 8px);
  background: var(--white);
}

.reveal__aside p {
  margin-block-start: 0.6rem;
  color: var(--ink-soft);
}

/* The owner's notes. Reading size on purpose. */

.notes {
  max-width: 48rem;
  margin-block-start: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  color: var(--ink-soft);
}

.notes p + p {
  margin-block-start: 1rem;
}

.notes strong {
  color: var(--ink);
}

@media (min-width: 44rem) {
  .pkgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Side by side, the cards share their rows, so names, prices and the "What's included" buttons line
     up. The list is a fifth row. A card's coloured panel is drawn behind it and covers only the rows
     that card is showing, so opening one card lengthens that card alone. */
  @supports (grid-template-rows: subgrid) {
    .pkg {
      position: relative;
      z-index: 0;
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
      background: none;
    }

    .pkg > * {
      grid-column: 1;
    }

    .pkg__name { grid-row: 1; }
    .pkg__price { grid-row: 2; }
    .pkg__for { grid-row: 3; }
    .pkg__more { grid-row: 4; }
    .pkg__body { grid-row: 5; }

    .pkg::before {
      content: "";
      z-index: -1;
      grid-column: 1;
      grid-row: 1 / span 5;
      margin: calc(-1 * var(--pkg-pad));
      border-radius: var(--radius-panel);
      background: var(--pkg-fill);
    }

    .js .pkg:not(.is-open)::before {
      grid-row: 1 / span 4;
    }
  }
}

@media (min-width: 56rem) {
  .packages__head {
    grid-template-areas:
      "title art"
      "tagline art";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .packages__tagline {
    align-self: start;
  }

  .packages__art {
    width: clamp(15rem, 27vw, 22rem);
    margin-block-start: 0;
  }

  .packages__top {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }

  .addons {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .reveal {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
}

@media (min-width: 78rem) {
  .pkgs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Contact page ---------------------------------------------------------
   Its own structure: one centered axis, no rail, no cards, no index. The
   heading and the three actions, then the phone number set very large as the
   page's main element with email and hours under it, then one logo-blue
   panel for the service area. */

.reach {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
  text-align: center;
}

.reach__title {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.reach__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) auto 0;
  border-radius: var(--radius-pill);
  background: var(--green);
}

.reach__lead {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.reach__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* Who to reach, and how: plain labels with the details under them, as on the owner's original page. */

.reach__details {
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-block-start: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  border-block-start: 1px solid var(--rule);
}

.reach__name {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

.reach__list {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.25rem) 3rem;
  margin: clamp(1.75rem, 1.3rem + 2vw, 3rem) 0 0;
}

.reach__list dt {
  color: var(--ink-soft);
  font-size: var(--text-small);
  font-weight: 600;
}

.reach__list dd {
  margin: 0.2rem 0 0;
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.reach__list a {
  display: inline-block;
  padding-block: 0.55rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.reach__list a:hover {
  color: var(--blue-deep);
}

.reach__number {
  white-space: nowrap;
}

/* Service area: a quiet pale blue panel. */

.reach__area {
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius-panel);
  background: var(--blue-pale);
}

.reach__area h2 {
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.reach__area p {
  margin-block-start: 1.1rem;
  font-size: var(--text-lead);
  font-weight: 600;
}

.reach__close {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.reach__close h2 {
  max-width: 15ch;
  margin-inline: auto;
}

@media (min-width: 46rem) {
  .reach__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* About page -----------------------------------------------------------
   Its own structure: the founder's letter. Heading, her opening paragraph in
   large type and the buttons beside her portrait; the rest of the letter in
   pairs of paragraphs with one paragraph set large between them; the mission
   on a pale green panel; the nine reasons as a checked grid. */

.story {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
}

.story__top {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.story__title {
  font-size: clamp(3rem, 1.6rem + 6vw, 5.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.story__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: var(--radius-pill);
  background: var(--green);
}

.story__lead {
  max-width: 38rem;
  margin-block-start: 1.75rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.45;
}

.story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* Portrait on a logo-green block that shows at two edges. */

.story__portrait {
  position: relative;
  z-index: 0;
  width: min(100% - 1.25rem, 26rem);
  margin: 0 1.25rem 1.25rem 0;
}

.story__portrait::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: -1;
  border-radius: var(--radius-panel);
  background: var(--green);
}

.story__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-panel);
  /* The studio backdrop is near white: a hairline keeps the photo's edge visible on the white page. */
  outline: 1px solid var(--rule);
  outline-offset: -1px;
}

/* The letter. */

.story__letter {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.story__pair {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  color: var(--ink-soft);
}

.story__pull {
  max-width: 34ch;
  margin-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  padding-inline-start: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-inline-start: 0.55rem solid var(--green);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* The mission: one pale green panel. */

.story__care {
  display: grid;
  gap: 1.5rem 3rem;
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding: clamp(2rem, 1.2rem + 4vw, 4rem);
  border-radius: var(--radius-panel);
  background: var(--green-pale);
}

.story__care h2 {
  max-width: 12ch;
}

.story__care p {
  max-width: 36rem;
  font-size: var(--text-lead);
  line-height: 1.5;
}

.story__care p + p {
  margin-block-start: 1rem;
}

/* The nine reasons. */

.story__why {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.story__why h3 {
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.checks {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin-block-start: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}

.checks li {
  position: relative;
  padding-inline-start: 2.4rem;
  font-weight: 600;
  line-height: 1.35;
}

.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.05em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%230C2733' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.story__close {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.story__close h2 {
  max-width: 15ch;
  font-size: clamp(2.3rem, 1.3rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

@media (min-width: 40rem) {
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 52rem) {
  .story__care {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story__care {
    align-items: start;
  }
}

@media (min-width: 58rem) {
  .story__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
  }

  .story__portrait {
    justify-self: end;
  }

  .checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Providers page -------------------------------------------------------
   Its own structure: three blocks that step to the right down the page (the
   pitch, who the mobile team supports, what is offered), then one full-width
   panel with the partnership form. */

.partner {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
}

.partner__steps {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.partner__title {
  font-size: clamp(3rem, 1.6rem + 6vw, 5.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.partner__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: var(--radius-pill);
  background: var(--green);
}

.partner__lead {
  max-width: 30rem;
  margin-block-start: 1.5rem;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.partner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

.partner__supports {
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  border-radius: var(--radius-panel);
  background: var(--blue-pale);
}

.partner__supports h2 {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

.partner__list {
  display: grid;
  gap: 1rem 2.5rem;
  margin-block-start: 1.5rem;
}

.partner__list li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.partner__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.38em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--green);
}

.partner__offer p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.partner__offer .btn {
  margin-block-start: 1.75rem;
}

/* Honeypot field on both request forms: real visitors never see it; bots fill it. */
.field--trap {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The partnership form: one wide panel, fields two across. */

.partner__form {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding: clamp(1.75rem, 1.2rem + 3.5vw, 4rem);
  border-radius: var(--radius-panel);
  background: var(--mist);
  scroll-margin-block-start: 1.5rem;
}

.partner__form > p {
  max-width: 38rem;
  margin-block-start: 1rem;
  font-size: var(--text-lead);
  line-height: 1.45;
}

.request--wide {
  margin-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.partner__close {
  margin-block-start: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.partner__close h2 {
  max-width: 15ch;
}

@media (min-width: 40rem) {
  .partner__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 46rem) {
  .request--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }

  .request--wide .request__name {
    column-gap: 2rem;
  }

  .request--wide .field--full,
  .request--wide .btn,
  .request--wide .request__status {
    grid-column: 1 / -1;
  }
}

/* The steps: the supports panel starts further right than the heading; the offer returns to the left edge (owner, 2026-10-17). */
@media (min-width: 60rem) {
  .partner__steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .partner__head {
    grid-column: 1 / span 10;
  }

  .partner__supports {
    grid-column: 3 / span 8;
  }

  .partner__offer {
    grid-column: 1 / span 8; /* owner, 2026-10-17: back to the left edge (was 5 / span 8, the third step right) */
  }
}

/* Legal pages (privacy policy, terms of service, legal disclaimer) -----
   One shared plain reading layout: a single column of text, nothing else. */

.legal {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section);
}

.legal__text {
  max-width: 38rem;
}

.legal__title {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.legal__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-block-start: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--green);
}

.legal__title + p {
  margin-block-start: 1.75rem;
}

.legal__text h2 {
  margin-block-start: 2.75rem;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

.legal__text h2.legal__part {
  scroll-margin-block-start: 1.5rem;
  margin-block-start: 4rem;
  padding-block-start: 2.5rem;
  border-block-start: 2px solid var(--ink);
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.legal__text p,
.legal__text ul {
  margin-block-start: 1rem;
}

.legal__text a {
  overflow-wrap: anywhere;
}

/* Intro: who it is for ---------------------------------------------- */

.intro {
  padding-block: var(--section);
}

.intro__copy h2 {
  max-width: 20ch;
}

.intro__copy p {
  max-width: 44rem;
  margin-block-start: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.paths {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 3rem;
}

.path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: var(--radius-panel);
}

.path--patients {
  background: var(--green-pale);
}

.path--providers {
  background: var(--blue-pale);
}

.path h3 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
}

.path p {
  margin-block: 0.6rem 1.75rem;
  font-size: var(--text-lead);
}

.path .btn {
  margin-block-start: auto;
}

@media (min-width: 46rem) {
  .paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* What happens next -------------------------------------------------- */

.next {
  padding-block: var(--section);
  background: var(--mist);
}

.steps {
  display: grid;
  gap: 2.5rem;
  margin-block-start: 3rem;
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-block-end: 1.25rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.step h3 {
  font-size: 1.45rem;
}

.step p {
  max-width: 24rem;
  margin-block-start: 0.7rem;
  color: var(--ink-soft);
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Service area band -------------------------------------------------- */

.area {
  --heading: var(--ink);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--green);
}

.area__grid {
  display: grid;
  gap: 2rem;
  align-items: end;
}

.area h2 {
  max-width: 21ch;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.area__notes {
  font-weight: 600;
}

.area__notes p + p {
  margin-block-start: 0.6rem;
}

@media (min-width: 58rem) {
  .area__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
    gap: 4rem;
  }
}

/* Services ----------------------------------------------------------- */

.services {
  --heading: var(--ink);
  padding-block: var(--section);
  background: var(--blue);
  color: var(--ink);
}

.services__head p {
  max-width: 34rem;
  margin-block-start: 1.25rem;
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.study-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: 2.5rem;
  margin-block: 3rem 2.5rem;
}

.study-list li {
  display: flex;
  align-items: center;
  min-height: 4.25rem;
  padding-block: 0.9rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.26);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Short services band on the home page: the full list lives on /services only. */

.services--brief {
  padding-block: clamp(3rem, 2.2rem + 3.5vw, 5rem);
}

.services__brief {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.services__brief .btn {
  justify-self: start;
}

@media (min-width: 52rem) {
  .services__brief {
    grid-template-columns: 1fr auto;
    gap: 4rem;
  }
}

/* Facts: insurance and hours ----------------------------------------- */

.facts {
  padding-block: var(--section);
  background: var(--mist);
}

.facts__grid {
  display: grid;
  gap: 3rem;
}

.fact h2 {
  margin-block-end: 1rem;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
}

.fact p {
  max-width: 30rem;
  color: var(--ink-soft);
}

.fact p + p,
.fact p + .text-link {
  margin-block-start: 0.6rem;
}

.fact .text-link {
  display: inline-block;
  padding-block: 0.5rem;
}

@media (min-width: 52rem) {
  .facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
  }
}

/* Closing band ------------------------------------------------------- */

.closing {
  --heading: var(--white);
  position: relative;
  padding-block: var(--section);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.closing__arcs {
  position: absolute;
  inset-block-end: -9rem;
  inset-inline-end: -5rem;
  width: clamp(16rem, 34vw, 30rem);
  stroke: var(--blue);
  opacity: 0.55;
  transform: scaleX(-1);
}

.closing__row {
  position: relative;
  display: grid;
  gap: 2.25rem;
}

.closing h2 {
  max-width: 15ch;
  font-size: clamp(2.3rem, 1.3rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.site-footer :focus-visible,
.call-bar :focus-visible {
  outline-color: var(--white);
}

/* A link that stands alone on its line: tall enough to tap. */
.tap-link {
  display: inline-block;
  padding-block: 0.5rem;
}

/* Footer -------------------------------------------------------------
   Left: logo, phone, hours, service area. Middle: page links. Right: booking button and Instagram. */

.site-footer {
  padding-block: 4rem 2.5rem;
  background: var(--ink);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-deep-soft);
  font-size: var(--text-small);
}

.site-footer a {
  display: inline-block;
  min-width: 44px;
  padding-block: 0.6rem;
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}

.site-footer .site-footer__logo {
  padding: 0;
}

.site-footer__logo img {
  width: 11.5rem;
}

.site-footer__brand > * + * {
  margin-block-start: 0.9rem;
}

.site-footer__brand p {
  max-width: 20rem;
  line-height: 1.45;
}

.site-footer .site-footer__phone {
  display: block;
  width: fit-content;
  margin-block-start: 1rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration-color: var(--green);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

.site-footer__links {
  display: grid;
  gap: 0.1rem;
}

.site-footer__links a {
  font-weight: 600;
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
}

.site-footer .site-footer__book {
  display: inline-flex;
  padding: 0.7rem 1.4rem;
  color: var(--ink);
}

.site-footer__social p {
  margin-block-start: 1.75rem;
}

/* Instagram: the glyph alone, white, with a full-size tap area. Its name is read out to screen readers. */
.site-footer .site-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0.25rem 0 0 -10px;
  padding: 0;
  transition: opacity 150ms var(--ease);
}

.site-footer__icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.site-footer__icon:hover {
  opacity: 0.75;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

@media (min-width: 52rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* Phone call bar (small screens) ------------------------------------- */

.call-bar {
  display: none;
}

@media (max-width: 44.99rem) {
  body {
    padding-block-end: 5rem;
  }

  .call-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--ink);
  }

  .call-bar--single {
    grid-template-columns: 1fr;
  }
}

/* Automated assistant (every page) -----------------------------------
   A scripted helper: the visitor types a question; built by js/chat.js. Nothing here shows without JavaScript. */

.chat__launcher {
  position: fixed;
  inset-inline-end: var(--gutter);
  inset-block-end: 1.25rem;
  z-index: 11;
  /* A light green ring sits around the button all the time. */
  box-shadow: 0 0 0 5px var(--green-ring), var(--shadow-lg);
  cursor: pointer;
}

.chat {
  position: fixed;
  inset-inline-end: var(--gutter);
  inset-block-end: 1.25rem;
  z-index: 12;
  display: flex;
  flex-direction: column;
  width: min(25rem, 100vw - 2 * var(--gutter));
  max-height: min(40rem, 100vh - 2.5rem);
  max-height: min(40rem, 100dvh - 2.5rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-panel);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat[hidden],
.chat__launcher[hidden] {
  display: none;
}

.chat__header {
  --heading: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  background: var(--deep);
  color: var(--white);
}

.chat__header :focus-visible {
  outline-color: var(--white);
}

.chat__title {
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.chat__close {
  flex: none;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  cursor: pointer;
}

.chat__close:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

/* The conversation: the visitor's questions on the right, answers on the left. */

.chat__log {
  flex: 1 1 auto;
  min-height: 9rem;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--text-small);
  line-height: 1.5;
}

.chat__msg {
  max-width: 92%;
  padding: 0.85rem 1rem;
  border-radius: calc(var(--radius-panel) / 2);
}

.chat__msg + .chat__msg {
  margin-block-start: 0.75rem;
}

.chat__msg > * + * {
  margin-block-start: 0.7rem;
}

.chat__msg--bot {
  background: var(--mist);
}

.chat__msg--user {
  margin-inline-start: auto;
  width: fit-content;
  background: var(--deep);
  color: var(--white);
  font-weight: 600;
}

.chat__topics {
  display: grid;
  gap: 0.5rem;
}

.chat__topic {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--ink-soft);
  border-radius: calc(var(--radius-panel) / 2);
  background: var(--white);
  color: var(--ink);
  font: 700 var(--text-small) / 1.3 var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}

.chat__topic:hover {
  border-color: var(--ink);
  background: var(--green-pale);
}

.chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat__actions .btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
  background-color: var(--white);
}

.chat__actions .btn--primary {
  background-color: var(--green);
}

.chat__actions .btn--outline:hover {
  background-color: var(--ink);
}

/* Where the question is typed. */

.chat__ask {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0;
  border-block-start: 1px solid var(--rule);
}

.chat__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 1rem;
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
}

.chat__input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.chat__input:focus-visible {
  border-color: var(--ink);
  border-radius: var(--radius-pill);
}

.chat__send {
  flex: none;
  cursor: pointer;
}

.chat__note {
  padding: 0.5rem 1.25rem 0.85rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Room at the end of the page so the button never covers the footer's last links. */
.js .site-footer {
  padding-block-end: 6rem;
}

/* Small screens: sit above the call bar. */
@media (max-width: 44.99rem) {
  .chat__launcher {
    inset-block-end: calc(5rem + env(safe-area-inset-bottom));
  }

  .chat {
    inset-block-end: calc(4.75rem + env(safe-area-inset-bottom));
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem - env(safe-area-inset-bottom));
  }
}

@media print {
  .chat,
  .chat__launcher,
  .call-bar {
    display: none;
  }
}

/* One page-load moment: the copy settles and the hero skit plays. */

@media (prefers-reduced-motion: no-preference) {
  /* "Ask a question" draws the eye for the first half minute, then rests:
     - the light ring around it pulses outward, softly, 11 times (from 2s to about 28s);
     - the button gives a short shake three times (at 8s, 14s and 20s).
     Afterwards the ring stays as a steady light outline. Both stop for good once the assistant has
     been opened. Motion that never stops would break the rule that anything moving can be stopped,
     and distracts people reading. */
  .chat__launcher {
    animation: nudge 6s 8s 3, glow 2.4s 2s 11;
  }

  .chat__launcher--used {
    animation: none;
  }

  .hero__title,
  .hero__lead,
  .hero__actions {
    animation: settle 700ms var(--ease) both;
  }

  .hero__lead {
    animation-delay: 90ms;
  }

  .hero__actions {
    animation-delay: 180ms;
  }

  /* Timeline: 0.2s car drives in; 2.7s she leaves the car; 3.0s she walks to the house;
     5.3s the door opens; 5.75s she steps inside; 6.2s the door closes; 6.65s signal arcs rise from
     the chimney; 6.9s the heart pops. Plays once. She carries only her case. */

  .page-hero__title,
  .page-hero__lead {
    animation: settle 700ms var(--ease) both;
  }

  .scene-car {
    animation: drive 2400ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .scene-wheel {
    animation: roll 2400ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .scene-driver {
    animation: leave 250ms 2700ms linear both;
  }

  .scene-walker {
    animation: appear 250ms 2750ms linear both, walk 2300ms 3000ms cubic-bezier(0.35, 0, 0.55, 1) both;
  }

  .scene-walker-bob {
    animation: bob 287.5ms 3000ms ease-in-out 8;
  }

  .scene-walker-enter {
    animation: enter 450ms 5750ms ease-in forwards;
  }

  .scene-leg--front {
    animation: step-front 575ms 3000ms linear 4, step-front 450ms 5750ms linear 1;
  }

  .scene-leg--back {
    animation: step-back 575ms 3000ms linear 4, step-back 450ms 5750ms linear 1;
  }

  /* Her arm swings with the opposite leg, a little less far. */
  .scene-arm {
    animation: swing 575ms 3000ms linear 4, swing 450ms 5750ms linear 1;
  }

  .scene-door {
    animation: door 1250ms 5300ms linear both;
  }

  .scene-home-signal {
    opacity: 1;
  }

  .scene-home-signal path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: travel 450ms var(--ease) forwards;
  }

  .scene-home-signal path:nth-child(1) {
    animation-delay: 6650ms;
  }

  .scene-home-signal path:nth-child(2) {
    animation-delay: 6800ms;
  }

  .scene-home-signal path:nth-child(3) {
    animation-delay: 6950ms;
  }

  .scene-heart {
    animation: pop 600ms 6900ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* A shake in the first tenth of each 6-second cycle; still for the rest. */
@keyframes nudge {
  0%,
  10%,
  100% {
    transform: none;
  }

  2% {
    transform: rotate(-6deg);
  }

  4% {
    transform: rotate(6deg);
  }

  6% {
    transform: rotate(-4deg);
  }

  8% {
    transform: rotate(3deg);
  }
}

/* The ring swells out from the button and fades, once per cycle: slow and soft, not a blink. */
@keyframes glow {
  0% {
    box-shadow: 0 0 0 5px var(--green-ring), 0 0 0 0 var(--green-glow), var(--shadow-lg);
  }

  70% {
    box-shadow: 0 0 0 5px var(--green-ring), 0 0 0 16px var(--green-clear), var(--shadow-lg);
  }

  100% {
    box-shadow: 0 0 0 5px var(--green-ring), 0 0 0 16px var(--green-clear), var(--shadow-lg);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes travel {
  to {
    stroke-dashoffset: 0;
  }
}

/* Hero skit keyframes */

@keyframes drive {
  from {
    transform: translateX(-460px);
  }

  to {
    transform: none;
  }
}

@keyframes roll {
  from {
    transform: rotate(-880deg);
  }

  to {
    transform: none;
  }
}

@keyframes leave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes walk {
  from {
    transform: translateX(-223px);
  }

  to {
    transform: none;
  }
}

@keyframes bob {
  50% {
    transform: translateY(-2.5px);
  }
}

@keyframes step-front {
  25% {
    transform: rotate(-24deg);
  }

  75% {
    transform: rotate(24deg);
  }
}

@keyframes swing {
  25% {
    transform: rotate(16deg);
  }

  75% {
    transform: rotate(-16deg);
  }
}

@keyframes step-back {
  25% {
    transform: rotate(24deg);
  }

  75% {
    transform: rotate(-24deg);
  }
}

/* Closed, swings open, holds while she steps in, closes again. */

@keyframes door {
  0%,
  100% {
    transform: none;
  }

  28%,
  72% {
    transform: scaleX(0.2);
  }
}

@keyframes enter {
  to {
    transform: translateX(26px);
    opacity: 0;
  }
}

@keyframes pop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}