/* Self-hosted Manrope (headings) + Inter (body), variable fonts so one file per
   subset covers every weight.

   The two 'latin' files are subset twice - to Latin-1 plus the punctuation used,
   and to the weight axis each family needs (Inter 400-700, Manrope 500-800).
   Inter 48.3 KB -> 27.7 KB, Manrope 24.8 KB -> 22.0 KB. The 'latin-ext' files
   are left whole; they load only when a character needs them.

   Re-subsetting: the untouched originals are NOT in this repo (build inputs,
   never served). They live in Downloads/ovara-fortis-lp-removed-2026-09-09/
   font-subset-sources/, or re-download from Google Fonts. Always subset from
   those, never from a subset, and keep unicode-range below in step with what
   the file contains - an over-claiming range renders .notdef boxes instead of
   falling through to latin-ext. */

/* ---------- Manrope : 500-800 ---------- */
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+FFFD;
}

/* ---------- Inter : 400-700 ---------- */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+FFFD;
}

/* ==========================================================================
   OVARA - FORTIS HOSPITAL INDIA - LANDING PAGE
   Base + component styles. ALL media queries live in responsive.css.

   COMPLIANCE ANCHOR: Ovara is a medical tourism FACILITATOR, not a hospital,
   clinic, or treatment provider. The "Ovara Is / Ovara Is Not" table and the
   compliance pills below are load-bearing - never shrink or hide them.
   ========================================================================== */

/* ---------- 1. TOKENS ----------
   The literal logo colours measure 2.22:1 to 4.08:1 on white, all under the
   4.5:1 AA bar, so anything carrying white text uses a darkened step instead:
     --blue 4.73:1   --blue-dark 5.83:1   --blue-deep 8.19:1   --teal-dark 4.56:1
   Only tokens this page consumes are declared - re-add from these ratios if a
   future section needs a lighter one. */
:root {
  /* Sets the hospital name apart in body copy ONLY - never a button or badge
     that could read as the hospital's own UI. A petrol blue of our own, NOT
     sampled from any hospital's branding. */
  --hosp-accent: #007C9E;

  /* the ovara wordmark blue, out of logo.webp */
  --logo-blue: #0882BD;

  /* primary action scale */
  --blue: #0A7BAC;
  --blue-dark: #0A6C97;
  --blue-deep: #095574;

  /* secondary / supporting scale */
  --teal: #14B8B4;
  --teal-dark: #0D8386;

  /* WhatsApp brand green, per the client's change note. A11Y: white text on
     #25D366 is 1.95:1, far under AA - the old #0E7466 cleared it. Kept because
     the client asked for the logo colour and WhatsApp renders it this way; the
     contrast was raised with them, not quietly overridden. */
  --wa-green: #25D366;
  --wa-green-dark: #1DA851;

  /* ink: blue-based neutrals replacing the old violet navy */
  --navy: #0C3A4F;
  --navy-deep: #082A3A;
  --navy-soft: #4A6B7C;

  --mist: #F4F8FA;
  --blue-mist: #EAF6FB;
  --teal-mist: #E6F7F7;
  --line: #DCEAF0;
  --white: #FFFFFF;

  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;

  --shadow-soft: 0 16px 40px rgba(12, 58, 79, .10);
  --shadow-cta: 0 14px 32px rgba(10, 123, 172, .26);

  --sec-space: 80px;
}

/* ---------- 2. BASE ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  /* must sit on <html>, not <body> - overflow on body turns it into a scroll
     container, which breaks the sticky header and the fixed mobile CTA bar */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy-deep);
  background: var(--white);
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
}

p {
  color: var(--navy-soft);
  line-height: 1.7;
  margin: 0;
}

a {
  text-decoration: none;
}

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

:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.sec-pad {
  padding-top: var(--sec-space);
  padding-bottom: var(--sec-space);
}

.bg-mist {
  background: var(--mist);
}

.sec-head {
  margin-bottom: 44px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: var(--blue-mist);
  padding: .35rem .9rem;
  border-radius: var(--radius-pill);
}

.sec-title {
  font-weight: 800;
  font-size: clamp(1.55rem, 3.1vw, 2.3rem);
  line-height: 1.22;
  margin-top: 14px;
}

.sec-sub {
  color: var(--navy-soft);
  font-size: 1.05rem;
  max-width: 660px;
  margin: 14px auto 0;
}

.ic-l {
  margin-right: 8px;
}

/* Icon optics. At a nominal 1em a Font Awesome Solid glyph fills its box far
   more than the inline WhatsApp mark, whose artwork is inset - measured, the
   phone drew 82x76 against WhatsApp's 70x71, reading as two different weights.
   Font-weight cannot fix it (.fa-solid IS weight 900; 700 is a blank box in FA
   Free), so the sizes are trimmed to match instead. */
i.ic-l,
.mob-cta i {
  font-size: .9em;
}

/* label text for screen readers only - the bundled Bootstrap build is a subset
   and does not ship .visually-hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Font Awesome CSS is attached after first paint - this rule holds the layout
   steady until it arrives. */
i.fa-solid,
i.fa-regular {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  font-style: normal;
}

/* WhatsApp mark: inline SVG symbol, so the 117 KB Font Awesome Brands face is
   never downloaded for a single glyph. */
.svg-sprite {
  display: none;
}

.ic-wa {
  width: 1.06em;
  height: 1.06em;
  fill: currentColor;
  vertical-align: -.125em;
  flex-shrink: 0;
}

/* ---------- 3b. OFF-SCREEN SECTION SKIPPING ----------
   The page is ~13,500px tall on a phone, and laying all of it out before the
   first frame cost 2.5s of Style & Layout under Lighthouse's 4x throttle.
   content-visibility:auto skips a section until it nears the viewport. The hero
   (it IS the first paint) and the sticky header are excluded.

   contain-intrinsic-size is a placeholder height so the scrollbar lands roughly
   right; `auto` makes the browser remember the real height after first render,
   so the estimate only matters on the first approach. A wrong one costs a little
   scrollbar drift, never a visible shift. */
main > section:not(#home),
.cv-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

/* measured phone heights, rounded to 50px - phone is where this earns its keep */
#why-fortis {
  contain-intrinsic-size: auto 1350px;
}

#locations {
  contain-intrinsic-size: auto 1150px;
}

#why-ovara {
  contain-intrinsic-size: auto 1300px;
}

#how {
  contain-intrinsic-size: auto 850px;
}

#specialities {
  contain-intrinsic-size: auto 1500px;
}

#journey {
  contain-intrinsic-size: auto 1000px;
}

#trust {
  contain-intrinsic-size: auto 1050px;
}

#usp-counters {
  contain-intrinsic-size: auto 550px;
}

#services {
  contain-intrinsic-size: auto 850px;
}

#travel {
  contain-intrinsic-size: auto 950px;
}

#faqs {
  contain-intrinsic-size: auto 1000px;
}

#consult {
  contain-intrinsic-size: auto 1250px;
}

.cv-footer {
  contain-intrinsic-size: auto 500px;
}

/* custom.js sets .cv-off on <html> at the first in-page jump: estimated heights
   are fine for a scrollbar but not for landing on #consult, so skipping is
   dropped once accuracy matters. The :not(#home) repeat is deliberate - it
   carries the ID-level specificity the rule above has, and an override without
   it silently loses. */
.cv-off main > section:not(#home),
.cv-off .cv-footer {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* The hospital's name in its own colour. 4.8:1 on white - AA for body text,
   comfortably AAA at heading size, so it stays readable rather than
   decorative. */
.hosp-brand {
  color: #0ca854;
}

/* ---------- 4. SIGNATURE BLOB FIELD ----------
   Soft tri-colour cluster echoing the logo's overlapping petal-cross mark. */
.blob-field {
  position: relative;
  overflow: hidden;
}

.blob-field::before,
.blob-field::after,
.blob-field .blob-3 {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  opacity: .35;
  pointer-events: none;
}

.blob-field::before {
  width: 340px;
  height: 340px;
  background: var(--teal);
  top: -120px;
  left: -100px;
}

.blob-field::after {
  width: 300px;
  height: 300px;
  background: var(--blue);
  top: 40px;
  right: -90px;
}

.blob-field .blob-3 {
  width: 260px;
  height: 260px;
  background: var(--navy);
  bottom: -120px;
  left: 38%;
  opacity: .14;
}

.blob-field > .container {
  position: relative;
  z-index: 1;
}

/* ---------- 5. COMPLIANCE MARKERS ---------- */
.compliance-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1.5px solid #DEECF2;
  color: var(--navy-soft);
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(12, 58, 79, .06);
  text-align: left;
}

.compliance-pill i {
  color: var(--teal-dark);
  flex-shrink: 0;
}

.compliance-note {
  font-size: .88rem;
  color: var(--navy-soft);
  max-width: 720px;
}

.compliance-note a {
  color: var(--blue-dark);
  font-weight: 700;
}

.compliance-note a:hover {
  color: var(--blue-deep);
}

/* ---------- 6. BUTTONS ---------- */
.btn-pink,
.btn-wa,
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-pink {
  background: var(--blue-dark);
  color: #fff;
  border: 2px solid var(--blue-dark);
  padding: .85rem 1.85rem;
  font-size: .98rem;
  box-shadow: var(--shadow-cta);
}

.btn-pink:hover,
.btn-pink:focus {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* WhatsApp green, deliberately not the brand teal - it has to read as a
   different action from the blue primary CTA sitting next to it */
.btn-wa {
  background: var(--wa-green);
  color: #fff;
  border: 2px solid var(--wa-green);
  padding: .8rem 1.7rem;
  font-size: .95rem;
}

.btn-wa:hover,
.btn-wa:focus {
  background: var(--wa-green-dark);
  border-color: var(--wa-green-dark);
  color: #fff;
  transform: translateY(-2px);
}

.btn-line {
  background: transparent;
  color: var(--navy);
  border: 2px solid #D5E6EE;
  padding: .8rem 1.7rem;
  font-size: .95rem;
}

.btn-line:hover,
.btn-line:focus {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.btn-line-white {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.btn-line-white:hover,
.btn-line-white:focus {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.btn-sm {
  padding: .55rem 1.15rem;
  font-size: .85rem;
}

.btn-block {
  width: 100%;
  padding: .9rem 1.8rem;
  font-size: 1rem;
}

/* the row gutter alone left the submit almost flush against the last field */
.hero-form-card .btn-block {
  margin-top: 6px;
}

.form-card .btn-block {
  margin-top: 10px;
}

/* ---------- 7. HEADER ---------- */
.cv-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: 0 2px 16px rgba(12, 58, 79, .08);
  /* viewport-fit=cover lets the page reach the top edge, so the logo and CTAs
     need the status-bar / notch inset added on top of their own padding */
  padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px;
}

.cv-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The lockup already contains the wordmark, so it is sized by height and the
   aspect ratio carries the width. */
.cv-logo {
  display: inline-block;
  line-height: 0;
}

.cv-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.cv-header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Phones collapse both header CTAs to icon-only circles (responsive.css). The
   label is hidden accessibly there, never removed, so the links keep their names
   for screen readers and Google Ads link auditing. */
.btn-label {
  display: inline;
}

/* ---------- 8. HERO ---------- */
.cv-hero {
  padding-top: 56px;
  padding-bottom: 64px;
}

/* One DOM, two reading orders. Source order is the phone one (headline, photo,
   form, copy); desktop drops the photo and puts copy under headline with the
   form spanning beside both. The two empty 1fr rows soak up the form's extra
   height - without them a taller form column pushes headline and copy apart
   instead of centring the pair. Bootstrap's vertical gutter is zeroed for the
   same reason; spacing comes from the elements' own margins. */
.hero-row {
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".    form"
    "head form"
    "copy form"
    ".    form";
}

.hero-head {
  grid-area: head;
}

.hero-copy {
  grid-area: copy;
}

.hero-form-col {
  grid-area: form;
  align-self: center;
}

/* Desktop gets its photos from the locations carousel, so the hero stays
   type-only. The responsive.css rule is what turns this on and loads the file. */
.hero-photo {
  display: none;
}

.hero-title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.16;
  margin-bottom: 16px;
}

/* Manrope is subset to 500-800 and the h1 already sits at the top, so a heavier
   span would clamp rather than render. The rest of the h1 drops to 700 instead,
   so the hospital name genuinely reads bolder. */
.hero-brand {
  color: #0ca854;
  font-weight: 800;
}

.hero-lead {
  font-size: 1.05rem;
  color: var(--navy-soft);
  max-width: 540px;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 28px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
}

.hero-trust-row span {
  display: inline-flex;
  align-items: center;
}

.hero-trust-row i {
  color: var(--blue);
  margin-right: .4rem;
}

.hero-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.hero-form-card h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.hero-form-card .form-intro {
  font-size: .85rem;
  margin-bottom: 16px;
}

/* no intro line under the heading any more, so the note needs its own clearance */
.hero-form-card .form-city-note {
  margin: 14px 0 18px;
}

.form-city-note {
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  background: var(--teal-mist);
  border: 1px solid rgba(20, 184, 180, .35);
  border-left: 4px solid var(--teal-dark);
  border-radius: 10px;
}

.form-city-note i {
  color: var(--teal-dark);
  margin-top: 3px;
}

.form-city-note b {
  color: var(--blue);
  font-weight: 700;
}

.hero-city-note {
  max-width: 540px;
  margin: 14px 0 18px;
  font-size: .95rem;
}

.hero-form-card .form-control,
.hero-form-card .form-select {
  font-size: .9rem;
  padding: .6rem .8rem;
}

/* ---------- 9. FORTIS HOSPITAL LOCATIONS ----------
   Five locations, one card per view at every width. The track is CSS scroll-snap
   (real swipe and momentum for 0 KB of JS); custom.js section 5b adds the dots,
   autoplay and loop. No carousel library. */
.hosp-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* room for a keyboard focus ring on the card */
  padding-bottom: 6px;
  /* the track is the only intentional horizontal scroller on the page */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hosp-row::-webkit-scrollbar {
  display: none;
}

.hosp-row > div {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
}

/* Photo as a banner across the card top, the layout the client signed off. An
   earlier build used a narrow side column only because the branch images then
   available were 250x250 thumbnails; the shared-drive photos are full-size. */
.hosp-card {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* width/height are on the <img> too, so the frame reserves space before the file
   lands and the track never shifts under a swipe. Sources are already 16:9;
   object-fit is here to hold the frame if a replacement arrives at another ratio. */
.hosp-img {
  line-height: 0;
  background: var(--mist);
}

.hosp-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.hosp-body {
  padding: 26px 30px 30px;
  text-align: left;
}

.hosp-body h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.hosp-city {
  color: var(--navy-soft);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 8px;
}

.hosp-city i {
  color: var(--blue);
  margin-right: 8px;
}

.hosp-stars {
  color: #F5A524;
  letter-spacing: 3px;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 14px;
}

/* Locality pill - carries the address, since no per-hospital stats are
   published. inline-flex so a long address wraps instead of forcing a nowrap chip. */
.hosp-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-mist);
  color: var(--navy);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.35;
  text-align: left;
  padding: .45rem 1.1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0;
}

.hosp-stat i {
  flex: 0 0 auto;
  color: var(--blue);
}

.hosp-note {
  margin: 34px auto 0;
  text-align: center;
}

.hosp-cta {
  margin-top: 20px;
}

/* ---------- 10. BENEFIT CARDS ---------- */
.benefit-card {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(12, 58, 79, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.benefit-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-mist), var(--teal-mist));
  color: var(--blue-dark);
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.benefit-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.benefit-card p {
  font-size: .92rem;
}

/* ---------- 10b. MEDICAL SPECIALITY CARDS ----------
   Same grid as the benefit cards but deliberately lighter - bare teal glyph
   instead of the gradient tile, tighter radius. These describe Fortis
   departments, the benefit cards describe reasons: different jobs, and matching
   weights would read as one long run of identical boxes. */
.spec-card {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 26px 24px;
  border: 1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}

.spec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 131, 134, .14);
}

/* text-align is NOT redundant: the shared `i.fa-solid` rule above centres the
   glyph in its 1em box, and display:block stretches that box across the card -
   without this the icon drifts to the middle while the text stays left. */
.spec-card i {
  display: block;
  text-align: left;
  color: var(--teal-dark);
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.spec-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.spec-card p {
  font-size: .88rem;
}

.spec-note {
  margin: 34px auto 0;
  text-align: center;
}

/* Tighter than the other section CTAs on purpose - it answers the line of copy
   directly above it, so the two read as one unit. */
.spec-cta {
  margin-top: 16px;
}

/* ---------- 11. OVARA IS / IS NOT ----------
   The single most compliance-critical element on the page. */
.isnot-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(12, 58, 79, .10);
}

table.isnot {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  margin-bottom: 0;
}

table.isnot th {
  font-family: var(--font-display);
  font-weight: 800;
  padding: 18px 20px;
  font-size: 1.05rem;
  text-align: left;
}

/* "Is Not" statements run longer; 50/50 wrapped one row while the rest sat on
   a single line, so that column gets the extra width. */
table.isnot th.is-col,
table.isnot td.is-col {
  width: 42%;
}

table.isnot th.isnot-col,
table.isnot td.isnot-col {
  width: 58%;
}

table.isnot th.is-col {
  background: var(--teal-dark);
  color: #fff;
}

table.isnot th.isnot-col {
  background: var(--navy);
  color: #fff;
}

table.isnot td {
  padding: 16px 20px;
  font-size: .92rem;
  border-top: 1px solid #E4EFF4;
  vertical-align: top;
}

table.isnot td.is-col {
  background: var(--teal-mist);
  color: var(--navy);
}

table.isnot td.isnot-col {
  background: #EDF4F7;
  color: var(--navy-soft);
}

table.isnot i {
  margin-right: .5rem;
}

table.isnot td.is-col i {
  color: var(--teal-dark);
}

table.isnot td.isnot-col i {
  color: #6E8C9C;
}

/* ---------- 12. HOW OVARA HELPS / TREATMENT JOURNEY ---------- */
.step {
  text-align: center;
  padding: 0 6px;
}

.step-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--blue);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(10, 123, 172, .18);
}

.step h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.step p {
  font-size: .84rem;
}

.step-arrow {
  color: var(--blue);
  font-size: 1.1rem;
  opacity: .6;
  padding-top: 18px;
}

/* Both sit under a card grid, which already carries its own bottom gutter -
   hence a smaller top margin than .help-cta below the steps row. */
.services-cta,
.trust-cta {
  margin-top: 34px;
}

/* stretch keeps the pills the same height even though the buttons carry
   slightly different padding */
.help-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}

/* ---------- CAROUSEL DOTS ----------
   custom.js inserts a .cv-dots block directly after the locations track.
   24px hit area around an 8px dot keeps them tappable. */
.cv-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}

.cv-dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* custom.js hides unreachable dots; inline-flex above would beat [hidden] */
.cv-dots button[hidden] {
  display: none;
}

.cv-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .28;
  transition: opacity .15s ease, transform .15s ease;
}

.cv-dots button[aria-current="true"]::before {
  opacity: 1;
  transform: scale(1.3);
}

/* keeps the Is / Is Not table clear of the four cards below it */
.isnot-row {
  margin-bottom: 48px;
}

/* ---------- 13. TRUST CARDS ---------- */
.trust-card {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(12, 58, 79, .06);
}

.trust-card i {
  color: var(--blue-dark);
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.trust-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.trust-card p {
  font-size: .88rem;
}

/* ---------- 14. USP COUNTERS ---------- */
.cv-counters {
  background: linear-gradient(180deg, #fff, var(--mist));
}

.counter {
  text-align: center;
}

.counter-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--navy);
  line-height: 1;
}

.counter-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-soft);
  margin-top: 8px;
}

/* five equal columns - Bootstrap has no col-*-5ths */
.col-fifth {
  flex: 0 0 auto;
  width: 20%;
}

/* ---------- 15. SUPPORT SERVICE TILES ---------- */
.service-tile {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: box-shadow .15s ease, transform .15s ease;
}

.service-tile:hover {
  box-shadow: 0 12px 26px rgba(20, 184, 180, .14);
  transform: translateY(-3px);
}

.service-tile i {
  color: var(--teal-dark);
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.service-tile h3 {
  font-size: .88rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.45;
}

/* ---------- 16. BEFORE YOU TRAVEL ---------- */
.travel-item {
  height: 100%;
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px 22px 22px 74px;
  border: 1px solid var(--line);
}

/* icon absolutely placed, never a flex sibling - flex on the row makes the
   text column collapse and wrap badly on small screens */
.travel-check {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-mist);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

.travel-item h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.travel-item p {
  font-size: .86rem;
}

/* ---------- 17. FAQ ---------- */
.faq-acc .accordion-item {
  /* Bootstrap strips the border off; put one back so each question reads as a
     card of its own - the soft shadow alone was almost invisible on white. */
  border: 1px solid var(--line);
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(12, 58, 79, .06);
}

.faq-acc .accordion-button {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  padding: 18px 20px;
}

.faq-acc .accordion-button:not(.collapsed) {
  background: var(--blue-mist);
  color: var(--blue-dark);
  box-shadow: none;
}

.faq-acc .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faq-acc .accordion-body {
  color: var(--navy-soft);
  line-height: 1.7;
  font-size: .95rem;
}

/* ---------- 18. LEAD FORM ---------- */
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.form-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border-radius: 12px;
  border: 1.5px solid #D8E7EE;
  padding: .7rem .9rem;
  font-size: .95rem;
  color: var(--navy-deep);
}

/* Bootstrap's subset ships no .form-select rules, so it is styled here in full.
   The native arrow is kept - no data-URI artwork, and it matches each platform. */
.form-select {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  line-height: 1.5;
  background-color: #fff;
  padding-right: .6rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 180, .16);
}

/* custom.js adds .is-invalid on blur or failed submit, never mid-typing.
   Declared after :focus so a flagged field stays red while focused. */
.form-control.is-invalid,
.form-control.is-invalid:focus,
.form-select.is-invalid,
.form-select.is-invalid:focus {
  border-color: #D92D20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .14);
}

.form-note {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--navy-soft);
}

/* ---------- 18b. PHONE COUNTRY-CODE PICKER (intl-tel-input 29.1.2) ----------
   The vendor stylesheet is loaded unmodified and keeps its own ../img/ paths.
   Redeclaring the path variables on .iti (not :root) wins by proximity, so the
   sprite comes from assets/images/ regardless of stylesheet order. */
.iti {
  /* the library ships these two pointing at its own sprite; blanked here so
     nothing resolves to an image until .iti-flags-ready is set (see below) */
  --iti-path-flags-1x: none;
  --iti-path-flags-2x: none;
  --iti-border-width: 1.5px;
  --iti-border-color: #D8E7EE;
  display: block;
  width: 100%;
}

/* The 244-flag sprite is 89 KB, the largest file on the page, fetched on every
   visit to draw ONE flag. Two rules avoid that:
   1. The preselected flag is drawn without the sprite, scoped to .iti__bd (the
      Bangladesh flag is just a red disc on green, so a gradient does it for
      0 bytes) - pick any other country and it comes from the sprite, which by
      then is loaded. Change INITIAL_COUNTRY in custom.js and this rule must
      change too (flag-in.webp is the crop for India).
   2. Sprite paths are NOT on :root: Chrome eagerly fetches a url() inside a
      custom property, so :root downloaded the sprite whether or not a flag used
      it. They sit on .iti-flags-ready, which custom.js adds when a country list
      first opens; until then image-set() has no valid value and asks for nothing. */
/* disc sits left of centre, diameter 2/5 of the flag's width - per the official spec */
.iti__selected-country .iti__flag.iti__bd {
  background-image: radial-gradient(circle calc(var(--iti-flag-width) * .2) at 45% 50%, #F42A41 96%, #006A4E 100%);
  background-position: 0 0;
  background-size: 100% 100%;
}

.iti-flags-ready .iti__flag {
  --iti-path-flags-1x: url(../images/flags.webp);
  --iti-path-flags-2x: url(../images/flags@2x.webp);
}


/* the wrapper is what visually reads as the field once the picker is attached */
.iti .form-control {
  width: 100%;
}

.iti__selected-country {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  font-family: var(--font-body);
}

.iti__selected-dial-code {
  color: var(--navy-deep);
  font-size: .95rem;
}

.iti__country-list {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  font-size: .92rem;
  color: var(--navy-deep);
}

.iti__country.iti__highlight {
  background: var(--teal-mist);
}

.iti__dial-code {
  color: var(--navy-soft);
}

/* hero form fields are a size down from the ones in the #consult section */
.hero-form-card .iti__selected-country,
.hero-form-card .iti__selected-dial-code {
  font-size: .9rem;
}

/* honeypot - hidden from humans, still filled by bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hugs its content instead of stretching to the form's height, which left
   ~100px of dead navy top and bottom. The column centres against the form. */
.consult-aside {
  align-self: center;
}

.talk-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}

.talk-box .ic-wa-lg {
  width: 2rem;
  height: 2rem;
  fill: var(--teal);
  margin: 0 auto 12px;
}

.talk-box h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.talk-box p {
  color: #B4CFDA;
  font-size: .95rem;
  margin-bottom: 20px;
}

.talk-box .btn-wa {
  margin-bottom: 10px;
}

/* ---------- 19. FINAL CTA ---------- */
.cv-final {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 60%, #06202D 100%);
  color: #fff;
  text-align: center;
}

.cv-final h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  margin-bottom: 10px;
}

.cv-final p {
  color: #B4CFDA;
  margin-bottom: 28px;
}

.final-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.cv-final .compliance-pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #D9E9F0;
  box-shadow: none;
}

.cv-final .compliance-pill i {
  color: var(--teal);
}

/* ---------- 20. FOOTER ---------- */
.cv-footer {
  background: #EEF5F8;
  color: var(--navy-soft);
  padding: 52px 0 24px;
}

.cv-footer a {
  color: var(--navy-soft);
}

.cv-footer a:hover {
  color: var(--blue-dark);
}

.cv-foot-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* With the link columns gone the footer is two blocks: brand left, contact
   right. Capping the measure stops the about line running the full column. */
.foot-about {
  margin-top: 16px;
  font-size: .88rem;
  max-width: 430px;
}

.foot-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* icon hangs in the gutter so wrapped lines stay flush under the text,
   never tucked under the icon */
.foot-list li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

.foot-list li i,
.foot-list li .ic-wa {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--teal-dark);
  fill: var(--teal-dark);
}

.foot-brand,
.foot-contact {
  min-width: 0;
}

.foot-disclaimer {
  border-top: 1px solid #D3E4EC;
  margin-top: 34px;
  padding-top: 20px;
}

.foot-disclaimer p {
  font-size: .78rem;
}

.foot-copy {
  margin-top: 8px;
}

/* ---------- 21. MOBILE FIXED CTA (revealed in responsive.css) ---------- */
.mob-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: #fff;
  box-shadow: 0 -6px 20px rgba(12, 58, 79, .16);
  /* extra bottom padding clears the phone's home-indicator / gesture bar */
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}

/* icon beside the label, not stacked above it - one line reads faster and
   gives the bar back a chunk of vertical space at the bottom of the screen */
.mob-cta a {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: .82rem .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
}

/* --mist is almost white, so on the white bar this button read as no button at
   all. Filled pink now, which also matches the Call CTA in the header. */
.mob-cta .mob-call {
  background: var(--blue-dark);
  color: #fff;
}

/* Same WhatsApp brand green as .btn-wa, so the bottom bar and the in-page
   WhatsApp buttons read as one action. */
.mob-cta .mob-wa {
  background: var(--wa-green);
  color: #fff;
}

/* ---------- 22. SCROLL REVEAL (opt-in, JS adds .is-in) ----------
   Also gated on .js - a reveal that never fires must not leave the section
   permanently invisible. */
/* No will-change on purpose: 36 .reveal elements would each get a compositing
   layer for the whole session, to smooth an animation that runs once. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 23. THANK YOU PAGE ---------- */
.ty-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 60%, #06202D 100%);
}

.ty-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.ty-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 42px 40px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(30, 29, 78, .34);
}

.ty-logo {
  height: 46px;
  width: auto;
  display: block;
  margin: 0 auto 20px;
}

.ty-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #fff;
  font-size: 1.9rem;
  box-shadow: 0 10px 26px rgba(10, 123, 172, .26);
}

.ty-greet {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: var(--blue-mist);
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.ty-title {
  font-weight: 800;
  font-size: clamp(1.55rem, 5vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 12px;
}

.ty-text {
  font-size: 1rem;
  max-width: 440px;
  margin: 0 auto;
}

.ty-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.ty-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--teal-dark);
  transition: color .15s ease;
}

.ty-back:hover,
.ty-back:focus {
  color: var(--blue-dark);
}

.ty-back i {
  font-size: .78rem;
}

.ty-note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--navy-soft);
}

/* ---------- 24. GTM NOSCRIPT FALLBACK IFRAME ---------- */
.gtm-noscript {
  display: none;
  visibility: hidden;
}