/* ==========================================================================
   Hero section - two columns: content left, image right.

   Previous attempt used a full-bleed background photo with a white gradient
   fading across it. That failed in practice: the text column was cramped to
   col-lg-6 so the hospital name broke onto four lines, and the template's
   absolutely-positioned "24/7 EMERGENCY SERVICE" rail struck straight through
   the headline.

   A split layout is the right answer here. The text gets a real column with
   room to breathe, the photograph gets its own half rather than being hidden
   under a wash, and nothing overlaps.

   Depth pass: the split worked but sat flat - a rectangle of text beside a
   rectangle of photo. What follows adds layers rather than decoration. An
   offset navy frame behind the photograph, a card carrying the one claim that
   matters, credential marks under the actions, and slow ambient movement that
   is felt more than seen. Every animation is disabled under
   prefers-reduced-motion.
   ========================================================================== */

.fol-hero,
.hero-banner.style-1.fol-hero {
  position: relative;
  /* The template hard-codes height:950px and padding-top:40px here, then
     repeats fixed heights at five more breakpoints. All of it fights an
     auto-height split layout, so it is overridden once at each level. */
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
.hero-banner.style-1.fol-hero::before {
  content: none;
}

/* ------------------------------------------------------------- ambience -- */

/* Two slow-drifting brand blooms and a fine grid. Individually none of them
   is legible; together they stop the panel reading as flat paper. The layer
   is inert and sits behind everything. */
.fol-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Full-bleed photograph across the whole hero. It covers the entire panel
   rather than hiding in a corner, so the section reads as built on a real
   place instead of on white paper.

   Two elements: the image, blur and slow drift live on the inner ::before so
   the drift cannot push anything past an edge, and the tint sits on ::after
   above it. The photo is faded far enough that every piece of foreground text
   keeps its contrast - it is a ground, not a picture.

   The template's earlier full-bleed attempt failed because the text column was
   cramped and the emergency rail cut the headline. Neither applies now: the
   split layout is fixed and this layer is inert behind it. */
.fol-hero-photo-wash {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fol-hero-photo-wash::before {
  content: '';
  position: absolute;
  inset: -6%;
  background: url('../images/facility/building-aerial-wide.webp') center 42% / cover no-repeat;
  /* Deliberately at the threshold of visibility. The hero reads as white paper
     first; the building is a whisper of texture underneath it, not a picture
     the eye stops on. */
  opacity: .06;
  filter: saturate(.5) contrast(1.02) blur(7px);
  transform: scale(1.03);
  animation: folWashDrift 40s ease-in-out infinite alternate;
  will-change: transform;
}
/* Brand tint over the photo. The navy/green wash fixes the hue regardless of
   the source image, and the vertical scrim lifts the top of the panel so the
   headline sits on near-paper while the lower half keeps the texture. */
.fol-hero-photo-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Sampled off the rendered page: an even green/navy split pushed the green
     channel ~15 above red across the whole panel and above blue in the lower
     left, so the hero read mint rather than navy. The green is cut to a
     narrow accent band and the navy carries the rest, which keeps blue the
     highest channel. The scrim is also lifted - the ground was landing near
     rgb(200) against #FBFDFD paper, dark enough to look grey. */
  background:
    linear-gradient(118deg,
      rgba(var(--bs-primary-rgb), .06) 0%,
      rgba(var(--fol-green-rgb), .018) 38%,
      rgba(var(--bs-primary-rgb), .055) 78%,
      rgba(var(--bs-primary-rgb), .045) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .88) 34%,
      rgba(255, 255, 255, .84) 70%,
      rgba(255, 255, 255, .9) 100%);
}
@keyframes folWashDrift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.6%, -1.2%, 0); }
}

/* Repeating dot lattice - the "premium paper" layer. Two offset dot grids at
   different scales so it does not read as a screen-door texture. Masked from
   the top-right so it never crosses the headline. */
.fol-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(var(--bs-primary-rgb), .16) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(var(--fol-green-rgb), .12) 1px, transparent 0);
  background-size: 26px 26px, 78px 78px;
  background-position: 0 0, 13px 13px;
  -webkit-mask-image: radial-gradient(90% 70% at 88% 8%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 76%);
          mask-image: radial-gradient(90% 70% at 88% 8%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 76%);
  animation: folPatternDrift 40s linear infinite;
}
@keyframes folPatternDrift {
  from { background-position: 0 0, 13px 13px; }
  to   { background-position: 26px 26px, 91px 91px; }
}

.fol-fertility-mark {
  position: absolute;
  right: max(-8vw, -110px);
  top: 50%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: .42;
}
.fol-fertility-egg {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(var(--bs-primary-rgb), .16);
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .95) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, rgba(var(--bs-primary-rgb), .05), rgba(255, 255, 255, 0) 64%);
  box-shadow:
    inset 0 0 0 22px rgba(var(--bs-primary-rgb), .025),
    0 28px 80px rgba(11, 42, 53, .05);
}
.fol-fertility-sperm {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--fol-green-rgb), .18);
  transform-origin: center;
  animation: folFertilityDrift 8s ease-in-out infinite alternate;
}
.fol-fertility-sperm::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 72px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--fol-green-rgb), .18), rgba(var(--fol-green-rgb), 0));
  transform: rotate(-14deg);
}
.fol-fertility-sperm-1 { left: 8%; top: 30%; transform: rotate(18deg); }
.fol-fertility-sperm-2 { left: 14%; top: 58%; transform: rotate(-8deg); animation-delay: 1.4s; }
.fol-fertility-sperm-3 { left: 35%; top: 78%; transform: rotate(-28deg); animation-delay: 2.1s; }
@keyframes folFertilityDrift {
  from { margin-left: 0; margin-top: 0; }
  to { margin-left: 18px; margin-top: -10px; }
}

.fol-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  will-change: transform;
}
.fol-hero-orb-1 {
  top: -20%;
  right: -10%;
  width: min(56vw, 720px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 42% 40%,
              rgba(var(--bs-primary-rgb), .07), rgba(var(--bs-primary-rgb), .03) 52%, transparent 72%);
  animation: folOrbDrift 22s ease-in-out infinite alternate;
}
.fol-hero-orb-2 {
  bottom: -32%;
  left: -14%;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  /* Eased back from .12. This orb previously sat over flat paper; with the
     full-bleed photograph underneath it, that strength tipped the whole
     lower-left green - sampled b-g negative there while the rest of the panel
     read navy. */
  background: radial-gradient(circle at 55% 45%,
              rgba(var(--fol-green-rgb), .04), rgba(var(--fol-green-rgb), .015) 50%, transparent 70%);
  animation: folOrbDrift 28s ease-in-out infinite alternate-reverse;
}
@keyframes folOrbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3.5%, 4%, 0) scale(1.09); }
}

/* A blueprint grid at the threshold of visibility. It gives the eye something
   to register the page as built rather than blank. */
.fol-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 42, 53, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 42, 53, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 70%);
}

.fol-hero .container { position: relative; z-index: 1; }

.fol-hero .inner-wrapper {
  padding-block: clamp(2.25rem, 3.6vw, 3.75rem);
  padding-inline: 0;
}

.fol-hero .row { align-items: center; }

/* -------------------------------------------------------------- content -- */

.fol-hero-col { padding-right: clamp(0px, 2vw, 2.5rem); }

.fol-hero .hero-content { padding: 0; }

/* The eyebrow chip.

   Selector note: the template sets this at
   `.hero-banner.style-1 .hero-content .sub-title` - three classes - with
   font-size:18px. A two-class selector loses to it, which is why the chip
   was rendering at 18px inside a pill sized for 11px type. Matching that
   specificity is what makes the size below actually apply. */
.hero-banner.style-1.fol-hero .hero-content .sub-title,
.fol-hero .hero-content .sub-title,
.fol-hero .sub-title {
  display: inline-flex !important;
  width: auto;
  align-items: center;
  gap: .45rem;
  margin-bottom: 14px;
  /* Slimmer than a standard pill: this is a registration mark, not a button,
     so it should read as a quiet stamp rather than something tappable. */
  padding: .3rem .72rem;
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: var(--bs-primary);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* The hospital name is the headline. Sized to sit on two comfortable lines
   in its column rather than fragmenting into four. */
/* Specificity note: the template sets `.hero-banner.style-1 .title` to 60px,
   which outranks a bare `.hero-name`. The headline is therefore declared
   against the same compound selector, or the clamp never lands. */
.hero-banner.style-1.fol-hero .hero-content .title.hero-name,
.hero-banner.style-1 .title.hero-name,
.hero-name {
  /* Sized against the column, not the window. The text column is ~626px at
     1440, where the previous 4.25rem cap (68px) forced "Mother and Child"
     hard against both edges and left no optical margin. 3.5rem sets the two
     lines with room to breathe and keeps the name dominant. */
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--bs-secondary);
  font-variation-settings: 'wdth' 95;
  text-wrap: balance;
}

/* "Fountain of Life" is the part people say out loud, so it carries the brand
   navy against the dark heading line above. A solid fill: this is the
   hospital's name, and a gradient across it would be decoration rather than
   meaning. */
.hero-name-em {
  display: block;
  color: var(--bs-primary);
}

/* "Specialist Hospital" reads as the rest of the name, not as body copy. */
.hero-tagline {
  /* Part of the hospital's name, so it is sized and tracked to sit under the
     headline as a continuation rather than as body copy. */
  font-size: clamp(.78rem, .95vw, .9rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fol-accent);
  opacity: .95;
  position: relative;
  width: fit-content;
  padding-bottom: .45rem;
}
.hero-tagline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fol-green), rgba(var(--fol-green-rgb), 0));
}

/* Same story: `.hero-banner.style-1 .text` is 20px in the template. */
.hero-banner.style-1.fol-hero .hero-content .text,
.hero-banner.style-1.fol-hero .text,
.fol-hero .text {
  /* 1.18rem measured at 20px, close enough to the tagline and headline that
     the three sizes read as one flat block. Dropped a step so the hierarchy
     is legible, and the measure tightened to ~58 characters. */
  font-size: clamp(1rem, 1.1vw, 1.06rem);
  line-height: 1.65;
  color: var(--bs-body-color);
  max-width: 27rem;
}

/* Actions: the button and the WhatsApp link sit on one row with real
   separation, rather than the second wrapping underneath and colliding. */
.fol-hero .hero-content .fol-hero-actions {
  gap: .5rem 1.5rem;
  row-gap: 1rem;
  align-items: stretch !important;
}
.fol-hero .hero-content .btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: 290px;
  height: 70px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0 !important;
  justify-content: center;
}

/* The primary button gets a soft brand halo and lifts on hover. A shadow in
   the brand colour rather than neutral grey is most of what separates a
   premium button from a default one. */
.fol-hero .hero-content .btn-primary {
  border: 0;
  background: linear-gradient(135deg, #A1263A 0%, #7F182A 100%);
  box-shadow: 0 4px 14px rgba(140, 35, 50, .22), 0 12px 30px rgba(140, 35, 50, .16);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}
.fol-hero .hero-content .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140, 35, 50, .28), 0 18px 40px rgba(140, 35, 50, .20);
}
.fol-hero .hero-content .btn-primary .feather {
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.fol-hero .hero-content .btn-primary:hover .feather { transform: translateX(4px); }

/* WhatsApp is how patients in Nnewi actually make contact, so it earns a
   real second action rather than a text link. Quiet by default; the icon
   picks up WhatsApp green only on hover so the palette stays brand-led. */
.fol-hero-call,
.fol-hero-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 290px;
  height: 70px;
  padding: .5rem .95rem .5rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fol-hero-call:hover,
.fol-hero-book:hover {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 6px 18px rgba(11, 42, 53, .08);
  transform: translateY(-1px);
}
.fol-hero-call-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  transition: background-color .25s ease, color .25s ease;
}
.fol-hero-call:hover .fol-hero-call-ico,
.fol-hero-book:hover .fol-hero-call-ico { background: #25D366; color: #fff; }
.fol-hero-book {
  gap: .55rem;
  padding: .5rem .95rem .5rem .5rem;
  border: 1px solid rgba(11, 42, 53, .16) !important;
  outline: 0 !important;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-secondary);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(11, 42, 53, .025),
    0 8px 24px rgba(11, 42, 53, .08);
}
.fol-hero-book:hover,
.fol-hero-book:focus {
  border-color: rgba(11, 42, 53, .28) !important;
  outline: 0 !important;
}
.fol-hero-book .feather {
  font-size: .92rem;
}
.fol-hero-call-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fol-hero-call-txt strong {
  font-size: .82rem;
  font-weight: 600;
  color: var(--bs-secondary);
}
.fol-hero-call-txt span {
  font-size: .78rem;
  color: var(--bs-body-color);
}

/* The video is a third action, deliberately the quietest of the three. The
   client's file is not supplied yet; see video/README.md. */
.fol-hero-video {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bs-secondary);
  text-decoration: none;
  transition: color .25s ease;
}
.fol-hero-video:hover { color: var(--bs-primary); }
.fol-hero-video-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-primary);
  padding-left: 2px;   /* optically centres the triangle */
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.fol-hero-video:hover .fol-hero-video-ico {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  color: #fff;
}

/* ---------------------------------------------------------- credentials -- */

/* Licence and registration numbers. In fertility care these do more work
   than any adjective, and they cost three lines of small type. */
.fol-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
  list-style: none;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--bs-border-color);
}
.fol-hero-trust li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding-left: 15px;
}
/* A small navy mark instead of a bullet. */
.fol-hero-trust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-primary);
  opacity: .55;
}
.fol-hero-trust strong {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-primary);
}
.fol-hero-trust span {
  font-size: .8rem;
  color: var(--bs-body-color);
  white-space: nowrap;
}
.fol-authority-strip li {
  min-width: 7.25rem;
  align-items: center;
  padding: 0;
  text-align: center;
  opacity: .9;
}
.fol-authority-strip li::before {
  display: none;
}
.fol-authority-strip li:nth-child(1) { --fol-authority-delay: 0ms; }
.fol-authority-strip li:nth-child(2) { --fol-authority-delay: 260ms; }
.fol-authority-strip li:nth-child(3) { --fol-authority-delay: 520ms; }
.fol-authority-strip strong {
  color: rgba(var(--bs-primary-rgb), .82);
}
.fol-hero-authority-logo {
  width: 62px;
  height: 62px;
  margin-bottom: .45rem;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px rgba(11, 42, 53, .1);
  opacity: .86;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, opacity .35s ease;
}
.fol-authority-strip li:hover .fol-hero-authority-logo {
  opacity: 1;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 24px rgba(11, 42, 53, .16);
}
.fol-authority-section {
  padding: 0 0 32px;
}
.fol-authority-section .container {
  display: flex;
  justify-content: flex-start;
}
.fol-authority-strip-inline {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: clamp(.8rem, 3vw, 2.2rem);
  margin: 0;
  padding: 20px 0 0;
  border-top: 2px solid rgba(var(--fol-green-rgb), .72);
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.fol-authority-strip-inline::-webkit-scrollbar {
  display: none;
}
.fol-authority-strip-inline li {
  flex: 1 0 0;
  min-width: 0;
}
.fol-authority-strip-inline .fol-hero-authority-logo {
  background: rgba(var(--fol-green-rgb), .1);
  border: 0;
  box-shadow: none;
  filter: sepia(.55) saturate(1.45) hue-rotate(44deg) brightness(.96);
}
.fol-authority-strip-inline strong {
  color: var(--fol-green-dark);
}
.fol-authority-strip-inline span {
  color: rgba(11, 42, 53, .78);
}
.fol-authority-strip-inline li:hover .fol-hero-authority-logo {
  opacity: .86;
  transform: none;
  box-shadow: none;
}
@keyframes folAuthorityFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* The MDCN source was 1128x1128 with the seal occupying only the middle 43%
   - the rest was off-white padding baked into the file, so object-fit:contain
   fitted that padding into the circle and the seal rendered small. The file is
   now cropped to the artwork, so it needs no size compensation here and sits
   at the same 62px as CAC and ASMOH. */

/* ---------------------------------------------------------------- media -- */

/* The photograph bleeds off the right edge of the window, but only partly.

   A full bleed to the window edge was tried and abandoned: the source is
   980x840 (1.17:1, near square) and a full-bleed column is about 1.8:1, so
   filling it threw away a third of the frame's height and cut through the
   subjects' heads no matter where the crop was anchored. Extending by a fixed
   amount instead keeps the panel close to the source's own proportions while
   still breaking the container edge, which is what made the layout feel
   deliberate rather than boxed. */
.fol-hero-media {
  position: relative;
  margin-right: clamp(-2rem, calc(50% - 50vw), 0px);
  padding: 0;
}

/* An offset outline behind the photograph. One rectangle of photo reads as a
   placed asset; a photograph sitting in front of a frame reads as composed. */
/* The offset outline that used to sit behind the photograph is gone. Against a
   full-bleed image it was a faint rectangle with nothing to frame, and it was
   the element pushing the photo out of alignment in the first place. */
.fol-hero-frame { display: none; }

.fol-hero-photo {
  position: relative;
  z-index: 1;
  /* Rounded on the two inner corners only. A bled edge with a radius on it
     looks like a mistake; square where it meets the window, soft where it
     meets the page. */
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 2px 10px rgba(11, 42, 53, .06),
    0 30px 70px rgba(11, 42, 53, .16);
  background: linear-gradient(150deg, var(--bs-primary-bg-subtle), var(--bs-light));
  /* Close to the source's own 1.17:1 so the crop stays gentle. */
  aspect-ratio: 6 / 5;
  max-height: 600px;
}
.fol-hero-photo::before,
.fol-hero-media-sm::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 28%, transparent 52%),
    linear-gradient(180deg, transparent 68%, rgba(11, 42, 53, .12) 100%);
}
.fol-hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  /* The slider listens for horizontal swipes. Without this the browser has to
     wait out each touch to see whether it will become one before it commits
     to scrolling, which is felt as a moment of resistance at the top of the
     page that then gives way. Declaring pan-y hands vertical gestures
     straight to the scroller and leaves only horizontal ones to the script. */
  touch-action: pan-y;
}
.fol-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above centre in this frame, so the crop is pulled up slightly.
     With the panel close to the source ratio this is a nudge, not a rescue. */
  object-position: center 30%;
  display: block;
  opacity: 0;
  /* Only opacity is transitioned. The scale used to be a 6s transition that
     restarted on every slide change, so each new photograph arrived mid-zoom
     and the movement read as a snap rather than a drift. Scale now belongs to
     the Ken Burns keyframes below, which run for the slide's whole life. */
  transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
  transform: scale(1.06);
  will-change: opacity, transform;
}
.fol-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  /* 13s against a 4.6s slide interval: the move is never seen to finish, so
     it reads as continuous drift rather than as an effect with a start and an
     end. Slow enough that at any given second the frame looks still. */
  animation: folKenBurns 13s cubic-bezier(.33, 0, .35, 1) forwards;
}

/* Each slide pushes in and drifts a little across, the way a camera on a
   slider moves. The pan is kept horizontal - vertical movement re-crops the
   top of the frame and clips the subject's head at the far end. */
@keyframes folKenBurns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.135) translate3d(-1.4%, 0, 0); }
}
.fol-hero-slider-dots {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  gap: 8px;
}
.fol-hero-slider-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 0 0 1px rgba(11, 42, 53, .08);
  transition: width .35s cubic-bezier(.2, .7, .2, 1), background-color .35s ease;
}
.fol-hero-slider-dot.is-active {
  width: 28px;
  background: #fff;
}
/* The 24s drift that used to live here applied to :first-child only, so the
   opening photograph moved and the other four sat still. folKenBurns above
   is bound to .is-active instead, which gives every slide the same treatment
   for exactly as long as it is on screen. */

/* A light pass that crosses the photograph every so often, the way glass
   catches a window. Kept faint - it should register at the edge of vision. */
.fol-hero-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
              transparent 38%, rgba(255, 255, 255, .16) 48%,
              rgba(255, 255, 255, .30) 51%, rgba(255, 255, 255, .16) 54%, transparent 64%);
  transform: translateX(-120%);
  animation: folSheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes folSheen {
  0%, 62%  { transform: translateX(-120%); }
  86%,100% { transform: translateX(120%); }
}

/* Depth on cursor movement. The offsets are set by JS on the parent; the
   frame and photo take different multiples so they separate in space. */
@media (hover: hover) and (pointer: fine) {
  .fol-hero-media { --fol-tx: 0; --fol-ty: 0; }
  .fol-hero-photo,
  .fol-hero-frame,
  .fol-hero-card {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
  }
  .fol-hero-media.is-tilting .fol-hero-photo {
    transform: translate3d(calc(var(--fol-tx) * 8px), calc(var(--fol-ty) * 8px), 0);
  }
  .fol-hero-media.is-tilting .fol-hero-frame {
    transform: translate3d(calc(var(--fol-tx) * -12px), calc(var(--fol-ty) * -12px), 0);
  }
  .fol-hero-media.is-tilting .fol-hero-card {
    transform: translate3d(calc(var(--fol-tx) * 16px), calc(var(--fol-ty) * 16px), 0);
  }
}

/* ------------------------------------------------------------ claim card -- */

/* Frosted card overhanging the photograph. This is the hero's one substantive
   claim, and putting it on glass over the image ties the two halves together
   instead of leaving the photo as decoration. */
.fol-hero-card {
  position: absolute;
  z-index: 2;
  /* Inset into the photograph rather than overhanging into the background.
     A card floating in empty space beside the image read as detached; sitting
     on the image it ties the two halves of the hero together. */
  right: 26px;
  bottom: 26px;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  max-width: 19rem;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 24px rgba(11, 42, 53, .12), 0 20px 48px rgba(11, 42, 53, .10);
}
.fol-hero-card strong {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-secondary);
}
.fol-hero-card span {
  display: block;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--bs-body-color);
}
/* The same live dot used on the emergency bar, so "in one building" reads as
   a present-tense fact rather than a slogan. */
.fol-hero-card-dot {
  width: 8px;
  height: 8px;
  margin-top: .42em;
  flex: none;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .6);
  animation: folHeroPulse 2.8s infinite;
}
@keyframes folHeroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--bs-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

/* ------------------------------------------------- media, below large -- */

/* The photograph used to disappear entirely under 992px, leaving mobile - the
   majority of this hospital's traffic - with a wall of text. It comes back as
   a shorter band inside the content column. */
/* Order. The markup puts the mobile photograph after the action buttons, which
   left a 272px hole in the flow. The content column is a flex column purely so
   the sequence can be set here without touching the 32-page markup.

   The actions come before the photograph: the call to action should be reached
   before the reader has to scroll past an image to find it. */
.fol-hero .hero-content {
  display: flex;
  flex-direction: column;
}
.fol-hero .hero-content > .sub-title { order: 1; align-self: flex-start; }
.fol-hero .hero-content > .hero-name { order: 2; }
.fol-hero .hero-content > .hero-tagline { order: 3; }
.fol-hero .hero-content > .text { order: 4; }
.fol-hero .hero-content > .fol-hero-actions { order: 5; }
.fol-hero .hero-content > .fol-hero-media-sm { order: 6; }
.fol-hero .hero-content > .fol-hero-trust { order: 7; }

.fol-hero-media-sm {
  position: relative;
  margin: 0 0 26px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--bs-primary-bg-subtle), var(--bs-light));
  box-shadow: 0 2px 10px rgba(11, 42, 53, .06), 0 16px 36px rgba(11, 42, 53, .12);
}
.fol-hero-media-sm .fol-hero-slider,
.fol-hero-media-sm img {
  width: 100%;
  height: 100%;
}
.fol-hero-media-sm img {
  object-fit: cover;
  object-position: center 26%;
  display: block;
}

/* ----------------------------------------------------------- responsive -- */

@media only screen and (max-width: 1199px) {
  .hero-banner.style-1.fol-hero .hero-content .title.hero-name,
  .hero-banner.style-1 .title.hero-name,
  .hero-name { font-size: clamp(2.35rem, 5.1vw, 3.35rem); }
  .fol-hero-photo { aspect-ratio: 4 / 3; }
  .fol-hero-card { max-width: 17rem; padding: .75rem .95rem; }
  .fol-hero-trust { gap: .75rem 1.4rem; }
}

@media only screen and (max-width: 991px) {
  /* The header now sits in normal flow above the hero rather than overlaying
     it, so the large top clearance that used to be needed here is dead space. */
  .fol-hero .inner-wrapper {
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
    padding-bottom: clamp(2rem, 5vw, 2.75rem);
  }
  .fol-hero-media-sm::before,
  .fol-hero-photo::before {
    content: none;
  }
  /* This used to cancel all movement on the phone photograph, because the old
     6s scale transition restarted on every slide change and lurched. The Ken
     Burns replacing it is slow enough to belong here too, so only the filter
     and the crossfade timing are restated. */
  .fol-hero-media-sm .fol-hero-slide {
    transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
    filter: none;
  }
  .fol-hero-media-sm .fol-hero-slide.is-active {
    /* Shallower than the desktop 1.135: on a 16/10 phone frame a deep push
       crops the subject's head at the end of the move. */
    animation: folKenBurnsSm 13s cubic-bezier(.33, 0, .35, 1) forwards;
  }
  @keyframes folKenBurnsSm {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.095) translate3d(-1%, 0, 0); }
  }
  .fol-hero-media-sm img {
    object-position: center center;
    image-rendering: auto;
  }
  .fol-hero .text { max-width: 40rem; }
  .fol-hero-orb-1 { opacity: .6; }
  /* Single column here, so the headline sits over the middle of the panel
     rather than beside it. The photo stays full-bleed but is pulled back a
     little and the scrim strengthened, so text keeps its contrast. */
  .fol-hero-photo-wash::before {
    opacity: .05;
    filter: saturate(.5) contrast(1.02) blur(8px);
  }
  .fol-hero-photo-wash::after {
    background:
      linear-gradient(118deg,
        rgba(var(--bs-primary-rgb), .06) 0%,
        rgba(var(--fol-green-rgb), .018) 38%,
        rgba(var(--bs-primary-rgb), .055) 78%,
        rgba(var(--bs-primary-rgb), .045) 100%),
      linear-gradient(180deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .91) 40%,
        rgba(255, 255, 255, .88) 74%,
        rgba(255, 255, 255, .93) 100%);
  }
  .fol-hero-pattern {
    background-size: 22px 22px, 66px 66px;
    -webkit-mask-image: radial-gradient(80% 44% at 82% 6%, #000 0%, transparent 74%);
            mask-image: radial-gradient(80% 44% at 82% 6%, #000 0%, transparent 74%);
  }
  .fol-fertility-mark {
    right: -120px;
    top: 34%;
    width: 360px;
    opacity: .28;
  }
  /* Headline. The 1199px rule above uses 5.1vw, which starves the name once
     the layout is single-column: at 726px that resolves to 37px, *smaller*
     than the 44px it gets on a 390px phone, and only 2.3x the body copy. The
     column is full-width here, so the name is sized off it directly. */
  .hero-banner.style-1.fol-hero .hero-content .title.hero-name,
  .hero-banner.style-1 .title.hero-name,
  .hero-name {
    /* Capped at 3.4rem: the single-column layout gives the name the full
       width, so an uncapped ramp pushed it to 64px near 991px - larger than
       the 56px it gets on a 1920px desktop, which inverted the scale. */
    font-size: clamp(2.6rem, 7.4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -.032em;
  }

  /* The photograph follows the buttons in this range too, so it needs the same
     clearance above it that the phone layout has. Without this the primary
     button sat flush against the top of the image. */
  .fol-hero-media-sm { margin: 34px 0 0; }
}

@media only screen and (max-width: 575px) {
  .fol-hero .hero-content > .fol-hero-media-sm { order: 5; }
  .fol-hero .hero-content > .fol-hero-actions { order: 6; }
  .fol-fertility-mark {
    right: -145px;
    top: 28%;
    width: 310px;
    opacity: .2;
  }

  /* Specificity: a bare .hero-name loses to the template's
     `.hero-banner.style-1 .title`, so this clamp was being ignored and the
     name rendered at 35px - barely above the 16px body copy beneath it.
     Declared at matching specificity and scaled up so the hospital's name is
     unmistakably the largest thing on the screen. */
  .hero-banner.style-1.fol-hero .hero-content .title.hero-name,
  .hero-banner.style-1 .title.hero-name,
  .hero-name {
    /* Let the name use more of the mobile width without tipping into a
       cramped three-line stack on common 390px screens. */
    font-size: clamp(2.48rem, 11.45vw, 3.12rem);
    line-height: 1.04;
    letter-spacing: -.045em;
  }
  .fol-hero .text {
    font-size: 1.08rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  /* The chip is as wide as its label, which at this width is most of the
     column and reads as a heavy bar. Tightened rather than shrunk, so the
     eyebrow stays legible. */
  .hero-banner.style-1.fol-hero .hero-content .sub-title,
  .fol-hero .hero-content .sub-title,
  .fol-hero .sub-title {
    gap: .4rem;
    padding: .28rem .65rem;
    font-size: .68rem;
    letter-spacing: .1em;
    margin-bottom: 18px;
  }
  .fol-hero .sub-title .fol-rule { width: 20px; margin-right: 0; }
  /* Note: .hero-name-em stays block here. The markup has a <br> before it, and
     forcing display:inline made the two halves run together as
     "ChildFountain of Life". */
  .fol-hero .hero-content .fol-hero-actions { gap: .9rem 1rem; }
  .fol-hero .hero-content .btn {
    width: 100%;
    height: 52px;
    justify-content: center;
  }
  .fol-hero-call,
  .fol-hero-book {
    width: 100%;
    height: 52px;
    justify-content: center;
  }
  /* The photograph follows the body copy directly in this order, and the two
     margins were stacking: 18px under the paragraph plus 18px above the image
     left a 36px trough that read as a section break rather than as one block.
     Pulled to 6px so the image sits with the copy it illustrates. The bottom
     margin stays generous - the buttons below need their own separation. */
  .fol-hero-media-sm { aspect-ratio: 16 / 10; margin: 6px 0 24px; }
  .fol-hero-media-sm {
    background: #eef6f7;
    box-shadow: 0 14px 34px rgba(11, 42, 53, .1);
  }
  .fol-hero-slider-dots {
    left: 16px;
    bottom: 14px;
  }
  .fol-hero-slider-dot {
    width: 7px;
    height: 7px;
  }
  .fol-hero-slider-dot.is-active { width: 24px; }
  /* Tightened so the registration numbers do not fragment across lines. */
  .fol-hero-trust {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .35rem;
    width: 100%;
    margin-top: 24px;
    padding-top: 16px;
  }
  .fol-authority-strip li {
    min-width: 0;
    flex: 1 1 0;
  }
  .fol-hero-authority-logo {
    width: clamp(42px, 12vw, 52px);
    height: clamp(42px, 12vw, 52px);
    margin-bottom: .35rem;
  }
  .fol-hero-trust strong { font-size: .58rem; letter-spacing: .08em; }
  .fol-hero-trust span {
    max-width: 100%;
    font-size: clamp(.54rem, 2.35vw, .66rem);
    white-space: nowrap;
  }
  /* The template's support and cart buttons float over the lower-left of the
     viewport. They scroll away, so the list keeps its alignment with the rest
     of the column and simply ends clear of the fold. */
  .fol-hero-trust { padding-bottom: 8px; }
  .fol-authority-section {
    padding: 0 0 26px;
  }
  .fol-authority-section .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  .fol-authority-strip-inline {
    margin-top: 0;
    padding: 14px 12px;
    gap: .45rem;
    border-radius: 10px;
  }
  .fol-authority-strip-inline .fol-hero-authority-logo {
    width: clamp(38px, 10vw, 46px);
    height: clamp(38px, 10vw, 46px);
  }
}

/* ---------------------------------------------------------- reduced motion -- */

/* Everything above that moves, stops. The layout, depth and shadows survive;
   only the animation is dropped. */
@media (prefers-reduced-motion: reduce) {
  .fol-hero-photo-wash::before,
  .fol-hero-pattern,
  .fol-hero-orb,
  .fol-fertility-sperm,
  .fol-hero-photo img,
  .fol-hero-sheen,
  .fol-authority-strip li,
  .fol-hero-card-dot,
  /* Ken Burns is an animation rather than the transition it replaced, so it
     has to be named here or it keeps running under reduced motion. Both the
     desktop and the phone frame. */
  .fol-hero-slide,
  .fol-hero-slide.is-active,
  .fol-hero-media-sm .fol-hero-slide.is-active {
    animation: none !important;
  }
  .fol-hero-sheen { opacity: 0; }
  .fol-hero-photo img { transform: none; }
  /* Stated after the rule above, which also matches the slides - they are
     <img> inside .fol-hero-photo - and would otherwise drop them to their
     unscaled size and reveal the edges the crop is hiding. */
  .fol-hero-photo .fol-hero-slide,
  .fol-hero-photo .fol-hero-slide.is-active,
  .fol-hero-media-sm .fol-hero-slide,
  .fol-hero-media-sm .fol-hero-slide.is-active {
    transform: scale(1.06);
  }
  .fol-hero-photo-wash::before { transform: scale(1.03); }
  .fol-hero-media.is-tilting .fol-hero-photo,
  .fol-hero-media.is-tilting .fol-hero-frame,
  .fol-hero-media.is-tilting .fol-hero-card { transform: none; }
  .fol-hero .hero-content .btn-primary:hover { transform: none; }
}


/* ------------------------------------------------------ spacing overrides -- */

/* The template's fixed hero heights at every breakpoint, neutralised so the
   content sets the height instead of leaving dead space. */
@media only screen and (max-width: 1400px) { .hero-banner.style-1.fol-hero { height: auto !important; } }
@media only screen and (max-width: 1199px) { .hero-banner.style-1.fol-hero { height: auto !important; padding-top: 0 !important; } }
@media only screen and (max-width: 991px)  { .hero-banner.style-1.fol-hero { height: auto !important; padding-top: 0 !important; } }
@media only screen and (max-width: 767px)  { .hero-banner.style-1.fol-hero { height: auto !important; padding-top: 0 !important; } }
@media only screen and (max-width: 575px)  { .hero-banner.style-1.fol-hero { height: auto !important; padding-top: 0 !important; } }

/* .hero-banner .container carries its own 40px padding in the template, which
   stacked on top of the wrapper padding. */
.fol-hero .container { padding-top: 0; padding-bottom: 0; }

/* Tighten the gap between the hero and the section that follows it. */
.fol-hero + .content-inner,
.fol-hero + section.content-inner {
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
}

/* Vertical rhythm of the text column.

   The measured gaps were 22 / 5 / 18 / 30 / 30, which inverted the grouping:
   the tagline was jammed 5px under the headline while the chip floated 22px
   away from it. "Fountain of Life / Specialist Hospital" is one name across
   two lines, so it needs the tightest gap on the page; the chip is a separate
   element and needs the loosest above the name.

   The scale below is deliberate rather than even - 24 / 6 / 26 / 34 / 34 -
   so the eye reads: badge, [name + tagline], sentence, actions, credentials.
   The template's own margins are overridden at matching specificity. */
.hero-banner.style-1.fol-hero .hero-content .sub-title,
.fol-hero .hero-content .sub-title { margin-bottom: 14px; }

.hero-banner.style-1.fol-hero .hero-content .hero-name,
.fol-hero .hero-name { margin-top: 0; margin-bottom: 6px; }

.hero-banner.style-1.fol-hero .hero-content .hero-tagline,
.fol-hero .hero-tagline { margin-bottom: 26px; }

.hero-banner.style-1.fol-hero .hero-content .text,
.fol-hero .text { margin-bottom: 34px; }

.fol-hero .fol-hero-trust { margin-top: 34px; }


/* ------------------------------------------------------- services tabs -- */

/* The client's Phosphor icons are raster line-art, so each is recoloured to the
   brand color and written as a flat PNG.

   An earlier attempt emitted SVGs that painted a rect through a data-URI mask.
   That does not render: an SVG loaded via <img> is an isolated document and
   browsers block its external and data-URI references, so the mask never
   applied and the icons were invisible. Two plain PNGs per icon - color and
   white - avoid the problem entirely. */
.fol-tab-ico {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}

/* The template fills the tab with --bs-primary on hover, active, focus AND
   :active, so the icon has to flip to white in every one of those states -
   not just .active. A color icon on a matching fill is invisible, which is exactly
   what happened when only .active was covered. */
.dz-tabs.style-3 .nav-tabs .nav-link.active .fol-tab-ico[src*="maternity-care"],
.dz-tabs.style-3 .nav-tabs .nav-link:hover .fol-tab-ico[src*="maternity-care"],
.dz-tabs.style-3 .nav-tabs .nav-link:active .fol-tab-ico[src*="maternity-care"],
.dz-tabs.style-3 .nav-tabs .nav-link:focus .fol-tab-ico[src*="maternity-care"] {
  content: url(../images/icons/maternity-care-white.png);
}

.dz-tabs.style-3 .nav-tabs .nav-link.active .fol-tab-ico[src*="laparoscopy"],
.dz-tabs.style-3 .nav-tabs .nav-link:hover .fol-tab-ico[src*="laparoscopy"],
.dz-tabs.style-3 .nav-tabs .nav-link:active .fol-tab-ico[src*="laparoscopy"],
.dz-tabs.style-3 .nav-tabs .nav-link:focus .fol-tab-ico[src*="laparoscopy"] {
  content: url(../images/icons/laparoscopy-white.png);
}

.dz-tabs.style-3 .nav-tabs .nav-link.active .fol-tab-ico[src*="uterus"],
.dz-tabs.style-3 .nav-tabs .nav-link:hover .fol-tab-ico[src*="uterus"],
.dz-tabs.style-3 .nav-tabs .nav-link:active .fol-tab-ico[src*="uterus"],
.dz-tabs.style-3 .nav-tabs .nav-link:focus .fol-tab-ico[src*="uterus"] {
  content: url(../images/icons/uterus-white.png);
}

.dz-tabs.style-3 .nav-tabs .nav-link.active .fol-tab-ico[src*="incubator"],
.dz-tabs.style-3 .nav-tabs .nav-link:hover .fol-tab-ico[src*="incubator"],
.dz-tabs.style-3 .nav-tabs .nav-link:active .fol-tab-ico[src*="incubator"],
.dz-tabs.style-3 .nav-tabs .nav-link:focus .fol-tab-ico[src*="incubator"] {
  content: url(../images/icons/incubator-white.png);
}

/* The two tabs still on the template's inline SVGs are handled by the
   template's own rule, which recolours svg path on the same states. */

/* ==========================================================================
   Navy variant - .fol-hero-navy on the hero element
   --------------------------------------------------------------------------
   A test variant. The light hero above is untouched, so the two can be
   swapped by adding or removing one class in the markup.

   The panel becomes deep navy. Everything that was tuned for dark ink on
   white has to be re-stated, not merely lightened: text colours, the
   photograph scrim direction, the glass pills, and the borders. Contrast is
   measured against the mid navy #063B73 - white body copy lands around 12:1,
   and the muted tones used for secondary copy stay above 7:1.
   ========================================================================== */

.fol-hero-navy {
  /* Local tokens so the rules below read as one palette rather than a
     scattering of literals. */
  --fol-navy-1: #041F3E;   /* deepest, top-left */
  --fol-navy-2: #063B73;   /* brand navy, mid */
  --fol-navy-3: #08498B;   /* lift, bottom-right */
  --fol-on-navy: #FFFFFF;
  --fol-on-navy-muted: rgba(255, 255, 255, .80);
  --fol-on-navy-faint: rgba(255, 255, 255, .60);
  --fol-on-navy-line: rgba(255, 255, 255, .22);
}

.fol-hero-navy,
.hero-banner.style-1.fol-hero-navy {
  background: linear-gradient(135deg,
              var(--fol-navy-1) 0%,
              var(--fol-navy-2) 52%,
              var(--fol-navy-3) 100%);
  color: var(--fol-on-navy);
}

/* ----------------------------------------------------- ambience on navy -- */

/* The wash was a white veil over the building photo. On navy it has to be a
   navy veil, or the photo bleaches the panel back towards grey. The photo is
   dropped further and desaturated so it reads as texture only. */
.fol-hero-navy .fol-hero-photo-wash::before {
  opacity: .09;
  filter: saturate(.35) contrast(1.06) brightness(.85);
}
.fol-hero-navy .fol-hero-photo-wash::after {
  background:
    linear-gradient(118deg,
      rgba(4, 31, 62, .82) 0%,
      rgba(6, 59, 115, .74) 40%,
      rgba(8, 73, 139, .70) 78%,
      rgba(4, 31, 62, .84) 100%),
    linear-gradient(180deg,
      rgba(4, 31, 62, .55) 0%,
      rgba(4, 31, 62, .32) 40%,
      rgba(4, 31, 62, .40) 74%,
      rgba(4, 31, 62, .68) 100%);
}

/* Woven cloth, replacing the dot lattice and blueprint grid.

   Both of those were regular lattices, which is the default texture on a
   great many generated pages and read as such. This is a warp and weft at
   5px: a light thread running vertically and a dark one horizontally, so the
   two interleave the way real cloth does rather than forming a grid of
   visible intersections. Read at arm's length it is linen or a cot sheet,
   which is the right association for a hospital delivering babies.

   The dark weft carries most of the texture. On navy a second light layer
   would silver the panel; a shadow thread keeps it as cloth. */
.fol-hero-navy .fol-hero-pattern {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, .05)         0 1px, transparent 1px 5px);
  /* The lattice tiled at 26/78px and drifted. Cloth does not drift, and at
     5px the repeat is below the threshold where tiling is perceived. */
  background-size: auto;
  background-position: 0 0;
  animation: none;
  -webkit-mask-image: radial-gradient(110% 90% at 74% 28%, #000 0%, transparent 74%);
          mask-image: radial-gradient(110% 90% at 74% 28%, #000 0%, transparent 74%);
}
/* The blueprint grid was the second half of the lattice. The weave replaces
   both, so this layer is retired rather than restyled. */
.fol-hero-navy .fol-hero-grid {
  background-image: none;
}

.fol-hero-navy .fol-hero-orb-1 {
  background: radial-gradient(circle at 42% 40%,
              rgba(120, 190, 255, .16), rgba(120, 190, 255, .06) 52%, transparent 72%);
}
.fol-hero-navy .fol-hero-orb-2 {
  background: radial-gradient(circle at 55% 45%,
              rgba(var(--fol-green-rgb), .14), rgba(var(--fol-green-rgb), .05) 50%, transparent 70%);
}

/* The fertility mark is a line drawing; stroke and highlight both flip. */
.fol-hero-navy .fol-fertility-egg {
  border-color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .18) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 64%);
  box-shadow:
    inset 0 0 0 22px rgba(255, 255, 255, .03),
    0 28px 80px rgba(0, 0, 0, .28);
}
.fol-hero-navy .fol-fertility-sperm::before {
  background: rgba(var(--fol-green-rgb), .34);
}
.fol-hero-navy .fol-fertility-sperm::after {
  background: linear-gradient(90deg, rgba(var(--fol-green-rgb), .34), rgba(var(--fol-green-rgb), 0));
}

/* ------------------------------------------------------- content column -- */

/* Registration chip: was navy ink in a white pill. Now a glass pill - a
   translucent white fill would grey the type out, so the fill stays low and
   the text goes to full white. `text-primary` is on the element in the
   markup, hence the !important. */
.hero-banner.style-1.fol-hero-navy .hero-content .sub-title,
.fol-hero-navy .hero-content .sub-title,
.fol-hero-navy .sub-title,
.fol-hero-navy .sub-title.text-primary {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .10);
  color: var(--fol-on-navy) !important;
}
.fol-hero-navy .sub-title .fol-rule {
  background: linear-gradient(90deg, var(--fol-green), rgba(var(--fol-green-rgb), 0));
}

/* Headline. "Mother and Child" was near-black; on navy it is plain white.
   "Fountain of Life" carried brand navy to separate itself from the line
   above - that separation is gone here, so it takes a pale blue that still
   distinguishes the two lines without introducing a second hue. */
.hero-banner.style-1.fol-hero-navy .hero-content .title.hero-name,
.hero-banner.style-1.fol-hero-navy .title.hero-name,
.fol-hero-navy .hero-name {
  color: var(--fol-on-navy);
}
.fol-hero-navy .hero-name-em {
  color: #8FC7FF;
}

/* The tagline is the accent maroon, with the green rule beneath it.

   The brand maroon itself cannot be used at this size: #A1263A measures
   1.2-2.3:1 against the three navy stops, which is not a legibility
   judgement but an unreadable one. This is the same problem the site already
   solved once - style.css carries --fol-accent-on-dark (#D96F82) for accent
   red on dark grounds. That token is tuned for the near-black secondary and
   only reaches 3.5:1 on this lighter navy, so the tagline takes the same hue
   lifted one step to clear AA: 4.7:1 at the mid stop and 7.0:1 at the deep
   end, which is where this line actually sits in the gradient.

   The green rule under it comes from the base .hero-tagline::after and needs
   no override - it was already brand green. */
.fol-hero-navy .hero-tagline {
  color: #E8909F;
  opacity: 1;
}

.hero-banner.style-1.fol-hero-navy .hero-content .text,
.hero-banner.style-1.fol-hero-navy .text,
.fol-hero-navy .text {
  color: var(--fol-on-navy-muted);
}

/* ------------------------------------------------------------- actions -- */

/* The primary button keeps its red gradient - it is the one place red still
   works, because it is a filled field carrying white type rather than red
   type on navy. The halo deepens so the button still lifts off a dark panel;
   a coloured glow alone is invisible here. */
.fol-hero-navy .hero-content .btn-primary {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .30), 0 12px 30px rgba(140, 35, 50, .30);
}
.fol-hero-navy .hero-content .btn-primary:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34), 0 18px 40px rgba(140, 35, 50, .38);
}

/* The secondary action was a solid white pill, which on navy would compete
   with the primary button for weight. It becomes glass with a white border
   so the hierarchy survives the inversion. */
.fol-hero-navy .fol-hero-book {
  border-color: rgba(255, 255, 255, .30) !important;
  background: rgba(255, 255, 255, .10);
  color: var(--fol-on-navy);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .04),
    0 8px 24px rgba(0, 0, 0, .22);
}
.fol-hero-navy .fol-hero-book:hover,
.fol-hero-navy .fol-hero-book:focus {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.fol-hero-navy .fol-hero-call-ico {
  background: rgba(255, 255, 255, .16);
  color: var(--fol-on-navy);
}
.fol-hero-navy .fol-hero-call,
.fol-hero-navy .fol-hero-call-txt strong { color: var(--fol-on-navy); }
.fol-hero-navy .fol-hero-call-txt span { color: var(--fol-on-navy-muted); }

.fol-hero-navy .fol-hero-video { color: var(--fol-on-navy); }
.fol-hero-navy .fol-hero-video:hover { color: #8FC7FF; }
.fol-hero-navy .fol-hero-video-ico {
  border-color: var(--fol-on-navy-line);
  color: var(--fol-on-navy);
}
.fol-hero-navy .fol-hero-video:hover .fol-hero-video-ico {
  border-color: var(--fol-on-navy);
  background: var(--fol-on-navy);
  color: var(--fol-navy-2);
}

/* --------------------------------------------------------- media column -- */

/* The offset frame behind the photograph was a pale tint on white; on navy it
   has to be lighter than the panel to still read as a frame. */
.fol-hero-navy .fol-hero-frame {
  background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow:
    0 2px 10px rgba(0, 0, 0, .18),
    0 30px 70px rgba(0, 0, 0, .38);
}
.fol-hero-navy .fol-hero-media-sm {
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}

/* The claim card stays white and near opaque. It is the one element that
   should read as a physical card on top of the panel, and its dark type is
   already correct against a white ground. */
.fol-hero-navy .fol-hero-card {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 20px 48px rgba(0, 0, 0, .22);
}

.fol-hero-navy .fol-hero-slider-dot {
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.fol-hero-navy .fol-hero-slider-dot.is-active { background: #fff; }

/* The mobile breakpoint restates the wash for the single-column layout, so
   the navy version of it has to be restated at the same breakpoint or the
   panel reverts to white below 991px. */
@media only screen and (max-width: 991px) {
  /* The unqualified rule at this breakpoint tightens the lattice to
     22px/66px. The weave is a fixed 5px thread and must not be rescaled, so
     its size is restated here; only the mask follows the mobile framing. */
  .fol-hero-navy .fol-hero-pattern {
    background-size: auto;
    -webkit-mask-image: radial-gradient(100% 60% at 76% 10%, #000 0%, transparent 76%);
            mask-image: radial-gradient(100% 60% at 76% 10%, #000 0%, transparent 76%);
  }
  .fol-hero-navy .fol-hero-photo-wash::after {
    background:
      linear-gradient(118deg,
        rgba(4, 31, 62, .86) 0%,
        rgba(6, 59, 115, .80) 40%,
        rgba(8, 73, 139, .76) 78%,
        rgba(4, 31, 62, .88) 100%),
      linear-gradient(180deg,
        rgba(4, 31, 62, .58) 0%,
        rgba(4, 31, 62, .38) 40%,
        rgba(4, 31, 62, .46) 74%,
        rgba(4, 31, 62, .72) 100%);
  }
}

@media only screen and (max-width: 575px) {
  .fol-hero-navy .fol-hero-media-sm {
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
  }
}