body { 
  padding-top: 40px; 
  margin: 0;
  padding: 40px 0 0 0;
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Main content spacing to avoid sidebar overlap */
.container {
  margin-left: 180px; /* Reduced margin for more content space */
  padding-left: 20px;
  padding-right: 20px;
  max-width: calc(100vw - 200px); /* Ensure content doesn't get cut off */
  width: calc(100vw - 200px);
}

/* Ensure page content has proper spacing from navbar */
.page-content {
  margin-top: 0;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 1200px) {
  .container {
    margin-left: 160px; /* Further reduced margin for medium screens */
    padding-left: 15px;
    padding-right: 15px;
    max-width: calc(100vw - 180px);
    width: calc(100vw - 180px);
  }
}

@media (max-width: 768px) {
  .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  #lft-sidebar {
    display: none !important; /* Hide sidebar on mobile */
  }
  
  /* Ensure navbar is properly visible on mobile */
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  
  /* Adjust body padding for mobile navbar */
  body {
    padding-top: 56px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Make sure header doesn't overlap with navbar */
  .bg-hero {
    margin-top: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Responsive header text */
  .bg-hero h1 {
    font-size: 2rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .bg-hero .lead {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Fix row spacing on mobile */
  .row.mt-4, .row.mt-5 {
    margin-top: 1.5rem !important;
  }
  
  /* Better spacing for sections */
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Mobile-responsive heading styles - remove decorative backgrounds */
  .page-content h2 {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 0px !important;
    margin-bottom: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
    font-size: 1.5rem !important;
    position: relative !important;
    color: #333 !important;
    font-weight: bold !important;
  }
  
  .page-content h2::before {
    display: none !important;
  }
  
  /* Implementation page mobile heading styles - remove decorative backgrounds */
  .implementation-page .page-content h2:not(.accordion-header) {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 0px !important;
    margin-bottom: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
    font-size: 1.5rem !important;
    position: relative !important;
    color: #333 !important;
    font-weight: bold !important;
  }
  
  .implementation-page .page-content h2:not(.accordion-header)::before {
    display: none !important;
  }
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #990B7F !important; }
.bg-hero { background-color: #e0b4d7 !important; }

/* Navbar logo styling */
.navbar-logo {
  width: 150px;
  max-height: 100px;
  object-fit: contain;
  position: relative;
  z-index: 10;
  margin: 10px;
  border-radius: 10px;
}

/* Make navbar smaller to allow logo to hang off */
.navbar {
  min-height: 40px;
  padding: 0.25rem 0;
  overflow: visible;
}

.navbar-brand {
  position: absolute;
  top: -10px;
  left: 20px;
  z-index: 10;
  margin: 0;
}

/* Mega Menu Styling */
.mega-menu {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  background: #B261A8;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  width: 100vw;
  z-index: 1050;
  transform: translateX(calc(-50vw + 50%));
}

.mega-menu .container-fluid {
  max-width: none;
  width: 100%;
  padding: 0 40px;
}

.mega-menu .row {
  margin: 0;
}

.mega-menu .col-md-4 {
  padding: 0 15px;
}

.mega-menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  padding: 0 20px;
}

.mega-menu-row:last-child {
  margin-bottom: 0;
}

.mega-menu-row .dropdown-item {
  flex: 1;
  display: inline-block !important;
  float: none !important;
  text-align: left;
  margin: 0 10px;
}

/* Ensure dropdown doesn't constrain mega menu */
.nav-item.dropdown {
  position: static;
}

.dropdown-menu.mega-menu {
  position: fixed !important;
  top: 40px !important;
  left: 0 !important;
  right: 0 !important;
  background: #B261A8 !important;
  width: 100vw !important;
  transform: none !important;
  z-index: 1060 !important;
}

/* Hide side navigation when mega menu is open */
.dropdown-menu.mega-menu.show ~ * #lft-sidebar,
.dropdown-menu.mega-menu.show ~ #lft-sidebar,
body:has(.dropdown-menu.mega-menu.show) #lft-sidebar {
  display: none !important;
}

.mega-menu .dropdown-header {
  color: #990B7F;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #990B7F;
}

.mega-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
}

.mega-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  padding: 15px 20px;
  text-decoration: none;
  color: black;
}

.mega-menu-icon {
  width: 40px;
  height: 40px;
  background-color: #990B7F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.mega-menu-icon i {
  color: white !important;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translateX(4px);
}

.mega-menu-content {
  flex: 1;
}

.mega-menu-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 4px;
  color: inherit;
}

.mega-menu-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.mega-menu-item:hover .mega-menu-desc {
  color: #888;
}

/* Mobile navbar logo */
@media (max-width: 768px) {
  .navbar-logo {
    width: 80px;
    max-height: 50px;
  }
  
  .navbar {
    min-height: 50px;
    padding: 0.25rem 1rem;
  }
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

.dropdown-menu.show { 
    background-color: #7EC4E4; }

/* Navbar dropdown styling */
.dropdown-menu {
  background-color: #c6e3f7 !important;
}

.dropdown-item:hover {
  background-color: white !important;
  color: #333 !important;
}

/* Dropdown menu icon styling */
.dropdown-item i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
  color: #333;
}

.dropdown-item:hover i {
  color: #333;
}

/* footer */
footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #990B7F !important;
  position: relative;
  left: 0;
  right: 0;
}

footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: #6FB9EB; text-decoration: underline; }

a.nav-link { color: rgb(255, 255, 255); font-size: larger; transition: 0.2s ease; font-weight:400;}
a.nav-link:hover { color: #6FB9EB; }

/* Ensure no white space on sides */
* {
  box-sizing: border-box;
}

/* Fix any container width issues */
.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Ensure full width coverage and fix scrollbar white space */
body, html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  min-width: 0; /* Allow content to shrink if needed */
}

/* Fix any potential white space on the right */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* Ensure footer container extends full width */
footer .container {
  max-width: 100%;
  width: 100%;
}

/* Ensure text content doesn't get cut off */
p, li, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Ensure content containers have proper spacing */
.col, .col-lg-8, .col-lg-4, .col-lg-6, .col-lg-3 {
  min-width: 0; /* Allow columns to shrink */
  word-wrap: break-word;
}


/* Lateral Flow Sidebar with Text in Column */
#lft-sidebar {
  position: fixed;
  top: 50%;
  left: 20px;
  width: 160px;
  max-height: calc(100vh - 120px);
  padding: 10px;
  border: 3px solid #d0d0d0;
  border-radius: 30px;
  background: #ffffff;
  display: flex;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1050;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15), 
              0 2px 8px rgba(0,0,0,0.1),
              inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hide sidebar on engineering page */
body:has(#engineeringCarousel) #lft-sidebar,
body:has(.cycle-container) #lft-sidebar {
  display: none !important;
}
body:has(#engineeringCarousel) .page-content { margin-left: 0 !important; }

/* Hide sidebar on home page and adjust layout */
body:has(.hero-section) #lft-sidebar {
  display: none !important;
}
body:has(.hero-section) .page-content { 
  margin-left: 0 !important; 
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body:has(.hero-section) .container { 
  margin-left: 0 !important; 
  max-width: 100% !important;
  width: 100% !important;
  padding-top: 0 !important;
}

/* Home page specific adjustments */
body:has(.hero-section) {
  padding-top: 40px !important; /* Only navbar padding */
}

body:has(.hero-section) .hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce gap between hero and stats on home page */
body:has(.hero-section) .stats-section {
  margin-top: -2rem !important;
  padding-top: 0.25rem !important;
}

/* ===================== */
/* TB Comparison Section */
/* ===================== */
.tb-comparison-section {
  background-color: white;
  padding: 4rem 0;
  margin: 2rem 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.comparison-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 52px !important; /* 2rem + 20px = 52px */
  margin-top: 0 !important;
  background: none !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.comparison-title::before {
  display: none !important;
}

.comparison-title::after {
  display: none !important;
}

/* Force spacing for comparison container */
.comparison-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===================== */
/* Bottleneck Section */
/* ===================== */
.bottleneck-section {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.bottleneck-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
  background: none !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.bottleneck-title::before {
  display: none !important;
}

.bottleneck-title::after {
  display: none !important;
}

.bottleneck-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
  text-align: left;
}

/* ===================== */
/* Our Solution Section  */
/* ===================== */
.solution-section {
  text-align: center;
  padding: 2rem 0 3rem 0;
}

.solution-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 52px !important; /* match comparison title-to-box spacing */
  background: none !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.solution-title::before,
.solution-title::after {
  display: none !important;
}

.solution-image {
  display: block;
  max-width: 100%;
  width: 960px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* ===================== */
/* Promotional Video Section */
/* ===================== */
.promotional-video-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
  background: none !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* ============================= */
/* Home Intro Magnify Animation  */
/* ============================= */
body:has(#magnify-overlay) {
  overflow: hidden; /* prevent scroll during intro */
}

#magnify-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff; /* ensure fully visible background */
  display: grid;
  place-items: center;
  animation: overlayFade 2.1s ease forwards; /* fade after zoom completes */
}

.magnify-glass {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 8px solid #94167C; /* brand purple */
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  transform: scale(0.08); /* start very small */
  animation: magnifyZoom 1.6s cubic-bezier(0.15, 0.9, 0.2, 1.0) forwards; /* dramatic zoom */
  background: radial-gradient(circle at 40% 40%, #ffffff 55%, #f5f5f5 100%);
  overflow: visible;
  will-change: transform, box-shadow;
}

/* Inner light-blue glass fill */
.magnify-glass .glass-fill {
  position: absolute;
  inset: 8px; /* inside the 8px border */
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 18%, #cfe3f5 40%, #c3d9f0 60%, #b7cfe9 100%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.06);
}

/* Soft glare highlight */
.magnify-glass .glass-glare {
  position: absolute;
  left: 28px;
  top: 22px;
  width: 70px;
  height: 24px;
  border-radius: 50px;
  background: linear-gradient( to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.05) );
  filter: blur(0.2px);
  transform: rotate(-8deg);
  opacity: 0.9;
}

.magnify-glass .magnify-handle {
  position: absolute;
  display: block;
  width: 130px;
  height: 16px;
  background: #333333;
  border-radius: 8px;
  left: 123px; /* another 1px closer */
  top: 123px;
  transform: rotate(45deg);
  transform-origin: 0 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

.magnify-glass::before,
.magnify-glass::after {
  /* remove connector pieces; black handle connects directly */
  content: none !important;
  display: none !important;
}

.magnify-glass::after {
  content: '';
  position: absolute;
  width: 90px;              /* longer handle */
  height: 12px;             /* thicker handle */
  background: #94167C;
  border-radius: 6px;
  left: 96px;               /* extend outward from the ring */
  top: 96px;
  transform: rotate(45deg);
  transform-origin: 0 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

@keyframes magnifyZoom {
  0%   { transform: scale(0.08); filter: blur(2px); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
  60%  { transform: scale(1.0);  filter: blur(0);   box-shadow: 0 14px 50px rgba(0,0,0,0.28); }
  100% { transform: scale(11);   filter: blur(0.5px); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

@keyframes overlayFade {
  0%    { opacity: 1; }
  75%   { opacity: 1; }
  100%  { opacity: 0; visibility: hidden; }
}

/* Hide any legacy intro elements that could overlap */
#intro,
.intro-glass,
.intro-lung-preview {
  display: none !important;
}

/* ============================= */
/* Live wiki home overrides      */
/* Ensure parity with local build */
/* ============================= */

/* Remove wiki theme H2 backgrounds for home sections */
.tb-comparison-section h2,
.bottleneck-title,
.solution-title,
.promotional-video-title {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.tb-comparison-section h2::before,
.tb-comparison-section h2::after,
.bottleneck-title::before,
.bottleneck-title::after,
.solution-title::before,
.solution-title::after,
.promotional-video-title::before,
.promotional-video-title::after {
  display: none !important;
}

/* Center containers consistently on live wiki */
.tb-comparison-section .container,
.bottleneck-section,
.solution-section,
#promotional-video .col-lg-6 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Guarantee magnify overlay sits on top on live */
#magnify-overlay { z-index: 2147483647 !important; }

.promotional-video-title::before {
  display: none !important;
}

.promotional-video-title::after {
  display: none !important;
}

.comparison-column {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.comparison-column:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.active-tb {
  border-color: #dc3545;
}

.active-tb .column-title {
  color: #dc3545;
}

.latent-tb {
  border-color: #6c757d;
}

.latent-tb .column-title {
  color: #6c757d;
}

.column-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-list li {
  padding: 0.75rem 0;
  font-size: 1.1rem;
  color: #333;
  border-bottom: 1px solid #e9ecef;
  text-align: center;
  font-weight: 500;
}

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

/* Responsive design */
@media (max-width: 768px) {
  .comparison-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .comparison-title {
    font-size: 1.5rem;
  }
  
  .comparison-column {
    padding: 1.5rem;
  }
  
  .column-title {
    font-size: 1.25rem;
  }
  
  .comparison-list li {
    font-size: 1rem;
  }
}


/* Sticky position when scrolled down */
#lft-sidebar.sticky {
  top: 120px; /* Logo height (100px) + navbar (40px) + 20px gap */
  transform: none;
  max-height: calc(100vh - 160px);
}

.sample-well {
  width: 40px;
  height: 40px;
  border: 3px solid #d0d0d0;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffb3d9 20%, #ffcce6 50%, #fff 80%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
              0 0 8px rgba(255, 179, 217, 0.3);
  position: relative;
}

.flow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.flow-column {
  width: 110px;
  padding: 8px 0;
  border-radius: 12px;
  background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.15),
              inset 0 -2px 4px rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}

.text-in-column {
  color: #333;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 4px;
  cursor: pointer;
  transition: all 0.4s ease;
  width: 95%;
  text-align: center;
  border-radius: 6px;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
  flex-shrink: 0;
}

.text-in-column.lit {
  color: #94167C;
  text-shadow: 0 0 10px #94167C, 0 0 20px rgba(148, 22, 124, 0.6);
  font-weight: 800;
  background: rgba(148, 22, 124, 0.15);
  box-shadow: 0 0 15px rgba(148, 22, 124, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.text-in-column:hover {
  background: rgba(148, 22, 124, 0.1);
  transform: scale(1.02);
}

/* Main section styling (h2 elements) */
.text-in-column.main-section {
  font-weight: 900;
  font-size: 12px;
  color: #94167C;
  border-left: 3px solid #94167C;
  padding-left: 8px;
  margin-bottom: 4px;
}

.text-in-column.main-section.lit {
  color: #94167C;
  text-shadow: 0 0 15px #94167C, 0 0 25px rgba(148, 22, 124, 0.8);
  font-weight: 900;
}

/* Sub-section styling (h3 elements) - now the primary sidebar items */
.text-in-column.sub-section {
  font-weight: 700;
  font-size: 11px;
  color: #333;
  margin-left: 0;
  border-left: 2px solid #94167C;
  padding-left: 8px;
  margin-bottom: 2px;
}

.text-in-column.sub-section.lit {
  color: #94167C;
  text-shadow: 0 0 10px #94167C, 0 0 20px rgba(148, 22, 124, 0.6);
  font-weight: 800;
}

/* Notching shape background for main content headings */
.page-content h2 {
  position: relative;
  display: inline-block;
  padding: 8px 30px;
  margin: 0;
  color: #333;
  font-weight: bold;
}

.line{height:1px;background:#ffffff;margin:8px 0 12px}

.page-content h2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 60px);
  height: 40px;
  background: #6fb9eb;
  border-radius: 10px;
  z-index: -1;
  opacity: 0.9;
  transition: all 0.3s ease;
}

/* Remove hover effects for non-interactive headings */
.page-content h2 {
  cursor: default;
}

.page-content h2:hover::before {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: none;
}

/* Implementation page specific heading styles with purple beveled corners */
.implementation-page .page-content h2:not(.accordion-header) {
  position: relative;
  display: inline-block;
  padding: 8px 30px;
  margin: 0;
  color: #333;
  font-weight: bold;
}

.implementation-page .page-content h2:not(.accordion-header)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 60px);
  height: 40px;
  background: #b261a8;
  clip-path: polygon(
    20px 0%, 
    calc(100% - 20px) 0%, 
    100% 15px, 
    100% calc(100% - 15px), 
    calc(100% - 20px) 100%, 
    20px 100%, 
    0% calc(100% - 15px), 
    0% 15px
  );
  z-index: -1;
  opacity: 0.9;
  transition: all 0.3s ease;
}

/* Remove hover effects for non-interactive headings */
.implementation-page .page-content h2:not(.accordion-header):not(.dropdown-heading) {
  cursor: default;
}

.implementation-page .page-content h2:not(.accordion-header):not(.dropdown-heading):hover::before {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: none;
}

/* Custom dropdown styles */
.dropdown-heading {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 30px;
  margin: 0;
  position: relative;
  transition: all 0.3s ease;
}

.dropdown-heading:hover {
  background-color: rgba(178, 97, 168, 0.1);
  border-radius: 5px;
}

.dropdown-arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.dropdown-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  padding-top: 15px;
}

.dropdown-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
}



  #UpTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 15px; /* Place the button at the bottom of the page */
    right: 15px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #c6e3f7; /* Set a background color */
    color: #990B7F; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    height: 50px;
    width: 50px;
    border-radius: 50%; /* Rounded shape */
    font-size: 18px; /* Increase font size */
  }
  
  #UpTop:hover {
    color: #6fb9eb; /* Change color on hover */
  }


 /* Cassette lateral flow test*/
.lft {
  width: 340px;
  height: 100px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-right: 60px;
}

/* Window */
.window {
  width: 180px;
  height: 40px;
  background: #eee;
  border: 2px inset #bbb;
  border-radius: 6px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}


/* Lines */
.lfline {
  width: 4px;
  height: 90%;
  background: transparent;
  opacity: 0;
  transform: translateX(80px); /* start from right side */
}

.lfline.show {
  background: red;
  animation: flow 2s forwards;
  animation-delay: 0.5s;
}

@keyframes flow {
  0% {
    transform: translateX(80px);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Labels aligned with lanes, rotated */
.labels {
  position: absolute;
  bottom: 4px;
  left: 42%;
  transform: translateX(-50%);
  width: 180px; 
  display: flex;
  justify-content: space-evenly;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.labels span {
  width: 4px; 
  text-align: center;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* "S" label near sample well, rotated */
.sample-label {
  position: absolute;
  right: 43px; 
  bottom: 8px; 
  font-size: 16px;
  font-weight: bold;
  color: #333;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Sample well (hole) */
.sample-hole {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eee;
  border: 2px inset #ddd;
  position: absolute;
  right: 38px;
  top: 38px;
}

/* Sample well frame (outer ring) */
.sample-hole-frame {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #bbb;
  position: absolute;
  right: 33px;
  top: 33px;
  background: transparent;
  pointer-events: none;
}

/* Pipette icon (wide top, narrow bottom) */
.pipette {
  width: 14px;  
  height: 60px;
  background: linear-gradient(to bottom, #e0e0e0, #c1c1c1);
  position: absolute;
  right: 44px;
  top: -60px;
  opacity: 0;

  /* tapering effect */
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
  border-radius: 2px;
}


/* Pipette animation */
.pipette.animate {
  animation: pipette-move 2s forwards;
}

@keyframes pipette-move {
  0% {
    top: -60px;
    opacity: 1;
  }
  40% {
    top: -10px;
    opacity: 1;
  }
  70% {
    top: -10px;
    opacity: 1;
  }
  100% {
    top: -60px;
    opacity: 0;
  }
}

/* Drop animation */
.drop {
  width: 12px;
  height: 12px;
  background: red;
  border-radius: 50%;
  position: absolute;
  right: 45px;
  top: -5px;
  opacity: 0;
  z-index: 2;
}

.drop.animate {
  animation: fall 1s forwards;
  animation-delay: 0.5s;
}

@keyframes fall {
  0% {
    top: -10px;
    opacity: 1;
  }
  70% {
    top: 40px;
    opacity: 1;
  }
  100% {
    top: 45px;
    opacity: 0;
  }
}

/* Buttons */
.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #007bff;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #0056b3;
}

/* Accordion button styles */
.accordion-button {
  background-color: #94167C !important;
  color: white !important;
  border: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: #94167C !important;
  color: white !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  background-color: #94167C !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgba(148, 22, 124, 0.25) !important;
}

.accordion-button:hover {
  background-color: #3A8DBD !important;
  color: white !important;
}

/* Custom accordion button colors */
.accordion-production {
  background-color: #94167C !important;
}
.accordion-production:hover,
.accordion-production:not(.collapsed) {
  background-color: #DA99CD !important;
}

.accordion-skills {
  background-color: #B261A8 !important;
}
.accordion-skills:hover,
.accordion-skills:not(.collapsed) {
  background-color: #D286C1 !important;
}

.accordion-validation {
  background-color: #6FB9EB !important;
}
.accordion-validation:hover,
.accordion-validation:not(.collapsed) {
  background-color: #99CEF1 !important;
}

.accordion-distribution {
  background-color: #56A7DA !important;
}
.accordion-distribution:hover,
.accordion-distribution:not(.collapsed) {
  background-color: #c6e3f7 !important;
}

.accordion-storage {
  background-color: #5AAED6 !important;
}
.accordion-storage:hover,
.accordion-storage:not(.collapsed) {
  background-color: #b3d2e5 !important;
}

.accordion-testing {
  background-color: #3A8DBD !important;
}
.accordion-testing:hover,
.accordion-testing:not(.collapsed) {
  background-color: #7EC4E4 !important;
}

.accordion-upscaling {
  background-color: #1E5B78 !important;
}
.accordion-upscaling:hover,
.accordion-upscaling:not(.collapsed) {
  background-color: #5AAED6 !important;
}

.accordion-default {
  background-color: #94167C !important;
}
.accordion-default:hover,
.accordion-default:not(.collapsed) {
  background-color: #DA99CD !important;
}

/* Business model accordion styling for entrepreneurship page */
#collapseBusinessModel .accordion-button,
#businessModelAccordion .accordion-button {
  background-color: #94167C !important;
  color: white !important;
}
#collapseBusinessModel .accordion-button:hover,
#businessModelAccordion .accordion-button:hover {
  background-color: #3A8DBD !important;
  color: white !important;
}
#collapseBusinessModel .accordion-button:not(.collapsed),
#businessModelAccordion .accordion-button:not(.collapsed) {
  background-color: #94167C !important;
  color: white !important;
}

/* 7Ps Marketing Mix Circles */
.seven-ps-container {
  display: block !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

.ps-item {
  display: block !important;
  width: 100% !important;
  margin-bottom: 30px !important;
  clear: both !important;
}

/* Left alignment - button on left, text on right */
.seven-ps-container .ps-item.ps-left .ps-circle {
  float: left !important;
  margin-right: 20px !important;
  display: block !important;
}

.seven-ps-container .ps-item.ps-left .ps-content {
  margin-left: 220px !important;
}

/* Right alignment - button on right, text on left */
.seven-ps-container .ps-item.ps-right .ps-circle {
  float: right !important;
  margin-left: 20px !important;
  display: block !important;
}

.seven-ps-container .ps-item.ps-right .ps-content {
  margin-right: 220px !important;
}

.ps-circle {
  width: 200px;
  height: 80px;
  border-radius: 40px;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.ps-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.ps-circle:active {
  transform: scale(0.98);
}

.ps-item::after {
  content: "";
  display: table;
  clear: both;
}

.ps-content {
  display: block;
}

.ps-text {
  background-color: #f8f9fa;
  border-left: 4px solid #94167C;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in;
  margin-top: 15px;
}

.ps-text h5 {
  color: #94167C;
  font-weight: bold;
  margin-bottom: 10px;
}

.ps-text p {
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: #333;
}

.ps-text p:last-child {
  margin-bottom: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design for 7Ps */
@media (max-width: 768px) {
  .ps-item.ps-left .ps-circle,
  .ps-item.ps-right .ps-circle {
    float: none !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
  }
  
  .ps-item.ps-left .ps-content,
  .ps-item.ps-right .ps-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .ps-circle {
    width: 160px;
    height: 60px;
    font-size: 14px;
    border-radius: 30px;
  }
  
  .seven-ps-container {
    padding: 10px;
  }
  
  .ps-text {
    padding: 15px;
  }
}

/* Implementation Plan Circles - Same layout as 7Ps */
.implementation-container {
  display: block !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

.impl-item {
  display: block !important;
  width: 100% !important;
  margin-bottom: 30px !important;
  clear: both !important;
}

/* Left alignment - button on left, text on right */
.impl-item.impl-left .impl-circle {
  float: left !important;
  margin-right: 20px !important;
}

.impl-item.impl-left .impl-content {
  margin-left: 220px !important;
}

/* Right alignment - button on right, text on left */
.impl-item.impl-right .impl-circle {
  float: right !important;
  margin-left: 20px !important;
}

.impl-item.impl-right .impl-content {
  margin-right: 220px !important;
}

.impl-item::after {
  content: "";
  display: table;
  clear: both;
}

.impl-content {
  display: block;
}

.impl-circle {
  width: 200px;
  height: 80px;
  border-radius: 40px;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.impl-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.impl-circle:active {
  transform: scale(0.98);
}

.impl-text {
  background-color: #f8f9fa;
  border-left: 4px solid #94167C;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in;
  margin-top: 15px;
}

.impl-text h5 {
  color: #94167C;
  font-weight: bold;
  margin-bottom: 10px;
}

.impl-text p {
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: #333;
}

.impl-text p:last-child {
  margin-bottom: 0;
}

/* Responsive design for Implementation */
@media (max-width: 768px) {
  .impl-item.impl-left .impl-circle,
  .impl-item.impl-right .impl-circle {
    float: none;
    margin: 0 auto 15px auto;
    display: block;
  }
  
  .impl-item.impl-left .impl-content,
  .impl-item.impl-right .impl-content {
    margin-left: 0;
    margin-right: 0;
  }
  
  .impl-circle {
    width: 160px;
    height: 60px;
    font-size: 14px;
    border-radius: 30px;
  }
  
  .implementation-container {
    padding: 10px;
  }
  
  .impl-text {
    padding: 15px;
  }
}

/* IP Section - Centered vertical layout */
.ip-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ip-item {
  width: 100% !important;
  margin-bottom: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 1000px !important;
  box-sizing: border-box !important;
}

.ip-circle {
  width: 300px;
  height: 80px;
  border-radius: 40px;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.ip-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.ip-circle:active {
  transform: scale(0.98);
}

.ip-content {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.ip-text {
  background-color: #f8f9fa;
  border-left: 4px solid #99CEF1;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in;
}

.ip-text h5 {
  color: #99CEF1;
  font-weight: bold;
  margin-bottom: 10px;
}

.ip-text p {
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: #333;
}

.ip-text p:last-child {
  margin-bottom: 0;
}

/* Responsive design for IP */
@media (max-width: 768px) {
  .ip-container {
    padding: 10px;
  }
  
  .ip-circle {
    width: 280px;
    height: 70px;
    font-size: 14px;
    border-radius: 35px;
  }
  
  .ip-content {
    max-width: 100%;
  }
  
  .ip-text {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .ip-circle {
    width: 250px;
    height: 60px;
    font-size: 12px;
    border-radius: 30px;
  }
}

/* Detailed Business Model Dropdown Colors */
#headingBusinessModel .accordion-button {
  background-color: #56A7DA !important;
  color: white !important;
}

#headingBusinessModel .accordion-button:hover {
  background-color: #99CEF1 !important;
  color: white !important;
}

#headingBusinessModel .accordion-button:focus {
  background-color: #56A7DA !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgba(86, 167, 218, 0.25) !important;
}

#headingBusinessModel .accordion-button:not(.collapsed) {
  background-color: #56A7DA !important;
  color: white !important;
}

/* ===================== */
/* Engineering Carousel  */
/* ===================== */
.engineering-carousel-container { position: relative; max-width: 1200px; margin: 0 auto 40px; background: #f8f9fa; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; padding-bottom: 40px; }
.engineering-carousel { position: relative; width: 100%; height: 600px; overflow: hidden; }
.engineering-carousel .carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateX(100%); transition: transform .6s cubic-bezier(.25,.46,.45,.94), opacity .6s ease; padding: 32px 40px; box-sizing: border-box; background: transparent; }
.engineering-carousel .carousel-slide.active { opacity: 1; transform: translateX(0); }
/* Directional helpers applied by JS */
.engineering-carousel .carousel-slide.from-left { transform: translateX(-100%); }
.engineering-carousel .carousel-slide.to-right { transform: translateX(100%); }
.engineering-carousel .carousel-slide.active.from-left { transform: translateX(0); }
.engineering-carousel .carousel-slide.active.to-right { transform: translateX(0); }
.engineering-carousel .slide-content { height: 100%; display: flex; flex-direction: column; }
.engineering-carousel .slide-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid #a63e91; }
.engineering-carousel .slide-title { margin: 0; font-weight: 800; color: #253046; font-size: 2rem; }
.engineering-carousel .slide-counter { background: linear-gradient(135deg, #a63e91, #8e44ad); color: #fff; padding: 8px 14px; border-radius: 16px; font-weight: 700; white-space: nowrap; }
.engineering-carousel .slide-body { flex: 1; overflow-y: auto; }

/* Smaller font size for Stage 3 slide to fit content */
#carousel-choice-stage3-slide .slide-body p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Controls */
.engineering-carousel-container .carousel-controls { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.engineering-carousel-container .carousel-btn { width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: 0 6px 16px rgba(0,0,0,0.12); font-size: 24px; line-height: 1; cursor: pointer; pointer-events: all; transition: transform .2s ease, box-shadow .2s ease; font-weight: bold; color: #333; display: flex; align-items: center; justify-content: center; }
.engineering-carousel-container .carousel-btn:hover { transform: scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
/* Indicators */
.engineering-carousel-container .carousel-indicators { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; padding: 0 40px; z-index: 10; }
.engineering-carousel-container .carousel-indicators .indicator { width: 14px; height: 14px; border-radius: 50%; border: none; background: rgba(0,0,0,0.2); cursor: pointer; transition: transform .2s ease, background .2s ease; position: relative; flex: 0 0 auto; }
.engineering-carousel-container .carousel-indicators .indicator.active { background: #a63e91; transform: scale(1.2); }
.engineering-carousel-container .carousel-indicators .indicator::after { content: attr(aria-label); position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: #666; white-space: nowrap; text-align: center; width: max-content; max-width: 120px; line-height: 1.2; }
@media (max-width: 992px) { 
  .engineering-carousel { height: 520px; } 
  .engineering-carousel .slide-title { font-size: 1.6rem; }
  .engineering-carousel-container .carousel-indicators { 
    gap: 40px; 
    padding: 0 20px; 
    bottom: -20px;
  }
  .engineering-carousel-container .carousel-indicators .indicator::after { 
    font-size: 0.7rem; 
    max-width: 100px; 
  }
}
@media (max-width: 768px) {
  .engineering-carousel-container .carousel-indicators { 
    gap: 30px; 
    padding: 0 15px; 
    bottom: -10px;
  }
  .engineering-carousel-container .carousel-indicators .indicator::after { 
    font-size: 0.65rem; 
    max-width: 80px; 
  }
}
@media (max-width: 576px) { 
  .engineering-carousel { height: 460px; } 
  .engineering-carousel .carousel-slide { padding: 20px; } 
  .engineering-carousel .slide-title { font-size: 1.35rem; }
  .engineering-carousel-container { padding-bottom: 80px; }
  .engineering-carousel-container .carousel-indicators { 
    gap: 20px; 
    padding: 0 10px; 
    bottom: 0px;
    flex-wrap: wrap;
  }
  .engineering-carousel-container .carousel-indicators .indicator { 
    width: 12px; 
    height: 12px; 
  }
  .engineering-carousel-container .carousel-indicators .indicator::after { 
    font-size: 0.6rem; 
    max-width: 70px; 
    top: 20px;
  }
}

/* Navbar link styles */
a.nav-link {
  color: rgb(255, 255, 255) !important;
  font-size: larger;
  transition: color 0.2s ease;
  font-weight: 400;
}

a.nav-link:hover {
  color: #6FB9EB !important;
}

/* Engineering Cycle Styles */
.cycle-container {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 250px;
  height: 250px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 15px;
  border: 3px solid rgba(148, 22, 124, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cycle-svg {
  width: 100%;
  height: 100%;
}

/* Enhanced cycle base with rounded appearance */
.cycle-svg path {
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  fill: #e8e8e8; /* subtle neutral ring */
  stroke: #d0d0d0;
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cycle-svg path.active {
  opacity: 1;
  fill: #f6c2e6; /* default, overridden per-section below */
  stroke: #94167C; /* purple border */
  stroke-width: 3;
  filter: drop-shadow(0 4px 8px rgba(148, 22, 124, 0.3));
  transform-origin: center;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Curved text styling */
.cycle-text {
  fill: black;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-anchor: middle;
}

/* Enhanced per-section active colours with rounded appearance */
.cycle-svg path#learn-section.active { 
  fill: #c6e3f7;
  stroke: #3A8DBD;
  filter: drop-shadow(0 4px 8px rgba(58, 141, 189, 0.4));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cycle-svg path#design-section.active { 
  fill: #b3d2e5;
  stroke: #56A7DA;
  filter: drop-shadow(0 4px 8px rgba(86, 167, 218, 0.4));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cycle-svg path#build-section.active { 
  fill: #d7a5cb;
  stroke: #B261A8;
  filter: drop-shadow(0 4px 8px rgba(178, 97, 168, 0.4));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cycle-svg path#test-section.active { 
  fill: #a63e91;
  stroke: #94167C;
  filter: drop-shadow(0 4px 8px rgba(148, 22, 124, 0.4));
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cycle-svg path:hover { 
  opacity: 0.95; 
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  stroke-width: 3;
  transform: scale(1.02);
  transform-origin: center;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cycle-svg text {
  font-family: Arial, sans-serif;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
  font-size: 14px;
  fill: black;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.cycle-svg .center-label {
  font-size: 18px;
  fill: #555;
  font-weight: 700;
  text-anchor: middle;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.cycle-svg .center-label .igem {
  font-size: 28px;
  font-weight: 900;
  fill: #94167C;
  text-shadow: 0 2px 4px rgba(148, 22, 124, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .cycle-container {
    right: 20px;
    width: 200px;
    height: 200px;
  }
  
  .cycle-svg text {
    font-size: 12px;
  }
  
  .cycle-svg .center-label {
    font-size: 14px;
  }
  
  .cycle-svg .center-label .igem {
    font-size: 16px;
  }
}


.cycle-container:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.cycle-svg {
  position: relative;
  width: 100%;
  height: 100%;
}

.cycle-diagram {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.cycle-section {
  transition: all 0.3s ease;
  cursor: pointer;
}

.cycle-section:hover { filter: none; stroke-width: 4; }

.cycle-section.active { filter: none; }

.cycle-section.inactive { filter: none; opacity: 1 !important; }

.cycle-text {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 14px;
  fill: black;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
  pointer-events: none;
}

.cycle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}

.center-label {
  text-align: center;
  color: #333;
  font-family: 'Arial', sans-serif;
}

.center-label .igem {
  font-size: 16px;
  font-weight: bold;
  color: #990B7F;
  margin-bottom: 2px;
}

.center-label .engineering {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  margin-bottom: 1px;
}

.center-label .cycle {
  font-size: 10px;
  color: #888;
}

/* Tablet and mobile navbar improvements - covers all collapsed navbar states */
@media (max-width: 992px) {
  /* Mobile navbar improvements */
  .navbar-brand {
    position: relative !important;
    top: 0 !important;
    left: 10px !important;
    margin-right: auto !important;
  }
  
  .navbar-brand img {
    width: 120px !important;
    max-height: 40px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
  
  .navbar-toggler {
    border: none;
    padding: 8px 12px;
    margin-left: auto !important;
    margin-right: 15px !important;
    position: relative !important;
    z-index: 1100 !important;
  }
  
  /* Ensure navbar container has proper flex layout */
  .navbar .container-fluid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .cycle-container {
    display: none;
  }
  
  .navbar-toggler:focus {
    box-shadow: none;
  }
  
  .navbar-collapse {
    background-color: rgba(153, 11, 127, 0.95);
    margin-top: 10px;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s ease-in-out !important;
  }
  
  /* Smooth collapse animation */
  .navbar-collapse.collapsing {
    transition: height 0.35s ease !important;
  }
  
  .navbar-collapse.show {
    animation: fadeIn 0.3s ease-in !important;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .navbar-nav .nav-link {
    padding: 8px 15px;
    color: white !important;
  }
  
  .navbar-nav .nav-link:hover {
    color: #c6e3f7 !important;
  }
  
  .dropdown-menu {
    background-color: rgba(198, 227, 247, 0.95) !important;
    border: none;
    border-radius: 8px;
    margin-top: 5px;
  }
  
  .dropdown-item {
    padding: 8px 15px;
    color: #333 !important;
  }
  
  .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
  }
  
  /* Mobile mega menu improvements - inline expansion */
  .dropdown-menu.mega-menu {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 8px 5px !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    background-color: rgba(178, 97, 168, 0.95) !important;
    border: none !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    transition: all 0.3s ease-in-out !important;
    animation: slideDown 0.3s ease-out !important;
  }
  
  /* Smooth animation keyframes for dropdown expansion */
  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    to {
      opacity: 1;
      max-height: 1000px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
  
  /* Make navbar items stack properly */
  .navbar-nav {
    width: 100% !important;
  }
  
  .navbar-nav .nav-item {
    width: 100% !important;
    position: relative !important;
  }
  
  /* Dropdown parent positioning */
  .navbar-nav .dropdown {
    position: relative !important;
    width: 100% !important;
  }
  
  .mega-menu .container-fluid {
    padding: 0 15px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Ensure navbar collapse is scrollable if needed */
  .navbar-collapse {
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .mega-menu-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 10px !important;
    margin-bottom: 3px !important;
    width: 100% !important;
  }
  
  .mega-menu-item {
    padding: 12px 20px !important;
    margin: 0 auto 6px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(198, 227, 247, 0.4) !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    width: 95% !important;
    max-width: 600px !important;
    transition: all 0.2s ease !important;
    animation: fadeInItem 0.4s ease-out backwards !important;
  }
  
  .mega-menu-item:hover {
    background-color: rgba(198, 227, 247, 0.6) !important;
    padding: 12px 20px !important;
    transform: scale(1.02) !important;
  }
  
  /* Stagger animation for menu items */
  .mega-menu-item:nth-child(1) { animation-delay: 0.05s !important; }
  .mega-menu-item:nth-child(2) { animation-delay: 0.1s !important; }
  .mega-menu-item:nth-child(3) { animation-delay: 0.15s !important; }
  .mega-menu-item:nth-child(4) { animation-delay: 0.2s !important; }
  .mega-menu-item:nth-child(5) { animation-delay: 0.25s !important; }
  .mega-menu-item:nth-child(6) { animation-delay: 0.3s !important; }
  
  @keyframes fadeInItem {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .mega-menu-icon {
    width: 26px !important;
    height: 26px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }
  
  .mega-menu-icon i {
    font-size: 12px !important;
  }
  
  .mega-menu-title {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    font-weight: 600 !important;
    text-align: center !important;
  }
  
  .mega-menu-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mega-menu-desc {
    display: none !important;
  }
  
  .mega-menu-content {
    flex: 1 !important;
    overflow: hidden !important;
  }
  
  /* Dropdown item in mega menu */
  .mega-menu .dropdown-item {
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Mobile content improvements */
  .display-4 {
    font-size: 2rem;
  }
  
  .lead {
    font-size: 1rem;
  }
  
  /* Ensure proper spacing on mobile */
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .col, .col-lg-6, .col-lg-8, .col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Mobile text improvements */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    hyphens: auto;
  }
  
  p, li {
    word-wrap: break-word;
    line-height: 1.6;
  }
  
  /* Mobile video responsiveness */
  .col-lg-6.mx-auto {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Mobile button improvements */
  #UpTop {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  /* Additional mobile spacing fixes */
  .mt-4 {
    margin-top: 1.5rem !important;
  }
  
  .mt-5 {
    margin-top: 2rem !important;
  }
  
  .mb-5 {
    margin-bottom: 2rem !important;
  }
  
  /* Better mobile typography */
  h2 {
    font-size: 1.75rem !important;
    margin-top: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    margin-top: 1.25rem !important;
  }
  
  h4 {
    font-size: 1.25rem !important;
    margin-top: 1rem !important;
  }
  
  /* Fix table overflow */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better callout spacing */
  .bd-callout {
    padding: 1rem !important;
    margin: 1rem 0 !important;
  }
  
  /* Info cards mobile */
  .info-card {
    padding: 16px !important;
  }
  
  /* Better list spacing */
  ul, ol {
    padding-left: 25px !important;
    margin-bottom: 1rem !important;
  }
  
  li {
    margin-bottom: 0.5rem !important;
  }
  
  /* Ensure no horizontal overflow */
  body, html {
    overflow-x: hidden !important;
  }
  
  /* Fix any wide elements */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}


/* REASSURED acronym styling */
.reassured { margin: 20px 0; }
.reassured-list { list-style: none; padding-left: 0; margin-bottom: 10px; }
.reassured-list li { margin-bottom: 10px; line-height: 1.6; }
.re-badge {
  display: inline-block;
  background: #c6e3f7;
  color: #000;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

.acronym-letter {
  font-size: 1.4em;
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Real life Connectivity */
.reassured-list li:first-child .re-badge {
  background: #307ea9 !important;
  color: #000 !important;
}

.reassured-list li:first-child .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Ease of specimen collection */
.reassured-list li:nth-child(2) .re-badge {
  background: #77b3d7 !important;
  color: #000 !important;
}

.reassured-list li:nth-child(2) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Affordable */
.reassured-list li:nth-child(3) .re-badge {
  background: #d6edfa !important;
  color: #000 !important;
}

.reassured-list li:nth-child(3) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Sensitive */
.reassured-list li:nth-child(4) .re-badge {
  background: #8e7cc3 !important;
  color: #000 !important;
}

.reassured-list li:nth-child(4) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Specific */
.reassured-list li:nth-child(5) .re-badge {
  background: #ceaeeb !important;
  color: #000 !important;
}

.reassured-list li:nth-child(5) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for User-friendly */
.reassured-list li:nth-child(6) .re-badge {
  background: #c8bcea !important;
  color: #000 !important;
}

.reassured-list li:nth-child(6) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Robust */
.reassured-list li:nth-child(7) .re-badge {
  background: #cb5db4 !important;
  color: #000 !important;
}

.reassured-list li:nth-child(7) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Equipment */
.reassured-list li:nth-child(8) .re-badge {
  background: #d7a5cb !important;
  color: #000 !important;
}

.reassured-list li:nth-child(8) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Special highlighting for Deliverable to end-users */
.reassured-list li:nth-child(9) .re-badge {
  background: #ead1dd !important;
  color: #000 !important;
}

.reassured-list li:nth-child(9) .acronym-letter {
  color: #000 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.reassured a { color: #0a58ca; text-decoration: underline; }
.reassured a:hover { color: #063d8f; }

/* Info cards under Background Information */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.info-card {
  background: #d7a5cb; /* light purple */
  color: #000;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.info-card h3 {
  font-weight: 800;
  text-transform: none;
  text-align: center;
  margin-bottom: 16px;
}
.info-card ul { margin: 0; padding-left: 20px; }
.info-card li { margin-bottom: 8px; }

/* lighter variant for alternating if needed */
.info-card.light { background: #c8b3ef; color: #2b154b; }

@media (max-width: 992px) {
  .info-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .info-cards { grid-template-columns: 1fr; }
}

/* Team Flip Cards Styles */
:root {
  --blue: #d7a5cb;
  --bg: #d7a5cb;
  --r: 18px;
  --gap: 22px;
}

.team-grid {
  max-width: 1100px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0 14px;
}

@media (max-width: 780px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  perspective: 1000px;
  perspective-origin: center center;
  cursor: pointer;
  height: 320px;
  border: none;
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .25s;
  cursor: pointer;
  background: var(--blue);
  color: #000;
  outline: 0;
  will-change: transform;
}

/* Flip states — works for hover, keyboard focus, and .flip class */
.card:hover .inner,
.card:focus-within .inner,
.card.flip .inner {
  transform: rotateY(180deg);
}

/* Nice lift on interaction without breaking rotation */
.card:hover .inner,
.card:focus-within .inner,
.card.flip:hover .inner {
  box-shadow: 0 15px 30px rgba(0,0,0,.2);
  transform: rotateY(180deg) scale(1.02);
}

/* Faces */
.face {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face.back {
  transform: rotateY(180deg);
}

.photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  max-width: 260px;
}

.photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 14px;
  background: #dbe7f1;
}

.person-name {
  margin-top: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

.info {
  flex: 1;
  min-width: 0;
}

.role {
  font-weight: 700;
  margin: 0 0 8px;
}

.line {
  height: 1px;
  background: #ffffff55;
  margin: 8px 0 12px;
}

.bio {
  margin: 6px 0 0;
  opacity: .95;
}

.social {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.social a {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3A8DBD;
  color: #fff;
  font-size: 22px;
  border-radius: 50%;
  transition: transform .25s, background .25s;
  text-decoration: none;
}

.social a:hover {
  background: #267099;
  transform: scale(1.1);
}

.mascot-image img {
  width: 220px; /* set image width */
  height: auto;
  border-radius: 10px; /* optional: rounded corners */
  position: absolute; /* Fixed/sticky/absolute/relative position */
  top: 40px; /* Place mascot 40px from the top of the page */
  right: 15px; /* Place mascot 15px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
}

/* Optional: make it mobile-friendly */
@media (max-width: 780px) {
  .mascot-image img {
    top: 80px; /* Place mascot 80px from the top of the page */
    right: 10px; /* Place mascot 10px from the right */
    width: 30%; /* scale down on mobile */
  }
}



.role .role-title { color: #ffffff; }
.bio ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.funfact-line { margin: 0.5rem 0; }




.figure-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  justify-items: center;
  align-items: stretch;
  margin-bottom: 30px;
}

.figure-row figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 95%;
  width: 100%;
  text-align: center;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 15px 20px;
  box-sizing: border-box;
  min-height: 500px; /* elongates the overall box */
}

.figure-row img {
  width: 100%;
  height: 450px; /* taller image area */
  object-fit: contain; /* prevents cropping */
  border-radius: 6px;
  background-color: #fff; /* optional: adds contrast if images don’t fill height */
}

.figure-row figcaption {
  font-style: italic;
  font-size: 0.9em;
  margin-top: 10px;
  color: #666;
  min-height: 60px;
}

@media (max-width: 768px) {
  .figure-row {
    grid-template-columns: 1fr;
  }
  .figure-row figure {
    min-height: auto;
  }
  .figure-row img {
    height: auto;
    object-fit: contain;
  }
}



th, td {
  border: 1px solid #000 !important;
  padding: 6px;
  text-align: left;
}
.table-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}
.table-item {
  flex: 1 1 30%;
  max-width: 30%;
  min-width: 260px;
}









:root {
  --ink:#222;
  --muted:#666;
  --accent:#cc5168;
}

/* ---------- Intro zoom ---------- */
#intro {
  position:fixed;
  inset:0;
  background:#fff;
  display:grid;
  place-items:center;
  z-index:9999;
  animation:intro-fade 0.5s ease 2.1s forwards;
}
@keyframes intro-fade { to { opacity:0; visibility:hidden; } }

.intro-glass {
  width:220px;
  aspect-ratio:1;
  border:6px solid #bfbfbf;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.12), inset 0 0 0 6px #d9d9d9;
  transform-origin:center;
  transform:scale(.28);
  animation:glass-zoom 2.1s cubic-bezier(.22,.61,.36,1) both;
}
.intro-glass::after {
  content:"";
  position:absolute;
  width:18px;
  height:120px;
  background:#bfbfbf;
  bottom:-90px;
  right:24px;
  transform:rotate(40deg);
  border-radius:10px;
  box-shadow:inset 0 0 0 3px #d9d9d9;
}
@keyframes glass-zoom {
  0% { transform:scale(.28); }
  80%,100% { transform:scale(9); }
}
.intro-lung-preview {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform:translateY(10px);
}

/* ---------- Hero ---------- */
header.hero-section {
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:64px 20px;
}
.hero-stack { display:grid; place-items:center; gap:18px; }
.hero-lungs-wrap { position:relative; display:inline-block; }
.hero-lungs-image {
  width:min(720px,90vw);
  max-width:900px;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.08));
  transform-origin:center;
  animation:lungs-zoom 1.1s ease-out .1s both;
}
@keyframes lungs-zoom {
  from { transform:scale(.92); }
  to { transform:scale(1.06); }
}

.hero-brand {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  opacity:0;
  animation:brand-in .7s ease 2.15s forwards;
}
@keyframes brand-in {
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.hero-brand--logo {
  width:min(60vw,520px);
  height:auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.12));
}

.hero-mascot-image {
  position:absolute;
  left:calc(100% + 60px); /* moved to the right of the lungs */
  top:50%;
  width:min(22vw,140px);
  transform:translateY(-50%) rotate(-3deg);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.16));
  opacity:0;
  animation:mascot-in .6s ease 2.05s forwards;
}
@keyframes mascot-in { to { opacity:1; } }

/* ---------- Stats section ---------- */
.stats-section {
  display:grid;
  place-items:center;
  min-height:60vh;
  padding:0.5rem 1rem;
}
.stats-card {
  text-align:center;
  max-width:900px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.stats-card.visible { opacity:1; transform:none; }

.stats-card__label {
  margin:0 0 .5rem;
  font-size:1.05rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.stats-counter {
  font-variant-numeric:tabular-nums;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  font-size:clamp(2.4rem,6vw + .5rem,6rem);
}
.stats-counter__prefix {
  color:var(--accent);
  margin-right:.15em;
}
.stats-card__sub {
  margin:.75rem 0 0;
  font-size:clamp(1rem,1.8vw + .25rem,1.4rem);
  color:var(--muted);
}

.ratio-block {
  margin:2.5rem auto 0;
  display:grid;
  gap:.75rem;
  justify-items:center;
}
.ratio-block__caption {
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(1.05rem,1.6vw + .25rem,1.35rem);
}
.ratio-block__today {
  color:var(--muted);
  font-weight:500;
  margin-left:.35em;
}
.ratio-heads {
  display:flex;
  gap:clamp(.6rem,1.2vw,1rem);
  align-items:end;
}
.ratio-head {
  width:clamp(44px,7vw,76px);
  aspect-ratio:1;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.04));
}
.ratio-head svg { width:100%; height:100%; display:block; }
.ratio-head--muted svg [data-fill] { fill:#dcdcdc; }
.ratio-head--accent svg [data-fill] { fill:var(--accent); }
.ratio-head--accent {
  animation:pulse 1.6s ease-out infinite;
  transform-origin:center;
}
@keyframes pulse {
  0% { transform:scale(1); filter:drop-shadow(0 0 0 rgba(204,81,104,0)); }
  50% { transform:scale(1.06); filter:drop-shadow(0 0 10px rgba(204,81,104,.25)); }
  100% { transform:scale(1); filter:drop-shadow(0 0 0 rgba(204,81,104,0)); }
}

/* ---------- Why section ---------- */
.why-section {
  display:grid;
  gap:.75rem;
  place-items:center;
  text-align:center;
  padding:10px 0 0;
}
.why-section__eyebrow {
  font-size:clamp(.95rem,1.2vw + .5rem,1.25rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.why-section__row {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.why-section__lead {
  max-width:900px;
  font-size:clamp(1rem,1.2vw + .9rem,1.45rem);
  line-height:1.5;
  color:var(--ink);
}

.text-blue { /* change title colour on each page */
  font-size: 6rem;
  font-weight: 900;
  text-transform: uppercase;
  color:#6fb9eb;
  text-shadow:  
    -2px -2px 2px #064e78,  
     2px -2px 2px #064e78,  
    -2px  2px 2px #064e78, 
     2px  2px 2px #064e78;
}

/* ===================== */
/* Engineering References - Bottom Priority */
/* ===================== */
.engineering-references {
  margin-left: 0 !important;
  padding-left: 20px !important;
  padding-right: 250px !important; /* Ensure space for cycle container */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {
  .engineering-references {
    padding-right: 220px !important; /* Adjust for smaller cycle container */
  }
}

@media (max-width: 768px) {
  .engineering-references {
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 20px !important; /* Remove cycle container spacing on mobile */
  }
}

/* ===================== */
/* Hero Section - TB Layout */
/* ===================== */
.hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.hero-left {
  flex: 0 0 auto;
}

.hero-tb-image {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero-right {
  flex: 1;
  max-width: 500px;
}

.hero-text-content {
  color: #333;
  text-align: left;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #333;
  margin: 0 0 30px 0;
  line-height: 1.1;
}

.hero-checkmarks {
  margin-bottom: 30px;
}

.hero-check-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 600;
}

.hero-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #28a745;
  color: white;
  border-radius: 6px;
  margin-right: 15px;
  font-weight: bold;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.hero-check-text {
  color: #333;
}

/* Ensure hero check labels render as typed (prevent external lowercase transforms) */
body:has(.hero-section) .hero-check-text {
  text-transform: none !important;
}

.hero-yet {
  font-size: 1.6rem;
  font-weight: 600;
  color: #666;
  margin: 0 0 15px 0;
  font-style: italic;
}

.hero-deadly {
  font-size: 1.8rem;
  font-weight: 700;
  color: #dc3545;
  margin: 0;
  line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-content {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
  
  .hero-text-content {
    text-align: center;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-tb-image {
    max-width: 350px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    gap: 30px;
    padding: 30px 15px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-check-item {
    font-size: 1.2rem;
  }
  
  .hero-checkmark {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  
  .hero-yet {
    font-size: 1.4rem;
  }
  
  .hero-deadly {
    font-size: 1.6rem;
  }
  
  .hero-tb-image {
    max-width: 300px;
  }
}