/* ============================================
   Yolanda / Exclusive Beauty — site styles
   Anything Tailwind can't express directly.
   ============================================ */

:root {
  --cream:        #FAF3E8;
  --cream-100:    #F0EAE0;
  --teal:         #5BBFB5;
  --teal-light:   #A8E4E0;
  --teal-25:      rgba(168, 228, 224, 0.25);
  --purple:       #3F2A52;
  --gold:         #C9A84C;
  --gold-20:      rgba(201, 168, 76, 0.2);
  --ink:          #333333;
  --ink-soft:     #555555;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* Tilted full-bleed media deliberately overhangs the viewport edge */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

.font-display {
  font-family: "Almarena Neue", "DM Serif Display", Georgia, serif;
  font-feature-settings: "ss01" on;
  letter-spacing: -0.01em;
}
.font-script {
  font-family: "Cruyff Sans", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Hero — animated highlight "now!" badge over "Here" */
.hero-highlight {
  position: relative;
  display: inline-block;
  padding: 0 0.12em 0.04em;
  background: var(--teal-25);
  border-right: 3px solid var(--teal-light);
  animation: caret-blink 1.05s steps(2, end) infinite;
}
@keyframes caret-blink {
  0%, 60%   { border-right-color: var(--teal-light); }
  61%, 100% { border-right-color: transparent; }
}
.hero-highlight::after {
  content: "now!";
  position: absolute;
  bottom: 100%;
  right: -1px;
  transform: translateX(100%);
  background: var(--teal-light);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.32em;
  line-height: 1.4;
  padding: 0.25em 0.55em;
  border-radius: 0.5em 0.5em 0.5em 0;
  white-space: nowrap;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* Same highlight treatment, without the "now!" badge (section headings) */
.hero-highlight.is-plain::after { content: none; }

/* Big watermark wordmark "Exclusive beauty" */
.watermark-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.watermark {
  color: var(--cream);
  white-space: nowrap;
  line-height: 0.85;
  opacity: 0.85;
  text-align: center;
  user-select: none;
}
.watermark .line-1 {
  font-family: "Almarena Neue", Georgia, serif;
  font-size: clamp(140px, 24vw, 340px);
  display: block;
}
.watermark .line-2 {
  font-family: "Cruyff Sans", Georgia, serif;
  font-style: italic;
  font-size: clamp(150px, 26vw, 370px);
  display: block;
  margin-top: -0.18em;
  margin-left: 0.18em;
}

/* Decorative blob shapes (top + bottom of hero) */
.blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Section: gold curved background */
.gold-curve {
  position: relative;
  background: var(--gold);
  isolation: isolate;
  overflow: hidden;
}
.gold-curve::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 60px;
  background: var(--cream);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  z-index: 0;
}
.gold-curve::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px -1px;
  height: 60px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 0;
}

/* ============================================================
   Home page — background fields, bands and full-bleed media
   (mockup-accurate; see partials/{hero,about,family,why})
   ============================================================ */

/* Media that runs off the far edge of the viewport (logical radii, so the
   rounded corners stay on the content side when the page flips to RTL). */
.bleed-r,
.bleed-r-lg { border-radius: 0; }
.bleed-r    { border-start-start-radius: 22px; border-end-start-radius: 22px; }
.bleed-r-lg { border-start-start-radius: 40px; border-end-start-radius: 40px; }

/* Horizontal rhythm of the home page. Logical properties throughout so the
   Arabic (RTL) site mirrors instead of hugging the wrong edge. */
.pad-about,
.pad-gold,
.pad-why      { padding-inline: 24px; }
.pad-why-head { padding-inline: 0; }
@media (min-width: 1024px) {
  .pad-about    { padding-inline: 160px 40px; }
  .pad-gold     { padding-inline: 88px 32px; }
  .pad-why      { padding-inline: 25px 150px; }
  .pad-why-head { padding-inline: 135px 0; }
  /* Mission card deliberately overhangs its column and laps over the photo */
  .mission-card { inline-size: 818px; margin-inline-start: -39px; }
}

/* Decorative wave caps (inline SVG, stretched to the viewport width) */
.wave-cap {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

/* Darker-cream field sitting behind the "About Us" section */
.about-band {
  position: absolute;
  left: 0;
  right: 0;
  top: -153px;
  bottom: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-100) 68%, var(--cream) 100%);
}
.about-band .wave-cap { top: 0; height: 130px; }

/* Paragraph rhythm for the rich-text "Who we are" copy */
.prose-about > p + p { margin-top: 1.5rem; }

/* Gold band with a straight diagonal top edge.
   Kept as its own layer (not a clip-path on the section) so the family
   photo and the CTA can overflow the band's bottom edge. */
.gold-slab {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 24px;
  z-index: 0;
  background: var(--gold);
  --slant: 29.1vw;
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
/* Stacked layouts put the copy where the slant would swallow it — flatten it. */
@media (max-width: 1023px) {
  .gold-slab { --slant: 48px; }
}

/* "A family looks like you" — photo and its CTA share a slight tilt.
   The photo is widened past the viewport edge first, so the rotation cannot
   pull its far corner back inside and expose a wedge of gold. */
.tilt-cta             { transform: translateX(-50%); }
/* .btn's hover/active replace `transform` wholesale — re-state ours over them */
.btn.tilt-cta:hover   { transform: translateX(-50%) translateY(-1px); }
.btn.tilt-cta:active  { transform: translateX(-50%); }
@media (min-width: 1024px) {
  .tilt-photo           { transform: rotate(-1deg); margin-inline-end: -28px; }
  /* Centred on the photo rectangle, which runs past the viewport edge */
  .tilt-cta             { transform: translateX(-50%) rotate(-1deg); margin-inline-start: 30px; }
  .btn.tilt-cta:hover   { transform: translateX(-50%) translateY(-1px) rotate(-1deg); }
  .btn.tilt-cta:active  { transform: translateX(-50%) rotate(-1deg); }
}

/* Oversized "Exclusive" wordmark laid across the gold band */
.gold-word {
  position: absolute;
  left: 0;
  right: 0;
  height: 320px;
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.gold-word span {
  display: block;
  padding-inline-start: 23.4%;
  font-family: "Almarena Neue", Georgia, serif;
  font-size: clamp(96px, 18.3vw, 264px);
  line-height: 0.72;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: linear-gradient(90deg, #F6EDDA 0%, #F1E5CC 38%, #E3CD9B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Testimonials — masonry columns that fade out while collapsed */
.tweet-masonry {
  column-gap: 28px;
}
.tweet-masonry > * {
  break-inside: avoid;
  margin-bottom: 28px;
}
.tweet-wrap {
  max-height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.12) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.12) 88%, transparent 100%);
}
.tweet-wrap.is-expanded {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
.tweet-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.tweet-wrap.is-expanded ~ .tweet-cta {
  position: static;
  margin-top: 2.5rem;
}

/* Photo collage cards (Why Exclusive Beauty) */
.collage-card {
  border-radius: 18px;
  border: 4px solid var(--cream);
  box-shadow: -6px 4px 30px rgba(0,0,0,0.16);
  background-size: cover;
  background-position: center;
}
/* Back card of the collage sits behind, desaturated */
.collage-card.is-muted { filter: grayscale(1) sepia(0.16); }

/* Generic image gradient overlay */
.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--gold-20) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* Sparkle bullet for "Why" list */
.spark::before {
  content: "✦";
  display: inline-block;
  width: 1.4em;
  margin-left: -1.4em;
  color: var(--teal);
  font-size: 0.9em;
}

/* "Why Exclusive Beauty" list — evenly spaced lines, no gap between items */
.why-list { padding-inline-start: 1em; }
.why-list .spark::before { width: 1em; margin-left: 0; margin-inline-start: -1em; float: none; }

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 1rem 2rem;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    0 4px 8px rgba(0,0,0,0.16),
    0 2px 4px rgba(0,0,0,0.16);
  border: 1px solid rgba(34,34,34,0.06);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
/* Fixed CTA sizes used across the home page */
.btn-wide { padding: 1.15rem 2.85rem; font-size: 17px; }  /* hero pair          */
.btn-card { padding: 0.9rem  3.7rem;  font-size: 17px; }  /* "What we offer"    */
.btn-lg   { padding: 1.4rem  4.3rem;  font-size: 17px; }  /* "Contact us!" CTAs */

.btn:hover  { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), 0 8px 18px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.16); }
.btn:active { transform: translateY(0); }
.btn-teal   { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #4FAFA5; }
.btn-purple { background: var(--purple); color: var(--cream); }
.btn-purple:hover { background: #34233F; }
.btn-gold   { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #B5963F; }

/* Small "pill" header buttons */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  color: #fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    0 4px 6px rgba(0,0,0,0.08),
    0 1px 2px rgba(0,0,0,0.12);
  border: 1px solid rgba(34,34,34,0.15);
  transition: transform 140ms ease;
}
.pill:hover { transform: translateY(-1px); }
.pill-purple { background: var(--purple); }
.pill-teal   { background: var(--teal); }

/* Section heading underline (animated underline as you scroll) */
.heading-underline {
  position: relative;
  display: inline-block;
}
.heading-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms ease 200ms;
}
.reveal-on.heading-underline::after { transform: scaleX(1); }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
.reveal-on { opacity: 1; transform: none; }

/* Testimonial card */
.tweet {
  background: #F9F8F7;
  border: 2px solid #9DD5CE;
  border-radius: 16px;
  padding: 20px 22px;
}

/* Drop-shadow card */
.card-shadow {
  background: #fff;
  border-radius: 20px;
  box-shadow: 1px 1px 30px rgba(0,0,0,0.08);
}

/* Footer divider line */
.footer-rule {
  border-color: rgba(255,255,255,0.55);
}

/* Mobile menu transition */
#mobileMenu {
  transition: transform 280ms ease, opacity 280ms ease;
}
#mobileMenu.is-closed {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
}

/* ===== Shared component styles for sub-pages ============= */

/* Page header banner — wave shape at the top of inner pages */
.page-banner {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 3rem;
  background: var(--cream-100);
  overflow: hidden;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 70px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ============================================================
   For Intended Parents — "How the process works"
   Scoped under .process-list so the egg-donor page, which shares
   .step-card / .step-num / .chip, keeps its current look.
   ============================================================ */

/* Wave strip at the top of the page (same curve as the home hero) */
.page-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 0;
  pointer-events: none;
}
.page-wave svg { display: block; width: 100%; height: 100%; }

/* Emphasis inside the pull-quotes is bold *and* italic in the design; the
   stored copy ships a .not-italic class, so out-specify it here. */
.intro-quote em,
.intro-quote strong,
.intro-quote b { font-style: italic; font-weight: 700; }

.process-list .step-num {
  font-size: 34px;
  line-height: 1.1;
  width: 44px;
  padding-right: 0;
  text-align: left;
}
.process-list .step-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 26px 28px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.process-list .step-card:hover { transform: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09); }

/* Chip row rides the bottom edge of the card, aligned to its right */
.process-list .chip-row {
  position: absolute;
  inset-inline-end: 35px;
  bottom: -17px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
/* …except on the closing gold card, where it stays inside, bottom-left */
.process-list .step-card.is-final .chip-row {
  position: static;
  margin-top: 20px;
}
/* Narrow cards have no room for a row riding the edge — keep chips inside. */
@media (max-width: 1023px) {
  .process-list .chip-row {
    position: static;
    margin-top: 18px;
    gap: 10px;
  }
}
.process-list .chip {
  height: 35px;
  padding: 0 20px;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
}

/* Donor teaser strip under step 3 */
.donor-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.donor-strip::-webkit-scrollbar { display: none; }
.donor-strip > figure {
  flex: 0 0 333px;
  height: 280px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}
.donor-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.donor-strip-more {
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 150ms ease;
}
.donor-strip-more:hover { background: #4FAFA5; }

/* Equal-width CTA pair used at the foot of both intended-parent pages */
.btn-cta { padding: 1.4rem 2rem; font-size: 17px; min-width: 277px; }

/* Darker-cream tail band behind the CTAs and the founder quote */
.proc-tail {
  position: relative;
  margin-top: -208px;
  z-index: 0;
  background: var(--cream-100);
  padding-top: 310px;
}
.proc-tail > .wave-cap { top: 0; height: 310px; }

.founder-caption {
  display: inline-block;
  background: var(--teal-25);
  border-radius: 10px;
  padding: 14px 18px;
}

/* Process step card (How the Process Works) */
.step-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.step-card.is-final {
  background: var(--gold);
  color: #fff;
}
.step-card.is-final h3 { color: #fff; }

.step-num {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--teal);
  width: 3rem;
  flex: 0 0 auto;
  text-align: right;
  padding-right: 0.5rem;
}
.step-card.is-final + .step-num,
.step-card.is-final ~ .step-num { color: var(--gold); }

/* Soft pill chips inside step cards */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 13px;
  font-weight: 500;
}
.chip.chip-gold { background: var(--gold); }
.chip.chip-light { background: #fff; color: var(--gold); border: 1px solid var(--gold); }
.chip svg { width: 14px; height: 14px; }

/* Form ---------------------------------------------------- */
.form-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  overflow: hidden;
}
.form-card > header {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  padding: 1rem 1.5rem;
}
.form-section {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  padding: 0.85rem 2rem;
  margin: 0 -1.5rem;
}
@media (min-width: 768px) {
  .form-section { margin: 0 -2.25rem; padding: 0.85rem 2.75rem; }
}

.label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #111;
  margin-bottom: 0.4rem;
}
.input, .select, .textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid #BCBCBC;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 15px;
  color: #222;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(91,191,181,0.18);
}
.input::placeholder { color: #BCBCBC; }
.checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #BCBCBC;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.checkbox:checked {
  background: var(--teal);
  border-color: var(--teal);
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Donor card -------------------------------------------- */
.donor-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}
.donor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}
.donor-card .photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #D2CECE 40%, #C19998 70%, #B07E7E 100%);
}
.donor-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.donor-card .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 8px;
}
.donor-card .heart {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  color: #C9A84C;
  cursor: pointer;
  border: none;
  transition: transform 150ms;
}
.donor-card .heart:hover { transform: scale(1.1); }
.donor-card .heart.is-liked { color: #5BBFB5; }
.donor-card .name {
  position: absolute;
  left: 0; right: 0; bottom: 78px;
  text-align: center;
  font-style: italic;
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.donor-card .cta {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 26px;
  border-radius: 12px;
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), 0 4px 8px rgba(0,0,0,0.16);
  cursor: pointer;
}

/* Donor profile modal (Pop-Up Perfil) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 1rem;
  animation: fade-in 160ms ease;
}
.modal-backdrop.is-hidden { display: none; }
@keyframes fade-in { from {opacity:0;} to {opacity:1;} }

.modal {
  background: var(--cream-100);
  border-radius: 28px;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  animation: pop-in 220ms ease;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal .close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Spec tile inside modal */
.spec {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.spec .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(91,191,181,0.12);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.spec .icon svg { width: 22px; height: 22px; }
.spec .label-sm { font-size: 14px; font-weight: 700; color: #111; line-height: 1.2; }
.spec .value-sm { font-size: 14px; color: #4B5563; }

/* Donor modal — photo gallery tabs + thumbnail strip */
.gallery-tab {
  font-size: 13px;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid rgba(34,34,34,0.1);
  transition: background 140ms ease, color 140ms ease;
}
.gallery-tab.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }
.gallery-tab:not(.is-active):hover { background: var(--teal-25); }

.gallery-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 140ms ease, border-color 140ms ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 0.9; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--teal); }

/* ---- Fees & Expenses ------------------------------------- */

/* Subtle darker-cream field behind the service cards. Anchored to the
   bottom so it stays put as the card stack grows; its wavy top edge sits
   behind the cards anyway. */
.fees-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -97px;
  height: 1180px;
  z-index: 0;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-100) 74%, var(--cream) 100%);
}
.fees-band .wave-cap { top: 0; height: 310px; }

/* "total" badge variant of the hero highlight */
.hero-highlight.is-total::after { content: "total"; }

/* Stacked price rows sharing one rounded card */
.fee-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
}
.fee-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.3rem 1.55rem;
  background: var(--cream);
  color: var(--gold);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.35;
}
.fee-line.is-gold { background: var(--gold); color: #fff; }
.fee-line .price { flex: 0 0 auto; font-size: 22px; }
.fee-note {
  padding: 1.3rem 1.55rem 1.5rem;
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
}
.fee-note ul { margin-top: 0.2rem; }

/* Pricing row bars (Fees & Expenses) */
.fee-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.25rem;
  background: #fff;
  border-radius: 12px;
}
.fee-row.is-gold { background: var(--gold); color: #fff; }
.fee-row.is-gold .price { color: #fff; }
.fee-row .price {
  font-weight: 700;
  color: var(--gold);
  font-size: 15px;
}

/* ============================================================
   For Egg Donors — "How the Process Works" + "Compensation"
   Every hard number below is a pixel measured off the 1440px-wide
   mockups, so the two pages are laid out at their design size and
   only fall back to a stacked layout below 1024px.
   ============================================================ */

/* --- Hero: full-bleed photo under a teal veil ---------------- */
.donor-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--teal);
}
.donor-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 26%;
}
/* Veil: solid teal in the bottom-left corner behind the copy, clearing
   the face on the right. Two layers so it deepens downwards as well as
   to the left. Painted over the photo, under the wave and the copy. */
.donor-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(91, 191, 181, 0.62) 0%,
      rgba(91, 191, 181, 0.28) 46%,
      rgba(91, 191, 181, 0.06) 100%),
    linear-gradient(to right,
      rgba(91, 191, 181, 0.8) 0%,
      rgba(91, 191, 181, 0.55) 26%,
      rgba(91, 191, 181, 0.12) 56%,
      rgba(91, 191, 181, 0) 76%);
}
.donor-hero > .wave-cap { top: 0; height: 180px; z-index: 2; }
.donor-hero-copy { position: relative; z-index: 3; }
@media (min-width: 1024px) {
  .donor-hero { height: 665px; }
}

/* --- What's Included ---------------------------------------- */

/* Darker-cream field that carries on below the hero and past the
   section heading, wave-capped back into the page cream. */
.incl-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 258px;
  z-index: 0;
  background: var(--cream-100);
}
.incl-band .wave-cap { top: auto; bottom: 0; height: 150px; }

/* Photo strip that runs the full width of the viewport, laid under
   the bottom edge of the two cards above it. */
.incl-strip {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 874fr 556fr;
  gap: 10px;
  height: 180px;
}
.incl-strip figure { margin: 0; overflow: hidden; }
.incl-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.incl-card { position: relative; z-index: 1; }
.incl-photo { margin: 0; overflow: hidden; border-radius: 0; }
.incl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 1208px) {
  .incl-strip { height: 334px; margin-top: -35px; }
}

/* --- The Process ------------------------------------------- */
.proc-num {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--teal);
  flex: 0 0 auto;
}
.proc-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.08);
  padding: 20px 24px 24px;
}
.proc-photos figure { margin: 0; overflow: hidden; }
.proc-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 1024px) {
  .proc-num { font-size: 33px; width: 77px; }
  .proc-card { padding: 15px 20px 28px; }
}
@media (min-width: 1208px) {
  /* Photo column starts 54px above the first card and slides 42px
     back under the cards' right edge. */
  .proc-photos { margin-top: -54px; margin-inline-start: -42px; }
}

/* Media in these collages runs off the right edge of the viewport.
   580px = half of the 1160px content column. Declared after the
   `figure { margin: 0 }` resets above so it survives them. */
@media (min-width: 1208px) {
  figure.bleed-vw-r { margin-inline-end: calc(580px - 50vw); }
}

/* --- "Step by Step" tag on the big section headings --------- */
.hl-badge {
  position: absolute;
  bottom: calc(100% - 12px);
  inset-inline-end: -10px;
  transform: translateX(100%);
  background: var(--teal-light);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 2.5px 16px;
  border-radius: 0.6em 0.6em 0.6em 0;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[dir="rtl"] .hl-badge { transform: translateX(-100%); border-radius: 0.6em 0.6em 0 0.6em; }

/* --- Yes / No fertility rows -------------------------------- */
.fact {
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 44px;
  border-radius: 16px;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
}
.fact.no  { background: #C36867; }
.fact.yes { background: var(--teal); }
.fact .tag {
  font-weight: 700;
  font-size: 19px;
  width: 74px;
  flex: 0 0 auto;
  text-align: center;
}
.fact .tag + span { padding-inline-start: 26px; }
@media (min-width: 1024px) {
  .fact { min-height: 63px; border-radius: 24px; font-size: 22px; }
  .fact .tag { font-size: 28px; width: 110px; }
  .fact .tag + span { padding-inline-start: 40px; }
}

/* --- The Medical Process (flat list, hairline separators) ---- */
.med-step { padding-bottom: 17px; border-bottom: 1px solid rgba(51, 51, 51, 0.35); }
.med-step + .med-step { margin-top: 15px; }


/* Darker-cream field behind the yes/no rows and the medical steps. Sits
   inside the fertility section but runs past its bottom edge, so the
   medical section is lifted above it with z-index. */
.fert-band {
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: 520px;
  height: 1120px;
  z-index: 0;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-100) 84%, var(--cream) 100%);
  clip-path: polygon(0 255px, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 1023px) {
  .fert-band { display: none; }
}

/* --- Compensation: table of contiguous rows in one card ----- */
.comp-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
}
.comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 5.2px 20px;
  background: #fff;
  color: var(--gold);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}
.comp-row.alt { background: var(--gold); color: #fff; }
.comp-row .right { flex: 0 0 auto; font-size: 15px; text-align: end; }
@media (min-width: 1024px) {
  .comp-row { padding: 5.2px 40px; font-size: 26px; }
  .comp-row .right { font-size: 20px; }
}

/* Darker-cream field behind the compensation table, cut by a long
   diagonal that drops 240px across the width of the viewport. */
.comp-field {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: var(--cream-100);
  clip-path: polygon(0 0, 100% 240px, 100% 100%, 0 100%);
}

/* Three-up photo strip: fixed centre, side photos run off-screen. */
.comp-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 200px;
}
.comp-strip figure { margin: 0; overflow: hidden; }
.comp-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-strip figure:last-child { display: none; }
@media (min-width: 1024px) {
  .comp-strip {
    grid-template-columns: 1fr 582px 1fr;
    gap: 34px;
    height: 351px;
  }
  .comp-strip figure:last-child { display: block; }
}


/* Make watermark text smaller on mobile so it doesn't dominate */
@media (max-width: 640px) {
  .watermark .line-1 { font-size: 28vw; }
  .watermark .line-2 { font-size: 30vw; }
}