/* =========================================================
   1️⃣  DESIGN TOKENS (CSS‑VARIABLES)
   ========================================================= */

:root {
  /* ── Colours ──────────────────────────────────────── */
  --primary-blue:               #1E64C8;
  --primary-blue-dark:          #174fa0;
  --primary-blue-10:            rgba(30, 100, 200, 0.08);
  --white:                      #ffffff;
  --Text-black:                 #0B1215;

  --color-grey-50:  hsl(210, 20%, 98%);
  --color-grey-100: hsl(210, 18%, 95%);
  --color-grey-200: hsl(210, 16%, 90%);
  --color-grey-300: hsl(210, 14%, 82%);
  --color-grey-400: hsl(210, 12%, 65%);
  --color-grey-500: hsl(210, 10%, 45%);
  --color-grey-600: hsl(210, 12%, 32%);
  --color-grey-700: hsl(210, 14%, 22%);
  --color-grey-800: hsl(210, 16%, 14%);
  --color-grey-900: hsl(210, 18%, 8%);

  --color-bg-primary:            hsl(0, 0%, 100%);
  --color-bg-secondary:         hsl(210, 20%, 98%);
  --color-bg-tertiary:          hsl(210, 18%, 95%);
  --color-text-primary:         hsl(210, 18%, 8%);
  --color-text-secondary:       hsl(210, 12%, 32%);
  --color-text-tertiary:        hsl(210, 10%, 45%);
  --color-text-inverse:         hsl(0, 0%, 100%);
  --color-border-light:         hsl(210, 16%, 90%);
  --color-border-default:       hsl(210, 14%, 82%);
  --color-border-strong:        hsl(210, 12%, 65%);

  /* ── Typography ─────────────────────────────────── */
  --font-body:  'Open Sans', sans-serif;
  --font-brand: 'Open Sans', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-35xl: 2.5rem;
  --text-4xl:  2.8rem;

  /* ── Spacing ────────────────────────────────────── */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10:.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* ── Motion & Easing ─────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;

  /* ── Layout helpers ───────────────────────────────── */
  --navbar-height:                92px;
  --navbar-height-scrolled:       57px;
  --section-gap:                  var(--space-10);
}

/* Section‑gap overrides */
@media (max-width: 575.98px) { :root { --section-gap: var(--space-6); } }
@media (min-width: 1600px)   { :root { --section-gap: var(--space-12); } }

/* =========================================================
   2️⃣  GLOBAL RESET / BASE
   ========================================================= */

/* Box‑sizing & border‑radius reset */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Body – core layout */
body {
  display:          flex;
  flex-direction:   column;
  min-height:        100vh;
  width:             100%;
  overflow-x:        hidden;
  font-family:       var(--font-body);
  font-size:         var(--text-base);
  color:             var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* ---------------------------------------------------------
   Main structural elements
   --------------------------------------------------------- */
main   { flex: 1 0 auto; }
img    { display: block; max-width: 100%; height: auto; }
a {
  color:       var(--primary-blue);
  text-decoration: none;
  transition:  color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--primary-blue-dark); }

/* =========================================================
   3️⃣  TYPOGRAPHY
   ========================================================= */

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-body);
  font-weight:   700;
  line-height:   1.15;
  color:         var(--color-text-primary);
  margin-top:    0;
  margin-bottom: var(--space-3);
}

/* Prose – constrained max width for body copy */
.prose { max-width: 65ch; }

/* Overline / small label */
.overline {
  display: block;
  font-size:   var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:       var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

/* =========================================================
   4️⃣  RESPONSIVE BODY FONT
   ========================================================= */
@media (min-width: 1200px) { body { font-size: 1.08rem; } }
@media (min-width: 1400px) { body { font-size: 1.12rem; } }

/* =========================================================
   5️⃣  LAYOUT CONTAINERS
   ========================================================= */

/* Wide‑screen container paddings */
@media (min-width: 576px)  { .container { padding-left: var(--space-8);   padding-right: var(--space-8); } }
@media (min-width: 992px)  { .container { padding-left: var(--space-12);  padding-right: var(--space-12); } }
@media (min-width: 1400px) { .container { padding-left: var(--space-16);  padding-right: var(--space-16); } }

/* Max‑widths */
@media (min-width: 1600px) { .container { max-width: 1560px; } }
@media (min-width: 1900px) { .container { max-width: 1820px; } }

/* Bootstrap muted text override */
.text-muted,
.text-muted a,
.text-secondary,
.text-secondary a {
  color: var(--color-text-tertiary) !important;
}

/* =========================================================
   6️⃣  COMPONENTS – BUTTONS
   ========================================================= */

.btn-lab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  padding: .65rem 1.5rem;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out);
}

/* Mobile‑specific button tweaks */
@media (max-width: 575.98px) {
  .btn-lab {
    padding: .55rem 1.1rem;
    font-size: var(--text-xs);
  }
}

/* — Primary (filled) — */
.btn-lab--primary {
  background-color: var(--primary-blue);
  border-color:     var(--primary-blue);
  color:            var(--white);
}
.btn-lab--primary:hover,
.btn-lab--primary:focus-visible {
  background-color: var(--primary-blue-dark);
  border-color:     var(--primary-blue-dark);
}

/* — Secondary (outline) — */
.btn-lab--secondary {
  background-color: transparent;
  border-color:     var(--primary-blue);
  color:            var(--primary-blue);
}
.btn-lab--secondary:hover,
.btn-lab--secondary:focus-visible {
  background-color: var(--primary-blue);
  color:            var(--white);
}

/* — Tertiary (text link) — */
.btn-lab--tertiary {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--primary-blue);
  padding-left:     0;
  padding-right:    0;
  position:         relative;
}
.btn-lab--tertiary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary-blue);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.btn-lab--tertiary:hover {
  color: var(--primary-blue-dark);
}
.btn-lab--tertiary:hover::after {
  background-color: var(--primary-blue-dark);
}

/* Chevron used inside .btn‑lab--tertiary */
.btn-lab .chevron {
  font-size: .8em;
  transition: transform var(--duration-fast) var(--ease-out);
}
.btn-lab:hover .chevron { transform: translateX(3px); }

/* =========================================================
   7️⃣  NAVIGATION (navbar, links, dropdowns, hamburger)
   ========================================================= */

/* Navbar base */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
  background-color: var(--primary-blue) !important;
  padding: 1.45rem 0;
  transition:
    background-color var(--duration-slow) var(--ease-in-out),
    padding          var(--duration-slow) var(--ease-in-out),
    box-shadow       var(--duration-slow) var(--ease-in-out);
}

/* Scrolled state – toggled via JS */
.navbar.navbar-scrolled {
  background-color: var(--white) !important;
  padding: .5rem 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* Brand (logo) */
.navbar-brand {
  padding: 0;
  display: flex;
  align-items: center;
}
.navbar-brand__logo {
  height: 38px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition:
    filter var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}

/* Shrink + colour change when scrolled */
.navbar.navbar-scrolled .navbar-brand__logo {
  height: 30px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1200%) hue-rotate(201deg) brightness(95%) contrast(96%);
}

/* Nav links – default */
.nav-link {
  color: var(--white) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .5rem 1rem !important;
  margin-right: .25rem;
  position: relative;
  transition: color var(--duration-base) var(--ease-out);
}

/* Nav links – scrolled */
.navbar.navbar-scrolled .nav-link {
  color: var(--primary-blue) !important;
}

/* Underline animation */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 2rem); }

/* Contact pill (special nav‑link) */
.nav-link-contact {
  display: inline-block;
  color: var(--primary-blue) !important;
  background-color: var(--white) !important;
  border: 2px solid var(--primary-blue);
  padding: .4rem 1rem !important;
  margin-left: .5rem;
  font-weight: 600;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color          var(--duration-base) var(--ease-out);
}
.nav-link-contact::after { display: none !important; }
.nav-link-contact:hover {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
}

/* Contact pill – scrolled state */
.navbar.navbar-scrolled .nav-link-contact {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
}
.navbar.navbar-scrolled .nav-link-contact:hover {
  background-color: var(--primary-blue-dark) !important;
}

/* Dropdowns */
.dropdown-toggle::after { display: none; }
.dropdown-menu {
  border: 1px solid var(--color-border-light);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: .5rem 0;
}
.dropdown-item {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--primary-blue);
  padding: .65rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover {
  background-color: var(--color-bg-secondary);
}

/* Show dropdown on hover (desktop) */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Hamburger (mobile) */
.navbar-toggler {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}
.navbar-toggler:focus { box-shadow: none; }

.hamburger-icon {
  width: 28px;
  height: 2px;
  background-color: var(--white);
  position: relative;
  display: block;
  transition: background-color var(--duration-base) var(--ease-out);
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 2px;
  background-color: var(--white);
  transition:
    transform var(--duration-base) var(--ease-out),
    top       var(--duration-base) var(--ease-out),
    bottom    var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}
.hamburger-icon::before { top: -9px; left: 0}
.hamburger-icon::after  { bottom: -9px; left: 0 }

/* Hamburger colour change when navbar scrolled */
.navbar.navbar-scrolled .hamburger-icon,
.navbar.navbar-scrolled .hamburger-icon::before,
.navbar.navbar-scrolled .hamburger-icon::after {
  background-color: var(--primary-blue);
}

/* X‑state (open) */
.navbar-toggler:not(.collapsed) .hamburger-icon {
  background-color: transparent !important;
}
.navbar-toggler:not(.collapsed) .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
  background-color: var(--color-grey-500) !important;
}
.navbar-toggler:not(.collapsed) .hamburger-icon::after {
  transform: rotate(-45deg);
  bottom: 0;
  background-color: var(--color-grey-500) !important;
}

/* =========================================================
   8️⃣  OFFCANVAS (mobile nav panel)
   ========================================================= */

.offcanvas {
  background-color: var(--white);
  width: 80vw !important;
  height: 100vh;
  box-shadow: -10px 0 40px rgba(0,0,0,.06);
  overflow-y: auto;
  display: flex !important;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  backface-visibility: hidden;
  will-change: transform;
}

/* Header / body spacing */
.offcanvas-header { padding: 2rem 1.5rem; }
.offcanvas-body {
  min-height: 100vh;
  padding-bottom: var(--space-8);
}

/* Offcanvas nav list */
.offcanvas .nav {
  display: flex;
  flex-direction: column;
}
.offcanvas .nav-link {
  color: var(--color-text-tertiary) !important;
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  font-weight: 300;
  padding: .9rem 1.5rem !important;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition:
    color            var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.offcanvas .nav-link:hover {
  color: var(--primary-blue) !important;
  background-color: var(--color-bg-secondary);
}
.offcanvas .nav-link::after { display: none !important; }
.offcanvas .nav-link-contact {
  border-bottom: 2px solid var(--primary-blue);
  color: var(--primary-blue) !important;
}

/* Dropdown arrow rotation inside offcanvas */
.offcanvas .dropdown-arrow {
  transition: transform var(--duration-base) var(--ease-out);
}
.offcanvas .nav-link.collapsed .dropdown-arrow   { transform: rotate(0deg); }
.offcanvas .nav-link:not(.collapsed) .dropdown-arrow { transform: rotate(180deg); }

.offcanvas .collapse {
  background-color: var(--color-bg-secondary);
}
.offcanvas .dropdown-item {
  color: var(--color-text-tertiary);
  padding: .65rem 1.5rem;
  font-size: var(--text-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.offcanvas .dropdown-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--primary-blue);
}

/* Offcanvas breakpoints */
@media (max-width: 991.98px) {
  .offcanvas .nav-link-contact {
    padding: 1rem 1.5rem !important;
    margin-bottom: .5rem !important;
  }
  .offcanvas-body .nav-link,
  .offcanvas-body .nav-link-contact {
    padding-right: 1.5rem !important;
  }
  .offcanvas-body .nav-link::after { display: none !important; }
}

/* =========================================================
   9️⃣  FOOTER
   ========================================================= */

.footer {
  flex-shrink: 0;
  background-color: var(--primary-blue);
  color: rgba(255,255,255,.7);
  padding: var(--space-16) 0 0;
  font-family: var(--font-body) !important;
}
@media (max-width: 575.98px) {
  .footer {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

/* Reset font‑family for everything inside the footer */
.footer * { font-family: var(--font-body) !important; }

/* Branding */
.footer__brand      { display: block; margin-bottom: var(--space-6); }
.footer__affiliated { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.45); margin-bottom: var(--space-3); }
.footer__brand-logo { height: 48px; filter: brightness(0) invert(1); display: block; }

/* Partner logos */
.footer__partner-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}
.footer__partner-logo {
  height: 60px;
  object-fit: contain;
  opacity: .85;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Column headings */
.footer__heading {
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: var(--space-4);
}

/* Links list */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: var(--space-1); }
.footer-links a {
  color: rgba(255,255,255,.7);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--white); }

/* Address block */
.footer__address {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  margin-bottom: var(--space-3);
  word-break: keep-all;
}

/* Contact links (email, LinkedIn, etc.) */
.footer__contact-links {
  display: flex;
  gap: var(--space-3);
  margin-left: -5px;
}
.footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__contact-link i { font-size: var(--text-base); flex-shrink: 0; }
.footer__contact-link:hover { color: var(--white); }

/* Bottom bar (copyright + legal) */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  margin-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
  margin: 0;
}
.footer__legal-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__legal-links a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__legal-links a:hover { color: var(--white); }

/* Footer mobile adjustments */
@media (max-width: 991.98px) {
  .footer__brand-logo { max-height: 32px; }
  .footer__partner-logos { justify-content: flex-start; gap: var(--space-3); }
  .footer__partner-logo  { height: 40px; }
}
@media (max-width: 575.98px) {
  .footer__brand-logo { max-height: 40px; }
  .footer__partner-logo { height: 40px; }
  .footer__partner-logos { gap: var(--space-10); }
  .footer__bottom { flex-direction: column; align-items: center; gap: var(--space-1); }
  .footer__legal-links { flex-wrap: wrap; gap: var(--space-8) var(--space-8); }
}

/* =========================================================
   10️⃣   SECTION (generic page sections)
   ========================================================= */

.section {
  padding-top:    var(--section-gap);
  padding-bottom: var(--section-gap);
  border-top:     1px solid var(--color-border-light);
  min-height:    92vh;
}
.section-header {
  padding: var(--space-8) 0;
}
.section-header__title {
  font-family: var(--font-body);
  font-size:   var(--text-2xl);
  font-weight: 700;
  color:       var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: .008em;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.section-header__subtitle {
  font-size:   var(--text-md);
  color:       var(--color-text-tertiary);
  line-height: 1.6;
  max-width:   80ch;
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .section-header__title    { font-size: var(--text-xl); }
  .section-header__subtitle { max-width: 100%; }
}

/* Centered variant */
.section-header--center {
  text-align: center;
}
.section-header--center .section-header__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Legacy – kept for backward compatibility */
.InPageTitles {
  font-family: var(--font-body);
  font-size:   var(--text-2xl);
  font-weight: 700;
  color:       var(--primary-blue);
  text-align:  left;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-3);
}
@media (max-width: 767.98px) { .InPageTitles { font-size: var(--text-xl); } }
.InPageSubtitle {
  color: var(--color-text-tertiary);
  font-size: var(--text-md);
  max-width: 52ch;
}

/* =========================================================
   11️⃣  PAGE‑INTRO (hero‑style two‑column)
   ========================================================= */

.page-intro {
  padding: var(--space-16) 0 var(--space-20);
  position: relative;
}
.page-intro .row { align-items: stretch; }

.page-intro__overline {
  display: block;
  font-size: var(--text-md);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-grey-400);
  margin-bottom: var(--space-1);
}
.page-intro__title {
  font-size: var(--text-35xl);
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.page-intro__body {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.75;
  max-width: 58ch;
  margin-bottom: var(--space-4);
}

/* Fluid title – shrink on tablets / mobiles */
@media (max-width: 991.98px) { .page-intro__title { font-size: var(--text-2xl); } }
@media (max-width: 767.98px) {
  .page-intro__title { font-size: var(--text-2xl); }
  .page-intro__body { max-width: 100%; }
}

/* Image wrapper */
.page-intro__img-wrap {
  overflow: hidden;
  height: 100%;
  flex: 1 1 0;
}
.page-intro__img {
  width: 100%;
  height: 100%;
  padding-left: var(--space-6);
  object-fit: cover;
  display: block;
}

/* Mobile – stack columns and set min‑height for image */
@media (max-width: 991.98px) {
  .page-intro .row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-intro__img-wrap,
  .page-intro__text {
    flex: 0 0 auto;
    width: 100%;
  }
  .page-intro__img-wrap {
    min-height: 240px;
    margin-top: var(--space-8);
  }
  img.page-intro__img {
    padding: 0;
  }
}

/* =========================================================
   12️⃣  TWO‑COLUMN SECTION (generic content blocks)
   ========================================================= */

.two-col-section {
  padding: var(--space-20) 0;
}
.two-col-section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.two-col-section__overline {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.two-col-section__body {
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
.two-col-section__img-wrap {
  overflow: hidden;
  height: 100%;
  min-height: 280px;
}
.two-col-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet / mobile tweaks */
@media (max-width: 991.98px) {
  .two-col-section__title { font-size: var(--text-xl); }
}
@media (max-width: 767.98px) {
  .two-col-section__body { max-width: 100%; }
  .two-col-section__img-wrap {
    min-height: 220px;
    margin-top: var(--space-8);
  }
}

/* Page‑intro padding adjustments for different breakpoints */
@media (max-width: 991.98px) { .page-intro { padding-top: var(--space-16); padding-bottom: var(--space-16); } }
@media (max-width: 767.98px) { .page-intro { padding-top: var(--space-12); padding-bottom: var(--space-12); } }
@media (max-width: 575.98px) { .page-intro { padding-top: var(--space-8);  padding-bottom: var(--space-8);  } }

/* =========================================================
   13️⃣  TEAM CARD
   ========================================================= */

.team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-primary);
  transition: border-color var(--duration-base) var(--ease-out);
}
.team-card:hover { border-color: var(--primary-blue); }

/* Image area */
.team-card__img-wrap {
  padding: var(--space-4) var(--space-5) 0;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.team-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.team-card:hover .team-card__img { transform: scale(1.02); }

/* Body */
.team-card__body {
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-2);
  display: flex;
  flex-direction: column;
}
.team-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}
.team-card__role {
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  transition: color var(--duration-fast) var(--ease-out);
}
.team-card:hover .team-card__role { color: var(--primary-blue); }
.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--space-5);
}

/* Social links */
.team-card__links {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}
.team-card__link {
  color: var(--color-border-strong);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-out);
}
.team-card:hover .team-card__link { color: var(--primary-blue); }
.team-card__link:hover { color: var(--primary-blue) !important; }

/* =========================================================
   14️⃣  EQUIPMENT SLIDER & CARD
   ========================================================= */

.equipment-slider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.equipment-slider__track { display: flex; gap: var(--space-6); }
.equipment-slider__viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Slider controls */
.equipment-slider__btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-border-strong);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}
.equipment-slider__btn:hover { color: var(--primary-blue); }
.equipment-slider__btn[hidden] {
  visibility: hidden;
  display: block !important;
}
@media (max-width: 767.98px) {
  .equipment-slider__btn--prev { left: var(--space-1); }
  .equipment-slider__btn--next { right: var(--space-1); }
}

/* Equipment card */
.equipment-card {
  flex: 0 0 calc(33.333% - var(--space-4));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-primary);
  transition: border-color var(--duration-base) var(--ease-out);
}
@media (max-width: 991.98px) { .equipment-card { flex: 0 0 calc(50% - var(--space-3)); } }
@media (max-width: 575.98px) { .equipment-card { flex: 0 0 100%; } }

.equipment-card__img-wrap { padding: var(--space-4) var(--space-4) 0; overflow: hidden; }
.equipment-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.equipment-card__body {
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-6);
}
.equipment-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
.equipment-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}

/* =========================================================
   15️⃣  SERVICE CARD (horizontal, overlay hover)
   ========================================================= */

.service-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--space-4);
}
@media (max-width: 575.98px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-6);
  cursor: pointer;
  background-color: var(--color-grey-600);
}
.service-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition:
    filter var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  z-index: 0;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
  transition: background-color var(--duration-base) var(--ease-out);
  z-index: 1;
}
.service-card:hover::before { background: rgba(30,100,200,.72); }
.service-card:hover .service-card__bg {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.service-card__content { position: relative; z-index: 2; }
.service-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
  margin-bottom: 0;
}
.service-card__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.85);
  line-height: 1.55;
  margin-top: var(--space-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--duration-slow) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}
.service-card:hover .service-card__text {
  max-height: 120px;
  opacity: 1;
}
.service-card__arrow {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  font-size: var(--text-2xl);
  color: var(--white);
  opacity: .7;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.service-card:hover .service-card__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Mobile tweak */
@media (max-width: 767.98px) {
  .service-card { min-height: 160px; padding: var(--space-5); }
  .service-card__text { display: none; }
}

/* =========================================================
   16️⃣  APPROACH ITEM
   ========================================================= */

.approach-item {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.approach-item:last-child { border-bottom: none; }

.approach-item__text-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4) 0;
}
.approach-item__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
@media (max-width: 991.98px) { .approach-item__title { font-size: var(--text-lg); } }

.approach-item__body {
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
@media (max-width: 991.98px) { .approach-item__body { max-width: 100%; } }

.approach-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: color var(--duration-fast) var(--ease-out);
}
.approach-item__link .chevron { transition: transform var(--duration-fast) var(--ease-out); }
.approach-item__link:hover {
  color: var(--primary-blue-dark);
}
.approach-item__link:hover .chevron { transform: translateX(4px); }

.approach-item__img-wrap {
  overflow: hidden;
  height: 100%;
  min-height: 180px;
}
.approach-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
@media (max-width: 991.98px) {
  .approach-item__img-wrap {
    min-height: 0;
    max-height: 160px;
  }
}
@media (max-width: 767.98px) {
  .approach-item__img-wrap { min-height: 220px; margin-top: var(--space-8); }
}

/* =========================================================
   17️⃣  ICON CARD (generic 3‑per‑row)
   ========================================================= */

.icon-card {
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-primary);
  padding: var(--space-6);
  padding-top: var(--space-8);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--duration-base) var(--ease-out);
}
.icon-card:hover { border-color: var(--primary-blue); }

.icon-card__icon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: 2.75rem;
  color: var(--color-text-tertiary);
  line-height: 1;
  transition: color var(--duration-base) var(--ease-out);
}
.icon-card:hover .icon-card__icon { color: var(--primary-blue); }

.icon-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--primary-blue);
  padding-top: var(--space-20);
  margin-bottom: var(--space-3);
  max-width: 80%;
}
.icon-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}

/* Mobile – keep Flex column */
@media (max-width: 767.98px) {
  .icon-card { flex-direction: column; }
  .icon-card__icon {
    font-size: 2.5rem;
    top: var(--space-5);
    right: var(--space-5);
  }
}

/* =========================================================
   18️⃣  ANIMATIONS & KEYFRAMES
   ========================================================= */

@keyframes card-fly-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  0%   { opacity: 0; transform: translateY(-12px); }
  50%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}
@keyframes partners-scroll {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

/* Utility animation classes */
.anim-fade-slide-down { animation: fadeSlideDown 1.8s var(--ease-in-out) infinite; }
.anim-bounce           { animation: bounce 1.5s var(--ease-in-out) infinite; }

/* Staggered cards (JS adds .is-visible) */
.card-stagger:nth-child(1) { animation-delay: 0ms; }
.card-stagger:nth-child(2) { animation-delay: 80ms; }
.card-stagger:nth-child(3) { animation-delay: 160ms; }
.card-stagger:nth-child(4) { animation-delay: 240ms; }
.card-stagger:nth-child(5) { animation-delay: 320ms; }
.card-stagger:nth-child(6) { animation-delay: 400ms; }

/* =========================================================
   19️⃣  PARTNERS BELT
   ========================================================= */

.partners {
  padding: var(--space-12) 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.partners__track {
  display: flex;
  gap: 3rem;
  animation: partners-scroll 60s linear infinite;
  width: max-content;
  will-change: transform;
}
.partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1rem;
  flex-shrink: 0;
}
.partners__logo img {
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .45;
  transition:
    filter var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}
.partners__logo--active img {
  filter: grayscale(0%);
  opacity: 1;
}

/* =========================================================
   20️⃣  SINGLE PAGE TITLE (e.g. Contact, Privacy)
   ========================================================= */

.page-title {
  padding: var(--space-16) 0 var(--space-12);
}
.page-title__heading {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.page-title__sub {
  font-size: var(--text-md);
  color: var(--color-text-tertiary);
  max-width: 42ch;
  line-height: 1.65;
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .page-title__heading { font-size: var(--text-2xl); }
  .page-title__sub { max-width: 100%; }
}

/* =========================================================
   21️⃣  DOMAIN CARD (research domain grid)
   ========================================================= */

.domain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* Image block */
.domain-card__img-wrap { overflow: hidden; flex-shrink: 0; }
.domain-card__img {
  width: 100%;
  aspect-ratio: 6 / 3;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.domain-card:hover .domain-card__img { transform: scale(1.03); }

/* Footer bar with title + chevron */
.domain-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-grey-700);
  flex: 1;
  transition: background-color var(--duration-base) var(--ease-out);
}
.domain-card:hover .domain-card__body { background-color: var(--primary-blue); }

.domain-card__title {
  font-size: var(--text-sm);
  font-weight: 200;
  color: var(--white);
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.domain-card__chevron {
  font-size: var(--text-xl);
  color: rgba(255,255,255,.5);
  flex-shrink: 0;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.domain-card:hover .domain-card__chevron {
  color: var(--white);
  transform: translateX(4px);
}

/* CTA variant */
.domain-card--cta {
  position: relative;
  min-height: 220px;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-secondary);
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}
.domain-card--cta .domain-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: .12;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.domain-card--cta:hover .domain-card__bg { opacity: .2; }

.domain-card--cta .domain-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
}
.domain-card--cta .domain-card__title {
  font-weight: 400;
  color: var(--color-grey-500);
}
.domain-card--cta:hover .domain-card__title { color: var(--color-grey-700); }

.domain-card--cta .domain-card__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-grey-500);
  transition: color var(--duration-fast) var(--ease-out);
  align-self: flex-end;
}
.domain-card--cta:hover .domain-card__cta-link { color: var(--primary-blue); }

.domain-card--cta .domain-card__chevron { font-size: var(--text-base); }
.domain-card--cta:hover .domain-card__chevron { transform: translateX(4px); }

.domain-card--cta .domain-card__icon {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  font-size: 4rem;
  color: var(--color-grey-300);
  opacity: .35;
  line-height: 1;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.domain-card--cta:hover .domain-card__icon { opacity: .55; }

/* =========================================================
   22️⃣  COLLABORATE ACCORDION SECTION
   ========================================================= */

/* Header column – positioned under sticky navbar */
.collab-header {
  position: static;
  top: calc(var(--navbar-height) + var(--space-8));
}
.collab-header__intro {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-tertiary);
  max-width: 36ch;
  margin-top: var(--space-4);
}
@media (max-width: 991.98px) {
  .collab-header { position: static; }
  .collab-header__intro { max-width: 100%; }
}

/* Accordion wrapper */
.collab-accordion { display: flex; flex-direction: column; }

/* Individual accordion item */
.collab-item { border-bottom: 1px solid var(--color-border-default); }

/* Trigger button */
.collab-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary-blue);
  transition: color var(--duration-fast) var(--ease-out);
}
.collab-item__trigger:hover { color: var(--primary-blue-dark); }

/* Chevron (rotates when open) */
.collab-item__chevron {
  font-size: var(--text-lg);
  flex-shrink: 0;
  transition:
    transform var(--duration-base) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  color: var(--primary-blue);
}
.collab-item--open .collab-item__chevron { transform: rotate(90deg); }

/* Body – hidden by default */
.collab-item__body {
  overflow: hidden;
  max-height: 0;
  transition:
    max-height var(--duration-slow) var(--ease-out),
    padding    var(--duration-slow) var(--ease-out);
}
.collab-item__body[hidden] { display: block !important; }
.collab-item--open .collab-item__body {
  max-height: 600px;
  padding-bottom: var(--space-6);
}
.collab-item__body p {
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

/* Inline link inside accordion body */
.collab-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-blue);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.collab-item__link .chevron { transition: transform var(--duration-fast) var(--ease-out); }
.collab-item__link:hover {
  color: var(--primary-blue-dark);
}
.collab-item__link:hover .chevron { transform: translateX(4px); }

@media (max-width: 991.98px) {
  .collab-item:first-child .collab-item__trigger { padding-top: var(--space-5); }
}

/* =========================================================
   23️⃣  PRE‑FOOTER CTA SECTION
   ========================================================= */

.pre-footer-cta {
  position: relative;
  background-color: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-default);
  Padding-top: var(--space-8);
  Padding-bottom: var(--space-8);
  overflow: hidden;
}
.pre-footer-cta .container { position: relative; z-index: 2; }

.cta-bg {
  position: absolute;
  inset: 0;
  left: 144%;
  top: 67%;
  transform: translate(-30%, -49%) scale(10.4);
  pointer-events: none;
  z-index: 0;
}

/* Responsive positioning of the decorative background */
@media (max-width: 991.98px) { .cta-bg { left: 60%; top: 60%; transform: translate(520%, -48%) scale(10.4); } }
@media (max-width: 767.98px) { .cta-bg { left: 60%; top: 60%; transform: translate(434%, -38%) scale(10.4); } }
@media (min-width: 1000.98px) { .cta-bg { left: 60%; top: 60%; transform: translate(322%, -28%) scale(10.4); } }
@media (min-width: 1500.98px) { .cta-bg { left: 60%; top: 60%; transform: translate(339%, -28%) scale(10.4); } }
@media (max-width: 576px) {
  .cta-bg {
    top: 67%;
    opacity: .5;
  }
}

.pre-footer-cta__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: var(--space-3);
  max-width: 24em;
}
.pre-footer-cta__text {
  color: var(--color-text-tertiary);
  max-width: 49ch;
  margin-bottom: var(--space-8);
}
.pre-footer-cta__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .pre-footer-cta { padding: var(--space-12) 0; }
}
@media (max-width: 575.98px) {
  .pre-footer-cta__title { font-size: var(--text-xl); }
  .pre-footer-cta__actions { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   24️⃣  SERVICE‑FULL (two‑column content card)
   ========================================================= */

.serviceF-item {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.serviceF-item:last-child { border-bottom: none; }

.serviceF-item__text-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4) 0;
}
.serviceF-item__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
@media (max-width: 991.98px) { .serviceF-item__title { font-size: var(--text-lg); } }

.serviceF-item__body {
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 52ch;
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
}
@media (max-width: 991.98px) { .serviceF-item__body { max-width: 100%; } }

.serviceF-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: color var(--duration-fast) var(--ease-out);
}
.serviceF-item__link .chevron { transition: transform var(--duration-fast) var(--ease-out); }
.serviceF-item__link:hover {
  color: var(--primary-blue-dark);
}
.serviceF-item__link:hover .chevron { transform: translateX(4px); }

.serviceF-item__img-wrap {
  overflow: hidden;
  height: 100%;
  min-height: 300px;
}
.serviceF-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
@media (max-width: 991.98px) {
  .serviceF-item__img-wrap {
    min-height: 0;
    max-height: 160px;
  }
}
@media (max-width: 767.98px) {
  .serviceF-item__img-wrap {
    min-height: 220px;
    margin-top: var(--space-8);
  }
}
@media (max-width: 576px) {
  .serviceF-item__img-wrap { display: none; }
}

/* ---------------------------------------------------------
   Service‑Full carousel tweaks (used on the research page)
   --------------------------------------------------------- */
.serviceF-item--carousel .serviceF-item__img-wrap {
  min-height: 300px; /* keep a stable height */
}
.serviceF-item--carousel .serviceF-item__img-wrap .carousel,
.serviceF-item--carousel .serviceF-item__img-wrap .carousel-inner {
  width: 100%; height: 100%;
}
.serviceF-item--carousel .serviceF-item__img-wrap .carousel-item {
  position: absolute; top:0; left:0;
  width:100%; height:100%; margin:0;
}
.serviceF-item--carousel .serviceF-item__img-wrap .carousel-item img {
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}
@media (max-width: 991.98px) {
  .serviceF-item--carousel .serviceF-item__img-wrap {
    min-height: 0; max-height: 160px;
  }
}

/* Carousel (Bootstrap) customisations */
.carousel-item { transition: opacity 1.2s ease-in-out !important; }
.serviceF-item .carousel-indicators button.active,
.serviceF-item .carousel-indicators [data-bs-target].active {
  background-color: var(--primary-blue);
  opacity: 1;
}
.carousel-indicators { margin-bottom: var(--space-2); }

/* =========================================================
   25️⃣  PUBLICATIONS SECTION
   ========================================================= */

.publications {
  padding: var(--space-12) 0;
  background-color: var(--color-bg-primary);
}
.publications__header {
  margin-bottom: var(--space-8);
}
.publications__header h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-blue);
  text-transform: uppercase;
}
.publications__filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.publications__search-word {
  font-size: var(--text-lg);
  color: var(--primary-blue);
  font-weight: 500;
}

/* Input */
.publications__input {
  flex: 1 1 0;
  min-width: 340px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border-light);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.publications__input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(30,100,200,.15);
}
.publications__input:hover,
.publications__input:focus {
  border-color: var(--primary-blue);
  background-color: var(--color-bg-secondary);
}
.publications__input::placeholder {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  opacity: .85;
}
@media (min-width: 576px) {
  .publications__input {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
}

/* Scroll window */
.publications__window {
  height: 60vh;
  max-height: 450px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  padding: var(--space-3);
}

.publications__window::-webkit-scrollbar { width: 8px; }
.publications__window::-webkit-scrollbar-track { background: var(--color-bg-primary); }
.publications__window::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: 4px;
}
@media (max-width: 767.98px) {
  .publications__window { height: 55vh; max-height: 350px; }
}
@media (max-width: 575.98px) {
  .publications__window { height: 70vh; max-height: none; }
}

/* List of items */
.publications__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Individual publication item */
.publications__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}
.publications__item:hover {
  border-color: var(--primary-blue);
  background-color: var(--color-bg-secondary);
}
.publications__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}
.publications__meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}
.publications__link a {
  font-size: var(--text-sm);
  color: var(--primary-blue);
  text-decoration: underline;
  transition: color var(--duration-fast) var(--ease-out);
}
.publications__link a:hover,
.publications__link a:focus-visible {
  color: var(--primary-blue-dark);
}
@media (max-width: 991.98px) {
  .publications__title { font-size: var(--text-base); }
  .publications__meta { font-size: var(--text-xs); }
}
@media (max-width: 575.98px) {
  .publications__item { padding: var(--space-3); }
}

/* =========================================================
   26️⃣  NEWS SECTION (grid + cards)
   ========================================================= */

.news-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(3,1fr);
  margin-bottom: var(--space-6);
}
@media (max-width: 991.98px) { .news-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px) { .news-grid { grid-template-columns: 1fr; } }

/* News card – same base as .team‑card */
.news-card,
.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  height: 100%;
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform    var(--duration-fast) var(--ease-out);
}
.news-card:hover,
.project-card:hover {
  border-color: var(--primary-blue);
  transform: scale(1.02);
}

/* Image wrapper */
.news-card__img-wrap,
.project-card__img-wrap {
  overflow: hidden;
}

/* Image – keep a sensible aspect‑ratio */
.news-card__img-wrap img {
  width: 100%;
  padding: var(--space-4);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.project-card__img-wrap img {
  width: 100%;
  padding: var(--space-4);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.news-card:hover .news-card__img-wrap img,
.project-card:hover .project-card__img-wrap img {
  transform: scale(1.02);
}

/* Content area */
.news-card__content,
.project-card__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

/* Title */
.news-card__title,
.project-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

/* Date / meta line */
.news-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2);
}
.project-card__project {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2);
}

/* Excerpt */
.news-card__excerpt {
  flex: 1 1 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

/* Read‑more link */
.news-card__readmore {
  margin-top: auto;
  align-self: flex-end;
  font-size: var(--text-sm);
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}
.news-card__readmore:hover,
.news-card__readmore:focus-visible {
  color: var(--primary-blue-dark);
}

/* =========================================================
   27️⃣  NEWS ARTICLE PAGE (gallery + content)
   ========================================================= */

.news-article {
  display: flex;
  gap: var(--space-10);
  margin: var(--space-12) 0;
}
@media (max-width: 991.98px) {
  .news-article { flex-direction: column; }
}

/* Hide default carousel controls */
.news-article .carousel-control-prev,
.news-article .carousel-control-next {
  display: none !important;
}
.news-article .carousel-indicators { display: none !important; }

/* Image column */
.news-article__gallery {
  --article-image-height: 450px;
}
@media (min-width: 992px) {
  .news-article__gallery {
    flex: 1 1 45%;
    height: var(--article-image-height);
    display: flex;
    flex-direction: column;
  }
  .news-article__gallery .carousel {
    flex: 1 1 auto;
    min-height: 0;
  }
  .news-article__gallery .carousel-inner,
  .news-article__gallery .carousel-item {
    height: 100%;
  }
  .news-article__gallery .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

/* Thumbnails (desktop) */
@media (min-width: 992px) {
  .news-article__thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    overflow-x: auto;
  }
  .news-article__thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    flex: 0 0 auto;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .news-article__thumb.active,
  .news-article__thumb:hover { border-color: var(--primary-blue); }
}

/* Text column */
@media (min-width: 992px) {
  .news-article__content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
  }
}

/* Mobile (≤991.98px) – stacked layout */
@media (max-width: 991.98px) {
  .news-article__gallery {
    flex: 1 1 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .news-article__gallery .carousel-item img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .news-article__thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    overflow-x: auto;
  }
  .news-article__content { flex: 1 1 100%; }
}

/* Content typography */
.news-article__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}
.news-article__date {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-6);
}
.news-article__body p.intro {
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.75rem;
}
.news-article__body p { margin-bottom: var(--space-4); }

/* Back link */
.news-article__back {
  align-self: flex-end;
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: color var(--duration-fast) var(--ease-out);
}

/* =========================================================
   28️⃣  CONTACT SECTION
   ========================================================= */

.contact-section {
  padding: var(--space-10) 0 var(--space-16);
}

/* Left column – info */
.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-info__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: var(--space-4);
}
.contact-info__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 45ch;
  margin-bottom: var(--space-8);
}
@media (max-width: 576px) {
  .contact-info__text { margin-bottom: 0; }
}

/* Address block */
.contact-address {
  margin-top: auto;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.address-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.contact-address p {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.contact-email { font-weight: 600; }

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .contact-info { margin-bottom: var(--space-12); }
}
@media (max-width: 576px) {
  .contact-info { margin-bottom: var(--space-4); }
  .contact-address { display: none !important; }
}

/* Right column – form */
.contact-form-wrap {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  height: 100%;
}
.contact-form { width: 100%; }
.form-group {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-tertiary);
}

/* Inputs & textarea */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border-light);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
  outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(30,100,200,.15);
}
.contact-form textarea { resize: vertical; }
.contact-form button {
  margin-top: var(--space-4);
  cursor: pointer;
}

/* Row of two fields side‑by‑side */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.form-row .form-group {
  flex: 1 1 48%;
}
@media (max-width: 575.98px) {
  .form-row .form-group { flex: 1 1 100%; }
}

/* =========================================================
   29️⃣  FILTER BUTTONS (publications list)
   ========================================================= */

.filter-item .btn-lab--secondary {
  background-color: transparent;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  padding: var(--space-1) var(--space-3);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--text-base);
  border-width: 1px;
}
.filter-item .btn-lab--secondary:hover,
.filter-item .btn-lab--secondary:focus-visible {
  border-color: var(--primary-blue-dark);
  color: var(--primary-blue-dark) !important;
}

/* Dropdown arrow behaviour */
.dropdown-toggle:hover .chevron { transform: translateX(0); }
.dropdown-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
  transition: transform .35s var(--ease-out);
}

/* Align left‑edge of dropdowns */
.filter-item .dropdown-menu,
#sortDropdown + .dropdown-menu {
  right: auto;
}
.filter-item .dropdown-menu { min-width: 100%; }

/* Sort‑by button – same style as filter secondary */
#sortDropdown {
  padding: var(--space-1) var(--space-3);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--text-base);
}
#sortDropdown:hover,
#sortDropdown:focus-visible {
  background-color: transparent;
  border-color: var(--primary-blue-dark);
  color: var(--primary-blue-dark) !important;
}

/* Active filter chips */
.active-filter-chip {
  background-color: var(--primary-blue);
  color: var(--white);
  font-size: var(--text-xs);
  padding: .42rem .7rem;
  gap: .35rem;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}
.active-filter-chip:hover {
  background-color: var(--primary-blue-dark);
}
.active-filter-chip i { font-size: .9em; line-height: 1; }

/* Checkbox inside dropdown */
.filter-item .form-check-input:checked {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}
.filter-item .form-check-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 .15rem rgba(30,100,200,.2);
}

/* Clear‑all button */
#selected-filters .clear-all-btn {
  background: transparent;
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  padding: .42rem .70rem;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--space-1);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
#selected-filters .clear-all-btn:hover,
#selected-filters .clear-all-btn:focus-visible {
  background-color: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue-dark);
}

/* =========================================================
   30️⃣  PROJECT MODAL (full‑screen overlay)
   ========================================================= */

#project-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1055;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding-top: var(--space-12);
}
.project-modal {
  background: var(--color-bg-primary);
  border-radius: var(--space-2);
  max-width: 1000px;
  width: 95%;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  position: relative;
}
.project-modal .btn-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* Modal body layout */
.project-modal .modal-body {
  padding: var(--space-6);
}

/* Back link */
.project-modal .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--primary-blue);
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.project-modal .back-link:hover,
.project-modal .back-link:focus-visible {
  color: var(--primary-blue-dark);
}
.project-modal .back-link .chevron {
  transition: transform var(--duration-fast) var(--ease-out);
}
.project-modal .back-link:hover .chevron { transform: translateX(4px); }

/* Title */
.project-modal .detail-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: var(--space-4);
}

/* Info rows */
.project-modal .info-header {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-tertiary);
  margin: var(--space-6) 0 var(--space-3);
}
.project-modal .info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.project-modal .info-row strong {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.project-modal .info-row a {
  color: var(--primary-blue);
  text-decoration: underline;
}
.project-modal .info-row a:hover,
.project-modal .info-row a:focus-visible {
  color: var(--primary-blue-dark);
}

/* Images */
.project-modal .main-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--space-2);
  margin-bottom: var(--space-4);
}
.project-modal .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.project-modal .gallery img {
  flex: 1 1 48%;
  max-width: 48%;
  height: auto;
  object-fit: cover;
  border-radius: var(--space-2);
}
@media (max-width: 575.98px) {
  .project-modal .gallery img {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Main body copy */
.project-modal .detail-body {
  max-width: 65ch;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.project-modal .detail-body p { margin-bottom: var(--space-4); }

/* =========================================================
   31️⃣  SINGLE PAGE TITLE (alternative component)
   ========================================================= */

.single-page-title {
  padding: var(--space-12) 0 var(--space-8);
  text-align: left;
}
.single-page-title__heading {
  font-family: var(--font-body);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0;
}
.single-page-title__sub {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  max-width: 40rem;
  margin-bottom: 0;
}

/* =========================================================
   32️⃣  HERO SCROLL INDICATOR (home page)
   ========================================================= */

.hero__scroll-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-decoration: none;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: var(--space-12) 0 var(--space-5);
  width: 100%;
}
@media (max-width: 575px) {
  .hero__scroll-btn {
    position: relative;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-5) 0;
  }
}
.scroll-indicator {
  display: block;
  font-size: var(--text-3xl);
  color: var(--primary-blue);
}

/* Bounce animation */
@keyframes hero-bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}

/* =========================================================
   33️⃣  MISC / SMALL COMPONENTS
   ========================================================= */

/* Navbar spacer (prevents content being hidden under sticky nav) */
.navbar-spacer { height: var(--navbar-height); flex-shrink: 0; }

/* Anchor scroll‑margin – makes sure headings aren’t hidden */
[id] { scroll-margin-top: calc(var(--navbar-height) + var(--space-4)); }

/* Icon helpers used in multiple places */
.icon-envelope,
.icon-location,
.icon-envelope i,
.icon-location i { width: 1.25rem; height: 1.25rem; color: var(--primary-blue); }

/* Contact item (icon + text) */
.contact-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Generic filter chip and clear‑all button also share the
   same colour‑transition values – they’re grouped together
   for easy tweaking. */

   /* =========================================================
   33️⃣  PAGE‑SPECIFIC UTILITIES (Research page)
   ========================================================= */

/* ---------- NAVBAR ------------------------------------------------- */
.navbar-nav--overflow-visible { overflow: visible; }
.nav-link--pad-left          { padding-left: var(--space-2); }
.nav-item--no-margin        { margin:0; overflow:visible; }
.nav-chevron                { margin-bottom:1px; }

/* ---------- OFF‑CANVAS --------------------------------------------- */
.offcanvas-nav { padding-left:.35rem; }

/* ---------- SECTION CONTAINERS ------------------------------------- */
.container--pb-10 { padding-bottom: var(--space-10); }
.container--pb-16 {
   padding-bottom: var(--space-16); }

/* ---------- SECTION‑HEADER VARIANTS -------------------------------- */
.section-header--no-bottom { padding-bottom:0; }
.section-header__subtitle--pb-6 { padding-bottom: var(--space-6); }

/* ---------- PUBLICATIONS INPUT -------------------------------------- */
.publications__input--thin { border:0.5px solid var(--color-grey-400); }

/* ---------- NAVBAR CHEVRON ---------------------------------------- */
.nav-chevron { margin-bottom:1px; }

/* ---------- PAGE‑INTRO --------------------------------------------- */
.overline--no-transform { text-transform:none; }
.page-intro__title--lg  { font-size: var(--text-3xl); }

/* ---------- SERVICE‑F ITEM IMAGE ----------------------------------- */
.serviceF-img--pr { padding-right: var(--space-3); }

/* ---------- SECTION VARIANTS ---------------------------------------- */
.section--secondary { background-color: var(--color-bg-secondary); }
.section--pb-12    { padding-bottom: var(--space-12); }

/* ---------- PARTNERS BLOCK ------------------------------------------ */
.section--secondary { background-color: var(--color-bg-secondary); }   /* duplicate – harmless */

/* ---------- COLLABORATE SECTION ------------------------------------ */
.collab-section   { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.collab-container { padding: var(--space-8) 0; }

/* ---------- CONTACT DETAILS ---------------------------------------- */
.contact-details-title {
  padding:0;
  margin:0;
  color:var(--secondary-grey);
  font-weight:600;
}
.contact-hr {
  margin:0;
  width:65%;
  max-width:400px;
  padding-bottom:var(--space-1);
  border:none;
  border-top:1px solid var(--color-border-light);
}
.contact-icon--mt { margin-top:2px; }

/* ---------- FORM SUBMIT BUTTON ------------------------------------- */
.contact-submit { margin-top: var(--space-4); }
.contact-submit-text {
  padding-right: var(--space-2);
  padding-left:  var(--space-3);
}

/* overflow‑visible (used on the <a> inside the contact‑pill) */
.overflow-visible { overflow: visible; }

/* background colour helpers for the “partners” title */
.bg-primary-blue-10 { background: var(--primary-blue-10); }
.bg-whiteish          { background-color: rgb(249,250,251); }

/* generic zero‑margin / zero‑padding utilities */
.p-zero { padding: 0; }
.m-zero { margin: 0; }

/* contact‑details title (replaces the inline style on <h5>) */
.contact-details-title {
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: var(--color-text-tertiary);           /* matches the design */
}


/* submit button spacing (replaces the inline style on the button) */
.contact-submit { margin-top: var(--space-4); }

/* text inside the submit button (replaces the inline style on the <span>) */
.contact-submit-text {
    padding-right: var(--space-2);
    padding-left:  var(--space-3);
}

/* Section colour helper – replaces the inline background colour */
.section--secondary { background-color: var(--color-bg-secondary); }

/* Section‑header without bottom padding */
.section-header--no-bottom { padding-bottom: 0; }

* ---- title inside the contact‑address block ---- */
.contact-details-title {
    padding: 0;
    margin: 0;
    color: var(--secondary-grey);
    font-weight: 600;
}

/* ---- horizontal rule used as a thin separator ---- */
.contact-hr {
    margin: 0;
    width: 50%;
    max-width: 320px;
    padding-bottom: var(--space-1);
    border: none;
    border-top: 1px solid var(--color-border-light);
}

/* ---- fixed‑size icons (envelope & location pin) ---- */
img.contact-icon {
    width: 24px !important;          /* forces the width */
    height: 24px !important;         /* forces the height (overrides height:auto) */
    max-width: none !important;      /* cancels the global max‑width:100% rule */
    flex: 0 0 auto;                  /* prevents flex‑box from stretching it */
    object-fit: contain;             /* safety – keep the SVG inside the box */
}

/* tiny vertical tweak that the original inline style gave the pin icon */
.contact-icon--mt { margin-top: 2px; }


/* ---- submit button – top margin (the whole button) ---- */
.contact-submit {
    margin-top: var(--space-4);
}

/* ---- inner span of the submit button – left/right padding ---- */
.contact-submit-text {
    padding-right: var(--space-2);
    padding-left:  var(--space-3);
}

/* -----------------------------------------------------------------
   1️⃣  FULL‑SCREEN OVERLAY (dark backdrop, centered modal)
   ----------------------------------------------------------------- */

#project-modal-container {
}

/* The overlay that covers the whole viewport */

#project-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1055;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding-top: var(--space-12);
}

/* The actual modal “card” that holds the detail page */

.project-modal {
  background: var(--color-bg-primary);
  border-radius: var(--space-2);
  max-width: 1000px;
  width: 95%;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  position: relative;
}

/* -----------------------------------------------------------------
   2️⃣  Close button (same look as the native Bootstrap “X”)
   ----------------------------------------------------------------- */

.project-modal .btn-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* -----------------------------------------------------------------
   3️⃣  Inside the modal – the two‑column layout
   ----------------------------------------------------------------- */

.project-modal .modal-body {
  padding: var(--space-6) var(--space-6);
}

/* left column (text) */

.project-modal .detail-left {
}

/* right column (images) */

.project-modal .detail-right {
}

/* The back‑to‑projects link – same as the “tertiary” link used elsewhere */

.project-modal .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-blue);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.project-modal .back-link:hover, .project-modal .back-link:focus-visible {
  color: var(--primary-blue-dark);
}

.project-modal .back-link .chevron {
  transition: transform var(--duration-fast) var(--ease-out);
}

.project-modal .back-link:hover .chevron {
  transform: translateX(4px);
}

/* Title – large primary‑blue heading */

.project-modal .detail-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: var(--space-4);
}

/* Project‑info header (the “overline”) */

.project-modal .info-header {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Individual info rows – label + value */

.project-modal .info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.project-modal .info-row strong {
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Links inside info rows – primary‑blue */

.project-modal .info-row a {
  color: var(--primary-blue);
  text-decoration: underline;
}

.project-modal .info-row a:hover, .project-modal .info-row a:focus-visible {
  color: var(--primary-blue-dark);
}

/* -----------------------------------------------------------------
   4️⃣  Image handling (main image + gallery)
   ----------------------------------------------------------------- */

.project-modal .main-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--space-2);
  margin-bottom: var(--space-4);
}

.project-modal .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project-modal .gallery img {
  flex: 1 1 48%;
  max-width: 48%;
  height: auto;
  object-fit: cover;
  border-radius: var(--space-2);
}

/* On very small screens turn the gallery into a single column */

@media (max-width: 575.98px) {
  .project-modal .gallery img {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* -----------------------------------------------------------------
   5️⃣  Keep the same “prose” style for the main body copy
   ----------------------------------------------------------------- */

.project-modal .detail-body {
  max-width: 65ch;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* optional – make paragraphs have bottom margin */

.project-modal .detail-body p {
  margin-bottom: var(--space-4);
}

.project‑info‑row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--primary-blue);
}

.project‑info‑row:last-child {
  border-bottom: none;
}

/* -------------------------------------------------------------
       2️⃣  Small muted line that shows “type | year”
       ------------------------------------------------------------- */

.project‑meta‑line {
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------
       3️⃣  Carousel thumbnail strip – same look as news pages
       ------------------------------------------------------------- */

#projectThumbStrip {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
}

#projectThumbStrip .news‑article__thumb {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

#projectThumbStrip .news‑article__thumb.active, #projectThumbStrip .news‑article__thumb:hover {
  border-color: var(--primary-blue);
}

#projectCarouselInner {
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#projectCarouselInner#projectCarouselInner {
}

/* 2. Each slide fills the container */

#projectCarousel .carousel-item {
  height: 100%;
  width: 100%;
  transition: transform 0.6s ease-in-out;
}

/* 3. Image fully covers slide */

#projectCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.view-more {
  display: flex;                /* <-- main thing */
  justify-content: space-between; /* push children to opposite ends */
  align-items: center; 
}

  @media (max-width: 767.98px) {
  .view-more {
    flex-direction: column;
    align-items: stretch;
    text-align: center; 
  }
}