/* =====================================================================
   SYSTEM — one type scale, one section-head, one eyebrow, one rhythm.
   Loaded LAST so every section speaks the same language, whatever
   reference its layout came from. Edit tokens here, not in sections.
   ---------------------------------------------------------------------
   Signature: the brand's script (Amsterdam One in the identity sheet;
   "Allison" stands in until the font file arrives) used for ONE gold
   word inside key headings — it echoes the "Dr. Doaa" signature in the
   logo. Eyebrows carry the logo's four-point sparkle.
   ===================================================================== */
:root {
  --font-script: "Amsterdam One", "Allison", cursive;
  /* type system from design-refs/design-md/oura.md ("serif for feeling, sans for facts"):
     Editorial New -> Newsreader (thin, high optical size), AkkuratLL -> Hanken Grotesk */
  --font: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Newsreader", "Times New Roman", serif;

  /* type scale */
  --fs-display: clamp(44px, 5.4vw, 84px);
  --fs-h2: clamp(34px, 3.5vw, 56px);
  --fs-h3: clamp(21px, 1.55vw, 26px);
  --fs-lead: clamp(17px, 1.25vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --track-display: -0.035em;
  --track-h3: -0.02em;

  /* ink */
  --ink-strong: var(--navy);
  --ink-soft: rgba(11, 41, 93, .72);
  --ink-faint: rgba(11, 41, 93, .5);
  --line: rgba(11, 41, 93, .12);
  --sand: #FAF6EF;          /* alternate band: a breath of warmth on the white page (was #F6ECD8) */

  /* rhythm */
  --section-y: clamp(88px, 9vw, 144px);
  --head-gap: clamp(40px, 4.2vw, 72px);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
}

/* ---------- eyebrow (one style everywhere) ---------- */
.rd-label,
.about__label,
.program__label,
.hero__eyebrow,
.invite__badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rd-label::before,
.about__label::before,
.hero__eyebrow::before,
.invite__badge::before,
.program__dot {
  /* the logo tooth instead of the four-point star (client round, 2026-10-26) */
  content: "";
  width: 16px;
  height: 14px;
  flex: none;
  border-radius: 0;
  box-shadow: none;
  background: url("../img/brand-tooth.png") center / contain no-repeat;
  clip-path: none;
}
/* on dark photos the navy half of the mark would vanish: a one-colour gold tooth there */
.rd-label--light::before,
.hero__eyebrow::before {
  background: var(--gold);
  -webkit-mask: url("../img/brand-tooth.png") center / contain no-repeat;
          mask: url("../img/brand-tooth.png") center / contain no-repeat;
}
.about__diamond, .invite__badge-icon { display: none; }
.rd-label--light,
.hero__eyebrow,
.program__label { color: rgba(253, 247, 235, .82); }
.program__label { padding-top: 22px; border-top: 1px solid rgba(253, 247, 235, .18); }

/* ---------- headings ---------- */
.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(56px, 6.8vw, 110px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rd-h2,
.invite__title,
.cta__title,
.program__title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.rd-h2, .invite__title { color: var(--ink-strong); }
.rd-h2--light, .cta__title, .program__title { color: var(--cream); }
.cta__title { white-space: normal; max-width: 15ch; }
.invite__title { max-width: 16ch; }

/* card / item titles */
.pcard__title,
.ba-card__title,
.post__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h3);
}
.pcard__title { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.post__title { margin-top: 10px; }
.ba-card__title { margin-bottom: 10px; }

/* the signature: one script word in gold */
.script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.55em;
  line-height: .6;
  letter-spacing: 0;
  color: var(--gold);
  padding: 0 .06em 0 .02em;
}
/* hero: the emphasis word is the display face in italic gold, not the script */
.hero__title .script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1em;
  line-height: inherit;
  padding: 0 .04em 0 0;
}

/* ---------- intros & body ---------- */
.hero__lead,
.process__intro,
.insurance__note,
.invite__lead,
.sec-intro {
  font-size: var(--fs-lead);
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}
.process__intro, .insurance__note, .sec-intro { color: var(--ink-soft); max-width: 46ch; margin: 0; }
.invite__lead { color: var(--ink-soft); font-weight: 400; }
.ba-card__text,
.pcard__text,
.program__text,
.review-card__quote,
.about__caption,
.about__stat-label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
}
.ba-card__text, .about__caption, .about__stat-label { color: var(--ink-soft); }
.post__cat {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.about__num { font-weight: 500; letter-spacing: -0.03em; }
.about__statement { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.35; letter-spacing: -0.02em; }

/* ---------- section rhythm ---------- */
.rd-section,
.about,
.services,
.process,
.insurance,
.contact { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.ba__top { padding-top: var(--section-y); padding-bottom: var(--head-gap); }
.process { padding-bottom: calc(var(--section-y) * .5); }
.reviews .rd-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* one section-head: titles left, intro/actions right, bottoms aligned */
.rd-head,
.process__head,
.insurance__head,
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: var(--head-gap);
}
.rd-head > :last-child:not(.rd-head__titles),
.process__head > :last-child:not(.rd-head__titles),
.insurance__head > :last-child:not(.rd-head__titles),
.services__head > :last-child:not(.rd-head__titles) { justify-self: end; }
.rd-head__titles { gap: 20px; }
.reviews__grid, .blog__grid, .ba__cards { margin-top: 0; }
.ba__actions { margin-top: 0; }

/* tinted band for rhythm: services index sits on sand (svc.css) */

/* ---------- radii & surfaces ---------- */
.review-card--white, .ins-card { border-radius: var(--r-md); }
.pcard { border-radius: var(--r-lg); }
.ins-card, .review-card--white { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 48px -36px rgba(var(--shadow-tint), .35); }

/* ---------- buttons: primary (gold), booking pill, text link ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink-strong);
  font: 500 var(--fs-small)/1.4 var(--font);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size .35s cubic-bezier(.16, 1, .3, 1);
}
.link-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.link-arrow:hover { background-size: calc(100% - 28px) 1px; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.link-arrow--light { color: var(--cream); }
button.gold-pill { border: 0; cursor: pointer; font-family: var(--font); }

/* ---------- contact head inside the form card ---------- */
.contact__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
.contact__head .rd-h2 { font-size: clamp(28px, 2.4vw, 38px); }

@media (max-width: 1023.98px) {
  .rd-head, .process__head, .insurance__head, .services__head { grid-template-columns: 1fr; }
  .rd-head > :last-child:not(.rd-head__titles),
  .process__head > :last-child:not(.rd-head__titles),
  .insurance__head > :last-child:not(.rd-head__titles),
  .services__head > :last-child:not(.rd-head__titles) { justify-self: start; }
}

/* About: booking pill + Doctify chip sit together under the statement */
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.about__actions .about__chip { position: static; padding: 8px 14px; box-shadow: none; }
.about__actions .about__chip-num { font-size: 18px; }

/* Invite: soft cream glow behind the copy so text and the gold script read over the white tooth */
.invite__text-button { position: relative; }
.invite__text-button::before { content: ""; position: absolute; inset: -60px -120px; z-index: -1; background: radial-gradient(closest-side, rgba(253, 244, 229, .92), rgba(253, 244, 229, .6) 55%, rgba(253, 244, 229, 0)); pointer-events: none; }
.invite__content { isolation: isolate; }

/* ---------- hero -> statement overlap ----------
   The statement slides up over the bottom edge of the hero as a rounded white
   sheet with a soft shadow; the hero content drifts up and dims as it is covered
   (assets/js/base.js, hero parallax). */
:root { --hero-overlap: clamp(36px, 4vw, 64px); }
.hero { padding-bottom: var(--hero-overlap); }
.statement {
  z-index: 2;
  margin-top: calc(-1 * var(--hero-overlap));
  background: var(--bg);
  border-radius: var(--hero-overlap) var(--hero-overlap) 0 0;
  box-shadow: 0 -24px 48px -28px rgba(6, 20, 46, .55);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--navy-deep);
  opacity: var(--hero-veil, 0);
  pointer-events: none;
}

/* =====================================================================
   OURA LAYER — typography from design-refs/design-md/oura.md, chosen by
   the user over Apple / Airbnb (homepage/font-compare.html).
   Display & section headlines: Newsreader 300 (thin serif, scale not
   weight makes hierarchy), one italic gold accent word. Everything at
   reading size: Hanken Grotesk. Eyebrows: 12 / 700 uppercase.
   Colours, buttons and layout stay ours.
   ===================================================================== */
:root {
  --fs-h2: clamp(40px, 4.4vw, 68px);
}
.rd-h2,
.invite__title,
.cta__title,
.program__title,
.swa-title,
.menu-panel__nav a {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.rd-h2, .invite__title, .cta__title, .program__title { font-size: var(--fs-h2); line-height: 1.08; }
/* user's call (2026-10-21): the statement sentence and the footer title use the sans
   at a heavy weight, not the thin serif */
.statement__text,
.site-footer__title {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.statement__text { line-height: 1.15; }
.swa-title { line-height: 1.02; }
.menu-panel__nav a small { font-family: var(--font); }

/* the accent word: italic serif in gold (replaces the script face) */
.script,
.hero__title .script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: -0.01em;
  padding: 0 .04em 0 0;
  color: var(--gold);
}

/* numbers read as display: counters + about stats */
.fact__num, .about__num { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; }
.about__num { font-size: 48px; line-height: 1; }

/* eyebrows: quiet overline, 12 / 700 */
.rd-label,
.about__label,
.program__label,
.hero__eyebrow,
.invite__badge { font-weight: 700; letter-spacing: .1em; }

/* body: AkkuratLL-style reading size */
.hero__lead { font-size: 18px; line-height: 1.5; }
.brand__name strong { white-space: nowrap; }

/* ---------- hero sizing (user: content filled the screen, esp. on mobile) ----------
   Smaller display + lead, tighter stack; on phones the headline is 34px and the
   copy starts closer to the header. */
.hero__title { font-size: clamp(34px, 3.9vw + 16px, 76px); line-height: 1.06; }
.hero__lead { font-size: 16px; line-height: 1.55; max-width: 460px; }
.hero__copy { gap: 18px; max-width: 640px; }
.hero__buttons { margin-top: 4px; }
.hero__main { padding-top: clamp(104px, 9vw, 140px); }
@media (max-width: 809.98px) {
  .hero__main { padding-top: 96px; padding-bottom: 24px; }
  .hero__copy { gap: 14px; }
  .hero__eyebrow { font-size: 11px; }
  .hero__lead { font-size: 15px; }
}

/* ---------- contact: real cut-out portrait (media/gemini/contact-doctor.png, 432×578) ----------
   Fills the section height, standing on its bottom edge (no frame). Shown ~1.5× its
   native size, so a sharper cut-out (~1100×1480) would help. Her right arm is cut by the source image's edge, so that side fades out. */
.contact__person {
  /* user, 2026-10-21: full height — from the top of the form card down to the
     section's bottom edge; width follows the photo's ratio */
  top: 0;
  bottom: calc(-1 * var(--section-y));
  width: auto;
  height: auto;
  aspect-ratio: 432 / 578;
  max-width: calc(100% - 610px);   /* never slides under the 590px form card */
  border-radius: 0;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 9%);
          mask-image: linear-gradient(to left, transparent 0, #000 9%);
}
/* when the side column is too narrow for a full-height figure, drop the top anchor so
   she still stands on the section's bottom edge at the width available */
@media (max-width: 1399.98px) { .contact__person { top: auto; width: min(calc(100% - 610px), 660px); max-width: none; } }
.contact__person img {
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 24px 40px rgba(6, 20, 46, .35));
}

/* ---------- softer photos (user, 2026-10-21: "the photos are too sharp") ----------
   Every photo gets a light veil: a touch less saturation and contrast, and 90%
   opacity so the cream behind breathes through. filter: opacity() multiplies with
   the element's own opacity, so crossfades (services preview) keep working.
   Logos, insurer marks and the transparent doctor cut-out stay untouched. */
main img,
.site-footer__pic img {
  filter: saturate(.86) contrast(.92) opacity(.9);
}
main img[src*="brand-tooth"],
main img[src*="contact-doctor"] {
  filter: none;
}
/* frames behind photos: cream, so the 90% veil lightens the photo instead of darkening it */
.svc__frame,
.ba__compare,
.about__media,
.about__inset,
.post__img,
.svc__thumb { background-color: var(--cream); }

/* Round 12 (critique): gold text on light surfaces. #CE9E45 on cream is 2.3:1 and fails even
   for large text, so emphasis words and small gold numbers use darker stops of the same gold.
   Dark surfaces (the Hero over the video) keep the bright --gold. */
.script,
.statement__text .accent,
.about__chip-num { color: var(--gold-ink); }
.hero__title .script,
.cta .script { color: var(--gold); } /* light headings over photos */
.ba-case__num,
.visit-card__num,
.fact__num sup { color: var(--gold-deep); }

/* ---------- hero layout (client round, 2026-10-26: "the content isn't distributed") ----------
   One screen tall, never taller: on a 1366×645 laptop the old 760px floor pushed the
   doctor card below the fold. Desktop/tablet: copy left, Dr. Doaa's card right, both
   standing on the same baseline low in the frame, the photo breathing above.
   Phones (third pass, user: no gaps): the hero is as tall as its content — one block with
   a fixed rhythm, nothing stretches. One primary action (book), the other one ghosted. */
.hero { min-height: max(100svh, 600px); }
.hero__main {
  flex: 1;
  align-items: end;
  padding-bottom: clamp(28px, 5vh, 56px);
}
@media (max-width: 809.98px) {
  .hero { min-height: 0; }
  .hero__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-top: 128px;   /* header + a band of the photo above the words */
    padding-bottom: 28px;
  }
  .hero__copy { gap: 16px; }
  .hero__title { font-size: clamp(38px, 10.4vw, 46px); line-height: 1.04; }
  .hero__buttons { margin-top: 8px; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__buttons .book-pill { display: flex; order: -1; }
  .hero__buttons .book-pill__body { flex: 1; height: 50px; }
  /* the secondary action steps back: outline on the photo instead of a second gold pill */
  .hero__buttons .gold-pill {
    justify-content: center;
    height: 48px;
    background: rgba(253, 247, 235, .06);
    box-shadow: inset 0 0 0 1px rgba(253, 247, 235, .45);
    color: var(--cream);
  }
  .hero__buttons .gold-pill::before { background: var(--gold); }
  .hero__doctor {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 16px;
  }
  .hero__doctor-photo { order: -1; flex: none; width: 56px; height: 56px; border-radius: 12px; }
  .hero__doctor-icon, .hero__doctor-tags { display: none; }
  .hero__doctor-head { padding: 0; }
  .hero__doctor-head strong { font-size: 15px; }
  .hero__doctor-head small { font-size: 12.5px; }
  /* a quiet arrow: the row opens her profile */
  .hero__doctor::after {
    content: "";
    width: 9px;
    height: 9px;
    margin: 0 8px 0 auto;
    flex: none;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    rotate: 45deg;
    opacity: .8;
  }  /* large phones / small tablets: the actions keep a phone-like width instead of stretching */
  .hero__buttons, .hero__doctor { width: 100%; max-width: 440px; }

}