/* ===================================================================
   MORGAN GYNAECOLOGY — design system
   -------------------------------------------------------------------
   Audience: women 35+, most arriving with a symptom they have been
   told to live with. Every decision below is made for a reader who is
   embarrassed, possibly in pain, and reading on a phone.

   PALETTE NOTES (read before changing anything)
   - #A60000 crimson is the logo colour and the only brand colour used
     for text and buttons. Ratios are proved by scripts/check-contrast.mjs,
     not asserted here — run `npm run check:contrast`.
   - #E7B901 gold is a RULE, never a text colour ON A LIGHT GROUND. Gold
     on paper is 1.85:1 and fails every threshold there is. It appears as
     hairlines, fills and underlines, always with dark text on top. The
     only places it is a text colour are the ink and crimson sections,
     where the ground is dark; the checker verifies those.
   - #F20505 from the supplied chart is deliberately UNUSED (rules, and
     it appears nowhere in this file but this comment). It is
     alarm-red; on a site where visitors are worried about bleeding it
     reads as a warning and undermines the calm the rest of the page is
     working to build. Crimson does everything it would have done.
   - The chart supplied no neutral, so the bone/paper tones below are
     added. They are warmed toward the gold rather than grey so the
     crimson sits on them without going cold or clinical.
   =================================================================== */

:root {
  /* --- brand --- */
  --crimson:        #A60000;
  --crimson-deep:   #7C0000;
  --crimson-wash:   #FAEFEF;
  --gold:           #E7B901;
  --gold-bright:    #F2B705;
  --gold-wash:      #FDF4D8;

  /* --- neutrals (added; not in supplied chart) --- */
  --ink:            #0D0D0D;
  --ink-2:          #3A3A3A;
  --ink-3:          #5D5D5D;   /* consultant grey; matches the logo wordmark */
  --paper:          #FCFAF7;
  --paper-2:        #F5F0E9;
  --paper-3:        #EDE5DA;
  --line:           #E2D9CC;
  --white:          #FFFFFF;

  /* --- type --- */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Base is 18px, not 16px. This audience skews 40–65 and a meaningful
     share are reading without their glasses on. */
  --fs-base:  1.125rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-h3:    clamp(1.35rem, 1.1rem + 1vw,  1.75rem);
  --fs-h2:    clamp(1.75rem, 1.3rem + 2vw,  2.6rem);
  --fs-h1:    clamp(2.3rem,  1.6rem + 3.4vw, 3.9rem);
  --fs-mega:  clamp(2.8rem,  1.8rem + 4.6vw, 5rem);

  --tracking-eyebrow: 0.18em;

  /* --- space --- */
  --s1: .5rem;  --s2: .75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;   --s7: 4.5rem; --s8: 6.5rem;

  --wrap: 1200px;
  --measure: 34rem;      /* ~62 characters at 18px */
  --radius: 3px;         /* near-square. Rounded cards read consumer-app;
                            this practice is a consultant surgeon. */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ===================================================================
   RESET
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-lg); font-family: var(--body); font-weight: 600; letter-spacing: 0; }

p  { margin: 0 0 var(--s3); max-width: var(--measure); text-wrap: pretty; }
a  { color: var(--crimson); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--crimson-deep); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===================================================================
   LAYOUT
   =================================================================== */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: #C9C9C9; }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--crimson { background: var(--crimson); color: #F6DDDF; }
.section--crimson h2, .section--crimson h3 { color: var(--white); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 800px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
  .g-sidebar { grid-template-columns: 1fr 20rem; gap: var(--s7); align-items: start; }
  .g-split { grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; }
}

/* ===================================================================
   THE GOLD RULE — the signature device
   -------------------------------------------------------------------
   The logo's one gesture is the gold hairline between MORGAN and
   GYNAECOLOGY. That rule is lifted out and made the structural motif of
   the whole site: it opens every section, it grows under links on
   hover, and it fills the edge of a card when you reach for it. One
   device, used everywhere, is what makes a small site feel designed
   rather than decorated.
   =================================================================== */
.rule {
  display: block;
  height: 4px;
  width: 4.5rem;
  background: var(--gold);
  border: 0;
  margin: 0 0 var(--s4);
  transform-origin: left center;
}
.rule--wide { width: 100%; height: 2px; }
.rule--center { margin-inline: auto; transform-origin: center; }

/* draw-in on scroll; see morgan.js */
.js .rule[data-draw] { transform: scaleX(0); }
.rule[data-draw].is-in { transform: scaleX(1); transition: transform .7s var(--ease); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 var(--s2);
}
/* Gold text is fine on ink (10.49:1) but only 4.33:1 on crimson, which fails
   AA. On crimson grounds the eyebrow takes gold-wash instead — 7.29:1, same
   warm family, no new colour in the palette. Verified by check:contrast. */
.section--ink .eyebrow { color: var(--gold); }
.section--crimson .eyebrow { color: var(--gold-wash); }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.btn--primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: var(--white); }

.btn--ghost { background: transparent; color: var(--crimson); border-color: var(--crimson); }
.btn--ghost:hover { background: var(--crimson-wash); color: var(--crimson-deep); }

.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-bright); color: var(--ink); }

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

.btn--lg { padding: 1.15rem 2.2rem; font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252, 250, 247, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; align-items: center; gap: var(--s4);
  padding-block: var(--s3);
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { height: 44px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--s4); list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: .35rem;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }

.site-header__actions { display: flex; align-items: center; gap: var(--s3); }
.site-header__tel {
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.site-header__tel:hover { color: var(--crimson); }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; cursor: pointer; }

@media (max-width: 960px) {
  .nav-toggle { display: block; margin-left: auto; }
  .site-header__actions .btn { display: none; }
  .site-nav {
    position: fixed; inset: 4.6rem 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s4) 1.25rem var(--s5);
    margin: 0;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: .9rem 0; font-size: var(--fs-lg); }
  .site-nav a::after { display: none; }
}

/* Persistent mobile action bar. Instagram traffic lands on a phone and
   the two things it must never have to hunt for are "call" and "ask". */
.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: none; gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.mobile-bar a {
  flex: 1; padding: .95rem .5rem; text-align: center;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  background: var(--paper); color: var(--ink);
}
.mobile-bar a.is-primary { background: var(--crimson); color: var(--white); }
@media (max-width: 760px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 3.6rem; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero { position: relative; padding-block: var(--s8) var(--s7); overflow: hidden; }
.hero::before {
  /* Soft warm field behind the type. No stock photography — a smiling
     model in a consulting room is the thing every competitor has. */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%, var(--gold-wash) 0%, transparent 62%),
    radial-gradient(ellipse 60% 70% at 12% 90%, var(--crimson-wash) 0%, transparent 60%);
  opacity: .85; pointer-events: none;
}
.hero > * { position: relative; }
.hero__lede {
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 33rem;
}
.hero h1 { font-size: var(--fs-mega); max-width: 16em; }
.hero h1 em { font-style: italic; color: var(--crimson); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  list-style: none; padding-left: 0;
}
.hero__trust li { font-size: var(--fs-sm); color: var(--ink-3); max-width: 14rem; }
.hero__trust strong { display: block; font-size: var(--fs-base); color: var(--ink); font-weight: 600; }

/* ===================================================================
   SYMPTOM FINDER — the signature component
   -------------------------------------------------------------------
   The main entry point is not a service menu. Someone with a prolapse
   does not search "pelvic organ prolapse", she searches "something
   feels like it's coming down". These cards are written in her words
   and route to the clinical page. It is the lead-generation mechanic
   and the reassurance mechanic in one component.
   =================================================================== */
.symptoms { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .symptoms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .symptoms { grid-template-columns: repeat(3, 1fr); } }

.symptom {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--white);
  padding: var(--s5) var(--s4) var(--s4);
  text-decoration: none;
  color: var(--ink);
  transition: background .2s var(--ease);
}
.symptom::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.symptom:hover, .symptom:focus-visible { background: var(--paper); color: var(--ink); }
.symptom:hover::before, .symptom:focus-visible::before { transform: scaleY(1); }

.symptom__quote {
  font-family: var(--display);
  font-size: 1.3rem; line-height: 1.3;
  font-style: italic;
  color: var(--ink);
}
.symptom__name {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--crimson);
}
.symptom__go { margin-top: auto; padding-top: var(--s3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.symptom:hover .symptom__go { color: var(--crimson); }

/* Red-flag variant. Postmenopausal bleeding needs urgent assessment,
   so it cannot look like the other five cards. Designing it identically
   would be clinically irresponsible. */
.symptom--urgent { background: var(--crimson); color: var(--white); }
.symptom--urgent .symptom__quote { color: var(--white); }
.symptom--urgent .symptom__name { color: var(--gold-wash); }   /* on crimson: gold is 4.33:1, wash is 7.29:1 */
.symptom--urgent .symptom__go { color: #F0C9CC; }
.symptom--urgent::before { background: var(--gold); }
.symptom--urgent:hover { background: var(--crimson-deep); color: var(--white); }
.symptom--urgent:hover .symptom__go { color: var(--gold-wash); }

/* ===================================================================
   CARDS / CONDITION TILES
   =================================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.tile {
  display: block; padding: var(--s4) 0;
  border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.tile:last-child { border-bottom: 1px solid var(--line); }
.tile__title { font-family: var(--display); font-size: var(--fs-h3); margin: 0 0 .3rem; transition: color .2s var(--ease); }
.tile:hover .tile__title { color: var(--crimson); }
.tile p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; max-width: 40rem; }

/* ===================================================================
   PROSE — long-form condition copy
   =================================================================== */
.prose { max-width: 38rem; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s6); padding-top: var(--s4); border-top: 2px solid var(--gold); }
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3rem; max-width: var(--measure); }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--crimson); }

/* Plain-English summary. Sits at the top of every condition page so a
   reader gets the answer before the detail, not after it. */
.plain {
  background: var(--gold-wash);
  border-left: 4px solid var(--gold);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.plain h2, .plain h3 { margin-top: 0; border: 0; padding-top: 0; font-family: var(--body); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
.plain p { color: var(--ink-2); }
.plain p:last-child { margin-bottom: 0; }

.callout--urgent {
  background: var(--crimson-wash);
  border-left: 4px solid var(--crimson);
  padding: var(--s4);
}
.callout--urgent strong { color: var(--crimson-deep); }
.callout--urgent p:last-child { margin-bottom: 0; }

/* Sticky contents rail on condition pages. A long page is only
   reassuring if you can see it is long AND find your bit of it. */
.toc { position: sticky; top: 6rem; font-size: var(--fs-sm); }
.toc__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: .5rem var(--s3); margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-3); }
.toc a:hover { color: var(--crimson); }
.toc a.is-active { border-left-color: var(--crimson); color: var(--ink); font-weight: 600; }
@media (max-width: 799px) { .toc { display: none; } }

/* Treatment ladder — non-surgical first. Ordering surgery last is an
   honesty signal; a site that leads with the operation looks like it is
   selling one. */
.ladder { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.ladder li {
  counter-increment: step;
  position: relative;
  padding: var(--s4) 0 var(--s4) 3.5rem;
  border-bottom: 1px solid var(--line);
  max-width: 40rem;
}
.ladder li::before {
  content: counter(step);
  position: absolute; left: 0; top: var(--s4);
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--display); font-size: var(--fs-base); color: var(--crimson);
}
.ladder h3 { font-size: var(--fs-lg); font-family: var(--body); font-weight: 600; margin-bottom: .3rem; letter-spacing: 0; }
.ladder p { margin-bottom: 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* ===================================================================
   FAQ / accordion
   =================================================================== */
.faq { border-top: 1px solid var(--line); max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline;
  padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--fs-h3); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--crimson); flex: 0 0 auto; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--crimson); }
.faq details > *:not(summary) { margin-bottom: var(--s4); }

/* ===================================================================
   TESTIMONIAL
   =================================================================== */
.quote { max-width: 40rem; }
.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--display); font-style: italic;
  font-size: var(--fs-xl); line-height: 1.45; color: var(--ink);
  max-width: none;
}
.quote cite {
  display: block; margin-top: var(--s3); padding-top: var(--s3);
  border-top: 2px solid var(--gold);
  font-style: normal; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}

/* ===================================================================
   EBOOK / PRODUCT CARDS  (Stripe-backed)
   =================================================================== */
.book {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.book__cover {
  aspect-ratio: 3 / 4;
  display: grid; align-content: space-between;
  padding: var(--s4);
  background: var(--crimson);
  color: var(--white);
  position: relative;
}
.book__cover::after {
  content: ''; position: absolute; left: var(--s4); right: var(--s4); top: 42%;
  height: 4px; background: var(--gold);
}
.book__cover--ink { background: var(--ink); }
.book__cover--gold { background: var(--gold); color: var(--ink); }
.book__cover--gold::after { background: var(--crimson); }
.book__kicker { font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; opacity: .8; }
.book__title { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; margin: 0; color: inherit; }
.book__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.book__body p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
.book__meta { display: flex; align-items: baseline; gap: var(--s2); margin-top: auto; padding-top: var(--s3); }
.book__price { font-family: var(--display); font-size: 1.75rem; color: var(--ink); }
.book__pages { font-size: var(--fs-xs); color: var(--ink-3); }
.book .btn { margin-top: var(--s2); }

/* ===================================================================
   FORMS — the lead capture
   =================================================================== */
.form { max-width: 34rem; }
.field { margin-bottom: var(--s4); }
.field > label, .fieldset__legend {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); margin: 0 0 .5rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%; padding: .85rem .9rem;
  font: inherit; font-size: var(--fs-base);
  color: var(--ink); background: var(--white);
  border: 1px solid var(--ink-3); border-radius: var(--radius);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--crimson); }

/* Chunky tap targets. Small radios are the single most common reason a
   form is abandoned on a phone. */
.choices { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0 0 var(--s4); }
@media (min-width: 560px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); cursor: pointer;
  font-size: var(--fs-sm);
}
.choice:hover { border-color: var(--crimson); }
.choice input { accent-color: var(--crimson); width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--crimson); background: var(--crimson-wash); font-weight: 600; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-3); }
.consent input { accent-color: var(--crimson); margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.privacy-note {
  font-size: var(--fs-sm); color: var(--ink-3);
  border-left: 3px solid var(--gold); padding-left: var(--s3); margin-top: var(--s4);
}

/* ===================================================================
   CLINIC CARDS
   =================================================================== */
.clinic { border-top: 2px solid var(--gold); padding-top: var(--s3); }
.clinic h3 { font-size: var(--fs-lg); font-family: var(--body); font-weight: 600; letter-spacing: 0; margin-bottom: .3rem; }
.clinic address { font-style: normal; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s2); }
.clinic__tel { display: inline-block; font-size: var(--fs-lg); font-weight: 600; text-decoration: none; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: var(--s3); padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.hours strong { color: var(--ink); }
.section--ink .hours li { border-color: #2C2C2C; }
.section--ink .hours strong { color: var(--white); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: var(--ink); color: #9E9E9E; padding-block: var(--s7) var(--s5); font-size: var(--fs-sm); }
.site-footer h3 { color: var(--white); font-family: var(--body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--s3); }
.site-footer a { color: #D8D8D8; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .3rem 0; }
.site-footer__logo { filter: brightness(0) invert(1); opacity: .92; height: 46px; width: auto; margin-bottom: var(--s3); }
.site-footer__grid { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer__legal { border-top: 1px solid #262626; margin-top: var(--s6); padding-top: var(--s4); font-size: var(--fs-xs); color: #7A7A7A; }
.site-footer__legal a { color: #9E9E9E; text-decoration: underline; }

/* ===================================================================
   IMAGE PLACEHOLDERS
   Every one carries its art direction. Replacing them is a photo brief,
   not a guessing game.
   =================================================================== */
.ph {
  position: relative;
  display: grid; align-content: end;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  min-height: 16rem;
  overflow: hidden;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(166,3,17,.045) 14px 28px);
}
.ph span {
  position: relative;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3);
  background: rgba(252,250,247,.94); border-left: 3px solid var(--gold);
  padding: .5rem .7rem; border-radius: 2px;
}
.ph--portrait { aspect-ratio: 4 / 5; min-height: 0; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }

/* ===================================================================
   MOTION
   One orchestrated page-load, and rules that draw as you scroll.
   Nothing else moves.
   =================================================================== */
/* Scoped to .js deliberately. These start hidden and are revealed by
   morgan.js on scroll — so if the hiding were unconditional, a reader with
   JavaScript off would get a permanently invisible hero lede, button row,
   trust list and appointment ladder. The .js class is set by an inline script
   in <head>, so it lands before first paint and there is no flash. */
.js [data-rise] { opacity: 0; transform: translateY(14px); }
[data-rise].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-rise="2"].is-in { transition-delay: .08s; }
[data-rise="3"].is-in { transition-delay: .16s; }
[data-rise="4"].is-in { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-rise] { opacity: 1; transform: none; }
  .js .rule[data-draw] { transform: scaleX(1); }
}

@media print {
  .site-header, .mobile-bar, .site-footer, .toc { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* ===================================================================
   TASK-02 — classes introduced when the shared blocks were extracted
   into partials. These were inline styles in the design build; as
   classes they are visible to scripts/check-contrast.mjs, which inline
   styles never are. That is the point of moving them.
   =================================================================== */

/* Keyboard users must be able to reach the content without tabbing the nav. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: var(--s2) var(--s3); border-radius: var(--radius);
}
.skip-link:focus { left: var(--s3); top: var(--s3); }

/* Brand marks. Inlined SVG, so they scale without a second request. */
.brand-lockup   { width: min(260px, 60vw); height: auto; }
.brand-wordmark { width: min(180px, 45vw); height: auto; }
/* STOPGAP — no reversed lockup exists yet. See partials/footer.njk. */
.site-footer__brand--reversed-stopgap .brand-wordmark { filter: brightness(0) invert(1); }

.site-footer__tagline       { max-width: 22rem; }
.site-footer__hours-heading { margin-top: var(--s5); }

/* Scoped to .section--crimson deliberately. The ground has to be stated in the
   selector or neither a reader nor the contrast checker can tell what these sit
   on - and on crimson, gold is 4.33:1 and fails AA while gold-wash is 7.29:1. */
.section--crimson .eyebrow--oncrimson { color: var(--gold-wash); }
.section--crimson .hours--oncrimson a { color: var(--white); font-weight: 600; text-decoration: none; }
.section--crimson .hours--oncrimson a:hover { text-decoration: underline; }
.section--crimson .btn--oncrimson { border-color: rgba(255,255,255,.5); color: var(--white); }
.section--crimson .btn--oncrimson:hover { background: var(--white); color: var(--crimson); border-color: var(--white); }
.btn-row--cta { margin-top: var(--s4); }

.safety-note { margin: 0 0 var(--s2); }

/* Condition pages: copy plus the sticky rail. Below 800px the rail is hidden
   (see .toc) and this collapses to one column. */
.g-article { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 800px) { .g-article { grid-template-columns: minmax(0,1fr) 15rem; } }

/* Legal pages carry no CTA band; the registration line closes them instead. */
.prose--legal { max-width: var(--measure); }
.legal__registered {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-3);
}

/* --- TASK-02 step 5: classes replacing the design build's inline styles --- */
.section__lede { margin-bottom: var(--s5); }
.section__note { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-3); }
.conditions-index { margin-top: var(--s5); }

/* Illustration slots. Sized so the marks read at their intended 48px on a
   symptom card and larger in the appointment ladder. */
.symptom__illus { display: block; width: 48px; height: 48px; margin-bottom: var(--s2); }
.symptom__illus svg { width: 100%; height: 100%; }
.ladder__illus { display: block; width: 56px; height: 56px; margin-bottom: var(--s2); }
.ladder__illus svg { width: 100%; height: 100%; }
.ladder--illustrated { margin-top: var(--s5); }
.guide-motif { display: block; width: min(260px, 60%); margin-inline: auto; }
.guide-motif svg { width: 100%; height: auto; }

/* On the ink band the marks would otherwise draw in crimson on near-black.
   Re-point the custom properties rather than restyling the paths. */
.section--ink .guide-motif { --crimson: var(--gold); --ink-3: #C9C9C9; }

/* --- TASK-02 step 5: about page classes, replacing inline styles --- */
.standfirst      { font-size: var(--fs-xl); line-height: 1.5; }
.rule--short     { width: 2.5rem; height: 3px; }
.cred__title     { font-family: var(--body); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; }
.cred__body      { font-size: var(--fs-sm); color: var(--ink-3); }
.quote--spaced   { margin-top: var(--s6); }
.card--spaced    { margin-top: var(--s5); }
.card__title     { font-family: var(--body); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
.card__hours     { margin-top: var(--s2); }
.card__cta       { margin-top: var(--s3); }
/* A block marked for clinical sign-off. Visible in the markup, not on the page. */
[data-todo="clinical-signoff"] { outline: 0; }

/* Condition pages. The rail is hidden below 800px (see .toc) so this is a
   single column on a phone, which is where most of this audience reads. */
.condition .prose { max-width: var(--measure); }

/* --- Narrow screens: stop the header overflowing ---------------------------
   At 320px the inlined lockup, the menu toggle and the phone number together
   exceed the viewport and push the page sideways — 118px of horizontal scroll,
   which is miserable on a phone and an accessibility failure at 200% zoom.
   The phone number is redundant here anyway: the persistent mobile bar already
   carries Call as its first action. */
@media (max-width: 600px) {
  .site-header__tel { display: none; }
  .brand-lockup     { width: min(190px, 52vw); }
  .wrap             { padding-inline: var(--s3); }
}
/* Below 380px the toggle and lockup are still tight. */
@media (max-width: 380px) {
  .brand-lockup { width: 150px; }
  .nav-toggle   { padding: .5rem .6rem; font-size: var(--fs-sm); }
}

/* --- TASK-03: legal review banner and page furniture --- */
/* Deliberately loud. A drafted legal page that looks finished is worse than no
   page, because it will be relied on. */
.legal-banner {
  border: 2px solid var(--crimson);
  border-left-width: 6px;
  background: var(--crimson-wash);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  border-radius: var(--radius);
}
.legal-banner p { margin: 0; color: var(--ink); }
.legal__consent {
  border-left: 3px solid var(--gold);
  margin: var(--s4) 0; padding: var(--s2) var(--s4);
  background: var(--paper-2);
}
.form__privacy { font-size: var(--fs-sm); color: var(--ink-3); margin: var(--s4) 0; }
.testimonials { display: grid; gap: var(--s5); }
.standfirst--small { font-size: var(--fs-lg); color: var(--ink-3); }