/* ==========================================================================
   Bitchief — site chrome: header, mega menu, mobile navigation, footer,
   back-to-top.

   Extracted from the inline <style> blocks that previously lived inside
   header.php (~650 lines) and footer.php (~290 lines). Loading them as a real
   stylesheet means they are cacheable, they cannot override page CSS by virtue
   of appearing later in the document, and there is only one copy of them.

   Depends on the tokens in brand.css, which must load first.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.bts-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--bts-z-header);
  /*
    * Dark glass, in the field's own colour rather than blue-black.
    *
    * This was rgba(8, 18, 32, 0.82) -- a navy so desaturated that against the
    * green-teal backdrop it read as a plain black bar laid over the design. The
    * fill is the same darkness but carries the backdrop's hue, and falls off
    * slightly toward the bottom edge so it meets the page rather than stopping.
    *
    * The alpha cannot go much below this, and the reason is not the backdrop: the
    * logo walls scroll under the header, and nav text over a white plate seen
    * through the glass needs the fill to stay at 0.66 or above. At 0.58 it
    * measures 3.90:1 and fails. 0.78 at the lightest stop leaves real margin.
    */
  background: linear-gradient(180deg, rgba(6, 26, 28, 0.86) 0%, rgba(6, 22, 26, 0.78) 100%);
  backdrop-filter: blur(18px) saturate(130%);
  /* A brand hairline rather than a white one, so the edge belongs to the theme. */
  border-bottom: 1px solid rgba(0, 255, 157, 0.16);
  transition: box-shadow var(--bts-duration) var(--bts-ease),
              background var(--bts-duration) var(--bts-ease);
}

.bts-header.is-scrolled {
  background: linear-gradient(180deg, rgba(5, 21, 23, 0.94) 0%, rgba(5, 18, 21, 0.88) 100%);
  border-bottom-color: rgba(0, 255, 157, 0.22);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.42);
}

.bts-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-5);
  /* One height, scrolled or not. Shrinking it animated the height of a fixed
     element while the page scrolled, which relaid out the header's whole
     subtree on every frame -- and made the nav jump under the pointer. */
  height: var(--bts-header-h);
}

/* ---- Logo -------------------------------------------------------------- */

/* No plate. Unlike the vendor logos, this artwork is green bars carrying white
   letters, so it reads on the dark canvas as-is -- better than it does on white,
   where the letters have to be knocked out of the plate. A plate here just puts
   a bright rectangle in the corner of a dark page. */
.bts-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: var(--bts-transition);
}

.bts-header__logo:hover {
  filter: brightness(1.12);
}

/* max-width:none and flex:0 0 auto on purpose. The global `img { max-width:
   100% }` in brand.css combined with an explicit height inside an inline-flex
   parent makes the logo's width depend on the parent while the parent's width
   depends on the logo, and the browser resolves that circularity by shrinking
   the logo. Taking the image out of flex sizing removes the ambiguity. */
.bts-header__logo img {
  height: 44px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/* ---- Desktop nav ------------------------------------------------------- */

.bts-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
}

.bts-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-nav__item {
  position: relative;
}

.bts-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--bts-radius-sm);
  color: var(--bts-ink);
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
  white-space: nowrap;
  transition: var(--bts-transition);
}

.bts-nav__link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--bts-green-accent);
  transform: scaleX(0);
  transition: transform var(--bts-duration) var(--bts-ease);
}

.bts-nav__link:hover,
.bts-nav__link.is-active {
  color: var(--bts-green-accent);
  background: var(--bts-green-a12);
}

.bts-nav__link:hover::after,
.bts-nav__link.is-active::after {
  transform: scaleX(1);
}

.bts-nav__caret {
  font-size: 11px;
  transition: transform var(--bts-duration) var(--bts-ease);
}

.bts-nav__item--mega:hover .bts-nav__caret,
.bts-nav__item--mega:focus-within .bts-nav__caret {
  transform: rotate(180deg);
}

/* ---- Mega menu --------------------------------------------------------- */

.bts-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--bts-z-megamenu);
  width: min(1120px, calc(100vw - 40px));
  margin-top: var(--bts-space-3);
  padding: var(--bts-space-6);
  border: 1px solid var(--bts-border-strong);
  border-radius: var(--bts-radius-lg);
  /* Solid, not translucent: page text scrolling behind an open menu would show
     through and make the links unreadable. */
  background: var(--bts-panel-solid);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--bts-duration) var(--bts-ease),
              transform var(--bts-duration) var(--bts-ease),
              visibility var(--bts-duration) var(--bts-ease);
  max-height: calc(100vh - var(--bts-header-h) - 40px);
  overflow-y: auto;
}

/* Bridges the gap between the trigger and the panel so the pointer can travel
   without the menu closing. */
.bts-mega::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: calc(var(--bts-space-3) * -1);
  height: var(--bts-space-3);
}

.bts-nav__item--mega:hover .bts-mega,
.bts-nav__item--mega:focus-within .bts-mega,
.bts-nav__item--mega.is-open .bts-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bts-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bts-space-6);
}

.bts-mega__column {
  display: flex;
  flex-direction: column;
  gap: var(--bts-space-5);
}

.bts-mega__group {
  padding: var(--bts-space-4);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius);
  background: var(--bts-panel);
  transition: var(--bts-transition);
}

.bts-mega__group:hover {
  border-color: var(--bts-green-a30);
  background: var(--bts-green-a08);
}

.bts-mega__heading {
  display: flex;
  align-items: center;
  gap: var(--bts-space-2);
  margin: 0 0 var(--bts-space-3);
  padding-bottom: var(--bts-space-2);
  border-bottom: 1px solid var(--bts-green-a20);
  color: var(--bts-green-accent);
  font-size: var(--bts-text-xs);
  font-weight: var(--bts-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bts-mega__heading i {
  font-size: 14px;
}

.bts-mega__links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-mega__links a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--bts-radius-sm);
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-sm);
  font-weight: var(--bts-weight-medium);
  line-height: 1.35;
  transition: background var(--bts-duration) var(--bts-ease),
              color var(--bts-duration) var(--bts-ease),
              padding-left var(--bts-duration) var(--bts-ease);
}

.bts-mega__links a:hover,
.bts-mega__links a.is-active {
  background: var(--bts-green-a12);
  color: var(--bts-green-accent);
  padding-left: 14px;
}

.bts-mega__links a.is-active {
  font-weight: var(--bts-weight-semibold);
}

.bts-mega__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-4);
  margin-top: var(--bts-space-5);
  padding-top: var(--bts-space-5);
  border-top: 1px solid var(--bts-border);
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-base);
}

/* ---- Header actions ---------------------------------------------------- */

.bts-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bts-space-4);
  flex-shrink: 0;
}

.bts-header__social {
  display: none;
  align-items: center;
  gap: var(--bts-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-header__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bts-surface-alt);
  color: var(--bts-ink-muted);
  font-size: 15px;
  transition: var(--bts-transition);
}

.bts-header__social a:hover {
  background: var(--bts-gradient-action);
  color: #06121f;
  transform: translateY(-2px);
  box-shadow: var(--bts-shadow-brand);
}

.bts-header__cta {
  display: none;
}

/* ---- Hamburger --------------------------------------------------------- */

.bts-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-sm);
  background: var(--bts-panel);
  cursor: pointer;
  transition: var(--bts-transition);
}

.bts-header__toggle:hover {
  border-color: var(--bts-green-accent);
}

.bts-header__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--bts-ink);
  transition: transform var(--bts-duration) var(--bts-ease),
              opacity var(--bts-duration) var(--bts-ease);
}

.bts-header__toggle[aria-expanded='true'] .bts-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.bts-header__toggle[aria-expanded='true'] .bts-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.bts-header__toggle[aria-expanded='true'] .bts-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */

.bts-mobile-nav {
  position: fixed;
  top: var(--bts-header-h-mobile);
  right: 0;
  bottom: 0;
  z-index: var(--bts-z-menu);
  width: min(360px, 88vw);
  background: var(--bts-panel-solid);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform var(--bts-duration-slow) var(--bts-ease);
  overscroll-behavior: contain;
}

/* [hidden] is removed by the script before the transform animates, so the
   panel is genuinely inert for assistive tech when closed. */
.bts-mobile-nav[hidden] {
  display: block;
  visibility: hidden;
}

.bts-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.bts-mobile-nav__scroll {
  height: 100%;
  overflow-y: auto;
  padding-bottom: var(--bts-space-10);
}

.bts-mobile-nav__list {
  margin: 0;
  padding: var(--bts-space-2) 0;
  list-style: none;
}

.bts-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-3);
  width: 100%;
  padding: 15px var(--bts-space-6);
  border: 0;
  border-bottom: 1px solid var(--bts-border);
  background: transparent;
  color: var(--bts-ink);
  font-family: inherit;
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: var(--bts-transition);
}

.bts-mobile-nav__link:hover,
.bts-mobile-nav__link.is-active {
  background: var(--bts-green-a12);
  color: var(--bts-green-accent);
  box-shadow: inset 4px 0 0 var(--bts-green-accent);
}

.bts-mobile-nav__toggle i {
  font-size: 13px;
  transition: transform var(--bts-duration) var(--bts-ease);
}

.bts-mobile-nav__toggle[aria-expanded='true'] i {
  transform: rotate(180deg);
}

.bts-mobile-nav__panel {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--bts-border);
}

.bts-mobile-nav__panel[hidden] {
  display: none;
}

.bts-mobile-nav__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--bts-space-6);
  border-bottom: 1px solid var(--bts-border);
  color: var(--bts-green-accent);
  font-size: var(--bts-text-sm);
  font-weight: var(--bts-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bts-mobile-nav__group {
  padding: var(--bts-space-4) var(--bts-space-6) var(--bts-space-2);
}

.bts-mobile-nav__heading {
  display: flex;
  align-items: center;
  gap: var(--bts-space-2);
  margin: 0 0 var(--bts-space-2);
  color: var(--bts-green-accent);
  font-size: var(--bts-text-xs);
  font-weight: var(--bts-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bts-mobile-nav__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-mobile-nav__group a {
  display: block;
  padding: 9px 0 9px var(--bts-space-5);
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-base);
  border-left: 2px solid var(--bts-border);
  transition: var(--bts-transition);
}

.bts-mobile-nav__group a:hover,
.bts-mobile-nav__group a.is-active {
  border-left-color: var(--bts-green-accent);
  color: var(--bts-green-accent);
  font-weight: var(--bts-weight-semibold);
}

.bts-mobile-nav__footer {
  padding: var(--bts-space-6);
  border-top: 1px solid var(--bts-border);
}

.bts-mobile-nav__social {
  display: flex;
  justify-content: center;
  gap: var(--bts-space-3);
  margin: var(--bts-space-5) 0 var(--bts-space-4);
  padding: 0;
  list-style: none;
}

.bts-mobile-nav__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bts-surface-alt);
  color: var(--bts-ink-muted);
  font-size: 17px;
  transition: var(--bts-transition);
}

.bts-mobile-nav__social a:hover {
  background: var(--bts-gradient-action);
  color: #06121f;
}

.bts-mobile-nav__contact {
  margin: 0;
  text-align: center;
  font-size: var(--bts-text-sm);
}

.bts-mobile-nav__contact a {
  color: var(--bts-ink-muted);
}

.bts-mobile-nav__contact a:hover {
  color: var(--bts-green-accent);
}

/* ---- Overlay ----------------------------------------------------------- */

.bts-nav-overlay {
  position: fixed;
  inset: var(--bts-header-h-mobile) 0 0;
  z-index: var(--bts-z-overlay);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--bts-duration) var(--bts-ease);
}

.bts-nav-overlay[hidden] {
  display: none;
}

.bts-nav-overlay.is-visible {
  opacity: 1;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 992px) {
  .bts-nav,
  .bts-header__social {
    display: flex;
  }

  .bts-header__cta {
    display: inline-flex;
  }

  .bts-header__toggle,
  .bts-mobile-nav,
  .bts-nav-overlay {
    display: none !important;
  }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  /* Reclaim horizontal room before the nav wraps. */
  .bts-nav__link {
    padding-inline: 10px;
    font-size: var(--bts-text-sm);
  }

  .bts-header__social {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .bts-header__inner {
    height: var(--bts-header-h-mobile);
  }

  .bts-header__logo img {
    height: 38px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Deeper than the page, so the footer still reads as a distinct region now that
   everything is dark -- but translucent, so the backdrop runs behind it instead
   of stopping at the last section. It was --bts-bg-deep flat, which cut the field
   off with a hard horizontal edge across the bottom of every page. */
.bts-footer {
  position: relative;
  background: rgba(6, 16, 29, 0.55);
  color: var(--bts-ink);
  font-size: var(--bts-text-base);
}

.bts-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bts-green), transparent);
}

.bts-footer__top {
  padding-block: var(--bts-space-20) var(--bts-space-12);
}

/* No filter and no plate.
   `brightness(0) invert(1)` flattened every colour in the logo to pure white,
   which threw away the brand green and left a bank of plain white slashes. A
   white plate was the next attempt, and it is just as wrong: the artwork is
   green bars carrying white letters, so it already reads on the dark footer and
   the plate only stamps a bright block into it. The logo ships untouched. */
.bts-footer__logo-plate {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--bts-space-4);
}

.bts-footer__logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
}

.bts-footer__tagline {
  margin-bottom: var(--bts-space-5);
  max-width: 34ch;
  color: var(--bts-text-on-dark-muted);
  line-height: var(--bts-leading);
}

.bts-footer__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--bts-space-4);
  color: var(--bts-text-on-dark-muted);
  font-style: normal;
  line-height: 1.7;
}

.bts-footer__contact {
  margin: 0;
}

.bts-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--bts-space-2);
  color: var(--bts-text-on-dark);
  font-weight: var(--bts-weight-medium);
}

.bts-footer__contact a:hover {
  color: var(--bts-green-accent);
}

.bts-footer__contact i {
  color: var(--bts-green);
}

/* ---- Link columns ------------------------------------------------------ */

.bts-footer__heading {
  margin-bottom: var(--bts-space-5);
  padding-bottom: var(--bts-space-3);
  position: relative;
  color: var(--bts-white);
  font-size: var(--bts-text-md);
  font-weight: var(--bts-weight-semibold);
  letter-spacing: 0.01em;
}

.bts-footer__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--bts-gradient-rule);
}

.bts-footer__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-footer__links li {
  margin-bottom: 10px;
}

.bts-footer__links a {
  display: inline-block;
  color: var(--bts-text-on-dark-muted);
  line-height: 1.5;
  transition: var(--bts-transition);
}

.bts-footer__links a:hover {
  color: var(--bts-green-accent);
  transform: translateX(3px);
}

/* ---- Bottom bar -------------------------------------------------------- */

.bts-footer__bottom {
  padding-block: var(--bts-space-5);
  border-top: 1px solid var(--bts-border-on-dark);
  background: rgba(0, 0, 0, 0.35);
}

.bts-footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-4);
  flex-wrap: wrap;
}

.bts-footer__copyright {
  margin: 0;
  color: var(--bts-text-on-dark-muted);
  font-size: var(--bts-text-sm);
}

.bts-footer__copyright span {
  color: var(--bts-text-on-dark);
  font-weight: var(--bts-weight-semibold);
}

.bts-footer__social {
  display: flex;
  gap: var(--bts-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bts-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bts-border-on-dark);
  border-radius: var(--bts-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--bts-text-on-dark);
  font-size: 17px;
  transition: var(--bts-transition);
}

.bts-footer__social a:hover {
  transform: translateY(-3px);
  box-shadow: var(--bts-shadow-md);
}

.bts-footer__social a.is-linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
  color: var(--bts-white);
}

.bts-footer__social a.is-twitter:hover {
  background: #000000;
  border-color: #000000;
  color: var(--bts-white);
}

.bts-footer__social a.is-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: var(--bts-white);
}

.bts-footer__social a.is-instagram:hover {
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
  border-color: #dc2743;
  color: var(--bts-white);
}

.bts-footer__social a.is-youtube:hover {
  background: #ff0000;
  border-color: #ff0000;
  color: var(--bts-white);
}

@media (max-width: 991.98px) {
  .bts-footer__top {
    padding-block: var(--bts-space-12) var(--bts-space-8);
  }
}

@media (max-width: 575.98px) {
  .bts-footer__bottom .container {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.bts-to-top {
  position: fixed;
  right: var(--bts-space-5);
  bottom: var(--bts-space-5);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--bts-gradient-action);
  color: #06121f;
  font-size: 19px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: var(--bts-shadow-brand);
  transition: var(--bts-transition);
}

.bts-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bts-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--bts-green-a30);
}

/* The Tawk.to chat launcher occupies the bottom-right corner, so shift clear
   of it rather than stacking on top. */
@media (min-width: 576px) {
  .bts-to-top {
    bottom: 92px;
  }
}

/* ==========================================================================
   Forms: honeypot, upload progress, toasts
   ========================================================================== */

/* The honeypot must be genuinely unreachable rather than display:none, since
   some bots skip display:none fields specifically. Off-screen but focusable-by
   -nothing (tabindex="-1" and aria-hidden on the wrapper) keeps it invisible to
   both sighted and screen-reader users. */
.bts-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.bts-upload-progress {
  margin-top: var(--bts-space-3);
  height: 6px;
  border-radius: var(--bts-radius-pill);
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.bts-upload-progress[hidden] {
  display: none;
}

.bts-upload-progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--bts-gradient-brand);
  transition: width 0.2s linear;
}

/* ---- Form panel -------------------------------------------------------- */

.bts-form-panel {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-xl);
  background: var(--bts-panel);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}

.bts-form-panel .bts-section-head {
  margin-bottom: var(--bts-space-8);
}

/* ---- Map --------------------------------------------------------------- */

.bts-map {
  overflow: hidden;
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  /* Reserve the box before the iframe loads so the page does not jump. */
  /* 21/9 made this 545px tall in a 1272px container, which on the contact page
     sat between the address cards and the form. */
  aspect-ratio: 32 / 9;
}

/* Google's embed is always light, so on a dark page it lands as a bright slab.
   Dimming and slightly desaturating it settles it into the page; it returns to
   full brightness on hover, when the visitor is actually reading it. */
.bts-map iframe {
  filter: saturate(0.85) brightness(0.82) contrast(1.05);
  transition: filter var(--bts-duration-slow) var(--bts-ease);
}

.bts-map:hover iframe,
.bts-map:focus-within iframe {
  filter: none;
}

.bts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .bts-map {
    aspect-ratio: 4 / 3;
  }
}

/* ---- Toast ------------------------------------------------------------- */

.bts-toast-container {
  position: fixed;
  right: var(--bts-space-5);
  bottom: var(--bts-space-5);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--bts-space-3);
  width: min(400px, calc(100vw - 40px));
  pointer-events: none;
}

.bts-toast {
  padding: var(--bts-space-4) var(--bts-space-5);
  border: 1px solid var(--bts-border-strong);
  border-left: 4px solid var(--bts-green-accent);
  border-radius: var(--bts-radius);
  background: var(--bts-panel-raised);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--bts-duration) var(--bts-ease),
              transform var(--bts-duration) var(--bts-ease);
  pointer-events: auto;
}

.bts-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bts-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.bts-toast.is-error {
  border-left-color: #ff8b95;
}

.bts-toast__head {
  display: flex;
  align-items: center;
  gap: var(--bts-space-2);
  margin-bottom: 6px;
}

.bts-toast__head i {
  font-size: 17px;
  color: var(--bts-green-accent);
}

.bts-toast.is-error .bts-toast__head i {
  color: #ff8b95;
}

.bts-toast__title {
  flex: 1 1 auto;
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
  color: var(--bts-ink);
}

.bts-toast__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--bts-radius-sm);
  background: transparent;
  color: var(--bts-ink-subtle);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: var(--bts-transition);
}

.bts-toast__close:hover {
  background: var(--bts-surface-alt);
  color: var(--bts-ink);
}

.bts-toast__body {
  margin: 0;
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-base);
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .bts-toast-container {
    right: var(--bts-space-3);
    left: var(--bts-space-3);
    bottom: var(--bts-space-3);
    width: auto;
  }
}

/* ==========================================================================
   Service pages: gallery, quote, related services
   ========================================================================== */

.bts-gallery {
  position: relative;
  padding-bottom: var(--bts-space-10);
  border-radius: var(--bts-radius-lg);
}

.bts-gallery__item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-lg);
  background: var(--bts-panel);
  transition: var(--bts-transition);
}

.bts-gallery__item:hover {
  border-color: var(--bts-green-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.bts-gallery__item img {
  display: block;
  width: 100%;
  /* Fixed ratio so slides do not jump height as images load. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bts-gallery .swiper-pagination {
  bottom: 0;
}

.bts-gallery .swiper-pagination-bullet-active {
  background: var(--bts-green);
}

.bts-gallery .swiper-button-prev,
.bts-gallery .swiper-button-next {
  width: 42px;
  height: 42px;
  margin-top: -32px;
  border: 1px solid var(--bts-border-strong);
  border-radius: 50%;
  background: var(--bts-panel-raised);
  color: var(--bts-green-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: var(--bts-transition);
}

.bts-gallery .swiper-button-prev::after,
.bts-gallery .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.bts-gallery .swiper-button-prev:hover,
.bts-gallery .swiper-button-next:hover {
  background: var(--bts-green);
  color: var(--bts-white);
}

/* ---- Quote ------------------------------------------------------------- */

.bts-quote {
  margin: 0;
}

.bts-quote__text {
  position: relative;
  margin: 0 0 var(--bts-space-5);
  padding-top: var(--bts-space-6);
  color: var(--bts-ink);
  font-size: var(--bts-text-md);
  line-height: var(--bts-leading);
}

.bts-quote__text::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: -4px;
  color: var(--bts-accent-a30);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
}

.bts-quote__author {
  display: flex;
  align-items: center;
  gap: var(--bts-space-3);
  margin-top: auto;
  padding-top: var(--bts-space-4);
  border-top: 1px solid var(--bts-border);
}

.bts-quote__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bts-gradient-action);
  color: #06121f;
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-bold);
  letter-spacing: 0.03em;
}

.bts-quote__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bts-quote__meta strong {
  color: var(--bts-ink);
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
}

.bts-quote__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Related services -------------------------------------------------- */

.bts-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--bts-space-3);
}

.bts-related__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-3);
  padding: var(--bts-space-4) var(--bts-space-5);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius);
  background: var(--bts-panel);
  color: var(--bts-ink);
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-medium);
  transition: var(--bts-transition);
}

.bts-related__item i {
  flex: 0 0 auto;
  color: var(--bts-green-accent);
  transition: transform var(--bts-duration) var(--bts-ease);
}

.bts-related__item:hover {
  border-color: var(--bts-green-a30);
  background: var(--bts-panel-hover);
  color: var(--bts-green-accent);
  transform: translateY(-2px);
}

.bts-related__item:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   Logo grid and empanelment (partner page, home page)
   ========================================================================== */

/* Flexbox, not grid, specifically so an incomplete final row centres.
   With `grid-template-columns: repeat(auto-fit, ...)` the leftover items in the
   last row sit hard against the left edge: the 35-logo product wall ended with
   five tiles on the left and a 126px gap on the right. Flex wrapping plus
   justify-content: center balances that gap on both sides.

   Tiles share a fixed basis, --bts-logo-w, and that is deliberate. Letting each
   plate size to its own logo was tried and looked worse: a wide wordmark like
   FORTINET or arcserve became several times the size of a compact mark like IBM
   or SQL Server, because a shared height times a very different aspect ratio is
   a very different area. Optical consistency needs one box with the logo
   contained inside it.

   The frame is what makes a wall of white tiles sit on a dark page: they read as
   content inside a designed module rather than as blocks floating on the field.
   Translucent, not opaque -- an opaque panel here would blanket the backdrop. */
.bts-logo-grid {
  --bts-logo-w: 9.5rem;
  --bts-logo-h: 78px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--bts-space-3);
  margin: 0;
  padding: var(--bts-space-5);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-lg);
  background: rgba(255, 255, 255, 0.025);
  list-style: none;
}

.bts-logo-grid > li {
  flex: 0 1 var(--bts-logo-w);
  max-width: 100%;
}

/*
 * The one place a light surface survives the dark theme.
 *
 * Vendor logos are dark-on-transparent artwork -- Oracle, Dell, NetApp, Fortinet
 * and most of the rest are near-black wordmarks. On a dark ground they simply
 * disappear, and there is no filter that fixes that without mangling the brands
 * that are already light, or recolouring marks that are not ours to recolour. A
 * light plate is the only treatment that renders every logo correctly.
 *
 * What it must not be is a fixed box. See --bts-plate in brand.css for the
 * colour, and the note on .bts-logo-grid for why these size to their contents.
 */
.bts-logo-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* One size for every tile. The height is also what reserves the box: the
     images are loading="lazy" with no width/height attributes, so before one
     loads it has no intrinsic size, and without a fixed tile the wall would pop
     into place as they arrive.

     It comes from --bts-logo-h rather than a literal because the "and many more"
     tile has to match it exactly and carries none of these other properties --
     two literals would drift the moment one of them changed. */
  width: 100%;
  height: var(--bts-logo-h);
  padding: var(--bts-space-3) var(--bts-space-4);
  border-radius: var(--bts-radius);
  background: var(--bts-plate);
  transition: var(--bts-transition);
}

.bts-logo-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--bts-green-accent);
}

.bts-logo-grid img {
  /* Contained in the tile rather than sized by itself. Capping BOTH dimensions
     and letting object-fit letterbox is what makes a 1252x612 JPEG and a 259x194
     PNG read at the same optical size. */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No longer desaturated. Against a dark page the white plates already unify the
     wall, and greying the logos on top of that made them look faded rather than
     deliberate. */
  transition: var(--bts-transition);
}

/* Denser variant for the large product and client walls on the about page,
   where the tiles are numerous and smaller. */
.bts-logo-grid--dense {
  --bts-logo-w: 7.5rem;
  --bts-logo-h: 64px;

  gap: var(--bts-space-2);
}

.bts-logo-grid--dense a,
.bts-logo-grid--dense > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--bts-logo-h);
  padding: 10px 12px;
  border-radius: var(--bts-radius-sm);
  background: var(--bts-plate);
  transition: var(--bts-transition);
}

.bts-logo-grid--dense a:hover,
.bts-logo-grid--dense > li > span:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px var(--bts-green-accent);
}

.bts-logo-grid--dense img {
  /* Inherits the contain behaviour from .bts-logo-grid img; only the tile is
     smaller. */
  max-height: 100%;
}

/* ---- "and many more" ---------------------------------------------------- */

/*
 * The closing tile on a wall that is a sample rather than an inventory. We
 * implement far more products than there is room to show, and a wall that simply
 * stops reads as the complete list.
 *
 * Deliberately NOT plated. The white plate exists for one reason -- dark vendor
 * artwork is invisible on a dark ground -- and this tile has no artwork. Giving
 * it a plate would make it read as one more logo that failed to load. A dashed
 * accent border says "continues" in a way a solid tile cannot.
 *
 * The selector outweighs `.bts-logo-grid--dense > li > span` (0,2,2 against
 * 0,1,2), so the plate rule above does not reach it in either variant.
 *
 * Height from --bts-logo-h, so it stays exactly level with the plates beside it
 * in both the normal and the dense wall.
 */
.bts-logo-grid > li.bts-logo-grid__more > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--bts-logo-h);
  padding: 10px 12px;
  border: 1px dashed var(--bts-accent-a30);
  border-radius: var(--bts-radius-sm);
  background: var(--bts-green-a08);
  color: var(--bts-green-accent);
  font-size: var(--bts-text-sm);
  font-weight: var(--bts-weight-semibold);
  line-height: 1.3;
  text-align: center;
  /* Two lines inside a 96px-wide dense tile. Balanced rather than ragged where
     the browser supports it; harmless everywhere else. */
  text-wrap: balance;
}

/* ---- Credential badge -------------------------------------------------- */

.bts-credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: var(--bts-space-4);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius);
  background: var(--bts-panel);
  text-align: center;
}

.bts-credential img {
  width: auto;
  max-height: 76px;
  margin-bottom: var(--bts-space-2);
  padding: 6px;
  border-radius: var(--bts-radius-sm);
  background: var(--bts-plate);
}

.bts-credential strong {
  color: var(--bts-ink);
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
}

.bts-credential span {
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-sm);
  line-height: 1.4;
}

/* ---- Empanelment ------------------------------------------------------- */

.bts-empanelment {
  flex-direction: row;
  align-items: center;
  gap: var(--bts-space-6);
}

.bts-empanelment__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 130px;
  padding: var(--bts-space-4);
  border: 1px solid transparent;
  border-radius: var(--bts-radius);
  background: var(--bts-plate);
}

.bts-empanelment__logo img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}

.bts-empanelment__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bts-space-3);
  min-width: 0;
}

.bts-empanelment__body .bts-card__title {
  margin: 0;
}

@media (max-width: 575.98px) {
  .bts-empanelment {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Long-form prose and table of contents (policy pages)
   ========================================================================== */

.bts-prose {
  max-width: 72ch;
  color: var(--bts-ink-muted);
  font-size: var(--bts-text-md);
  line-height: var(--bts-leading);
}

.bts-prose__lead {
  padding-bottom: var(--bts-space-5);
  border-bottom: 1px solid var(--bts-border);
  color: var(--bts-ink);
  font-size: var(--bts-text-lg);
}

.bts-prose > section {
  /* Clear the fixed header when jumped to from the table of contents. */
  scroll-margin-top: calc(var(--bts-header-h) + var(--bts-space-5));
}

.bts-prose h2 {
  margin-top: var(--bts-space-10);
  margin-bottom: var(--bts-space-4);
  font-size: var(--bts-text-xl);
  font-weight: var(--bts-weight-semibold);
  color: var(--bts-ink);
}

.bts-prose > section:first-of-type h2 {
  margin-top: var(--bts-space-8);
}

.bts-prose p {
  margin-bottom: var(--bts-space-4);
}

.bts-prose .bts-list {
  margin-bottom: var(--bts-space-5);
}

.bts-prose .bts-alert {
  margin-top: var(--bts-space-10);
}

/* ---- Table of contents ------------------------------------------------- */

.bts-toc {
  padding: var(--bts-space-5);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-lg);
  background: var(--bts-panel);
}

@media (min-width: 992px) {
  .bts-toc {
    position: sticky;
    top: calc(var(--bts-header-h) + var(--bts-space-5));
  }
}

.bts-toc__title {
  margin-bottom: var(--bts-space-4);
  font-size: var(--bts-text-xs);
  font-weight: var(--bts-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bts-green-accent);
}

.bts-toc__list {
  margin: 0;
  padding-left: var(--bts-space-5);
  color: var(--bts-ink-subtle);
  font-size: var(--bts-text-base);
}

.bts-toc__list li {
  margin-bottom: var(--bts-space-2);
}

.bts-toc__list a {
  color: var(--bts-ink-muted);
}

.bts-toc__list a:hover {
  color: var(--bts-green-accent);
}

.bts-toc__meta {
  display: flex;
  align-items: center;
  gap: var(--bts-space-2);
  margin: var(--bts-space-5) 0 0;
  padding-top: var(--bts-space-4);
  border-top: 1px solid var(--bts-border);
  color: var(--bts-ink-subtle);
  font-size: var(--bts-text-sm);
}

.bts-toc__meta i {
  color: var(--bts-green-accent);
}

/* ==========================================================================
   Error page
   ========================================================================== */

.bts-error__code {
  margin: 0 0 var(--bts-space-2);
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  font-weight: var(--bts-weight-black);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--bts-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--bts-green-accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bts-error__code {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* The shortcut cards on the error page are whole-card links. */
a.bts-card {
  color: inherit;
  text-decoration: none;
}

a.bts-card:hover {
  color: inherit;
}

/* ==========================================================================
   Cookie consent
   --------------------------------------------------------------------------
   The notice is a bar pinned to the bottom, not a full-screen interstitial. A
   wall that cannot be dismissed without choosing pushes people toward whichever
   button removes it fastest, and consent collected that way is not freely given.

   For the same reason "Reject non-essential" and "Accept all" are the same size
   and sit next to each other. Do not make one a link and the other a button, and
   do not put reject inside the preferences dialog only -- if declining takes more
   clicks than accepting, the mechanism fails on its own terms rather than merely
   looking unfair.
   ========================================================================== */

.bts-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* Above the blocker: a request in flight must not bury the notice. */
  z-index: calc(var(--bts-z-megamenu) + 20);
  padding: var(--bts-space-4);
  /* Solid, not translucent: this is legal notice text and the animated field
     behind it would compete with reading it. */
  background: var(--bts-panel-solid);
  border-top: 1px solid var(--bts-accent-a30);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}

.bts-consent[hidden] {
  display: none;
}

.bts-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bts-space-5);
  max-width: var(--bts-container);
  margin: 0 auto;
}

.bts-consent__body {
  flex: 1 1 30rem;
  min-width: 0;
}

.bts-consent__title {
  margin: 0 0 4px;
  font-size: var(--bts-text-md);
  font-weight: var(--bts-weight-bold);
  color: var(--bts-ink);
}

.bts-consent__text {
  margin: 0;
  font-size: var(--bts-text-base);
  line-height: var(--bts-leading);
  color: var(--bts-ink-muted);
}

.bts-consent__text a {
  color: var(--bts-green-accent);
  text-decoration: underline;
}

.bts-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bts-space-3);
  flex: 0 0 auto;
}

/* Manage is the only one that may look secondary: it opens a panel rather than
   recording a decision. */
.bts-consent__link {
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--bts-ink-muted);
  font-family: inherit;
  font-size: var(--bts-text-base);
  font-weight: var(--bts-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.bts-consent__link:hover {
  color: var(--bts-green-accent);
}

@media (max-width: 767.98px) {
  .bts-consent__actions {
    width: 100%;
  }

  /* Equal width on a narrow screen too, so neither choice is the easy one. */
  .bts-consent__actions .bts-btn {
    flex: 1 1 12rem;
    justify-content: center;
  }

  .bts-consent__link {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---- Preferences dialog ------------------------------------------------- */

.bts-consent-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--bts-z-megamenu) + 30);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bts-space-4);
}

.bts-consent-modal[hidden] {
  display: none;
}

.bts-consent-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 29, 0.72);
}

.bts-consent-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  max-height: min(86vh, 46rem);
  border: 1px solid var(--bts-border-strong);
  border-radius: var(--bts-radius-lg);
  background: var(--bts-panel-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.bts-consent-modal__head,
.bts-consent-modal__foot {
  display: flex;
  align-items: center;
  gap: var(--bts-space-3);
  padding: var(--bts-space-4) var(--bts-space-5);
  flex: 0 0 auto;
}

.bts-consent-modal__head {
  justify-content: space-between;
  border-bottom: 1px solid var(--bts-border);
}

.bts-consent-modal__foot {
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--bts-border);
}

.bts-consent-modal__title {
  margin: 0;
  font-size: var(--bts-text-lg);
  font-weight: var(--bts-weight-bold);
  color: var(--bts-ink);
}

.bts-consent-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-sm);
  background: none;
  color: var(--bts-ink-muted);
  cursor: pointer;
  transition: var(--bts-transition);
}

.bts-consent-modal__close:hover {
  border-color: var(--bts-green-accent);
  color: var(--bts-green-accent);
}

/* The scrolling region is the middle, so the buttons stay reachable however long
   the cookie tables get. */
.bts-consent-modal__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--bts-space-5);
}

.bts-consent-modal__intro,
.bts-consent-modal__note {
  margin: 0 0 var(--bts-space-5);
  font-size: var(--bts-text-base);
  line-height: var(--bts-leading);
  color: var(--bts-ink-muted);
}

.bts-consent-modal__note {
  margin: var(--bts-space-5) 0 0;
}

.bts-consent-group {
  padding: var(--bts-space-4);
  margin-bottom: var(--bts-space-4);
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius);
  background: var(--bts-panel);
}

.bts-consent-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bts-space-3);
  margin-bottom: var(--bts-space-2);
}

.bts-consent-group__title {
  margin: 0;
  font-size: var(--bts-text-md);
  font-weight: var(--bts-weight-bold);
  color: var(--bts-ink);
}

.bts-consent-group__locked {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid var(--bts-border);
  border-radius: var(--bts-radius-pill);
  color: var(--bts-ink-subtle);
  font-size: var(--bts-text-xs);
  font-weight: var(--bts-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bts-consent-group__summary {
  margin: 0 0 var(--bts-space-4);
  font-size: var(--bts-text-base);
  line-height: var(--bts-leading);
  color: var(--bts-ink-muted);
}

/* The table scrolls inside its own box rather than widening the dialog. */
.bts-consent-table-wrap {
  overflow-x: auto;
}

.bts-consent-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--bts-text-sm);
}

.bts-consent-table th,
.bts-consent-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bts-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--bts-leading-snug);
}

.bts-consent-table th {
  color: var(--bts-ink);
  font-weight: var(--bts-weight-bold);
  white-space: nowrap;
}

.bts-consent-table td {
  color: var(--bts-ink-muted);
}

.bts-consent-table code {
  color: var(--bts-green-accent);
  font-size: var(--bts-text-xs);
  word-break: break-word;
}

.bts-consent-table tr:last-child th,
.bts-consent-table tr:last-child td {
  border-bottom: 0;
}

/* ---- Switch ------------------------------------------------------------- */

.bts-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

/* The input stays in the layout and keeps its hit area rather than being
   display:none, so it remains focusable and operable by keyboard. */
.bts-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.bts-switch__track {
  display: block;
  width: 46px;
  height: 26px;
  border: 1px solid var(--bts-border-strong);
  border-radius: var(--bts-radius-pill);
  background: rgba(0, 0, 0, 0.35);
  transition: var(--bts-transition);
}

.bts-switch__track::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: var(--bts-ink-subtle);
  transition: transform var(--bts-duration) var(--bts-ease),
              background var(--bts-duration) var(--bts-ease);
}

.bts-switch__input:checked + .bts-switch__track {
  border-color: var(--bts-green-accent);
  background: var(--bts-green-a30);
}

.bts-switch__input:checked + .bts-switch__track::after {
  background: var(--bts-green-accent);
  transform: translateX(20px);
}

.bts-switch__input:focus-visible + .bts-switch__track {
  outline: 2px solid var(--bts-green-accent);
  outline-offset: 2px;
}

/* The withdrawal entry point in the footer. Styled as a link because it opens a
   panel rather than committing anything, but it is a <button>: it performs an
   action on this page and is not a destination. */
.bts-footer__consent {
  padding: 0;
  border: 0;
  margin-left: var(--bts-space-2);
  background: none;
  color: var(--bts-ink-muted);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.bts-footer__consent:hover {
  color: var(--bts-green-accent);
}

/* The consent choices. One style for accept and reject both, so the only thing
   distinguishing them is their label. Deliberately not --primary: a bright fill
   on one side of a consent decision is a nudge, and a nudged consent is not a
   free one. */
.bts-consent__choice {
  min-width: 11rem;
  justify-content: center;
  border: 1px solid var(--bts-border-strong);
  background: var(--bts-panel-raised);
  color: var(--bts-ink);
  font-weight: var(--bts-weight-semibold);
}

.bts-consent__choice:hover {
  border-color: var(--bts-green-accent);
  background: var(--bts-panel-hover);
  color: var(--bts-green-accent);
}