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

/* ----- 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, #072242) !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 #072242 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
   and small tablets that overflows. Force 1-column so each simple
   category card is full-width. The complex Products & Services
   dropdown is handled separately below as a 3x2 thumbnail grid. */
@media screen and (max-width: 991px) {
  /* Simple dropdowns (Preventive Healthcare, Client Experience, About us)
     — stack their cards vertically and keep the banner styling. */
  .dropdown-wide-wrapper .dropdown-grid._2-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .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;
  }

  /* COMPLEX (Products & Services): two category wrappers stacked,
     each laid out as a 3-column grid of its sub-items. Result is the
     six cards arranged as 3 per row, screenings on row 1 and
     examinations on row 2. Each card mirrors the Client Experience
     card style: uppercase serif title above, image below, navy
     panel with rounded corners.
     Scoped to grids that actually contain a .thumbnail-list so the
     Client Experience and other simple dropdowns are not affected. */
  .dropdown-wide-wrapper .dropdown-grid:has(.thumbnail-list) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;   /* fight Webflow's `grid-auto-flow: column` */
    grid-auto-columns: auto !important;
    gap: 12px !important;
    width: 100% !important;
  }
  /* Wrapper card: strip background/padding so the row reads as a
     flush band of three thumbnail cards rather than a panel inside
     a panel. */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  /* Hide the category section header + banner image on mobile */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) > .heading-four,
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) > .img-fill {
    display: none !important;
  }
  /* The thumbnail-list becomes a 3-column grid */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .nav-shortcuts {
    margin: 0 !important;
  }
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    flex-direction: row !important;
  }
  /* Each .thumbnail-item styled as a Client-Experience-style card:
     uppercase serif title above, image below, NAVY panel with white
     text. Using a solid EH-navy background because the mobile
     drawer itself has a white background — a faint white-on-white
     tint would render invisible. */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-item {
    display: flex !important;
    flex-direction: column-reverse !important; /* image first in DOM, title rendered above */
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 12px 12px !important;
    background-color: #0F2340 !important; /* EH navy */
    border: 1px solid rgba(200, 168, 106, 0.2);
    border-radius: 14px;
    text-decoration: none !important;
    text-align: left;
    min-width: 0;
    color: #fff !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-item:hover {
    background-color: #143055 !important; /* slightly lighter navy on hover */
    transform: none !important;
    border-left: 1px solid rgba(200, 168, 106, 0.2) !important; /* override the framework's gold-left-border hover */
  }
  /* Full-width thumbnail image, rounded */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-square {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    flex-shrink: 1 !important;
    display: block !important;
  }
  /* Card title — uppercase serif white, matches Client Experience */
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-item > div {
    font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff !important;
    word-break: break-word;
  }
}
/* Tight phone (≤480 px): smaller titles + slightly tighter padding */
@media screen and (max-width: 480px) {
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-item {
    padding: 10px 8px 9px !important;
    gap: 8px;
    border-radius: 12px;
  }
  .dropdown-wide-wrapper .dropdown-box-link:has(.thumbnail-list) .thumbnail-item > div {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
  }
  .dropdown-wide-wrapper .dropdown-grid:not(._2-col) {
    gap: 8px !important;
  }
}

/* ----- 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;
  }
}

/* ----- 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 0;
  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);
  padding-left: 2.5rem;
}

/* Timeline dot: sits on the top-left corner of each card */
.process-step-card::before {
  content: '';
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dark-tone);
}

.process-step-card:first-child::before { left: 0; }
.process-step-card:not(:first-child)::before { left: -4px; }

.process-step-num {
  font-family: var(--sans-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dark-tone);
  opacity: 0.4;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.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);
}

.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 0 1.25rem;
}

.process-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.process-tag {
  font-family: var(--sans-font);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-dark);
  border-radius: 2px;
  padding: 0.3rem 0.65rem;
  color: var(--dark-tone);
  opacity: 0.65;
}

.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(7, 34, 66, 0.45) 72%,
    rgba(7, 34, 66, 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.55);
  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(7, 34, 66, 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(7, 34, 66, 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(7, 34, 66, 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;
}

/* Tablet: collapse to 2-column (context above, 2 stat cols below) */
@media (max-width: 991px) {
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
  .facts-context {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--border-dark);
    padding: 2.25rem 1.75rem;
  }
  .facts-heading { max-width: none; }
}
/* Phone: single column, stat cards stack one per row */
@media (max-width: 600px) {
  .facts-section { overflow: hidden; }
  /* Shrink/hide the giant heart watermark so it doesn't bleed across content */
  .facts-section::after {
    width: 80%;
    right: -20%;
    opacity: 0.05;
  }
  .facts-grid {
    grid-template-columns: 1fr;
  }
  .facts-context {
    padding: 1.75rem 1.25rem 1.25rem;
    gap: 0.6rem;
  }
  .facts-heading {
    font-size: 1.75rem;
    line-height: 1.18;
    margin-bottom: 0.5rem;
  }
  .facts-stat-col {
    border-right: none;
    border-bottom: 1px solid var(--border-dark);
  }
  .facts-stat-col:last-child {
    border-bottom: none;
  }
  .facts-stat {
    padding: 1.5rem 1.25rem;
  }
  .facts-stat::before {
    left: 1.25rem;
    right: 1.25rem;
  }
  .facts-stat-num {
    font-size: 2.4rem;
    margin-bottom: 0.4rem;
  }
  .facts-stat-label { max-width: none; }
}

/* ===== 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.5);
  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: '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 (#072242) and Inter body font */

/* Button: use site dark-tone instead of pale #1F519C */
.exm-btn-primary              { background-color: #072242; 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: #072242; }
.exm-cta-section              { background-color: #072242; }

/* 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: #072242; border-bottom-color: #072242; }

/* 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: #072242;
  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: #072242;
}

/* ===== 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: #072242;
  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: #072242;
  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: '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;
}

.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: '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: '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: '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(7, 34, 66, 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(7, 34, 66, 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(7, 34, 66, 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, #072242);
  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, #072242);
  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, #072242);
  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(7, 34, 66, 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, #072242);
  /* 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(7, 34, 66, 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(7, 34, 66, 0.10) 0%,
      rgba(7, 34, 66, 0.18) 38%,
      rgba(7, 34, 66, 0.62) 62%,
      rgba(7, 34, 66, 0.86) 100%),
    linear-gradient(180deg,
      rgba(7, 34, 66, 0.20) 0%,
      rgba(7, 34, 66, 0.00) 22%,
      rgba(7, 34, 66, 0.00) 78%,
      rgba(7, 34, 66, 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.72);
  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(7, 34, 66, 0.10) 0%,
        rgba(7, 34, 66, 0.42) 48%,
        rgba(7, 34, 66, 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(7, 34, 66, 0.06);
  border-bottom: 1px solid rgba(7, 34, 66, 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, #072242);
  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(7, 34, 66, 0.72);
  margin: 0 0 32px;
  max-width: 480px;
}
.pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(7, 34, 66, 0.12);
}
.pillars-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(7, 34, 66, 0.12);
  align-items: baseline;
}
.pillars-item-num {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mid-warm, #c8a86a);
}
.pillars-item-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(7, 34, 66, 0.82);
}
.pillars-item-text strong {
  color: var(--dark-tone, #072242);
  font-weight: 600;
}

@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-image: url('../images/Europe_New_White.png');
  background-position: 50%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Subtle dark wash on top of the map so type stays readable */
.section.locations-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7, 34, 66, 0.78) 0%,
    rgba(7, 34, 66, 0.62) 40%,
    rgba(7, 34, 66, 0.72) 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: auto 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 26px 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-num {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mid-warm, #c8a86a);
  opacity: 0.85;
}
.locations-v2-city {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
}
.locations-v2-country {
  font-family: var(--sans-font, 'Inter', sans-serif);
  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;
}
.locations-v2-meta {
  grid-column: 2 / 4;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
}

@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-num { grid-row: 1 / 3; align-self: start; padding-top: 6px; }
  .locations-v2-country { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; margin-top: 2px; }
  .locations-v2-city { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .locations-v2-meta { grid-column: 2; grid-row: 2; font-size: 0.85rem; }
}

/* ============================================
   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(7, 34, 66, 0.08);
  border-bottom: 1px solid rgba(7, 34, 66, 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, #072242);
  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(7, 34, 66, 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(7, 34, 66, 0.14);
  border-radius: 8px;
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: var(--dark-tone, #072242);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
  width: 100%;
}
.newsletter-v2-input::placeholder { color: rgba(7, 34, 66, 0.4); }
.newsletter-v2-input:focus {
  outline: none;
  border-color: var(--dark-tone, #072242);
  box-shadow: 0 0 0 3px rgba(7, 34, 66, 0.08);
}
.newsletter-v2-submit {
  height: 52px;
  padding: 0 28px;
  background: var(--dark-tone, #072242);
  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(7, 34, 66, 0.55);
  margin: 14px 0 0;
}
.newsletter-v2-disclaimer a {
  color: rgba(7, 34, 66, 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(7, 34, 66, 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(7, 34, 66, 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, #072242);
  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(7, 34, 66, 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(7, 34, 66, 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, #072242);
  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(7, 34, 66, 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, #072242);
  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, #072242);
  letter-spacing: 0.01em;
}
.premium-includes-quote-role {
  font-family: var(--sans-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  color: rgba(7, 34, 66, 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(7, 34, 66, 0.08);
  text-align: center;
}
.premium-specs-cta p {
  font-size: 0.95rem;
  color: rgba(7, 34, 66, 0.65);
  margin: 0;
  letter-spacing: 0.01em;
}
.premium-specs-cta a {
  color: var(--dark-tone, #072242);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 34, 66, 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(7, 34, 66, 0.6);
}
.premium-final-phone a {
  color: rgba(7, 34, 66, 0.72);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(7, 34, 66, 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, #072242);
  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(7, 34, 66, 0.08) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
              height 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, #072242);
  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, #072242);
}

/* 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, #072242) !important;
  background-color: var(--dark-tone, #072242) !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(7, 34, 66, 0.65);
}
.navbar-right-contents .w-dropdown-toggle:hover {
  color: var(--dark-tone, #072242);
}

/* 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;
  box-shadow: 0 1px 24px -8px rgba(7, 34, 66, 0.12);
}
.navbar-wrapper.is-scrolled .navbar-row {
  height: 64px !important;
}
.navbar-wrapper.is-scrolled .nav-logo-link {
  height: 28px !important;
}
.navbar-wrapper.is-scrolled .button.inside-right-navbar {
  padding: 10px 18px !important;
  font-size: 0.84rem !important;
}

@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; }
  .navbar-wrapper.is-scrolled .navbar-row { height: 60px !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(7, 34, 66, 0.7);
  margin: 0;
  max-width: 360px;
}
.screenings-faq-intro a {
  color: var(--dark-tone, #072242);
  font-weight: 500;
  border-bottom: 1px solid rgba(7, 34, 66, 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, #072242);
  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(7, 34, 66, 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(7, 34, 66, 0.55);
}
.hero-porsche-phone a {
  color: rgba(7, 34, 66, 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, #072242);
  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; }
}

/* MOBILE-ONLY: editorial redesign. The MRI moves from a dominant
   bottom image to a faint atmospheric watermark anchored in the
   bottom-right of the section, bleeding off the right edge with a
   soft radial mask. Text becomes the focal point. The MRI is still
   visible — just no longer competing for attention.
   Desktop (≥992px) keeps the layered Porsche layout untouched. */
@media (max-width: 991px) {
  .section.hero-porsche {
    position: relative;
    display: block !important;            /* drop the column-reverse from earlier */
    flex-direction: initial;
    padding: 80px 24px 64px !important;
    min-height: auto;
    overflow: hidden;                     /* keep the watermark inside the section */
    isolation: isolate;                   /* establish a stacking context */
  }

  /* MRI as a faint atmospheric watermark — absolute positioned,
     bleeds off the right edge, masked into the background. */
  .hero-porsche-imgstage {
    position: absolute !important;
    inset: 0;
    margin: 0 !important;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 1;                           /* container fully opaque, image carries the fade */
    transform: none;
    animation: heroPorscheImgWatermarkIn 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  }
  /* Drop the gold rule separator — the watermark layout doesn't need it */
  .hero-porsche-imgstage::before {
    display: none !important;
  }
  /* The MRI image: large, anchored bottom-right, bleeds off the right
     edge, radial mask fades into white. Saturation reduced and tinted
     toward the brand navy so it reads as atmosphere, not subject. */
  .hero-porsche-image {
    position: absolute;
    right: -28%;
    bottom: -8%;
    width: 145%;
    max-width: none !important;
    height: auto;
    opacity: 0.18;
    filter: saturate(0.55) contrast(1.05);
    -webkit-mask-image: radial-gradient(ellipse 78% 70% at 70% 75%, #000 0%, #000 25%, transparent 80%);
            mask-image: radial-gradient(ellipse 78% 70% at 70% 75%, #000 0%, #000 25%, transparent 80%);
  }

  /* Editorial text block sits on top, full color */
  .hero-porsche-side {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
    transform: translateY(20px);
    text-align: center;
  }
  .hero-porsche-side-inner {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  /* Gentle fade-in (no horizontal slide) on the watermark */
  @keyframes heroPorscheImgWatermarkIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Phone — tighter typography + watermark position adjusted for narrow screens */
@media (max-width: 600px) {
  .section.hero-porsche { padding: 72px 20px 56px !important; }
  .hero-porsche-image {
    right: -35%;
    bottom: -12%;
    width: 165%;
    opacity: 0.16;
  }
  .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, #072242);
  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(7, 34, 66, 0.72);
  margin: 0 auto;
  max-width: 720px;
}
.locations-intro .emphasize {
  color: var(--dark-tone, #072242);
  font-weight: 500;
}
.locations-intro .inline-link {
  color: var(--dark-tone, #072242);
  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(7, 34, 66, 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(7, 34, 66, 0.03);
}
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(7, 34, 66, 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, #072242);
  margin: 0 0 8px;
}
.location-card-meta {
  font-family: var(--serif-font, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(7, 34, 66, 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(7, 34, 66, 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, #072242);
  font-weight: 500;
  transition: color 0.25s ease;
}
.location-card-contact a:last-child {
  color: rgba(7, 34, 66, 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: #0F2340; /* EH navy */
  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; }
}