#igem-attribution-form,
.row.mt-4 {
  position: relative;
  z-index: 10;
  background: transparent !important;
}

/* Outfit Google Fonts*/

h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}
h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
}
h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
}
h4, h5{
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
}
h6{
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
}
p, li,a {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
}
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent !important;
}



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


/* Navigation Bar*/
/* NAVBAR — non-sticky, single-color pill, extra outer spacing */
.navbar.glass-nav{
  --glass-bg: rgba(32,35,42,0.24);          /* one uniform color for the whole pill */
  --glass-shadow: 0 16px 40px rgba(0,0,0,.18);
  position: relative;                          /* ← non-sticky */
  top: auto;
  z-index: 1001;
  width: min(1200px, calc(100% - 3rem));     /* wider gutters left/right */
  margin: 24px auto 0;                       /* more space at the very top */
  padding-block: 1.25rem;                    /* thicker vertically */
  padding-inline: 1.25rem;
  border-radius: 999px;                      /* pill shape */
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--glass-shadow);
  border: 1px solid rgba(255,255,255,.22);
}
/* kill any inner darker bar on desktop */
.navbar.glass-nav::before,
.navbar.glass-nav::after{ content:none !important; }
.navbar.glass-nav > .container,
.navbar.glass-nav > .container-fluid,
.navbar.glass-nav .navbar-collapse,
.navbar.glass-nav .navbar-nav{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* links & hover underline */
.navbar.glass-nav > .container,
.navbar.glass-nav > .container-fluid{ max-width: 100%; padding-inline: .75rem; }
.navbar.glass-nav .nav-link{ color:#d1d5db; font-weight:600; }
.navbar.glass-nav .nav-link:hover,
.navbar.glass-nav .nav-link:focus{ color:#f3f4f6; }
.navbar.glass-nav .navbar-toggler{ color:#d1d5db; border:0; }
.navbar.glass-nav .navbar-toggler:focus{ box-shadow:none; }
@media (hover:hover){
  .navbar.glass-nav .nav-link{ position:relative; }
  .navbar.glass-nav .nav-link::after{
    content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
    background: rgba(255,255,255,.7);
    transform: scaleX(0); transform-origin:center; transition: transform .18s ease-out;
    border-radius: 14px;
  }
  .navbar.glass-nav .nav-link:hover::after,
  .navbar.glass-nav .nav-link.active::after{ transform: scaleX(1); }
}
/* dropdowns & fallbacks unchanged */
.dropdown-menu.glass-menu{
  --menu-bg: rgba(255,255,255,.58);
  --menu-border: rgba(255,255,255,.65);
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 14px;
  z-index: 1002;
  padding: .5rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.dropdown-menu.glass-menu .dropdown-item{ color:#2f3136; font-weight:500; border-radius:10px; }
.dropdown-menu.glass-menu .dropdown-item:hover,
.dropdown-menu.glass-menu .dropdown-item.active{ background: rgba(0,0,0,.06); color:#111; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .navbar.glass-nav{ background: rgba(65,65,70,.92) !important; }
  .dropdown-menu.glass-menu{ background: rgba(255,255,255,.98); }
}
@media (prefers-reduced-motion:reduce){
  .navbar *{ transition:none !important; animation:none !important; }
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}


/* Page Header */
/* PAGE HEADER — full-bleed, zero space above */
.desc-page-header{
  --hdr-bg: transparent !important;
  --hdr-fg: #fff;
  --nav-outer-gap: 24px;                /* matches navbar top margin */
  position: relative;
  z-index: var(--z-header);                           /* above the background image */
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 50px; 
  /* pull upward so it tucks under the navbar visually */
  margin-top: 30px;
  padding-top: 0px;
  padding-bottom: 5px;
  border: 0; border-radius: 0;
  display: flex;                /* makes justify-content work */
  justify-content: center;      /* centers horizontally */
  align-items: center;
  /* create the space before the columns start */
}
.desc-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1rem;
  display: flex;
  align-items: flex-end;
}
.desc-header-title{
  margin: 0;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: clamp(2.4rem, 3.8vw + 1rem, 4.8rem);
}
/* color presets (keep) */
.hdr-rose     { --hdr-bg: rgb(243,135,123); }
.hdr-tangerine{ --hdr-bg: rgb(229,138,121); }
.hdr-slate    { --hdr-bg: rgb(51,65,85); }
.hdr-berry    { --hdr-bg: rgb(124,58,237); }
.hdr-kiwi     { --hdr-bg: rgb(34,197,94); }
.hdr-ocean    { --hdr-bg: rgb(14,165,233); }
.hdr-light    { --hdr-fg:#ffffff; }
.hdr-dark     { --hdr-fg:#111111; }





/* Background Settings*/
html, body { height:100%; background: transparent !important; }
body{ position: relative; }                      /* create a stacking context */
body::before{
  pointer-events:none;
  content:"";
  position: fixed;                               /* stays put while scrolling */
  inset: 0;
  z-index: 0;                                    /* behind all page content */
  background: center / cover no-repeat;
}


/* Make the hero stack above decorative layers */
.hero{
  position: relative;
  z-index: 15;
}

/* Ensure the title and button can stack, too */
.hero h1,
.hero .cta{
  position: relative;  /* <-- critical */
  z-index: 16;
  color: var(--ink);   /* force visible color just in case */
}
/* If you have any decorative top layer, keep it out of the way */
.header-bg, .page-banner, .bg-layer{ pointer-events:none; }

/* And make sure the main wrapper participates in stacking */
.home-wrap{ position: relative; z-index: 10; }


#team-welcome, #leaders, #members, #instructors, #advisors {
  position: relative;
  z-index: 15;
  background: transparent; /* change to a color to test overlap quickly */
}

/* Page Background Overrides (pick per page via data-page attr) */
body[data-page="home"]::before         { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/group-52-2.avif'); }
body[data-page="members"]::before         { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/group-49.avif'); }
body[data-page="attributions"]::before    { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/lemon-background2.webp'); }


body[data-page="description"]::before     { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/peach-background.webp'); }
body[data-page="results"]::before         { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/tangerine-background.webp'); }
body[data-page="contribution"]::before    { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/fig-background.webp'); }

body[data-page="experiments"]::before     { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/blueberry-background2.webp'); }
body[data-page="notebook"]::before        { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/grape-background.webp'); }
body[data-page="safety"]::before          { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/group-38-2.avif'); }

body[data-page="engineering"]::before     { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/kiwi-background.webp'); }
body[data-page="measurement"]::before     { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/pear.avif'); }
body[data-page="parts"]::before           { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/group-45.avif'); }

body[data-page="human-practices"]::before { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/mango-background.webp'); }
body[data-page="awards"]::before          { background-image:url('https://static.igem.wiki/teams/5773/backgrounds/awards-background.webp'); }

/* Make common wrappers transparent so the background shows through */
body main, .container, .container-fluid { background: transparent !important; }




/* Quick Acess Pills (Sticky) — LEFT SIDEBAR, tighter left margin, no overlap */
/* Layout wrapper: left = pills, right = cards */
.desc-layout{
  max-width: 1440px;                   /* wider page */
  margin: 0 auto;
  padding: 0 .5rem;                    /* small outer gutters */
  display: grid;
  grid-template-columns: 260px minmax(0,1fr); /* wider sticky rail */
  column-gap: 36px;                    /* space between pills and cards */
  align-items: start;
}
/* Pills sidebar (not sticky now, but easy to switch) */
.quick-access{
  --pill-bg: rgba(255,255,255,.66);
  --pill-fg: #1f2937;
  --pill-hover-bg: rgba(255,255,255,.9);
  --pill-hover-fg: #111;
  position: sticky;                    /* make it stick */
  top: 16px;                           /* distance from top while scrolling */
  align-self: start;                   /* ensure the column starts at top */
  z-index: 2;                          /* above background */
}
.quick-pills{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.quick-pills .pill{
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
}
.quick-pills .pill:hover{
  background: var(--pill-hover-bg);
  color: var(--pill-hover-fg);
  text-decoration: none;
}
/* Cards area (no fake left padding any more) */
.desc-content{
  z-index: 3;
  min-width: 0;                              /* grid overflow guard */
}
/* Pills turn into a row on small screens */
@media (max-width: 991.98px){
  .desc-layout{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .quick-pills{
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* Optional quick color presets (apply to .quick-access) */
.qa-slate { --pill-bg: rgba(51,65,85,.85); --pill-fg:#fff; --pill-hover-bg: rgba(51,65,85,1); --pill-hover-fg:#fff; }
.qa-rose  { --pill-bg: rgba(243,135,123,.80); --pill-fg:#fff; --pill-hover-bg: rgba(243,135,123,1); --pill-hover-fg:#fff; }
.qa-kiwi  { --pill-bg: rgba(34,197,94,.80);  --pill-fg:#0b3018; --pill-hover-bg: rgba(34,197,94,.95); --pill-hover-fg:#0b3018; }
.qa-ocean { --pill-bg: rgba(14,165,233,.80); --pill-fg:#062433; --pill-hover-bg: rgba(14,165,233,1); --pill-hover-fg:#062433; }





/* Team Section */ 
#members .card-img-top{
  height:261px;
  object-fit: cover;
}
.card {
  border-radius: 1.5rem;
  transition: transform 0.3s;
  overflow: visible;
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center;
}
.card .profile-img {
  float: left;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 1rem .5rem 0;
  box-shadow: 0 6px 16px rgba(0,0,0, .08);
  display: block;
  max-width: 100%;
}
@media (max-width: 576px) {
  .card .profile-img {
      width: 84px;
      height: 84px;
      margin-right: .75rem;
  }
}
.card:hover {
  animation: card-wobble 900ms ease-in-out;
}
@keyframes card-wobble {
  0%   { transform: translateY(-5px) rotate(0deg); }
  20%  { transform: translateY(-5px) rotate(2deg); }
  40%  { transform: translateY(-5px) rotate(-2deg); }
  60%  { transform: translateY(-5px) rotate(1.5deg); }
  80%  { transform: translateY(-5px) rotate(-1.5deg); }
  100% { transform: translateY(-5px) rotate(0deg); }
}
#leaders .card {
background-color: #F8F2E2 !important; border: 4px solid #FBD6A2;
}
#members .card {
background-color: #F2F8EB !important; border: 4px solid #B4CAA2;
}
#instructors .card {
background-color: #EFFCFF !important; border: 4px solid #BBDAE0;
}
#advisors .card {
background-color: #FBF2F4 !important; border:4px solid #EFC2CE;
}




/* Project Section */
.desc-content{
  max-width: none;
  margin: 0 0 4rem 0;
  padding-inline: 0;
}
.anchor-offset{ scroll-margin-top: calc(var(--nav-height) + 120px); }
.desc-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  margin-bottom: 1.25rem;
  z-index: 3;
  overflow: hidden;
}
.desc-card-header{
  background: rgb(243,135,123);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
}

/* Experiments page: tweak card header color only on this page */
body[data-page="experiments"] .desc-card-header{
  background: rgba(14,165,233,.85);  
}

.desc-card-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -.012em;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.65rem);
  color: rgba(255, 255, 255, 0.85);
}
.desc-card-body{
  padding: 1.25rem;
  color: #111827;
}
/* No wobble/hover on these cards */
.desc-card:hover{ transform:none !important; animation:none !important; }
/* Subtitles inside cards */
.desc-subtitle{
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-weight: 700;
  color: #1f2937;
}
/* Figure slots (centered, consistent, rounded) */
.desc-figure{
  text-align: center;
  margin: 1rem 0;
}
.desc-figure-img{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;         /* keeps images visually consistent */
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.desc-figure-cap{
  color: #000000;
  font-size: .95rem;
  margin-top: .5rem;
}
.side-by-side-figs{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .side-by-side-figs{ grid-template-columns: 1fr 1fr; }
}
.side-by-side-figs .equal-img{
  width: 100%;
  aspect-ratio: 4 / 3;    /* or 16 / 9 */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}


/* Rounded table wrapper */
.table-wrap{
  background: #fff;
  border-radius: 14px;
  overflow: hidden; /* makes table corners rounded */
  border: 1px solid rgba(.06,.06,.06,.06);
  box-shadow: 0 8px 20px rgba(.05,.05,.05,.05);
  margin: 1rem 0;
}
.table-wrap .table{ margin-bottom: 0; }
.table-caption{
  padding: .65rem .85rem;
  font-size: .925rem;
  color: #000000;
  background: #f8fafc;
  border-top: 1px solid rgba(0,0,0,.06);
  text-align: center
}
/* Keep bootstrap striping readable inside the rounded wrapper */
.table-wrap .table thead th{ font-weight: 700; }
/* Utility: keep long URLs from breaking layout in references */
#references ol li{ word-break: break-word; }
/* Keep background image visible on the Description page */
body[data-page="description"] main,
body[data-page="description"] .container,
body[data-page="description"] .container-fluid {
  background: transparent !important;
}
table, th, td, caption, figure, figcaption {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 200; /* match your body text weight */
  color: #000000;   /* optional: ensure readability on white cards */
}
/* Optional: make table headers bolder for contrast */
table thead th {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center
}
  

 

/*will Reorder or Delete*/

.bd-callout {
  padding: 1.25rem;
  margin: 1.5rem 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  color: #fff;
}
.bd-callout-info    { border-left: 4px solid #5bc0de; }
.bd-callout-warning { border-left: 4px solid #f0ad4e; }
.bd-callout-danger  { border-left: 4px solid #d9534f; }

/* ───────────────────────────────────────────────
   PAGE-SPECIFIC COLOR OVERRIDES
   Pills (quick-access) and Card Headers
   ─────────────────────────────────────────────── */

/* Description */
body[data-page="description"] .quick-access {
  --pill-bg: #F3887B;
  --pill-hover-bg: #f6a598;
}
body[data-page="description"] .desc-card-header {
  background: #F3887B !important;
}

/* Results */
body[data-page="results"] .quick-access {
  --pill-bg: #FB7701;
  --pill-hover-bg: #fc9340;
}
body[data-page="results"] .desc-card-header {
  background: #FB7701 !important;
}

/* Contribution */
body[data-page="contribution"] .quick-access {
  --pill-bg: #D3605A;
  --pill-hover-bg: #dc827e;
}
body[data-page="contribution"] .desc-card-header {
  background: #D3605A !important;
}

/* Experiments */
body[data-page="experiments"] .quick-access {
  --pill-bg: #093059;
  --pill-hover-bg: #104a88;
}
body[data-page="experiments"] .desc-card-header {
  background: #093059 !important;
}

/* Notebook */
body[data-page="notebook"] .quick-access {
  --pill-bg: #2F1853;
  --pill-hover-bg: #4d2b84;
}
body[data-page="notebook"] .desc-card-header {
  background: #2F1853 !important;
}

/* Safety */
body[data-page="safety"] .quick-access {
  --pill-bg: #2A0A33;
  --pill-hover-bg: #491156;
}
body[data-page="safety"] .desc-card-header {
  background: #2A0A33 !important;
}

/* Engineering */
body[data-page="engineering"] .quick-access {
  --pill-bg: #647322;
  --pill-hover-bg: #91a531;
}
body[data-page="engineering"] .desc-card-header {
  background: #647322 !important;
}

/* Measurement */
body[data-page="measurement"] .quick-access {
  --pill-bg: #A8C347;
  --pill-hover-bg: #bddc60;
}
body[data-page="measurement"] .desc-card-header {
  background: #A8C347 !important;
}

/* Parts */
body[data-page="parts"] .quick-access {
  --pill-bg: #c6cabb;
  --pill-hover-bg: #ffffff;
}
body[data-page="parts"] .desc-card-header {
  background: #c6cabb !important;
  color: #000 !important; /* white text would vanish here */
}

/* Awards */
body[data-page="awards"] .quick-access {
  --pill-bg: #FFBC5B;
  --pill-hover-bg: #ffd48e;
}
body[data-page="awards"] .desc-card-header {
  background: #FFBC5B !important;
}

/* Human Practices */
body[data-page="human-practices"] .quick-access {
  --pill-bg: #EB5B39;
  --pill-hover-bg: #f48464;
}
body[data-page="human-practices"] .desc-card-header {
  background: #EB5B39 !important;
}

/* ───────── FOOTER (belt + dark layer + circles) ───────── */
.igem-footer{
  /* theme tokens */
  --belt-bg: #e4e4e4;               /* light gray strip */
  --dark-brown: #241f1a;            /* dark layer */
  --circle-bg: #e9e9e9;
  --circle-fg: #1c1c1c;

  /* layout tokens you can tweak */
  --maxw: 1200px;                   /* inner content width cap */
  --belt-pad: 24px;                 /* gray belt vertical padding */
  --belt-gap: 24px;                 /* space between belt title and track */
  --stack-gap: 28px;                /* equal gaps: desc ↔ icons ↔ license */
  --belt-duration: 80s;            /* scroll speed (bigger = slower) */
  --logo-w: 200px;
  --logo-h: 140px;

  color: #fff;                      /* default text inside brown area */
  background: transparent;

  /* make footer immune to upstream layout weirdness */
  display: block;
  width: 100%;
  margin: 0;
  clear: both;                      /* kill stray floats from upper content */
  isolation: isolate;               /* isolate z-index/filters from ancestors */
}
.igem-footer * { box-sizing: border-box; }

/* unify any containers used inside footer regardless of page */
.igem-footer .container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}

/* 1) Moving logo belt (full-bleed) */
.igem-footer .logo-belt{
  background: var(--belt-bg);
  overflow: hidden;
  padding-block: var(--belt-pad);
  position: relative;
  width: 100%;
}
/* center the title + track as one vertical stack */
.igem-footer .belt-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--belt-gap);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}
.igem-footer .belt-title{
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.575rem); /* match project description */
  font-weight: 700;                                /* thicker */
  letter-spacing: .05rem;
  color: var(--dark-brown);                        /* brown text on gray belt */
  padding-top: 0.5rem;    
  padding-bottom: 0.5rem;
  text-align: center;
}
.igem-footer .belt-track{
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: belt-scroll var(--belt-duration) linear infinite;
  will-change: transform;
}
@keyframes belt-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }  /* relies on duplicated logo set */
}
.igem-footer .belt-logo{
  display: inline-grid;
  place-items: center;
  width: var(--logo-w);              /* fixed visual box so all logos align */
  height: var(--logo-h);
  background: #ffffff;
  border-radius: 12px;
  flex: 0 0 auto;
}
.igem-footer .belt-logo img{
  display: block;
  max-height: calc(var(--logo-h) - 17px);
  max-width: calc(var(--logo-w) - 20px);
  width: auto;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .igem-footer .belt-track{ animation: none; }
}

/* 2) Dark body (full-bleed, consistent internal stack) */
.igem-footer .footer-body{
  background: var(--dark-brown);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* equal gaps between the 3 direct children:
     .footer-copy (desc), .footer-quick (icons), .legal (license) */
  gap: var(--stack-gap);
  padding: 40px 20px 60px;
}
.igem-footer .footer-copy{
  text-align: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}
.igem-footer .team-name{
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: 0.5rem;
  margin: 0 0 .4rem 0;
  font-size: clamp(1.4rem, 2.2vw + .6rem, 2.4rem);
}
.igem-footer .team-desc{
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  margin: 0;
  line-height: 1.4;
  opacity: .95;
  font-size: clamp(.9rem, .8vw + .6rem, 1.05rem);
}

/* 3) Circular quick links (centered row) */
.igem-footer .footer-quick{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;                        /* space between the three circles */
  width: 100%;
}
.igem-footer .circle-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--circle-bg);
  color: var(--circle-fg);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, background-color .18s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.igem-footer .circle-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.igem-footer .circle-btn:active{ transform: translateY(0); }

/* License (always centered, same inner width) */
.igem-footer .legal{
  color: #fff;
  text-align: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}
.igem-footer .legal a{ color: #fff; text-decoration: underline; }

/* Keep your required attribution block above background if it ever appears */
#igem-attribution-form,
.row.mt-4{
  position: relative;
  z-index: 10;
  background: transparent !important;
}

/* Small screens */
@media (max-width: 575.98px){
  .igem-footer{ --logo-w: 130px; --logo-h: 50px; }
  .igem-footer .team-name{ letter-spacing: .35rem; }
}

/* 1) Remove extra space INSIDE the footer */
.igem-footer .footer-body{ padding-bottom: 32px; }       /* was 60px in some versions */
.igem-footer .legal p:last-child{ margin-bottom: 0; }     /* your 2nd <p> had default bottom margin */


/* 3) Make sure the page itself isn’t adding body/html margins,
      and have the footer sit flush at the bottom on short pages */
html, body{ height:100%; margin:0; padding:0; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; }     /* content grows */
footer{ flex:0 0 auto; }   /* footer hugs the bottom */