body { padding-top: 0px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

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

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* Member rectangles */
.custom-rectangle {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  min-width: 280px; /* Ensures text fits */
  min-height: 512px;
  max-width: 260px; /* 🔹 Narrower than column, aligns with image */
  width: 100%;      /* Keeps it responsive within that limit */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  margin: 0 auto;   /* 🔹 Center the rectangle inside the col */
}

.rectangle-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.badge-pill {
  display: inline-block;
  background-color: #f4a63e;
  color: black;
  font-weight: normal; 
  padding: 6px 14px;
  border-radius: 999px;
  margin: 4px 6px;
  font-size: 14px;
  font-family: 'Questrial', sans-serif;
}

.member-name {
  font-family: 'Questrial', sans-serif;
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.member-degree {
    font-family: 'Questrial', sans-serif;
}

/* LinkedIn icon hexagon */
.linkedin-hex {
  flex-shrink: 0;          /* Prevent shrinking in flex containers */
  min-width: 44px;         /* Explicit minimum width */
  min-height: 36px;        /* Explicit minimum height */
  width: 44px;
  height: 36px;
  background-color: #36844a;
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.linkedin-hex:hover {
  background-color: #2e6f3f;
}

.linkedin-hex .linkedin-icon{
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* code for sponsor carousel */
:root{
  --logo-h: 60px;   /* logo height */
  --gap: 30px;      /* space between logos */
  --speed: 22s;     /* scroll speed; higher = slower */
}

.sponsor-logos{
  position: relative;
  overflow: hidden;
  width: 100%;                   /* stay inside the Bootstrap column */
  height: 100px;                 /* same as before (you also set inline) */
}

.logos-slide{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;            /* track is as wide as its content */
  animation: sponsors-scroll var(--speed) linear infinite;
  will-change: transform;
}

.logos-slide img{
  display: block;
  height: var(--logo-h);
  width: auto;
  flex: 0 0 auto;
}

/* Seamless loop: we duplicated the content, so move by half the track */
@keyframes sponsors-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Optional: pause on hover */
.sponsor-logos:hover .logos-slide{ animation-play-state: paused; }


/* Flipping the members cards */
.flip-img-container {
  perspective: 1000px;
  width: 100%;
  max-width: 240px; /* limit max width */
  margin-bottom: 1rem;
  position: relative;
  height: auto;
}

.flip-img-inner {
  position: relative;
  width: 100%;
  height: 0;           /* zero height initially */
  padding-bottom: 133%; /* 4:3 aspect ratio (36/44 approx) to keep space */
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}
  
.flip-img-container:hover .flip-img-inner {
  transform: rotateY(180deg);
}

.flip-img-front,
.flip-img-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}

.flip-img-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.flip-img-back {
  transform: rotateY(180deg);
  background-color: white;
  color: black;
/*padding: 1rem; */
  display: flex;
  align-items: left;
  justify-content: left;
  text-align: left;
  box-sizing: border-box;
}

.flip-img-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Nav bar CSS */
.nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  .nav-item.dropdown:hover > .nav-link {
    color: black;
    background-color: white;
    text-decoration: underline;
  }

  .nav-item.dropdown > .nav-link {
  display: flex;           /* allow height control */
  align-items: center;     /* vertically center text */
  height: 80px;          /* make the grey highlight span full navbar height */
  padding: 0 15px;         /* optional: horizontal padding */
}

 

  /* Full-width dropdown menu */
  .dropdown-menu.full-width {
    position: fixed !important;
    top: 83px; 
    left: 0;
    width: 100vw;
    margin: 0;
    padding: 2rem 0;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px); 
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 2147483647 !important;
  }

  .dropdown-menu.full-width .dropdown-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 2rem;
    z-index: 2147483647 !important;
  }

  .hex-tile {
    display: flex;
    align-items: center;
    width: 310px;
    text-decoration: none;
    color: black;
    padding: 0.5rem;
    transition: background 0.2s ease;
  }

  .hex-icon {
  width: 60px;
  height: 50px;
  background-color: #207a50;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
  font-size: 1.5rem;
}

.hex-icon img {
  width: 30px;   /* fixed width */
  height: 30px;  /* fixed height */
  flex-shrink: 0;       /* prevents shrinking inside flexbox */
}



  .hex-text h6 {
    margin: 0;
    font-weight: bold;
  }

  .hex-text small {
    color: #555;
  }

  .hex-tile:hover {
    background-color: #f4ebe2;
    border-radius: 8px;
  }

/* Ensure sidebar column doesn’t stretch */
.col-lg-3 {
  position: relative;
  align-self: flex-start;
}

.toc-container {
  max-height: calc(100vh - 80px); /* will be dynamically adjusted via JS */
  overflow-y: auto;               /* scroll inside TOC if too tall */
  padding-bottom: 15px; /* gives breathing room for the last item */
  box-sizing: border-box; /* ensures padding doesn’t add extra height */
}

/* Sticky/fixed state */
.toc-fixed {
  position: fixed;
  top: 100px;             /* distance from top of viewport */
  z-index: 500;
}




/* TOC header style */
.toc-header {
  font-family: 'Questrial', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  text-decoration: underline;
  margin-bottom: 15px;
}

/* TOC list */
.toc-list,
.toc-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Questrial', sans-serif;
}

/* Main headings */
.toc-list > li {
  margin-bottom: 10px;
  font-weight: 600;
}

/* Subheadings */
.toc-list li ul li {
  margin-left: 25px;   /* indent for subitems */
  margin-bottom: 6px;
  font-weight: normal;
  font-size: 0.85rem;
  color: #2f6e3d;
}

/* Links & hover animation */
.toc-list a {
  text-decoration: none;
  color: #3d8b4f;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: color 0.3s ease, transform 0.3s ease;
  will-change: transform;  /* hint browser to optimize */
  padding: 2px 0;          /* increase hit area */
}

.toc-list a:hover {
  color: #2f6e3d;
  transform: translateX(4px); /* smaller shift avoids layout jitter */
}

.toc-list > li > a .toc-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('https://static.igem.wiki/teams/5713/templatelayout/icon-seed-table-content3.webp') no-repeat center center;
  background-size: contain;
  margin-right: 8px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: transform, opacity; /* optimize for hover */
}



/* TOC icons */
.toc-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('https://static.igem.wiki/teams/5713/templatelayout/icon-seed-table-content3.webp') no-repeat center center;
  background-size: contain;
  margin-right: 8px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

/* Active state: show icon */
.toc-list a.active .toc-icon {
  opacity: 1;
  transform: translateX(0);
}

/* ===== TOC hierarchy fix ===== */
.toc-container .toc-list { padding-left: 0 !important; margin-left: 0 !important; }
.toc-container .toc-list > li { margin-left: 0 !important; }

/* Main sections (flush left) */
.toc-container .toc-list > li > a{
  padding-left: 0 !important;
  font-weight: 700;
}

/* Subsection group (shift right) */
.toc-container .toc-list > li > ul{
  --toc-sub-indent: 1.75rem;                 /* tweak this value to indent more/less */
  padding-left: var(--toc-sub-indent) !important;
  margin: .35rem 0 .6rem 0 !important;
}

/* Prevent extra left margins from earlier rules */
.toc-container .toc-list > li > ul > li{ margin-left: 0 !important; }

/* Subsection links (slightly lighter) */
.toc-container .toc-list > li > ul > li > a{
  padding-left: .25rem !important;
  font-weight: 500;
  font-size: .95rem;
  opacity: .95;
}



/* Headings for each page */
.section-heading {
  background-color: #e1ece3;
  color: #217e81;
  font-weight: 800;
  font-family: 'Questrial', sans-serif;
  font-size: 2.5rem;
  padding: 10px 20px;
  border-radius: 4px;
  display: block;
  width: 100%;
}

  .content-section h1.section-heading {
    margin-bottom: 0.5rem;
  }

  .content-section p {
    font-family: 'Questrial', sans-serif;
  }

  .content-section hr {
    border: none;
    height: 2px;
    background-color: #d1d1d1;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
  }

/* Transparent scroll-away navbar */
.navbar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647 !important;
  background-color: transparent !important;
  box-shadow: none;
}

.navbar-overlay .nav-link,
.navbar-overlay .navbar-brand {
  color: white !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Aligning the tabs on the nav bar */
.navbar {
  height: 120px; /* Adjust as needed */
  display: flex;
  align-items: flex-end;
  padding-bottom: 10px; /* space from bottom */
}

/* Optional: tweak alignment of nav items if needed */
.navbar-nav {
  align-items: flex-end;
}

/* Vertically center the Get Your BC button in the navbar */
.navbar-nav .nav-item.get-bc-button {
  display: flex;
  align-items: center; /* centers vertically within navbar */
}



/* ===== knobs ===== */
:root{
  --nav-h-desktop: 88px;         /* your fixed navbar height (desktop) */
  --nav-h-mobile: 64px;          /* navbar height (mobile) */

  --video-scale-desktop: 1.30;   /* bump if any side sliver remains */
  --video-scale-mobile: 1.05;    /* phone/tablet zoom */

  --video-y-shift-desktop: 30vh;  /* move up = crop more top (show more bottom) */
  --video-y-shift-mobile:  4vh;
}

/* wrapper */
.header-block{ position: relative; }

/* full-bleed hero with real height */
.team-header-block{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  height: 100dvh;                 /* avoid iOS toolbar gaps */
  overflow: hidden;
  background: #000;               /* fallback while video loads */
}



/* overlay text stays on top */
.team-header-text{
  position: relative;
  z-index: 2;                    /* ABOVE the video */
  text-align: center;
  padding: calc(var(--nav-h-desktop) + 2rem) 6vw 0; /* keep clear of navbar */
  max-width: 165ch;
  margin: 0 auto;
  color: #000;
}
.team-header-text .title{
  font-family: 'Questrial', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.2;
}

/* next section starts flush with hero */
.team-header-block + section{ margin-top: 0 !important; }

/* ===== responsive ===== */
@media (max-width: 992px){
  .team-header-block{
    height: 90vh;
    height: 90dvh;
  }
  .team-header-video{
    transform: translate(-50%, calc(-50% - var(--video-y-shift-mobile)))
               scale(var(--video-scale-mobile));
  }
  .team-header-text{
    padding-top: calc(var(--nav-h-mobile) + 2.25rem); /* move title down a bit */
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .team-header-text .title{
    font-size: clamp(32px, 7vw, 44px);
    line-height: 1.22;
  }
}

@media (max-width: 576px){
  .team-header-block{ height: 92vh; height: 92dvh; }
  .team-header-text .title{ font-size: clamp(28px, 7.6vw, 40px); }
}







/* Scroll-to-top button styles */
#scrollTopBtn{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 80px;
  height: 80px;
  display: none;         /* JS toggles this */
  cursor: pointer;
  z-index: 2147483647 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #33653f;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Progress ring as border */
#scrollTopBtn::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 92px;
  height: 92px;
  border-radius: 6px; /* slightly rounded to match hexagon */
  border: 4px solid #7ec97e;
  transform: rotate(-30deg);
  box-sizing: border-box;
  z-index: 2147483647 !important; /* max safe z-index */
}

/* Homepage "How it works" part */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.hero-section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 !important;
  padding: 60px 0 0 0; /* added 60px top padding */
  background: radial-gradient(circle 600px at 15% 22%, rgba(255,165,0,0.6), transparent 60%),
              radial-gradient(circle 600px at 85% 5%, rgba(144,238,144,0.6), transparent 60%),
              radial-gradient(circle 850px at 40% 30%, rgba(144,238,144,0.5), transparent 50%),
              radial-gradient(circle 850px at 70% 50%, rgba(99,173,175,0.5), transparent 50%),
              radial-gradient(circle 850px at 30% 70%, rgba(255,132,216,0.5), transparent 50%),
              radial-gradient(circle 750px at 70% 90%, rgba(255,165,0,0.5), transparent 50%);
}


.hero-subtitle {
  font-size: 2rem;
  color: #3a7a3a;
  margin-bottom: 0.5rem;
}

.hero-title {
  font-size: 3rem;
  color: #2c6b2c;
  font-weight: 500;
  margin-bottom: 2rem;
}

.hero-image {
  width: 400px;
  height: auto;
  margin-bottom: 4rem;
}

/* Process steps now inherit hero background */
.process-steps {
  width: 100%;
}

.process-step {
  margin: 3rem auto;
  max-width: 1200px;
  padding: 60px 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.process-step:nth-of-type(1) {
  margin-bottom: 8rem;
}

.process-step:nth-of-type(2) {
  margin-bottom: 6rem;
}

.process-step:nth-of-type(3) {
  margin-bottom: 6rem;
}

.process-content,
.process-images {
  flex: 1;
  max-width: none;
}

.process-content h1 {
  font-family: 'Questrial', sans-serif;
  font-size: 3rem;
  color: #217e81;
  margin-bottom: 0.5rem;
}

.process-content h2 {
  font-family: 'Questrial', sans-serif;
  font-size: 1.5rem;
  color: #000000;
  margin-bottom: 0.5rem;
}

.process-content p {
  font-family: 'Questrial', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
}

.step-tag {
  display: inline-block;
  background: #5b2c2c;
  color: white;
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  margin-top: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.step-tag:hover {
  text-decoration: underline;
  text-decoration-color: white;
}

.process-images {
  flex: 1;
  max-width: 45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.process-images img {
  max-width: 400px;
  height: auto;
}


/* --- knobs --- */
:root{
  --desktop-section-h: 700px;      /* desktop height */
  --mobile-zoom: 1.30;             /* extra zoom on phones to cover T+B */
}

/* ========= DESKTOP / LAPTOP (keep your current look) ========= */
.reveal-video-section{
  position: relative;
  width: 100%;
  height: var(--desktop-section-h);
  overflow: hidden;
  background:#000;
}
.reveal-video-container{
  position: absolute;
  top: -10%;
  left: 50%;
  width: 180%;
  height: 150%;
  transform: translateX(-50%);
  pointer-events: none;            /* overlay stays clickable */
}

.reveal-video{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* object-fit not needed on desktop because you oversize intentionally */
}

/* Overlay */
.reveal-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  padding: 1rem 2rem;
}
.reveal-image{
  display:block;
  height:auto;
  width: 1000px;              /* desktop image size */
  max-width: 100%;
  margin-bottom: 1.25rem;
}
.reveal-text{
  font-family: 'Questrial', sans-serif;
  font-size: 1.35rem;         /* slightly bigger on desktop */
  line-height: 1.4;
  color: #000;
  max-width: 800px;
  margin: 0 auto;
}

/* ========= MOBILE / TABLET IMPROVEMENTS ========= */
@media (max-width: 992px){
  /* full-bleed and taller so overlay fits */
  .reveal-video-section{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 75vh;         /* give overlay room */
    height: auto;
  }

  /* neutralize inner layout limits (Bootstrap containers/rows/cols) */
  .reveal-video-section .container,
  .reveal-video-section .container-fluid,
  .reveal-video-section .row,
  .reveal-video-section [class*="col"]{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* fill section; no bars; slight extra zoom to also cover T+B */
  .reveal-video-container{
    position: absolute;
    inset: 0;
    transform: none;
    pointer-events: auto;      /* enable taps if needed */
  }
  /* <video>/<img>/<dotlottie-player> */
  .reveal-video{
    width: 100%;
    height: 100%;
    object-fit: cover;         /* fills both axes; may crop */
    object-position: center;
    transform: scale(var(--mobile-zoom));
    transform-origin: center;
  }
  /* If you use an <iframe>, ensure it fills too */
  .reveal-video-container iframe{
    position:absolute; inset:0;
    width:140%; height:70%;
    border:0;
    transform: scale(var(--mobile-zoom));
    transform-origin:center;
  }

  /* overlay scales up a touch on mobile */
  .reveal-overlay{ padding: 1rem; gap: 1rem; }
  .reveal-image{
    width: clamp(300px, 100vw, 600px);
    max-width: 120vw;
    margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  }
  .reveal-text{
    max-width: 92vw;
    font-size: clamp(1.05rem, 3.4vw, 1.6rem);  /* bigger text on phones */
    line-height: 1.45;
  }
}

/* very small phones: even more height + a tad more zoom */
@media (max-width: 576px){
  .reveal-video-section{ min-height: 85vh; }
  .reveal-video,
  .reveal-video-container iframe{ transform: scale(calc(var(--mobile-zoom) * 1.1)); }
}



/* Homepage image boxes */
.col-md-6 img {
    width: 300px;    /* desired width */
    height: 300px;     /* desired height */
}

/* Stressors text styling */
.stress-text {
    font-size: 3rem;   /* slightly bigger */
    color: #3d8b4f;
    margin: 0;             /* remove extra spacing */
    display: flex;
    align-items: center;   /* vertically center with images */
}

/* Homepage seed web */
.seedcard-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: Arial, sans-serif;
      margin: 150px 0 0 0;
    }

    /* === TOP TEXT SECTION === */
.seedcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;   /* align bottom edges */
  width: 100%;
  margin-bottom: 30px;
}

.seedcard-top-left {
  color: red;
  font-size: 3rem;
  margin-left: 110px;
  margin-right: 100px;
  display: flex;
  align-items: flex-end;
  font-style: italic;
}


.seedcard-top-right {
  max-width: 40%;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* pushes h2 + p together */
}
.seedcard-top-right h2 {
  color: #2c7a3f;
  font-size: 3rem;
  margin: 0 0 20px;
}
.seedcard-top-right p {
  font-size: 1.2rem;
  color: #2c7a3f;           /* same green as h2 */
  margin: 0;
}

    /* === CENTER SECTION === */
    .seedcard-container {
      position: relative;
      width: 900px;
      height: 700px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Faded blue circular background */
    .seedcard-background {
      position: absolute;
      width: 1000px;
      height: 1000px;
      background: radial-gradient(circle, rgba(173,216,230,0.9) 0%, rgba(255,255,255,0) 70%);
      border-radius: 50%;
      z-index: 1;
    }
    
    /* Seed in the middle */
    .seedcard-seed {
      position: relative;
      z-index: 2;
      width: 600px;
    }

/* === BOXES === */
.seedcard-box {
  position: absolute;
  width: 250px;
  height: 200px;
  perspective: 1000px;
  z-index: 3;
}

.seedcard-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.seedcard-box:hover .seedcard-box-inner {
  transform: rotateY(180deg);
}

.seedcard-box-front,
.seedcard-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 2px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

/* === FRONT === */
.seedcard-box-front {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seedcard-box-front img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 12px;
}

/* === BACK === */
.seedcard-box-back {
  transform: rotateY(180deg);
  background: #fefefe;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.seedcard-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
}

.seedcard-image {
  width: 50px;
  height: auto;
  margin-bottom: 8px;
}

.seedcard-text {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #333;
}

.seedcard-ref {
  font-size: 0.75rem;
  color: #555;
}


/* === WEB-LIKE BOX POSITIONS === */
/* ----Left column: staggered---- */
.seedcard-box1 { top: 20px; left: -98px; }   /* top-left, slightly to the right */
.seedcard-box3 { top: 270px; left: 40px; }   /* middle-left, to the left */
.seedcard-box5 { bottom: -10px; left: -88px }

/* Right column: mirrored */
.seedcard-box2 { top: 20px; right: -98px; }   /* top-right, slightly to the left */
.seedcard-box4 { top: 270px; right: 10px; }   /* middle-right, to the right */
.seedcard-box6 { bottom: -10px; right: -98px; }/* bottom-right, slightly to the left */

/* === BOX BORDERS BY COLOR === */

/* Boxes 1, 3, 5 → red */
.seedcard-box1 .seedcard-box-front,
.seedcard-box1 .seedcard-box-back,
.seedcard-box3 .seedcard-box-front,
.seedcard-box3 .seedcard-box-back,
.seedcard-box5 .seedcard-box-front,
.seedcard-box5 .seedcard-box-back {
  border: 2px solid red;
}

/* Boxes 2, 4, 6 → green */
.seedcard-box2 .seedcard-box-front,
.seedcard-box2 .seedcard-box-back,
.seedcard-box4 .seedcard-box-front,
.seedcard-box4 .seedcard-box-back,
.seedcard-box6 .seedcard-box-front,
.seedcard-box6 .seedcard-box-back {
  border: 2px solid green;
}

/* Info cards agriculture */
.agriculture-info {
  width: 400px;          /* set the container width */
  max-width: 90%;        /* responsive on smaller screens */
  margin: 100px auto;     /* center horizontally with some spacing */
  border-radius: 12px;   /* optional rounded corners */
  overflow: hidden;      /* ensures image doesn’t overflow */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
}

.agriculture-info img {
  width: 400px;          /* image fills container */
  height: auto;          /* maintain aspect ratio */
  display: block;
}

/* Carapace quote */
.carapace-quote img {
  width: 1300px;             /* image fills container */
  height: auto;              /* maintain aspect ratio */
  display: block;
  margin: auto;         /* center horizontally with spacing */
}

.stress-background {
  position: relative;
  background: 
    /* pink spot: pushed more left and more vibrant */
    radial-gradient(circle 280px at 17% 13%, rgba(254, 192, 230, 0.8), transparent 85%),  
    /* orange spot: moved further down and more vibrant */
    radial-gradient(circle 280px at 30% 28%, rgba(255, 200, 120, 0.7), transparent 85%),  
    /* purple spot: nudged a bit lower and more to the right, more vibrant */
    radial-gradient(circle 300px at 85% 20%, rgba(254, 192, 230, 0.5), transparent 65%),  
    #ffffff; /* base white */
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 20px;
  border-radius: 12px;
}

/* HP figure */
/* Labels */
.venn-label {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: background 0.3s;
  transform: translate(-50%, -50%); /* center labels at coordinates */
}

.venn-label:hover {
  background: #e1ece3; /* your custom hover color */
}

/* Positioning in percentages so they scale */
.venn-A   { top: 20%; left: 50%; }
.venn-B   { top: 60%; left: 75%; }
.venn-C   { top: 60%; left: 25%; }

.venn-AB  { top: 45%; left: 65%; }
.venn-BC  { top: 70%; left: 50%; }
.venn-AC  { top: 45%; left: 37%; }

.venn-ABC { top: 55%; left: 50%; }
}

/* References rectangle main page */
/* Container box */
.references-box {
  width: 90%;               /* responsive width */
  max-width: 1200px;        /* same width as other content */
  margin: 40px auto;        /* center horizontally */
  border: 3px solid #217e81;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Questrial', sans-serif;
  background: white;
  box-sizing: border-box;   /* ensure padding doesn't break width */
}

/* Header (always visible) */
.references-header {
  background-color: #217e81;
  color: white;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Questrial', sans-serif;
}

/* Collapsible content */
.references-content {
  max-height: 0;
  overflow: hidden;
  background: #e1ece3;
  padding: 0 20px;
  transition: max-height 0.5s ease, padding 0.3s ease;
  box-sizing: border-box;    /* ensures padding doesn't overflow */
  border-top: 3px solid #217e81;  /* only top border, avoids double border */
  text-align: left;
}

.references-header:hover {
  background-color: #195e61;
  transform: scale(1.02); /* subtle scale to indicate clickability */
}

.references-content.open {
  max-height: 2000px;        /* enough for all references */
  padding: 15px 20px;
}

.references-content ol {
  padding-left: 20px;
  line-height: 1.5;
  color: #222;
}

.references-content a {
  color: #00897b;
  text-decoration: none;
}

.references-content a:hover {
  text-decoration: underline;
}

    /* Project links homepage */
    .project-links {
  text-align: center;
  margin: 0px auto;
  font-family: 'Questrial', sans-serif;
  padding-top: 50px;
}

.project-links h2 {
  color: #3d8b4f;
  font-size: 4rem;
  margin-bottom: 30px;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px 40px; /* vertical, horizontal spacing */
  justify-content: center;
}

.link-button {
  display: inline-block;
  background-color: #217e81;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 999px; /* makes it oval */
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 500px;
}

.link-button:hover {
  background-color: #195e61;
  transform: scale(1.05);
}

/* CSS for image flowing in the homepage */
/* Initial hidden state */
.animate-left, .animate-right {
  opacity: 0;
  transform: translateX(0);
  transition: all 1.5s ease-out;
}

.animate-left {
  transform: translateX(-100px); /* slide in from left */
}

.animate-right {
  transform: translateX(100px); /* slide in from right */
}

/* When active */
.animate-show {
  opacity: 1;
  transform: translateX(0);
}

/* Connectors for the steps of the project */
.hero-section {
  position: relative; /* important for absolute positioning of connectors */
}

/* Generic vertical connector */
.connector {
  position: absolute;
  width: 2px;
  background-color: black;
}

.connector::before,
.connector::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  left: -3px; /* center dot on vertical line */
}

.connector::before {
  top: -3px; /* start dot */
}

.connector::after {
  bottom: -3px; /* end dot */
}


/* Single connector with 90° curve for Step 1 → Step 2 */
.connector-step1-to-step2 {
  position: absolute;
  top: 620px; /* adjust as needed */
  left: 450px; /* align near Step 1 */
  width: 200px; /* enough to contain curve + horizontal */
  height: 180px; /* enough to contain vertical + curve */
  transform: none; /* remove translateX(-50%) */
  background: transparent; /* ensure no black rectangle */
}

/* vertical line */
.connector-step1-to-step2::before {
  content: '';
  position: absolute;
  top: 390px;
  left: 10px;
  width: 4px;
  height: 140px; 
  background-color: black;
  border-radius: 1px;
}

/* Vertical line2 */
.connector-step1-to-step2-vertical2 {
  content: '';
  position: absolute;
  top: 623px;
  left: 596px;
  width: 4px;
  height: 120px; 
  background-color: black;
  border-radius: 1px;
}

/* horizontal segment with 90° curve */
.connector-step1-to-step2::after {
  content: '';
  position: absolute;
  top: 528px;   /* vertical line ends */
  left: 10px;  /* adjust so it connects to the horizontal line */
  width: 50px;  /* size of the curve square */
  height: 50px;
  border-bottom: 4px solid black;  /* vertical part of curve */
  border-left: 4px solid black;    /* horizontal part of curve */
  border-radius: 0;
  border-bottom-left-radius: 50px; /* quarter-circle pointing down-left */
  background: transparent;
}



/* Horizontal line connecting to the end of the first curve */
.connector-step1-to-step2-horizontal {
  position: absolute;
  top: 574px;
  left: 60px; 
  width: 490px;
  height: 4px;
  background-color: black;
}

/* Curve going down from the horizontal line */
.connector-step1-to-step2-curve2 {
  position: absolute;
  top: 574px;     
  left: 550px;    
  width: 50px;    
  height: 50px;
  border-top: 4px solid black;     /* vertical line coming from above */
  border-right: 4px solid black;   /* horizontal line going to the right */
  border-top-right-radius: 50px;   /* smooth 90° curve */
  background: transparent;
}


/* start and end dots */
.connector-step1-to-step2 .dot-start,
.connector-step1-to-step2 .dot-end {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: black;
  border-radius: 50%;
}

.connector-step1-to-step2 .dot-start {
  top: 390px;
  left: 6px; /* center on vertical line */
}

.connector-step1-to-step2 .dot-end {
  bottom: -567px;
  right: -404px;
}

/* Single connector with 90° curve for Step 2 → Step 3 */
.connector-step2-to-step3 {
  position: absolute;
  top: 950px; /* adjust as needed based on Step 2 */
  left: 450px; /* align near Step 2 */
  width: 200px; /* enough to contain curve + horizontal */
  height: 180px; /* enough to contain vertical + curve */
  transform: none; /* remove translateX(-50%) */
  background: transparent; /* ensure no black rectangle */
}

/* vertical line */
.connector-step2-to-step3::before {
  content: '';
  position: absolute;
  top: 730px;
  left: 605px;
  width: 4px;
  height: 158px;
  background-color: black;
  border-radius: 1px;
}

/* Vertical line2 */
.connector-step2-to-step3-vertical2 {
  position: absolute;
  top: 978px;           /* place relative to the parent's top */
  left: 10px;       /* adjust to where you want it */
  width: 4px;
  height: 100px;
  background-color: black;
  border-radius: 1px;
  z-index: 3;       /* ensure it’s above siblings if needed */
}

/* horizontal segment with 90° curve */
.connector-step2-to-step3::after {
  content: '';
  position: absolute;
  top: 884px;   /* adjust as needed */
  left: 559px;  /* adjust as needed */
  width: 50px;
  height: 50px;
  border-bottom: 4px solid black;  /* vertical part of curve */
  border-right: 4px solid black;   /* horizontal part of curve */
  border-bottom-left-radius: 0;
  border-radius: 0;
  border-bottom-right-radius: 50px; /* quarter-circle pointing down-right */
  background: transparent;
}


/* Horizontal line connecting to the end of the first curve */
.connector-step2-to-step3-horizontal {
  position: absolute;
  top: 930px;  /* align with curve */
  left: 60px; 
  width: 500px;
  height: 4px;
  background-color: black;
}

/* Curve going down from the horizontal line */
.connector-step2-to-step3-curve2 {
  position: absolute;
  top: 930px;     
  left: 10px;    
  width: 50px;    
  height: 50px;
  border-top: 4px solid black;     /* vertical line going up */
  border-left: 4px solid black;    /* horizontal line going left */
  border-top-left-radius: 50px;    /* smooth 90° curve */
  background: transparent;
}




/* start and end dots */
.connector-step2-to-step3 .dot-start,
.connector-step2-to-step3 .dot-end {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: black;
  border-radius: 50%;
}

.connector-step2-to-step3 .dot-start {
  top: 720px;
  left: 601px;
}

.connector-step2-to-step3 .dot-end {
  bottom: -900px; /* center at horizontal end */
  right: 182px;
}

/* Single connector with 90° curve for Step 3 → Step 4 */
.connector-step3-to-step4 {
  position: absolute;
  top: 1250px; /* adjust based on Step 3 */
  left: 450px;  /* align near Step 3 */
  width: 200px; /* enough to contain curve + horizontal */
  height: 180px; /* enough to contain vertical + curve */
  transform: none;
  background: transparent; /* no black rectangle */
}

/* vertical line */
.connector-step3-to-step4::before {
  content: '';
  position: absolute;
  top: 1070px;
  left: 10px;
  width: 4px;
  height: 140px;
  background-color: black;
  border-radius: 1px;
}

/* Vertical line2 */
.connector-step3-to-step4-vertical2 {
  position: absolute;
  top: 1300px;           /* place relative to the parent's top */
  right: -410px;       /* adjust to where you want it */
  width: 4px;
  height: 10px;
  background-color: black;
  border-radius: 1px;
  z-index: 3;       /* ensure it’s above siblings if needed */
}

/* horizontal segment with 90° curve */
.connector-step3-to-step4::after {
  content: '';
  position: absolute;
  top:1209px; /* vertical line ends */
  left: 10px;  /* adjust so it connects to the horizontal line */
  width: 50px;  /* size of the curve square */
  height: 50px;
  border-bottom: 4px solid black;  /* vertical part of curve */
  border-left: 4px solid black;    /* horizontal part of curve */
  border-radius: 0;
  border-bottom-left-radius: 50px; /* quarter-circle pointing down-left */
  background: transparent;
}


/* Horizontal line connecting to the end of the first curve */
.connector-step3-to-step4-horizontal {
  position: absolute;
  top: 1255px; /* align with curve */
  left: 60px;
  width: 500px;
  height: 4px;
  background-color: black;
}

/* Curve going down from the horizontal line */
.connector-step3-to-step4-curve2 {
  position: absolute;
  top: 1255px;
  left: 560px;
  width: 50px;
  height: 50px;
  border-top: 4px solid black;      
  border-right: 4px solid black;   
  border-top-right-radius: 50px;    
  background: transparent;
}



/* start and end dots */
.connector-step3-to-step4 .dot-start,
.connector-step3-to-step4 .dot-end {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: black;
  border-radius: 50%;
}

.connector-step3-to-step4 .dot-start {
  top: 1065px;
  left: 6px;
}

.connector-step3-to-step4 .dot-end {
  bottom: -1140px; /* adjust to center at horizontal end */
  right: -414px;
}

/* === Bootstrap container widths as a CSS var === */
:root { --bs-container-max: 100vw; }            /* default */

@media (min-width: 576px)  { :root { --bs-container-max: 540px;  } }
@media (min-width: 768px)  { :root { --bs-container-max: 700px;  } }
@media (min-width: 992px)  { :root { --bs-container-max: 740px;  } }
@media (min-width: 1200px) { :root { --bs-container-max: 1040px; } }
@media (min-width: 1400px) { :root { --bs-container-max: 1530px; } }

/* current horizontal gutter (space on each side of the centered container) */
:root {
  --flow-cw: min(100vw, var(--bs-container-max));
  --flow-gutter-x: calc((100vw - var(--flow-cw)) / 2);
}

/* Make sure the section that contains the steps is positioned */
.hero-section { position: relative; }

/* Shift your connector wrappers left by the gutter so their px offsets line up
   with the container instead of the viewport */
.connector-step1-to-step2,
.connector-step2-to-step3,
.connector-step3-to-step4 {
  position: absolute;               /* keep your existing absolute layout */
  margin-left: calc(var(--flow-gutter-x) * -1);
  z-index: 2;                        /* ensure above backgrounds */
}




/* CSS for promotional video */
.video-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto;
  max-width: 850px; /* matches the screenshot width */
}

.video-wrapper iframe {
  width: 100%;
  height: 480px; /* adjust height as needed */
  border: 2px solid #000; /* black border */
  box-sizing: border-box;
}

.video-wrapper .caption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #000;
}

/* Buttons for protocols page */
/* container styling */
.protocol-links {
  text-align: center;
  margin: 0 auto;
  font-family: 'Questrial', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* grid layout */
.protocol-links-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px 40px; /* vertical, horizontal spacing */
  justify-content: center;
}

/* button styling */
.protocol-button {
  display: inline-block;
  background-color: #217e81;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 999px; /* oval shape */
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 400px;
}

.protocol-button:hover {
  background-color: #195e61;
  transform: scale(1.05);
}

/* Dropdown boxes/extend boxes */
/* Container box */
.extend-box {
  width: 100%;               /* responsive width */
  max-width: 1200px;        /* same width as other content */
  margin: 40px auto;        /* center horizontally */
  border: 3px solid #217e81;
  border-radius: 16px;      /* rounded edges */
  overflow: hidden;
  font-family: 'Questrial', sans-serif;
  background: white;
  box-sizing: border-box;   /* ensure padding doesn't break width */
}

/* Header (always visible) */
.extend-header {
  background-color: #217e81;
  color: white;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  border-top-left-radius: 8px;  /* round top corners */
  border-top-right-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.extend-header:hover {
  background-color: #195e61;
  transform: scale(1.01); /* subtle scale to indicate clickability */
}

/* Collapsible content */
.extend-content {
  max-height: 0;
  overflow: hidden;
  background: #e1ece3;
  padding: 0 20px;
  transition: max-height 0.5s ease, padding 0.3s ease;
  box-sizing: border-box;
  border-top: 3px solid #217e81;
  border-bottom-left-radius: 16px;  /* round bottom corners */
  border-bottom-right-radius: 16px;
  text-align: left;
}

/* Open state */
.extend-content.open {
  max-height: 10000px;        /* enough for paragraphs */
  padding: 15px 20px;
}

/* Paragraph styling inside extend box */
.extend-content p {
  margin: 0;
  line-height: 1.6;
  color: #222;
  font-size: 1rem;
}

#bcoated-logo-container {
    position: relative;
    height: 50px;
    width: 300px;
    overflow: visible;
    align-items: center;
}

#bcoated-logo {
    position: absolute;
    top:15px;
    left: 0px;
    height: 100px;
}


/* Integrated human practices pop up */
/* Button styling */
.stakeholder-btn {
  background-color: #3d8b4f;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Questrial', sans-serif;
  transition: background 0.3s ease;
}
.stakeholder-btn:hover {
  background-color: #2f6e3d;
}

/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* Modal content box */
.modal-content {
  background: #f4ebe2;
  padding: 20px;
  border-radius: 12px;
  border: 5px solid #ddc5a8;
  max-width: 800px;
  width: 90%;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: fadeIn 0.3s ease;
}

/* Layout inside modal */
.stakeholder-box {
  display: flex;
  gap: 20px;
}

/* Placeholder image */
.stakeholder-img img {
  width: 200px;
  height: auto;
  border-radius: 6px;
  background: #d1e7dd;
}

/* Text styling */
.stakeholder-info {
  flex: 1;
  font-family: 'Questrial', sans-serif;
}
.stakeholder-name {
  color: #3d8b4f;
  margin: 0;
}
.stakeholder-title {
  font-weight: 600;
  margin-bottom: 10px;
}
blockquote {
  font-style: italic;
  color: #555;
  margin: 10px 0;
}
.more-about {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: bold;
  text-transform: lowercase;
}
.stakeholder-info h3 {
  margin: 5px 0;
  font-weight: 900;
}

/* Close button */
.close {
  position: absolute;
  top: 15px; right: 20px;
  font-size: 1.8rem;
  cursor: pointer;
  color: #333;
}
.close:hover { color: #000; }

/* Animation */
@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}

.scale-container {
  width: 100%;
  max-width: 100%;  /* cannot exceed column width */
  position: relative;
  overflow: hidden;
}

.puzzle-container {
  width: 100%;
  position: relative;
}

.puzzle-bg {
  width: 100%;       /* fill container width */
  height: auto;      /* maintain aspect ratio */
  display: block;    /* remove inline spacing */
  object-fit: cover; /* scale to fill container */
  max-width: 100%;   /* prevent overflowing */
}


/* Titles */
.title {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: bold;
  white-space: nowrap;
}

.industry-title  { top: -1%; left: 12.0%;  font-size: 2vw; }
.farmers-title   { top: 55.3%; left: 64.5%; font-size: 2vw; }
.academia-title  { top: 103%; left: 67.3%; font-size: 2vw; transform: translate(-50%, -100%); }
.regulatory-title{ top: -1%; left: 83.5%; font-size: 2vw; }

/* Subtitles */
.subtitle {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: normal;
  white-space: nowrap;
}

.seed-title      { top: 7.5%; left: 30.0%; font-size: 1.5vw; }
.cellulose-title { top: 33.0%; left: 29.0%; font-size: 1.5vw; }
.business-title  { top: 66.3%; left: 27.8%; font-size: 1.5vw; }

/* Stakeholder images */
.stakeholder {
  position: absolute;
  width: 6%;        /* relative to container width */
  aspect-ratio: 1 / 1;
}

.stakeholder img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stakeholder img:hover {
  cursor: pointer;
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* Converted positions from original pixels to percentages */

/* Industry images */
.industry-img1  { top: 9.8%; left: 7.0%; }
.industry-img2  { top: 9.8%; left: 19.0%; }
.industry-img3  { top: 9.8%; left: 31.0%; }
.industry-img5  { top: 35.0%; left: 5.2%; }
.industry-img6  { top: 43.3%; left: 12.7%; }
.industry-img7  { top: 35.0%; left: 20.2%; }
.industry-img8  { top: 43.3%; left: 27.7%; }
.industry-img9  { top: 35.0%; left: 35.2%; }
.industry-img11 { top: 69.3%; left: 8.0%; }
.industry-img13 { top: 69.3%; left: 18.0%; }
.industry-img14 { top: 82.7%; left: 13.0%; }
.industry-img15 { top: 69.3%; left: 28.0%; }
.industry-img16 { top: 82.7%; left: 23.0%; }

/* Farmers images */
.farmers-img1 { top: 38.0%; left: 63.3%; }
.farmers-img2 { top: 38.0%; left: 72.8%; }
.farmers-img3 { top: 38.0%; left: 82.3%; }

/* Academia images */
.academia-img2  { top: 76.7%; left: 54.5%; }
.academia-img3  { top: 63.3%; left: 59.0%; }
.academia-img4  { top: 76.7%; left: 63.5%; }
.academia-img5  { top: 63.3%; left: 68.0%; }
.academia-img6  { top: 76.7%; left: 72.5%; }
.academia-img7  { top: 63.3%; left: 77.0%; }
.academia-img8  { top: 76.7%; left: 81.5%; }
.academia-img9  { top: 63.3%; left: 86.0%; }
.academia-img10 { top: 76.7%; left: 90.5%; }

/* Regulatory images */
.regulatory-img1 { top: 16.7%; left: 57.5%; }
.regulatory-img2 { top: 6.7%;  left: 63.5%; }
.regulatory-img3 { top: 2.5%;  left: 72.5%; }
.regulatory-img4 { top: 6.7%;  left: 81.5%; }
.regulatory-img5 { top: 16.7%; left: 87.5%; }




/* References page template */
/* === Collapsible References === */

/* Box */
#references {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  border: 3px solid #217e81;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
  font-family: 'Questrial', sans-serif;
  cursor: pointer; /* whole box clickable for toggle */
}

/* Header (pseudo element) */
#references::before {
  content: "References";
  display: block;
  background-color: #217e81;
  color: #ffffff;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
}

#references:hover::before {
  background-color: #195e61;
  transform: scale(1.02);
  transform-origin: left center;
}

/* Collapsible content (your #refs) — closed by default */
#references #refs {
  max-height: 0;
  overflow: hidden;
  background: #e1ece3;
  padding: 0 20px;                /* no vertical padding when closed */
  border-top: 3px solid #217e81;
  text-align: left;
  box-sizing: border-box;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

/* Open state (toggle .open on #references) */
#references.open #refs {
  max-height: 10000px;            /* large enough to reveal all items */
  padding: 15px 20px;
}

/* CSL entry defaults + spacing */
#references #refs .csl-entry {
  margin: 0 0 12px 0;
  line-height: 1.6;
  color: #222;
}

/* Hanging indent (your markup already has .hanging-indent on #refs) */
#references #refs.hanging-indent .csl-entry {
  padding-left: 2em;
  text-indent: -2em;
}

/* Links */
#references #refs a {
  color: #00897b;
  text-decoration: none;
  word-break: break-word;         /* prevent long URLs from breaking layout */
}

#references #refs a:hover,
#references #refs a:focus {
  text-decoration: underline;
}

/* Accessibility: keep spacing for list roles */
#references #refs[role="list"] > .csl-entry[role="listitem"] {
  margin-bottom: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #references #refs {
    transition: none;
  }
}

/* Responsive tweaks */
@media (max-width: 600px) {
  #references { width: 95%; margin: 24px auto; }
  #references::before { font-size: 1.4rem; padding: 12px 16px; }
  #references.open #refs { padding: 12px 16px; }
}

/* Print-friendly */
@media print {
  #references {
    border: 1px solid #000;
    border-radius: 0;
    cursor: default;
  }
  #references::before {
    background: none;
    color: #000;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #000;
    transform: none;
  }
  #references #refs {
    background: #fff;
    border-top: none;
    padding: 0;
    max-height: none; /* always expanded on print */
    overflow: visible;
  }
  #references #refs a {
    color: #000;
    text-decoration: underline;
  }
}

/* Brief focus highlight when jumping to a reference */
#references .cite-focus {
  outline: 2px dashed #217e81;
  outline-offset: 6px;
  background: #f7fdfc;
  transition: background 1.5s ease;
}

/* default link color */
  #references .csl-entry a { color: #0645ad; }

  /* make visited links purple (wins over Bootstrap/etc.) */
  #references .csl-entry a:visited { color: purple !important; }

  /* optional: hover/focus */
  #references .csl-entry a:hover { text-decoration: underline; }
  #references .csl-entry a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Make images scale nicely everywhere */
img.img-fluid { display:block; height:auto; }

/* Keep huge headings from overflowing on phones */
@media (max-width: 576px) {
  .display-4, .stress-text {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
  }
}


/* Put @font-face near the top of your CSS */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('https://static.igem.wiki/teams/5713/font/questrial-regular.ttf'); /* note forward slashes + correct case */
}

/* after you load Questrial (via Google Fonts or @font-face) */
:root {
  --bs-body-font-family: 'Questrial', sans-serif;
}
body { font-family: var(--bs-body-font-family) !important; }

/* ---------- HP story boxes ------------ */

/* ====== Layout container ====== */
.design-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 12px 60px;
  font-family: 'Questrial', Arial, sans-serif;
}

/* ====== Box ====== */
.design-box{
  background:#fbf9f4;
  border:1px solid #eee;
  border-radius:16px;
  padding:24px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  margin:28px 0;
}
.design-box__title{
  color:#2f7d49;
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(22px, 2.5vw, 34px);
  margin:0 0 12px 0;
}

/* grid inside a box: left text, right images */
.design-box__content{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:28px;
  align-items:start;
}
@media (max-width: 992px){
  .design-box__content{ grid-template-columns: 1fr; }
  .design-box__images{ order:2; }
}

/* text area */
.design-box__text h4{
  margin:10px 0 6px;
  font-weight:700;
  color:#2f7d49;
}
.design-box__text p{ margin:0 0 14px; line-height:1.55; color:#2a2a2a; }
.design-box__divider{
  border:none; height:2px; background:#2f7d49; opacity:.35; margin:20px 0;
}

/* collapse mechanics */
.design-box__text-inner{
  overflow: hidden;
  max-height: 260px;               /* default collapsed height (big boxes) */
  position: relative;
  transition:max-height 320ms ease;
}
.design-box__text-inner::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:70px;
  background:linear-gradient(to bottom, rgba(251,249,244,0), rgba(251,249,244,1));
  pointer-events:none;
}
.design-box__text-inner.is-expanded{
  max-height:none;
}
.design-box__text-inner.is-expanded::after{ display:none; }

.design-box__toggle{
  display:inline-block;
  margin-top:8px;
  background:#217e81;
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}
.design-box__toggle:hover{ background:#195e61; }

/* right column images (placeholders now) */
.design-box__images{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.design-box__images img{
  width:70px; height:70px; object-fit:cover;
  border-radius:50%;
  background:#eaf3ea;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
@media (max-width: 576px){
  .design-box__images img{ width:140px; height:140px; }
}

/* two narrow boxes in a row */
.design-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 32px;
  align-items:start;
  margin: 6px 0 6px;
}
@media (max-width: 992px){
  .design-grid{ grid-template-columns: 1fr; }
}

/* narrow variant tweaks */
.design-box--narrow{ padding:20px; }
.design-box--narrow .design-box__title{
  font-size: clamp(18px, 2.1vw, 28px);
}
.design-box--narrow .design-box__content{
  grid-template-columns: 1fr 180px;
  gap: 20px;
}
.design-box--narrow .design-box__images img{ width:90px; height:90px; }
.design-box--narrow .design-box__text-inner{ max-height: 180px; }

/* Stack images vertically only for boxes 5.1, 5.2, 7.1, 7.2 */
#box-5-1 .design-box__images,
#box-5-2 .design-box__images,
#box-7-1 .design-box__images,
#box-7-2 .design-box__images {
  display: flex;
  flex-direction: column; /* vertical lineup */
  gap: 10px;
}

/* Default: only the first 2 images are visible */
#box-5-1 .design-box__images img,
#box-5-2 .design-box__images img,
#box-7-1 .design-box__images img,
#box-7-2 .design-box__images img {
  width: 70px;
  height: auto;
  display: none;
}
#box-5-1 .design-box__images img:nth-child(-n+2),
#box-5-2 .design-box__images img:nth-child(-n+2),
#box-7-1 .design-box__images img:nth-child(-n+2),
#box-7-2 .design-box__images img:nth-child(-n+2) {
  display: block;
}

/* When expanded: reveal two more (total 4) */
#box-5-1:has(.design-box__text-inner.is-expanded) .design-box__images img:nth-child(-n+5),
#box-5-2:has(.design-box__text-inner.is-expanded) .design-box__images img:nth-child(-n+5),
#box-7-1:has(.design-box__text-inner.is-expanded) .design-box__images img:nth-child(-n+5),
#box-7-2:has(.design-box__text-inner.is-expanded) .design-box__images img:nth-child(-n+5) {
  display: block;
}



/* ====== hpconnectors (SVG lines & dots) ====== */
.hpconnectors-flow{ position:relative; }
.hpconnectors-canvas{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}

/* theme variables */
.hpconnectors-flow{
  --hp-line:#1a3d22;    /* line color */
  --hp-width:3;         /* px */
  --hp-dot:#1a3d22;     /* dot fill */
  --hp-dot-w:1;         /* px */
  --hp-dot-size:5;      /* px radius */
}

.hpconnectors-line{
  stroke:var(--hp-line);
  stroke-width:var(--hp-width);
  fill:none;
}
.hpconnectors-dot{
  fill:var(--hp-dot);
  stroke:var(--hp-line);
  stroke-width:var(--hp-dot-w);
}

/* -------------- HP value box ---------------- */
/* Values card inside the extend box */
.hp-values{
  background:#e1ece3;
  border:3px solid #e1ece3;      /* green border like the screenshot */
  border-radius:14px;
  padding:18px 22px;
  box-sizing:border-box;
  font-family:'Questrial', sans-serif;
}

.hp-values__intro{
  margin:0 0 12px 0;
  text-align:center;
  line-height:1.35;
  color:#1c1c1c;
}

.hp-values__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  row-gap:20px;
}

.hp-values__item{
  display:grid;
  grid-template-columns: 56px 1fr;  /* icon | text */
  column-gap:14px;
  align-items:start;
}

.hp-values__icon{
  width:56px; height:56px;
  object-fit:contain;
  display:block;
  margin-top:4px;
}

.hp-values__title{
  margin:0 0 4px 0;
  color:#2f7d49;
  font-weight:700;
}

.hp-values__text p{
  margin:0;
  line-height:1.55;
  color:#222;
}

/* Responsive tweaks */
@media (max-width: 480px){
  .hp-values{ padding:16px; }
  .hp-values__item{ grid-template-columns: 44px 1fr; }
  .hp-values__icon{ width:44px; height:44px; }
}

/* -------- Scrollable stakeholder pop up ------------- */

.modal-content {
  /* keep your width & look */
  max-width: 800px;
  width: 90%;
  /* cap height to the viewport and set up a flex column */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* prevent content from spilling outside */
}

/* Make the main content area scrollable */
.stakeholder-box {
  overflow-y: auto;          /* scroll inside the box */
  max-height: calc(85vh - 80px); /* subtract header/close space */
  -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
  padding-right: 6px;        /* small gutter so scrollbar doesn't overlap text */
}

/* Ensure rich content (like your description HTML) doesn’t overflow */
#modalDescription img,
#modalDescription video,
#modalDescription iframe {
  max-width: 100%;
  height: auto;
}

/* Give small screens a bit more vertical room */
@media (max-width: 600px) {
  .modal-content { max-height: 90vh; }
  .stakeholder-box { max-height: calc(90vh - 80px); }
}

/* --- BCoated table theme --- */
.hp-table-wrap { overflow-x: auto; }

table.hp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #3d8b4f;      /* brand green frame */
  border-radius: 12px;
  overflow: hidden;                /* clip rounded corners */
  background: #ffffff;
  font-family: 'Questrial', sans-serif;
}

.hp-table thead th {
  background: #3d8b4f;            /* brand green header */
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 12px 14px;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.25);
}
.hp-table thead th:last-child { border-right: 0; }

.hp-table tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid #e3eee6;  /* soft separators */
}

.hp-table tbody tr:nth-child(even) td {
  background: #f7fbf8;            /* light zebra row */
}

.hp-table tbody tr:hover td {
  background: #f1f8f3;            /* subtle hover */
}

/* ------------ HP introduction color boxes ---------------- */
/* --- Colored HP cards --- */
.hp-cards {
  display: flex;
  flex-direction: column; /* one per row */
  gap: 18px;
  width: 100%;
}

/* Card */
.hp-card {
  --bg: #f7f9fb;        /* fallback */
  --accent: #2f7d49;     /* fallback */
  background: var(--bg);
  color: #132015;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  line-height: 1.55;
  width: 100%;
}

.hp-card strong {
  display: block;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 6px;
}

/* Individual color themes */
.hp-card--academia     { --bg:#fec0e6; --accent:black; }
.hp-card--seed         { --bg:#35878a; --accent:white; }
.hp-card--cellulose    { --bg:#92bcbd; --accent:black; }
.hp-card--scaleup      { --bg:#e0e8e9; --accent:black; }
.hp-card--farmers      { --bg:#feaf48; --accent:black; }
.hp-card--governance   { --bg:#4a1808; --accent:white; }

/* HP integration icon */
/* Inline symbol — size tracks the surrounding font-size */
.hp-inline-symbol{
  display:inline-block;
  height:2em;           /* match text height */
  width:auto;           /* keep aspect ratio */
  vertical-align:-0.15em;/* baseline nudge (tweak if needed) */
  margin:0 .25em;       /* small side breathing room */
}

/* Quick size variants (optional) */
.hp-inline-symbol--sm{ height:1.5em; }
.hp-inline-symbol--lg{ height:2.5em; }

/* ----------- href colour ----------- */
/* base (zero specificity thanks to :where) */
main a[href]:where(:not(.btn):not(.nav-link):not(.navbar-brand):not(.step-tag)) {
  color: #3d8b4f;
  font-weight: 600;
  text-decoration: none;
}

/* hover/focus */
main a[href]:where(:not(.btn):not(.nav-link):not(.navbar-brand):not(.step-tag)):hover,
main a[href]:where(:not(.btn):not(.nav-link):not(.navbar-brand):not(.step-tag)):focus {
  color: #2e6f40;
  text-decoration: underline;
}

/* --------------- Notebook ---------------- */
/* Close button styling */
.close-btn {
  display: block;
  margin: 20px auto 10px auto;
  padding: 10px 20px;
  background-color: #217e81;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  font-family: 'Questrial', sans-serif;
}

.close-btn:hover {
  background-color: #195e61;
  transform: scale(1.05);
}
/* Notebook rectangle main page */
/* Container box */
.notebook-box {
  width: 100%;               /* responsive width */
  max-width: 1200px;        /* same width as other content */
  margin: 20px auto;        /* center horizontally */
  border: 3px solid #217e81;
  border-radius: 10px;      /* rounded edges */
  overflow: hidden;
  font-family: 'Questrial', sans-serif;
  background: white;
  box-sizing: border-box;   /* ensure padding doesn't break width */
}

/* Header (always visible) */
.notebook-header {
  background-color: #217e81;
  color: white;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  border-top-left-radius: 10px;  /* match the box */
  border-top-right-radius: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.notebook-header:hover {
  background-color: #195e61;
  transform: scale(1.01); /* subtle scale to indicate clickability */
}

/* Collapsible content */
.notebook-content {
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  padding: 0 20px;
  transition: max-height 0.5s ease, padding 0.3s ease;
  border-top: 3px solid #217e81; 
  text-align: left;
}

.notebook-content.open {
  /* JS will set the correct max-height dynamically */
  padding: 15px 20px;
}

.notebook-content ol {
  padding-left: 20px;
  line-height: 1.5;
  color: #222;
}

.notebook-content a {
  color: #00897b;
  text-decoration: none;
}

.notebook-content a:hover {
  text-decoration: underline;
}

.notebook-content p {
  text-align: justify;
  font-family: 'Questrial', sans-serif;
  margin-bottom: 15px; 
  line-height: 1.6;    
}

  /* Add spacing between dropdowns only */
.notebook-content .dropdown,
.notebook-content .dropdown-row {
  margin-top: 20px; /* adjust value as needed */
  margin-bottom: 20px; /* adjust value as needed */
}


/* ----------- figcaption -------------- */
/* site-wide */
  figcaption {
    font-size: 0.85rem;
    margin-top: 0.4rem;
  }

 /* existing styles unchanged */
.spatable-wrap { 
  overflow-x: auto; 
}

table.spatable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #3d8b4f;      /* brand green frame */
  border-radius: 12px;
  overflow: hidden;                /* clip rounded corners */
  background: #ffffff;
  font-family: 'Questrial', sans-serif;
}

.spatable thead th {
  background: #feaf48;            /* brand green header */
  color: #000;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 12px 14px;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.25);
}
.spatable thead th:last-child { border-right: 0; }

.spatable tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid #e3eee6;  /* soft separators */
}

/* remove zebra stripes */
.spatable tbody tr:nth-child(even) td { background: transparent; }

/* custom row colors */
.spatable tbody tr:nth-child(1) td { background: #ffffff; } /* light red */
.spatable tbody tr:nth-child(2) td { background: #ffffff; } /* light yellow */
.spatable tbody tr:nth-child(3) td { background: #3d8b4f;  font-weight: bold} /* light green */
.spatable tbody tr:nth-child(4) td { background: #ffffff; } /* light blue */
.spatable tbody tr:nth-child(5) td { background: #ffffff; } /* light purple */
.spatable tbody tr:nth-child(6) td { background: #ffffff; } /* light pink */
.spatable tbody tr:nth-child(1) td:nth-child(1) { background: #d5ffad;  }
.spatable tbody tr:nth-child(2) td:nth-child(1) { background: #d5ffad;  }
.spatable tbody tr:nth-child(4) td:nth-child(1) { background: #d5ffad;  }
.spatable tbody tr:nth-child(5) td:nth-child(1) { background: #d5ffad;  }


  filter: brightness(0.97);
}

/* Base: normal weight for all TOC links */
.toc-list a { font-weight: 500; }

/* Level 1 (top headings) – keep bold if you want */
.toc-list > ul > li > a { font-weight: 700; }

/* Level 2 (subheadings) – NOT bold */
.toc-list > ul > li > ul > li > a { font-weight: 500; }

/* Level 3 (sub-sub-headings) – bold again */
.toc-list > ul > li > ul > li > ul > li > a { font-weight: 700; }

/* Optional: small visual cues for hierarchy */
.toc-list > ul > li > a { padding-left: 0; }
.toc-list > ul > li > ul > li > a { padding-left: .75rem; }
.toc-list > ul > li > ul > li > ul > li > a { padding-left: 1.5rem; }

.vibration-table-wrap { 
  overflow-x: auto; 
}
.vibration-table {
  width: 60%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Questrial', sans-serif;
  margin: 10px 0;
  background: #ffffff;
}

.vibration-table th, .vibration-table td {
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  text-align: left;
  vertical-align: middle;
}

.vibration-table th {
  font-weight: bold;
  background: #d5ffad;   /* orange header, matches Prodes table */
  color: #000;
  font-size: 1.1em;
}

/* Alternate row colors with subtle pastel shades */
.vibration-table tr:nth-child(2) { background-color: #217e81; color: #fff; }
.vibration-table tr:nth-child(3) { background-color: #feaf48; color: #000; }
.vibration-table tr:nth-child(4) { background-color: #feaf48; color: #000; }
.vibration-table tr:nth-child(5) { background-color: #feaf48; color: #000; }
.vibration-table tr:nth-child(6) { background-color: #feaf48; color: #000; }
.vibration-table tr:nth-child(7) { background-color: #ddc5a8; color: #000; }
.vibration-table tr:nth-child(8) { background-color: #ddc5a8; color: #000; }
.vibration-table tr:nth-child(9) { background-color: #3d8b4f; color: #fff; }
.vibration-table tr:nth-child(10) { background-color: #ddc5a8; color: #000; }
.vibration-table tr:nth-child(11) { background-color: #3d8b4f; color: #fff; }
.vibration-table tr:nth-child(12) { background-color: #491808; color: #fff; }

p {
    align: justified;
}

.prodes-table-wrap { 
  overflow-x: auto; 
}

table.prodes-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;      /* brand green frame */
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  font-family: 'Questrial', sans-serif;
  #table-layout: fixed;
}

.prodes-table thead th {
  background: #feaf48;            
  color: #000;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 12px 14px;
  text-align: Justify;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.prodes-table thead th:last-child { border-right: 0; }

.prodes-table tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid ; 
  border: 1px solid rgba(0, 0, 0, 0.5);
}

 /* Make header row bold with background color */
.prodes-table thead th {
  font-weight: bold;
  background: #feaf48;   /* orange header */
  border: 1px solid rgba(0, 0, 0, 0.5);
}

/* First column: bold + different background color */
.prodes-table tbody td:first-child {
  font-weight: bold;
  background: #d5ffad;   /* light green */
  color: #000;           /* text color */
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}

.prodes-table tbody tr:nth-child td { background: #ffffff; }

.prodes-table td ul {
  margin: 0;              /* removes extra space */
  padding-left: 18px;     /* indent for bullets */
  list-style-type: disc;  /* bullet style (disc, circle, square) */
}

.prodes-table td li {
  margin-bottom: 4px;     /* spacing between lines */
}	  

/* ------------- stakeholder map compatibility -------------- */
/* Prevent a flash of mispositioned labels */
  .puzzle-container:not(.is-ready) .title,
  .puzzle-container:not(.is-ready) .subtitle,
  .puzzle-container:not(.is-ready) .stakeholder {
    visibility: hidden;
  }

  .equation-block { text-align: center; margin: 2em 0 1.5em; } /* mimics the vspace */
  math { font-size: 1.5rem; } /* instead of \scalebox{2} */

    /* Push the title lower on small screens */
  @media (max-width: 600px) {
    .sticky-hero-title {
      top: calc(env(safe-area-inset-top, 0px) + 10vh) !important;
    }
  }
  @media (max-width: 380px) {
    .sticky-hero-title {
      top: calc(env(safe-area-inset-top, 0px) + 12vh) !important;
    }
  }

/* The header must be a positioning context */
  .header-block { position: relative; }

  /* Bottom-center overlay, sized responsively */
  .lottie-overlay{
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 4vh, 56px);
    transform: translateX(-50%);
    z-index: 3;                /* below your title if title uses z>3 */
    width: clamp(160px, 28vw, 420px);
    pointer-events: none;      /* never blocks clicks */
  }
  .lottie-overlay dotlottie-player{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;       /* give it height; adjust if your anim isn’t square */
    height: auto;
  }

/* No-scroll wrapper */
.dbtl-wrap{
  width:100%;
  overflow:hidden;            /* guarantees no horizontal scrollbar */
}

/* DBTL strip */
.dbtl-strip{
  --h: clamp(36px, 6vw, 52px);    /* height */
  --arrow: clamp(34px, 4vw, 44px);/* arrow tip width */
  --pad: clamp(16px, 2vw, 24px);  /* side padding */

  display:flex;
  justify-content:flex-start;     /* left aligned */
  align-items:stretch;
  gap:0;
  width:20%;
  margin:0.2rem 0;
  padding-right:var(--arrow);     /* room for the final arrow tip */
}

.dbtl-strip .step{
  position:relative;
  flex:1 1 0;
  min-height:var(--h);
  padding:0 var(--pad);
  padding-right:calc(var(--pad) + var(--arrow)); /* space for its own tip */

  display:flex; align-items:center; justify-content:center;

  font:700 clamp(14px,1.9vw,20px)/1 Questrial, sans-serif;
  text-transform: letter-spacing:.06em;
  color:#0b0b0b; background:var(--bg);
  white-space:nowrap;

  border-radius:0 !important;     /* hard square edges */
  box-shadow:none;
  z-index:1;
}

/* Right-pointing triangular tip (classic border trick) */
.dbtl-strip .step::after{
  content:"";
  position:absolute;
  top:50%; right:calc(-1 * var(--arrow));
  transform:translateY(-50%);
  border-top:calc(var(--h)/2) solid transparent;
  border-bottom:calc(var(--h)/2) solid transparent;
  border-left:var(--arrow) solid var(--bg);
}

/* overlap so earlier step’s tip sits on top of the next block */
.dbtl-strip .step + .step{ margin-left:calc(-1 * var(--arrow)); }
.dbtl-strip .step:nth-child(1){ z-index:4; }
.dbtl-strip .step:nth-child(2){ z-index:3; }
.dbtl-strip .step:nth-child(3){ z-index:2; }

/* IMPORTANT: do NOT hide the last arrow anymore */
/* (removed the old `.step:last-child::after{display:none}` rule) */

@media (max-width: 576px) {
  /* Hide connector lines/dots only */
  .hpconnectors-canvas,
  .hpconnectors-line,
  .hpconnectors-dot {
    display: none !important;
  }
}

p {
    text-align: justify;
  }


/* Default gutter: same nice spacing as your screenshot */
.consistent-gap {
  --bs-gutter-x: 1rem; /* horizontal space between columns */
  --bs-gutter-y: 2rem; /* vertical space between rows */
}

/* Slightly reduce gap on very large screens so the cards move closer */
@media (min-width: 1400px) {
  .consistent-gap {
    --bs-gutter-x: -20rem;
  }
}

/* Keep good spacing and stacking on tablets and phones */
@media (max-width: 991.98px) {
  .consistent-gap {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2rem;
  }
}