/* ============================================
   CUSTOM OVERRIDES — Executive Health
   Applied on top of Webflow export CSS.
   ============================================ */

/* ===== SCROLL-TO-TOP BUTTON ===== */
#scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: #001438;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 20, 56, 0.18);
}

#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scroll-top-btn:hover { background: #1F519C; }

@media (prefers-reduced-motion: reduce) {
  #scroll-top-btn { transition: opacity 0.15s ease; transform: none; }
}

/* ===== GLOBAL FONT VARIABLES =====
   The site's original editorial design uses Apple's NEW YORK font
   family (New York Heading for big display type, New York Small for
   smaller serif text). Those .otf files are already loaded via the
   framework's @font-face declarations. Cormorant Garamond is kept
   as a webfont fallback in case New York fails to load.

   The previous "Polishing" iteration wired the serif vars to
   Helvetica Neue (sans-serif!), which collapsed every editorial
   accent into a plain sans look. Reverted here to the originals. */
:root {
  --sans-font:         'Inter', sans-serif;
  --serif-font-large:  'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif-font-small:  'New York Small', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif-font:        'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif:             'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display:      'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* GLOBAL DEEPER-NAVY REBIND.
     The framework defines --dark-tone as the old navy (see
     executive-health-wip-*.css line 36). The whole site is moving to a
     deeper navy; rebinding the variable here propagates the change to
     every var(--dark-tone) reference (background, border, text) across
     the framework AND custom CSS — no per-rule overrides needed. The
     piecemeal !important overrides further down are now redundant but
     left in place as belt-and-braces. */
  --dark-tone: #001438;
}

/* ===== Body default: Inter — children inherit naturally =====
   IMPORTANT: do NOT apply via `body *` — that universal selector
   bypasses CSS inheritance and stamps Inter onto every descendant,
   including spans/em/strong inside headings (which then look
   sans-serif instead of inheriting the Cormorant serif from their
   heading parent). Setting just `body` lets natural inheritance
   carry the heading font down to children. */
body {
  font-family: 'Inter', sans-serif !important;
}

/* ===== Headings + descendants: New York Heading display serif =====
   Explicit selectors include `h1 *, h2 *, ...` so every span / em /
   strong / b inside a heading inherits the serif font.
   IMPORTANT: italic accents (em inside headings) are re-routed in
   the NEXT block to Cormorant Garamond — because New York Heading's
   @font-face only declares the regular weight (NewYorkExtraLarge-
   Regular.otf), italics on em would render as a browser-synthesised
   slant that looks heavy and wrong (e.g. the giant 'longevity' word
   on the homepage hero). Cormorant has true italic glyphs loaded
   via Google Fonts, so it carries italics properly. */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.display-heading, .display-heading *,
.heading-one, .heading-two, .heading-three, .heading-four,
.heading-five, .heading-six, .heading-one *, .heading-two *,
.heading-three *, .heading-four *, .heading-five *, .heading-six *,
.blog-ingress, .blog-ingress *,
.bk-hero-title, .bk-hero-title *,
.bk-form-title, .bk-form-title *,
.exm-hero-v3-heading, .exm-hero-v3-heading *,
.exm-faq-heading, .exm-faq-heading *,
.exm-card-v3-name, .exm-card-v3-name *,
.facts-heading, .facts-heading *,
.programmes-heading, .programmes-heading *,
.stakes-hero-heading, .stakes-hero-heading *,
.locations-v2-heading, .locations-v2-heading *,
.pillars-heading, .pillars-heading *,
.premium-includes-heading, .premium-includes-heading *,
.testimonials-v2-heading, .testimonials-v2-heading *,
.case-for-proactive-heading, .case-for-proactive-heading *,
.newsletter-v2-heading, .newsletter-v2-heading *,
.faq-v2-heading, .faq-v2-heading *,
.screenings-faq-heading, .screenings-faq-heading *,
.cancer-section-heading, .cancer-section-heading *,
.hero-porsche-tagline, .hero-porsche-tagline *,
.hero-porsche-eyebrow, .hero-porsche-eyebrow *,
.cancer-card-name,
.case-stat-num,
.case-card-num,
/* Framework classes (executive-health-wip-*.css sets these to
   Hedvig Letters Serif / New York Heading — override). */
.article blockquote,
.ingress.serif,
.tm-symbol.serif,
.display-heading-2 {
  font-family: 'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
}

/* Italic accents (the giant 'longevity' word on the homepage hero,
   the cream/gold em in every section heading) need a font with true
   italic glyphs. New York Heading only has regular weight loaded —
   so we switch the em elements to Cormorant Garamond, which carries
   proper italics via the Google Fonts <link>. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.display-heading em, .heading-one em, .heading-two em,
.heading-three em, .heading-four em, .heading-five em, .heading-six em,
.bk-hero-title em, .bk-form-title em,
.hero-porsche-tagline em, .hero-porsche-eyebrow em,
.programmes-heading em, .stakes-hero-heading em,
.locations-v2-heading em, .pillars-heading em,
.premium-includes-heading em, .testimonials-v2-heading em,
.case-for-proactive-heading em, .facts-heading em,
.newsletter-v2-heading em, .faq-v2-heading em,
.screenings-faq-heading em, .cancer-section-heading em,
.exm-hero-v3-heading em, .exm-faq-heading em, .exm-card-v3-name em,
/* The cancer-section uses a span.gold inside its heading instead
   of an em — same treatment so the italic accent still flows. */
.cancer-section h2 span.gold,
.case-for-proactive-heading span.gold {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
}

/* ----- 0. Prevent page-level horizontal scroll on mobile -----
   Some sections (carousel, programmes ::after decoration, pseudo
   elements with negative offsets) can push the page body wider
   than the viewport, causing horizontal scroll on phones.
   `overflow-x: clip` prevents the scroll without creating a new
   scroll container (so position: fixed nav and sticky elements
   still work). `overflow-x: hidden` is the fallback for older
   browsers. */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ----- 1. Hide empty CMS "No items found" states ----- */
.w-dyn-empty {
  display: none !important;
}

/* Hide CMS placeholder items with empty bindings */
.w-dyn-item:has(.w-dyn-bind-empty) {
  display: none !important;
}

/* Hide entire w-dyn-list blocks that have no real content */
.w-dyn-list:has(.w-dyn-empty) {
  display: none !important;
}

/* Hide sections/wrappers containing only empty CMS lists */
.cms-lists:has(.w-dyn-empty) {
  display: none !important;
}

.locations:has(.w-dyn-empty) {
  display: none !important;
}

._2-col-grid-1-row:has(.w-dyn-empty) {
  display: none !important;
}

.large-quote:has(.w-dyn-empty) {
  display: none !important;
}

/* "Our Screenings" heading — hide when content section has empty CMS */
.section.title.bg-warm-tone:has(+ section .w-dyn-empty) {
  display: none !important;
}

/* Screenings content section — hide when CMS is empty (only applies to pages with empty CMS) */
section.section-3.section-4:has(.w-dyn-empty) {
  display: none !important;
}

/* Examinations parent section — hide when CMS is empty */
section.bg-warm-tone:has(._2-col-grid-1-row .w-dyn-empty) {
  display: none !important;
}

/* ----- 2. Cookie banner — compact on mobile ----- */
@media screen and (max-width: 767px) {
  .flowappz-cookie-consent-popup-19 {
    border-radius: 24px;
    max-width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 5px 20px 5px;
  }

  .flowappz-consent-popup-content--temp6 {
    flex-direction: column;
    gap: 12px;
  }

  .flowappz-cookie-popup-content-paragraph-35 {
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px !important;
  }

  .flowappz-cookie-popup-btn-wrapper-16 {
    flex-direction: row;
    gap: 12px;
    justify-content: stretch;
    width: 100%;
  }

  .flowappz-cookie-accept-button-34 {
    width: auto;
    flex: 1;
    font-size: 14px;
    padding: 12px 16px 12px 30px !important;
    height: auto;
  }

  .flowappz-cookie-reject-button-30 {
    flex: 1;
    font-size: 14px;
    padding: 12px 20px;
    text-align: center;
  }

  .paragraph-68 {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ----- 3. Mobile Book Appointment sticky CTA — hidden ----- */
/* The persistent bottom CTA was covering content and felt intrusive;
 * hide it at all viewports. The hamburger menu still contains a
 * Book Appointment button for easy access. */
.mobile-sticky-cta {
  display: none !important;
}


/* ----- 5. Homepage hero — better mobile layout ----- */
@media screen and (max-width: 767px) {
  .hero-cover-section-4 .hero-media-container {
    position: relative;
    height: auto;
    max-height: 300px;
    overflow: hidden;
  }

  .hero-cover-section-4 .hero-media-block {
    height: auto;
  }

  .hero-cover-section-4 .heromedia.img-copy {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 300px;
  }

  .display-heading-2 {
    font-size: 2rem;
    line-height: 1.15;
  }

  .display-heading-2 .warm-3 {
    font-size: 1.6rem;
  }

  .ingress-2 {
    font-size: 15px;
    line-height: 1.5;
  }

  .buttons-row {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .buttons-row .button-3 {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ----- 5b. Homepage locations section — full width + spacing ----- */
@media screen and (max-width: 767px) {
  /* Stack locations grid vertically and use full width */
  #scroll-anchor .locations._2-col-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #scroll-anchor .w-layout-grid._2-col-grid-1-row {
    grid-template-columns: 1fr !important;
  }

  /* Reset span 2 so children don't force implicit 2nd column */
  #scroll-anchor .w-layout-grid._2-col-grid-1-row > .locations {
    grid-column: 1 / -1 !important;
  }

  #scroll-anchor .locations._2-col-grid > * {
    grid-column: 1 / -1 !important;
  }

  /* More space between heading text and the divider/locations below */
  #scroll-anchor .heading-two {
    margin-bottom: 32px;
  }
}

/* ----- 6a. Examinations section — title-on-top + 3-card grid (all viewports) -----
   Previously these rules were mobile-only (@media max-width: 767px),
   so on desktop the section reverted to Webflow's default: 2-col
   layout with title-left and a vertical list of tiny 3rem thumbnails.
   Now applied at every breakpoint so mobile and desktop look the same.
   Rules are scoped to .section.bg-warm-tone (the cream-coloured
   Examinations section) — won't affect other sections. */
.section.bg-warm-tone ._2-col-grid-1-row {
  grid-template-columns: 1fr !important;
  gap: 24px;
}

.section.bg-warm-tone ._2-col-grid.more-gap-on-touch {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.section.bg-warm-tone .thumbnail-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.section.bg-warm-tone .thumbnail-item {
  display: block !important;
  text-align: center;
  width: 100% !important;
}

.section.bg-warm-tone .thumbnail-list [role="listitem"] {
  min-width: 0;
}

.section.bg-warm-tone .thumbnail-square {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Mobile keeps tighter gaps (less screen real estate) */
@media screen and (max-width: 767px) {
  .section.bg-warm-tone ._2-col-grid-1-row {
    gap: 12px;
  }

  .section.bg-warm-tone .thumbnail-list {
    gap: 8px;
  }
}

/* ----- 6b. Product cards — tighter title gap on mobile ----- */
@media screen and (max-width: 767px) {
  .service-card-heading.vertical {
    gap: 16px;
  }

  .service-preview-text.vertical {
    padding: 12px 16px;
  }
}

/* ----- 8a. List items — 3-col grid with images on top (all viewports) -----
   Previously mobile-only; promoted to all viewports for consistency.
   Mobile keeps tighter gap (8px) via the media override below. */
.list-quote .list,
.image-text-grid .list {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.list-quote .list > *,
.image-text-grid .list > * {
  min-width: 0;
}

.list-quote .list .list-item,
.image-text-grid .list .list-item {
  flex-direction: column !important;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.list-quote .list .list-item .bordered-icon,
.image-text-grid .list .list-item .bordered-icon {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

@media screen and (max-width: 767px) {
  .list-quote .list,
  .image-text-grid .list {
    gap: 8px;
  }
  .list-quote .list .list-item,
  .image-text-grid .list .list-item {
    gap: 8px;
  }
}

/* ----- 8b. CTA section "Take control" — left align + spacing on mobile ----- */
@media screen and (max-width: 767px) {
  .section.title.border-top .heading-two.align-cent {
    text-align: left !important;
    align-self: flex-start !important;
  }

  .section.title.border-top {
    padding-bottom: 24px !important;
  }

  .section.title.border-top .text-wrapper.more-gap {
    gap: 24px !important;
  }
}

/* ----- 8c. "The experience you deserve" — align left + tighter gap on mobile ----- */
@media screen and (max-width: 767px) {
  .headings-wrapper .display-heading {
    align-self: flex-start !important;
  }

  .headings-wrapper {
    gap: 24px !important;
  }
}

/* ----- 7. Newsletter section ----- */
/* Decorative map + dark background apply at ALL viewports. */
.section-8 {
  background-color: var(--dark-tone, #001438) !important;
  position: relative;
  overflow: hidden;
}

.section-8::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/Europe_New_White.png') center / cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* Lift form/content above the map decoration */
.section-8 > * {
  position: relative;
  z-index: 1;
}

/* The inner .columns row has a solid #001438 background from
   Webflow's base CSS, which paints over the map. Make it
   transparent inside .section-8 only (preserves the navy
   background on other pages that use .columns). */
.section-8 .columns {
  background-color: transparent !important;
}

@media screen and (max-width: 767px) {
  .section-8 {
    padding: 24px 16px;
  }

  .section-8 .w-row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .section-8 .w-col {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-8 .w-layout-blockcontainer.w-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ----- 9. Navbar — full width background on mobile ----- */
@media screen and (max-width: 767px) {
  .navbar-wrapper.div-block {
    background-color: white;
  }

  .navbar-wrapper .container---main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .navbar.w-nav {
    padding: 0 16px 0 16px;
  }

  .navbar-right-contents {
    gap: 12px !important;
  }

  /* Swap order on mobile: language toggle on the LEFT, hamburger on the RIGHT */
  .navbar-right-contents .menu-button {
    order: 2 !important;
  }
  .navbar-right-contents .w-dropdown {
    order: 1 !important;
  }

  .dropdown-toggle-2.w-dropdown-toggle {
    padding-right: 20px !important;
  }

  .dropdown-toggle-2 .w-icon-dropdown-toggle {
    margin-right: 0 !important;
    right: -4px !important;
  }

  .navbar-right-contents .w-dropdown-list {
    right: 0 !important;
    left: auto !important;
  }
}

/* ----- 5. General mobile spacing fixes ----- */
@media screen and (max-width: 767px) {
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Reduce padding after title sections so content is closer */
  .section.title {
    padding-bottom: 8px !important;
  }

  .container---main,
  .container---main-2 {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Footer cleanup */
  .footer-row {
    flex-direction: column;
    gap: 32px;
  }

  .footer-menu {
    width: 100%;
  }
}

/* ============================================
   INNER PAGE MOBILE FIXES
   ============================================ */

/* ----- 10. Hero-4 (experience, examinations) — reduce height on mobile ----- */
@media screen and (max-width: 767px) {
  .section.hero-4 {
    min-height: 60vh !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }

  .section.hero-4.bg-image {
    background-position: center center;
  }

  .hero-4-upper {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .hero-4-lower {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Hide decorative images on hero-4 on mobile */
  .hero-4-image-wrapper.hide-on-touch {
    display: none !important;
  }
}

/* ----- 11. Screenings/Examinations title sections — left align + hide bg overflow ----- */
@media screen and (max-width: 767px) {
  .section.title.screening-bg-right,
  .section.title.examination-bg-right {
    background-image: none !important;
    text-align: left !important;
  }

  .section.title.screening-bg-right .heading-one,
  .section.title.examination-bg-right .heading-one,
  .section.title .heading-one {
    text-align: left !important;
  }

  /* Articles/blog title — left-align */
  .section.blog-title-section .heading-one,
  .section.blog-title-section .blog-title {
    text-align: left !important;
  }
}

/* ----- 12. image-text-grid — stack to single column on mobile ----- */
@media screen and (max-width: 767px) {
  .image-text-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Reset children grid-area: span 2 that forces 2 implicit columns */
  .image-text-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .tab-content-image {
    width: 100% !important;
    max-height: 250px;
    object-fit: cover;
    border-radius: 8px;
  }

  .tab-content-text {
    padding: 0 !important;
  }

  .tab-content-text.top {
    padding: 0 !important;
  }
}

/* ----- 13. Product page checklist — keep icons small, don't apply 3-col grid ----- */
@media screen and (max-width: 767px) {
  /* Reset the 3-col grid for .list elements inside .text-grid (product
   * checklist). Note: the homepage `.list-quote .list` ALSO lives inside
   * a `.text-grid` ancestor, so we re-override it below in Section 8a-fix. */
  .text-grid .list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Keep checkmark icons small on product checklists */
  .text-grid .list .list-item .bordered-icon {
    width: 32px !important;
    height: 32px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    flex: none;
  }

  /* Product checklist list-item: horizontal layout */
  .text-grid .list .list-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border-dark, #e5e5e5);
  }
}

/* ----- 13b. Homepage .list-quote inside .text-grid — restore 3-col grid ----- */
@media screen and (max-width: 767px) {
  /* The homepage "Personal welcome / Calm seamless / Team dedicated" list
   * is `.text-grid .list-quote .list`, which gets caught by Section 13's
   * `.text-grid .list` flex rule above. Re-assert the 3-col image grid
   * here with higher specificity so the homepage layout wins. */
  .text-grid .list-quote .list {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    align-items: start;
  }

  .text-grid .list-quote .list .list-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  .text-grid .list-quote .list .list-item .bordered-icon {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex: 1 !important;
  }
}

/* ----- 14. Process steps / border-bottom sections — tighter padding ----- */
@media screen and (max-width: 767px) {
  .section.no-padding.border-bottom {
    padding: 12px 16px !important;
  }

  /* Hide the vertical connector lines — number now sits inline with arrow */
  .section.no-padding.border-bottom .circle-title-line-top,
  .section.no-padding.border-bottom .circle-title-line-lower {
    display: none !important;
  }

  /* Lay the arrow circle + step number on one horizontal row */
  .section.no-padding.border-bottom .circle-title-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
  }

  .section.no-padding.border-bottom .process-circle-wrapper {
    flex-direction: row !important;
    gap: 0 !important;
  }

  /* Pull the step number ("01", "02"...) out of its section
   * and into the divider row on the right. The original position
   * in .process-text-grid is hidden via :first-child below. */
  .section.no-padding.border-bottom::after {
    display: none; /* cleared; we handle via a different approach */
  }

  /* Hide the original large "01" / "02" number inside .process-text-grid;
   * it's reinjected into the divider above via a ::before on .halves */
  .section.no-padding .halves .half-box.left .process-text-grid .display-heading.grey-text-fade {
    display: none !important;
  }

  /* Inject the step number on the right of the arrow divider using
   * CSS counter on .section.no-padding.border-bottom */
  body {
    counter-reset: experience-step;
  }

  .section.no-padding.border-bottom {
    counter-increment: experience-step;
  }

  .section.no-padding.border-bottom .circle-title-wrapper::after {
    content: counter(experience-step, decimal-leading-zero);
    font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: rgba(20, 38, 64, 0.18);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  /* Tabs on process steps — stack vertically */
  .tabs.w-tabs {
    flex-direction: column !important;
  }

  /* Tab menu — vertical stack on mobile (see also rule 30) */
  .tabs-menu.w-tab-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
  }

  .tabs-menu.w-tab-menu .tab {
    align-self: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* --- 34. Experience hero text overflow fix --- */
  .hero-cover-cta {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cover-hero-halves {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
  }

  .hero-4-lower-content {
    max-width: 100% !important;
  }
}

/* ----- 15. Large quote section — reduce padding on mobile ----- */
@media screen and (max-width: 767px) {
  .section.bg-dark-tone.large-quote-section {
    padding: 24px 16px !important;
  }

  /* Tighten gap between "Client Experience" label and quote body */
  .section.bg-dark-tone.large-quote-section .quote-section {
    gap: 20px !important;
  }

  /* Tighten space around the author block below the quote */
  .section.bg-dark-tone.large-quote-section .large-quote {
    gap: 20px !important;
  }

  .section.bg-dark-tone.large-quote-section .quote-author {
    margin-top: 4px !important;
    gap: 12px !important;
  }

  .large-quote .heading-three {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
}

/* ----- 16. Product detail pages — tighter hero card gap ----- */
@media screen and (max-width: 767px) {
  /* Reduce gap between product title and description in hero card */
  .service-card-heading.vertical {
    gap: 12px !important;
  }

  /* CTA buttons on product pages — full width */
  .service-preview-text.vertical .buttons-row {
    flex-direction: column !important;
    gap: 8px;
  }

  .service-preview-text.vertical .buttons-row .button-3 {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }

  /* Product detail "What's included" heading — left-align */
  .text-grid .heading-four {
    text-align: left !important;
  }
}

/* ----- 17. Stat cards (about page, product pages) — reduce internal padding ----- */
@media screen and (max-width: 767px) {
  .small-icon-box {
    padding: 24px !important;
    gap: 16px !important;
  }

  .small-icon-box .heading-two {
    font-size: 1.8rem !important;
  }
}

/* ----- 18. FAQ sections on inner pages — tighter spacing ----- */
@media screen and (max-width: 767px) {
  .faq-section {
    gap: 0 !important;
  }

  .faq-section .accordion-item {
    padding: 16px 0 !important;
  }

  .faq-section .faq-titles {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    padding-right: 32px !important;
  }
}

/* ----- 19. Contact page — ensure form fields full-width ----- */
@media screen and (max-width: 767px) {
  .contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .w-input,
  .w-select {
    width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }
}

/* ----- 20. Inner page display headings — scale down + left-align for mobile ----- */
@media screen and (max-width: 767px) {
  .display-heading {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    align-self: flex-start !important;
  }

  .heading-one {
    font-size: 2.2rem !important;
  }

  /* articles-feed-heading wrapper — left-align children */
  .articles-feed-heading {
    align-items: flex-start !important;
  }
}

/* ----- 21. Empty CMS sections on inner pages — hide empty dark sections ----- */
@media screen and (max-width: 767px) {
  .section.bg-dark-tone.large-quote-section:has(.w-dyn-empty) {
    display: none !important;
  }

  /* Hide team section when empty */
  .section.team-section:empty,
  .section.team-section:has(.w-dyn-empty) {
    display: none !important;
  }
}

/* ----- 22. Preventive healthcare / doctors page — process step tabs ----- */
@media screen and (max-width: 767px) {
  .process-step-wrapper {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .process-step-wrapper .heading-four.process-step-number {
    font-size: 1rem !important;
  }
}

/* ----- 23. Global _2-col-grid → single column on mobile ----- */
@media screen and (max-width: 767px) {
  /*
   * The Webflow _2-col-grid never collapses to 1fr on mobile.
   * At 375px each column is ~155px — far too narrow for content.
   * This affects: about, doctors, locations, faq, preventive-healthcare.
   */
  .container---main._2-col-grid,
  .container---main._2-col-grid.more-gap-on-touch,
  .container---main._2-col-grid.more-gap-on-touch.align-top,
  .container---main._2-col-grid.articles-feed-heading {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.5rem;
  }

  /*
   * Webflow w-node IDs set grid-area: span 1 / span 2 on children,
   * forcing 2 implicit columns even with grid-template-columns: 1fr.
   * Reset ALL children to span 1 column and auto grid placement.
   */
  .container---main._2-col-grid > *,
  .container---main._2-col-grid.more-gap-on-touch > *,
  .container---main._2-col-grid.more-gap-on-touch.align-top > *,
  .container---main._2-col-grid.articles-feed-heading > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* _2-col-grid-1-row used on locations and product pages */
  .w-layout-grid._2-col-grid-1-row,
  .w-layout-grid._2-col-grid-1-row._2-rows {
    grid-template-columns: 1fr !important;
  }

  .w-layout-grid._2-col-grid-1-row > *,
  .w-layout-grid._2-col-grid-1-row._2-rows > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ----- 24. Metrics cards (about page) → single column ----- */
@media screen and (max-width: 767px) {
  .metrics-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .metrics-cards > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ----- 25. Contact methods grid → stack on mobile ----- */
@media screen and (max-width: 767px) {
  .contact-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .contact-methods-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Contact form intro text — reduce large serif heading */
  .text-grid.contact-form-text-grid .heading-four {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}

/* ----- 26. Footer bottom columns → single column ----- */
@media screen and (max-width: 767px) {
  .footer-left-column.bottom-column {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .footer-left-column.bottom-column > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ----- 27. Experience page — readable text over bg-image ----- */
@media screen and (max-width: 767px) {
  /*
   * On the experience page, .half-box elements have transparent
   * backgrounds but sit over a dark hero bg-image, making
   * dark text invisible. Add a semi-transparent white backdrop.
   *
   * Scoped with :not(.border-top):not(.border-bottom) to AVOID hitting
   * the about page's "Building the future" content block, which uses
   * .section.no-padding.border-top and lives on a normal white bg.
   */
  .section.no-padding:not(.border-top):not(.border-bottom) .halves .half-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px 16px !important;
    border-radius: 8px;
  }

  .section.no-padding:not(.border-top):not(.border-bottom) .halves .half-box.left,
  .section.no-padding:not(.border-top):not(.border-bottom) .halves .half-box.right {
    border-left: none;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Tighten outer spacing on .halves (step content wrapper) — experience only */
  .section.no-padding:not(.border-top):not(.border-bottom) .halves {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  /* About-style sections (.section.no-padding.border-top): kill the
   * extra .half-box padding so body content aligns with the section
   * title (which sits at 16px from the edge via container padding only). */
  .section.no-padding.border-top .halves .half-box,
  .section.no-padding.border-top .halves .half-box.left,
  .section.no-padding.border-top .halves .half-box.right {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section.no-padding .circle-title-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 6px 16px !important;
  }

  .section.no-padding.border-bottom.top-border .circle-title-wrapper,
  .section.no-padding.border-bottom .circle-title-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/* ----- 28. Articles page — left-align title + category list ----- */
@media screen and (max-width: 767px) {
  /* "Articles" heading is centered by default — left-align */
  .section.title.less-bottom-padding .display-heading,
  .section.blog-title-section .display-heading {
    text-align: left !important;
  }

  /* Article category filter list — stack vertically */
  .article-category-list.w-dyn-items.w-row {
    flex-direction: column !important;
  }

  .article-category-item.w-dyn-item.w-col {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ----- 29. Location cards / post-grid._3-col → single column ----- */
@media screen and (max-width: 767px) {
  .post-grid._3-col {
    grid-template-columns: 1fr !important;
  }
}

/* ----- 30. Tabs menu — ensure single column at mobile ----- */
@media screen and (max-width: 767px) {
  /*
   * Webflow only switches tabs-menu to flex-column at 479px.
   * Force it earlier at 767px for tablet/mobile readability.
   */
  .tabs-menu.w-tab-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
  }

  .tabs-menu.w-tab-menu .tab {
    align-self: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
}

/* ----- 31. Rich text pages (cookies, legal) — spacing ----- */
@media screen and (max-width: 767px) {
  .section.article-section .container---s {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .article.w-richtext h2,
  .article.w-richtext h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
}

/* ----- 32. Form pages — prevent iOS zoom + spacing ----- */
@media screen and (max-width: 767px) {
  .form-grid {
    grid-row-gap: 8px;
  }

  .demo-form-grid.medium-gap {
    gap: 24px;
  }

  .text-grid.request-demo-form-text-grid,
  .text-grid.contact-form-text-grid {
    gap: 24px !important;
  }
}

/* ----- 33. Tab content lists — 3-col grid (matches Examinations section) ----- */
@media screen and (max-width: 767px) {
  /*
   * Use the same 3-col "image-on-top, title-below" layout as the
   * Examinations section for all .tab-content .image-text-grid .list
   * occurrences (about, doctors, services, screenings, etc.).
   */
  .tab-content .image-text-grid .list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100%;
  }

  .tab-content .image-text-grid .list > * {
    grid-column: auto !important;
    min-width: 0;
  }

  .tab-content .image-text-grid .list .list-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
  }

  .tab-content .image-text-grid .list .list-item .bordered-icon {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    border-radius: 10px !important;
    object-fit: cover !important;
  }

  .tab-content .image-text-grid .list .list-item > div:not(.bordered-icon) {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }
}

/* ----- 35. About page team grid — larger portraits on mobile ----- */
@media screen and (max-width: 767px) {
  /* 2-column grid of stacked portrait-over-name cards (was huge 1-col flex rows with tiny 48px avatars) */
  .section.team-section .team-grid.w-dyn-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .section.team-section .team-member.w-dyn-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Ensure the name always reserves 2 lines of vertical space so titles
   * across a row start at the same Y regardless of whether the name wraps. */
  .section.team-section .team-member-name-position {
    min-height: 2.4em;
  }

  .section.team-section .team-member .avatar.large-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }

  .section.team-section .team-member-details-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .section.team-section .team-member-name-position .heading-four {
    font-family: var(--serif, "Cormorant Garamond"), Georgia, serif !important;
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .section.team-section .team-member-contact-details .medium-small-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: 0.7 !important;
  }
}

/* Small mobile: ~360px and under keep 2 cols but tighter */
@media screen and (max-width: 400px) {
  .section.team-section .team-grid.w-dyn-items {
    gap: 12px !important;
  }
}

/* ----- 14. List-item text wrapping (overflow guard) -----
   Inside <div class="list-item"> the icon and text <div> are flex
   children. Without min-width:0 the text div can't shrink below
   its content width, which causes the text to overflow the parent
   on narrow viewports (saw on executive-heart.html: 263-char list
   item that clipped at the right edge). Apply site-wide. */
.list-item > div:not(.bordered-icon) {
  min-width: 0;
  flex: 1 1 auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ----- 17. Nav dropdown panels — two layouts -----
   The site has two dropdown styles:
   (A) COMPLEX: Products & Services — each category has a nested
       list of clickable sub-items (Screenings → Executive Premium,
       Heart, Start; Examinations → Orthopedic, Gynecological,
       Psychiatry). Banner image is redundant; show a clean card list.
   (B) SIMPLE: Preventive Healthcare, The Client Experience,
       About us — each category just has a title + banner image
       (no sub-items). Banner IS the content; show it prominently.

   We distinguish with :has(.thumbnail-list). */

/* ---------- Shared: hide decorative arrow-circle ---------- */
.dropdown-wide-wrapper .arrow-circle {
  display: none !important;
}

/* ---------- (A) COMPLEX dropdowns with nested sub-items ---------- */

/* Hide banner image — replaced by the card list */
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .img-fill {
  display: none !important;
}

/* Compact container */
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) {
  min-height: auto !important;
  padding: 20px 16px !important;
  gap: 4px;
}

/* Small uppercase section header */
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list)
  .heading-four.dropdown-link-heading,
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list)
  .heading-four.dropdown-link-heading.white {
  flex: 0 0 auto !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Card list */
.dropdown-wide-wrapper .nav-shortcuts {
  margin-top: 4px;
}

.dropdown-wide-wrapper .thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.dropdown-wide-wrapper .thumbnail-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 10px 12px !important;
  border-radius: 10px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}

.dropdown-wide-wrapper .thumbnail-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.dropdown-wide-wrapper .thumbnail-square {
  width: 56px !important;
  height: 56px !important;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.dropdown-wide-wrapper .thumbnail-item > div {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}

/* ---------- (B) SIMPLE dropdowns: just title + banner image ---------- */

/* Box: contained card with rounded corners around the image.
   IMPORTANT: override the Webflow .dropdown-box-link.taller.grid
   default of `display: grid; grid-template-columns: 1fr 1fr;` which
   put the heading in the left column and the image in the right —
   making the image render at half-width and appear "vertical". */
.dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list)) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  min-height: auto !important;
  padding: 20px !important;
  gap: 12px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list)):hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Heading: keep prominent (it's the only label in this card) */
.dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list))
  .heading-four.dropdown-link-heading,
.dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list))
  .heading-four.dropdown-link-heading.white {
  flex: 0 0 auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 4px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Banner image: rounded card, controlled aspect ratio */
.dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list)) .img-fill {
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* ---------- Mobile: stack columns vertically ---------- */
/* The dropdown grid normally has 2 columns on tablet+ — on phones
   that overflows. Force 1-column so each category card is full-width. */
@media screen and (max-width: 767px) {
  .dropdown-wide-wrapper .dropdown-grid,
  .dropdown-wide-wrapper .dropdown-grid._2-col {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Complex (Products & Services) — tighten on mobile */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) {
    padding: 16px 12px !important;
  }
  .dropdown-wide-wrapper .thumbnail-square {
    width: 48px !important;
    height: 48px !important;
  }
  .dropdown-wide-wrapper .thumbnail-item {
    padding: 8px 10px !important;
    gap: 12px;
  }

  /* Simple — keep banner tidy on mobile */
  .dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list)) {
    padding: 14px !important;
  }
  .dropdown-wide-wrapper .dropdown-box-link:not(:has(.thumbnail-list)) .img-fill {
    aspect-ratio: 21 / 9;  /* a touch shorter on mobile */
  }
}

/* ----- 16. Footer — Europe map background (all viewports) ----- */
.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/Europe_New_White.png') center / cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* Lift footer content above the map decoration */
.footer > * {
  position: relative;
  z-index: 1;
}

/* ----- 15. Main container — center, not shifted left -----
   Webflow's base .container---main rule sets
     margin: 0 0 0 -52px
   which pulls the entire page content 52px to the left and leaves
   52px of dead space on the right of every desktop viewport
   (visible on 1366px–1920px screens). The mobile rule already
   resets margin-left: 0, but desktop was left shifted.
   Override to center the container properly. */
.container---main {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----- 18. Warm-tone (cream) sections — full-bleed cards -----
   Webflow's .container---main has 6rem side padding everywhere by
   default. That's fine for body text / FAQ accordions, but it
   visibly insets the card-grid sections (Our Screenings, Examinations,
   Services etc.) — cards end up much smaller than they need to be
   and the beige background looks like an empty frame around them.

   Identified 111 instances across 33 pages site-wide. Scoping by
   .section.bg-warm-tone targets only the card-grid sections —
   article body / FAQ accordion sections keep their inset.

   Keep a small 24px gutter on desktop (instead of full bleed) so
   the outermost cards don't touch the viewport edge. */
.section.bg-warm-tone > .container---main:not(.inside-dropdown):not(.no-padding-on-touch) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media screen and (max-width: 767px) {
  .section.bg-warm-tone > .container---main:not(.inside-dropdown):not(.no-padding-on-touch) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ----- 19. Metric cards — force equal heights -----
   Webflow's per-element CSS on the 2008 card has:
     #w-node-...507 { align-self: end; grid-area: span 2 / span 1 }
   which (a) bottom-aligns it instead of stretching, and (b) was
   designed for a 2-row layout. After we added the full-width
   pioneer card above the row of 2008 + 10K, the 2008 card ended
   up visibly shorter than 10K because of the align-self: end.

   Reset all .metric children in .metrics-cards to auto placement
   and stretch, EXCEPT the pioneer-card-marker which keeps its
   inline grid-column: 1 / -1 to span both columns. */
.metrics-cards > .metric:not(.pioneer-card-marker) {
  grid-area: auto !important;
  align-self: stretch !important;
}

/* ----- 20. Hide nav-dropdown thumbnail images on mobile -----
   The dropdown menus inside Products & Services and Examinations
   include thumbnail-square <img> previews per item. On the mobile
   touch nav the dropdowns become tall stacked panels and the
   thumbnails crowd the layout / overflow horizontally. Hide them
   below the Webflow "touch" breakpoint (991px). */
@media (max-width: 991px) {
  .nav-menu-wrapper .thumbnail-square,
  .nav-menu .thumbnail-square,
  .dropdown-wide .thumbnail-square,
  .thumbnail-list .thumbnail-square {
    display: none !important;
  }
  .nav-menu-wrapper .thumbnail-item,
  .dropdown-wide .thumbnail-item {
    padding: 8px 0;
  }
}

/* ----- 21. Stack "What's included?" header on mobile -----
   .includes-head uses flex with justify-content: space-between and
   .includes-summary has white-space: nowrap so "19 components · 4
   categories" can't wrap. On mobile this pushed past the viewport
   and caused page horizontal scroll. Stack vertically on small
   screens. */
@media (max-width: 600px) {
  .includes-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .includes-summary {
    white-space: normal !important;
  }
}

/* ----- 22. Mobile comparison: show only "Best suited for" row -----
   On phones the full 12-row stacked-card table is too long. Show
   just the first row ("Best suited for") which captures the
   essential comparison, and trim the surrounding padding/intro
   that was creating an empty band between the heading and cards. */
@media (max-width: 767px) {
  .audit-comparison-table tbody tr:not(:first-child) {
    display: none !important;
  }
  .audit-comparison {
    padding: 36px 0 !important;
  }
  .audit-comparison-layout {
    gap: 8px !important;
  }
  .audit-comparison-head h2 {
    margin: 0 !important;
  }
  .audit-comparison-head p,
  .audit-comparison-tablewrap > p {
    display: none !important;
  }
}

/* ----- 23. Tighten section paddings on mobile -----
   The combined-section (96px), CTA (56/40px) and FAQ (32px)
   stack to create empty bands on phones. Tighten each below
   767px so the page rhythm reads cleaner on mobile. */
@media (max-width: 767px) {
  .audit-combined {
    padding: 48px 0 !important;
  }
  .audit-cta {
    padding: 32px 0 !important;
  }
  .audit-faq {
    padding: 32px 0 !important;
  }
}

/* ----- 24. Cancer survival card grid ---- */
.cancer-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.cancer-card {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem 2rem 1.25rem 0;
}

/* Columns 2 and 3: left divider line + left padding */
.cancer-cards-grid .cancer-card:not(:nth-child(3n+1)) {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 2rem;
}

.cancer-card-name {
  font-family: var(--sans-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-warm);
  margin-bottom: 1.25rem;
}

.cancer-detection-label {
  font-family: var(--sans-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.4rem;
}

.cancer-bar-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.cancer-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.cancer-bar-fill.early {
  background: var(--mid-warm);
}

.cancer-bar-fill.late {
  background: rgba(255, 255, 255, 0.25);
}

.cancer-pct-early {
  font-family: var(--serif-font-large);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.cancer-pct-late {
  font-family: var(--serif-font-large);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  margin-bottom: 0.9rem;
}

.cancer-advantage {
  font-family: var(--sans-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--mid-warm);
}

@media screen and (max-width: 767px) {
  .cancer-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Reset 3-col dividers */
  .cancer-cards-grid .cancer-card:not(:nth-child(3n+1)) {
    border-left: none;
    padding-left: 0;
  }
  /* Apply 2-col dividers: right card in each row */
  .cancer-cards-grid .cancer-card:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 1.5rem;
  }
  .cancer-card {
    padding-right: 1.5rem;
  }
  /* Last column in 2-col: no right padding needed */
  .cancer-cards-grid .cancer-card:nth-child(2n) {
    padding-right: 0;
  }
}

@media screen and (max-width: 479px) {
  .cancer-cards-grid {
    grid-template-columns: 1fr;
  }
  /* Remove all column dividers at 1-col */
  .cancer-cards-grid .cancer-card:nth-child(2n) {
    border-left: none;
    padding-left: 0;
  }
  .cancer-card {
    padding-right: 0;
  }
}

/* ====================================================================
   24b. 'The case for proactive medicine' — 8-stat editorial grid on
   dark-navy background. Same visual language as the cancer survival
   grid (thin top rule per cell, gold uppercase eyebrow, large
   serif numbers, italic muted citations) but with 4 columns × 2
   rows of simple stat cells instead of detection bars.
   ==================================================================== */
.case-for-proactive-section {
  color: var(--white);
  padding: 96px 0;
}
.case-for-proactive-section .container---main {
  position: relative;
  z-index: 1;
}
.case-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.case-card {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem 1.5rem 1.25rem 0;
}
/* Columns 2, 3, 4: left divider line + left padding */
.case-cards-grid .case-card:not(:nth-child(4n+1)) {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 1.5rem;
}
.case-card-num {
  font-family: 'New York Heading', 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  font-weight: 500;
  color: var(--mid-warm, #c8a86a);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
.case-card-label {
  font-family: var(--sans-font);
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.1rem;
  font-weight: 400;
}
.case-card-cite {
  font-family: var(--sans-font);
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 991px) {
  .case-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Reset 4-col dividers */
  .case-cards-grid .case-card:not(:nth-child(4n+1)) {
    border-left: none;
    padding-left: 0;
  }
  /* Apply 2-col dividers */
  .case-cards-grid .case-card:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 1.5rem;
  }
}
@media screen and (max-width: 600px) {
  .case-for-proactive-section { padding: 56px 0; }
  .case-cards-grid { grid-template-columns: 1fr; }
  .case-cards-grid .case-card:nth-child(2n) {
    border-left: none;
    padding-left: 0;
  }
  .case-card { padding-right: 0; }
  .case-card-num { font-size: 2.2rem; }
}

/* ----- 25. Four-step process section ----- */
.process-steps-section {
  border-bottom: 1px solid var(--border-dark);
}

.process-steps-intro {
  margin-bottom: 3rem;
}

.process-eyebrow {
  font-family: var(--sans-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-tone);
  opacity: 0.45;
  margin-bottom: 0.75rem;
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-dark);
}

.process-step-card {
  padding: 2rem 2.5rem 2.5rem 2.5rem;
  position: relative;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease calc(var(--i, 0) * 80ms),
              transform 0.55s ease calc(var(--i, 0) * 80ms);
}

.process-step-card.psc-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-step-card:not(:first-child) {
  border-left: 1px solid var(--border-dark);
}

/* No timeline dots */
.process-step-card::before { content: none; }


.process-step-num {
  font-style: italic;
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--mid-warm, #c8a86a);
  opacity: 0.7;
  margin-top: 0;
  margin-bottom: 1rem;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.process-step-card:hover .process-step-num {
  opacity: 1;
  color: #d4a742;
}

.process-step-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #e8e4de;
}

.process-step-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.process-step-card:hover .process-step-img-wrap img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .process-step-img-wrap img { transition: none; }
  .process-step-card:hover .process-step-img-wrap img { transform: none; }
  .process-step-num { transition: none; }
}

.process-step-title {
  font-family: var(--serif-font-large);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--dark-tone);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.process-step-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--dark-tone-text-color);
  margin: 0;
}

.process-scroll-dots { display: none; }

@media (max-width: 991px) {
  .process-steps-scroll-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }
  .process-steps-scroll-outer::-webkit-scrollbar { display: none; }

  .process-steps-grid {
    display: flex;
    flex-direction: row;
    width: max-content;
  }

  .process-step-card {
    width: 72vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 1.5rem 1.5rem 2rem 0;
  }

  .process-step-card:not(:first-child) {
    padding-left: 1.5rem;
  }

  .process-scroll-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
  }

  .process-scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-dark);
    transition: background 0.25s;
    cursor: pointer;
  }

  .process-scroll-dot.active {
    background: var(--dark-tone);
  }
}

@media (max-width: 479px) {
  .process-step-card { width: 85vw; }
}

/* ----- 26. Stakes hero + stats section ----- */

.section.stakes-hero {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.stakes-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: clamp(420px, 38vw, 560px);
  gap: 0;
}

.stakes-hero-image {
  overflow: hidden;
  height: 100%;
  position: relative;
}

.stakes-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.stakes-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 45%,
    rgba(0, 20, 56, 0.45) 72%,
    rgba(0, 20, 56, 0.88) 100%
  );
  pointer-events: none;
}

.stakes-hero-text {
  padding: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.stakes-hero-eyebrow {
  font-family: var(--sans-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.25rem;
}

.display-heading.stakes-hero-heading {
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0;
  align-self: flex-start;
}

.stakes-hero-heading em {
  font-style: italic;
  display: block;
  color: var(--mid-warm);
}

.stakes-hero-body {
  color: rgba(255, 255, 255, 0.85);   /* was 0.55 — too dim on #001438 */
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 420px;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* Stats grid */
.stakes-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.section.stakes-stats {
  padding-top: 0;
  padding-bottom: 5rem;
}

.stakes-stat-card {
  padding: 2.75rem 2rem 0 0;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
}

.stakes-stat-card:not(:first-child) {
  border-left: 1px solid var(--border-dark);
  padding-left: 2rem;
}

.stakes-stat-num {
  font-family: var(--serif-font-large);
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--dark-tone);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.stakes-stat-label {
  font-family: var(--sans-font);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--dark-tone);
  line-height: 1.4;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border-dark);
}

.stakes-stat-body {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--dark-tone-text-color);
  flex: 1;
  margin: 0 0 1.25rem;
}

.stakes-stat-cite {
  font-family: var(--sans-font);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: rgba(0, 20, 56, 0.25);
  line-height: 1.5;
  margin-top: auto;
  padding-top: 1rem;
}

@media (max-width: 767px) {
  .stakes-hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .stakes-hero-image {
    height: 280px;
  }
  .stakes-hero-text {
    padding: 2rem 1.5rem;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .stakes-stats-grid { grid-template-columns: 1fr; }
  .stakes-stat-card:not(:first-child) {
    border-left: none;
    padding-left: 0;
  }
  .stakes-stat-card { padding-right: 0; }
}

/* ----- 27. Screening Programmes section ----- */

.programmes-eyebrow {
  font-family: var(--sans-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 20, 56, 0.4);
  margin-bottom: 1rem;
}

.programmes-heading {
  margin-bottom: 3rem;
  align-self: auto;
}

.programmes-heading em {
  font-style: italic;
  color: var(--dark-tone);
}

.programmes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-dark);
}

.programme-card {
  padding: 2rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--border-dark);
  transition: background-color 0.2s ease;
}

.programme-card:last-child {
  border-right: none;
}

.programme-card:not(.featured):hover {
  background-color: rgba(0, 20, 56, 0.03);
}

.programme-card.featured {
  background-color: var(--dark-tone);
}

.programme-card-image {
  margin: -2rem -2rem 1.75rem -2rem;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
}

.programme-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.programme-card:hover .programme-card-image img {
  transform: scale(1.04);
}

.programme-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mid-warm);
  font-family: var(--sans-font);
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  width: fit-content;
}
/* Non-featured cards have a warm/cream background, so the white-on-dark
   pill styling above doesn't read. Give them a gold-tinted variant
   instead: gold border + gold text on the warm card surface. */
.programme-card:not(.featured) .programme-badge {
  border-color: rgba(200, 168, 106, 0.45);
  background: rgba(200, 168, 106, 0.06);
}

.programme-name {
  font-family: var(--sans-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mid-warm);
  margin-bottom: 0.6rem;
}

.programme-card.featured .programme-name {
  color: rgba(255, 255, 255, 0.45);
}

.programme-title {
  font-family: var(--serif-font-large);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--dark-tone);
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.02em;
}

.programme-card.featured .programme-title {
  color: var(--white);
  font-size: 2rem;
}

.programme-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-dark);
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.programme-card.featured .programme-divider {
  background-color: rgba(255, 255, 255, 0.12);
}

.programme-desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--dark-tone-text-color);
  margin: 0;
  flex: 1;
}

.programme-card.featured .programme-desc {
  color: rgba(255, 255, 255, 0.5);
}

.programme-link {
  font-family: var(--sans-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mid-warm);
  margin-top: 2.5rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Examinations footnote */
.examinations-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-dark);
  margin-top: 0;
  font-size: 0.82rem;
  color: var(--dark-tone-text-color);
}

.examinations-footnote p {
  margin: 0;
}

.examinations-footnote strong {
  color: var(--dark-tone);
  font-weight: 600;
}

.examinations-link {
  font-family: var(--sans-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mid-warm);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 3rem;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .programmes-grid {
    grid-template-columns: 1fr;
    border: none;
  }
  .programme-card {
    border-right: none;
    border-bottom: 1px solid var(--border-dark);
  }
  .programme-card:last-child { border-bottom: none; }
  .examinations-footnote { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .examinations-link { margin-left: 0; }
}

/* ----- 28. Ghosted watermark illustrations ----- */



/* Stakes hero dark panel: anatomy ghosted behind text */
.stakes-hero-text {
  position: relative;
  overflow: hidden;
}

.stakes-hero-text::after {
  content: '';
  position: absolute;
  right: -15%;
  bottom: -20%;
  width: 70%;
  height: 130%;
  background-image: url('../images/WholeBody.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.stakes-hero-eyebrow,
.stakes-hero-heading,
.stakes-hero-body {
  position: relative;
  z-index: 1;
}

/* Programmes section: MRI scanner wireframe in upper-right */
.programmes-section {
  position: relative;
  overflow: hidden;
}

.programmes-section::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -10%;
  width: 40%;
  height: 110%;
  background-image: url('../images/MRI-scanner.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.programmes-section .container---main {
  position: relative;
  z-index: 1;
}

/* Stats section: Europe map ghosted behind stat numbers */
.section.stakes-stats {
  position: relative;
  overflow: hidden;
}

.section.stakes-stats::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 180%;
  background-image: url('../images/Europe_New.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.section.stakes-stats .container---main {
  position: relative;
  z-index: 1;
}

/* ----- 29. Facts section — light background 3-column grid ----- */
.facts-section {
  position: relative;
  overflow: hidden;
}

.facts-section::after {
  content: '';
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;
  height: 130%;
  background-image: url('../images/cms/6908e1e00377519ff58963fb_Heart.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  filter: invert(1);
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.facts-section .container---main {
  position: relative;
  z-index: 1;
}

.facts-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-dark);
  align-items: stretch;
}

.facts-context {
  padding: 3rem 3rem 3rem 2.5rem;
  border-right: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.facts-eyebrow {
  font-family: var(--sans-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-color);
  margin-bottom: 0.25rem;
}

.facts-heading {
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  max-width: 440px;
}

.facts-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dark-tone);
  opacity: 0.6;
  margin: 0;
}

.facts-stat-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dark);
}

.facts-stat-col:last-child {
  border-right: none;
}

.facts-stat {
  padding: 2.25rem 2rem 2.25rem 2.25rem;
  flex: 1;
  position: relative;
}

.facts-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2.25rem;
  right: 2rem;
  height: 2px;
  background-color: var(--brand-color);
  opacity: 0.25;
}

.facts-stat + .facts-stat {
  border-top: 1px solid var(--border-dark);
}

.facts-stat + .facts-stat::before {
  display: none;
}

.facts-stat-num {
  font-family: var(--serif-font-large);
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  color: var(--brand-color);
  line-height: 1;
  margin-bottom: 0.65rem;
}

.facts-stat-label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dark-tone);
  opacity: 0.6;
  max-width: 180px;
}

/* ===== 20. Testimonials v2 — two-card grid on dark bg ===== */

.testimonials-v2-section { padding: 80px 0; }

.testimonials-v2-header { margin-bottom: 48px; }

.testimonials-v2-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4BA96;
  margin: 0 0 16px;
}

.testimonials-v2-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 20px;
}
.testimonials-v2-heading em { font-style: italic; }

.testimonials-v2-rule {
  width: 48px;
  height: 1px;
  background: #D4BA96;
}

.testimonials-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
}

.testimonials-v2-card {
  padding: 40px;
  display: flex;
  flex-direction: column;
  border-right: 0.5px solid rgba(255, 255, 255, 0.14);
}
.testimonials-v2-card:last-child { border-right: none; }

.testimonials-v2-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: #D4BA96;
  margin-bottom: 28px;
  font-style: italic;
}

.testimonials-v2-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  flex: 1;
}

.testimonials-v2-author {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
}

.testimonials-v2-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.testimonials-v2-role {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 767px) {
  .testimonials-v2-grid {
    grid-template-columns: 1fr;
    border: 0.5px solid rgba(255, 255, 255, 0.14);
  }
  .testimonials-v2-card {
    border-right: none;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.14);
    padding: 32px 24px;
  }
  .testimonials-v2-card:last-child { border-bottom: none; }
}

/* ===== 21. Examinations page ===== */

/* Hero */
.exm-hero { padding: 64px 0; }

.exm-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.exm-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin: 0 0 20px;
}

.exm-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: 400;
  line-height: 1.0;
  margin: 0;
  color: #1a1a1a;
}
.exm-heading em { font-style: italic; }

.exm-hero-right {
  border-left: 0.5px solid #E2DBD0;
  padding-left: 48px;
  padding-top: 4px;
}

.exm-sub-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 16px;
  color: #1a1a1a;
}

.exm-body {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #6b6b6b;
  margin: 0;
}

/* Examination cards */
.exm-cards-section { padding: 0; }

.exm-card {
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  border-top: 0.5px solid #E2DBD0;
}
.exm-cards-section { border-bottom: 0.5px solid #E2DBD0; }

.exm-card-left {
  background-color: #EDE7DC;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.exm-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

.exm-card-discipline {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a5f40;
  position: relative;
  z-index: 1;
}

.exm-card-mid {
  padding: 40px 40px 40px 40px;
  border-right: 0.5px solid #E2DBD0;
  display: flex;
  flex-direction: column;
}

.exm-card-num {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-bottom: 16px;
}

.exm-card-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #1a1a1a;
}

.exm-card-tagline {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #6b6b6b;
  margin: 0;
  margin-top: auto;
}

.exm-card-right {
  padding: 40px 40px 40px 48px;
  display: flex;
  flex-direction: column;
}

.exm-card-rec-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4BA96;
  margin-bottom: 12px;
}

.exm-card-rec {
  font-size: 0.85rem;
  line-height: 1.75;
  color: #6b6b6b;
  margin: 0;
  flex: 1;
}

.exm-card-link {
  display: inline-block;
  margin-top: 32px;
  font-size: 0.85rem;
  color: #1F519C;
  text-decoration: none;
  border-bottom: 0.5px solid #1F519C;
  padding-bottom: 2px;
  transition: opacity 150ms ease;
  align-self: flex-start;
}
.exm-card-link:hover { opacity: 0.65; }

/* Context band */
.exm-context-band { padding: 72px 0; }

.exm-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.exm-context-col {
  padding-right: 48px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.1);
}
.exm-context-col + .exm-context-col { padding-left: 48px; }
.exm-context-col:last-child { border-right: none; padding-right: 0; }

.exm-context-q {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4BA96;
  margin-bottom: 16px;
}

.exm-context-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 16px;
}

.exm-context-body {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);   /* was 0.5 — too dim on #001438 */
  margin: 0;
}

/* FAQ */
.exm-faq-section { padding: 72px 0; }

.exm-faq-header { margin-bottom: 48px; }

.exm-faq-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin: 0 0 16px;
}

.exm-faq-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: #1a1a1a;
}
.exm-faq-heading em { font-style: italic; }

.exm-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid #E2DBD0;
}

.exm-faq-item {
  padding: 36px 0;
  border-bottom: 0.5px solid #E2DBD0;
}
.exm-faq-item:nth-child(odd) {
  padding-right: 60px;
  border-right: 0.5px solid #E2DBD0;
}
.exm-faq-item:nth-child(even) { padding-left: 60px; }

.exm-faq-q {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 14px;
  line-height: 1.3;
}

.exm-faq-a {
  font-size: 0.85rem;
  line-height: 1.75;
  color: #9C9C9C;
  margin: 0;
}

/* CTA */
.exm-cta-section { padding: 100px 0; }

.exm-cta-inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.exm-cta-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 20px;
}
.exm-cta-heading em { font-style: italic; }

.exm-cta-locations {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 36px;
}

.exm-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.exm-cta-secondary {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 150ms ease;
}
.exm-cta-secondary:hover { color: #fff; }

/* Examinations — mobile */
@media (max-width: 900px) {
  .exm-card { grid-template-columns: 1fr; }
  .exm-card-left { min-height: 140px; align-items: center; }
  .exm-card-mid { border-right: none; border-bottom: 0.5px solid #E2DBD0; }
  .exm-context-grid { grid-template-columns: 1fr; }
  .exm-context-col { border-right: none; border-bottom: 0.5px solid rgba(255,255,255,0.1); padding: 36px 0; }
  .exm-context-col + .exm-context-col { padding-left: 0; }
  .exm-context-col:last-child { border-bottom: none; }
}

@media (max-width: 767px) {
  .exm-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .exm-hero-right { border-left: none; border-top: 0.5px solid #E2DBD0; padding-left: 0; padding-top: 32px; }
  .exm-faq-grid { grid-template-columns: 1fr; }
  .exm-faq-item:nth-child(odd) { padding-right: 0; border-right: none; }
  .exm-faq-item:nth-child(even) { padding-left: 0; }
}

/* ===== 19. Page reveal animations ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 18. FAQ v2 — Cluster navigation + Accordion ===== */

.faq-v2-section { padding: 40px 0; }

.faq-v2-header { margin-bottom: 40px; }

.faq-v2-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin: 0 0 16px;
}

.faq-v2-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
  color: #1a1a1a;
}
.faq-v2-heading em { font-style: italic; }

.faq-v2-body {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0 48px;
  border-top: 0.5px solid #E2DBD0;
}

.faq-v2-clusters {
  display: flex;
  flex-direction: column;
  padding-right: 24px;
  border-right: 0.5px solid #E2DBD0;
}

.faq-v2-cluster-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-top: 0.5px solid #E2DBD0;
  padding: 16px 0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9C9C;
  text-align: left;
  transition: color 150ms ease;
  width: 100%;
}
.faq-v2-cluster-btn:first-child { border-top: none; }

.faq-v2-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D4BA96;
  flex-shrink: 0;
}
.faq-v2-dash {
  width: 12px;
  height: 0.5px;
  background: currentColor;
  flex-shrink: 0;
  display: block;
}
.faq-v2-cluster-btn.active { color: #1F519C; }
.faq-v2-cluster-btn.active .faq-v2-dot { display: block; }
.faq-v2-cluster-btn.active .faq-v2-dash { display: none; }

.faq-v2-panel { display: none; }
.faq-v2-panel.active { display: block; }

.faq-v2-item { border-top: 0.5px solid #E2DBD0; }
.faq-v2-item:first-child { border-top: none; }

.faq-v2-question-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.faq-v2-question-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  transition: color 150ms ease;
  line-height: 1.3;
}
.faq-v2-question-btn:hover .faq-v2-question-text,
.faq-v2-question-btn:focus-visible .faq-v2-question-text {
  color: #1F519C;
}

.faq-v2-icon {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 300;
  color: #D4BA96;
  flex-shrink: 0;
  transition: transform 350ms ease;
  line-height: 1;
  width: 20px;
  text-align: center;
}
.faq-v2-question-btn[aria-expanded="true"] .faq-v2-icon {
  transform: rotate(45deg);
}

.faq-v2-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 350ms ease;
}
.faq-v2-answer.open { max-height: 800px; }

.faq-v2-answer-inner {
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #6b6b6b;
  padding-bottom: 18px;
}
.faq-v2-answer-inner p { margin: 0 0 10px; }
.faq-v2-answer-inner p:last-child { margin: 0; }
.faq-v2-answer-inner ul { margin: 6px 0 10px; padding-left: 18px; }
.faq-v2-answer-inner li { margin-bottom: 4px; }

.faq-v2-cluster-hint {
  font-size: 11px;
  color: #9C9C9C;
  padding: 16px 0 4px;
  letter-spacing: 0.02em;
  border-top: 0.5px solid #E2DBD0;
  margin: 0;
}

@media (max-width: 767px) {
  .faq-v2-body {
    grid-template-columns: 1fr;
  }
  .faq-v2-clusters {
    flex-direction: row;
    border-right: none;
    border-bottom: 0.5px solid #E2DBD0;
    padding-right: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .faq-v2-clusters::-webkit-scrollbar { display: none; }
  .faq-v2-cluster-btn {
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: none;
    border-right: 0.5px solid #E2DBD0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 9px;
  }
  .faq-v2-cluster-btn:last-child { border-right: none; }
  .faq-v2-cluster-btn .faq-v2-dash { display: none !important; }
  .faq-v2-cluster-btn.active { border-bottom-color: #1F519C; }
  .faq-v2-question-text { font-size: 16px; }
  .faq-v2-cluster-hint { display: none; }
}

/* ===== 21b. Examinations page — supplemental rules ===== */

/* Hero text elements */
.exm-hero-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: #3a3a3a;
  margin: 0 0 20px;
  font-weight: 400;
}

.exm-hero-body {
  font-size: 0.875rem;
  line-height: 1.8;
  color: #6b6b6b;
  margin: 0 0 24px;
}

.exm-hero-locations {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9C9C9C;
}

.exm-dot { margin: 0 8px; }

/* Card label wrap (number + name in left col) */
.exm-card-label-wrap {
  position: relative;
  z-index: 1;
}

.exm-card-number {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a5f40;
  margin-bottom: 8px;
}

/* Section label ("What it covers", "Includes") */
.exm-card-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-bottom: 14px;
}

/* Card body text */
.exm-card-body {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #6b6b6b;
  margin: 0 0 28px;
}

/* Card rec text */
.exm-card-rec-body {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #6b6b6b;
  margin: 0;
  flex: 1;
}

/* Card includes list */
.exm-card-list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}

.exm-card-list li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #6b6b6b;
  padding: 4px 0;
  border-bottom: 0.5px solid #E2DBD0;
}

.exm-card-list li:last-child { border-bottom: none; }

/* Context section (dark navy) */
.exm-context-section {
  background-color: #1F3A5C;
  padding: 72px 0;
}

/* Context eyebrow */
.exm-context-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4BA96;
  margin-bottom: 16px;
}

/* CTA section (dark navy) */
.exm-cta-section { background-color: #1F3A5C; }

/* CTA eyebrow */
.exm-cta-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D4BA96;
  margin: 0 0 20px;
}

/* CTA subtitle */
.exm-cta-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 36px;
  line-height: 1.6;
}

/* CTA buttons */
.exm-cta-btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: #D4BA96;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 150ms ease;
}
.exm-cta-btn-primary:hover { opacity: 0.85; }

.exm-cta-btn-secondary {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 150ms ease;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
}
.exm-cta-btn-secondary:hover { color: #fff; border-bottom-color: #fff; }

/* ===== 22. Examination rows v2 ===== */

.exm-rows-section {
  padding: 0;
  border-top: 0.5px solid #E2DBD0;
}

.exm-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  border-bottom: 0.5px solid #E2DBD0;
  min-height: 260px;
}

/* Left image panel */
.exm-row-img {
  position: relative;
  background-color: #0E2847;
  background-size: cover;
  background-position: center;
  border-left: 2px solid #D4BA96;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 20px;
  overflow: hidden;
  transition: background-color 300ms ease;
}

.exm-row-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) contrast(1.1) saturate(0.7);
  transition: filter 300ms ease;
}

.exm-row:hover .exm-row-img::before {
  filter: brightness(0.55) contrast(1.1) saturate(0.7);
}

.exm-row-num {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,186,150,0.6);
  position: relative;
  z-index: 1;
}

.exm-row-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Middle column */
.exm-row-mid {
  border-left: 0.5px solid #E2DBD0;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

/* Right column */
.exm-row-right {
  border-left: 0.5px solid #E2DBD0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Labels */
.exm-row-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.exm-row-label--covers { color: #1F519C; }
.exm-row-label--rec    { color: #D4BA96; }
.exm-row-label--incl   { color: #9C9C9C; }

/* Body text — Outfit 300 */
.exm-row-text {
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  color: #6B7280;
  margin: 0 0 18px;
}
.exm-row-mid .exm-row-text:last-of-type { margin-bottom: 0; }

/* Hairline divider */
.exm-row-divider {
  height: 0.5px;
  background-color: #E2DBD0;
  margin: 18px 0;
}

/* Includes list */
.exm-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.exm-row-list li {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: #4A5568;
  padding: 7px 0 7px 14px;
  border-bottom: 0.5px solid #E2DBD0;
  position: relative;
}
.exm-row-list li:first-child { border-top: 0.5px solid #E2DBD0; }

.exm-row-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #D4BA96;
}

/* View examination link */
.exm-row-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1F519C;
  text-decoration: none;
  border-bottom: 0.5px solid #1F519C;
  padding-bottom: 2px;
  transition: opacity 150ms ease;
  align-self: flex-start;
}
.exm-row-link:hover { opacity: 0.6; }

/* Mobile */
@media (max-width: 900px) {
  .exm-row { grid-template-columns: 1fr; }
  .exm-row-img { min-height: 160px; border-left-width: 2px; border-bottom: none; }
  .exm-row-mid { border-left: none; border-top: 0.5px solid #E2DBD0; }
  .exm-row-right { border-left: none; border-top: 0.5px solid #E2DBD0; }
}

/* ===== 23. Examination cards v3 ===== */

/* Section wrapper */
.exm-cards-v3-section { padding: 0 0 80px; }

/* Grid — .5px gaps via bg colour trick */
.exm-cards-v3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #E2DBD0;
  gap: 0.5px;
}

/* Card base */
.exm-card-v3 {
  background-color: #F8F6F2;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Scroll reveal — initial hidden state */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Scroll reveal — revealed state */
.exm-card-v3.revealed          { opacity: 1; transform: translateY(0); }
.exm-card-v3:nth-child(1)      { transition-delay: 0.05s; }
.exm-card-v3:nth-child(2)      { transition-delay: 0.18s; }
.exm-card-v3:nth-child(3)      { transition-delay: 0.31s; }

@media (prefers-reduced-motion: reduce) {
  .exm-card-v3 { opacity: 1; transform: none; transition: none; }
}

/* A — Sand top bar: draws left to right */
.exm-card-v3::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: #D4BA96;
  z-index: 3;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.exm-card-v3:hover::before { width: 100%; }

/* Image panel */
.exm-card-v3-img {
  position: relative;
  height: 220px;
  background-color: #0E2847;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  flex-shrink: 0;
}

/* C — Shimmer sweep: diagonal white flash */
.exm-card-v3-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 2;
  pointer-events: none;
}
.exm-card-v3:hover .exm-card-v3-img::before { transform: translateX(100%); }

/* B — Photo: Ken Burns scale + brightness */
.exm-card-v3-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.48) contrast(1.08) saturate(0.65);
  transform: scale(1.0);
  transform-origin: center;
  transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.exm-card-v3:hover .exm-card-v3-photo {
  filter: brightness(0.62) contrast(1.1) saturate(0.9);
  transform: scale(1.06);
}

/* Exam number — top left */
.exm-card-v3-num {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,186,150,0.6);
  position: relative;
  z-index: 3;
}

/* Image footer row: name + duration badge */
.exm-card-v3-img-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 3;
}

/* Exam name overlay — Cormorant Garamond 300 */
.exm-card-v3-name {
  font-family: 'New York Heading', 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* D — Duration badge: slides in from right on hover */
.img-duration {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(212,186,150,0.6);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.exm-card-v3:hover .img-duration { opacity: 1; transform: translateX(0); }

/* Card body */
.exm-card-v3-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Tagline */
.exm-card-v3-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: #4A5568;
  margin: 0 0 16px;
}

/* Includes zone */
.exm-card-v3-incl { flex: 1; }

/* Section label */
.exm-card-v3-label {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-bottom: 6px;
}

/* E — Includes list: stagger slide on hover */
.exm-inc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.exm-inc-list li {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  color: #6B7280;
  padding: 6px 0 6px 12px;
  border-bottom: 0.5px solid #E2DBD0;
  position: relative;
  opacity: 0.7;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.exm-inc-list li:first-child { border-top: 0.5px solid #E2DBD0; }

/* Sand dot marker */
.exm-inc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #D4BA96;
}

/* E — nth-child stagger delays */
.exm-card-v3:hover .exm-inc-list li                { opacity: 1; transform: translateX(0); }
.exm-card-v3:hover .exm-inc-list li:nth-child(1)   { transition-delay: 40ms; }
.exm-card-v3:hover .exm-inc-list li:nth-child(2)   { transition-delay: 90ms; }
.exm-card-v3:hover .exm-inc-list li:nth-child(3)   { transition-delay: 140ms; }
.exm-card-v3:hover .exm-inc-list li:nth-child(4)   { transition-delay: 190ms; }
.exm-card-v3:hover .exm-inc-list li:nth-child(5)   { transition-delay: 240ms; }

/* CTA zone */
.exm-card-v3-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 0.5px solid #E2DBD0;
}

/* F — Primary button: fill slides from left */
.exm-btn-primary {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: #1F519C;
  text-decoration: none;
  padding: 14px 18px;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 10px;
}
.exm-btn-primary span { position: relative; z-index: 1; }
.exm-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #081A2E;
  transform: translateX(-101%);
  z-index: -1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.exm-btn-primary:hover::after { transform: translateX(0); }

/* Secondary ghost link */
.exm-btn-secondary {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #9C9C9C;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 4px 0;
  transition: color 150ms ease;
}
.exm-btn-secondary:hover { color: #1a1a1a; }

/* Mobile */
@media (max-width: 860px) {
  .exm-cards-v3-grid { grid-template-columns: 1fr; }
  .exm-card-v3:nth-child(1),
  .exm-card-v3:nth-child(2),
  .exm-card-v3:nth-child(3) { transition-delay: 0s; }
}

/* ===== 24. Examinations — colour & font corrections ===== */
/* Align to site dark-tone (#001438) and Inter body font */

/* Button: use site dark-tone instead of pale #1F519C */
.exm-btn-primary              { background-color: #001438; font-family: Inter, sans-serif; }
.exm-btn-primary::after       { background: #031526; }
.exm-btn-secondary            { font-family: Inter, sans-serif; }

/* Context band + CTA: use site dark-tone */
.exm-context-section          { background-color: #001438; }
.exm-cta-section              { background-color: #001438; }

/* Card typography: Inter replaces Outfit everywhere */
.exm-card-v3-num,
.exm-card-v3-tagline,
.exm-card-v3-label,
.exm-card-v3-incl .exm-card-v3-label,
.img-duration                 { font-family: Inter, sans-serif; }
.exm-inc-list li              { font-family: Inter, sans-serif; }

/* "WHAT IT COVERS" label: site brand-color, not pale blue */
.exm-row-label--covers        { color: #1f478d; }
.exm-card-v3-label            { color: #9C9C9C; }

/* "View examination" link: site brand-color */
.exm-row-link                 { color: #001438; border-bottom-color: #001438; }

/* Tagline: neutral dark, not blue-grey */
.exm-card-v3-tagline          { color: #3a3a3a; }
.exm-inc-list li              { color: #555; }

/* ===== 25. Examinations hero v2 ===== */

.exm-hero-v2 {
  padding: 80px 0 56px;
}

.exm-hero-v2-top { max-width: 700px; }

.exm-hero-v2-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.exm-hero-v2-line {
  display: inline-block;
  width: 32px;
  height: 0.5px;
  background-color: #9C9C9C;
  flex-shrink: 0;
}

.exm-hero-v2-eyebrow-text {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9C9C9C;
}

.exm-hero-v2-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4.2rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: 1.0;
  color: #001438;
  margin: 0;
  letter-spacing: -0.01em;
}
.exm-hero-v2-heading em {
  font-style: italic;
  color: #1f478d;
}

.exm-hero-v2-rule {
  height: 0.5px;
  background-color: #E2DBD0;
  margin: 48px 0 32px;
}

.exm-hero-v2-bullets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
}

.exm-hero-v2-bullet {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #9C9C9C;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exm-hero-v2-bullet::before {
  content: "•";
  color: #D4BA96;
  font-size: 10px;
}

.exm-hero-v2-bullet + .exm-hero-v2-bullet {
  margin-left: 28px;
}

@media (max-width: 767px) {
  .exm-hero-v2            { padding: 48px 0 36px; }
  .exm-hero-v2-bullet + .exm-hero-v2-bullet { margin-left: 16px; }
}

/* ===== 26. Examinations — footer divider ===== */

.exm-footer-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0) 100%
  );
  background-color: #001438;
}

/* ===== 27. Examinations hero v3 (2-col split, shared rule) ===== */

.exm-hero-v3 {
  padding: 72px 0 0;
  position: relative;
  border-bottom: 0.5px solid #E2DBD0;
}

.exm-hero-v3::after {
  content: '';
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 38vw;
  max-width: 520px;
  aspect-ratio: 1 / 1.3;
  background-image: url('../images/Anatomy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}

/*
  4-row grid:
  row 1: [left-top]  [right-top]    <- content
  row 2: [full-width rule]
  row 3: [bullets]   [cta-row]      <- bottom strip
*/
.exm-hero-v3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  position: relative;
  z-index: 1;
}

.exm-hero-v3-left-top {
  padding: 0 56px 40px 0;
  border-right: 0.5px solid #E2DBD0;
}

.exm-hero-v3-right-top {
  padding: 0 0 40px 56px;
}

.exm-hero-v3-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-bottom: 28px;
}
.exm-hero-v3-rule {
  display: inline-block;
  width: 28px;
  height: 0.5px;
  background-color: #D4BA96;
  flex-shrink: 0;
}

.exm-hero-v3-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 7.5vw, 7rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: #001438;
  margin: 0;
}
.exm-hero-v3-heading em {
  font-style: italic;
  color: #1f478d;
  display: block;
}

.exm-hero-v3-intro {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1a1a;
  margin: 0 0 20px;
}
.exm-hero-v3-intro strong {
  font-weight: 500;
  font-style: italic;
  color: #1f478d;
}
.exm-hero-v3-body {
  font-family: Inter, sans-serif;
  font-size: 0.825rem;
  font-weight: 300;
  line-height: 1.8;
  color: #6b6b6b;
  margin: 0;
}

/* Single shared rule across both columns — guaranteed alignment */
.exm-hero-v3-full-rule {
  grid-column: 1 / -1;
  height: 0.5px;
  background-color: #E2DBD0;
}

.exm-hero-v3-bullets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  padding: 28px 56px 52px 0;
  border-right: 0.5px solid #E2DBD0;
}
.exm-hero-v3-bullet {
  font-family: Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  color: #9C9C9C;
  display: flex;
  align-items: center;
  gap: 7px;
}
.exm-hero-v3-bullet::before {
  content: "\2022";
  color: #D4BA96;
  font-size: 9px;
}
.exm-hero-v3-bullet + .exm-hero-v3-bullet { margin-left: 22px; }

.exm-hero-v3-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 52px 56px;
  flex-wrap: wrap;
}
.exm-hero-v3-btn {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: #001438;
  text-decoration: none;
  padding: 13px 22px;
  display: inline-block;
  white-space: nowrap;
  transition: background-color 200ms ease;
}
.exm-hero-v3-btn:hover { background-color: #1f478d; }

.exm-hero-v3-locations {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9C9C;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .exm-hero-v3-grid      { grid-template-columns: 1fr; grid-template-rows: auto; }
  .exm-hero-v3-left-top  { border-right: none; padding: 0 0 32px; }
  .exm-hero-v3-right-top { padding: 32px 0; border-top: 0.5px solid #E2DBD0; }
  .exm-hero-v3-full-rule { display: none; }
  .exm-hero-v3-bullets   { border-right: none; padding: 28px 0 32px; border-top: 0.5px solid #E2DBD0; }
  .exm-hero-v3-cta-row   { padding: 28px 0 48px; border-top: 0.5px solid #E2DBD0; }
  .exm-hero-v3::after    { display: none; }
}

/* ===== 28. Anatomy sketch backgrounds ===== */

.exm-faq-section {
  position: relative;
  overflow: hidden;
}
.exm-faq-section::before {
  content: '';
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  width: 32vw;
  max-width: 380px;
  aspect-ratio: 1 / 1.3;
  background-image: url('../images/Anatomy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.exm-faq-section > * { position: relative; z-index: 1; }

.exm-context-section {
  position: relative;
  overflow: hidden;
}
.exm-context-section::before {
  content: '';
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 28vw;
  max-width: 340px;
  aspect-ratio: 1 / 1.3;
  background-image: url('../images/Anatomy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  filter: invert(1);
}
.exm-context-section > * { position: relative; z-index: 1; }

/* ===== 29. Readability — increase font sizes ===== */

/* Cards */
.exm-card-v3-tagline  { font-size: 13.5px; line-height: 1.7; }
.exm-card-v3-label    { font-size: 10px; }
.exm-inc-list li      { font-size: 12.5px; line-height: 1.55; }
.exm-btn-primary      { font-size: 11px; }
.exm-btn-secondary    { font-size: 11.5px; }

/* FAQ */
.exm-faq-eyebrow      { font-size: 11px; }
.exm-faq-heading      { font-size: clamp(2.2rem, 4vw, 3rem); }
.exm-faq-q            { font-size: 1.15rem; line-height: 1.35; }
.exm-faq-a            { font-size: 0.9rem; line-height: 1.8; color: #555; }

/* ===== 31. Booking page — bk-* ===== */

.bk-hero {
  background: #F8F6F2;
  padding: 48px 0 40px;
  position: relative;
  overflow: hidden;
}

.bk-arcs {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
  z-index: 0;
}

#hero.in .bk-arcs { opacity: 1; }

.bk-hero > .container---main { position: relative; z-index: 1; }

.bk-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-bottom: 18px;
}

.bk-eyebrow-line {
  display: block;
  width: 0;
  height: 0.5px;
  background: #D4BA96;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  flex-shrink: 0;
}

#hero.in .bk-eyebrow-line { width: 20px; }

.bk-hero-title {
  font-family: 'New York Heading', 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  color: #0E2847;
  margin: 0 0 20px;
}

.bk-hero-title .t-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.bk-hero-title .t-line-inner {
  display: block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.bk-hero-title .t-line:last-child .t-line-inner { transition-delay: 0.28s; }

#hero.in .bk-hero-title .t-line-inner { transform: translateY(0); }

.bk-hero-title em {
  color: #1F519C;
  font-style: italic;
}

.bk-hero-sub {
  font-size: 13px;
  font-weight: 300;
  color: #9C9C9C;
  line-height: 1.6;
  margin: 0 0 28px;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
  white-space: nowrap;
}

#hero.in .bk-hero-sub { opacity: 1; }

.bk-stats-strip {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 0.5px solid #E2DBD0;
}

.bk-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 300;
  color: #9C9C9C;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#hero.in .bk-stat:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
#hero.in .bk-stat:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
#hero.in .bk-stat:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }

.bk-stat-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D4BA96;
  flex-shrink: 0;
}

/* Body */
.bk-body {
  border-top: 0.5px solid #E2DBD0;
  background: #F8F6F2;
}

.bk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bk-left {
  border-right: 0.5px solid #E2DBD0;
  display: flex;
  flex-direction: column;
}

.bk-right {
  padding: 56px 0 56px 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

#formPanel.in { opacity: 1; transform: translateY(0); }

/* Image panel */
.bk-img-panel {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #0E2847;
  flex-shrink: 0;
}

.bk-img-panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.52) contrast(1.05) saturate(0.75);
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
}

.bk-img-panel.loaded .bk-img-panel-photo { transform: scale(1.0); }
.bk-img-panel:hover .bk-img-panel-photo { filter: brightness(0.6) contrast(1.05) saturate(0.85); }

.bk-img-panel-caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0);
  transition: color 0.6s ease 0.8s;
  z-index: 1;
}

.bk-img-panel.loaded .bk-img-panel-caption { color: rgba(255, 255, 255, 0.4); }

/* Testimonials */
.bk-testi-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bk-testi {
  display: flex;
  padding: 24px 20px;
  border-bottom: 0.5px solid #E2DBD0;
  background: transparent;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease;
  cursor: default;
}

.bk-testi:hover { background: #F2EDE4; }

#testiStack.in .bk-testi { opacity: 1; transform: translateX(0); }
#testiStack.in .bk-testi:nth-child(2) { transition-delay: 0.15s; }
#testiStack.in .bk-testi:nth-child(3) { transition-delay: 0.30s; }

.bk-testi-accent {
  width: 2px;
  background: #D4BA96;
  flex-shrink: 0;
  margin-right: 16px;
  align-self: stretch;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#testiStack.in .bk-testi:nth-child(1) .bk-testi-accent { transform: scaleY(1); transition-delay: 0.20s; }
#testiStack.in .bk-testi:nth-child(2) .bk-testi-accent { transform: scaleY(1); transition-delay: 0.35s; }
#testiStack.in .bk-testi:nth-child(3) .bk-testi-accent { transform: scaleY(1); transition-delay: 0.50s; }

.bk-testi-content { flex: 1; min-width: 0; }

.bk-testi-quote-mark {
  font-family: 'New York Heading', 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: #D4BA96;
  opacity: 0.6;
  line-height: 0.7;
  margin-bottom: 8px;
  display: block;
}

.bk-testi-quote {
  font-family: 'New York Heading', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: #0E2847;
  margin: 0 0 10px;
}

.bk-testi-name {
  font-size: 11px;
  font-weight: 500;
  color: #0E2847;
}

.bk-testi-role {
  font-size: 11px;
  font-weight: 300;
  color: #9C9C9C;
  margin-top: 2px;
}

/* Form */
.bk-form-title {
  font-family: 'New York Heading', 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 22px;
  color: #0E2847;
  margin: 0 0 6px;
}

.bk-form-sub {
  font-size: 13px;
  font-weight: 300;
  color: #9C9C9C;
  margin: 0 0 28px;
  line-height: 1.6;
}

.bk-form > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#formPanel.in .bk-form > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.15s; }
#formPanel.in .bk-form > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.22s; }
#formPanel.in .bk-form > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.29s; }
#formPanel.in .bk-form > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.36s; }
#formPanel.in .bk-form > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.43s; }
#formPanel.in .bk-form > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.50s; }

.bk-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.bk-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.bk-field-row .bk-field-group { margin-bottom: 0; }

.bk-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9C9C;
  display: block;
}

.bk-input {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #0C1620 !important;
  background: #fff !important;
  border: 0.5px solid #E2DBD0 !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.bk-input:hover:not(:focus) { border-color: #9C9C9C !important; }

.bk-input:focus {
  border-color: #1F519C !important;
  box-shadow: 0 0 0 3px rgba(31, 81, 156, 0.07) !important;
}

.bk-textarea {
  resize: vertical;
  min-height: 100px;
}

.bk-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  color: #9C9C9C;
  margin-bottom: 20px;
}

.bk-privacy input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border: 0.5px solid #E2DBD0;
  accent-color: #1F519C;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.bk-privacy a { color: #1F519C; text-decoration: none; }
.bk-privacy a:hover { text-decoration: underline; }

.btn-submit {
  width: 100%;
  background: #1F519C;
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.1s ease;
  display: block;
  text-align: center;
}

.btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0E2847;
  transform: translateX(-101%);
  z-index: -1;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-submit:hover::after { transform: translateX(0); }
.btn-submit:active { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-submit span {
  position: relative;
  z-index: 1;
}

.bk-trust {
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #9C9C9C;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Contact strip */
.bk-contact-strip {
  background: #0E2847;
  padding: 24px 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#contactStrip.in { opacity: 1; transform: translateY(0); }

.bk-contact-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.bk-contact-item {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bk-contact-item:hover { color: rgba(255, 255, 255, 0.85); }

/* Mobile */
@media (max-width: 768px) {
  .bk-hero { padding: 48px 0 40px; }
  .bk-two-col { grid-template-columns: 1fr; }
  .bk-left { border-right: none; border-bottom: 0.5px solid #E2DBD0; }
  .bk-right { padding: 40px 0; }
  .bk-field-row { grid-template-columns: 1fr; }
  .bk-contact-items { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bk-arcs { display: none; }
  .bk-stats-strip { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-hero-title .t-line-inner { transform: none; transition: none; }
  .bk-eyebrow-line { width: 20px; transition: none; }
  .bk-hero-sub,
  .bk-stat,
  .bk-arcs,
  .bk-testi,
  .bk-right,
  .bk-contact-strip,
  .bk-form > * { opacity: 1; transform: none; transition: none; }
  .bk-testi-accent { transform: scaleY(1); transition: none; }
  .bk-img-panel-photo { transform: scale(1); transition: none; }
  .bk-img-panel-caption { color: rgba(255, 255, 255, 0.4); transition: none; }
}

/* ===== 30. Examination cards — image treatment ===== */

/* 4:3 crop instead of fixed height */
.exm-card-v3-img {
  height: auto !important;
  aspect-ratio: 4 / 3;
}

/* Cool-blue shadow grade overlay (sits above photo, below text) */
.exm-card-v3-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 56, 0.18);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .exm-card-v3-img::after { transition: none; }
}

/* ===== 32. Booking page — font family + size alignment with site ===== */

/* Headings → site display serif */
.bk-hero-title            { font-family: var(--serif-font-large); font-size: clamp(40px, 5.5vw, 64px); }
.bk-hero-title em         { font-family: var(--serif-font-large); font-style: italic; color: #1F519C; }
.bk-form-title            { font-family: var(--serif-font-large); font-size: 32px; }

/* Testimonial quotes → site small serif */
.bk-testi-quote           { font-family: var(--serif-font-small); font-size: 17px; line-height: 1.65; }
.bk-testi-quote-mark      { font-family: var(--serif-font-large); font-size: 44px; }

/* Body copy → Inter (site sans) */
.bk-hero-sub              { font-family: var(--sans-font); font-size: 16px; }
.bk-testi-name            { font-family: var(--sans-font); font-size: 14px; }
.bk-testi-role            { font-family: var(--sans-font); font-size: 13px; }
.bk-form-sub              { font-family: var(--sans-font); font-size: 15px; }
.bk-label                 { font-family: var(--sans-font); font-size: 12px; }
.bk-input                 { font-family: var(--sans-font) !important; font-size: 15px !important; }
.btn-submit               { font-family: var(--sans-font); font-size: 13px; }
.bk-trust                 { font-family: var(--sans-font); font-size: 12px; }
.bk-privacy               { font-family: var(--sans-font); font-size: 13px; }
.bk-hero-eyebrow          { font-family: var(--sans-font); font-size: 12px; }
/* ----- 33. Home page: 4-column screenings + Examinations stack -----
   The "Our Screenings" section on the home page includes a 4th column
   with the three Examinations items (Orthopedic, Gynecological,
   Psychiatry). Each item is a horizontal mini-card with image + name,
   stacked vertically so the column fills the same height as the 3
   big screening cards. */

/* 4-column grid for the Our Screenings section. */
.icon-box-list.services {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* The 4th-column card stretches to match the screening cards' height. */
.exam-column-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.exam-column-card .exam-column-inner {
  background: var(--white, #ffffff);
  border-radius: 12px;
  padding: 24px 20px;
  border: 1px solid rgba(0, 20, 56, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.exam-column-card .exam-column-head {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 20, 56, 0.08);
}
.exam-column-card .exam-column-head .exam-column-title {
  margin: 0 0 6px 0;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--dark-tone, #001438);
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
}
.exam-column-card .exam-column-head .ingress.service-card {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--dark-tone, #001438);
  opacity: 0.6;
}

/* The 3 exam items fill the remaining height evenly. */
.exam-column-card .exam-column-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exam-column-card .exam-stack-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 14px;
  background: var(--warm-tone, #f4eee5);
  border-radius: 10px;
  text-decoration: none;
  color: var(--dark-tone, #001438);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 96px;
}
.exam-column-card .exam-stack-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 20, 56, 0.08);
}
.exam-column-card .exam-stack-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.exam-column-card .exam-stack-text {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
}

/* Tablet: drop to 2 columns. */
@media (max-width: 991px) {
  .icon-box-list.services {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone: single column. */
@media (max-width: 600px) {
  .icon-box-list.services {
    grid-template-columns: 1fr !important;
  }
}
/* ----- 34. Experience page — center process-section text + shrink image -----
   Each of the 3 "Your visit / The Environment / Personal Care"
   sections uses .halves with .process-text-grid on the left and a
   .rounded-image.square-image on the right. The image was dominating
   the layout; center the text and constrain the image so the two
   sides feel balanced. */
.halves:has(> .half-box .process-text-grid) {
  align-items: center;
}
.process-text-grid {
  text-align: center !important;
  margin: 0 auto;
  max-width: 600px;
}
.process-text-grid .max-width-85 {
  margin-left: auto !important;
  margin-right: auto !important;
}
.halves:has(.process-text-grid) > .half-box.right > .rounded-image.square-image,
.halves:has(.process-text-grid) > .half-box.right > img {
  max-width: 460px !important;
  max-height: 460px !important;
  width: 100%;
  height: auto;
  margin: 0 auto !important;
  display: block;
  object-fit: cover;
}

/* ----- 35. Preventive-Healthcare page — bump small fonts for readability -----
   Several body/caption sizes on the preventive-healthcare page were
   under ~0.8rem which is hard to read. Bumping the worst offenders
   to comfortable reading sizes while keeping the editorial feel. */
.stakes-stat-body  { font-size: 0.98rem !important; line-height: 1.65 !important; }
.stakes-stat-label { font-size: 0.95rem !important; line-height: 1.4 !important; }
.stakes-stat-cite  { font-size: 0.78rem !important; line-height: 1.55 !important; }

.facts-body        { font-size: 1rem !important; line-height: 1.7 !important; }
.facts-stat-label  { font-size: 1rem !important; line-height: 1.45 !important; }

.cancer-detection-label { font-size: 0.85rem !important; }
.cancer-advantage       { font-size: 0.95rem !important; }
.cancer-card-name       { font-size: 1.15rem !important; }

.testimonials-v2-eyebrow { font-size: 0.85rem !important; }
.testimonials-v2-role    { font-size: 0.9rem !important; }
.testimonials-v2-quote   { font-size: 1.2rem !important; line-height: 1.55 !important; }

.faq-v2-eyebrow        { font-size: 0.85rem !important; }
.faq-v2-cluster-hint   { font-size: 0.9rem !important; }
.faq-v2-answer         { font-size: 1rem !important; line-height: 1.7 !important; }

.programme-name        { font-size: 0.92rem !important; }
.programme-caption     { font-size: 0.95rem !important; line-height: 1.55 !important; }

/* Inline-style overrides used on the cancer-section description */
.cancer-section p[style*="font-size:.9rem"],
.cancer-section p[style*="font-size: .9rem"] {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
.cancer-section .small-text { font-size: 0.82rem !important; }

/* ============================================
   36. HOME PAGE — Cinematic MRI hero
   Full-bleed photograph of the EH-branded MRI on
   deep navy, with editorial italic tagline + logo
   wordmark. Replaces the page-title editorial hero.
   ============================================ */
.section.hero-cinematic {
  position: relative;
  min-height: 100vh;
  /* Cap height so it doesn't dwarf taller monitors */
  max-height: 920px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--dark-tone, #001438);
  /* Clear the 108px fixed navbar (beat .section.no-padding's specificity) */
  padding-top: 108px !important;
}
.hero-cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cinematic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center left;
  display: block;
}
/* If hero-mri.jpg is missing, hide the broken-image element so the
   navy background + gradient overlay + tagline still read as intended */
.hero-cinematic-img.hero-cinematic-missing {
  display: none;
}
/* When no image is shown, swap the right-fading overlay for a
   deep-navy gradient pattern so the section doesn't look empty */
.hero-cinematic:has(.hero-cinematic-missing) {
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%,
      rgba(20, 60, 110, 0.55) 0%,
      transparent 70%),
    linear-gradient(135deg,
      rgba(0, 20, 56, 1) 0%,
      rgba(10, 42, 80, 1) 50%,
      rgba(5, 24, 50, 1) 100%);
}
.hero-cinematic:has(.hero-cinematic-missing) .hero-cinematic-overlay {
  background: none;
}
/* Gradient wash — fades the right side to deeper navy for type contrast */
.hero-cinematic-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 20, 56, 0.10) 0%,
      rgba(0, 20, 56, 0.18) 38%,
      rgba(0, 20, 56, 0.62) 62%,
      rgba(0, 20, 56, 0.86) 100%),
    linear-gradient(180deg,
      rgba(0, 20, 56, 0.20) 0%,
      rgba(0, 20, 56, 0.00) 22%,
      rgba(0, 20, 56, 0.00) 78%,
      rgba(0, 20, 56, 0.35) 100%);
  pointer-events: none;
}
.hero-cinematic-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 32px;
  padding-bottom: 80px;
}

/* Right-aligned tagline block */
.hero-cinematic-text {
  max-width: 560px;
  text-align: right;
  color: #ffffff;
}
.hero-cinematic-tagline {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  color: #ffffff;
}
.hero-cinematic-tagline em {
  font-style: italic;
  display: block;
}
.hero-cinematic-sub {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);   /* was 0.72 — too dim on #001438 */
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}
.hero-cinematic-cta {
  display: inline-flex;
  gap: 12px;
  justify-content: flex-end;
}
.hero-cinematic-cta .button {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
/* White-outline variant of the secondary CTA on dark hero */
.hero-cinematic-cta .button.bg-white-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.hero-cinematic-cta .button.bg-white-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991px) {
  .hero-cinematic { min-height: 80vh; max-height: 760px; }
  .hero-cinematic-img { object-position: center; }
  .hero-cinematic-overlay {
    background:
      linear-gradient(180deg,
        rgba(0, 20, 56, 0.10) 0%,
        rgba(0, 20, 56, 0.42) 48%,
        rgba(0, 20, 56, 0.88) 100%);
  }
  .hero-cinematic-content { justify-content: center; }
  .hero-cinematic-text { max-width: 100%; text-align: center; }
  .hero-cinematic-cta { justify-content: center; }
  .hero-cinematic-tagline em { display: inline; }
  .hero-cinematic-tagline br { display: none; }
}
@media (max-width: 600px) {
  .hero-cinematic { min-height: 72vh; padding-top: 88px; }
  .hero-cinematic-content { padding-bottom: 56px; }
  .hero-cinematic-tagline { font-size: 1.7rem; }
  .hero-cinematic-sub { font-size: 0.95rem; }
  .hero-cinematic-cta { flex-direction: column; width: 100%; }
  .hero-cinematic-cta .button { width: 100%; text-align: center; }
}

/* ============================================
   36b. HOME PAGE — Four pillars showcase
   Uses the original 12.png 4-quadrant image (moved
   here from the hero) paired with the four pillars
   of the Executive Health approach.
   ============================================ */
.section.pillars-section {
  padding: 96px 0 104px;
  background: var(--warm-tone, #f4eee5);
  border-top: 1px solid rgba(0, 20, 56, 0.06);
  border-bottom: 1px solid rgba(0, 20, 56, 0.06);
}
.pillars-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.pillars-image {
  width: 100%;
  max-width: 520px;
  justify-self: start;
}
.pillars-image img {
  width: 100%;
  height: auto;
  display: block;
}
.pillars-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 16px;
}
.pillars-heading {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--dark-tone, #001438);
  margin: 0 0 18px;
}
.pillars-heading em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
  display: block;
}
.pillars-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(0, 20, 56, 0.72);
  margin: 0 0 32px;
  max-width: 480px;
}
.pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 20, 56, 0.12);
}
.pillars-item {
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 20, 56, 0.12);
}

.pillars-item-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pillars-item-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--dark-tone, #001438);
  line-height: 1.3;
}

.pillars-item-body {
  font-size: 0.93rem;
  line-height: 1.65;
  color: rgba(0, 20, 56, 0.68);
}

@media (max-width: 991px) {
  .section.pillars-section { padding: 72px 0 80px; }
  .pillars-grid { grid-template-columns: 1fr; gap: 48px; }
  .pillars-image { max-width: 460px; justify-self: center; }
}
@media (max-width: 600px) {
  .section.pillars-section { padding: 56px 0 64px; }
  .pillars-heading { font-size: 1.75rem; }
}

/* ============================================
   37. HOME PAGE — Locations v2 (editorial)
   Replaces the old "With clinics in Stockholm..."
   navy section with eyebrow + italic-accent H2 +
   3 numbered location cards. Europe-map background
   restored from original design language.
   ============================================ */
.section.locations-v2 {
  padding: 112px 0 104px;
  position: relative;
  background-color: #001438 !important;   /* overrides .bg-dark-tone (#001438) */
  background-image: url('../images/Europe_New_White.png');
  background-position: 50%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Dark wash on top of the map — tinted with the new #001438 base and
   pulled back so the Europe map watermark reads more clearly. */
.section.locations-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 20, 56, 0.55) 0%,
    rgba(0, 20, 56, 0.35) 40%,
    rgba(0, 20, 56, 0.50) 100%);
  pointer-events: none;
  z-index: 1;
}
.section.locations-v2 > * { position: relative; z-index: 2; }
/* hero-bottom-border holds the centered scroll button */
.section.locations-v2 .hero-bottom-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 3;
}
.section.locations-v2 .scroll-button.locations-v2-scroll {
  position: absolute;
  left: 50%;
  top: -2.5rem;
  right: auto;
  transform: translateX(-50%);
}
.locations-v2-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.locations-v2-header { color: #ffffff; }
.locations-v2-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 18px;
}
.locations-v2-heading {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.locations-v2-heading em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
  display: block;
}
.locations-v2-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
  max-width: 520px;
}
.locations-v2-body .inline-link {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(200, 168, 106, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}
.locations-v2-body .inline-link:hover {
  text-decoration-color: var(--mid-warm, #c8a86a);
}

.locations-v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.locations-v2-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transition: padding-left 0.3s ease;
}
.locations-v2-card:hover { padding-left: 8px; }
.locations-v2-city {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  grid-column: 1;
  grid-row: 1;
}
.locations-v2-country {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  justify-self: end;
  text-align: right;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.locations-v2-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.locations-v2-desc {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 6px;
  max-width: 640px;
}

/* Scroll-reveal for location rows */
.locations-v2-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease,
              transform 0.7s ease,
              padding-left 0.3s ease;
}
.locations-v2-card.loc-revealed {
  opacity: 1;
  transform: translateY(0);
}
.locations-v2-card:nth-child(1) { transition-delay: 0s; }
.locations-v2-card:nth-child(2) { transition-delay: 0.15s; }
.locations-v2-card:nth-child(3) { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .locations-v2-card {
    opacity: 1;
    transform: none;
    transition: padding-left 0.3s ease;
  }
}

@media (max-width: 991px) {
  .section.locations-v2 { padding: 72px 0 80px; }
  .locations-v2-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
  .section.locations-v2 { padding: 56px 0 64px; }
  .locations-v2-heading { font-size: 1.85rem; }
  .locations-v2-body { font-size: 0.98rem; }
  .locations-v2-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 18px;
    padding: 22px 0;
  }
  .locations-v2-meta { font-size: 0.85rem; }
  .locations-v2-desc { font-size: 0.84rem; }
}

/* ============================================
   38. HOME PAGE — Newsletter v2 (editorial)
   Replaces the cramped .section-8 form with a
   single-line subscribe row + editorial heading.
   ============================================ */
.section.newsletter-v2 {
  padding: 64px 0 72px;
  background: var(--warm-tone, #f4eee5);
  border-top: 1px solid rgba(0, 20, 56, 0.08);
  border-bottom: 1px solid rgba(0, 20, 56, 0.08);
}
.newsletter-v2-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.newsletter-v2-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 14px;
}
.newsletter-v2-heading {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.18;
  color: var(--dark-tone, #001438);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.newsletter-v2-heading em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
}
.newsletter-v2-body {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(0, 20, 56, 0.7);
  margin: 0;
  max-width: 440px;
}
.newsletter-v2-form { width: 100%; }
.newsletter-v2-form-inner { margin: 0; }
.newsletter-v2-field-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 10px;
  align-items: stretch;
}
.newsletter-v2-input {
  height: 52px;
  padding: 0 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 56, 0.14);
  border-radius: 8px;
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: var(--dark-tone, #001438);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
  width: 100%;
}
.newsletter-v2-input::placeholder { color: rgba(0, 20, 56, 0.4); }
.newsletter-v2-input:focus {
  outline: none;
  border-color: var(--dark-tone, #001438);
  box-shadow: 0 0 0 3px rgba(0, 20, 56, 0.08);
}
.newsletter-v2-submit {
  height: 52px;
  padding: 0 28px;
  background: var(--dark-tone, #001438);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
  margin: 0;
  white-space: nowrap;
}
.newsletter-v2-submit:hover {
  background: #0a2d57;
  transform: translateY(-1px);
}
.newsletter-v2-disclaimer {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(0, 20, 56, 0.55);
  margin: 14px 0 0;
}
.newsletter-v2-disclaimer a {
  color: rgba(0, 20, 56, 0.75);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .section.newsletter-v2 { padding: 52px 0 56px; }
  .newsletter-v2-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .newsletter-v2-field-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .newsletter-v2-submit { width: 100%; }
}

/* ============================================
   39. PREMIUM SCREENING PAGE — makeover
   Cinematic hero (with eyebrow), specs strip,
   editorial "What's included" layout. Reuses the
   .hero-cinematic system from the home page.
   ============================================ */

/* Hero eyebrow + Premium-specific overrides */
.hero-cinematic-premium .hero-cinematic-content {
  /* Pull text up a touch so the long heading + sub doesn't bottom-crowd */
  align-items: center;
}
.hero-cinematic-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 22px;
  white-space: nowrap;
}
.hero-cinematic-eyebrow .tm-mark {
  font-size: 0.6rem;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  margin-right: 2px;
}
/* Tagline tone tweak — italic emphasis on second line */
.hero-cinematic-premium .hero-cinematic-tagline {
  font-style: normal;
}
.hero-cinematic-premium .hero-cinematic-tagline em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
}

@media (max-width: 991px) {
  .hero-cinematic-eyebrow { white-space: normal; text-align: center; }
}

/* Specs strip — 3 cards in a row, no card backgrounds (editorial dividers) */
.section.premium-specs {
  padding: 80px 0 64px;
  border-bottom: 1px solid rgba(0, 20, 56, 0.08);
}
.premium-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
.premium-spec-card {
  display: flex;
  flex-direction: column;
  padding-right: 28px;
  border-right: 1px solid rgba(0, 20, 56, 0.12);
}
.premium-spec-card:last-child { border-right: none; padding-right: 0; }
.premium-spec-num {
  font-family: var(--serif-font, 'Cormorant Garamond'), Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--dark-tone, #001438);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.premium-spec-num .premium-spec-unit {
  font-size: 0.55em;
  color: var(--mid-warm, #c8a86a);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: 0.2em;
}
.premium-spec-label {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 14px;
}
.premium-spec-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0, 20, 56, 0.72);
  margin: 0;
}

@media (max-width: 991px) {
  .section.premium-specs { padding: 56px 0 48px; }
  .premium-specs-grid { grid-template-columns: 1fr; gap: 32px; }
  .premium-spec-card { padding-right: 0; padding-bottom: 28px; border-right: none; border-bottom: 1px solid rgba(0, 20, 56, 0.12); }
  .premium-spec-card:last-child { border-bottom: none; padding-bottom: 0; }
}

/* "What's included" — editorial 2-column with sticky photo + intro on left,
   categorized list on the right */
.section.premium-includes {
  padding: 96px 0 104px;
}
.premium-includes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}
.premium-includes-image {
  position: relative;
}
/* No sticky positioning here — the image scrolls together with the
   intro + quote in the same column. Earlier `position: sticky; top:
   130px` caused the intro and testimonial to scroll behind the
   pinned image, looking like they overflowed into the picture.
   Also drop the framework's min-height: 80vh — that was stretching
   the wrapper way taller than the image, creating a huge gap
   between the picture and the testimonial below. */
.premium-includes-image .sticky-content {
  position: static !important;
  top: auto !important;
  min-height: 0 !important;
}
.premium-includes-image .sticky-content > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.premium-includes-intro {
  margin-top: 28px;
}
.premium-includes-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 16px;
}
.premium-includes-heading {
  font-family: var(--serif-font, 'Cormorant Garamond'), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--dark-tone, #001438);
  margin: 0 0 18px;
}
.premium-includes-heading em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
}
.premium-includes-body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(0, 20, 56, 0.72);
  margin: 0;
}
.premium-includes-text { min-width: 0; }

@media (max-width: 991px) {
  .section.premium-includes { padding: 72px 0 80px; }
  .premium-includes-grid { grid-template-columns: 1fr; gap: 48px; }
  .premium-includes-image .sticky-content { position: static; }
  .premium-includes-image .sticky-content > img { max-width: 520px; }
  .premium-includes-intro { margin-top: 24px; max-width: 600px; }
}
@media (max-width: 600px) {
  .section.premium-includes { padding: 56px 0 64px; }
}

/* Small testimonial card in the left column of "What's included" */
.premium-includes-quote {
  margin: 40px 0 0;
  padding: 0;
  max-width: 460px;
}
.premium-includes-quote-rule {
  width: 36px;
  height: 1px;
  background: var(--mid-warm, #c8a86a);
  margin-bottom: 22px;
}
.premium-includes-quote-text {
  font-family: var(--serif-font, 'Cormorant Garamond'), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--dark-tone, #001438);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}
.premium-includes-quote-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.premium-includes-quote-name {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark-tone, #001438);
  letter-spacing: 0.01em;
}
.premium-includes-quote-role {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  color: rgba(0, 20, 56, 0.6);
  letter-spacing: 0.04em;
}

@media (max-width: 991px) {
  .premium-includes-quote { margin-top: 32px; max-width: 600px; }
}
@media (max-width: 600px) {
  .premium-includes-quote-text { font-size: 1.05rem; }
}

/* Hero phone link — below the CTAs, lower-commitment alternate path */
.hero-cinematic-phone {
  margin-top: 22px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.hero-cinematic-phone a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-cinematic-phone a:hover { color: var(--mid-warm, #c8a86a); }
.hero-cinematic-phone strong {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero-cinematic-phone-icon {
  display: inline-block;
  margin-right: 4px;
  opacity: 0.7;
  filter: grayscale(1) brightness(1.4);
}

/* Premium hero — text aligned to the right, image takes the left half */
.hero-cinematic-premium .hero-cinematic-img {
  object-position: left center;
}

/* Specs inline CTA — discrete "speak to a specialist" path */
.premium-specs-cta {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 20, 56, 0.08);
  text-align: center;
}
.premium-specs-cta p {
  font-size: 0.95rem;
  color: rgba(0, 20, 56, 0.65);
  margin: 0;
  letter-spacing: 0.01em;
}
.premium-specs-cta a {
  color: var(--dark-tone, #001438);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 20, 56, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.25s ease, color 0.25s ease;
  margin-left: 4px;
}
.premium-specs-cta a:hover {
  color: var(--mid-warm, #c8a86a);
  border-color: var(--mid-warm, #c8a86a);
}

/* Final-CTA phone link */
.premium-final-phone {
  margin-top: 22px;
  font-size: 0.88rem;
  color: rgba(0, 20, 56, 0.6);
}
.premium-final-phone a {
  color: rgba(0, 20, 56, 0.72);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0, 20, 56, 0.15);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.premium-final-phone a:hover {
  color: var(--mid-warm, #c8a86a);
  border-color: var(--mid-warm, #c8a86a);
}
.premium-final-phone strong {
  color: var(--dark-tone, #001438);
  font-weight: 600;
}

@media (max-width: 991px) {
  .hero-cinematic-phone { text-align: center; margin-top: 18px; }
}

/* ============================================
   40. NAVBAR — Editorial restyle
   Slimmer, lighter typography, gold-underline hover,
   refined CTA button, subtle scroll-shrink. Keeps all
   the Webflow dropdown / mobile-menu functionality
   wired underneath.
   ============================================ */

/* Slim down the bar and refine surface. Fully opaque white so the
   hero's navy doesn't bleed through the bottom edge — previously
   rgba 0.96 created a thin light-blue strip at the navbar/hero
   boundary. */
.navbar-wrapper {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 20, 56, 0.08) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar-row {
  height: 88px !important;
  transition: height 0.3s ease;
}

/* Logo column: drop the heavy vertical divider, tighten width */
.nav-logo-wrapper {
  border-right: none !important;
  width: auto !important;
  padding-right: 2.5rem;
}
.nav-logo-link {
  height: 36px !important;
}
.nav-logo-link svg { transition: opacity 0.25s ease; }
.nav-logo-link:hover svg { opacity: 0.85; }

/* Refined typography on nav items — editorial sentence-case with
   subtle letter-spacing instead of the heavier tracking. */
.nav-link {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--dark-tone, #001438);
  position: relative !important;
}

/* Subtle gold-underline hover (replaces colour shift) */
.nav-link .dropdown-toggle {
  position: relative;
  padding: 6px 0 !important;
}
.nav-link .dropdown-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 28px; /* leave room for the chevron */
  bottom: 0;
  height: 1px;
  background: var(--mid-warm, #c8a86a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.nav-link:hover .dropdown-toggle::after,
.nav-link.w--current .dropdown-toggle::after {
  transform: scaleX(1);
}
.nav-link:hover .dropdown-toggle,
.nav-link.w--current .dropdown-toggle {
  color: var(--dark-tone, #001438);
}

/* Shrink the dropdown chevron */
.dropdown-toggle-icon {
  width: 10px !important;
  height: 10px !important;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.nav-link:hover .dropdown-toggle-icon {
  opacity: 0.9;
  transform: translateY(2px);
}

/* Refined CTA button — single-line, gentler hover */
.button.inside-right-navbar {
  padding: 12px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-radius: 6px !important;
  border: 1px solid var(--dark-tone, #001438) !important;
  background-color: var(--dark-tone, #001438) !important;
  color: #ffffff !important;
  white-space: nowrap;
  line-height: 1.2;
  /* Force vertical centering — framework .button rule sets
     align-self: flex-start which top-anchors the button inside
     .navbar-right-contents. Override to center it on the row. */
  align-self: center !important;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s ease;
}

/* Same fix for any other navbar-right items that might top-anchor */
.navbar-right-contents > * {
  align-self: center;
}

/* Wide dropdown: close the visual gap between the navbar bottom
   and the dropdown content WITHOUT breaking the hover bridge.

   The wrapper naturally positions at the bottom of the nav-link
   (~y=59 in the 88px navbar). Inside, .dropdown-wide had a 42px
   framework offset designed for the old 108px bar — leaving 13px
   of transparent page-background visible between the navbar and
   the dropdown.

   Don't move the wrapper (it provides the hover-continuity zone
   between the nav-link and the dropdown content). Just retune the
   inner offset: 88 - 59 = 29px so content visually starts flush
   with the navbar bottom, while the wrapper still covers the
   intermediate area for uninterrupted hover. */
.dropdown-wide-wrapper {
  left: 0 !important;
}
.dropdown-wide {
  top: 29px !important;
}
.navbar-wrapper.is-scrolled .dropdown-wide {
  top: 21px !important;
}
@media (max-width: 991px) {
  .dropdown-wide { top: 21px !important; }
  .navbar-wrapper.is-scrolled .dropdown-wide { top: 16px !important; }
}
.button.inside-right-navbar:hover {
  background-color: var(--mid-warm, #c8a86a) !important;
  border-color: var(--mid-warm, #c8a86a) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Language switcher — quieter */
.navbar-right-contents .w-dropdown-toggle {
  font-size: 0.82rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 20, 56, 0.65);
}
.navbar-right-contents .w-dropdown-toggle:hover {
  color: var(--dark-tone, #001438);
}

/* Nav links container — slightly tighter spacing */
.nav-links {
  grid-column-gap: 2.5rem !important;
}

/* Normalize the "About us" dropdown — it uses .secondary-nav-text
   which was rendering in caps; bring it in line with the other
   sentence-case nav items. */
.nav-link .secondary-nav-text {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
}
.nav-link .secondary-nav-text strong {
  font-weight: 500 !important;
}

/* Scroll-shrink state — added by JS once page has scrolled > 20px.
   The bar gets a touch shorter and the bottom shadow appears. */
.navbar-wrapper.is-scrolled {
  background-color: #ffffff !important;
  border-bottom-color: rgba(0, 20, 56, 0.1) !important;
  box-shadow: 0 2px 20px -6px rgba(0, 20, 56, 0.14);
}

@media (max-width: 991px) {
  .navbar-row { height: 72px !important; }
  .nav-logo-wrapper { padding-right: 0; }
  .nav-logo-link { height: 30px !important; }
  .button.inside-right-navbar { padding: 10px 16px !important; font-size: 0.82rem !important; }
}


/* ============================================
   41. SCREENINGS PAGE — FAQ heading restyle
   Editorial eyebrow + italic-accent heading +
   supporting paragraph. Keeps the existing
   accordion FAQ items below untouched.
   ============================================ */
.screenings-faq-section { padding: 96px 0 80px; }
.screenings-faq-heading { padding-right: 40px; }
.screenings-faq-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 16px;
}
.screenings-faq-heading .display-heading {
  margin: 0 0 20px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.1;
}
.screenings-faq-heading .display-heading em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
}
.screenings-faq-intro {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(0, 20, 56, 0.7);
  margin: 0;
  max-width: 360px;
}
.screenings-faq-intro a {
  color: var(--dark-tone, #001438);
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 20, 56, 0.3);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.screenings-faq-intro a:hover {
  color: var(--mid-warm, #c8a86a);
  border-color: var(--mid-warm, #c8a86a);
}

@media (max-width: 991px) {
  .screenings-faq-section { padding: 64px 0 56px; }
  .screenings-faq-heading { padding-right: 0; }
}

/* ============================================
   42. HOME HERO V5 — Porsche-style v3
   Full-scale MRI with text overlaid on top.
   Hero3.png (transparent, 2728x1536) renders edge-
   to-edge. "Longevity" title sits over the upper
   part of the image. Supporting text floats over
   the right side of the image (where the cut-out's
   empty space is).
   ============================================ */

.section.hero-porsche {
  position: relative;
  background: #ffffff !important;
  overflow: hidden;
  padding: 108px 0 32px !important;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Image stage — full width of the section */
.hero-porsche-imgstage {
  position: relative;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transform: translateY(60px);
  animation: heroPorscheImgIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.hero-porsche-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 78%, transparent 100%);
}

/* Side text — overlaid on the right side of the image where the
   cut-out has empty space */
.hero-porsche-side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;       /* anchor to the top of the section */
  justify-content: flex-end;
  padding-top: clamp(140px, 12vw, 180px);   /* clear the 88px navbar + breathing room */
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateX(40px);
  animation: heroPorscheSideIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s forwards;
}
.hero-porsche-side-inner {
  max-width: 720px;
  width: 48%;
  margin-top: 0;
  margin-right: clamp(8px, 1vw, 32px);    /* hug the right edge */
  pointer-events: auto;
}

/* Editorial eyebrow — serif italic gold, sits above a hairline rule */
.hero-porsche-eyebrow {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 20px;
}
.hero-porsche-rule {
  width: 72px;
  height: 1px;
  background: var(--mid-warm, #c8a86a);
  margin-bottom: 32px;
  opacity: 0.55;
}

/* Tagline — much larger serif now, matches the editorial weight of
   the original "Longevity" title. Mixed roman + italic for rhythm. */
.hero-porsche-tagline {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: 0.88;       /* tight — close the interline gap */
  letter-spacing: -0.018em;
  color: var(--dark-tone, #001438);
  margin: 0 0 10px;        /* closer to the sub line below */
}
/* "longevity" — the standalone display word, styled like the old
   standalone "Longevity" title that sat above the MRI. Italic
   serif gold, dramatically oversized vs the roman base. The
   margin-top is preserved (gap above stays as is); only the
   margin-bottom pulls the next line up. */
.hero-porsche-tagline em {
  font-style: italic;
  font-weight: 500;
  color: var(--mid-warm, #c8a86a);
  font-size: 2.2em;
  line-height: 0.85;
  letter-spacing: -0.025em;
  display: block;
  margin-top: -0.05em;     /* unchanged — gap above 'longevity' */
  margin-bottom: -0.22em;  /* tighter — pull next line up under 'longevity' */
}
.hero-porsche-sub {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: rgba(0, 20, 56, 0.62);
  margin: 0 0 16px;        /* closer to CTAs */
}
.hero-porsche-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-porsche-phone {
  margin-top: 10px;        /* closer to CTAs */
  font-size: 0.85rem;
  color: rgba(0, 20, 56, 0.55);
}
.hero-porsche-phone a {
  color: rgba(0, 20, 56, 0.7);
  text-decoration: none;
  transition: color 0.25s ease;
}
.hero-porsche-phone a:hover { color: var(--mid-warm, #c8a86a); }
.hero-porsche-phone strong {
  color: var(--dark-tone, #001438);
  font-weight: 600;
}

/* Animation keyframes */
@keyframes heroPorscheImgIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroPorscheSideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-porsche-imgstage,
  .hero-porsche-side {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .section.hero-porsche {
    padding: 96px 0 28px !important;
    min-height: auto;
  }
  .hero-porsche-side {
    position: relative;
    inset: auto;
    transform: translateY(20px);
    text-align: center;
    margin-top: 16px;
  }
  .hero-porsche-side-inner {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
  }
  .hero-porsche-rule { margin-left: auto; margin-right: auto; }
  @keyframes heroPorscheSideIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-porsche-cta { justify-content: center; }
}
@media (max-width: 600px) {
  .section.hero-porsche { padding: 88px 0 24px !important; }
  .hero-porsche-tagline { font-size: 1.7rem; }
}

/* ============================================
   42b. HOME HERO V7 — full-bleed MRI bore
   background with editorial overlay text.
   Replaces the .hero-porsche side-cutout layout
   per Jon's feedback. The bore portal sits in
   the lower half of the bg image; text overlays
   in the upper portion against clean navy.
   Per-element typography classes
   (.hero-porsche-eyebrow / -tagline / -sub /
   -cta / -phone) keep their existing serif
   styling — this block re-colors them for the
   dark navy backdrop and lays them out centered.
   ============================================ */

.section.hero-bore {
  position: relative;
  background-color: #0c2447;
  background-image: url('../images/hero-bore-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 220px 0 96px !important;  /* lowered text — pushes the block down from the navbar */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* Top-biased darken — stronger than before because the new bore image
   is brighter in the upper-middle (the bore body fills most of the
   frame), so the text needs extra contrast where it lands. */
.section.hero-bore::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(7, 22, 50, 0.6) 0%,
    rgba(7, 22, 50, 0.4) 35%,
    rgba(7, 22, 50, 0.15) 65%,
    rgba(7, 22, 50, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Centered overlay text block — sits in the upper portion of the bg.
   No parent-level animation — the per-element .reveal + IntersectionObserver
   pattern in each index.html staggers each child in. */
.hero-bore-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* ---- Text colour overrides for the dark navy backdrop ---- */
.hero-bore .hero-porsche-eyebrow {
  color: var(--mid-warm, #c8a86a);   /* gold — already, kept */
}
.hero-bore .hero-porsche-rule {
  background: var(--mid-warm, #c8a86a);
  opacity: 0.8;
  margin-left: auto;
  margin-right: auto;
}
.hero-bore .hero-porsche-tagline,
.hero-bore .hero-porsche-tagline * {
  color: #ffffff !important;
}
/* Restore the gold italic accent on <em> inside the tagline */
.hero-bore .hero-porsche-tagline em {
  color: var(--mid-warm, #c8a86a) !important;
}
.hero-bore .hero-porsche-sub {
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero-bore .hero-porsche-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Primary button reads as similar-navy on the hero bg — promote it to
   the warm gold accent so it pops as the dominant CTA. The secondary
   .button.bg-white already contrasts (white pill, dark text). */
.hero-bore .hero-porsche-cta .button:not(.bg-white) {
  background-color: var(--mid-warm, #c8a86a) !important;
  color: #0c2447 !important;
  border: 1px solid var(--mid-warm, #c8a86a) !important;
}
.hero-bore .hero-porsche-cta .button:not(.bg-white):hover {
  background-color: #d8be83 !important;
  border-color: #d8be83 !important;
}
.hero-bore .hero-porsche-phone {
  color: rgba(255, 255, 255, 0.6);
}
.hero-bore .hero-porsche-phone a {
  color: rgba(255, 255, 255, 0.72);
}
.hero-bore .hero-porsche-phone a:hover {
  color: var(--mid-warm, #c8a86a);
}
.hero-bore .hero-porsche-phone strong {
  color: #ffffff;
}

/* Tablet */
@media (max-width: 991px) {
  .section.hero-bore {
    min-height: 92vh;
    padding: 180px 0 72px !important;
    background-position: center bottom;
  }
}

/* Phone — bore image is wide; switch focus to center so the portal
   stays visible and the navy area below the text is preserved */
@media (max-width: 600px) {
  .section.hero-bore {
    min-height: 88vh;
    padding: 150px 0 56px !important;
    background-position: 50% 78%;
  }
  .hero-bore-inner .hero-porsche-tagline { font-size: 1.7rem; }
}

/* ============================================
   43. LOCATIONS PAGE — editorial makeover
   Centered editorial title with italic accent on
   "Locations" + 3 location cards in a single row,
   layered over the Europe map background.
   ============================================ */

.section.locations-hero {
  padding: 132px 0 96px !important;
}

/* Centered editorial heading block */
.locations-hero-text {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}
.locations-eyebrow {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 18px;
}
.locations-title {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--dark-tone, #001438);
  margin: 0 0 24px;
}
.locations-title em {
  font-style: italic;
  color: var(--mid-warm, #c8a86a);
  display: block;
}
.locations-intro {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(0, 20, 56, 0.72);
  margin: 0 auto;
  max-width: 720px;
}
.locations-intro .emphasize {
  color: var(--dark-tone, #001438);
  font-weight: 500;
}
.locations-intro .inline-link {
  color: var(--dark-tone, #001438);
  text-decoration: underline;
  text-decoration-color: rgba(200, 168, 106, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}
.locations-intro .inline-link:hover {
  text-decoration-color: var(--mid-warm, #c8a86a);
}

/* 3-up card grid — all in one row on desktop */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

/* Card */
.location-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 20, 56, 0.08);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease;
  box-shadow: 0 1px 2px rgba(0, 20, 56, 0.03);
}
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(0, 20, 56, 0.22);
  border-color: rgba(200, 168, 106, 0.35);
}
.location-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.location-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
/* Lund image is portrait; pull the crop up so the cathedral towers stay in frame */
#location-lund .location-card-image img {
  object-position: center 28%;
}
/* Stockholm Gamla Stan: anchor slightly above center so the buildings dominate */
#location-stockholm .location-card-image img {
  object-position: center 35%;
}
.location-card:hover .location-card-image img {
  transform: scale(1.04);
}

.location-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.location-card-country {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-warm, #c8a86a);
  margin-bottom: 10px;
}
.location-card-name {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--dark-tone, #001438);
  margin: 0 0 8px;
}
.location-card-meta {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(0, 20, 56, 0.6);
  margin: 0;
}
.location-card-rule {
  width: 40px;
  height: 1px;
  background: var(--mid-warm, #c8a86a);
  opacity: 0.5;
  margin: 22px 0;
}
.location-card-address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(0, 20, 56, 0.8);
  margin: 0 0 18px;
}
.location-card-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;   /* push to bottom of card */
}
.location-card-contact a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--dark-tone, #001438);
  font-weight: 500;
  transition: color 0.25s ease;
}
.location-card-contact a:last-child {
  color: rgba(0, 20, 56, 0.55);
  font-weight: 400;
  font-size: 0.85rem;
}
.location-card:hover .location-card-contact a {
  color: var(--mid-warm, #c8a86a);
}

@media (max-width: 991px) {
  .section.locations-hero { padding: 108px 0 72px !important; }
  .locations-hero-text { margin-bottom: 48px; }
  .locations-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .section.locations-hero { padding: 96px 0 56px !important; }
  .locations-title { font-size: 2rem; }
}

/* ============================================================
   44. PAGE TRANSITION — left swipe with EH navy
   ============================================================
   On any same-origin link click, a navy panel slides in from the
   right and covers the outgoing page; on the incoming page, it
   slides off to the left, revealing the new content. A hairline
   gold rule lives on its leading edge for editorial accent.
   Driven by js/page-transition.js.
*/
#eh-page-transition {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #001438; /* EH deep navy — matches every dark section site-wide */
  z-index: 99999;
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
  contain: layout paint style;
}
/* Hairline gold rule on the leading (left) edge of the panel */
#eh-page-transition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(200, 168, 106, 0) 0%, rgba(200, 168, 106, 0.95) 22%, rgba(200, 168, 106, 0.95) 78%, rgba(200, 168, 106, 0) 100%);
  opacity: 0.9;
}
/* State: starts in the "fully covered" position for the entry sequence */
#eh-page-transition.eh-pt-covered {
  transform: translateX(0);
  transition: none;
  pointer-events: auto;
}
/* State: slide in from the right to cover the screen (leaving the current page) */
#eh-page-transition.eh-pt-entering {
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: auto;
}
/* State: slide off to the left to reveal the next page */
#eh-page-transition.eh-pt-leaving {
  transform: translateX(-100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Disable the transition entirely if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #eh-page-transition { display: none !important; }
}

/* ===================================================================
   HOME HERO — ANIMATED ENTRANCE
   Applies only to .page-home (index.html).
   Technique: background image moved to ::after so it can be
   transformed independently from the gradient overlay (::before).
   Text elements stagger in via CSS animation-delay.
   No JS required — pure CSS.
   =================================================================== */

/* 1 ── Navbar: solid white, slides down from above on page load.
   transform: none in the `to` keyframe is critical — it removes the
   stacking context created by the translateY, restoring correct
   position: fixed behaviour on the dropdown panels after the
   animation completes. */
.navbar-wrapper {
  animation: ehNavReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.85s both;
}

@keyframes ehNavReveal {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-wrapper { animation: none; }
}

/* 2 ── Background image: remove from section, re-add on ::after
   so it can have its own transform for the Ken Burns settle.
   overflow: hidden on the section clips any scale overshoot. */
.section.hero-bore { background-image: none; }

.section.hero-bore::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bore-bg.jpg');
  background-size: cover;
  background-position: center 75%;
  background-repeat: no-repeat;
  z-index: 0;           /* sits below ::before gradient overlay (z-index 1) */
  transform: scale(1.06);
  transform-origin: center center;
  animation: ehBgSettle 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes ehBgSettle {
  to { transform: scale(1); }
}

/* 3 ── Shared keyframe: fade up from below */
@keyframes ehFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply animation to each hero text element inside hero-bore.
   fill-mode: both → element is invisible during its delay
   (applies from-state before animation starts). */
.hero-bore .hero-porsche-eyebrow,
.hero-bore .hero-porsche-rule,
.hero-bore .hero-porsche-tagline,
.hero-bore .hero-porsche-sub,
.hero-bore .hero-porsche-cta,
.hero-bore .hero-porsche-phone {
  animation: ehFadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Stagger delays — eyebrow leads, phone follows last */
.hero-bore .hero-porsche-eyebrow { animation-delay: 0.40s; }
.hero-bore .hero-porsche-rule    { animation-delay: 0.60s; }
.hero-bore .hero-porsche-tagline { animation-delay: 0.78s; }
.hero-bore .hero-porsche-sub     { animation-delay: 1.10s; }
.hero-bore .hero-porsche-cta     { animation-delay: 1.32s; }
.hero-bore .hero-porsche-phone   { animation-delay: 1.52s; }

/* 4 ── CTA buttons: subtle lift + shadow on hover */
.hero-bore .hero-porsche-cta .button {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}
.hero-bore .hero-porsche-cta .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.hero-bore .hero-porsche-cta .button:active {
  transform: translateY(-1px);
}

/* 5 ── prefers-reduced-motion: skip every animation,
   reveal all elements immediately at full opacity. */
@media (prefers-reduced-motion: reduce) {
  .navbar-wrapper { animation: none; }

  .section.hero-bore::after {
    animation: none;
    transform: scale(1);
  }

  .hero-bore .hero-porsche-eyebrow,
  .hero-bore .hero-porsche-rule,
  .hero-bore .hero-porsche-tagline,
  .hero-bore .hero-porsche-sub,
  .hero-bore .hero-porsche-cta,
  .hero-bore .hero-porsche-phone {
    animation: none;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bore .hero-porsche-cta .button {
    transition: none;
  }
}

/* ===================================================================
   MOBILE NAVIGATION DRAWER
   Full-screen drawer with accordion nav — replaces Webflow mobile menu.
   Shown only at ≤991px. Desktop mega-menu unchanged.
   =================================================================== */

/* Hamburger trigger — injected into .navbar-row by mobile-nav.js */
#mnd-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #001438;
  flex-shrink: 0;
}

.mnd-bars { display: flex; flex-direction: column; gap: 5px; }
.mnd-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Overlay */
#mnd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 20, 40, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#mnd-overlay.mnd--open { opacity: 1; pointer-events: auto; }

/* Drawer panel */
#mnd {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 92vw);
  height: 100vh;
  height: 100dvh;
  background: #04172b;
  z-index: 99999;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.4);
}
#mnd.mnd--open { transform: translateX(0); }

/* Header */
.mnd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 24px;
  height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.mnd-logo-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.mnd-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, color 0.2s ease;
}
.mnd-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Nav accordion */
.mnd-nav { flex: 1; padding: 4px 0; }

.mnd-item { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

.mnd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 20px 0 24px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 12px;
  transition: background 0.15s ease;
}
.mnd-toggle:hover,
.mnd-toggle:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }

.mnd-toggle-label {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  flex: 1;
}

.mnd-chevron {
  flex-shrink: 0;
  color: #D4BA96;
  opacity: 0.65;
  transition: transform 0.25s ease;
}
.mnd-item--open .mnd-chevron { transform: rotate(180deg); opacity: 1; }

/* Accordion panel */
.mnd-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mnd-item--open .mnd-panel { max-height: 480px; }

.mnd-panel-inner {
  padding: 4px 0 10px;
  background: rgba(0, 0, 0, 0.2);
}

/* Section labels */
.mnd-section-label {
  padding: 12px 24px 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4BA96;
  opacity: 0.65;
}

/* Sub-links */
.mnd-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px 0 30px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.mnd-link:hover,
.mnd-link:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

/* Footer */
.mnd-footer {
  padding: 20px 24px max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mnd-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: #001438;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mnd-cta:hover { background: #1F519C; border-color: rgba(255,255,255,0.25); }

.mnd-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.mnd-phone {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mnd-phone:hover { color: #fff; }

.mnd-hours {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.03em;
}

.mnd-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mnd-lang a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mnd-lang a:hover { color: rgba(255, 255, 255, 0.85); }
.mnd-lang-dot { color: rgba(255,255,255,0.2); font-size: 11px; }

/* ── Responsive visibility ── */

/* Desktop: hide the drawer system entirely */
@media (min-width: 992px) {
  #mnd, #mnd-overlay, #mnd-trigger { display: none !important; }
}

/* Mobile: hide Webflow nav, show our drawer trigger */
@media (max-width: 991px) {
  #mnd-trigger { display: flex; }

  /* Hide Webflow's collapsible nav and right side bar */
  .nav-menu-wrapper { display: none !important; }
  .navbar-right-contents { display: none !important; }

  /* Compact navbar height on mobile */
  .navbar-row { height: 68px !important; }

  /* Body scroll lock when drawer open */
  .mnd-body-lock { overflow: hidden !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #mnd { transition: none; }
  #mnd-overlay { transition: none; }
  .mnd-panel { transition: none; }
  .mnd-chevron { transition: none; }
}

/* ===================================================================
   MEGA-MENU UNIFICATION
   Fixes inconsistent dropdown appearance across all nav items.
   Applies a uniform dark-navy panel to every .dropdown-wide-wrapper.
   =================================================================== */

/* 1 — Dark surface panel
   Override the Webflow default of white background + 8rem bottom padding.
   The outer wrapper becomes transparent; only the inner panel is coloured. */
.dropdown-wide-wrapper,
.dropdown-wide-wrapper.w--open {
  background-color: transparent !important;
}

.dropdown-wide {
  background-color: #001438 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: none !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.75rem !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

/* 2 — Heading text: force white on all dropdown headings regardless of
   whether the .white modifier class was applied in the HTML. */
.dropdown-wide .dropdown-link-heading,
.dropdown-wide .heading-four.dropdown-link-heading,
.dropdown-wide .heading-four.dropdown-link-heading.white {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* 3 — Card backgrounds: consistent lift above the dark panel,
   shared across both card types (thumbnail-list and image-only). */
.dropdown-wide-wrapper .dropdown-box-link {
  background-color: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.dropdown-wide-wrapper .dropdown-box-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.12);
}

/* 4 — Thumbnail item text colour on dark background */
.dropdown-wide-wrapper .thumbnail-item > div {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* 5 — Section labels (opacity-dimmed headings above thumbnail lists) */
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list)
  .heading-four.dropdown-link-heading,
.dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list)
  .heading-four.dropdown-link-heading.white {
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* 6 — Thumbnail hover: match panel hover feel */
.dropdown-wide-wrapper .thumbnail-item:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* 7 — Grid gap tightened for the dark surface look */
.dropdown-wide .dropdown-grid,
.dropdown-wide .dropdown-grid._2-col {
  gap: 10px !important;
}

/* 8 — Mobile: ensure dark panel fills the mobile nav too */
@media (max-width: 991px) {
  .dropdown-wide {
    top: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* =====================================================================
   GLOBAL NAVY THEME SWEEP
   Standardises every dark-blue section to a single deeper navy
   (#001438) and reveals the decorative line-art infographics that
   live on those sections (they used to be near-invisible at ~6-7%
   opacity — now closer to ~14%, on par with the Europe map on
   .locations-v2 after its wash pull-back). Applies across all pages
   and locales.
   ===================================================================== */

/* --- 1. Section background colour standardisation --- */

/* Catches the framework's .bg-dark-tone class on any <section>: stakes-hero,
   cancer-section, case-for-proactive-section, testimonials-v2-section,
   audit-comparison, large-quote-section, about-page's .title.bg-dark-tone,
   etc. The earlier .section.locations-v2 rule (line ~5143) keeps its own
   #001438 override and the new gradient wash. */
.section.bg-dark-tone {
  background-color: #001438 !important;
}

/* The examinations-template sections hardcode their navy colour rather
   than using .bg-dark-tone — override directly. */
.section.exm-context-section,
.section.exm-cta-section,
.exm-context-section,
.exm-cta-section {
  background-color: #001438 !important;
}

/* --- 1b. ROOT-CAUSE FIX for "white text on dark sections" --- */
/* The framework's .container---main rule (executive-health-wip-*.css
   line 1786) hard-sets `color: var(--dark-tone)` on every container.
   That value cascades down to every child <p> / <li> / <div> inside,
   so on a dark navy section the body copy renders dark-on-dark even
   though the parent <section> declares color: var(--white). Override
   the container colour to white when it lives inside a dark section. */
.section.bg-dark-tone .container---main,
.exm-context-section .container---main,
.exm-cta-section .container---main {
  color: var(--white) !important;
}

/* --- 2. Background infographic visibility on dark navy sections --- */

/* Stakes-hero: the WholeBody silhouette behind the headline (was 0.06) */
.stakes-hero-text::after {
  opacity: 0.14 !important;
}

/* Examinations context band: the Anatomy figure behind the prose (was 0.07) */
.exm-context-section::before {
  opacity: 0.14 !important;
}

/* --- 3. Footer — same treatment --- */

/* Override the framework's .footer { background-color: var(--dark-tone) } */
.footer {
  background-color: #001438 !important;
}

/* Footer's Europe-map ::before — push opacity up so the coastline reads
   crisp against the new deeper navy (was 0.9) */
.footer::before {
  opacity: 1 !important;
}