/* ─────────────────────────────────────────────────────────────────────────
   fixes.css — loaded last, overrides only.

   The inherited stylesheets are minified onto very long lines, so surgical
   edits inside them are risky and produce unreadable diffs. Every correction
   lives here instead: explicit, reversible, and easy to fold back into the
   source stylesheets later.

   1. Colour contrast (WCAG 2.1 AA)
   2. Removing the 1.45MB design-reference sprite
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Contrast ──────────────────────────────────────────────────────────
   --coral #e88f7a measures 2.4:1 on white. It was carrying 10-11px text and
   sitting behind white button labels, so it failed AA everywhere it was used
   for anything other than decoration.

   Two replacements rather than one, so the brand keeps its warmth:
     --coral-ink     small text and button fills   4.96:1  (needs 4.5)
     --coral-display large display text only       4.01:1  (needs 3.0)

   --coral itself is unchanged and stays the decorative colour: motifs,
   underlines, and washes that only ever sit behind dark navy text.        */

:root {
  --coral-ink: #b5523b;
  --coral-display: #c4634b;
}

/* Button fills carrying white labels */
.btn.coral,
.nav-book {
  background: var(--coral-ink);
}

/* Small coral text: 10-14px, needs the full 4.5:1 */
.eyebrow,
.package-label,
.compare-strip span,
.career-timeline b,
.warm-list li:before,
.testimonial-name span,
.hero-note {
  color: var(--coral-ink);
}

.process-large b,
.problem-next strong {
  background: var(--coral-ink);
}

/* Large display coral: 36px+, needs 3.0:1. Kept lighter on purpose so the
   hero phrase still reads as coral rather than brick. */
.home-hero h1 span,
.hero-coral,
.price-grid strong {
  color: var(--coral-display);
}

/* Full-bleed coral bands with white text. Both ends of each gradient clear
   4.5:1 against white, so the label passes wherever it lands. */
.tv-band {
  background: linear-gradient(145deg, #b5523b, #a54a34);
}

.global-cta {
  background: linear-gradient(135deg, #b5523b, #a54a34);
}

/* White button sitting on the coral band */
.global-cta .btn {
  background: #fff;
  color: var(--coral-ink);
}

/* ── 2. The reference sprite ──────────────────────────────────────────────
   `.photo` pulled in assets/reference.png, a 1.45MB design mockup, and the
   About portrait was cropped out of it with background-position. That was
   half the page weight, and the crop was upscaled from a 217x251 region so
   it rendered soft.

   Both `.photo` users now point at real photographs. `.susan-baby` already
   had its own override in styles.css and is restated here because this file
   loads later and would otherwise blank it.                                */

.photo {
  background-image: none;
}

.photo.susan-baby {
  background-image: url('/assets/photos/susan-working-with-babies.jpg');
  background-size: cover;
  background-position: 50% 28%;
}

.photo.portrait {
  background-image: url('/assets/photos/susan-with-babies-hero.jpg');
  background-size: cover;
  background-position: 52% 16%;
}