/* =====================================================================
   OSVI v2 shell on the older pages (body.v2-shell): the shared top bar,
   sticky header with the Services mega menu, mobile drawer and sticky
   emergency CTA sit on top of pages that still use Bootstrap + style.css.
   Loaded after v2-base.css; only fixes the clashes with the old styles.
   ===================================================================== */
/* the old header was position:fixed with a padding-top offset on <body>;
   the v2 header is sticky and takes its own space */
body.v2-shell, body.v2-shell.has-uniliv-bar { padding-top: 0 !important; }
/* the sticky emergency CTA replaces the old back-to-top arrow in that corner */
body.v2-shell #scroll { display: none !important; }

/* Bootstrap underlines links; the v2 parts never do (except the top bar link) */
.v2.v2-header a, .v2.v2-header a:hover, .v2.v2-drawer a, .v2.v2-drawer a:hover,
.v2.v2-sos a, .v2.v2-sos a:hover, .v2.v2-topbar a:hover { text-decoration: none; }
.v2.v2-topbar .v2-topbar__link { text-decoration: underline; }
.v2.v2-header img { vertical-align: middle; }
.v2.v2-header button, .v2.v2-drawer button { text-transform: none; line-height: 1.2; }

/* stay above the old pages' own positioned elements (sliders, cards) */
.v2.v2-header { z-index: 9990; }
.v2.v2-sos { z-index: 9980; }
.v2.v2-drawer { z-index: 10040; }

/* Same typeface as the homepage on every page: Plus Jakarta Sans for all text.
   The older stylesheets set Open Sans / Source Sans Pro / Arial on many elements,
   hence !important. Icon elements (<i class="fas ...">, slider arrows) keep their icon font. */
body.v2-shell, body.v2-shell *:not(i):not([class*="fa-"]) {
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Inner-page banner: the heading used to be painted into the picture (in the old font); the picture
   is now text-free (*-notext.webp) and the heading is real text. Shown from 1200px up, as before. */
body.v2-shell .inner-container { display: flex; align-items: center; }
body.v2-shell .inner-container > .container { width: 100%; }
.inner-banner__title { margin: 0; font-size: clamp(36px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -0.035em; color: var(--v2-ink); }
.inner-banner__title strong { display: block; font-weight: 800; }
.inner-banner__title span { display: block; font-weight: 500; color: var(--v2-magenta); }
@media (max-width: 1199.98px) { body.v2-shell .inner-container { display: none; } }

/* Headings look like the homepage's: extra-bold with slightly tight spacing (the older pages used
   700 or 400 with normal spacing). Small uppercase group labels keep their wide spacing. */
body.v2-shell :is(h1, h2, h3, h4, h5, h6):not(.v2 *, #footer *, .partner-group-title),
body.v2-shell .osvi-form > p:first-child { font-weight: 800; letter-spacing: -0.02em; }
body.v2-shell h1:not(.v2 *, #footer *) { letter-spacing: -0.03em; }
body.v2-shell .osvi-form > p:first-child { color: var(--v2-ink); }

/* "Our services" strip (UniLiv page): space around the tilted band, and clip its overhang so the
   page never scrolls sideways (the homepage does the same through `.v2 main`) */
body.v2-shell main { overflow-x: hidden; overflow-x: clip; }
body.v2-shell .hv2-marquee { margin: 8px -20px 44px; }
@media (max-width: 599px) { body.v2-shell .hv2-marquee { margin-bottom: 32px; } }

/* blog articles: the date / author line a shade darker so it is easy to read (#777 was just under 4.5:1) */
body.v2-shell p.meta { color: #666; }
/* blog articles: the medical disclaimer was a light grey (#8a8690, 3.6:1); same darker grey as the eye-care pages */
body.v2-shell p.disclaimer { color: #625D68; }

/* Older pages: their first content heading is the page's <h1> (for Google and screen readers),
   styled exactly like the h4/h3 it used to be */
body.v2-shell h1.page-title:not(#footer *) { font-size: 26px; line-height: 1.2; margin: 0 0 24px; color: #000; letter-spacing: -0.02em; }
body.v2-shell .about-content h1.page-title:not(#footer *) { font-size: 24px; }
body.v2-shell h1.page-title--lg:not(#footer *) { font-size: 30px; line-height: 1.2; margin-bottom: 0; }

/* Data Annotation: the 12 annotation types, labels as real text (icons cut from the old picture) */
.ann-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 24px; }
.ann-grid li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--v2-ink); }
.ann-icon { flex: none; width: 63px; height: 58.5px; background: url(../images/annotation-icons.webp) calc(var(--i) * -63px) 0 / 756px 58.5px no-repeat; }

/* Older pages: sub-headings moved up a level (h4 -> h2, h5 -> h3, corporate h3 -> h2) so the outline
   under the page's <h1> has no gaps; .hx4 / .hx5 / .hx3 keep exactly the look they had */
body.v2-shell main h2.hx4:not(#footer *) { font-size: 26px; line-height: 1.2; margin: 0 0 24px; color: #000; }
body.v2-shell main .about-content h2.hx4:not(#footer *), body.v2-shell main .team-content h2.hx4:not(#footer *) { font-size: 24px; }
body.v2-shell main h3.hx5:not(#footer *):not(.partner-group-title) { font-size: 16px; line-height: 1.2; margin: 0 0 5px; color: #000; }
body.v2-shell main h2.hx3:not(#footer *) { font-size: 26px; line-height: 1.2; margin: 0; color: #000; }