/* Tokens and layout — Handbook §26 and §6c.
 *
 * The four mobile render rules of §26 are load-bearing here and each has a specific failure that is
 * invisible from a development machine. They are marked RENDER RULE where they appear.
 *
 * THE IDENTITY, AND WHY IT IS THIS ONE
 *
 * There was no prior brand, so this is designed rather than inherited — and it is the second
 * attempt. The first was ink on white with hairline rules, mono captions and an annotation red. It
 * projected authority and it read like a newspaper, which is exactly wrong for this practice: a
 * woman arriving because she cannot get pregnant, or because her body is changing at 47, should not
 * be met by a laboratory form.
 *
 * So the order of priorities is explicit. WARMTH FIRST, carried by ground temperature, generous
 * radii, soft panels and a typeface with soft edges — Fraunces with its SOFT and WONK axes open,
 * which is literally what makes it human instead of editorial. There is not one hairline rule or
 * one monospaced character in this file, and that is deliberate.
 *
 * SERIOUSNESS SECOND, carried by restraint and by credentials placed where they answer a question —
 * never by austerity. The registration number, the specialisation and the reach of the video
 * consultation sit in the hero; the hospital is named as a place she works, quietly, because it is
 * a location and not a title.
 *
 * THE SIGNATURE, used four times in the whole site: a single continuous cycle curve. It is the
 * shape of the thing this practice reads, and it is the visual form of the manifesto.
 */

/* ------------------------------------------------------------------ faces
 * Self-hosted, and the axes are PINNED at the values used. Shipping the whole design space of a
 * variable font to set it one way costs 264 KB; these three files together cost 92 KB. A remotely
 * hosted face would contact a third party on first render, before any consent choice, and with no
 * server there is nowhere to proxy it (§26). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces.woff2?v=3") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic.woff2?v=3") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/figtree.woff2?v=3") format("woff2");
}

:root {
  --ground: #fffbf9;
  --blush: #f9ede8;
  --peach: #f6d9c9;
  --ink: #33202c;
  --ink-soft: #6b5460;
  --line: rgba(51, 32, 44, 0.14);
  --accent: #1f6b52;
  --accent-ink: #fffbf9;
  --berry: #a64a6d;
  --danger: #9e2b1f;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 62ch;
  --gutter: 22px;
  --radius: 26px;
  --radius-sm: 14px;

  /* RENDER RULE 4 — minimum interactive target, with spacing between adjacent ones. */
  --tap-min: 48px;

  --signature: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44'%3E%3Cpath d='M0 30 C 90 30 105 9 190 13 S 330 35 410 28 S 540 9 600 30' fill='none' stroke='%23eec1a8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  /* The door marker needs its own stroke: the divider's peach on a peach disc is invisible. */
  --signature-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44'%3E%3Cpath d='M0 30 C 90 30 105 9 190 13 S 330 35 410 28 S 540 9 600 30' fill='none' stroke='%23a64a6d' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #161214;
    --blush: #201a1e;
    --peach: #35262a;
    --ink: #f2eaec;
    --ink-soft: #b8a7ae;
    --line: rgba(242, 234, 236, 0.16);
    --accent: #6fc3a0;
    --accent-ink: #10201a;
    --berry: #e39bb4;
    --danger: #f2917f;

    --signature: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44'%3E%3Cpath d='M0 30 C 90 30 105 9 190 13 S 330 35 410 28 S 540 9 600 30' fill='none' stroke='%23573c44' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    --signature-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44'%3E%3Cpath d='M0 30 C 90 30 105 9 190 13 S 330 35 410 28 S 540 9 600 30' fill='none' stroke='%23e39bb4' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

* {
  box-sizing: border-box;
}

/* THE `hidden` ATTRIBUTE HAS TO WIN, AND WITHOUT THIS IT DOES NOT.
 *
 * `element.hidden = true` is how this site withdraws a control that has nothing behind it: the
 * consent banner once it has been answered, a scheduling button whose agenda is not configured yet.
 * The rule that acts on it — `[hidden] { display: none }` — lives in the BROWSER's stylesheet, and
 * any author rule setting `display` on the same element beats it. `.consent` sets `display: grid`,
 * so the banner reported `hidden === true` and stayed on screen.
 *
 * That shipped, and it shipped because the property was checked instead of the pixels. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* §6c — every interactive element is keyboard-reachable with a visible focus style. */
:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
  border-radius: 4px;
}

/* §6c — a skip link is the first thing in the tab order. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 14px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

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

a {
  color: var(--accent);
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow {
  max-width: 780px;
}

/* ------------------------------------------------------------------ the signature */
.signature {
  height: 40px;
  margin: 0;
  background-image: var(--signature);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 600px 40px;
}

/* ------------------------------------------------------------------ navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: var(--tap-min);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
}
.nav__menu {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu a {
  display: inline-flex;
  align-items: center;
  /* RENDER RULE 4 */
  min-height: var(--tap-min);
  padding: 0 13px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.nav__menu a:hover {
  color: var(--ink);
  background: var(--blush);
}
.nav__menu a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--blush);
}
.nav__toggle {
  display: none;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 18px;
  background: none;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__toggle {
    display: block;
  }
  .nav__menu {
    display: none;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 100%;
    flex-direction: column;
    gap: 2px;
    background: var(--ground);
    border: 2px solid var(--blush);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: 0 18px 46px rgba(51, 32, 44, 0.12);
  }
  .nav__menu.is-open {
    display: flex;
  }
  .nav__menu a {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------------ hero */
.hero {
  /* RENDER RULE 1 — `dvh`, never `vh`. With `vh` the retracting browser chrome on a phone makes
   * the section taller than the visible viewport, so the call to action is below the fold on the
   * first render, on exactly the devices most of the traffic arrives from. */
  min-height: 64dvh;
  display: flex;
  align-items: center;
  padding: 26px 0 56px;
  border-top: 0;
}
.hero__grid {
  display: grid;
  gap: 38px;
  align-items: center;
}
@media (min-width: 901px) {
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    gap: 58px;
  }
}
.kicker {
  display: block;
  margin: 0 0 16px;
  color: var(--berry);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}
.hero h1 {
  font-size: clamp(35px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
}
.hero h1 em {
  font-style: italic;
  color: var(--berry);
}
.manifesto {
  margin: 0 0 26px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 23px);
  font-style: italic;
  line-height: 1.4;
  max-width: 42ch;
}
.lede {
  font-size: 18.5px;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 0 30px;
}

/* The credential row. It exists because seriousness has to come from somewhere once the austerity
 * is gone — and because these three facts are the ones a visitor is actually weighing. */
.cred {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 28px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.cred span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cred span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
/* The hospital is a place she works, not a badge. Legible, and no longer competing. */
.quiet {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.9;
  max-width: 52ch;
}

/* The portrait sits in an arch — a shape that holds rather than frames — with a soft block behind
 * it. `isolation` keeps that block inside this element's stacking context; without it the offset
 * disappears behind the page background and the whole gesture is silently lost. */
.figure {
  margin: 0;
  position: relative;
  isolation: isolate;
}
.figure::before {
  content: "";
  position: absolute;
  inset: 24px -20px -20px 24px;
  background: var(--peach);
  border-radius: 200px 200px var(--radius) var(--radius);
  z-index: -1;
}
.portrait {
  display: block;
  width: 100%;
  border-radius: 200px 200px var(--radius) var(--radius);
}
.figure figcaption {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
}
/* A landscape photograph is not an arch. */
.figure--wide::before {
  border-radius: var(--radius);
}
.figure--wide .portrait {
  border-radius: var(--radius);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  /* RENDER RULE 4 — spacing between adjacent targets, not only their size. */
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ sections */
section {
  padding: 58px 0;
}
h2 {
  font-size: clamp(26px, 3.6vw, 37px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}
h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 9px;
}
p {
  max-width: var(--measure);
}
.small {
  font-size: 15px;
  color: var(--ink-soft);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.card {
  background: var(--blush);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.card p {
  color: var(--ink-soft);
  margin: 0 0 11px;
}
.card p:last-child {
  margin-bottom: 0;
}

/* The three doors. Equal weight by construction: same card, same type scale, same call to action —
 * a visitor is choosing which one is hers, not which one the practice would prefer. */
.card--door {
  display: flex;
  flex-direction: column;
}
.card--door::before {
  content: "";
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--peach) var(--signature-mark) no-repeat center / 26px 26px;
}
.card__lead {
  color: var(--ink) !important;
  font-size: 17px;
  font-weight: 500;
}
.card__go {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.card__go:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ prose furniture */
.split {
  display: grid;
  gap: 30px;
  align-items: start;
}
@media (min-width: 901px) {
  .split {
    grid-template-columns: 1fr 0.7fr;
    gap: 46px;
  }
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 60px;
  max-width: var(--measure);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--peach);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.steps h3 {
  margin-bottom: 5px;
}

.ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
  max-width: var(--measure);
}
.ticks > li {
  position: relative;
  padding-left: 30px;
}
.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--peach);
}

.panel {
  background: var(--blush);
  border-radius: var(--radius);
  padding: 30px 28px;
  margin-top: 30px;
}
.panel > :first-child {
  margin-top: 0;
}
.panel > :last-child {
  margin-bottom: 0;
}

/* The definition block that opens /climaterio: it is the page's most valuable two sentences, so it
 * is typeset as content rather than as an aside. */
.definition {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.36;
  max-width: 32em;
  margin: 0 0 24px;
}
.definition strong {
  color: var(--berry);
  font-weight: 600;
}

.crosslink {
  margin-top: 34px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.contact-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 600;
}

/* Wide content scrolls inside its own container; the page body never scrolls sideways. */
.scroller {
  overflow-x: auto;
}

/* ------------------------------------------------------------------ sticky conversion bar */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--blush);
  border-top: 2px solid var(--ground);
  /* RENDER RULE 2 — the safe area. This bar holds the conversion control, and on a phone with a
   * gesture bar the button sits underneath it without this. */
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
}
.sticky-cta span {
  font-size: 15px;
  font-weight: 700;
}
@media (min-width: 901px) {
  .sticky-cta {
    display: none;
  }
}

/* ------------------------------------------------------------------ consent banner */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  gap: 14px;
  max-width: 540px;
  background: var(--ground);
  border: 2px solid var(--blush);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 18px 50px rgba(51, 32, 44, 0.18);
}
.consent p {
  margin: 0;
  font-size: 15px;
}
.consent .actions .btn {
  /* Refusing costs exactly what accepting costs — same size, same prominence (§26). */
  flex: 1 1 auto;
}

/* ------------------------------------------------------------------ footer */
.footer {
  margin-top: 20px;
  background: var(--blush);
  padding: 48px 0 calc(104px + env(safe-area-inset-bottom, 0px));
  color: var(--ink-soft);
  font-size: 15px;
}
@media (min-width: 901px) {
  .footer {
    padding-bottom: 48px;
  }
}
.footer a {
  color: inherit;
}
.footer__grid {
  display: grid;
  gap: 26px;
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer h2 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}
.footer__legal {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--ground);
  font-size: 14px;
}
.footer__legal p {
  max-width: none;
  margin: 0 0 6px;
}