/*
 * site.css
 * Project-specific styles for the Blokmaster/VYX site.
 * Renamed from additional.css for clarity.
 */

/* ===== Copied from additional.css ===== */
.btn {
  border-width: 2px;
}
.site-figure iframe,
img,
.card-wrap,
.card-wrapper,
.video-wrapper,
.google-map iframe,
.slide-content,
.plan,
.card,
.item-wrapper {
  border-radius: 2rem !important;
}
.video-wrapper {
  overflow: hidden;
}
body {
  font-family: 'Giga Sans', sans-serif;
}
.text-dark-main {
  color: #000000;   /* your main dark text */
}
.text-light-main {
  color: #f2f2f2;   /* your main light text */
}


.display-1 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 3.5rem;
  line-height: 2;
}
.display-1 > .site-icon {
  font-size: 5.25rem;
}
.display-2 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 3.5rem;
  line-height: 2;
}
.display-2 > .site-icon {
  font-size: 5.25rem;
}
.display-3 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 2.5rem;
  line-height: 2;
}
.display-3 > .site-icon {
  font-size: 3rem;
}
.display-4 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
}
.display-4 > .site-icon {
  font-size: 1.75rem;
  
}
.display-5 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
}
.display-5 > .site-icon {
  font-size: 2.25rem;
}
.display-6 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
}
.display-6 > .site-icon {
  font-size: 1.9rem;
}

.display-7 {
  font-family: 'Giga Sans', sans-serif;
  font-size: 1.4rem;
  line-height: 1.3;
}
.display-7 > .site-icon {
  font-size: 1.75rem;
}
/* ---- Fluid typography for mobile devices ---- */
/* 1.4 - font scale ratio ( bootstrap == 1.42857 ) */
/* 100vw - current viewport width */
/* (48 - 20)  48 == 48rem == 768px, 20 == 20rem == 320px(minimal supported viewport) */
/* 0.65 - min scale variable, may vary */
@media (max-width: 992px) {
  .display-1 {
    font-size: 3.36rem;
  }
}
@media (max-width: 768px) {
  .display-1 {
    font-size: 2.94rem;
    font-size: calc( 2.12rem + (4.2 - 2.12) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.1 * (2.12rem + (4.2 - 2.12) * ((100vw - 20rem) / (48 - 20))));
  }
  .display-2 {
    font-size: 2.72rem;
    font-size: calc( 1.8399999999999999rem + (3.4 - 1.8399999999999999) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.3 * (1.8399999999999999rem + (3.4 - 1.8399999999999999) * ((100vw - 20rem) / (48 - 20))));
  }
  .display-4 {
    font-size: 1.12rem;
    font-size: calc( 1.14rem + (1.4 - 1.14) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.14rem + (1.4 - 1.14) * ((100vw - 20rem) / (48 - 20))));
  }
  .display-5 {
    font-size: 1.44rem;
    font-size: calc( 1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20))));
  }
  .display-7 {
    font-size: 1.12rem;
    font-size: calc( 1.14rem + (1.4 - 1.14) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.14rem + (1.4 - 1.14) * ((100vw - 20rem) / (48 - 20))));
  }
}
@media (min-width: 992px) and (max-width: 1400px) {
  .display-1 {
    font-size: 2.94rem;
    font-size: calc( 2.12rem + (4.2 - 2.12) * ((100vw - 62rem) / (87 - 62)));
    line-height: calc( 1.1 * (2.12rem + (4.2 - 2.12) * ((100vw - 62rem) / (87 - 62))));
  }
  .display-2 {
    font-size: 2.72rem;
    font-size: calc( 1.8399999999999999rem + (3.4 - 1.8399999999999999) * ((100vw - 62rem) / (87 - 62)));
    line-height: calc( 1.3 * (1.8399999999999999rem + (3.4 - 1.8399999999999999) * ((100vw - 62rem) / (87 - 62))));
  }
  .display-4 {
    font-size: 1.12rem;
    font-size: calc( 1.14rem + (1.4 - 1.14) * ((100vw - 62rem) / (87 - 62)));
    line-height: calc( 1.4 * (1.14rem + (1.4 - 1.14) * ((100vw - 62rem) / (87 - 62))));
  }
  .display-5 {
    font-size: 1.44rem;
    font-size: calc( 1.28rem + (1.8 - 1.28) * ((100vw - 62rem) / (87 - 62)));
    line-height: calc( 1.4 * (1.28rem + (1.8 - 1.28) * ((100vw - 62rem) / (87 - 62))));
  }
  .display-7 {
    font-size: 1.12rem;
    font-size: calc( 1.14rem + (1.4 - 1.14) * ((100vw - 62rem) / (87 - 62)));
    line-height: calc( 1.4 * (1.14rem + (1.4 - 1.14) * ((100vw - 62rem) / (87 - 62))));
  }
}
/* Buttons */
.btn {
  padding: 1.25rem 2rem;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .btn {
    padding: 0.75rem 1.5rem;
  }
}
.btn-sm {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
}
.btn-md {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
}
.btn-lg {
  padding: 1.25rem 2rem;
  border-radius: 4px;
}
.bg-primary {
  background-color: #ff4552 !important;
}
.bg-success {
  background-color: #000000 !important;
}
.bg-info {
  background-color: #F2F2F2 !important;
}
.bg-warning {
  background-color: #ffffff !important;
}
.bg-danger {
  background-color: #f7f7f7 !important;
}
.btn-primary,
.btn-primary:active {
  background-color: #D9772A !important;
  border-color: #F2F2F2 !important;
  color: #000000!important;
  box-shadow: none;
}
.btn-primary{
  background-color: #D9772A!important;
  border-color:#D9772A!important;
}

/* ===== end copy ===== */

/* ===== Nav (renamed from .cid-tJGsCG1vVL) ===== */
.nav-main {
  z-index: 1000;
  width: 100%;
  position: relative;
}
.nav-main .dropdown-item:before {
  font-family: Moririse2 !important;
  content: "\e966";
  display: inline-block;
  width: 0;
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  margin-right: 0.5rem;
  line-height: 1;
  font-size: inherit;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  transform: scale(0, 1);
  transition: all 0.25s ease-in-out;
}
.nav-main .navbar-toggler {
  transform: scale(0.8);
}
.nav-main .navbar-brand {
  flex-shrink: 0;
  align-items: center;
  margin-right: 0;
  padding: 10px 0;
  transition: all 0.3s;
  word-break: break-word;
  z-index: 1;
}
.nav-main .navbar-brand img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0px !important;
}
.nav-main .navbar-brand .navbar-caption {
  line-height: inherit !important;
}
.nav-main .navbar-brand .navbar-logo a {
  outline: none;
}
.nav-main .navbar-nav {
  margin: auto;
  margin-left: auto;
}
.nav-main .navbar-nav .nav-item {
  padding: 0 !important;
  transition: .3s all !important;
}
.nav-main .navbar-nav .nav-item .nav-link {
  padding: 16px !important;
  margin: 0 !important;
  border-radius: 1rem !important;
  transition: .3s all !important;
}
.nav-main .navbar-nav .nav-item .nav-link:hover {
  background-color: rgba(27, 31, 10, 0.06);
}
.nav-main .navbar-nav .open .nav-link::after { transform: rotate(180deg); }
.nav-main .navbar-nav .open .nav-link::before { content: ""; width:100%; height:20px; top:100%; background:transparent; position:absolute; }
.nav-main .navbar-nav .dropdown-item { padding: 12px !important; border-radius: 0.5rem !important; margin: 0 8px !important; transition: .3s all !important; }
.nav-main .navbar-nav .dropdown-item:hover { background-color: rgba(27,31,10,0.06); }
@media (min-width: 992px) { .nav-main .navbar-nav { padding-left: 1.5rem; } }
.nav-main .nav-link { width: fit-content; position: relative; }
.nav-main .navbar-logo { padding-left: 2rem; margin: 0 !important; }
@media (max-width: 767px) { .nav-main .navbar-logo { padding-left: 1rem; } }
.nav-main .navbar-caption { padding-left: 1rem; padding-right: .5rem; }
@media (max-width: 767px) { .nav-main .nav-dropdown { padding-bottom: 0.5rem; } }
.nav-main .nav-dropdown .link.dropdown-toggle::after { margin-left: 0.5rem; margin-top: 0.2rem; transition: .3s all; }
.nav-main .container { display:flex; height:85px; padding:0.25rem 0.25rem; flex-wrap:wrap; align-items:center; border-radius:100vw; margin-top:0.2rem; background-color:#3B3F44; box-shadow:0 30px 60px 0 rgba(27,31,10,0.08); }
@media (max-width: 992px) { .nav-main .container { padding-right: 2rem; } }
@media (max-width: 767px) { .nav-main .container { width:95%; height:56px !important; padding-right:1rem; margin-top:0rem; } }
.nav-main .iconfont-wrapper { color:#ff4552 !important; font-size:1.5rem; padding-right:0.5rem; }
.nav-main .dropdown-menu { flex-wrap:wrap; flex-direction:column; max-width:100%; padding:12px 4px !important; border-radius:1.5rem; transition:.3s all !important; min-width:auto; background:#3B3F44;}
.nav-main .nav-item:focus, .nav-main .nav-link:focus { outline:none; }
.nav-main .dropdown .dropdown-menu .dropdown-item { width:auto; transition:all .25s ease-in-out; }
.nav-main .dropdown .dropdown-menu .dropdown-item::after { right:0.5rem; }
.nav-main .dropdown .dropdown-menu .dropdown-item .site-icon { margin-right:0.5rem; vertical-align:sub; }
.nav-main .dropdown .dropdown-menu .dropdown-item .site-icon:before { display:inline-block; transform:scale(1,1); transition:all .25s ease-in-out; }
.nav-main .collapsed .dropdown-menu .dropdown-item:before { display:none; }
.nav-main .collapsed .dropdown .dropdown-menu .dropdown-item { padding:0.235em 1.5em !important; transition:none; margin:0 !important; }
.nav-main .navbar { min-height:70px; transition:all .3s; border-bottom:1px solid transparent; background:transparent !important; padding:0 !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
.nav-main .navbar.opened { transition: all .3s; }
.nav-main .navbar .dropdown-item { padding:0.5rem 1.8rem; }
.nav-main .navbar .navbar-logo img { width:auto; }
.nav-main .navbar .navbar-collapse { z-index:1; justify-content:flex-end; }
.nav-main .navbar.collapsed { justify-content:center; }
.nav-main .navbar.collapsed .nav-item .nav-link::before { display:none; }
.nav-main .navbar.collapsed.opened .dropdown-menu { top:0; }
@media (min-width: 992px) { .nav-main .navbar.collapsed.opened:not(.navbar-short) .navbar-collapse { max-height: calc(98.5vh - 5rem); } }
.nav-main .navbar.collapsed .dropdown-menu .dropdown-submenu { left:0 !important; }
.nav-main .navbar.collapsed .dropdown-menu .dropdown-item:after { right:auto; }
.nav-main .navbar.collapsed .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after { margin-left:0.5rem; margin-top:0.2rem; border-top:0.35em solid; border-right:0.35em solid transparent; border-left:0.35em solid transparent; border-bottom:0; top:41%; }
.nav-main .navbar.collapsed ul.navbar-nav li { margin:auto; }
.nav-main .navbar.collapsed .dropdown-menu .dropdown-item { padding:0.25rem 1.5rem; text-align:center; }
@media (max-width: 767px) {
  .nav-main .navbar { min-height: 72px; }
  .nav-main .navbar .navbar-logo img { height: 2rem !important; }
  .nav-main .navbar .nav-item .nav-link::before { display: none; }
  .nav-main .navbar.opened .dropdown-menu { top: 0; }
  .nav-main .navbar .dropdown-menu .dropdown-submenu { left: 0 !important; }
  .nav-main .navbar .dropdown-menu .dropdown-item:after { right: auto; }
  .nav-main .navbar .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after { margin-left: 0.5rem; margin-top: 0.2rem; border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; border-bottom: 0; top: 40%; }
  .nav-main .navbar .dropdown-menu .dropdown-item { padding: 0.25rem 1.5rem !important; text-align: center; }
  .nav-main .navbar .navbar-brand { flex-shrink: initial; flex-basis: auto; word-break: break-word; padding-right: 10px; }
}


/* ===== Sections (renamed from cid-* classes) ===== */
.hero {
  padding-top: 5.5rem;
  padding-bottom: 5rem;
  background-color: #D9772A;
}
.hero .site-fallback-image.disabled { display:none; }
.hero .site-fallback-image { display:block; background-size:cover; background-position:center center; width:100%; height:100%; position:absolute; top:0; }
.hero .image-wrap img { width:100%; }
@media (min-width:992px) { .hero .image-wrap img { display:block; margin:auto; width:80%; } }
.hero .row-links { width:100%; justify-content:center; }
.hero .header-menu { margin-top:2rem; list-style:none; display:flex; justify-content:center; flex-wrap:wrap; padding:0; margin-bottom:0; }
.hero .header-menu li { padding:0 1rem 1rem 1rem; }
.hero .content-head { max-width:1100px; }
.hero .site-text-accent { color: #3B3F44; }

/* Hero process strip text color adjustment */
.hero .process-strip .col > div {
  background: #F2F2F2;
}

.hero .process-strip .small {
  color: #122c34;
}

.about-section { padding-top:6rem; padding-bottom:7rem; background-color:#3B3F44; }
.about-section .site-text, .about-section .site-section-subtitle, .about-section .site-section-title { color:#f2f2f2; }

.services-section { padding-top:5rem; padding-bottom:5rem; background-color:#D9772A; }
.services-section .site-fallback-image.disabled { display:none; }
.services-section .site-fallback-image { display:block; background-size:cover; background-position:center center; width:100%; height:100%; position:absolute; top:0; }
.services-section .site-section-title, .services-section .site-section-subtitle { text-align:center; }
.services-section .card-title, .services-section .iconfont-wrapper { text-align:left; }

.contact-section { padding-top:4rem; padding-bottom:1rem; background-color:#3B3F44; }
.contact-section .site-overlay { background-color:#3B3F44; opacity:0.4; }
.contact-section form .site-section-btn { text-align:center; width:100%; }
.contact-section form .site-section-btn .btn { display:inline-flex; }
@media (max-width:991px) { .contact-section form .mbr-section-btn .btn { width:100%; } }
.contact-section .content-head { max-width:800px; }
.contact-section .site-text, .contact-section .site-section-subtitle, .contact-section .site-section-title { color:#f2f2f2; }

.contacts-section { padding-top:1rem; padding-bottom:2rem; background-color:#3B3F44; }
.contacts-section .site-fallback-image.disabled { display:none; }
.contacts-section .site-fallback-image { display:block; background-size:cover; background-position:center center; width:100%; height:100%; position:absolute; top:10; }
.contacts-section .row { justify-content:center; }
.contacts-section .item { margin-bottom:5rem; }
@media (max-width:767px) { .contacts-section .item { margin-bottom:1rem; } }
.contacts-section .item .item-wrapper { display:flex; flex-direction:column; height:100%; background:#f2f2f2; padding:2rem; }
.contacts-section .site-text, .contacts-section .site-section-subtitle { color:#f2f2f2; }
@media (min-width:992px) and (max-width:1200px) { .contacts-section .item .item-wrapper { padding:2rem 1.5rem; } }
@media (max-width:767px) { .contacts-section .item .item-wrapper { padding:2rem 1.5rem; } }
.contacts-section .content-head { max-width:800px; }

.site-footer { padding-top:0.5rem; padding-bottom:0.5rem; background-color:#D9772A;}
#footer04-d {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* ===== Language dropdown / flags ===== */

/* Make the dropdown wide enough (your CSS currently forces min-width:auto) */
.nav-main .language-dropdown {
  min-width: 180px;
}

/* Give the toggle proper size/alignment in the navbar */
.nav-main .lang-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  line-height: 1;
}

/* Make the flag icon a bit bigger */
.nav-main .fi {
  width: 1.25em;
  height: 1em;
}

/* Stage cards */
.stage-card {
  border-radius: 1.25rem;
  border: 0;
}

.stage-card .card-body {
  padding: 1rem;
}

/* Clean, consistent bullets */
.stage-list {
  text-align: left; 
  font-size: 1.2rem; 
  margin: 0;
  padding-left: 2rem;
}

.stage-list li {
  margin-bottom: .5rem;
  line-height: 1.35;
}

/* Optional: reduce heavy look */
.stage-card h3 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* adjust to your navbar height */
html {
  scroll-padding-top: 105px; 
  scroll-behavior: smooth;
}

/* ===== Card image sizing ===== */

.card .carousel-item img,
.card-img-top {
  width: 100%;
  aspect-ratio: 2.304 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: inherit; /* optional */
  
}

/* Optional: cap overall size responsively */
.card .carousel-item img,
.card-img-top {
  max-height: clamp(300px, 40vw, 600px);
}

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

/* ===== Stage card highlight ===== */
.stage-card-highlight {
  background-color: #f2f2f2;   
  border:6px solid #3B3F44;
  color: #F2F2F2;
}

.stage-card-highlight2 {
  background-color: #f2f2f2;   
  border-radius: 1.25rem;
  border-top: 6px solid #3B3F44; 
}

.stage-card-highlight3 {
  background-color: #f2f2f2;   
  border-radius: 0.5rem;
  border-top: 6px solid #3B3F44; 
}

.stage-card-highlight4 {
  background-color: #f2f2f2;   
  border-radius: 0.5rem;
  border-top: 6px solid #D9772A; 
  border-bottom: 6px solid #D9772A;
}

.stage-card-highlight5 {
  background-color: #f2f2f2;   
  border-radius: 1.25rem;
    border-top: 6px solid #D9772A; 
  border-bottom: 6px solid #D9772A;
}

.stage-card-highlight h2,
.stage-card-highlight h3 {
  color: #000000;
}


/* ===== Process circle ===== */
/* Arrow look */
/* ===== Process arrows (clean, single color) ===== */
.process-step{
  height: 88px;                
  min-height: 88px;

  font-size: 1.55rem;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;         /* rounded corners */

  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 50%,
    calc(100% - 22px) 100%,
    0 100%,
    22px 50%
  );

  padding: 0 2rem 0 2.25rem;
  }

.process-step{
  background-color: #3B3F44 !important;
}
.process-step{
  background: linear-gradient(135deg, #3B3F44, #4a4f55) !important;
}
.process-step{
  box-shadow: 0 6px 18px rgba(0,0,0,.25)!important;
}
.process-step:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}

/* FORCE hamburger icon visibility */
.navbar-toggler {
  border: none;
}

/* Force LIGHT (white) hamburger icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(242,242,242,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.nav-main .dropdown-menu {
  background-color: #3B3F44 !important;   /* dark background */
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 1 !important;
  z-index: 1050;
}

.nav-main .dropdown-menu .dropdown-item {
  color: #f2f2f2;
}

.nav-main .dropdown-menu .dropdown-item:hover,
.nav-main .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255,255,255,0.08);
  color: #ffffff;
}
@media (max-width: 991px) {
  .nav-main .navbar-collapse {
    background-color: #3B3F44;
    border-radius: 1.5rem;
    margin-top: 0.5rem;
    padding: 1rem 0;
  }
}

/* HARD LOCK hamburger position */
.nav-main .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
}

.nav-main .navbar-collapse {
  flex-grow: 0;
}

/* Lock hamburger position */
.nav-main .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
}

/* Restore Bootstrap wrapping */
.nav-main .container {
  flex-wrap: wrap;
}

/* Prevent collapse from pushing toggler */
.nav-main .navbar-collapse {
  flex-grow: 0;
}

/* Language dropdown: allow full height, no scrolling */
.nav-main .language-dropdown {
  max-height: none !important;
  overflow: visible !important;
  min-width: 220px;     /* wider so text fits nicely */
}
@media (max-width: 576px) {
  .nav-main .language-dropdown {
    position: static;
    width: 100%;
    max-height: none !important;
  }
}

/* Center logo on mobile */
@media (max-width: 991px) {
  .nav-main .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-right: 0;
  }
}

/* Smaller on mobile */
@media (max-width: 768px) {
  .process-step {
    font-size: 0.95rem;
    padding: 0 1.25rem 0 1.5rem; /* tighter */
  }
}

@media (max-width: 768px) {
  .about-section .site-section-title {
    font-size: 2rem;  /* Slightly smaller */
  }

  .about-section .site-section-subtitle {
    font-size: 1.25rem;
  }

  .about-section .site-text {
    font-size: 1rem;
  }
}

/* Reduce About subtitle on mobile */
@media (max-width: 768px) {
  .about-section .display-3 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
  }
}

/* Restore taller header on large screens */
@media (min-width: 992px) {
  .nav-main .container {
    height: 96px;           /* adjust to taste (90–110px works well) */
    padding: 1rem 2rem;     /* more breathing room */
  }

  .nav-main .navbar-brand img {
    height: 3.5rem;         /* slightly larger logo on desktop */
  }
}

/* Ensure vertical centering of navbar content */
.nav-main .container {
  align-items: center;
}

/* Vertically center logo */
.nav-main .navbar-brand {
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width: 767px) {
  html { scroll-padding-top: 0px; }
}

/* Mobile: dropdown/collapsed menu opens BELOW the header (logo stays visible) */
@media (max-width: 991px) {
  .nav-main .container {
    position: relative; /* anchor for absolute menu */
  }

  .nav-main .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px); /* gap below the pill */
    background-color: #3B3F44;
    border-radius: 1.5rem;
    padding: 1rem 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    z-index: 1050;
  }
}