*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* CSS Custom Properties */
:root {
  /* Colors */
  --primary-light: #fff;
  --primary-dark: #000;

  /* Radius */
  --border-radius: 8px;

  /* Viewport Width, this would get updated for viewport width without scrollbar */
  --viewportWidth: 100vw;

  /* z-index */
  --z-index-header: 10;
}

html, body {
  /* disable Safari elastic scroll */
  overscroll-behavior: none;
	position:relative;
	overflow-x:hidden;
  overflow-y:auto;
  
}

img {
  max-width: 100%;
}
:root {
  /* Layout */
  --container-max-width: 1440px;
  --container-padding: 20px;

  /* Spacing */
  --sp-1: 0.25rem; /* 4px */
  --sp-2: 0.5rem; /* 8px */
  --sp-3: 1rem; /* 16px */
  --sp-4: 1.25rem; /* 20px */
  --sp-5: 1.5rem; /* 24px */
  --sp-6: 2rem; /* 32px */
  --sp-7: 3rem; /* 48px */
  --sp-8: 3.5rem; /* 56px */
  --sp-9: 4rem; /* 64px */
  --sp-10: 4.5rem; /* 72px */
  --sp-11: 5rem; /* 80px */
  --sp-12: 5.5rem; /* 88px */
  --sp-13: 6rem; /* 96px */

  /* Content Section Gaps */
  --gap-content-section-sm: 1rem; /* 16px */
  --gap-content-section-md: 3rem; /* 48px */
  --gap-content-section-lg: 3.5rem; /* 56px */
  --gap-content-section-xl: 4.5rem; /* 72px */
  --gap-content-section-2xl: 7rem; /* 112px */

  /* Breakpoints */ /* 320px */ /* 576px */ /* 768px */ /* 1024px */ /* 1400px */
}

.container {
  max-width: 1440px;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px;
  padding: 0 var(--container-padding);
}

/* Clearfix */
.container::before,
.container::after {
  content: " ";
  display: table;
}

.force-full-width {
  width: 100vw;
  width: var(--viewportWidth);
  position: relative;
  left: 50%;
  margin-left: calc(100vw / -2) !important;
  margin-left: calc(var(--viewportWidth) / -2) !important;
}


  /* Section Block Gaps Mobile */

.section-block + .section-block{
margin-top: var(--gap-content-section-lg);
}  



  /* Section Block Gaps Tablet & Desktop */
@media (min-width: 48em) {
.section-block + .section-block{
margin-top: 6.5rem;
}  
}
:root {
  /* Colors (existing) */
  --heading-color: #fff;
  --text-color: #fff;

  /* Font family */
  --font-family-primary: "Poppins", sans-serif;

  /* Font sizes - Mobile */
  --font-size-base: 1rem; /* 16px (16 × 1) */
  --font-size-small: 1.125rem; /* 18px (16 × 1.125) */
  --font-size-medium: 1.5rem; /* 24px (16 × 1.5) */
  --font-size-large: 2rem; /* 32px (16 × 2) */
  --font-size-xlarge: 3rem; /* 48px (16 × 3) */
  --font-size-2xlarge: 5rem; /* 80px (16 × 5) */

  /* Font sizes - Tablet and up */
  --font-size-base-md: 1.125rem; /* 18px (16 × 1.125) */
  --font-size-small-md: 1.25rem; /* 20px (16 × 1.25) */
  --font-size-medium-md: 1.75rem; /* 28px (16 × 1.75) */
  --font-size-large-md: 2.5rem; /* 40px (16 × 2.5) */
  --font-size-xlarge-md: 4rem; /* 64px (16 × 4) */
  --font-size-2xlarge-md: 3rem; /* 48px (16 × 3) */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.1; /* Compact, for large headings */
  --line-height-snug: 1.22; /* Slightly relaxed, for medium headings */
  --line-height-base: 1.3; /* Base spacing, for small headings and text */

  /* Letter spacing */
  --letter-spacing-heading: -0.03rem;
}

html {
  font-size: 16px;
}

body {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  color: #fff;
  color: var(--text-color);
  background-color: #000;
  background-color: var(--primary-dark);
}

h1,
h2,
h3,
h4 {
  color: #fff;
  color: var(--heading-color);
}

/* Mobile first approach */
h1 {
  font-size: 3rem;
  font-size: var(--font-size-xlarge);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  line-height: var(--line-height-tight);
  letter-spacing: -0.03rem;
  letter-spacing: var(--letter-spacing-heading);
}

h2 {
  font-size: 2rem;
  font-size: var(--font-size-large);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.22;
  line-height: var(--line-height-snug);
  letter-spacing: -0.03rem;
  letter-spacing: var(--letter-spacing-heading);
}

h3 {
  font-size: 1.5rem;
  font-size: var(--font-size-medium);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  line-height: var(--line-height-base);
  letter-spacing: -0.03rem;
  letter-spacing: var(--letter-spacing-heading);
}

h4 {
  font-size: 1.125rem;
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  line-height: var(--line-height-base);
}

p {
  font-size: 1rem;
  font-size: var(--font-size-base);
}

/* Tablet and up */
@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
:root {
  --button-text-color: var(--text-color);
  --button-bg-hover: rgba(255, 255, 255, 0.1);
  --button-bg-primary: var(--primary-light);
  --button-bg-primary-hover: #cccccc;
  --button-text-primary-color: var(--primary-dark);
  --button-outline-color: var(--primary-light);
  --button-outline-hover: rgba(255, 255, 255, 0.1);
  --button-border-radius-md: 0.75rem;
  --button-border-radius-sm: 0.25rem;
}

/* Base button styles */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  border: none;
  border-radius: 0.75rem;
  border-radius: var(--button-border-radius-md);
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  background: transparent;
  color: #fff;
  color: var(--button-text-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  line-height: 1.1;
  width: -moz-fit-content;
  width: fit-content;
}

.button:hover {
  background: rgba(255, 255, 255, 0.1);
  background: var(--button-bg-hover);
}

.rainbowCta {
  transition: box-shadow .25s ease;
}

/* only apply the hover effect on hover-capable devices */
@media (any-hover: hover) {
  .rainbowCta:hover {
    box-shadow: 0 0 20px 0 #FFF;
    background: #fff !important;
  }
}

/* Size variants */
.button--2xs {
  font-size: 0.6806rem; /* 11px */
  padding: 0.5714em 0.8571em;
  border-radius: 0.25rem;
  border-radius: var(--button-border-radius-sm);
}

.button--sm {
  font-size: 0.875rem;
  padding: 0.5em 0.75em;
  border-radius: 0.25rem;
  border-radius: var(--button-border-radius-sm);
}

.button--md {
  font-size: 1.1667rem; /* 19px */
  padding: 0.6667em;
}

.button--lg {
  font-size: 1.4rem; 
  padding: 0.75em 0.875em;
}

@media (min-width: 48em) {
  .button--2xs {
    font-size: 0.875rem; /* 14px */
  }

  .button--sm {
    font-size: 1.125rem; /* 18px */
  }

  .button--md {
    font-size: 1.5rem; /* 24px */
  }

  .button--lg {
    font-size: 1.8rem; 
  }
}

/* Style variants */
.button--primary {
  background: #fff;
  background: var(--button-bg-primary);
  color: #000;
  color: var(--button-text-primary-color);
}

.button--primary:hover {
  background: #cccccc;
  background: var(--button-bg-primary-hover);
}

.button--outlined {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.button--outlined:hover {
  background: rgba(255, 255, 255, 0.1);
  background: var(--button-outline-hover);
    border: 1px solid rgba(255, 255, 255, 1);
}

/* Icon support */
.button__icon {
  width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}

.button__icon img {
  width: 100%;
  max-height: 100%;
}

.button--2xs,
.button--sm {
  gap: 0.5em;
}

.button--2xs .button__icon,
.button--sm .button__icon {
  width: 1.25em;
  height: 1.25em;
}

/* Disabled state */
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Focus state for accessibility */
.button:focus-visible {
  outline: 2px solid #fff;
  outline: 2px solid var(--button-outline-color);
  outline-offset: 2px;
}
@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 0.5rem;
  background: none;
  border: none;
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
  vertical-align: middle;
}

.icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.icon--sm {
  width: 0.75rem; /* 12px */
  height: 0.75rem; /* 12px */
}

.icon--2xm {
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
}

.icon--md {
  width: 2.25rem; /* 36px */
  height: 2.25rem; /* 36px */
}

.icon--lg {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
}

.icon--xl {
  width: 3.5rem; /* 56px */
  height: 3.5rem; /* 56px */
}

.icon--primary {
  background: linear-gradient(215deg, #0170d9 -9.82%, #ffa0ff 140.67%);
  padding: 0.375rem; /* 6px */
}

.icon--circularGray {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.4rem;
}

@media (min-width: 48em) {
  .icon--primary {
    padding: 0.5rem; /* 8px */
  }

  .icon {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
  }

  .icon--2xs {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
  }

  .icon--sm {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }

  .icon--2xm {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
  }

  .icon--md {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
  }

  .icon--lg {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
  }
  .icon--xl {
    width: 5.6rem; /* 89.6px */
    height: 5.6rem;
  }
}
/* Header & Navigation */
@keyframes fadeDownUp {
  0% {
    opacity: 1;
    transform: rotate(0deg) translateY(0px);
  }
  50% {
    opacity: 0;
    transform: rotate(0deg) translateY(4px);
  }
  51% {
    opacity: 0;
    transform: rotate(180deg) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: rotate(180deg) translateY(0px);
  }
}

:root {
  --nav-background: rgba(255, 255, 255, 0.1);
  --nav-gap: var(--sp-4);
  --nav-submenu-gap: 1rem;
}

.header {
  position: relative;
  transition: transform 0.3s ease;
  z-index: 10;
  z-index: var(--z-index-header);
  will-change: transform;
}
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-nav {
  position: relative;
  padding-top: 0.8125rem;
}

.header-nav-container {
  position: relative;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 0.5rem 1.25rem;
  padding: var(--sp-2) var(--sp-4);
}

.header-tabs {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}

.header-tabs-container {

  padding-top:var(--sp-3, 1rem);
  overflow-x: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.header-tabs-container a {
    pointer-events: auto;
  }

@media (min-width: 64em) {
  .header-tabs-container {
  padding-top:var(--sp-3, 1rem);
  }
}

@media (min-width: 36em) {
  .header-nav-container {
    padding: 1.25rem;
    padding: var(--sp-4);
  }
}

.header-nav-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  background: var(--nav-background);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  border-radius: 8px;
  border-radius: var(--border-radius);
  z-index: -1;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__list {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  gap: var(--sp-2);
  list-style: none;
  align-items: stretch;
}

.nav__logo img {
  display: block;
  height: 28px;
}

.nav__menu {
  display: flex;
  gap: 1rem;
  gap: var(--sp-3);
  align-items: center;
}

.nav__menu a {
  text-decoration: none;
}

.nav__item {
  display: none;
}

.nav__item.nav__item--action {
    display: block;
  }

.nav__actions {
  display: flex;
  gap: 1rem;
  gap: var(--sp-3);
  align-items: center;
}

@media (min-width: 48em) {
  .nav__item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1.25rem 0 calc(1.25rem + 1rem) 0;
    padding: var(--nav-gap) 0 calc(var(--nav-gap) + var(--nav-submenu-gap)) 0;
    margin: calc(1.25rem * -1) 0
      calc(1.25rem * -1 - 1rem) 0;
    margin: calc(var(--nav-gap) * -1) 0
      calc(var(--nav-gap) * -1 - var(--nav-submenu-gap)) 0;
  }

  /* Submenu styles */
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    border-radius: 8px;
    padding: 0.5rem;
    padding: var(--sp-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden;
    will-change: transform
  }

    .submenu .nav__link {
      width: 100%;
      padding: 1rem;
      padding: var(--sp-3);
    }

    .submenu::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      background: var(--nav-background);
      -webkit-backdrop-filter: blur(40px);
              backdrop-filter: blur(40px);
      border-radius: 8px;
      border-radius: var(--border-radius);
      z-index: -1;
    }
      .nav__item.has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .nav__item.has-submenu:hover > .nav__link {
        background: var(--button-bg-hover);
      }

      .nav__item.has-submenu:hover > .button__icon {
        animation: fadeDownUp 0.4s 1 ease both;
        transform-origin: center;
      }
}

@media (min-width: 64em) {
  .nav__logo img {
    height: 43px;
  }

  .nav__list {
    gap: 1rem;
    gap: var(--sp-3);
  }
}

/* Mobile Navigation */

.menu-toggle .icon-close {
    display: none;
  }

.menu-toggle.active .icon-close {
      display: block;
    }

.menu-toggle.active .icon-menu {
      display: none;
    }

.menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  top: calc(100% + var(--sp-2));
  left: 0;
  width: 100%;
  max-height: calc(100vh - 100% - 3rem);
  /* for full vh with spacing - bottom: calc((100vh - 100%) * -1 + 0.8125rem + 2rem); */
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    rgba(0, 0, 0, 0.08);

  -webkit-backdrop-filter: blur(40px);

          backdrop-filter: blur(40px);
  border-radius: 8px;
  border-radius: var(--border-radius);
  transform: translateY(-10px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  overflow-y: auto;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
}

.menu.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

.menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu__logo {
  height: 1.5rem;
}

.menu__close {
  background: none;
  border: none;
  color: var(--white-color);
  cursor: pointer;
  padding: 0.5rem;
}

.menu__nav {
  padding: 2rem 1.5rem;
}

.menu__section:last-child {
  margin-bottom: 0;
}

.menu__title {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  font-weight: var(--font-weight-normal);
  padding-bottom: 0.571429em; /* 8px */
  padding-top: 1rem;
  padding-top: var(--sp-3);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 0; /* more space for link item to click */
  padding: 0.5rem 0;
  padding: var(--sp-2) 0;
}

.menu__list a {
    display: block;
    color: #fff;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    transition: opacity 0.3s;
    opacity: 0.9;
    padding: 1rem 0;
    padding: var(--sp-3) 0;
  }

.menu__list a:hover {
      opacity: 1;
    }

@media (min-width: 48em) {
  .menu-toggle {
    display: none;
  }
  .menu {
    display: none !important;
  }
}
.tabs__item  {
  display: inline-block;
  vertical-align: middle;
  margin-right: .3rem;
}

.tabs__item > a {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    padding: 0.5rem 1rem;
    padding: 0.5rem var(--sp-3);
    border-radius: 4rem;
    background: #1a1a1a;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

/* Hover only on mouse/trackpad devices */
@media (hover: hover) and (pointer: fine) {
  .tabs__item:hover > a {
    color: #000;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}


.tabs__item--active > a {
    color: black;
    background: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }




@media (min-width: 64em) {
    .tabs__item > a {
      font-size: 1.25rem;
    }
}
/* Grid layout */
.grid-gallery {
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

.grid-gallery-item {
  overflow: hidden;
}

/* Layout */
.grid-gallery.grid-gallery--col-1-2 {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.grid-gallery.grid-gallery--row-2-1 {
  grid-template-columns: repeat(2, minmax(auto, 50%));
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1/1;
}

.grid-gallery.grid-gallery--row-2-1 .grid-gallery-item:first-child {
    grid-column: 1 / -1; /* Span all columns */
  }

.grid-gallery.grid-gallery--col-2to4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 3rem 1.5rem;
  gap: var(--sp-7) var(--sp-5);
}

@media (min-width: 48em) {
  .grid-gallery {
    gap: 1rem;
  }
    /* First two items in top row */
    .grid-gallery.grid-gallery--row-2-1 .grid-gallery-item:nth-child(1),
    .grid-gallery.grid-gallery--row-2-1 .grid-gallery-item:nth-child(2) {
      grid-column: span 1;
    }

    /* Third item (and any additional) spans full width in bottom row */
    .grid-gallery.grid-gallery--row-2-1 .grid-gallery-item:nth-child(3) {
      grid-column: 1 / -1; /* Span full width */
    }

  .grid-gallery.grid-gallery--col-1-2 {
    grid-template-rows: minmax(250px, 350px) minmax(250px, 350px);
    grid-template-columns: repeat(2, minmax(auto, 50%));

    /* First two items in top row */
  }
    .grid-gallery.grid-gallery--col-1-2 .grid-gallery-item:nth-child(2),
    .grid-gallery.grid-gallery--col-1-2 .grid-gallery-item:nth-child(3) {
      grid-row: span 1;
    }

    /* Third item (and any additional) spans full width in bottom row */
    .grid-gallery.grid-gallery--col-1-2 .grid-gallery-item:nth-child(1) {
      grid-row: 1 / -1;
    }

  .grid-gallery.grid-gallery--col-2to4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64em) {
  .grid-gallery.grid-gallery--col-2to4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
/* Video thumbnail styling */
.image-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  padding: var(--sp-5);
  aspect-ratio: 1/1;
}

/* Gradient overlay using pseudo-element */
.image-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 43.67%,
    rgba(0, 0, 0, 0.5) 78.55%
  );
  z-index: 1;
  transition: background-color 0.3s ease;
}

.image-tile:hover::after {
  background-color: rgba(0, 0, 0, 0.2);
}

/* link coverage */
.image-tile__action {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.image-tile__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  z-index: 2;
}

.image-tile__title {
  flex: 1;
  font-size: 1.5rem;
  line-height: 1.3;
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: 1rem;
  text-shadow: 0 0 12px #000;
}

.image-tile__description {
  font-size: 1.125rem;
  line-height: 1.3;
  line-height: var(--line-height-base);
  font-weight: 400;
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 1);
}

.image-tile__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.image-tile__button {
  position: absolute;
  top: 1rem;
  top: var(--sp-3);
  right: 1rem;
  right: var(--sp-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.image-tile__button .icon {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
  }

@media (min-width: 36em) {
  .image-tile {
    padding: 2rem;
    padding: var(--sp-6);
  }
}

@media (min-width: 64em) {
  .image-tile__header {
    padding-right: 3rem;
  }

  .image-tile__title {
    font-size: 2rem;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .image-tile__button {
    position: static;
    position: initial;
    top: auto;
    top: initial;
    left: auto;
    left: initial;
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
/* Video thumbnail styling */
.video-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 1rem;
  padding: var(--sp-3);
}


.video-tile__button .icon {
  width: 2.5em;
  height: 2.5em;
  box-shadow: 0 0 36px 0 #000;
  border-radius: 3em;
}


/* BOSCH component video tile sizing */
  .content-block__col>.video-tile {
      height: 18rem;
  }

@media (min-width: 1024px) {
  .content-block__col>.video-tile {
      height: 28rem;
  }
}


/* Single Video Tile */

.single-tile {
      height: 18rem;
  }

@media (min-width: 768px) {
  .single-tile {
      height: 100%;
  }
}



.video-tile:has("[data-video-url]") {
  cursor: pointer;
}


/* Gradient overlay using pseudo-element */
.video-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50.67%,
    rgba(0, 0, 0, .6) 86.55%
  );
   
  z-index: 1;
  transition: background-color 0.3s ease;
}

.video-tile:hover::after {
  background-color: rgba(0, 0, 0, 0.2);
}

.video-tile__content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  z-index: 2;
}

.video-tile__title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 2em;
}

.video-tile__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.video-tile__item:hover .video-tile__image {
  transform: scale(1.02);
}

.video-tile__button {
  position: absolute;
  top: 1rem;
  top: var(--sp-3);
  left: 1rem;
  left: var(--sp-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 36em) {
  .video-tile {
    padding: 1.5rem;
    padding: var(--sp-5);
  }
}

@media (min-width: 64em) {
  .video-tile__title {
    font-size: 1.625rem; /* 26px for desktop */
  }
  .video-tile__button {
    position: static;
    position: initial;
    top: auto;
    top: initial;
    left: auto;
    left: initial;
  }

    .video-tile__button .icon {
      width: 3rem; /* 48px */
      height: 3rem; /* 48px */
    }
}
.hero-banner {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 4em;
}

.hero-banner--secondary{
margin: 0 !important;

}



.hero-banner__background {

  overflow: hidden;
  width: 100vw;
  width: var(--viewportWidth);
  left: 50%;
  margin-left: calc(100vw / -2);
  margin-left: calc(var(--viewportWidth) / -2);
  display: block;
  position: relative;
  z-index: 1;
}

.hero-banner__background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 82.29%, #000 100%);
    z-index: 0;
  }

.hero-banner__content {
  flex: 0 1 50%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  z-index: 2;
  row-gap: 1rem;
}

.hero-banner__title {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 3rem;
  font-size: var(--font-size-2xlarge-md);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1; /* 88px */
  letter-spacing: -0.03em;
/*   margin-bottom: .2em; */
  text-shadow: 0 0 20px #000;
}

.hero-banner__description {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.hero-banner.hero-banner--secondary .hero-banner__background {
    z-index: 1;
  }

.hero-banner.hero-banner--secondary .hero-banner__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    row-gap: 1rem;
  }

.hero-banner.hero-banner--secondary .hero-banner__title {
    font-size: 2rem;
    font-size: var(--font-size-large);
  }

/* Mobile banner sizing */
@media (max-width: 40em) {
  .hero-banner__background {
    height: 25em;
  }
  
  .hero-banner__background > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
}


@media (max-width: 640px) {
  .hero-banner--secondary > .hero-banner__background:after{
      content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 10%, #000 100%);
    z-index: 0;
  
  }
  
}


@media (min-width: 40em) {

 
  .hero-banner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: max(40rem, 67vh);
  }
  .hero-banner.hero-banner--secondary {
    height: 30rem;
  }

    .hero-banner.hero-banner--secondary .hero-banner__content {
      width: 50%;
      position: absolute;
      bottom: 50%;
      transform: translateY(50%);
    }
  .hero-banner__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    margin-left: 0;
      border-radius: 8px;
  border-radius: var(--border-radius);
  }

    .hero-banner__background:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 75%);
      z-index: 0;
    }

    .hero-banner__background img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

  .hero-banner__content {
    text-align: left;
    align-items: flex-start;
  }
}

@media (min-width: 64em) {
  .hero-banner__title {
    font-size: 5rem;
    font-size: var(--font-size-2xlarge);
  }
  .hero-banner__description {
    font-size: 1.875rem;
  }
    .hero-banner.hero-banner--secondary .hero-banner__title {
      font-size: 3.5rem;
    }
}
.home-banner {
  position: relative;
   padding-top: 9rem;
  padding-bottom: 3em;
}

.home-banner__background {
  position: absolute;
  width: 100vw;
  width: var(--viewportWidth);
  height: 100%;
  left: 50%;
  margin-left: calc(100vw / -2);
  margin-left: calc(var(--viewportWidth) / -2);
  top: 0;
  z-index: -1;
  overflow: hidden;
}

.home-banner__background object {
    width: 100%;
    height: 100%;
    transform: scale(2);
  }

.home-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 3rem;
  text-align: center;
  height: 100%;
}

.home-banner__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  flex: 1;
}

.home-banner__video {
  mix-blend-mode: lighten;
  overflow: hidden;
  flex: 1;
}

.home-banner__video video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

.home-banner__title {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 3rem;
  font-size: var(--font-size-2xlarge-md);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.home-banner__description {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

@media (min-width: 48em) {
  .home-banner {
    height: 90vh;
    min-height: 52rem;
  }
  .home-banner__content {
    flex-direction: row;
    gap: 1.25rem;
    gap: var(--sp-4);
    text-align: inherit;
  }
  .home-banner__title {
    font-size: 3rem;
    font-size: var(--font-size-xlarge);
  }
  .home-banner__description {
    font-size: 1.875rem;
  }
  .home-banner__video {
    height: 100%;
  }
}

@media (min-width: 64em) {
  .home-banner__content {
    flex-direction: row;
    gap: 2rem;
    gap: var(--sp-6);
    text-align: inherit;
  }
  .home-banner__title {
    width: 95%;
    font-size: 5rem;
    font-size: var(--font-size-2xlarge);
  }
}
.hero-statement {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 17.75rem;
  padding: 4.5rem 1em;
  text-align: center;
}

.hero-statement__title {
  
  font-size: 1.75rem;
  line-height: 1.24;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

@media (min-width: 48em) {
  .hero-statement {
    min-height: 52rem;
  }
  .hero-statement__title {
    font-size: 3.5rem;
  }
}

.hero-statement__image {
  position: absolute;
  width: 100vw;
  width: var(--viewportWidth);
  left: 50%;
  margin-left: calc(100vw / -2);
  margin-left: calc(var(--viewportWidth) / -2);
  top: 0;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.hero-statement__image::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

.hero-statement__image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

.hero-statement__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.hero-statement__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
:root {
  --section-block-accent--background: linear-gradient(
    -170deg,
    #372337 0%,
    rgba(0, 0, 0, 1) 60%
  );
  --section-block-accent-border-background-right: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    #a989c5 20%,
    black 90%
  );
  --section-block-accent-border-background-left: linear-gradient(
    -175deg,
    rgb(255, 255, 255) 0%,
    #0170d9 20%,
    #faa800 55%,
    black 70%
  );
}

.section-block {
  position: relative;
}

.section-block__header {
  padding: 0 1em 1em 1em;
  text-align: center;
}

.section-block__heading:has(+ *) {
    margin-bottom: 2em;
  }

.section-block__title {
  font-size: 2rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  line-height: var(--line-height-tight);

}

.section-block__title:has(+ *) {
    margin-bottom: 1rem;
  }






.section-block__description {
  font-size: 1.25rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  line-height: var(--line-height-base);
}

/* Clearfix */
.section-block::before,
.section-block::after {
  content: " ";
  display: table;
}

/* Blue Burst Header */

.section-block--primary .section-block__header {
    padding: 2em 1em;
    position: relative;
    border-width: 2px;
    border-style: solid;
    -o-border-image: radial-gradient(
        50% 50% at 50% 0%,
        rgb(211, 211, 211) 0%,
        rgba(1, 112, 217, 0.4) 50.05%,
        rgba(255, 160, 255, 0) 100%
      )
      1 0 0 0;
       border-image: radial-gradient(
        50% 50% at 50% 0%,
        rgb(211, 211, 211) 0%,
        rgba(1, 112, 217, 0.4) 50.05%,
        rgba(255, 160, 255, 0) 100%
      )
      1 0 0 0;
    overflow: visible;
  }


.section-block--primary .section-block__header::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      background: radial-gradient(
          50% 90% at 50% 0%,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(1, 112, 217, 0.4) 50%,
          rgba(255, 160, 255, 0) 100%
        ),
        #000;
      z-index: -1;
    }

.section-block--primary-alt .section-block__header {
    position: relative;
    border-width: 2px;
    border-style: solid;
    -o-border-image: radial-gradient(
        50% 50% at 50% 100%,
        rgb(211, 211, 211) 0%,
        rgba(1, 112, 217, 0.4) 50.05%,
        rgba(255, 160, 255, 0) 100%
      )
      0 0 1 0;
       border-image: radial-gradient(
        50% 50% at 50% 100%,
        rgb(211, 211, 211) 0%,
        rgba(1, 112, 217, 0.4) 50.05%,
        rgba(255, 160, 255, 0) 100%
      )
      0 0 1 0;
  }


.section-block--primary-alt{
margin: 2em 0;

}





.section-block--primary-alt .section-block__header::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
          41.85% 74.2% at 51.32% 100%,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(1, 112, 217, 0.4) 50.05%,
          rgba(255, 160, 255, 0) 100%
        ),
        #000;
      z-index: -1;
    }


/* RAINBOW HEADER */

.section-block--accent .section-block__header {
    position: relative;
    border: 2px solid transparent;
      border-radius: 8px;
      background:
    /* Inner fill */
    linear-gradient(190deg, #FFA0FF -138.92%, #000 50.2%) padding-box,

    /* Black overlay fade (top→bottom example) */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%) border-box,

    /* Rainbow gradient border */
    linear-gradient(
      130deg,
      #FAA800 0%,
      #0170D9 36%,
      #FFF 61%,
      #FFA0FF 94%
    ) border-box;
    
    padding: 2.5em;
    margin-bottom: 1em;
  }


/* END RAINBOW HEADER */


.section-block.section-block--md .section-block__description {
    font-size: 1.125rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }

.section-block.section-block--lg .section-block__title {
    font-size: 3rem;
  }

.section-block.section-block--lg .section-block__description {
    font-size: 1.125rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }

@media (min-width: 36em) {

  
  .section-block__title {
    font-size: 2rem;
  }
}

@media (min-width: 48em) {


  .section-block__header {
    padding: 0 1em 2em 1em;
  }
    .section-block__heading:has(+ *) {
      margin-bottom: 3em;
    }
/*     .section-block--primary .section-block__header, .section-block--primary-alt .section-block__header, .section-block--accent .section-block__header {
      padding: 4rem;
      padding: var(--sp-9);
    } */
  .section-block__title {
    font-size: 3.5rem;
      padding-left: 1em;
  padding-right: 1em;

  }
    .section-block.section-block--lg .section-block__title {
      font-size: 5rem;
    }
    .section-block.section-block--lg .section-block__description {
      font-size: 2rem;
    }
    .section-block.section-block--md .section-block__description {
      font-size: 1.5rem;
    }

  .section-block__description {
    font-size: 1.875rem;
  }
}
:root {
  --content-block-accent--background-ltr: linear-gradient(
    -135deg,
    #372337 0%,
    rgba(0, 0, 0, 1) 50%
  );
  --content-block-accent--background-rtl: linear-gradient(
    135deg,
    #372337 0%,
    rgba(0, 0, 0, 1) 50%
  );
  --content-block-accent-border-background-top-ltr: linear-gradient(
    to left,
    rgb(255, 255, 255) 0%,
    #125097 40%,
    black 100%
  );
  --content-block-accent-border-background-top-rtl: linear-gradient(
    to right,
    rgb(255, 255, 255) 0%,
    #c8bfeb 40%,
    black 100%
  );
  --content-block-accent-border-background-bottom-ltr: linear-gradient(
    -110deg,
    rgb(255, 255, 255) 0%,
    #0170d9 20%,
    #faa800 55%,
    black 80%
  );
  --content-block-accent-border-background-bottom-rtl: linear-gradient(
    110deg,
    rgb(255, 255, 255) 0%,
    #ffa0ff 5%,
    #0170d9 20%,
    #faa800 67%,
    black 80%
  );
  --content-block-accent-border-background-left: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    #ffa0ff 20%,
    black 100%
  );
  --content-block-accent-border-background-right: linear-gradient(
    -170deg,
    rgb(255, 255, 255) 0%,
    #0170d9 20%,
    #faa800 55%,
    black 80%
  );
}

/* Mobile first - stacked columns */
.content-block {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.content-block__row {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

/* Rainbow Header Mobile */
@media (max-width: 48em) {
  .content-block__col--accent {
    padding: 1em 1em 0 1em;
        border: 2px solid transparent;
      border-radius: 8px;
      background:
    /* Inner fill */
    linear-gradient(190deg, #FFA0FF -138.92%, #000 50.2%) padding-box,

    /* Black overlay fade (top→bottom example) */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%) border-box,

    /* Rainbow gradient border */
    linear-gradient(
      130deg,
      #FAA800 0%,
      #0170D9 36%,
      #FFF 61%,
      #FFA0FF 94%
    ) border-box;
  }
}


/* Mobile ordering - always fixed order on mobile */
.content-block__row > .content-block__col:nth-child(1) {
  order: 1;
}

.content-block__row > .content-block__col:nth-child(2) {
  order: 2;
}

.content-block__col {
  border-radius: 8px;
  
}


  .mobile-gap-closer{
    row-gap: 1em;
  }
  



/* Desktop layout - side by side */

.content-block__col--accent::before,
.content-block__col--accent::after {
  content: "";
  position: absolute;
  margin: -2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.content-block__col--accent::before {
  z-index: -2;
  top: 0;
  left: 50%;
  bottom: 0;
  right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

}

.content-block__col--accent::after {
  z-index: -1;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

  );

}

.content-block__row--rtlr {
  flex-direction: column-reverse;
}







/* Desktop layout - side by side */
@media (min-width: 48em) {


  .content-block__col--accent-ltr >.signage-block{
  padding: 3em;
}

.content-block__col--accent-rtl >.signage-block{
  padding: 3em;
}

  .content-block__col--accent-rtl,  .content-block__col--accent-ltr{
  
      min-height: 38rem;
  
  }

  .mobile-gap-closer{
    row-gap: 3em;
  }

  .content-block__row {
    flex-direction: row;
    column-gap: 3em;
  }

  .content-block__row > .content-block__col {
    flex: 1;
    order: initial; /* Reset for desktop layout */
  }
  
  .content-block__col--accent-ltr{
    border: 2px solid transparent;
      border-radius: 8px;
      background:
    /* Inner fill */
    linear-gradient(240deg, #FFA0FF -138.92%, #000 50.2%) padding-box,

    /* Black overlay fade (top→bottom example) */
    linear-gradient(270deg, rgba(0,0,0,0) 0%, #000 100%) border-box,

    /* Rainbow gradient border */
    linear-gradient(
      340deg,
      #FAA800 0%,
      #0170D9 36%,
      #FFF 61%,
      #FFA0FF 94%
    ) border-box;
  }


  /* Right-to-left layout variant */
  .content-block__row--rtl {
    flex-direction: row-reverse;
  }
  .content-block__col--accent-rtl {
      border: 2px solid transparent;
      border-radius: 8px;
      background:
    /* Inner fill */
    linear-gradient(125deg, #FFA0FF -138.92%, #000 50.2%) padding-box,

    /* Black overlay fade (top→bottom example) */
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 100%) border-box,

    /* Rainbow gradient border */
    linear-gradient(
      30deg,
      #FAA800 0%,
      #0170D9 36%,
      #FFF 61%,
      #FFA0FF 94%
    ) border-box;
  }
  

  

}
.signage-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  text-align: center;
  position: relative;
  color: white;
  border-radius: 8px;
  border-radius: var(--border-radius);
  row-gap: 1em;
}



.signage-block__icon img {
  min-width: 4rem;
  max-width: 100%;
  height: 40px;
  display: block;
}

.signage-block__title {
  font-size: 2rem; /* 32px */
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}

.signage-block__description {
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* size variation */
.signage-block--sm .signage-block__title {
    font-size: 1.5rem; /* 24px */
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }
.signage-block--sm .signage-block__description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }

.signage-block--md .signage-block__description {
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }

/* Display variation */
.signage-block.signage-block--display {
  padding: 0;
  text-align: left;
  align-items: flex-start;
}
.signage-block.signage-block--display .signage-block__icon {
  max-width: 100%;
  max-height: 6rem;
}

/* @media (min-width: 36em) {
  .signage-block--box {
    aspect-ratio: 1/1.31;
  }

  .signage-block--landscape {
    aspect-ratio: 3/1;
  }
} */

/* Responsive adjustments */
@media (min-width: 48em) {
  .signage-block {
/*     padding: 4rem; */
  }

  .signage-block--box {
    aspect-ratio: 1/1;
  }
    .signage-block--sm .signage-block__title {
      font-size: 2rem; /* 32px */
    }

    .signage-block--sm .signage-block__description {
      font-size: 1.5rem; /* 24px */
    }
    .signage-block--md .signage-block__description {
      font-size: 1.5rem; /* 24px */
    }

  .signage-block__title {
    font-size: 3.5rem; /* 56px */
/*     margin-bottom: 0.5em; */
  }

  .signage-block__description {
    font-size: 1.875rem; /* 30px */
/*     margin-bottom: 1em; */
    line-height: 1.4;
  }
}

@media (min-width: 64em) {
  .signage-block--landscape {
    aspect-ratio: 1.26;
  }
}
.accordion {
  max-width: 47rem;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.accordion-item:first-child .accordion-header {
      padding-top: 0;
    }

.accordion-item--open .accordion-content-container {
    grid-template-rows: 1fr;
  }

.accordion-item--open .accordion-icon {
    transform: rotate(180deg);
  }

.accordion-icon {
  opacity: 1;
  transition: opacity 300ms ease, transform 300ms ease;
  flex: 0 0 auto;
}

.accordion-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;
  padding: var(--sp-3) 0;
}

.accordion-header:hover .accordion-title {
      color: rgba(255, 255, 255, 0.8);
    }

.accordion-header:hover .accordion-icon {
      opacity: 0.8;
    }

.accordion-title {
  font-size: 1.125rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  transition: color 300ms ease;
}

.accordion-content-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.accordion-content {
  overflow: hidden;
  line-height: 1.3;
  line-height: var(--line-height-base);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;

  /* Space, a fake inner padding */
}

.accordion-content:after {
    content: "";
    display: block;
    width: 100%;
    height: 1.5rem;
    height: var(--sp-5);
  }

@media (min-width: 48em) {
  .accordion-header {
    padding: 1rem 0;
    padding: var(--sp-3) 0;
  }
  .accordion-title {
    font-size: 1.25rem;
  }
  .accordion-content {
    font-size: 1.125rem;
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
.image-block {
  width: 100%;
  height: 18rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.image-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover; /* legacy Opera (optional now) */
  object-fit: cover;
}

/* Tablet and up */
@media (min-width: 1024px) {
  .image-block {
    height: 28rem;
  }
}
.video-statement {
  position: relative;
  width: 100vw;
  width: var(--viewportWidth);
  left: 50%;
  margin-left: calc(100vw / -2);
  margin-left: calc(var(--viewportWidth) / -2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-statement video {
    min-width: 833px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  
}
:root {
  --logo-box-width: 200px;  /* max width per logo box */
  --logo-box-height: 100px; /* max height per logo box */
}

/* Swiper container */
.logos-block.swiper { position: relative; }

/* Linear easing for continuous motion */
.logos-block.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* Each slide is a 200x100 "box" so images never exceed your maxes */
.logos-block .logo-item {
  flex: 0 0 var(--logo-box-width);
  width: var(--logo-box-width);
  height: var(--logo-box-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image scales down, keeps aspect ratio, never exceeds the box */
.logos-block .logo-item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Optional: if you still use a static (non-swiper) preview somewhere */
.logos-block:not(.swiper) .logos-block__container {
  display: flex;
  flex-wrap: wrap;
  gap: 50px; /* mirrors JS spaceBetween */
  justify-content: center;
}
.logos-block:not(.swiper) .logo-item {
  flex: 0 0 var(--logo-box-width);
  width: var(--logo-box-width);
  height: var(--logo-box-height);
}
.card-slider.swiper {
  width: 100vw;
  width: var(--viewportWidth);
  position: relative;
  left: 50%;
  margin-left: calc(100vw / -2) !important;
  margin-left: calc(var(--viewportWidth) / -2) !important;
  padding: 0 calc((100vw - 100%) / 2);
  padding: 0 calc((var(--viewportWidth) - 100%) / 2);
}

.card-slider__container {
  position: relative;
  align-items: stretch;
}

.card-slider__item.swiper-slide {
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 1s ease;
  height: auto !important;
}
.card-slider__item.swiper-slide.swiper-slide-visible {
  opacity: 1;
}

.card-slider__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2em;
}



/* Base ( < 40em ) */
.media-signages-slider .card-slider__prev,
.media-signages-slider .card-slider__next {
  position: absolute;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  z-index: 10;
}
.media-signages-slider .card-slider__prev { left: 32px; }
.media-signages-slider .card-slider__next { right: 32px; }

/* 40em–<48em */
@media (min-width: 40em) and (max-width: 47.99em) {
  .media-signages-slider .card-slider__prev { left: 32px; }
  .media-signages-slider .card-slider__next { right: 32px; }
  /* keep the same top if desired */
  .media-signages-slider .card-slider__prev,
  .media-signages-slider .card-slider__next {
    top: calc(50% - 25px);
  }
}

/* ≥48em */
@media (min-width: 48em) {
  .media-signages-slider .card-slider__prev,
  .media-signages-slider .card-slider__next {
    top: calc(50% - 25px);
  }
  .media-signages-slider .card-slider__prev { left: 32px; }
  .media-signages-slider .card-slider__next { right: 32px;}
}






/* BUTTON STYLING */
.card-slider__nav button {
    
    border-radius: 50%;
    cursor: pointer;
    padding: .5em;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 1);
    backface-visibility: hidden;
    will-change: opacity;
    transition: box-shadow .4s ease;
    border: none;
    box-shadow: 0 0 36px 0 #000;
  }

.card-slider__nav button:disabled {
      opacity: .3;
      cursor: not-allowed;
    }


@media (hover: hover) and (pointer: fine) {
.card-slider__prev:hover,
 .card-slider__next:hover {
    transform: translateY(-50%);           /* add scale, keep translate */
    box-shadow: 0 0 0 6px rgba(255,255,255,.3);
  }
}
@media (hover: none) and (pointer: coarse) {
.card-slider__prev:active,
.card-slider__next:active {
    transform: translateY(-50%) scale(1.2);           /* add scale, keep translate */
    box-shadow: 0 0 0 6px rgba(255,255,255,.3);
  }
}

.card-slider__scrollbar {
  height: 4px;
  background-color: #4c4c4c;
  flex: 1;
}

.card-slider__scrollbar .swiper-scrollbar-drag {
    background-color: white;
    cursor: pointer;
    backface-visibility: hidden;
    will-change: transform;
    border-radius: 0;
  }

@media (min-width: 48em) {
  .card-slider__nav {
    gap: 2rem;
    gap: var(--sp-6);
  }
}



.video-tiles-slider .reel-block__video {
  border-radius: var(--border-radius);
}
.display-card {
  background-color: #1a1a1a;
  border-radius: 8px;
  border-radius: var(--border-radius);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.display-card__hero {
/*   aspect-ratio: 1.2; */
  flex: 1;
  overflow: hidden;
  height: 18rem;
}

.display-card__hero img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.display-card__hero video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.display-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* @media (min-width: 40em) {
  .display-card__hero {
    aspect-ratio: 2;
  }
} */

@media (min-width: 40em) {
.display-card {
     display: flex;
    align-items: stretch;
    flex-direction: row;
  }

  .display-card__hero {
    aspect-ratio: unset;
    height: auto;
    display: flex;
    align-items: stretch;
  }
}

.display-card__content > .signage-block{
  padding: 0 3.5em;
}
/* ================================
   QUOTE SLIDER (scoped)
   ================================ */

/* base content styles */
.quote-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  flex: 1;
  padding: 2rem;
}

.quote-block__quote {
  color: #a3a3a3;
  font-size: 1.125rem;
  font-size: var(--font-size-base-md);
  font-weight: 400;
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}

.quote-block__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--sp-2);
}

.quote-block__author {
  font-size: 1.25rem;
  font-size: var(--font-size-small-md);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.quote-block__author-title {
  color: #a3a3a3;
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* center the text area inside the card */
.quote-slider .display-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center (optional) */
}

/* Make sure this slider does NOT adopt overlay nav rules from others */
.quote-slider { position: relative; }
.quote-slider .card-slider__nav {
  position: static;     /* keep scrollbar in the bar at the bottom */
  inset: auto;
  pointer-events: auto;
}

/* ----- Arrow positioning (like before) ----- */
/* Base (<40em) */
.quote-slider .card-slider__prev,
.quote-slider .card-slider__next {
  position: absolute;
  top: calc(50% - 25px);
  transform: translateY(-50%);
  z-index: 10;
}
.quote-slider .card-slider__prev { left: 36px; }
.quote-slider .card-slider__next { right: 36px; }

/* 40em–<48em */
@media (min-width: 40em) and (max-width: 47.99em) {
  .quote-slider .card-slider__prev { left: 16px; }
  .quote-slider .card-slider__next { right: 16px; }
  .quote-slider .card-slider__prev,
  .quote-slider .card-slider__next { top: calc(50% - 25px); }

  .quote-block { padding: 4rem; }
}

/* ≥48em */
@media (min-width: 48em) {
  .quote-slider .card-slider__prev,
  .quote-slider .card-slider__next { top: calc(50% - 25px); }
  .quote-slider .card-slider__prev { left: 36px; }
  .quote-slider .card-slider__next { right: 36px; }

  .quote-block { padding: 4rem; }
}

/* Larger screens – optional type scaling */
@media (min-width: 85.375em) {
  .quote-block__quote {
    font-size: 1.5rem;
    font-size: var(--font-size-medium);
  }
  .quote-block__author {
    font-size: 2rem;
    font-size: var(--font-size-large);
  }
  .quote-block__author-title {
    font-size: 1.125rem;
    font-size: var(--font-size-small);
  }
}

/* ----- Mobile: ----- */
@media (max-width: 39.99em) {
  .quote-slider .display-card__hero {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
  }
  .quote-slider .display-card__content {
    flex: 1 0 auto;
  }
  .quote-slider .display-card__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Estimate hero height from aspect ratio and center arrows on it */
  .quote-slider { --hero-h: calc(100vw / (16 / 9)); }
  .quote-slider .card-slider__prev,
  .quote-slider .card-slider__next {
    top: calc(var(--hero-h) / 2);
    transform: translateY(-50%);
  }
  .quote-slider .card-slider__prev { left: 32px; }
  .quote-slider .card-slider__next { right: 32px; }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Video Modal Styles */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
}

.video-modal__container {
  position: relative;
  padding: 2.5rem;
  width: 90%;
  height: 90%;
  aspect-ratio: 16 / 9;
}

.video-modal__video {
  width: 100%;
  height: 100%;
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: fadeIn 0.3s 0.3s ease-in-out forwards;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: fadeIn 0.3s 0.3s ease-in-out forwards;
}

.video-modal__close:hover {
  opacity: 0.7;
}

.video-modal__close:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

@media (min-width: 64em) {
  .video-modal__container {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
.label-card {
  max-width: 600px;
  background: #191919;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 1.25rem;
  padding: var(--sp-4);
  margin: 0 auto 1rem auto;
  margin: 0 auto var(--sp-3) auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
  border: 1px solid #191919;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.label-card-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.label-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.label-card__icon {
  margin-bottom: 1.25rem;
  margin-bottom: var(--sp-4);
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}

.label-card__icon--action {
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}

.label-card__title {
  display: block;
  margin-bottom: 0.5rem;
  margin-bottom: var(--sp-2);
  font-size: 1.5rem;
  text-decoration: none;
}

.label-card__description {
  display: block;
  margin-bottom: 0.5rem;
  margin-bottom: var(--sp-2);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.label-card:hover {
  border-color: #fff;
  background-color: #4a4a4a;
}

.label-card:hover .label-card__icon {
    transform: scale(1.02);
  }

.label-card:hover .label-card__icon--action {
    transform: translateX(2px);
  }

@media (min-width: 48em) {
  .label-card {
    max-width: 750px;
    padding: 2rem;
    padding: var(--sp-6);
    margin-bottom: 1rem;
  }

  .label-card__content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    gap: var(--sp-4);
  }
  .label-card__icon {
    margin-bottom: 0;
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--sp-6);
  margin: 0 auto;
}

.contact-list__item .contact-list__title {
    font-size: 1.5rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    line-height: 1lh;
    margin-bottom: 1.25rem;
    margin-bottom: var(--sp-4);
  }

.contact-list__item p {
    font-size: 1.125rem;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    line-height: 1lh;
    margin-bottom: 0.5rem;
    margin-bottom: var(--sp-2);
  }

@media (min-width: 48em) {
  h1 {
    font-size: 4rem;
    font-size: var(--font-size-xlarge-md);
  }
  h2 {
    font-size: 2.5rem;
    font-size: var(--font-size-large-md);
  }
  h3 {
    font-size: 1.75rem;
    font-size: var(--font-size-medium-md);
  }
  h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-small-md);
  }
  p {
    font-size: 1.125rem;
    font-size: var(--font-size-base-md);
  }
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.team-card__image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  margin-bottom: 1.5rem;
  margin-bottom: var(--sp-5);
}

.team-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.team-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.team-card__name {
  font-size: 1.125rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  line-height: var(--line-height-base);
  margin-bottom: 0.5rem;
}

.team-card__title {
  font-size: 1rem;
  font-weight: 400;
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
  line-height: var(--line-height-base);
  text-align: center;
}
:root {
  --stats-modal-background: #1f1f1f;
  --stats-modal-padding: 2.75rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Stats Modal Styles */
body.stats-modal-open {
  overflow: hidden;
}

.stats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.stats-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
    animation: fadeIn 0.3s ease forwards;
  }

.stats-modal__container {
  opacity: 0;
  position: relative;
  background: #1f1f1f;
  border-radius: 8px;
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 640px;
  height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 1.25rem;
  animation: fadeIn 0.3s 0.2s ease forwards;
}

.stats-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4rem 2rem 2.75rem 0;
  border-bottom: 1px solid white;
}

.stats-modal__title-section {
  flex: 1;
}

.stats-modal__title {
  color: white;
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.stats-modal__description {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.125rem;
  margin: 1rem 0 0;
  line-height: 1.4;
}

.stats-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: 400;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 16px;
  flex-shrink: 0;
  z-index: 99;
  transition: background-color .25s ease; 
}

@media (hover: hover) and (pointer: fine) {
  .stats-modal__close:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}
.stats-modal__main {
  position: relative;
  height: 100%;
  width: 100%;
  position: relative;
}

.stats-modal__content {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

.stats-modal__content::-webkit-scrollbar {
    width: 6px;
  }

.stats-modal__content::-webkit-scrollbar-track {
    background: transparent;
  }

.stats-modal__content::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    border-radius: 3px;
  }

.stats-modal__content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1f1f1f);
  }

.stats-modal__section {
  padding: 2.75rem 0;
  padding: var(--stats-modal-padding) 0;

}


.stats-modal__section:has(+ .stats-modal__section) {
  border-bottom: 1px solid #fff;
}

.stats-modal__section:last-child {
  margin-bottom: 0;
}

.stats-modal__section-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 1rem;
}

.stats-modal__items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-modal__item {
  color: white;
  font-size: 1.125rem;
  line-height: 2;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

@media (min-width: 48em) {
  .stats-modal__container {
    padding: 0 2rem;
  }

  .stats-modal__title {
    font-size: 3.5rem;
  }

  .stats-modal__description {
    font-size: 1.5rem;
  }

  .stats-modal__section-title {
    font-size: 2rem;
  }
}
.reel-block__video {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.reel-block__video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.reel-block--square {
  aspect-ratio: 1 / 1;
}

.reel-block--landscape {
  aspect-ratio: 16 / 9;
}

.reel-block--portrait {
  aspect-ratio: 9 / 16;
}

.reel-block__content {
  padding: 1.5rem 1.5rem 0 1.5rem;

  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
}

/* Make the slider a positioning context + container (used at all sizes) */
.video-tiles-slider{
  position: relative;
  container-type: inline-size;   /* enables 100cqw */
}

/* Absolute buttons over the slider (scrollbar remains in normal flow) */
.video-tiles-slider .card-slider__prev,
.video-tiles-slider .card-slider__next{
  position: absolute;
  z-index: 10;
  transform: translateY(-50%);
}
/* Base: use the slider as a positioning context + container */
.video-tiles-slider{
  position: relative;
  container-type: inline-size; /* enables 100cqw */
}

/* Arrows overlay (scrollbar remains in normal flow) */
.video-tiles-slider .card-slider__prev,
.video-tiles-slider .card-slider__next{
  position: absolute;
  z-index: 10;
  transform: translateY(-50%);
}

/* SQUARE TILES (video-tiles-slider) — arrows centered on video */
.video-tiles-slider { position: relative; container-type: inline-size; }

.video-tiles-slider .card-slider__prev,
.video-tiles-slider .card-slider__next {
  position: absolute;
  z-index: 10;
  transform: translateY(-50%);
}

/* Mobile / Tablet / Desktop blocks setting --slides, --gap and top: calc(...) */
@media (max-width: 39.99em) {
  .video-tiles-slider { --slides: 1; --gap: 1rem; }
  .video-tiles-slider .card-slider__prev,
  .video-tiles-slider .card-slider__next {
    top: calc(((100cqw - (var(--slides) - 1) * var(--gap)) / var(--slides)) / 2);
  }
  .video-tiles-slider .card-slider__prev { left: 32px; }
  .video-tiles-slider .card-slider__next { right: 32px; }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .video-tiles-slider { --slides: 2; --gap: 1rem; }
  .video-tiles-slider .card-slider__prev,
  .video-tiles-slider .card-slider__next {
    top: calc(((100cqw - (var(--slides) - 1) * var(--gap)) / var(--slides)) / 2);
  }
  .video-tiles-slider .card-slider__prev { left: 32px;}
  .video-tiles-slider .card-slider__next { right: 32px; }
}
@media (min-width: 64em) {
  .video-tiles-slider { --slides: 3; --gap: 1rem; }
  .video-tiles-slider .card-slider__prev,
  .video-tiles-slider .card-slider__next {
    top: calc(((100cqw - (var(--slides) - 1) * var(--gap)) / var(--slides)) / 2);
  }
  .video-tiles-slider .card-slider__prev { left: 32px; }
  .video-tiles-slider .card-slider__next { right: 32px;}
}
#hardwareFeatures .spec-item{
  grid-gap: 3em;
}

#transportation {
  display: flex;
  flex-direction: column;
  row-gap: 3em;
}

#transportation > .spec-item{
    row-gap: 1.5em;
}

#lighting-controls{
    height: 36em;
    width: 100%;
    padding: 0;
}



.spec-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 18em;
  background: linear-gradient(
      206deg,
      rgba(255, 160, 255, 0.2) 3.28%,
      rgba(1, 112, 217, 0.2) 80.07%
    ),
    #1a1a1a;
  padding: 1rem;
  border-radius: 8px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.spec-image img {
    display: block;
    width: 80%;
    height: 80%;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
  }



.spec-item {
  display: grid;
  grid-template-columns: 1fr;
}

.spec-item .spec-image {
    grid-column: 1 / -1;
  }

.spec-title {
  font-size: 1.5rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  line-height: var(--line-height-base);
}

.spec-description {
  font-size: 1rem;
  font-weight: 400;
  font-weight: var(--font-weight-normal);
  line-height: 1.22;
  line-height: var(--line-height-snug);
  color: rgba(255, 255, 255, 0.65);
}

.spec-data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.spec-data > li {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }

.spec-data .spec-data__label {
    color: white;
  }

.spec-data .spec-data__value {
    color: rgba(255, 255, 255, 0.65);
  }

@media (min-width: 48em) {
  .spec-item {
    grid-template-columns: 1fr 1fr;
/*     gap: 4rem;
    gap: var(--sp-9); */

    .spec-image {
      height: 28em; 
      padding: 3em;
    }
    
  }
  .spec-image {
    aspect-ratio: 1.22;
  }
  .spec-title {
    font-size: 2rem;
  }
  .spec-description {
    font-size: 1.125rem;
  }
}
.exhibition {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid white;
  padding-bottom: 3rem;
   margin-bottom: 3rem;
}



.exhibition__hero {
  flex: 1 0 100%;
}

.exhibition__main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  gap: var(--gap-content-section-md);
  flex: 1;
}

.exhibition__header {
  flex: 1 0 100%;
}

.exhibition__title {
  font-size: 2rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  line-height: var(--line-height-tight);
}

.exhibition__title:has(+ *) {
    margin-bottom: 1rem;
    margin-bottom: var(--sp-3);
  }

.exhibition__description {
  font-size: 1.25rem;
  line-height: 1.3;
  line-height: var(--line-height-base);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}

@media (min-width: 48em) {
  .exhibition {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.5rem;
    gap: var(--gap-content-section-lg);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }

  .exhibition__main {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .exhibition__header {
    flex: 1;
  }

  .exhibition__content {
    flex: 2;
  }
  
  
}
:root {
  --form-input-background: #191919;
  --form-input-borderColor: #8C8C8C;
}


form {
  display: block;
  max-width: 700px;
  margin: 0 auto;
}


form .field  {
  margin-bottom: 1rem;
}


/* Labels */
form label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: var(--font-weight-normal);
  margin-bottom: 0.5625em;
}

form input {
  margin-bottom: 0.3125rem;
}

/* Text inputs */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form textarea,
form select {
  background-color: var(--form-input-background);
  border: 1px solid var(--form-input-borderColor);
  border-radius: var(--border-radius);
  padding: 0.888889em  1em;
  font-size: 1.125em;
  color: #ffffff;
  outline: none;
  width: 100%;
  appearance: none;
}

.hs-field-desc{
  margin-bottom: .8em;
}


form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: 2.5rem;
  width: 100%;
}

form textarea {
  height: 150px;
}

/* Button inputs */
form input[type="submit"],
form input[type="button"] {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  border: none;
  border-radius: 0.5rem;
  font-family: "Poppins", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  background-color: #0170D9;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  line-height: 0.9;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.25rem;
  padding: 0.75em;
}

form input[type="submit"]:hover,
form input[type="button"]:hover {
  background: #00529f;
}

form input[type="submit"]:disabled,
form input[type="button"]:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}



/* Input focus state */
form input:focus,
form select:focus,
form textarea:focus {
    border-color: #0170D9;
}

/* Input hover state */
form input:hover,
form select:hover,
form textarea:hover {
    border-color: #FFFFFF;
}

/* Placeholder text */
form input::placeholder,
form textarea::placeholder {
    color: #888888;
}

/* Select placeholder option */
form select option:first-child {
    color: #888888;
}

form select option {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Error/validation states */

form input[type="text"].invalid,
form input[type="text"].error,
form input[type="email"].invalid,
form input[type="email"].error,
form input[type="password"].invalid,
form input[type="password"].error,
form input[type="tel"].invalid,
form input[type="tel"].error,
form input[type="url"].invalid,
form input[type="url"].error,
form input[type="number"].invalid,
form input[type="number"].error,
form textarea.invalid,
form textarea.error,
form select.invalid,
form select.error {
  border-color: #D92D20;
}

form .hs-error-msg {
    font-size: 0.875rem;
    color: #D92D20;
}

/* Disabled states */
form input:disabled,
form select:disabled,
form textarea:disabled {
    background-color: #0f0f0f;
    border-color: #222222;
    color: #666666;
    cursor: not-allowed;
}

/* Hubspot Radio */
.hs-form-radio-display {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);;
  display: grid;
  grid-template-columns: 1.5625rem auto;
  gap: 0.8rem;
}

input[type="radio"]:focus,
.hs-form-radio-display:hover input[type="radio"] {
  border: 2px solid white;
}

.hs-form-radio-display + .hs-form-radio-display {
  margin-top: 1em;
}

input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: black;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: black;
  width: 1.5625rem;
  height: 1.5625rem;
  border: 1px solid white;
  border-radius: 50%;
  transform: translateY(-2px);
  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  border-radius: 50%;
  box-shadow: inset 1rem 1rem #fff;
  content: "";
  height: 0.8125rem;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  width: 0.8125rem;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

.submitted-message {
    text-align: center;
    font-size: 1.5em;
    font-weight: 300;
    line-height: normal;
}
:root {
  --footer-text-color: rgba(255, 255, 255, 0.6);
}
/* 
 * Mobile-First Footer Styles
 * Designed to match the provided mobile layout
 */

/* CTA Section */
.footer__cta {
  position: relative;
  margin: 4.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 0.566;
}

.footer__cta-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer__cta-title {
  color: #fff;
  font-size: 1.75rem; /* 28px */
  line-height: 1.24;
  margin-bottom: 1.5rem;
  margin-bottom: var(--sp-5);
  width: 80%;
  text-shadow: 0 0 44px rgba(0, 0, 0, 0.80);
}

.footer__cta-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer__cta-background object {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

.footer__cta-background-horizontal {
  display: none;
}

/* Main Footer Section */
.footer__main {
  border-width: 1px;
  border-style: solid;
  padding: 3rem 0;
  padding: var(--sp-7) 0;
  border-image-width: 1;
  border-image-source: linear-gradient(
    to right,
    #faa800 0%,
    #0170d9 59.97%,
    #ffa0ff 100%
  );
  border-image-slice: 1 0 0 0;
}

/* Brand Section */
.footer__brand {
  margin-bottom: 4.5rem;
  margin-bottom: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--sp-6);
}

.footer__logo img {
    width: 8rem; /* 128px */
    height: auto;
  }

.footer__copyright {
  color: rgba(255, 255, 255, 0.6);
  color: var(--footer-text-color);
}

.footer__copyright p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

.footer__legal a {
    color: rgba(255, 255, 255, 0.6);
    color: var(--footer-text-color);
    text-decoration: underline;
    font-size: 1.125rem;
    margin-right: 1em;
    transition: color 0.2s ease;
  }

.footer__legal a:hover {
      color: #fff;
    }

.footer__certifications {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.footer__certifications img {
    height: 3rem;
    width: auto;
    transition: opacity 0.2s ease;
  }

.footer__social-link img:hover {
  opacity: 0.8;
}

/* Navigation Columns */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer__nav-title {
  font-size: 1rem;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: #fff;
  text-transform: uppercase;
}

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

.footer__nav-list li {
  margin-bottom: 1rem;
}

.footer__nav-list a {
  color: rgba(255, 255, 255, 0.6);
  color: var(--footer-text-color);
  text-decoration: none;
  font-size: 1.125rem;
  transition: color 0.2s ease;
  line-height: 1.5;
}

.footer__nav-list a .icon {
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }

.footer__nav-list a:hover {
  color: #fff;
}

.footer__nav-list a:hover .icon {
    opacity: 1;
  }

@media (min-width: 36em) {
  .footer__cta {
    aspect-ratio: 1.5885;
  }

  .footer__cta-background-horizontal {
    display: block;
  }

  .footer__cta-background-vertical {
    display: none;
  }
}

/* Desktop Styles */
@media (min-width: 48em) {
  .footer__cta-title {
    font-size: 3.5rem; /* 56px */
    width: 100%;
    padding: 0 3em .2em 3em;
  }

  .footer__main {
    display: flex;
    padding: 4.5rem 0;
    padding: var(--sp-10) 0;
    margin: 0 auto;
    gap: 3rem;
  }

  .footer__brand {
    flex: 1;
    border-bottom: 0;
    padding-bottom: 0;
    padding-right: 2rem;
    margin-bottom: 0;
  }

  .footer__nav {
    flex: 2;
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__nav-item {
    flex: 1;
  }
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/



/* --- Mobile (default) --- */
/* 2-up grid, each logo = 50% of device width, 80px tall, keep aspect ratio */


/* --- Mobile (default) --- */
/* 2-up grid, each logo = 50% of device width, 80px tall, keep aspect ratio */

    .logo-section {
      
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }


.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centers last row if odd count */
  row-gap: 1rem; 
}

.logo-cell {
  box-sizing: border-box;
  flex: 0 0 50%;             /* 2 columns */
  height: 100px;              /* fixed logo row height */
/*   padding: 8px;               */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-cell img {
  height: 100%;              /* lock height to 80px (via cell) */
  width: auto;               /* preserve aspect ratio */
  max-width: 150px;           /* prevent overflow for ultra-wide marks */
  display: block;
}



    /* Tablet Desktop */
    @media (min-width: 768px) {


    .logo-section {
      max-width: 1440px;
      margin: 0 auto;
      text-align: center;
    }

         /* Flex-based logo wrapper */
    .logo-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2em; /* spacing between logos */
    }

    /* Logo cell: width auto, fixed height */
    .logo-cell {
      flex: 0 0 auto;          /* width adapts to content */
      height: 100px;        
      padding: 0 3em;
/*       border: 2px dashed #fff; 
      background-color: #ff0033; */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }


    /* Logos: fixed height, variable width */
    .logo-cell img {
      height: 100%;  
      max-width: 200px; 
      display: block;
    }
      
}
/* ================================
   Logo Marquee — Full CSS (shrink-to-fit width)
   ================================ */
:root{
  /* Desktop defaults (>=768px) */
  --logo-gap: 70px;          /* spacing between logos and at the seam */
  --logo-max-w: 200px;       /* max width a logo may occupy */
  --logo-max-h: 100px;       /* max height a logo may occupy */
  --edge-fade: 120px;        /* width of edge masks */
  /* Set by JS for smooth, exact looping (fallbacks shown) */
  --duration: 35s;
  --distance: 600px;
}

/* Container + viewport */
.logo-marquee{
  background:#000;
  width:100%;
}
.logo-marquee__viewport{
  position:relative;
  overflow:hidden;
}

/* Edge fades to black */
.logo-marquee__viewport::before,
.logo-marquee__viewport::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:var(--edge-fade);
  pointer-events:none;
  z-index:2;
}
.logo-marquee__viewport::before{
  left:0;
  background:linear-gradient(to right, #000, rgba(0,0,0,0));
}
.logo-marquee__viewport::after{
  right:0;
  background:linear-gradient(to left, #000, rgba(0,0,0,0));
}

/* Moving track — JS sets --distance & --duration */
.logo-marquee__track{
  display:flex;
  gap:var(--logo-gap);             /* seam gap between duplicated sets */
  width:max-content;
  will-change:transform;
  animation:marquee var(--duration) linear infinite;
}
@keyframes marquee{
  to{ transform: translate3d(calc(-1 * var(--distance)), 0, 0); }
}

/* One logical set (internal gaps between items) */
.logo-marquee__set{
  display:flex;
  align-items:center;
  gap:var(--logo-gap);
}

/* Logo slide:
   - height fixed (caps at 100px)
   - width auto (shrinks to content), but never exceeds 200px
*/
.logo-item{
  margin:0;                        /* reset <figure> margins */
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--logo-max-h);
  width:auto;
  max-width:var(--logo-max-w);
  flex:0 0 auto;                   /* keep natural width; don't flex-grow/shrink */
  box-sizing:border-box;
}

/* Image fills vertically, width follows aspect ratio; also capped by max width */
.logo-item img{
  display:block;
  height:100%;
  width:auto;                      /* ← lets width shrink for square/circle logos */
  max-width:100%;                  /* respect the slide's max-width */
  object-fit:contain;
}

/* Pause on hover */
.logo-marquee__viewport:hover .logo-marquee__track{
  animation-play-state:paused;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-marquee__track{ animation:none; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px){
  .logo-marquee{
    --logo-gap: 50px;
    --logo-max-w: 180px;
    --logo-max-h: 80px;
  }
}