/*             Contents
-------------------------------------------------

1.  Basic
2.  Typography
3.  Padding - Margin - Height
4.  Positions
5.  Preload
6.  Navigation Menu
7.  Cursor
8.  Slider
9.  Image Overlay
10. Video
11. Parallax
12. Animation Fade / Zoom
13. Horizontal Scrolling
14. Scale Scrolling
15. Split Text
16. Reveal Image
17. Lightbox
18. Image Hover Effect
19. Counter
20. Box Table
21. Acordion
22. List
23. Drag Slider
24. Line Bar
25. Sponsor
26. Footer

------------------------------------------------- */

html { scrollbar-gutter: stable; }


.btn-outline{
  display: inline-flex;                 /* required */
  align-items: center;                  /* vertical centering */
  justify-content: center;              /* horizontal centering */

  padding: 0.7rem 1.25rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;

  text-align: center;
  line-height: 1.2;

  transition: background 150ms ease,
              transform 80ms ease,
              color 150ms ease;
}

/* Hover/keyboard focus */
.btn-outline:hover,
.btn-outline:focus-visible {
  background: rgba(255,255,255,0.4);  /* slight white tint on hover */
  outline: none;
  border: 1px solid #c0b5a4;
  color: rgba(192,181,164,1.0);
}

/* Active press feedback */
.btn-outline:active {
  transform: translateY(1px);
}

/* Disabled (works on <button disabled>) */
.btn-outline:disabled,
.btn-outline[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Optional: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn-outline { transition: none; }
}


.btn-outline-2 {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border: 2px solid #000000;           /* whiteblack border */
  background: transparent;          /* transparent fill */
  color: #000000;                      /* black text */
  border-radius: 8px;               /* rectangular with subtle rounding */
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;
  transition: background 150ms ease, transform 80ms ease, color 150ms ease;
}

/* Hover/keyboard focus */
.btn-outline-2:hover,
.btn-outline-2:focus-visible {
  background: rgba(255,255,255,0.5);  /* slight white tint on hover */
  outline: none;
  border: 2px solid #c0b5a4;
  color: rgba(192,181,164,1.0);
}

/* Active press feedback */
.btn-outline-2:active {
  transform: translateY(1px);
}

/* Disabled (works on <button disabled>) */
.btn-outline-2:disabled,
.btn-outline-2[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Optional: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn-outline-2 { transition: none; }
}


#Nexus .parallax-img img {
  position: static;
  width: 100%;
  height: auto;        /* allow natural aspect scaling */
  object-fit: contain; 
}

/* 1) Let the hero background ignore the mouse so :hover can reach the button */
#home .slide-img { 
  pointer-events: none;
}

/* 2) Ensure the text/CTA sits above any backgrounds just in case */
#home .slide-wrap,
#home .slide-title,
#home .slide-title-1,
#home .slide-title-2,
#home .slide-title-3,
#home .slide-desc,
#home .btn-outline {
  position: relative;
  z-index: 2;
}


/* Enable smooth scrolling for all menu types */
.js-nav-active .nav-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Core menu container */
.nav-v {
  position: relative;
  height: 100%;

  display: flex;
  flex-direction: column;

  /* start at top + align left */
  justify-content: flex-start;
  align-items: center;
  text-align: left;

  padding: 90px 20px 40px;
  box-sizing: border-box;
}

/* Keep "Home" visible on short windows */
@media (max-height: 700px) {
  .nav-v {
    justify-content: flex-start !important;
    padding-top: 130px !important;
    padding-bottom: 48px !important;
  }
}

/* Fix for submenus if you want independent scrolling behavior */
.nav-v.submenu {
  align-items: center;         /* keep items centered horizontally */
  justify-content: flex-start;     /* keep visual v-align top */
  padding: 170px 24px 40px;          /* consistent padding */
  overflow-y: auto;            /* scroll when too long */
  height: 100%;
  box-sizing: border-box;
}

/* Tighter spacing for small screens (mobile + short viewports) */
@media (max-height: 700px), (max-width: 600px) {

  /* Primary menu */
  .nav-v {
    padding: 72px 16px 40px;
    max-height: calc(100vh - 72px);
    justify-content: flex-start;
  }

  /* Submenu: extra top padding so content starts BELOW the back arrow */
  .nav-v.submenu {
    padding: 145px 16px 40px;          
    max-height: calc(100vh - 120px);
    justify-content: flex-start;
  }
}

/* Optional: prevent wheel/touch scroll from leaking to page behind */
.js-nav-active {
  overscroll-behavior: contain;
}

/* Move the entire Accessories text block upward */
#accessories .drag-gallery-wrap:first-child {
  transform: translateY(-100px);   /* adjust -80px to fine-tune */
  padding-left: 20px;             /* adds space from the left edge */
}

/* Ensure animations or transforms don't clash */
#accessories .drag-gallery-wrap:first-child,
#accessories .drag-gallery-wrap:first-child * {
  will-change: transform;
}

/* Optional: smooth responsiveness */
@media (max-width: 992px) {
  #accessories .drag-gallery-wrap:first-child {
    transform: translateY(-50px);
    padding-left: 20px;
  }
}


/* === Fix "Value" color + centering in #products === */
#products .title-bg-2 {
  color: var(--dark-5) !important;      /* dark grey, not white */
  text-align: center;
  line-height: 1;
  -webkit-text-fill-color: initial;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

@media (max-width: 768px) {
  /* Scale down "Value" */
  #products .title-bg-2 {
    font-size: 22vw !important;
    letter-spacing: -0.5vw;
  }
}



/* =========================================
   PRODUCTS: Text overlay  match other overlays
   ========================================= */

/* Match overlay heading behavior (and neutralize offset-2) */
#products .text-absolute h3 {
  text-align: center;
  margin-left: 0 !important; /* override offset-2 effect */
}

/* Second-line spacing (same system youre using elsewhere) */
#products .text-absolute .fs-10 {
  display: inline-block;
  margin-top: clamp(20px, 6vw, 100px);
}

/* Mobile: only scale the big background word */
@media (max-width: 768px) {
  #products .title-bg-2 {
    font-size: 22vw !important;
    letter-spacing: -0.5vw;
  }
}

/* PRODUCTS: isolate overlay alignment to the title area */
#products .products-title-wrap {
  min-height: 220px; /* tweak if needed (e.g. 200280) */
}





/* === Fix "Value" color + centering in #rfid === */
#rfid .title-bg-3 {
  color: var(--dark-5) !important;
  text-align: center;
  line-height: 1;
  -webkit-text-fill-color: initial;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

@media (max-width: 768px) {
  /* Scale down "Value" */
  #rfid .title-bg-3 {
    font-size: 22vw !important;
    letter-spacing: -0.5vw;
  }

  /* Overlay text (The Easylube rfid / Delivering) centered OVER "Value" */
  #rfid .text-absolute {
    position: absolute !important;       /* keep it overlaying */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;  /* center over Value */
    width: 100%;
    text-align: center !important;
    z-index: 2;                           /* above the big word */
  }

  #rfid .text-absolute h3 {
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Remove desktop offset that pushes it right */
  #rfid .text-absolute .offset-2 {
    margin-left: 0 !important;
  }
}

/* Push the horizontal scroller down without moving the overlay */
#rfid .js-scroll-horiz {
  position: relative;     /* stays in flow, but we can offset it */
  top: 25px;
}



/*---------------- 1. Basic ----------------*/

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Thin.woff2") format("woff2"),
       url("../fonts/Montserrat-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Light.woff2") format("woff2"),
       url("../fonts/Montserrat-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"),
       url("../fonts/Montserrat-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2"),
       url("../fonts/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"),
       url("../fonts/Montserrat-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"),
       url("../fonts/Montserrat-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.woff2") format("woff2"),
       url("../fonts/Montserrat-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


:root {
  --light-1: #ffffff;
  --light-2: #fff;
  --light-3: #ddd;
  --light-4: #eee;
  --dark-1: #000;
  --dark-2: #222;
  --dark-3: #0C0C0C;
  --dark-4: #1e1e1e;
  --dark-5: #444444;
  --brown-1: #c0b5a4;
  --brown-2: #917655;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-italic: italic;
  --fs-s1: 0.813rem;
  --fs-0: 1.1rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: calc(1.275rem + 0.3vw);
  --fs-4: calc(1.3rem + 0.6vw);
  --fs-5: calc(1.325rem + 0.9vw);
  --fs-6: calc(1.6rem + 1.5vw);
  --fs-h6: clamp(1.13rem, 1.28vw + 0.87rem, 3.94rem);
  --fs-h5: clamp(1.33rem, 1.78vw + 0.97rem, 5.25rem);
  --fs-h4: clamp(1.56rem, 2.47vw + 1.07rem, 7rem);
  --fs-h3: clamp(1.83rem, 3.41vw + 1.15rem, 9.33rem);
  --fs-h2: clamp(2.14rem, 4.68vw + 1.2rem, 12.43rem);
  --fs-h1: clamp(2.48rem, 6.41vw + 1.2rem, 16.57rem);
}

* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Make the scroll TRACK invisible so the �active scrollbar� doesn�t flash */
html {
  scrollbar-color: var(--brown-1) transparent; /* thumb, track */
  scrollbar-width: thin;
}

/* WebKit/Blink (Chrome/Safari/Edge) */
body::-webkit-scrollbar {
  width: 6px;                 /* 3px can look glitchy/flashy */
  background: transparent;    /* track */
}

body::-webkit-scrollbar-track {
  background: transparent;    /* track */
}

body::-webkit-scrollbar-thumb {
  background-color: var(--brown-1);
  border-radius: 999px;
  border: 2px solid transparent; /* keeps thumb slim without showing track */
  background-clip: padding-box;
}


body {
  background-color: var(--dark-1);
  color: var(--light-1);
  font-family: var(--font-body);
  font-size: 0.938rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-weight: 200;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
}

#smooth-content {
  will-change: transform;
  overflow-x: hidden !important
}

a {
  color: var(--light-1);
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a:hover,
a:focus {
  color: currentColor;
  outline: none;
}

span {
  display: inline-block;
}

ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic;
}

svg {
  fill: currentColor;
}

.ol-dark-top,
.ol-dark-bottom {
  position: fixed;
  left: 0;
  height: 14vh;
  width: 100%;
  z-index: 30;
  pointer-events: none;
}

.ol-dark-top {
  top: 0;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.986) 8%, rgba(0, 0, 0, 0.950) 15.4%, rgba(0, 0, 0, 0.9) 22.4%, rgba(0, 0, 0, 0.82) 28.9%, rgba(0, 0, 0, 0.743) 35.2%, rgba(0, 0, 0, 0.65) 41.1%, rgba(0, 0, 0, 0.55) 47%, rgba(0, 0, 0, 0.45) 52.8%, rgba(0, 0, 0, 0.35) 58.9%, rgba(0, 0, 0, 0.26) 64.6%, rgba(0, 0, 0, 0.18) 69.9%, rgba(0, 0, 0, 0.1) 77.4%, rgba(0, 0, 0, 0.05) 84.4%, rgba(0, 0, 0, 0.01) 91.82%, rgba(0, 0, 0, 0) 100%);
}

.ol-dark-bottom {
  bottom: 0;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.986) 8%, rgba(0, 0, 0, 0.950) 15.4%, rgba(0, 0, 0, 0.9) 22.4%, rgba(0, 0, 0, 0.82) 28.9%, rgba(0, 0, 0, 0.743) 35.2%, rgba(0, 0, 0, 0.65) 41.1%, rgba(0, 0, 0, 0.55) 47%, rgba(0, 0, 0, 0.45) 52.8%, rgba(0, 0, 0, 0.35) 58.9%, rgba(0, 0, 0, 0.26) 64.6%, rgba(0, 0, 0, 0.18) 69.9%, rgba(0, 0, 0, 0.1) 77.4%, rgba(0, 0, 0, 0.05) 84.4%, rgba(0, 0, 0, 0.01) 91.82%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 768px) { 
  .ol-dark-top,
  .ol-dark-bottom { 
    display: none
  }
}

.border-dark { border: 1px solid #111 !important }
.border-light { border: 1px solid #eee !important }
.rounded-4 { border-radius: 2.5rem }

.z-index--10 { z-index: -10 }
.z-index--1 { z-index: -1 }
.z-index-0 { z-index: 0 }
.z-index-1 { z-index: 1 }
.z-index-2 { z-index: 2 }
.z-index-10 { z-index: 10 }

/* =========================================
   Global Text Overlay (default behavior)
   ========================================= */

.text-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* NEW: content alignment */
  text-align: center;
}

/* Neutralize bootstrap offsets inside overlays */
.text-absolute h3 {
  margin-left: 0;
}

/* Global second-line spacing for overlay headings */
.text-absolute .fs-10 {
  display: inline-block;
  margin-top: clamp(20px, 6vw, 80px);
}


/*---------------- 2. Typography ----------------*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 200;
  line-height: 1.15;
  will-change: transform;
}

h1, .h1 { font-size: var(--fs-h1) }
h2, .h2 { font-size: var(--fs-h2) }
h3, .h3 { font-size: var(--fs-h3) }
h4, .h4 { font-size: var(--fs-h4) }
h5, .h5 { font-size: var(--fs-h5) }
h6, .h6 { font-size: var(--fs-h6) }

p { 
  font-family: var(--font-montserrat);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 1rem;
  will-change: transform;
}

i { font-style: normal }

.ff-1 { font-family: var(--font-body) }
.ff-2 { font-family: var(--font-montserrat) }

.fs-italic { font-style: var(--font-italic) }

.fc-dark-1 { color: var(--dark-1) !important }
.fc-dark-2 { color: var(--dark-2) !important }
.fc-dark-3 { color: var(--dark-3) !important }
.fc-dark-4 { color: var(--dark-4) !important }
.fc-dark-5 { color: var(--dark-5) !important }
.fc-light-1 { color: var(--light-1) !important }
.fc-light-2 { color: var(--light-2) !important }
.fc-light-3 { color: var(--light-3) !important }
.fc-light-4 { color: var(--light-4) !important }
.fc-brown-1 { color: var(--brown-1) !important }
.fc-brown-2 { color: var(--brown-2) !important }

.fs-s1 { font-size: var(--fs-s1) !important }
.fs-0 { font-size: var(--fs-0) !important }
.fs-1 { font-size: var(--fs-1) !important }
.fs-2 { font-size: var(--fs-2) !important }
.fs-3 { font-size: var(--fs-3) !important }
.fs-4 { font-size: var(--fs-4) !important }
.fs-5 { font-size: var(--fs-5) !important }
.fs-6 { font-size: var(--fs-6) !important }
.fs-1a { font-size: 1vw !important }
.fs-3a { font-size: 3vw !important }
.fs-4a { font-size: 4vw !important }
.fs-5a { font-size: 5vw !important }
.fs-6a { font-size: 6vw !important }
.fs-7 { font-size: 7vw !important }
.fs-8 { font-size: 8vw !important }
.fs-9 { font-size: 9vw !important }
.fs-10 { font-size: 10vw !important }
.fs-11 { font-size: 11vw !important }
.fs-12 { font-size: 12vw !important }
.fs-13 { font-size: 13vw !important }
.fs-14 { font-size: 14vw !important }
.fs-15 { font-size: 15vw !important }
.fs-16 { font-size: 16vw !important }
.fs-17 { font-size: 17vw !important }
.fs-18 { font-size: 18vw !important }
.fs-19 { font-size: 19vw !important }
.fs-20 { font-size: 20vw !important }
.fs-22 { font-size: 22vw !important }
.fs-25 { font-size: 25vw !important }
.fs-30 { font-size: 30vw !important }
.fs-44 { font-size: 44vw !important }
.fs-50 { font-size: 50vw !important }

.fw-100 { font-weight: 100 }
.fw-200 { font-weight: 200 }
.fw-300 { font-weight: 300 }
.fw-350 { font-weight: 350 }
.fw-400 { font-weight: 400 }
.fw-500 { font-weight: 500 }
.fw-700 { font-weight: 700 }
.fw-800 { font-weight: 800 }
.fw-900 { font-weight: 900 }
.fw-bold { font-weight: 700 }
.fw-normal { font-weight: 400 }

.f-stroke-w {
  -webkit-text-stroke: 1px var(--light-1);
  -webkit-text-fill-color: transparent;
}

.f-stroke-d {
  -webkit-text-stroke: 1px var(--dark-1);
  -webkit-text-fill-color: transparent;
}

.text-gradient-1 *,
.text-gradient-2 *,
.text-gradient-3 *,
.text-gradient-4 *,
.text-gradient-1,
.text-gradient-2,
.text-gradient-3,
.text-gradient-4 {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.text-gradient-1 *,
.text-gradient-1 {
  background-image: linear-gradient(180deg, #000000 0, transparent 70%);
}

.text-gradient-2 *,
.text-gradient-2 {
  background-image: linear-gradient(360deg, #000000 0, transparent 70%);
}

.text-gradient-3 *,
.text-gradient-3 {
  background-image: linear-gradient(180deg, #705A42 0, transparent 90%);
}

.text-gradient-4 *,
.text-gradient-4 {
  background-image: linear-gradient(360deg, #705A42 0, transparent 90%);
}

.intro-text-1,
.intro-text-2 {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.intro-text-1 {
  top: 50%;
  text-align: center;
}

.intro-text-2 {
  top: 88%;
}

.title-1 {
  font-size: calc( 3rem + 0vw );
}

.title-2 {
  font-size: calc( 2rem + 0vw );
}

.title-3 {
  font-size: calc( 1.5rem + 0vw );
}

@media (max-width: 992px) {
  .intro-text-2 {
    top: 65%;
  }
   
  .title-1 {
    font-size: calc( 2.2rem + 0vw );
  }
   
  .title-2 {
    font-size: calc( 1.5rem + 0vw );
  }
   
  .title-3 {
    font-size: calc( 1.3rem + 0vw );
  }
}

.title-bg-1 {
  font-size: 35vw;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -1vw;
  color: var(--dark-4)
}

.title-bg-2 {
  font-size: 35vw;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -1vw;
  color: var(--dark-5)
}

.title-bg-3 {
  font-size: 20vw;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -1vw;
  color: var(--dark-5)
}

.link-1 {
  color: currentColor;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease-in-out;
}

.link-1::before,
.link-1::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}

.link-1::before {
  content: "";
}

.link-hover-1::before {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}

.link-hover-1:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}


.link-2 {
  color: currentColor;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease-in-out;
}

.link-2::before,
.link-2::after {
  position: absolute;
  width: 0%;
  height: 0px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}

.link-2::before {
  content: "";
}

.link-hover-2::before {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}

.link-hover-2:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}



/*---------------- 3. Padding - Margin - Height  ----------------*/

.m-section-100 { margin-bottom: 6.5rem }
.m-section-150 { margin-bottom: 10rem }
.m-section-200 { margin-bottom: 12.5rem }
.mt-6 { margin-top: 3.75rem }
.mt-7 { margin-top: 4.5rem }
.mt-8 { margin-top: 6rem }
.mt-9 { margin-top: 7.5rem }
.mt-10 { margin-top: 10rem }
.mt-11 { margin-top: 12rem }
.mt-12 { margin-top: 15rem }
.mb-6 { margin-bottom: 3.75rem }
.mb-7 { margin-bottom: 4.5rem }
.mb-8 { margin-bottom: 6rem }
.mb-9 { margin-bottom: 7.5rem }
.mb-10 { margin-bottom: 10rem }
.mb-11 { margin-bottom: 12rem }
.mb-12 { margin-bottom: 15rem }

.p-6 { padding: 4.5rem }
.pt-6 { padding-top: 3.75rem }
.pt-7 { padding-top: 4.5rem }
.pt-8 { padding-top: 6rem }
.pt-9 { padding-top: 7.5rem }
.pt-10 { padding-top: 9.4rem }
.pt-11 { padding-top: 12rem }
.pt-12 { padding-top: 15rem }
.pt-13 { padding-top: 18.75rem }
.pb-6 { padding-bottom: 3.75rem }
.pb-7 { padding-bottom: 4.38rem }
.pb-8 { padding-bottom: 6.25rem }
.pb-9 { padding-bottom: 7.5rem }
.pb-10 { padding-bottom: 9.4rem }
.pb-11 { padding-bottom: 12.5rem }
.pb-12 { padding-bottom: 15rem }
.pb-13 { padding-bottom: 18.75rem }

.vh-10 { height: 10vh !important }
.vh-15 { height: 15vh !important }
.vh-20 { height: 20vh !important }
.vh-25 { height: 25vh !important }
.vh-30 { height: 30vh !important }
.vh-35 { height: 35vh !important }
.vh-40 { height: 40vh !important }
.vh-45 { height: 45vh !important }
.vh-50 { height: 50vh !important }
.vh-55 { height: 55vh !important }
.vh-60 { height: 60vh !important }
.vh-65 { height: 65vh !important }
.vh-70 { height: 70vh !important }
.vh-75 { height: 75vh !important }
.vh-80 { height: 80vh !important }
.vh-85 { height: 85vh !important }
.vh-90 { height: 90vh !important }
.vh-95 { height: 95vh !important }
.vh-100 { height: 100vh !important }
.vh-110 { height: 110vh !important }
.vh-120 { height: 120vh !important }
.vh-150 { height: 150vh !important }
.vh-200 { height: 200vh !important }
.h-90 { height: 90% !important }
.h-104 { height: 104% !important }
.h-105 { height: 105% !important }
.h-110 { height: 110% !important }
.h-120 { height: 120% !important }
.h-130 { height: 130% !important }
.h-140 { height: 140% !important }
.h-150 { height: 150% !important }
.h-160 { height: 160% !important }
.h-170 { height: 170% !important }
.h-10vw { height: 10vw !important }
.h-20vw { height: 20vw !important }
.h-30vw { height: 30vw !important }
.h-40vw { height: 40vw !important }
.h-50vw { height: 50vw !important }
.h-65vw { height: 65vw !important }
.h-70vw { height: 70vw !important }
.h-80vw { height: 80vw !important }

.w-15 { width: 15% !important }
.w-30 { width: 30% !important }
.w-40 { width: 40% !important }
.w-60 { width: 60% !important }
.w-70 { width: 70% !important }
.w-80 { width: 80% !important }
.w-90 { width: 90% !important }

.mw-200 { max-width: 200px }
.mw-250 { max-width: 250px }
.mw-300 { max-width: 300px }
.mw-375 { max-width: 375px }
.mw-400 { max-width: 400px }
.mw-500 { max-width: 500px }
.mw-600 { max-width: 600px }
.mw-700 { max-width: 700px }
.mw-800 { max-width: 800px }

.maxw-200 { max-width: 200px; width: 100%; margin: 0 auto; }
.maxw-250 { max-width: 250px; width: 100%; margin: 0 auto; }
.maxw-300 { max-width: 300px; width: 100%; margin: 0 auto; }
.maxw-375 { max-width: 375px; width: 100%; margin: 0 auto; }
.maxw-400 { max-width: 400px; width: 100%; margin: 0 auto; }
.maxw-500 { max-width: 500px; width: 100%; margin: 0 auto; }
.maxw-600 { max-width: 600px; width: 100%; margin: 0 auto; }
.maxw-700 { max-width: 700px; width: 100%; margin: 0 auto; }
.maxw-800 { max-width: 800px; width: 100%; margin: 0 auto; }

@media (max-width: 768px) { 
  .m-section-100 { margin-bottom: 5rem }
  .m-section-150 { margin-bottom: 7rem }
  .m-section-200 { margin-bottom: 9rem }
  .mt-6 { margin-top: 2.75rem }
  .mt-8 { margin-top: 5rem }
  .mt-9 { margin-top: 6rem }
  .mt-10 { margin-top: 7rem }
  .mt-11 { margin-top: 9rem }
  .mt-12 { margin-top: 11rem }
  .mb-6 { margin-bottom: 2.75rem }
  .mb-8 { margin-bottom: 5rem }
  .mb-9 { margin-bottom: 6rem }
  .mb-10 { margin-bottom: 7rem }
  .mb-11 { margin-bottom: 9rem }
  .mb-12 { margin-bottom: 11rem }
  .no-mobile { display: none }
}

@media (max-width: 576px) { 
  .m-section-100 { margin-bottom: 4rem }
  .m-section-150 { margin-bottom: 6rem }
  .m-section-200 { margin-bottom: 8rem }
  .mt-6 { margin-top: 2rem }
  .mt-8 { margin-top: 2rem }
  .mt-9 { margin-top: 2rem }
  .mt-10 { margin-top: 2rem }
  .mt-11 { margin-top: 2rem }
  .mt-12 { margin-top: 2rem }
  .mb-6 { margin-bottom: 2rem }
  .mb-8 { margin-bottom: 2rem }
  .mb-9 { margin-bottom: 2rem }
  .mb-10 { margin-bottom: 2rem }
  .mb-11 { margin-bottom: 2rem }
  .mb-12 { margin-bottom: 2rem }
}

/*---------------- 4. Positions ----------------*/

.align-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-c {
  display: flex;
  align-items: center;
}

.align-ce {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.align-cs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.align-ss {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.align-jc {
  display: flex;
  justify-content: center;
}

.align-ic {
  display: flex;
  align-items: center;
}

.align-ie {
  display: flex;
  align-items: flex-end;
}

.align-jb {
  display: flex;
  justify-content: space-between;
}

/*---------------- 5. Preload ----------------*/

.loader-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111;
  pointer-events: none;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percentage {
  font-size: clamp(5.72rem, 15.02vw + 1.97rem, 19.99rem);
}

.loader-text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loader-text span {
  font-size: clamp(3.5rem, 12vw + 1rem, 31.57rem);
  visibility: hidden;
  display: inline-block;
  letter-spacing: -1.3vw;
  margin-right: 1.3vw;
}


	/* --- Loader dots (replaces %) --- */

	.loader-dots{
	  display: flex;
	  gap: 30px;
	  align-items: center;
	}

	.loader-dots span{
	  width: 15px;
	  height: 15px;
	  border-radius: 50%;
	  background: #c0b5a4;
	  opacity: 0;
	  animation: dotPulse 1.4s infinite;
	}

	.loader-dots span:nth-child(1){ animation-delay: 0s; }
	.loader-dots span:nth-child(2){ animation-delay: 0.2s; }
	.loader-dots span:nth-child(3){ animation-delay: 0.4s; }

	@keyframes dotPulse{
	  0%   { opacity: 0; }
	  30%  { opacity: 1; }
	  60%  { opacity: 0; }
	  100% { opacity: 0; }
	}

	/* Optional safety states */
	.dots-paused .loader-dots span{
	  animation-play-state: paused;
	  opacity: 1;
	}

	.dots-killed,
	.dots-killed *{
	  animation: none;
	}

	.dots-killed { display: none; }

	.loader-dots[style*="display: none"] { 
	  pointer-events: none; 
	}




/*---------------- 6. Navigation Menu ----------------*/

header {
  position: fixed;
  z-index: 998;
}

/* Header toolbar (always visible, above nav overlay) */
.header-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 1000; /* must be above .nav-container */

  /* Safety: ensure scroll animations never hide it when nav is open */
  transform: translateY(0);
}

.nav-icon {
  cursor: pointer;
  pointer-events: auto;
}

.js-toolbar { 
  width: 100%;
  transition: background-color 0.25s ease, color 0.25s ease;
  will-change: transform;
  color: var(--light-1);
  padding: 15px 43px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.js-toolbar-fix {
  background-color: var(--dark-4);
  color: var(--light-1);
}

.logo {
  font-size: var(--fs-h5);
  line-height: 1;
  margin-bottom: 0;
}

@media (max-width: 992px) { 
  .js-toolbar {
    padding: 12px 16px;
  }
   
  .logo {
    font-size: 1.8rem;
  }
}

.nav-icon-wrap {
  width: 40px;
  height: 16px;
  position: relative;
  overflow: hidden;
}

.nav-line-t,
.nav-line-c,
.nav-line-b {
  content: "";
  position: absolute;
  background: var(--light-1);
  transition: 1s cubic-bezier(0.9, 0.5, 0.2, 1);
}

.nav-line-t {
  width: 27px;
  left: 0;
  top: 0;
  height: 1px;
}

.nav-line-c {
  width: 30px;
  right: 0;
  top: 7px;
  height: 2px;
}

.nav-line-b {
  width: 30px;
  left: 0;
  bottom: 0;
  height: 1px;
}

.nav-icon-wrap:hover .nav-line-t {
  background: var(--brown-1);
  transform: translateX(50%) scaleX(0.3) !important;
}

.nav-icon-wrap:hover .nav-line-c {
  background: var(--brown-1);
  transform: translateX(-10%) scaleX(1.5) !important;
}

.nav-icon-wrap:hover .nav-line-b {
  background: var(--brown-1);
  transform: translateX(-50%) scaleX(2) !important;
}

.js-nav-active .nav-line-t,
.js-nav-active .nav-line-c,
.js-nav-active .nav-line-b {
  transform: translateX(-50%) scaleX(0) !important;
}

.nav-icon-close:before,
.nav-icon-close:after {
  content: "";
  width: 100%;
  left: 0;
  position: absolute;
  background: var(--light-1);
  transform: translateX(-10%) scaleX(0);
  transform-origin: left;
  transition: 1s cubic-bezier(0.9, 0.5, 0.2, 1);
}

.nav-icon-close:before {
  height: 1px;
  top: 0;
  transition-delay: 0s;
}

.nav-icon-close:after {
  height: 2px;
  top: 7px;
  transition-delay: 0.15s;
}

.js-nav-active .nav-icon-close:before,
.js-nav-active .nav-icon-close:after {
  transform: translateX(-10%) scaleX(1);
}

.js-nav-active .nav-icon-close:before {
  transition-delay: 1.15s;
}

.js-nav-active .nav-icon-close:after {
  transition-delay: 1s;
}

.nav-icon-wrap:hover .nav-icon-close:before,
.nav-icon-wrap:hover .nav-icon-close:after {
  background: var(--brown-1);
  transform: translateX(30%) scaleX(0.3);
  transition-delay: 0s;
}

.nav-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;

  pointer-events: none;
  background-color: var(--dark-4);

  /* open/close animation */
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.2s cubic-bezier(0.86, 0, 0.1, 1);
  transition-delay: 1.2s;

  /* scrolling (single scroll owner) */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.js-nav-active .nav-container {
  pointer-events: auto;
  transform: scaleY(1);
  transition-delay: 0s;
}

/* Base: main + submenu EXACT SAME font sizing (desktop/tablet) */
.nav-v .nav-link-in.nav-menu-link a,
.nav-v .nav-link-in.nav-submenu-link a {
  font-size: clamp(1.4rem, 3.2vw, 3rem);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--light-1);
}

/* Short-height windows: adjust spacing only (no font-size changes) */
@media screen and (min-height: 320px)
  and (max-height: 500px) {

  .nav-v {
    padding-top: 70px;
  }

  .nav-v.submenu {
    padding-top: 110px; /* still clears the back arrow */
  }
}

/* Mobile: make nav text larger (this MUST come after short-height query) */
@media (max-width: 1100px) {
  .nav-v .nav-link-in.nav-menu-link a,
  .nav-v .nav-link-in.nav-submenu-link a {
    font-size: clamp(2.2rem, 7vw, 3.6rem);
    line-height: 1.5;
  }
}


.nav-h {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.nav-h .nav-link-out {
  display: inline-block;
  margin-right: 20px;
}

.nav-h .nav-link-in.nav-menu-link a {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  line-height: 1.1;
}

.nav-h .nav-link-in.nav-submenu-link a {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  line-height: 1.1;
}

.nav-link-out {
  overflow: hidden;
}

.nav-link-in {
  display: inline-block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transform: translateY(105%);
  transition: all 1s cubic-bezier(0.65, -0.05, 0.4, 1);
}

.nav-link-out:nth-child(1) .nav-link-in {
  transition-delay: 0.2s;
}

.nav-link-out:nth-child(2) .nav-link-in {
  transition-delay: 0.3s;
}

.nav-link-out:nth-child(3) .nav-link-in {
  transition-delay: 0.4s;
}

.nav-link-out:nth-child(4) .nav-link-in {
  transition-delay: 0.5s;
}

.nav-link-out:nth-child(5) .nav-link-in {
  transition-delay: 0.6s;
}

.nav-link-out:nth-child(6) .nav-link-in {
  transition-delay: 0.7s;
}

.nav-link-out:nth-child(7) .nav-link-in {
  transition-delay: 0.8s;
}

.nav-link-out:nth-child(8) .nav-link-in {
  transition-delay: 0.9s;
}

.nav-link-out:nth-child(9) .nav-link-in {
  transition-delay: 1s;
}

.nav-link-out:nth-child(10) .nav-link-in {
  transition-delay: 1.1s;
}

.nav-link-out:nth-child(11) .nav-link-in {
  transition-delay: 1.2s;
}

.nav-link-out:nth-child(12) .nav-link-in {
  transition-delay: 1.3s;
}

.nav-link-out:nth-child(13) .nav-link-in {
  transition-delay: 1.4s;
}

.nav-link-out:nth-child(14) .nav-link-in {
  transition-delay: 1.5s;
}

.js-nav-active .nav-link-in {
  transform: translateY(0);
  transition: all 1.5s cubic-bezier(0.65, -0.05, 0.4, 1);
}

.js-nav-active .nav-link-out:nth-child(1) .nav-link-in {
  transition-delay: 0.6s;
}

.js-nav-active .nav-link-out:nth-child(2) .nav-link-in {
  transition-delay: 0.7s;
}

.js-nav-active .nav-link-out:nth-child(3) .nav-link-in {
  transition-delay: 0.8s;
}

.js-nav-active .nav-link-out:nth-child(4) .nav-link-in {
  transition-delay: 0.9s;
}

.js-nav-active .nav-link-out:nth-child(5) .nav-link-in {
  transition-delay: 1s;
}

.js-nav-active .nav-link-out:nth-child(6) .nav-link-in {
  transition-delay: 1.1s;
}

.js-nav-active .nav-link-out:nth-child(7) .nav-link-in {
  transition-delay: 1.2s;
}

.js-nav-active .nav-link-out:nth-child(8) .nav-link-in {
  transition-delay: 1.3s;
}

.js-nav-active .nav-link-out:nth-child(9) .nav-link-in {
  transition-delay: 1.4s;
}

.js-nav-active .nav-link-out:nth-child(10) .nav-link-in {
  transition-delay: 1.5s;
}

.js-nav-active .nav-link-out:nth-child(11) .nav-link-in {
  transition-delay: 1.6;
}

.js-nav-active .nav-link-out:nth-child(12) .nav-link-in {
  transition-delay: 1.7s;
}

.js-nav-active .nav-link-out:nth-child(13) .nav-link-in {
  transition-delay: 1.8s;
}

.js-nav-active .nav-link-out:nth-child(14) .nav-link-in {
  transition-delay: 1.9s;
}

.submenu {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

.js-submenu.js-submenu-active {
  pointer-events: auto;
}

.submenu-close {
  overflow: hidden;
  width: 100px;
  height: 50px;
  position: absolute;
  top: 100px;     /* consistent placement */
  right: 40px;
  z-index: 3;
}

.submenu-close-img {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  pointer-events: none;

  transform: translateX(110%); /* push fully offscreen */
  transition: transform 0.45s cubic-bezier(0.65, -0.05, 0.4, 1); /* faster + only transform */
}

.js-nav-active .js-submenu-active .submenu-close-img {
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s; /* IMPORTANT: remove the delay */
}

.submenu-close .submenu-close-img img {
  width: 60px;
  height: 38px;
  margin-left: 25px;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.submenu-close .submenu-close-img:hover img {
  transform: translateX(-10px);
}

@media only screen and (max-width: 1100px) {
  .submenu-close {
    width: 100px;
    height: 24px;
    right: 16px;
    top: 100px;

    /* IMPORTANT: kill magnetic/inline transform drift on mobile */
    transform: translate3d(0,0,0) !important;
  }

  .submenu-close-img {
    transform: translateX(110%) !important; /* guarantees fully hidden when inactive */
  }

  .js-nav-active .js-submenu-active .submenu-close-img {
    transform: translateX(0) !important;   /* guarantees fully visible when active */
  }

  .submenu-close .submenu-close-img img {
    width: 50px;
    height: 31px;
  }
}

.submenu-hidden .nav-link-in-out {
  display: inline-block;
  transform: translateX(0);
  transition: all 1.2s cubic-bezier(0.65, -0.05, 0.4, 1);
}

.js-submenu-active .submenu-hidden .nav-link-in-out {
  transform: translateX(-105%);
}

.js-submenu .nav-link-in-out {
  display: inline-block;
  transform: translateY(105%);
  transition: all 1.2s cubic-bezier(0.65, -0.05, 0.4, 1);
}

.js-submenu.js-submenu-active .nav-link-in-out {
  transform: translateY(0);
}

.js-submenu-active .submenu-hidden {
  pointer-events: none;
}

.js-submenu-active .nav-link-out:nth-child(1) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(1) .nav-link-in-out {
  transition-delay: 0s;
}

.js-submenu-active .nav-link-out:nth-child(2) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(2) .nav-link-in-out {
  transition-delay: 0.1s;
}

.js-submenu-active .nav-link-out:nth-child(3) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(3) .nav-link-in-out {
  transition-delay: 0.2s;
}

.js-submenu-active .nav-link-out:nth-child(4) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(4) .nav-link-in-out {
  transition-delay: 0.3s;
}

.js-submenu-active .nav-link-out:nth-child(5) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(5) .nav-link-in-out {
  transition-delay: 0.4s;
}

.js-submenu-active .nav-link-out:nth-child(6) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(6) .nav-link-in-out {
  transition-delay: 0.5s;
}

.js-submenu-active .nav-link-out:nth-child(7) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(7) .nav-link-in-out {
  transition-delay: 0.6s;
}

.js-submenu-active .nav-link-out:nth-child(8) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(8) .nav-link-in-out {
  transition-delay: 0.7s;
}

.js-submenu-active .nav-link-out:nth-child(9) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(9) .nav-link-in-out {
  transition-delay: 0.8s;
}

.js-submenu-active .nav-link-out:nth-child(10) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(10) .nav-link-in-out {
  transition-delay: 0.9s;
}

.js-submenu-active .nav-link-out:nth-child(11) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(11) .nav-link-in-out {
  transition-delay: 1s;
}

.js-submenu-active .nav-link-out:nth-child(12) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(12) .nav-link-in-out {
  transition-delay: 1.1s;
}

.js-submenu-active .nav-link-out:nth-child(13) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(13) .nav-link-in-out {
  transition-delay: 1.2s;
}

.js-submenu-active .nav-link-out:nth-child(14) .submenu-hidden .nav-link-in-out,
.js-submenu .nav-link-out:nth-child(14) .nav-link-in-out {
  transition-delay: 1.3s;
}

.nav-link-out:nth-child(1) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(1) .nav-link-in-out {
  transition-delay: 1.2s;
}

.nav-link-out:nth-child(2) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(2) .nav-link-in-out {
  transition-delay: 1.3s;
}

.nav-link-out:nth-child(3) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(3) .nav-link-in-out {
  transition-delay: 1.4s;
}

.nav-link-out:nth-child(4) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(4) .nav-link-in-out {
  transition-delay: 1.5s;
}

.nav-link-out:nth-child(5) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(5) .nav-link-in-out {
  transition-delay: 1.6s;
}

.nav-link-out:nth-child(6) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(6) .nav-link-in-out {
  transition-delay: 1.7s;
}

.nav-link-out:nth-child(7) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(7) .nav-link-in-out {
  transition-delay: 1.8s;
}

.nav-link-out:nth-child(8) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(8) .nav-link-in-out {
  transition-delay: 1.9s;
}

.nav-link-out:nth-child(9) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(9) .nav-link-in-out {
  transition-delay: 2s;
}

.nav-link-out:nth-child(10) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(10) .nav-link-in-out {
  transition-delay: 2.1s;
}

.nav-link-out:nth-child(11) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(11) .nav-link-in-out {
  transition-delay: 2.2s;
}

.nav-link-out:nth-child(12) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(12) .nav-link-in-out {
  transition-delay: 2.3s;
}

.nav-link-out:nth-child(13) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(13) .nav-link-in-out {
  transition-delay: 2.4s;
}

.nav-link-out:nth-child(14) .submenu-hidden .nav-link-in-out,
.js-submenu.js-submenu-active .nav-link-out:nth-child(14) .nav-link-in-out {
  transition-delay: 2.5s;
}

/* ========== Burger changes to X ============*/
.js-nav-active .nav-icon-wrap {
  cursor: pointer;
}

.js-nav-active .nav-icon-close:before,
.js-nav-active .nav-icon-close:after {
  background: var(--light-1);
  height: 2px;
}

/* Rotate into a real X */
.js-nav-active .nav-icon-close:before {
  transform: rotate(45deg) translateY(7px);
}

.js-nav-active .nav-icon-close:after {
  transform: rotate(-45deg) translateY(-7px);
}

/* --- Make the close "X" actually visible --- */

/* 1) When nav is open, don't clip the X */
.js-nav-active .nav-icon-wrap {
  overflow: visible; /* was hidden */
}

/* 2) Give the close container a real box to draw in */
.nav-icon-close {
  position: absolute;
  inset: 0;          /* fill the 40x16 area */
  pointer-events: none;
}

/* 3) Draw two diagonals centered in the box */
.nav-icon-close::before,
.nav-icon-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;       /* adjust if you want bigger */
  height: 2px;       /* thicker so it's obvious */
  background: var(--light-1);
  transform-origin: center;
  opacity: 0;
}

/* 4) Show + rotate into an X only when nav is open */
.js-nav-active .nav-icon-close::before,
.js-nav-active .nav-icon-close::after {
  opacity: 1;
}

.js-nav-active .nav-icon-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.js-nav-active .nav-icon-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ========== Lock Nav Bar in Mobile ============*/

/* When nav is open, prevent background scroll */
body.js-nav-active {
  overflow: hidden;
}

/* Make the overlay be the scroll container */
.nav-container {
  overflow-y: auto;
  overscroll-behavior: contain;          /* stop scroll chaining */
  -webkit-overflow-scrolling: touch;     /* iOS momentum */
  touch-action: pan-y;                   /* prefer vertical pan on overlay */
}

/* ========== Nav Bar Always In View ============*/

/* When nav is open, toolbar/X must NEVER disappear */
body.js-nav-active .header-toolbar {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/*---------------- 7. Cursor ----------------*/

.cb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.3s, color 0.4s;
}

.cb-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  display: block;
  width: 48px;
  height: 48px;
  transform: scale(0);
  background: currentColor;
  border-radius: 50%;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  -o-transition: opacity 0.1s, -o-transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out, opacity 0.1s, -moz-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.1s;
  transition: transform 0.3s ease-in-out, opacity 0.1s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
}

.cb-cursor-text {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  transform: scale(0) rotate(10deg);
  opacity: 0;
  color: var(--dark-1);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  font-family: var(--font-montserrat);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.3s;
  transition: opacity 0.4s, -webkit-transform 0.3s;
    -o-transition: opacity 0.4s, -o-transform 0.3s;
  -moz-transition: opacity 0.4s, transform 0.3s, -moz-transform 0.3s;
  transition: opacity 0.4s, transform 0.3s;
  transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: exclusion;
  }

  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: var(--light-2);
  }
}

.cb-cursor.-normal,
.cb-cursor.-text {
  mix-blend-mode: normal;
}

.cb-cursor.-normal:before,
.cb-cursor.-text:before {
  background: currentColor;
}

.cb-cursor.-inverse {
  color: var(--light-2);
}

.cb-cursor.-visible:before {
  transform: scale(0.2);
}

.cb-cursor.-visible.-active:before {
  transform: scale(0.23);
  transition-duration: 0.2s;
}

.cb-cursor.-pointer:before {
  transform: scale(0.15);
}

.cb-cursor.-text:before {
  opacity: 0.85;
  transform: scale(1.7);
}

.cb-cursor.-text .cb-cursor-text {
  opacity: 1;
  transform: scale(1);
}

.cb-cursor.-text.-active:before {
  transform: scale(1.6);
  transition-duration: 0.2s;
}

.cb-cursor.-opaque:before { transform: scale(1.32) }
.cb-cursor.-opaque.-active:before { transform: scale(1.2) }
.cb-cursor.-sm:before { transform: scale(0.5) }
.cb-cursor.-md:before { transform: scale(1.32) }
.cb-cursor.-lg:before { transform: scale(2.2) }
.cb-cursor.-xl:before { transform: scale(3.5) }
.cb-cursor.-xxl:before { transform: scale(5) }
.cb-cursor.-hidden:before { transform: scale(0) }

.cb-cursor.-circle-light:before {
  border: 1px solid var(--light-1);
  color: transparent;
}

.cb-cursor.-circle-dark:before {
  border: 1px solid var(--dark-3);
  color: transparent;
}

.cb-cursor.-circle-brown:before {
  border: 1px solid var(--brown-1);
  color: transparent;
}

.-text-light .cb-cursor-text {
  color: var(--light-1);
}

.-text-brown .cb-cursor-text {
  color: var(--brown-2);
}

.-text-dark .cb-cursor-text {
  color: var(--dark-2);
}

.-xl .cb-cursor-text {
  font-size: 1.2rem;
  line-height: 1.1;
}

.-xxl .cb-cursor-text {
  font-size: 1.5rem;
  line-height: 1.1;
}

.-light-1 {
  color: rgba(204,208,219,0.80)
}

.-light-2 {
  color: rgba(255,255,255,1)
}

.-dark-1 {
  color: rgba(34,34,34,0.90);
}

.-dark-2 {
  color: rgba(0,0,0,1);
}

.-brown {
  color: rgba(170,143,110,0.83)
}

@media only screen and (max-width: 767px) {
  .cb-cursor { 
    display: none; 
  }
}

/*---------------- 8. Slider ----------------*/

.slideshow-1,
.slideshow-2,
.slideshow-3,
.slideshow-4,
.slideshow-5 {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.slideshow-1 {
  background-color: var(--dark-1)
}

.slideshow-2 {
  background-color: var(--dark-1)
}

.slideshow-3 {
  background-color: var(--dark-3)
}

.slideshow-4 {
  background-color: var(--dark-1)
}

.slideshow-5 {
  background-color: var(--dark-3)
}

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slides-border {
  border: 1.3rem solid var(--dark-1);
}

.slide-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.slide-current {
  opacity: 1;
  pointer-events: auto;
}

.slide-img {
  position: absolute;
  top: -100px;
  left: -100px;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.slide-img.slide-vid {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
}

.slide-shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}

.slideshow-shape-1,
.slideshow-shape-2,
.slideshow-shape-3,
.slideshow-shape-4,
.slideshow-shape-5 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}

.slideshow-shape-1 {
  fill: var(--dark-1)
}

.slideshow-shape-2 {
  fill: var(--dark-1)
}

.slideshow-shape-3 {
  fill: var(--dark-3)
}

.slideshow-shape-4 {
  fill: var(--dark-1)
}

.slideshow-shape-5 {
  fill: var(--dark-3)
}

.slide-title {
  position: relative;
  font-size: 16vw;
  color: var(--light-1);
  margin: 0;
  font-weight: 200;
}

@media (max-width:768px) {
  .slide-title {
    font-size: 18vw;
    font-weight: 300;
  }
}

.slide-title-1 {
  position: relative;
  font-size: clamp(50px, 8vw, 120px);
  color: var(--light-1);
  margin: 0;
  font-weight: 300;
}

.slide-title-2 {
  position: relative;
  font-size: clamp(32px, 5.5vw, 60px);
  color: var(--light-1);
  margin: 0;
  font-weight: 200;
}

.slide-title-3 {
  position: relative;
  font-size: clamp(20px, 5vw, 40px);
  color: var(--light-1);
  margin: 0;
  font-weight: 200;
}

#home .slide-title-1,
#home .slide-title-2,
#home .slide-title-3{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 10px 10px;
}


/* Line break only on <=900px */
.mobile-br-900{
  display: none;
}

@media (max-width: 900px){
  .mobile-br-900{
    display: block;
  }
}


.slide-desc {
  position: relative;
  font-size: var(--fs-h6);
  color: var(--light-1);
  font-family: var(--font-body);
  margin: 0 0 1em 0;
  padding: 0 1em;
  text-align: center;
  cursor: default;
  font-weight: 300;
}

.slide-link {
  position: relative;
  font-size: 1.3rem;
  font-family: var(--font-body);
  color: var(--light-1);
}

.slidenav {
  position: absolute;
  width: 300px;
  margin-left: -150px;
  left: 50%;
  bottom: 40px;
  text-align: center;
  cursor: pointer;
  font-weight: 400;
}

.slidenav.slidenav-right {
  left: unset;
  right: 0;
  bottom: 40px;
}

.slidenav.slidenav-right {
  left: unset;
  right: 0;
  bottom: 40px;
}

.slidenav-item {
  font-size: 1.2rem;
  line-height: 1;
  font-family: var(--font-montserrat);
  margin: 0 1rem;
  border: 0;
  color: var(--light-1);
}

.slidenav-item.slidenav-arrow {
  width: 40px;
  height: 25px;
  margin: 0 1rem;
  display: inline-block;
}

@media (max-width: 768px) {
  .slides-border {
     border: 0rem solid;
  }

  .slide-desc { 
    font-size: 1.6rem 
  }
   
  .slide-link { 
    font-size: 1.2rem
  }
}

@media (max-width: 576px) {
  .slidenav {
    bottom: 100px;
}
   
  .slidenav.slidenav-right {
    bottom: 100px;
}

  .slidenav.slidenav-right {
    bottom: 100px;
  }
}

/*---------------- 9. Image Overlay ----------------*/

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

.cover-bg {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 0;
}

.op-1 { opacity: 0.1 }
.op-2 { opacity: 0.2 }
.op-3 { opacity: 0.3 }
.op-4 { opacity: 0.4 }
.op-5 { opacity: 0.5 }
.op-6 { opacity: 0.6 }
.op-7 { opacity: 0.7 }
.op-8 { opacity: 0.8 }
.op-9 { opacity: 0.9 }

.img-ol-dark-2 img,
.img-ol-dark-3 img,
.img-ol-dark-4 img,
.img-ol-dark-5 img,
.img-ol-dark-6 img,
.img-ol-dark-7 img,
.img-ol-dark-8 img,
.img-ol-dark-9 img,
.img-ol-light-2 img,
.img-ol-light-3 img,
.img-ol-light-4 img,
.img-ol-light-5 img,
.img-ol-light-6 img,
.img-ol-light-7 img,
.img-ol-light-8 img,
.img-ol-light-9 img {
  mix-blend-mode: overlay;
}

.bg-ol-dark-2,
.bg-ol-dark-3,
.bg-ol-dark-4,
.bg-ol-dark-5,
.bg-ol-dark-6,
.bg-ol-dark-7,
.bg-ol-dark-8,
.bg-ol-dark-9,
.bg-ol-light-2,
.bg-ol-light-3,
.bg-ol-light-4,
.bg-ol-light-5,
.bg-ol-light-6,
.bg-ol-light-7,
.bg-ol-light-8,
.bg-ol-light-9 {
  background-blend-mode: overlay;
}

.bg-ol-dark-2,
.img-ol-dark-2 {
  background-color: rgba(0, 0, 0, 0.2);
}
.bg-ol-dark-3,
.img-ol-dark-3 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-ol-dark-4,
.img-ol-dark-4 {
  background-color: rgba(0, 0, 0, 0.4);
}

.bg-ol-dark-5,
.img-ol-dark-5{
  background-color: rgba(0, 0, 0, 0.5);
}

.bg-ol-dark-6,
.img-ol-dark-6 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg-ol-dark-7,
.img-ol-dark-7 {
  background-color: rgba(0, 0, 0, 0.7);
}

.bg-ol-dark-8,
.img-ol-dark-8 {
  background-color: rgba(0, 0, 0, 0.8);
}

.bg-ol-dark-9,
.img-ol-dark-9 {
  background-color: rgba(0, 0, 0, 0.9);
}

.bg-ol-light-2,
.img-ol-light-2 {
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-ol-light-3,
.img-ol-light-3 {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-ol-light-4,
.img-ol-light-4 {
  background-color: rgba(255, 255, 255, 0.4);
}

.bg-ol-light-5,
.img-ol-light-5 {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-ol-light-6,
.img-ol-light-6 {
  background-color: rgba(255, 255, 255, 0.6);
}

.bg-ol-light-7,
.img-ol-light-7 {
  background-color: rgba(255, 255, 255, 0.7);
}

.bg-ol-light-8,
.img-ol-light-8 {
  background-color: rgba(255, 255, 255, 0.8);
}

.bg-ol-light-9,
.img-ol-light-9 {
  background-color: rgba(255, 255, 255, 0.9);
}

/*---------------- 10. Video ----------------*/

.jarallax,
.js-video-1,
.js-video-2,
.js-video-3,
.js-video-4,
.js-video-5,
.js-video-6,
.js-video-7,
.js-video-8,
.js-video-9,
.js-video-10,
.js-video-11,
.js-video-12 {
  position: relative;
  z-index: 0;
}

.jarallax > .jarallax-img,
.js-video-1 > .jarallax-img,
.js-video-2 > .jarallax-img,
.js-video-3 > .jarallax-img,
.js-video-4 > .jarallax-img,
.js-video-5 > .jarallax-img,
.js-video-6 > .jarallax-img,
.js-video-7 > .jarallax-img,
.js-video-8 > .jarallax-img,
.js-video-9 > .jarallax-img,
.js-video-10 > .jarallax-img,
.js-video-11 > .jarallax-img,
.js-video-12 > .jarallax-img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.js-video-1 {
  height: 13vw 
}

@media (max-width: 798px) {
  .js-video-1 { 
    height: 30vw 
  }
}

.vid-size-3 {
  padding-top: 56.25%;
  min-height: 0;
  height: 0;
}

.vid-vh-60 { height: 60vh }
.vid-vh-70 { height: 70vh }
.vid-vh-80 { height: 80vh }
.vid-vh-100 { height: 100vh }

.btn-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-circle-1,
.btn-circle-2 {
  position: relative;
  margin: auto;
  z-index: 3;
  cursor: pointer;
  opacity: 1;
  border: 2px solid var(--light-1);
  transform: scale(1);
  transition: all 1s ease;
}

.btn-circle-1,
.btn-circle-2 {
  border-radius: 50%;
}

.btn-circle-sm {
  width: 80px;
  height: 80px;
}

.btn-circle-md {
  width: 110px;
  height: 110px;
}

.btn-circle-lg {
  width: 150px;
  height: 150px;
}

.btn-circle-xl {
  width: 180px;
  height: 180px;
}

.btn-circle-1 img,
.btn-circle-2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
}

.btn-circle-1 img {
  width: 20px;
  margin-left: 4px;
}

.btn-circle-2 img {
  width: 10px;
  margin-left: 2px;
}

.btn-circle-1:hover,
.btn-circle-2:hover {
  transform: scale(1.2);
  opacity: 0;
}

.btn-circle-1.btn-bor-dark,
.btn-circle-2.btn-bor-dark {
  border-color: var(--dark-1);
}

.btn-circle-1.btn-bg-dark,
.btn-circle-2.btn-bg-dark {
  border-color: var(--dark-1);
  background-color: var(--dark-1);
}

.btn-circle-1.btn-bg-light,
.btn-circle-2.btn-bg-light {
  border-color: var(--light-1);
  background-color: var(--light-1);
}

/*---------------- 11. Parallax ----------------*/

.parallax-img {
  align-items: center;
  justify-items: center;
}

.parallax-img .parallax-cont {
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.parallax-img img {
  position: absolute;
  bottom: 0; 
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  object-fit: cover;
}

.js-parallax-scale {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-img-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

/*---------------- 12. Animation Fade / Zoom ----------------*/

.js-fade,
.js-fade-left,
.js-fade-right {
  visibility: hidden;
}

.js-zoom-in,
.js-zoom-out {
  visibility: hidden;
  overflow: hidden;
}

.js-zoom-in-scroll,
.js-zoom-out-scroll {
  position: relative;
  width: 100%;
}

/*---------------- 13. Horizontal Scrolling ----------------*/

.js-scroll-horiz {
  white-space: nowrap;
  color: var(--brown-1);
}

.js-scroll-horiz .scroll-item-1,
.js-scroll-horiz .scroll-item-2 {
  display: inline-block;
  line-height: 1;
}

.js-scroll-horiz .scroll-item-1 {
  font-size: 13vw;
  margin-right: 4vw;
}

.js-scroll-horiz .scroll-item-2 {
  font-size: 3vw;
  margin-top: 1vw;
  margin-right: 2vw;
}

.js-scroll-horiz .scroll-sponsor-1 {
  margin-right: -5rem;
}

.js-horiz-loop {
  width: 100vw;
  height: 20vw;
  position: relative;
  overflow: hidden;
}

.js-horiz-loop .wrap-horiz-loop {
  position: absolute;
  white-space: nowrap;
  padding: 0;
  will-change: transform;
  font-size: 15vw;
}

.js-horiz-loop li {
  padding: 0;
  display: inline-block;
  margin-right: 30px;
}

.imgscroll {
  --imgscroll-height: 52vw;
  height: var(--imgscroll-height);
  position: relative;
  overflow: hidden;
}

.imgscroll-wrap {
  width: 200%;
  --imgscrollwrap-height: var(--imgscroll-height);
  height: var(--imgscrollwrap-height);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.imgscroll-rotate .imgscroll-wrap {
  --imgscrollwrap-height: calc(var(--imgscroll-height) * 1.8);
  transform: translate3d(-50%, -50%, 0) rotate(22.5deg);
}

.imgscroll-line {
  display: flex;
}

.imgscroll-line-img {
  --tile-margin: 2vw;
  flex: none;
  width: calc(16.6666% - var(--tile-margin) * 2);
  height: calc(var(--imgscrollwrap-height) / 3 - (3 * var(--tile-margin) / 2));
  margin: var(--tile-margin);
  background-size: cover;
  background-position: 50% 50%;
}

.imgscroll-rotate .imgscroll-line-img {
  --tile-margin: 1vw;
  width: calc(16.6666% - var(--tile-margin) * 2);
  height: calc(var(--imgscrollwrap-height) / 5 - (4 * var(--tile-margin) / 2));
}

.text-scroll-h {
  position: absolute;
  font-size: 15vw;
  width: 100vw;
  margin: 0 5rem;
  z-index: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-scroll-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-scroll-img .text-scroll-h {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-1);
  color: var(--dark-1);
  position: absolute;
  z-index: 3;
}

.text-scroll-h.margin-t {
  margin-top: -6vw;
}

.text-scroll-h.margin-b {
  margin-bottom: -17vw;
}

.text-scroll-h-2 {
  position: absolute;
  font-size: 13vw;
  width: 100vw;
  margin: 0 5rem;
  z-index: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-scroll-img .text-scroll-h-2 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-1);
  color: var(--dark-1);
  position: absolute;
  z-index: 3;
}

.text-scroll-h-2.margin-t {
  margin-top: -6vw;
}

.text-scroll-h-2.margin-b {
  margin-bottom: -17vw;
}
/*---------------- 14. Scale Scrolling ----------------*/

.wrap-scale {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.js-scale-scroll {
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}

.wrap-img-scale {
  height: 100%;
}

.wrap-img-scale img {
  display: block;
  height: 100%;
  margin: 0 auto;
}

.js-fade-scroll-2 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/*---------------- 15. Split Text ----------------*/

.js-split-lines-fade-up,
.js-split-lines-up,
.js-split-lines-left,
.js-split-words-up,
.js-split-chars-up,
.js-split-chars-letter-up,
.js-split-chars-left,
.js-split-rotate,
.js-split-chars-l {
  font-kerning: none;
  -webkit-text-rendering: optimizeSpeed;
          text-rendering: optimizeSpeed;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.js-split-lines-up,
.js-split-lines-left,
.js-split-words-up,
.js-split-chars-up,
.js-split-chars-letter-up,
.js-split-chars-left,
.js-split-chars-l {
  overflow: hidden;
}

.split-outer {
  overflow: hidden;
}

.split-inner {
  display: inline-block;
}

/*--------------- 16 Reveal Image -------------------*/

.js-reveal-img-l,
.js-reveal-img-r,
.js-reveal-parallax-l,
.js-reveal-parallax-r,
.js-reveal-img-v,
.js-reveal-img-rotate,
.js-reveal-img-l2 {
  position: relative;
  overflow: hidden;
}

.reveal-img-l,
.reveal-parallax-l,
.reveal-img-l2 {
  transform-origin: left;
}

.reveal-img-r,
.js-reveal-parallax-r {
  transform-origin: right;
}

.reveal-img-v {
  transform-origin: bottom;
}

.reveal-img-rotate {
  transform-origin: center;
}

/*---------------- 17. Lightbox ----------------*/

.glightbox-1,
.glightbox-2 {
  width: 100%;
}

@media (max-width:768px) {

  .glightbox-mobile .glightbox-container .gslide-description {
    padding: 5px 20px;
 }

  .glightbox-mobile .glightbox-container .gslide-title {
    color: #111;
    font-size: 2em
  }

  .glightbox-clean .gslide-description {
    background: rgba(255, 255, 255, 0.8)!important
  }

  .glightbox-clean .gslide-desc {
    font-size: 1em;
    color: #111;
  }

  .glightbox-mobile .glightbox-container .gslide-desc {
    color: #111
  }

}

/*---------------- 18. Image Hover Effect ----------------*/

.grid-hover {
  position: relative;
}

.grid-hover .hover-zoom {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}
 
.grid-hover .hover-zoom.op-4:hover:not(:focus) .hover-zoom__zoom {
  opacity: .4
}

.grid-hover .hover-zoom:hover:not(:focus) .hover-zoom__zoom {
  transform: scale(1.2);
}

.grid-hover .hover-zoom:hover:not(:focus) .hover-zoom__inner {
  transform: scale(.9);
}

.grid-hover .hover-zoom__inner {
  overflow: hidden
}

.grid-hover .hover-zoom__inner, 
.grid-hover .hover-zoom__zoom {
  transform-origin: center center;
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid-hover-content {
  width: 100%;
  padding: 8vw 10vw 5vw 10vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

.grid-hover .grid-hover-content {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.grid-hover .grid-hover-subtitle {
  font-size: 3vw;
  display: block;
  margin: auto 0 0 0;
  font-weight: 300;
}

.grid-hover .grid-hover-subtitle span {
  display: block;
  margin-bottom: -0.2rem;
}

.grid-hover .grid-hover-link {
  font-size: var(--fs-1);
  font-family: var(--font-montserrat);
  display: inline-block;
  color: currentColor;
  font-weight: 500;
  position: relative;
  padding: 0 0 0.2rem;
  pointer-events: auto;
}

.grid-hover .grid-hover-link::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 80%;
  height: 1px;
  bottom: 0;
  transform-origin: 0% 50%;
  transform: scale3d(0, 1, 1);
  opacity: 0;
  transition: all 0.3s;
  transition-property: opacity, transform;
}

.grid-hover .grid-hover-link:hover::before {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

@media screen and (min-width: 767px) {
  .grid-hover-subtitle *,
  .grid-hover-subtitle span {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
    transition: all 1.2s cubic-bezier(0.2, 1, 0.7, 1);
    transition-property: transform, opacity;
  }

  .grid-hover:hover .grid-hover-subtitle * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .grid-hover:hover .grid-hover-subtitle .grid-hover-link { 
    transition-delay: 0s 
  }

  .grid-hover-subtitle span { 
    transition-delay: 0.1s
  }
}

.grid-item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100vw;
}

.grid-item-10,
.grid-item-15,
.grid-item-20,
.grid-item-25,
.grid-item-30,
.grid-item-35,
.grid-item-40,
.grid-item-45,
.grid-item-50,
.grid-item-60,
.grid-item-70,
.grid-item-80,
.grid-item-90,
.grid-item-100 {
  width: 100%;
  height: 50vmax;
}

@media screen and (min-width: 768px) {
  .grid-item-10 { height: 10vmax }
  .grid-item-15 { height: 15vmax }
  .grid-item-20 { height: 20vmax }
  .grid-item-25 { height: 25vmax }
  .grid-item-30 { height: 30vmax }
  .grid-item-35 { height: 35vmax }
  .grid-item-40 { height: 40vmax }
  .grid-item-45 { height: 45vmax }
  .grid-item-50 { height: 50vmax }
  .grid-item-60 { height: 60vmax }
  .grid-item-70 { height: 70vmax }
  .grid-item-80 { height: 80vmax }
  .grid-item-90 { height: 90vmax }
  .grid-item-100 { height: 100vmax }
}

.grid-item-img-h,
.grid-item-img-v,
.grid-item-video {
  display: block;
  height: 100%;
  width: 100%;
}

.grid-item-img-h canvas,
.grid-item-img-v canvas,
.grid-item-video canvas {
  position: relative;
  height: 100%;
  transition: opacity 0.6s;
}

.grid-bg-1:hover .grid-item-img-h canvas,
.grid-bg-1:hover .grid-item-img-v canvas,
.grid-bg-1:hover .grid-item-video video {
  opacity: 0.4;
}

.grid-bg-2:hover .grid-item-img-h canvas,
.grid-bg-2:hover .grid-item-img-v canvas,
.grid-bg-2:hover .grid-item-video video {
  opacity: 0.7;
}

.grid-item-img-h img,
.grid-item-img-v img,
.grid-item-video video {
  height: 100%;
  display: block;
}

.js .grid-item-img-h img,
.js .grid-item-img-v img,
.js .grid-item-video video {
  display: none;
}

.grid-item-content {
  width: 100%;
  padding: 3vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

.grid-item .grid-item-content {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.grid-item-subtitle {
  font-size: var(--fs-4);
  display: block;
  margin: auto 0 0 0;
  font-weight: 300;
}

.grid-item-subtitle span {
  display: block;
  margin-bottom: -0.2rem;
}

.grid-item-link,
span.grid-item-link {
  font-size: var(--fs-1);
  font-family: var(--font-montserrat);
  display: inline-block;
  color: currentColor;
  font-weight: 500;
  position: relative;
  padding: 0 0 0.2rem;
  pointer-events: auto;
}

.grid-item-link::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 80%;
  height: 1px;
  bottom: 0;
  transform-origin: 0% 50%;
  transform: scale3d(0, 1, 1);
  opacity: 0;
  transition: all 0.3s;
  transition-property: opacity, transform;
}

.grid-item-link:hover::before {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

@media screen and (max-width: 767px) {

  .grid-item-subtitle.f-dark {
     color: #000
  }

  .grid-item-subtitle.f-light {
     color: #fff
  }
}


@media screen and (min-width: 767px) {
  .grid-item-subtitle *,
  .grid-item-subtitle span {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
    transition: all 1.2s cubic-bezier(0.2, 1, 0.7, 1);
    transition-property: transform, opacity;
  }

  .grid-item:hover .grid-item-subtitle * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .grid-item:hover .grid-item-subtitle .grid-item-link { 
    transition-delay: 0s 
  }

  .grid-item-subtitle span { 
    transition-delay: 0.1s
  }
}

canvas {
  position: fixed;
  display: block;
  top: 0px;
  left: 0px;
  z-index: -1;
  pointer-events: none;
}

.img-link img {
  display: none;
}

.img-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0.5vw 23px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.grid-rgb-1,
.grid-rgb-2,
.grid-rgb-3,
.grid-trails-1,
.grid-trails-2,
.grid-trails-3,
.grid-stretch-1 {
  position: relative;
  z-index: 3;
}

.grid-rgb-1 .grid-text,
.grid-rgb-2 .grid-text,
.grid-rgb-3 .grid-text,
.grid-trails-1 .grid-text,
.grid-trails-2 .grid-text,
.grid-trails-3 .grid-text,
.grid-stretch-1 .grid-text {
  font-size: 8vw;
  line-height: 8vw;
  margin-bottom: 0;
}

.grid-rgb-1 .grid-des,
.grid-rgb-2 .grid-des,
.grid-rgb-3 .grid-des,
.grid-trails-1 .grid-des,
.grid-trails-2 .grid-des,
.grid-trails-3 .grid-des {
  font-size: var(--fs-4);
  font-family: var(--font-body);
  margin-top: 0.2rem;
  font-weight: 300;
}

.grid-rgb-1 a.img-link,
.grid-rgb-2 a.img-link,
.grid-rgb-3 a.img-link,
.grid-trails-1 a.img-link,
.grid-trails-2 a.img-link,
.grid-trails-3 a.img-link,
.grid-stretch-1 a.img-link {
  transition: opacity 0.4s ease-in-out;
}

.grid-rgb-1:hover a.img-link,
.grid-rgb-2:hover a.img-link,
.grid-rgb-3:hover a.img-link,
.grid-trails-1:hover a.img-link,
.grid-trails-2:hover a.img-link,
.grid-trails-3:hover a.img-link,
.grid-stretch-1:hover a.img-link {
  opacity: 0.2;
}

.grid-rgb-1:hover a.img-link:hover,
.grid-rgb-2:hover a.img-link:hover,
.grid-rgb-3:hover a.img-link:hover,
.grid-trails-1:hover a.img-link:hover,
.grid-trails-2:hover a.img-link:hover,
.grid-trails-3:hover a.img-link:hover,
.grid-stretch-1:hover a.img-link:hover {
  opacity: 1;
}

.grid-items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 1024px) {
  .grid-trails-1:hover a.img-link {
     opacity: 1;
  }
   
  .grid-trails-1:hover a.img-link:hover {
     opacity: .6
  }
}

@media (max-width: 767px) {
  .img-link {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
}

  .grid-items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column
  }
}

@media (max-width: 479px) {
  .img-link { 
    margin: 4vw 0px 
  }
}

/*---------------- 19. Counter ----------------*/

.counter-1 {
  font-family: var(--font-montserrat);
  background-color: #080808;
  transition: background-color 0.5s ease
}

.counter-1 p {
  font-size: 7vw;
  font-weight: 100;
  margin-bottom: 0;
  display: inline-block;
  white-space: nowrap;
}

.counter-1 .info {
  font-size: 20px;
  margin-left: 10px;
}

.counter-1:hover {
  background-color: #111;
}

/*---------------- 20. Box Table ----------------*/

.box-table .lines-hover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid var(--dark-2);
  min-height: 335px;
}

.box-table .lines {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.box-table .tb:after,
.box-table .tb:before,
.box-table .rl:after,
.box-table .rl:before {
  content: "";
  position: absolute;
  z-index: 2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: -webkit-gradient(linear, right top, left top, color-stop(5%, #333), color-stop(20%, rgba(255, 255, 255, 0.75)), color-stop(75%, rgba(255, 255, 255, 0.85)), to(#333));
  background: linear-gradient(270deg, #333 5%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0.85) 75%, #333);
}

.box-table .tb:after,
.box-table .tb:before {
  width: 100%;
  height: 1.5px;
  left: 0;
}

.box-table .tb:before {
  top: 0;
  transform-origin: right;
  transform: translateX(-100%);
}

.box-table .tb:after {
  bottom: 0;
  transform-origin: left;
  transform: translateX(100%);
}

.box-table .rl:after,
.box-table .rl:before {
  width: 1.5px;
  height: 100%;
  right: 0;
}

.box-table .rl:before {
  left: 0;
  transform-origin: bottom;
  transform: translateY(100%);
}

.box-table .rl:after {
  left: calc(100% - 1px);
  transform-origin: top;
  transform: translateY(-100%);
}

.box-table .lines-hover:hover .tb:before,
.box-table .lines-hover:hover .tb:after,
.box-table .lines-hover:hover .rl:before,
.box-table .lines-hover:hover .rl:after {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0, 0.3, 1);
          transition: -webkit-transform 0.5s cubic-bezier(0.6, 0, 0.3, 1);
          transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1);
          transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1), 
              -webkit-transform 0.5s cubic-bezier(0.6, 0, 0.3, 1);
}

.box-table .lines-hover:hover .tb:before {
  transform: translateX(100%);
}

.box-table .lines-hover:hover .tb:after {
  transform: translateX(-100%);
}

.box-table .lines-hover:hover .rl:before {
  transform: translateY(-100%);
}

.box-table .lines-hover:hover .rl:after {
  transform: translateY(100%);
}

@media (max-width: 992px) {
  .box-table .lines-hover { 
    min-height: 250px 
  }
}

@media (max-width: 768px) {
  .box-table .lines-hover { 
    min-height: 150px;
  }
   
  .box-table .tb:after,
  .box-table .tb:before,
  .box-table .rl:after,
  .box-table .rl:before {
    display: none;
  }
}

.circle-lg,
.circle-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.6s ease-in-out;
}

.circle-lg-left {
  margin-left: -5rem;
}

.circle-lg-right {
  margin-right: -5rem;
}

.circle-lg {
  width: 400px;
  height: 400px;
}

.circle-sm {
  width: 100px;
  height: 100px;
}

.circle-lg:hover,
.circle-sm:hover {
  border: 1px solid transparent;
}

@media (max-width: 1000px) {
  .circle-lg {
    width: 350px;
    height: 350px;
  }
}

@media (max-width: 992px) {
  .circle-lg {
    width: 400px;
    height: 400px;
  }
   
  .circle-sm {
    width: 80px;
    height: 80px;
  }
   
  .circle-lg-left { 
    margin-left: 0rem 
  }
   
  .circle-lg-right { 
    margin-right: 0rem 
  }
}

@media (max-width: 576px) {
  .circle-lg {
    width: 300px;
    height: 300px;
  }
}



.circle-md-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transition: all 0.6s ease-in-out;
}

.circle-md-1-left {
  margin-left: -5rem;
}

.circle-md-1-right {
  margin-right: -5rem;
}

.circle-md-1 {
  width: 300px;
  height: 300px;
}

.circle-md-1:hover {
  border: 1px solid rgba(192, 181, 184, 0.99);
}

@media (max-width: 1000px) {
  .circle-md-1 {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 992px) {
  .circle-md-1 {
    width: 300px;
    height: 300px;
  }
   
  .circle-md-1-left { 
    margin-left: 0rem 
  }
   
  .circle-md-1-right { 
    margin-right: 0rem 
  }
}

@media (max-width: 576px) {
  .circle-md-1 {
    width: 200px;
    height: 200px;
  }
}



/*---------------- 21. Acordion ----------------*/

.acc-block {
  width: 100%;
  min-height: 180px;
  display: flex;
  padding: 40px 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: space-between;
  cursor: pointer;
}

.acc-no {
  font-size: 1.4rem;
  font-weight: 300;
}

.acc-title {
  font-size: 1.4rem;
  font-weight: 300;
}

.acc-toggle-icon i {
  font-size: 1.2rem;
  color: #383838;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.1, 0.1, 0.25, 0.9);
}

.acc-toggle .acc-block {
  color: var(--light-1);
  transition: opacity 0.4s ease-in-out;
}

.acc-toggle:hover .acc-block {
  opacity: 0.25;
}

.acc-toggle:hover .acc-block:hover {
  opacity: 1;
}

.acc-toggle:hover .acc-block:hover .acc-toggle-icon i {
  transform: rotate(135deg);
}

ul.accordion {
  padding: 0;
}

/* Accordion content � collapsed by default */
ul.accordion li {
  padding: 0;
  border-bottom: none;
}

/* Apply spacing only when accordion is open */
/* Base spacing when open */
[data-collapse].is-open + ul.accordion li {
  padding: 8px 0;
}

/* SINGLE item accordion (Manuals, Documents, etc.) */
[data-collapse].is-open + ul.accordion li:only-child {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* MULTI item accordion � apply large spacing */
[data-collapse].is-open + ul.accordion li:first-child:not(:only-child) {
  padding-top: 40px;
}

[data-collapse].is-open + ul.accordion li:last-child:not(:only-child) {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

ul.accordion li p{
  margin: 0;              
  font-size: 1.3rem;
  line-height: 1.5;       /* matches your inline style goal */
}

@media (max-width: 900px) {
  .acc-block {
    font-size: 20px;
    padding: 10px;
  }

  ul.accordion li { 
    font-size: 20px 
  }

  ul.accordion li:first-child { 
    padding-top: 10px 
  }

  ul.accordion li:last-child { 
    padding-bottom: 10px 
  }
}

/* Keep toggle icon rotated while accordion item is open */
[data-collapse].is-open .acc-toggle-icon i {
  transform: rotate(135deg);
}

/*---------------- 22. List ----------------*/

.list-1,
.list-1 li {
  position: relative;
}

.list-1 .line-bar {
  width: 100%;
  height: 1px;
  position: relative;
  display: inline-block;
  transform-origin: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  background: var(--dark-2);
  transition: background 0.9s cubic-bezier(0.1, 0.1, 0.25, 0.9);
}

.list-1:hover .line-bar {
  background: transparent;
}

.list-1 li a {
  display: block;
  padding: 40px 0;
}

.list-1 li a:hover {
  color: var(--light-1);
}

.list-1 li a .list-num {
  position: absolute;
  top: 20px;
  left: 0;
  font-weight: 300;
  line-height: 30px;
  font-size: 28px;
  color: var(--light-1);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: 100px;
  padding: 30px;
  transition: border 0.9s cubic-bezier(0.1, 0.1, 0.25, 0.9);
}

.list-1 li a .list-title {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--light-1);
}

.list-1 li a .list-title h3 {
  width: 55%;
  margin: 0;
  padding-left: 20%;
  padding-right: 50px;
}

.list-1 li a .list-title p {
  width: 50%;
  max-width: 300px;
  margin-left: 50px;
}

.list-1 li a .list-title p .list-des {
  font-size: 1.4rem;
  font-family: var(--font-body);
  color: var(--brown-1);
  font-weight: 300;
  display: block;
  margin-bottom: 20px;
}

.list-1 li a .list-info {
  position: absolute;
  top: 30px;
  right: 20px;
  color: var(--light-1);
  font-size: 1.5rem;
  transition: transform 0.9s cubic-bezier(0.1, 0.1, 0.25, 0.9);
}

.list-1 li:hover a .list-info {
  transform: translateX(20px);
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .list-1 li:hover a .list-info {
    opacity: 1;
  }
   
  .list-1:hover .line-bar {
    background: var(--dark-2);
  }
}

@media screen and (max-width: 768px) {
  .list-1 li a .list-title { 
    display: block
  }

  .list-1 li a .list-title h3 { 
    width: 100% 
  }

  .list-1 li a .list-title p {
    width: 100%;
    margin-top: 30px;
  }
}

@media screen and (max-width: 500px) {
  .list-1 li a .list-num { 
    display: none 
  }

  .list-1 li a .list-info {
    top: auto;
    right: 20px;
  }
}

.list-2 .line-bar {
  position: relative;
  width: 100%;
  height: 1px;
  display: inline-block;
  transform-origin: center left;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  background: var(--dark-2);
  transition: background 0.9s cubic-bezier(0.1, 0.1, 0.25, 0.9);
}

.list-2:hover .line-bar {
  background: transparent;
}

.list-block-2 {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  cursor: pointer;
}

.list-2 .list-block-2 .list-cat-2 {
  font-size: 1rem;
  font-family: var(--font-montserrat);
  text-transform: uppercase;
  font-weight: 500;
  transition: transform 0.5s ease;
  transition-delay: 0.2s;
}

.list-2:hover .list-block-2:hover .list-cat-2 {
  transform: translateX(20px);
}

.list-title-2 {
  width: 70%;
  display: flex;
  justify-content: flex-start;
}

.list-2 .list-block-2 .list-item-title {
  font-size: 4vw;
  text-transform: uppercase;
  margin: 0;
  transition: transform 0.5s ease;
  transition-delay: 0.1s;
}

.list-2:hover .list-block-2:hover .list-item-title {
  transform: translateX(20px);
}

.list-2 .list-block-2 .list-icon-2 {
  font-size: 1rem;
  font-family: var(--font-montserrat);
  font-weight: 500;
  transition: transform 0.5s ease;
}

.list-2:hover .list-block-2:hover .list-icon-2 {
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .list-block-2 { 
    padding: 40px; 
  }

  .list-title-2 { 
    justify-content: center 
  }
   
  .list-2 .list-block-2 .list-cat-2 {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .list-block-2 {
    height: 150px;
    display: block;
  }
   
  .list-title-2 {
    width: 100%;
  }
   
  .list-2 .list-block-2 .list-icon-2 {
    display: none;
  }
   
  .list-2 .list-block-2 .list-item-title {
    font-size: 1.5rem;
  }
}

/*---------------- 23. Drag Slider ----------------*/

.drag-slider {
  position: relative;
  width: 100vw;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.js-drag-proxy {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.drag-gallery-inner {
  white-space: nowrap;
}

.drag-gallery-wrap {
  display: inline-block;
  position: relative;
  padding: 0 calc(20 * (100vw / 1440));
}

.drag-slider-50 {
  width: 50vw;
}

.drag-slider-intro {
  font-size: var(--fs-h5);
  white-space: normal;
}

.drag-slider-team {
  font-size: var(--fs-5);
  white-space: normal;
  font-weight: 300;
}

.drag-slider-work {
  font-size: var(--fs-3);
  white-space: normal;
  font-weight: 200;
}

@media (max-width: 576px) {
  .drag-slider-intro { 
    font-size: 1rem 
  }
   
  .drag-slider-team { 
    font-size: 1.2rem 
  }
   
  .drag-slider-work { 
    font-size: 1.1rem 
  }
}

/*---------------- 24. Line Bar ----------------*/

.line-bar {
  width: 100%;
  height: 2px;
  position: relative;
  display: inline-block;
  transform-origin: center left;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.line-bar.dark {
  background: rgba(255, 255, 255, 0.1);
}

.line-bar.light {
  background: rgba(0, 0, 0, 0.1);
}

/*---------------- 25. Sponsor ----------------*/

.box-item-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 270px;
  height: 135px;
}

.box-item-h,
.box-item-v {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.box-item-h {
  transition: all 0.7s cubic-bezier(1, 0, 0.25, 1);
}

.box-item-v {
  transition: all 0.7s cubic-bezier(1, 0, 0.25, 1);
}

.box-item-h:nth-child(1) {
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}

.box-item-wrap:hover .box-item-h:nth-child(1) {
  transform: translateX(0%) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.box-item-wrap:hover .box-item-h:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}

.box-item-v:nth-child(1) {
  transform: translateY(50%) scaleY(2);
  opacity: 0;
  filter: blur(12px);
}

.box-item-wrap:hover .box-item-v:nth-child(1) {
  transform: translateY(0%) scaleY(1);
  opacity: 1;
  filter: blur(0);
}

.box-item-wrap:hover .box-item-v:nth-child(2) {
  transform: translateY(50%) scaleY(2);
  opacity: 0;
  filter: blur(12px);
}

.sponsor-1 {
  position: relative;
  margin: 3rem 0;
}

.sponsor-1 li.box-item-wrap {
  width: 100%;
  max-width: 350px;
  height: 60px;
  opacity: 0.2;
  transition: opacity 0.7s cubic-bezier(1, 0, 0.25, 1);
}

.sponsor-1 li.sp-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: inline-block;
}

.sponsor-1 li.box-item-wrap:hover {
  opacity: 0.9;
}

.sponsor-2 li.box-item-wrap {
  width: 20%;
  height: 0;
  padding-top: 10%;
  margin: 0.5rem;
  background-color: #080808;
  transition: background 0.7s cubic-bezier(1, 0, 0.25, 1);
}

.sponsor-2 li.box-item-wrap:hover {
  background-color: var(--dark-2);
}

@media all and (max-width: 992px) {
  .sponsor-2 li.box-item-wrap {
    width: 30%;
    padding-top: 15%;
  }
}

@media all and (max-width: 768px) {
  .sponsor-2 li.box-item-wrap {
    width: 44%;
    padding-top: 22%;
  }
}

/*---------------- 26. Footer  ----------------*/

footer {
  overflow: hidden;
}

.footer-1 {
  padding: 80px 0
}

.footer-1 .f1-mail {
  font-size: 8vw;
  margin-left: 1.5rem;
  margin-bottom: 4rem;
}

.footer-1 .f1-info {
  margin-left: 1.5rem;
  margin-bottom: 1.8rem;
}

.footer-1 .f1-address {
  font-size: 1.8rem;
  margin-bottom: 0.7rem;
  font-weight: 500;
}

.footer-1 .f1-t-address {
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.footer-1 .f1-link {
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.footer-1 .f1-social {
  font-size: 1.2rem;
  margin-right: 0.7rem;
  display: inline-block;
  margin-top: 3rem;
}

.footer-1 .f1-text-end {
  font-size: 0.8rem;
  font-family: var(--font-montserrat);
  font-weight: 400;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .footer-1 { 
    padding: 50px 0 
  }

  .footer-1 .f1-mail {
    text-align: center;
    margin-bottom: 2rem;
  }

  .footer-1 .f1-address { 
    font-size: 1.6rem;
  }

  .footer-1 .f1-t-address { 
    font-size: 1.1rem;
  }

  .footer-1 .f1-social { 
    text-align: center;
	font-size: 1.4rem;
  }
}

/*---------------- Footer Style Override  ----------------*/


/* ====== Responsive Footer (Grid-based) ====== */

/* Base look */
.site-footer { background:#0b0b0b; color:#fff; padding:48px 20px 28px; box-sizing:border-box; }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.ft-title { margin:0; font-size:1.25rem; font-weight:700; text-align:center; }
.ft-sub { margin:0 0 .5rem; font-size:1rem; font-weight:600; }
.ft-address { font-style:normal; line-height:1.5; opacity:.9; }

/* One shared centering wrapper width for the whole footer */
.site-footer { --footer-wrap: min(1200px, 100%); --footer-pad: 20px; }
.footer-top, .footer-matrix, .footer-bottom-inner {
  width: var(--footer-wrap);
  margin-inline: auto;
  padding-inline: var(--footer-pad);
}

/* Above/Below blocks centered */
.footer-top { margin-bottom:28px; display:grid; place-items:center; }
.footer-bottom { margin-top:28px; }
.footer-bottom-inner { display:grid; gap:8px; justify-items:center; text-align:center; }
.footer-bottom .social a:not(:last-child){ margin-right:12px; }
.footer-bottom .legal { opacity:.85; font-size:.95rem; }

/* Base (small: stack 1×3) */
.footer-matrix{
  display:grid;
  gap:32px 48px;
  grid-template-columns:1fr;
  grid-template-areas:
    "g1"
    "g2"
    "g3";
}
.grid1{grid-area:g1}
.grid2{grid-area:g2}
.grid3{grid-area:g3}

/* Grid #3 contains a 2-col table; becomes 1-col on small */
.links-table{
  display:grid;
  grid-template-columns:1fr;  /* small */
  gap:16px 32px;
}
@media (min-width:700px){
  .links-table{
    grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); /* baseline for medium+ (overridden in medium block below) */
  }
}

/* ===== MEDIUM (700 to 1150px) =====
   Row 1: #1 | #2 (50/50, centered content)
   Row 2: #3 centered at 40% with fluid left/right pads (min width applied)
*/
@media (min-width:700px) and (max-width:1150px){
  .footer-matrix{
    grid-template-columns: 1fr 1fr;           /* Row 1: #1 | #2 (50/50) */
    grid-template-areas:
      "g1 g2"
      "g3 g3";                                /* Row 2: #3 spans the row */
    gap: 28px 40px;
    align-items: start;
    justify-items: stretch;
  }

  /* Center content inside #1 and #2 */
  .grid1 .cell-inner,
  .grid2 .cell-inner{
    text-align: center;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .grid1, .grid2{
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Grid #3: inner 3-track layout -> [pad | min(520px, 40%) content | pad] */
  .grid3{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(520px,40%) minmax(0,1fr);
  }
  .grid3 > .cell-inner{
    grid-column: 2;                           /* content sits in the middle track */
    width: 100%;
    min-width: 0;
  }

  /* === Links table inside #3: Stack1 | 25px GAP | Stack2 === */
  .links-table{
    display: grid;
    grid-template-columns: 1fr 25px 1fr;      /* fixed 25px center gap */
    align-items: start;
    justify-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  /* Center each stack inside its column */
  .links-table > .links-cell{
    display: grid;
    justify-items: center;
    align-items: start;
  }
  .links-table > .links-cell:nth-child(1){
    grid-column: 1;
    padding-left: 12px;                       /* left edge padding for Stack #1 */
  }
  .links-table > .links-cell:nth-child(2){
    grid-column: 3;
    padding-right: 12px;                      /* right edge padding for Stack #2 */
  }

  /* Center list content and remove default list spacing */
  .link-stack{
    margin: 0;
    padding: 0;                                /* kill default UL left padding */
    list-style: none;
    text-align: center;
    box-sizing: border-box;
  }
  .link-stack a{ display: inline-block; }
}

/* ===== LARGE (1151px) ===== */
@media (min-width:1151px){
  .footer-matrix{
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-areas: "g1 g2 g3";
    align-items: start;
  }
  .grid1 .cell-inner,
  .grid2 .cell-inner{
    text-align: left;
    align-items: start;
    justify-items: start;
    width: 100%;
  }
}

/* ===== SMALL (<700px): stacked + centered content ===== */
@media (max-width:699.98px){
  /* Center content inside Grid #1, #2, #3 */
  .grid1 .cell-inner,
  .grid2 .cell-inner,
  .grid3 .cell-inner{
    text-align: center;
    align-items: center;
    justify-items: center;
  }

  /* Links table becomes 1 column and centers its child stacks */
  .links-table{
    grid-template-columns: 1fr;   /* already stacked, but ensure */
    justify-items: center;        /* center each stack block */
    row-gap: 16px;
  }

  /* Center the list content itself (kill default UL padding) */
  .link-stack{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .link-stack a{ display: inline-block; }  /* avoid full-width anchors biasing alignment */
}

/* A11y: visible focus for links */
.link-stack a:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Defensive: prevent overflow & legacy flex interference */
.grid1, .grid2, .grid3, .cell, .cell-inner{ min-width: 0; word-break: break-word; }
.footer-matrix .cell{ flex: none; }  /* in case a parent .row tries to flex children */




/* ====== Footer Style Guards (place LAST in style.css) ====== */

/* Keep the new grid even when .footer-1 is present */
footer.site-footer.footer-1 .footer-matrix { display: grid !important; }
footer.site-footer.footer-1 .grid1,
footer.site-footer.footer-1 .grid2,
footer.site-footer.footer-1 .grid3 { width: 100% !important; }

/* Medium: 2x1 row + centered 40% #3 */
@media (min-width:700px) and (max-width:1150px){
  footer.site-footer.footer-1 .footer-matrix{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "g1 g2" "g3 g3" !important;
    gap: 28px 40px !important;
    justify-items: stretch !important;
    align-items: start !important;
  }
  footer.site-footer.footer-1 .grid3{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(520px,40%) minmax(0,1fr) !important;
  }
  footer.site-footer.footer-1 .grid3 > .cell-inner{ grid-column: 2 !important; }
  footer.site-footer.footer-1 .links-table{
    display: grid !important;
    grid-template-columns: 1fr 25px 1fr !important; /* Stack1 | 25px | Stack2 */
  }
}

/* Large: 3×1 */
@media (min-width:1151px){
  footer.site-footer.footer-1 .footer-matrix{
    grid-template-columns: 1fr 1fr 1.2fr !important;
    grid-template-areas: "g1 g2 g3" !important;
    align-items: start !important;
  }
}

/* Footer typography that mirrors old footer */
footer.site-footer.footer-1 .footer-bottom .social a{
  font-size: var(--fs-h4);
  font-weight: 400;
}
footer.site-footer.footer-1 .footer-bottom .legal,
footer.site-footer.footer-1 .footer-bottom .legal.f1-text-end{
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

/* Hover behavior: match site-wide theme underline (no double underline) */
footer.site-footer a:hover { text-decoration: underline; }          /* fallback for plain links */
footer.site-footer a.link-hover-1:hover { text-decoration: none; }  /* theme's pseudo-underline handles it */

/* Footer: keep link text size normal even if data-cursor="-sm" */
footer.site-footer a[data-cursor="-sm"]{
  font-size: inherit;
  line-height: inherit;
}

/* When the cursor is small *and* over footer links, make it opaque */
.cb-cursor.footer-opaque,
.cursor.footer-opaque,
.cursor-inner.footer-opaque{
  mix-blend-mode: normal;   /* or whatever your opaque mode is */
  opacity: 1;
}





/* ===== Two-grid variant: no Grid #2 (PUT THIS LAST) ===== */

/* Small (<700): stack #1, then #3 */
footer.site-footer.no-grid2 .footer-matrix{
  grid-template-columns: 1fr;
  grid-template-areas: "g1" "g3";
}

/* Medium (700 to 1150px): #1 centered, #3 = 40% with center-anchored 25px gap (no wrapping) */
@media (min-width:700px) and (max-width:1150px){
  /* one column: g1 then g3; no side padding that could shift center */
  footer.site-footer.no-grid2 .footer-matrix{
    grid-template-columns: 1fr !important;
    grid-template-areas: "g1" "g3" !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 28px 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Grid #1 centered + centered contents */
  footer.site-footer.no-grid2 .grid1{
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  footer.site-footer.no-grid2 .grid1 .cell-inner{
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    width: 100%;
    min-width: 0;
  }

  /* Grid #3 outer centered; inner = max(40%, 460px) so two stacks + 25px always fit */
  footer.site-footer.no-grid2 .grid3{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  footer.site-footer.no-grid2 .grid3 > .cell-inner{
    width: max(40%, 460px) !important;   /* raise 460px if your labels are wider */
    max-width: 700px;                    /* optional clamp */
    margin-inline: auto !important;      /* hard center */
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Inside #3: [Stack1 | 25px GAP | Stack2]; middle column is the anchor */
  footer.site-footer.no-grid2 .links-table{
    display: grid !important;
    grid-template-columns: max-content 25px max-content !important; /* no shrink */
    column-gap: 0 !important;               /* the 25px middle column IS the gap */
    justify-content: center !important;     /* center the 3-col table itself */
    align-items: start;
    width: 100%;
    box-sizing: border-box;
  }

  /* Explicit placement: left stack -> col 1, right stack -> col 3 */
  footer.site-footer.no-grid2 .links-table > *:first-of-type{ grid-column: 1 !important; }
  footer.site-footer.no-grid2 .links-table > *:last-of-type { grid-column: 3 !important; }

  /* No default UL indent; keep each link on one line (no collapse) */
  footer.site-footer.no-grid2 .links-table > .links-cell{ padding: 0 !important; }
  footer.site-footer.no-grid2 .link-stack{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center;
  }
  footer.site-footer.no-grid2 .link-stack a{
    display: inline-block;      /* shrink-wrap to text */
    white-space: nowrap;        /* never wrap (e.g., Contact Form stays one line) */
  }

  /* Hide Grid #2 if it still exists */
  footer.site-footer.no-grid2 .grid2{ display: none !important; }
}


/* Large: #1 | #3 side-by-side */
@media (min-width:1151px){
  footer.site-footer.no-grid2 .footer-matrix{
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas: "g1 g3";
    align-items: start;
    gap: 32px 48px;
  }
  footer.site-footer.no-grid2 .grid1 .cell-inner{
    text-align: left;
    align-items: start;
    justify-items: start;
  }
}





/* =========================================== Custom ====================================================== */


/* ==========================================================
   FOOTER ROLL-UP (non-destructive, grid-safe)
   ========================================================== */

		.footer-matrix.js-footer-rollup{
		  --fo-dur: 1000ms;                     /* per-item animation duration */
		  --fo-stagger: 120;                   /* ms between items (number only) */
		  --fo-ease: cubic-bezier(.22,.61,.36,1);
		}

		/* Initial state for animating elements */
		.footer-matrix.js-footer-rollup [data-fo-seq]{
		  opacity: 0;
		  transform: translateY(14px);
		  will-change: transform, opacity;
		}

		/* Play-in state (IO adds .is-in on the container) */
		.footer-matrix.js-footer-rollup.is-in [data-fo-seq]{
		  animation: fo-rollup var(--fo-dur) var(--fo-ease) forwards;
		  animation-delay: var(--fo-delay, 0ms);
		}

		/* Keyframes mimic split-lines-up feel */
		@keyframes fo-rollup{
		  0%   { opacity: 0; transform: translateY(14px); }
		  100% { opacity: 1; transform: translateY(0); }
		}

		/* Optional: slightly different easing for list items */
		.footer-matrix.js-footer-rollup .links-table li[data-fo-seq]{
		  --fo-ease: cubic-bezier(.2,.7,.2,1);
		}


/* ==========================================================
   RFID COMPARISON TABLE
   ========================================================== */

		#rfid-compare {
		  color: var(--light-1);
		}

		#rfid-compare .rfid-compare-wrapper {
		  max-width: 100%;
		  overflow-x: auto;     /* horizontal scroll ONLY */
		  overflow-y: visible;  /* full vertical height, no vertical scroll */
		  border: 1px solid var(--dark-4);
		  border-radius: 8px;
		}

		/* Table configuration */
		#rfid-compare .rfid-compare-table {
		  table-layout: fixed;          /* respect column widths */
		  border-collapse: collapse;
		  width: 100%;                  /* table fills the wrapper */
		  min-width: 990px;             /* 300px adjust if needed */
		  font-size: var(--fs-0);
		  white-space: normal;
		}

		#rfid-compare .rfid-compare-table th,
		#rfid-compare .rfid-compare-table td {
		  padding: 0.75rem 1rem;
		  border-bottom: 1px solid var(--dark-4);
		  text-align: left;
		  vertical-align: top;
		}

		/* Sticky header styling */
		#rfid-compare .rfid-compare-table thead th {
		  position: sticky;
		  top: 0;
		  background-color: #000;
		  z-index: 3;                    /* sits above body cells */
		  font-weight: 500;
		  text-transform: uppercase;
		  font-size: 0.9rem;
		}

		/* Alternating and hover rows */
		#rfid-compare .rfid-compare-table tbody tr:nth-child(even) {
		  background-color: rgba(255, 255, 255, 0.02);
		}

		#rfid-compare .rfid-compare-table tbody tr:hover {
		  background-color: rgba(192, 181, 164, 0.06);
		}

		/* COLUMN WIDTHS */

		/* Column 1 default (no horizontal scroll) */
		#rfid-compare .rfid-compare-table th:nth-child(1),
		#rfid-compare .rfid-compare-table td:nth-child(1) {
		  width: 350px;
		  position: sticky;
		  left: 0;
		  background-color: #000;        /* match table bg so it looks solid */
		  z-index: 2;                    /* above scrolled columns, below header */
		  border-right: 1px solid var(--dark-4);
		}

		/* Text inside column 1 limited to 300px when NOT scrolling */
		#rfid-compare .col1-inner {
		  width: 300px;       /* inner text width */
		  max-width: 300px;
		  overflow-wrap: break-word;
		  font-weight: 300;
		}

		/* Column 1 when horizontal scroll is active */
		#rfid-compare .rfid-compare-table.rfid-scrolling th:nth-child(1),
		#rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(1) {
		  width: 240px;                  /* shrink first column when scrolling */
		}

		/* Remove the inner text limit when scrolling */
		#rfid-compare .rfid-compare-table.rfid-scrolling .col1-inner {
		  width: 100%;
		  max-width: none;
		}

		/* Make header cell of col 1 sit on top of everything */
		.rfid-compare-table thead th:nth-child(1) {
		  background-color: #000 !important;   /* REQUIRED FIX */
		  z-index: 5 !important;               /* sits above scrolling columns */
		}

		/* Columns 2, 3, and 4 remaining width */
		.rfid-compare-table th:nth-child(2),
		.rfid-compare-table td:nth-child(2),
		.rfid-compare-table th:nth-child(3),
		.rfid-compare-table td:nth-child(3),
		.rfid-compare-table th:nth-child(4),
		.rfid-compare-table td:nth-child(4) {
		  width: calc((100% - 300px) / 3);
		}

		/* Center-align content for columns 2, 3, and 4 */
		#rfid-compare .rfid-compare-table th:nth-child(2),
		#rfid-compare .rfid-compare-table td:nth-child(2),
		#rfid-compare .rfid-compare-table th:nth-child(3),
		#rfid-compare .rfid-compare-table td:nth-child(3),
		#rfid-compare .rfid-compare-table th:nth-child(4),
		#rfid-compare .rfid-compare-table td:nth-child(4) {
		  text-align: left;
		}

		/* When horizontal scroll is active, add extra breathing room
		   on the RIGHT side of text in columns 2, 3 and 4 */
		#rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(2),
		#rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(3),
		#rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(4) {
		  padding-right: 15px;  /* tweak 20px to taste */
		}


		/* Toggle controls for model columns */
		#rfid-compare .rfid-toggle-controls {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;   /* centers horizontally */
		  align-items: center;
		  gap: 0.75rem;
		  margin-bottom: 0.75rem;
		  font-size: var(--fs-0);
		  text-align: center;        /* optional ensures inner labels center nicely */
		  padding-bottom: 20px;
		}


		#rfid-compare .rfid-toggle-controls span {
		  opacity: 0.8;
		}

		#rfid-compare .rfid-toggle-controls label {
		  display: inline-flex;
		  align-items: center;
		  gap: 0.35rem;
		  cursor: pointer;
		  opacity: 0.9;
		}

		#rfid-compare .rfid-toggle-controls input[type="checkbox"] {
		  accent-color: #c0b5a4; /* optional: matches palette */
		}

		/* Scroll hint message */
		#rfid-scroll-hint {
		  text-align: center;
		  font-size: var(--fs-0);
		  opacity: 0.7;
		  margin-bottom: 0.75rem;
		  display: none;
		}

		/* td Font Sizes */

		.table-td {
			font-size: 14px;
			font-weight: 300;
		}

		/* Medium screens (tablets) */
		@media (max-width: 992px) {
			.table-td {
				font-size: 13px;
				font-weight: 300;
			}
		}

		/* Small screens (phones) */
		@media (max-width: 768px) {
			.table-td {
				font-size: 12px;
				font-weight: 300;
				line-height: 1.4; /* helps multiline entries */
			}
		}

		/* Extra small screens */
		@media (max-width: 480px) {
			.table-td {
				font-size: 11px;
				font-weight: 300;
				line-height: 1.4;
			}
		}

		/* Phones: make column 1 narrower */
		@media (max-width: 900px){

		  /* Force the first column width (normal + scrolling state) */
		  #rfid-compare .rfid-compare-table th:nth-child(1),
		  #rfid-compare .rfid-compare-table td:nth-child(1),
		  #rfid-compare .rfid-compare-table.rfid-scrolling th:nth-child(1),
		  #rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(1){
			width: 190px !important;        /* << change this number to taste */
			max-width: 220px !important;
			min-width: 220px !important;

			padding-left: 8px;
			padding-right: 8px;
		  }

		  /* Keep the text inside col 1 constrained too */
		  #rfid-compare .col1-inner,
		  #rfid-compare .rfid-compare-table.rfid-scrolling .col1-inner{
			width: 180px !important;
			max-width: 180px !important;
			white-space: normal;
			overflow-wrap: anywhere;
			word-break: break-word;
		  }

		}


/* ==========================================================
   RFID SPECIFICATIONS 3-COLUMN GRID WITH RESPONSIVE SPACER
   ========================================================== */

		#rfid-specifications .rfid-image-grid {
		  display: grid;
		  grid-template-columns: 1fr 40px 1fr;   /* Col1, Spacer, Col2 */
		  gap: 2rem;
		  align-items: center;
		  justify-items: center;
		}

		#rfid-specifications .rfid-image-cell img {
		  width: 100%;
		  height: auto;
		  object-fit: contain;
		}

		/* Spacer column height does not matter on desktop */
		#rfid-specifications .rfid-spacer {
		  width: 40px;
		}

		/* ===========================
		   MOBILE (<992px)
		   =========================== */
		@media (max-width: 992px) {
		  #rfid-specifications .rfid-image-grid {
			grid-template-columns: 1fr;   /* stack vertically */
		  }

		  /* Spacer becomes a horizontal gap of 20px */
		  #rfid-specifications .rfid-spacer {
			width: 100%;
			height: 0px;     /* acts like spacing between rows */
		  }
		}


/* ==========================================================
   RFID MOBILE DROP DOWN SELECT DISPLAY OPTION
   ========================================================== */

		/* Mobile + tablet only */
		.mobile-only {
		  display: none;
		}

		@media (max-width: 1200px) {
		  .mobile-only {
			display: block;
			margin-bottom: 1rem;
		  }

		  .rfid-view-select {
			width: 355px;
			max-width: calc(100% - 2rem);
			margin: 0 auto 1.25rem auto;
		  }

		  .rfid-select {
			width: 100%;
		  }
		}

		/* Base dropdown styling */
		.rfid-select {
		  width: 100%;
		  padding: 0.6rem 0.75rem;
		  background: var(--dark-4);
		  color: var(--light-1);
		  border: 1px solid var(--brown-1);
		  border-radius: 6px;
		  font-family: var(--font-body);
		  -webkit-appearance: none;
		  appearance: none;
		  font-size: 16px;
		}

		#rfid-scroll-hint {
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 200ms ease;
		}

		/* Cards container (used for mobile/tablet "Cards" view) */
		#rfid-compare .rfid-compare-cards {
		  display: none;              /* JS toggles this */
		  max-width: 900px;
		  margin: 0 auto;
		  gap: 14px;
		}

		/* Individual card */
		#rfid-compare .rfid-card {
		  border: 1px solid var(--dark-4);
		  border-radius: 10px;
		  background: #000;
		  padding: 14px 16px;
		}

		/* Bold feature title */
		#rfid-compare .rfid-card-title {
		  display: block;
		  width: 100%;
		  font-weight: 700;
		  margin-bottom: 10px;
		}

		/* Rows inside card */
		#rfid-compare .rfid-card-row {
		  display: grid;
		  grid-template-columns: 90px 1fr;
		  gap: 10px;
		  padding: 8px 0;
		  border-top: 1px solid rgba(255,255,255,0.06);
		  padding-left: 10px;
		}

		#rfid-compare .rfid-card-row:first-of-type {
		  border-top: none;
		  padding-top: 0;
		}

		/* Model label (Standard / Plus / Flex) */
		#rfid-compare .rfid-card-label {
		  font-weight: 600;
		  opacity: 0.95;
		}

		#rfid-compare .rfid-card-value {
		  padding-left: 10px;
		  font-weight: 300;
		}

		#rfid-compare .rfid-card-value br {
		  content: "";
		  display: block;
		  margin-bottom: 6px;
		  padding-left: 10px;
		}


/* ==============================================
   RFID EASY GRID 
   ============================================== */

		#rfid-easy .rfid-easy-grid {
		  display: grid;
		  grid-template-columns: repeat(6, minmax(0, 1fr));  /* 6 equal columns */
		  gap: 1.5rem;
		  align-items: stretch;
		  justify-items: center;
		}

		#rfid-easy .rfid-easy-item {
		  text-align: center;
		  /* Optional styling: */
		  /* padding: 1rem; */
		  /* border: 1px solid rgba(255,255,255,0.08); */
		}

		/* < 992px 3 columns (2 rows, 3 cols = 2x3) */
		@media (max-width: 992px) {
		  #rfid-easy .rfid-easy-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		  }
		}

		/* < 768px 2 columns (3 rows, 2 cols = 3x2) */
		@media (max-width: 768px) {
		  #rfid-easy .rfid-easy-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		  }
		}


		/* Re-enable bullets in Design */
		#design ul {
		  list-style: disc;          /* show bullets */
		  margin-left: 20px;      /* space to show bullets */
		  padding-left: 1.25rem;     /* consistent indent */
		}
		#design li {
		  padding: 3px 0;
		  padding-left: 0.2em;  /* this increases the gap between bullet and text */
		  padding-right: 10px;
		}



/* ==========================================================
   More Info
   ========================================================== */

		/* Visible image area height (reference for JS) */
		.more-info-stage {
		  display: flex;
		  align-items: stretch;
		  width: 100%;
		  height: 60vh;          /* <-- image height reference */
		  overflow: hidden;

		  --reveal: 0;           /* set by JS (0 1) */
		  --gap: 20px;           /* 20px buffer between columns */
		  gap: calc(var(--gap) * var(--reveal));
		}

		.more-info-text-inner {
		  color: #fff;
		  font-size: clamp(2rem, 4vw, 4rem);
		  text-transform: uppercase;
		  letter-spacing: 0.08em;

		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;

		  transform: translateY(14px) scale(0.92);
		}

		.more-info-stage.is-split .more-info-text-inner {
		  visibility: visible;
		  pointer-events: auto;
		  animation: moreinfoZoomIn 700ms cubic-bezier(.16, 1, .3, 1) forwards;
		}

		@keyframes moreinfoZoomIn {
		  from { opacity: 0; transform: translateY(14px) scale(0.92); }
		  to   { opacity: 1; transform: translateY(0) scale(1); }
		}

		/* Mobile: stack */
		@media (max-width: 768px) {
		  .more-info-stage {
			flex-direction: column;
			height: auto;
			gap: 0;
		  }

		  .more-info-text-inner {
			opacity: 1 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			transform: none !important;
			animation: none !important;
		  }
		}


/* ==========================================================
   Home Image Coverage
   ========================================================== */

		/* Make #home able to grow if content is taller than the viewport */
		#home {
		  height: auto !important;
		  min-height: 100vh;
		}

		#home .slides {
		  position: relative;     /* instead of absolute sizing trap */
		  height: auto;
		  min-height: 100vh;
		}

		#home .slide-wrap {
		  position: relative;     /* stop absolute 100% clipping */
		  height: auto;
		  min-height: 100vh;
		  overflow: visible;      /* don't cut off CTA */
		  padding: 30px 0 40px; /* safe breathing room for header/footer */
		  box-sizing: border-box;
		}

		/* keep the background image behaving like a background */
		#home .slide-img {
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}



/* ===============================================
   USE CASES GRID
   =============================================== */

		#uses,
		#equipment{
		  --uses-gap: 20px;
		  --uses-max-width: 1200px; /* adjust if needed */
		}

		#uses .uses-grid,
		#equipment .equipment-grid{
		  display: grid;
		  grid-template-columns: repeat(4, minmax(0, 1fr));
		  gap: var(--uses-gap);

		  /* THIS is the key fix */
		  max-width: var(--uses-max-width);
		  margin: 0 auto;

		  padding-left: calc(var(--uses-gap) * 3);
		  padding-right: calc(var(--uses-gap) * 3);

		  box-sizing: border-box;
		}

		#uses .uses-card,
		#equipment .equipment-card{
		  border: 1px solid rgba(255,255,255,0.0);
		  border-radius: 12px;
		  padding: 18px;
		  text-align: center;
		  min-height: 120px;

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

		#equipment .equipment-card img{
		  height: auto;
		  max-width: 100%;
		  display: block;
		  align-items: center;
		}

		/* Mobile ONLY */
		@media (max-width: 768px){
		  #uses .uses-grid,
		  #equipment .equipment-grid{
			grid-template-columns: repeat(2, minmax(0, 1fr));

			/* mobile behaves naturally */
			max-width: none;
			padding-left: 16px;
			padding-right: 16px;
		  }
		}


/* ================================================
   Design Images
   ================================================ */

		/* ===== Two-column media grids ===== */
		.media-grid{
		  width: 100%;
		  display: grid;
		  gap: 24px;
		  margin: 24px 0;
		  align-items: center;              /* vertically center both columns */
		}

		/* Image LEFT (40%) | Text RIGHT (60%) */
		.media-grid--img-left{
		  grid-template-columns: 40% 60%;
		}

		/* Text LEFT (60%) | Image RIGHT (40%) */
		.media-grid--img-right{
		  grid-template-columns: 60% 40%;
		}

		/* Center the IMAGE within its grid cell */
		.media-grid__img{
		  display: flex;
		  justify-content: center;          /* horizontal center */
		  align-items: center;              /* vertical center */
		}

		/* Keep the image behaving like an image */
		.media-grid__img img{
		  display: block;
		  width: 100%;
		  max-width: 340px;                 /* optional cap on desktop */
		  height: auto;
		  border-radius: 12px;              /* optional */
		}

		/* Text: vertically centered, left aligned */
		.media-grid__text{
		  display: flex;
		  flex-direction: column;
		  justify-content: center;          /* vertical center */
		  align-items: flex-start;          /* left */
		  min-width: 0;
		  text-align: left;
		}

		/* Mobile + tablet: stack to 1 column, image always on top */
		@media (max-width: 900px){
		  .media-grid{
			grid-template-columns: 1fr !important;
			gap: 16px;
			align-items: stretch;           /* avoids odd centering on tall content */
		  }
		  .media-grid__img{ order: 1; }
		  .media-grid__text{ order: 2; }
		}


/* ===============================================
   Accordion Buttons
   =============================================== */

		#mql-button .accordion-button-block,
		#design-button .accordion-button-block{
		  width: 100%;
		  height: 180px;
		  padding: 40px 10px;

		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  text-align: center;
		}

		/* === Accordion panel (closed) === */

		#mql-button #mql-accordion-button,
		#design-button #design-accordion-button{
		  overflow: hidden;
		  max-height: 0;
		  opacity: 0;
		  transform: translateY(-6px);

		  transition:
			max-height 1000ms cubic-bezier(0.4, 0.0, 0.2, 1),
			opacity 1000ms cubic-bezier(0.4, 0.0, 0.2, 1),
			transform 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);

		  pointer-events: none;
		}

		/* === Accordion OPEN state === */

		#mql-button.is-open,
		#design-button.is-open{
		  position: relative;   /* iOS tap / stacking correctness */
		  z-index: 50;
		}

		#mql-button.is-open #mql-accordion-button,
		#design-button.is-open #design-accordion-button,{
		  /* max-height handled by JS */
		  opacity: 1;
		  transform: translateY(0);
		  overflow: visible;
		  pointer-events: auto;
		}

		/* === Scroll area behavior ===
		   Desktop/tablet: normal flow (no sticky footer overlay)
		   Mobile: sticky footer + reserve space
		*/

		/* Desktop/tablet default: no artificial bottom padding */
		#mql-button .accordion-button-wrap,
		#design-button .accordion-button-wrap{
		  padding-bottom: 0;
		}

		/* Desktop/tablet: make the accordion taller so it feels "page-like" */
		@media (min-width: 900px){
		  #mql-button .accordion-button-wrap,
		  #design-button .accordion-button-wrap{
			max-height: 88vh;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain; /* stops scroll chaining into page */
		  }
		}

		/* === Hover effects (desktop) === */

		#mql-button .accordion-button-toggle .accordion-button-block,
		#design-button .accordion-button-toggle .accordion-button-block{
		  transition: opacity 0.4s ease-in-out;
		}

		#mql-button .accordion-button-toggle:hover .accordion-button-block,
		#design-button .accordion-button-toggle:hover .accordion-button-block{
		  opacity: 0.25;
		}

		#mql-button .accordion-button-toggle:hover .accordion-button-block:hover,
		#design-button .accordion-button-toggle:hover .accordion-button-block:hover{
		  opacity: 1;
		}

		/* === Accordion spacing === */

		#mql-button .accordion-button-expand,
		#design-button .accordion-button-expand{
		  margin-top: 0;
		  padding: 0;
		}

		#mql-button .btn-outline,
		#design-button .btn-outline{
		  margin: 0 auto;
		}

		/* Smooth text swap inside the button */
		#mql-button .btn-outline .js-mql-label,
		#design-button .btn-outline .js-mql-label{
		  display: inline-block;
		  opacity: 1;
		  white-space: nowrap;

		  transition:
			opacity 600ms cubic-bezier(0.4, 0.0, 0.2, 1),
			transform 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
		}

		#mql-button .btn-outline.is-fading .js-mql-label,
		#design-button .btn-outline.is-fading .js-mql-label{
		  opacity: 0;
		  transform: translateY(-2px);
		}

		/* === Mobile tweaks === */

		@media (max-width: 900px){
		  #mql-button .accordion-button-block,
		  #design-button .accordion-button-block{
			padding: 10px;
			height: auto;
			margin-top: 18px;
		  }

		  #mql-button .accordion-button-block,
		  #design-button .accordion-button-block{
			display: flex;
			flex-direction: column;
		  }

		  #mql-button .accordion-button-expand li:first-child{ padding-top: 5px; }
		  #mql-button .accordion-button-expand li:last-child{ padding-bottom: 10px; }
		  #design-button .accordion-button-expand li:first-child{ padding-top: 5px; }
		  #design-button .accordion-button-expand li:last-child{ padding-bottom: 10px; }
		}

		/* Reduce gap between #mql-button and #uses when accordion is CLOSED */
		#mql-button:not(.is-open),
		#design-button:not(.is-open){
		  margin-bottom: 60px;
		}

		/* Remove extra Bootstrap bottom margin inside mql-button only */
		#mql-button .col-md-12.mb-5,
		#design-button .col-md-12.mb-5{
		  margin-bottom: 0 !important;
		}

		/* === Style ONLY top-level li items === */

		#mql-button ul.accordion-button-expand > li,
		#design-button ul.accordion-button-expand > li{
		  padding: 4px 0;
		}

		#mql-button ul.accordion-button-expand > li:first-child,
		#design-button ul.accordion-button-expand > li:first-child{
		  padding-top: 10px;
		}

		#mql-button ul.accordion-button-expand > li:last-child,
		#design-button ul.accordion-button-expand > li:last-child{
		  border-bottom: 1px solid rgba(255, 255, 255, 0.0);
		  padding-bottom: 20px;
		}

		#mql-button ul.accordion-button-expand > li > p,
		#design-button ul.accordion-button-expand > li > p{
		  font-size: 1.3rem;
		  line-height: 1.5;
		}

		/* === Bullet lists inside panel === */

		#mql-button .panel-bullets,
		#design-button .panel-bullets{
		  margin: 0;
		  padding-left: 30px;
		  list-style: disc;
		}

		#mql-button .panel-bullets > li,
		#design-button .panel-bullets > li{
		  padding: 6px 0;
		  padding-left: 10px;
		}

		/* Numbered list ONLY for MQL accordion panel bullets */
		#mql-accordion-button ol.panel-bullets,
		#design-accordion-button ol.panel-bullets{
		  list-style: decimal;
		  padding-left: 35px;
		}

		#mql-accordion-button ol.panel-bullets > li::marker,
		#design-accordion-button ol.panel-bullets > li::marker{
		  font-weight: 700;
		}

		#mql-accordion-button ol.panel-bullets > li,
		#design-accordion-button ol.panel-bullets > li {
		  padding-left: 10px;
		}

		/* === Animation fallbacks === */

		#mql-button.is-open #mql-accordion-button.anim-ready .js-fade,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-fade-left,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-fade-right,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-zoom,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-zoom-in,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-zoom-out,
		#design-button.is-open #design-accordion-button.anim-ready .js-fade,
		#design-button.is-open #design-accordion-button.anim-ready .js-fade-left,
		#design-button.is-open #design-accordion-button.anim-ready .js-fade-right,
		#design-button.is-open #design-accordion-button.anim-ready .js-zoom,
		#design-button.is-open #design-accordion-button.anim-ready .js-zoom-in,
		#design-button.is-open #design-accordion-button.anim-ready .js-zoom-out{
		  visibility: visible;
		}

		#mql-button.is-open #mql-accordion-button.anim-ready .js-zoom-in,
		#design-button.is-open #design-accordion-button.anim-ready .js-zoom-in{
		  animation: accZoomIn 700ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
		}

		@keyframes accZoomIn{
		  from{ opacity:0; transform:scale(0.96); }
		  to{ opacity:1; transform:scale(1); }
		}

		#mql-button.is-open #mql-accordion-button.anim-ready .js-split-lines-up,
		#design-button.is-open #design-accordion-button.anim-ready .js-split-lines-up{
		  animation: accFadeUp 650ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
		}

		@keyframes accFadeUp{
		  from{ opacity:0; transform:translateY(10px); }
		  to{ opacity:1; transform:translateY(0); }
		}

		#mql-button.is-open #mql-accordion-button.anim-ready .js-reveal-parallax-l,
		#mql-button.is-open #mql-accordion-button.anim-ready .js-reveal-parallax-r,
		#design-button.is-open #design-accordion-button.anim-ready .js-reveal-parallax-l,
		#design-button.is-open #design-accordion-button.anim-ready .js-reveal-parallax-r{
		  animation: accFadeUp 650ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
		}

		/* === QIO cards (mobile-safe) === */

		#mql-button .qio-cards,
		#mql-button .qio-card,
		#design-button .qio-cards,
		#design-button .qio-card{
		  box-sizing: border-box;
		  max-width: 100%;
		}

		@media (max-width: 900px){
		  #mql-button .qio-cards,
		  #design-button .qio-cards{
			padding-left: 10px;
			padding-right: 10px;
		  }

		  #mql-button .qio-card,
		  #design-button .qio-card{
			width: 100%;
		  }
		}

		#mql-button .qio-card-row,
		#design-button .qio-card-row{
		  display: flex;
		  align-items: flex-start;
		  gap: 15px;
		  padding: 6px 0;
		  border-top: 1px solid rgba(255,255,255,0.08);
		}

		#mql-button .qio-card-row span,
		#design-button .qio-card-row span{
		  flex: 0 0 auto;
		  min-width: 110px;
		  opacity: 0.75;
		  text-align: left;
		}

		#mql-button .qio-card-row b,
		#design-button .qio-card-row b{
		  flex: 1 1 auto;
		  text-align: left;
		  font-weight: 400;
		}

		/* Prevent Bootstrap row from bleeding outside container in this accordion */
		#mql-accordion-button .row,
		#design-accordion-button .row{
		  margin-left: 0;
		  margin-right: 0;
		}

		/* === Footer behavior:
		   Desktop/tablet = normal footer at end of content (NOT sticky)
		   Mobile = sticky footer bar
		   === */

		/* Desktop/tablet default: footer sits in flow */
		#mql-button .accordion-button-footer,
		#design-button .accordion-button-footer{
		  position: static;
		  padding: 0;
		  margin-top: 40px;
		  background: none;
		  backdrop-filter: none;
		  -webkit-backdrop-filter: none;
		  box-shadow: none;
		}

		/* Only show when accordion is open */
		#mql-button.is-open .accordion-button-footer,
		#design-button.is-open .accordion-button-footer {
		  display: block;
		}

		/* target both sections */
		#mql-button button[aria-expanded],
		#design-button button[aria-expanded]{
		  min-width: 180px;      /* adjust until "Discover More" fits */
		  justify-content: center;
		  text-align: center;
		  white-space: nowrap;
		}

		/* Desktop only: sticky footer not needed */
		@media (min-width: 901px){
		  #mql-button .accordion-button-footer,
		  #design-button .accordion-button-footer{
			position: static;
			background: transparent;
			backdrop-filter: none;
			padding-bottom: 0;
			box-shadow: none;
		  }
		}

		/* Desktop/tablet: page scroll accordion (no internal scroller) + sticky Close at top */
		@media (min-width: 1025px){
		  /* Dock the expanded content container under the toolbar */
		  #mql-button.is-open .accordion-button-wrap,
		  #design-button.is-open .accordion-button-wrap{
			position: sticky;
			top: 150px;
			max-height: calc(100vh - 120px);
			overflow-y: auto;
			overflow-x: hidden;
			overscroll-behavior: contain;
		  }
		  /* Keep the Close row always visible inside the docked container */
		  #mql-button.is-open .accordion-button-block,
		  #design-button.is-open .accordion-button-block{
			position: sticky;
			top: 0;
			z-index: 5;
			background: #000;
		  }
		}

		/* Mobile + tablet: kill the inner scroll container (page scrolls normally) */
		@media (max-width: 1024px){
		  #mql-button.is-open .accordion-button-wrap,
		  #design-button.is-open .accordion-button-wrap{
			max-height: none !important;
			overflow: visible !important;
			padding-right: 0 !important;
			overscroll-behavior: auto !important;
		  }
		}

		/* Close button row scrolls up with content, then sticks at top */
		  #mql-button.is-open .accordion-button-block,
		  #design-button.is-open .accordion-button-block{
			position: sticky;
			top: 0;
			z-index: 200;
			background: #000; /* prevents content showing through */
		  }

		/* Mobile + tablet: Close row scrolls with content, then sticks under the fixed navbar */
		@media (max-width: 1024px){
		  #mql-button.is-open .accordion-button-block,
		  #design-button.is-open .accordion-button-block{
			position: sticky;
			top: var(--toolbar-h, 0px);
			z-index: 800;
			background: #000;
		  }
		}


		@media (min-width: 901px){
		  #mql-button .accordion-button-block,
		  #design-button .accordion-button-block{
			background: #000 !important;
			opacity: 1 !important;
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
		  }
		}

		  /* Footer not sticky on desktop/tablet */
		  #mql-button .accordion-button-footer,
		  #design-button .accordion-button-footer{
			position: static;
			background: transparent;
			backdrop-filter: none;
			box-shadow: none;
		  }
		}



/* =================================================
   Mobile only: Internal Button Accordion Scrolling
   ================================================= */

		@media (max-width: 900px){

		  /* Keep EACH open accordion as its own scroll container */
		  #mql-button.is-open .accordion-button-wrap,
		  #design-button.is-open .accordion-button-wrap{
			max-height: 75vh;
			overflow-y: auto;
			overflow-x: hidden;

			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain;

			padding-right: 0;
			padding-bottom: calc(140px + env(safe-area-inset-bottom));
		  }

		  /* Sticky "Close" row (once JS moves it inside the scroll container) */
			#mql-button .accordion-button-block,
			#design-button .accordion-button-block{
			  position: sticky;
			  top: 0;
			  z-index: 30;

			  /* Ensure solid background while sticky */
			  background: var(--accordion-bg, #000000);
		  }

		  /* Footer should NOT be sticky on mobile */
		  #mql-button .accordion-button-footer,
		  #design-button .accordion-button-footer{
			position: static;
			bottom: auto;

			/* keep safe-area padding if you want */
			padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
			margin-top: 24px;

			background: transparent;
			-webkit-backdrop-filter: none;
			backdrop-filter: none;

			box-shadow: none;
		  }

		  #mql-button .accordion-button-close-link,
		  #design-button .accordion-button-close-link{
			display: inline-block;
			padding: 10px 14px;
		  }
		}



/* ===============================================
   Quantity Interval Outcome
   =============================================== */

		#quantity-interval-outcome .qio-grid{
		  display: grid;
		  grid-template-columns: 1fr 1fr 1fr 2fr; /* 20/20/20/40 equivalent */
		  gap: 0px;
		  width: 100%;
		  box-sizing: border-box;
		}

		#quantity-interval-outcome .qio-cell{
		  border: 1px solid rgba(255,255,255,0.15);
		  border-radius: 0px;
		  padding: 12px 12px;
		  line-height: 1.4;
		  font-size: inherit;
		  font-weight: inherit;
		  min-width: 0;               /* allows grid items to shrink */
		  white-space: normal;        /* allows text wrapping */
		  overflow-wrap: anywhere;    /* wraps long strings safely */
		  word-break: break-word;     /* fallback */
		}

		#quantity-interval-outcome .qio-head{
		  font-weight: 600;
		  border-color: rgba(255,255,255,0.25);
		  background: rgba(255,255,255,0.06);
		  white-space: nowrap;
		  background-color: rgba(255, 255, 255, 0.08); /* subtle light-on-dark */
		  color: #ffffff;                                  /* keep white text */
		  font-weight: 500;
		}

		/* Mobile card version (hidden on desktop) */
		#quantity-interval-outcome .qio-cards{
		  display: none;
		  margin-top: 10px;
		}

		#quantity-interval-outcome .qio-card{
		  border: 1px solid rgba(255,255,255,0.15);
		  border-radius: 10px;
		  padding: 14px 14px;
		  margin-bottom: 12px;
		  background: rgba(255,255,255,0.04);
		}

		#quantity-interval-outcome .qio-card-title{
		  font-weight: 600;
		  margin-bottom: 8px;
		}

		#quantity-interval-outcome .qio-card-row{
		  display: flex;
		  justify-content: space-between;
		  gap: 12px;
		  padding: 6px 0;
		  border-top: 1px solid rgba(255,255,255,0.08);
		}

		#quantity-interval-outcome .qio-card-row span{
		  opacity: 0.75;
		}

		/* Switch to cards at tablet or smaller (matches your 900px pattern) */
		@media (max-width: 900px){
		  #quantity-interval-outcome .qio-grid{ display: none; }
		  #quantity-interval-outcome .qio-cards{ display: block; }
		}


/* =====================================================
   Lubrication Method vs Operating Condition Alignment
   ===================================================== */

		#operating-condition .qio-grid{
		  display: grid;
		  grid-template-columns: 1.1fr 1.45fr 1.45fr; /* 3 columns */
		  gap: 0px;
		  width: 100%;
		  box-sizing: border-box;
		}

		#operating-condition .qio-cell{
		  border: 1px solid rgba(255,255,255,0.15);
		  border-radius: 0px;
		  padding: 12px 12px;
		  line-height: 1.4;
		  font-size: inherit;
		  font-weight: inherit;
		  min-width: 0;
		  white-space: normal;
		  overflow-wrap: anywhere;
		  word-break: break-word;
		}

		#operating-condition .qio-head{
		  border-color: rgba(255,255,255,0.25);
		  background-color: rgba(255, 255, 255, 0.08);
		  color: #ffffff;
		  font-weight: 500;
		  white-space: nowrap;
		}

		/* Mobile card version (hidden on desktop) */
		#operating-condition .qio-cards{
		  display: none;
		  margin-top: 10px;
		}

		#operating-condition .qio-card{
		  border: 1px solid rgba(255,255,255,0.15);
		  border-radius: 10px;
		  padding: 14px 14px;
		  margin-bottom: 12px;
		  background: rgba(255,255,255,0.04);
		}

		#operating-condition .qio-card-title{
		  font-weight: 600;
		  margin-bottom: 8px;
		}

		#operating-condition .qio-card-row{
		  display: flex;
		  align-items: flex-start;
		  gap: 15px;
		  padding: 6px 0;
		  border-top: 1px solid rgba(255,255,255,0.08);
		}

		#operating-condition .qio-card-row span{
		  flex: 0 0 auto;
		  min-width: 110px;
		  opacity: 0.75;
		  text-align: left;
		}

		#operating-condition .qio-card-row b{
		  flex: 1 1 auto;
		  text-align: left;
		  font-weight: 400;
		}

		/* Switch to cards at tablet or smaller */
		@media (max-width: 900px){
		  #operating-condition .qio-grid{ display: none; }
		  #operating-condition .qio-cards{ display: block; }
		}

		/* Smaller, wrapped subtext inside QIO header cells */
		.qio-head .qio-subhead {
		  display: block;          /* forces wrap onto next line */
		  font-size: 0.85em;       /* smaller than fs-1 */
		  font-weight: 400;        /* lighter than header */
		  opacity: 0.85;           /* subtle hierarchy */
		  margin-top: 4px;
		  line-height: 1.35;
		  white-space: normal;     /* allow wrapping */
		}


		/* Restore ordered list numbering for solution content */
		.solution-list {
		  list-style: decimal;
		  padding-left: 20px;
		  margin-top: 12px;
		}

		.solution-list li {
		  padding-left: 15px;   /* THIS controls gap between "1." and text */
		  margin-bottom: 15px;
		}


		/* Five Rs of Lubrication list */
		.five-r-list {
		  margin: 0px;
		  padding-left: 30px;
		  list-style: disc;
		}

		.five-r-list li {
		  margin-bottom: 6px;
		  padding: 6px 0;
		  padding-left: 10px;   /* pushes text right from bullet */
		}


/* ================================================
   Responsive image sizing
   ================================================ */

		.responsive-img {
		  display: block;
		  width: 90%;
		  max-width: 100%;
		  height: auto;
		  margin: 0 auto;
		}

		/* Mobile: full width */
		@media (max-width: 768px) {
		  .responsive-img {
			width: 100%;
		  }
		}


		.responsive-segmentation {
		  display: block;
		  width: 60%;
		  max-width: 100%;
		  height: auto;
		  margin: 0 auto;
		}

		/* Mobile: full width */
		@media (max-width: 768px) {
		  .responsive-segmentation {
			width: 100%;
		  }
		}



/* ===============================================
   Intro Fake Button
   =============================================== */

		#intro .intro-notice{
		  display: inline-flex;
		  padding: 0.7rem 1.25rem;
		  flex-direction: column;        /* stack lines */
		  align-items: center;
		  justify-content: center;
		  text-align: center;
		  white-space: normal;           /* ensure wrapping/line breaks allowed */
		  line-height: 1.2;

		  /* match .btn-outline:hover */
		  background: rgba(255,255,255,0.4);
		  border: 1px solid #c0b5a4;
		  color: rgba(192,181,164,1.0);

		  border-radius: 8px;
		  text-decoration: none;
		  font-family: var(--font-body);
		  font-weight: 400;

		  /* IMPORTANT: no hover effect + no cursor change */
		  transition: none;
		  cursor: default;
		}

		/* Lock it so hover/focus/active never change anything */
		#intro .intro-notice:hover,
		#intro .intro-notice:focus,
		#intro .intro-notice:focus-visible,
		#intro .intro-notice:active{
		  background: rgba(255,255,255,0.4);
		  border: 1px solid #c0b5a4;
		  color: rgba(192,181,164,1.0);
		  outline: none;
		  transform: none;
		  cursor: default;
		}

		#intro .intro-notice-wrap{
		  display: flex;
		  justify-content: center;
		  padding-top: 20px;
		  padding-bottom: 10px;
		}

		#intro .intro-notice .notice-line{
		  display: block;
		}

/* ================================================
   Entire page padding
   ================================================ */

		.text-scroll-h,
		.text-scroll-h-2 {
		  width: 100%;              /* instead of 100vw */
		  margin: 0;                /* remove horizontal margins */
		  padding: 0 5rem;          /* keep the intended breathing room */
		  box-sizing: border-box;   /* padding stays inside the width */
		}

		@media (max-width: 768px) {
		  .text-scroll-h,
		  .text-scroll-h-2 {
			padding: 0 1rem;        /* smaller breathing room on mobile */
		  }
		}

		.page-padding {
		  padding-left: 10px;
		  padding-right: 10px;
		}



/* ===============================================
   Scrollable Container
   =============================================== */

		/* Scrollable text for accordion */
		.accordion-button-wrap {
		  max-height: 70vh;
		  overflow-y: auto;
		  overflow-x: hidden;
		  overscroll-behavior-y: auto;
		  scrollbar-gutter: stable;
		  padding-right: 18px;
		  box-sizing: border-box;
		  position: relative;
		}

		/* Safari fallback text only */
		.accordion-button-wrap p,
		.accordion-button-wrap li,
		.accordion-button-wrap .media-grid__text {
		  padding-right: 10px;
		}

		/* Smooth scrolling on touch devices */
		.accordion-button-wrap {
		  -webkit-overflow-scrolling: touch;
		}

		.accordion-button-wrap::-webkit-scrollbar {
		  width: 4px;
		}
		.accordion-button-wrap::-webkit-scrollbar-thumb {
		  background: rgba(192,181,164,0.6);
		  border-radius: 4px;
		}


/* ===============================================
   Accordion Close Button or Text
   =============================================== */

		.accordion-button-footer {
		  text-align: center;
		  position: sticky;
		  bottom: 0;
		  z-index: 10;
		  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
		  margin-top: 24px;
		  background: rgba(0,0,0,0.75);
		  backdrop-filter: blur(6px);
		}

		.accordion-close-btn {
		  background: transparent;
		  border: 1px solid #c0b5a4;
		  color: #c0b5a4;
		  padding: 10px 24px;
		  font-size: 14px;
		  letter-spacing: 0.08em;
		  text-transform: uppercase;
		  cursor: pointer;
		}

		.accordion-close-btn:hover {
		  background: rgba(192,181,164,0.15);
		}

		/* Close link styling */
		.accordion-button-close-link {
		  font-size: 14px;
		  letter-spacing: 0.08em;
		  text-transform: uppercase;
		  color: #c0b5a4;
		  text-decoration: none;
		  cursor: pointer;
		  display: inline-block;
		  padding: 10px 14px;
		}

		.accordion-button-close-link:hover {
		  text-decoration: underline;
		}


/* =============================================
   MQL Accordion layout
   ============================================= */

		#info-list .acc-block .acc-toggle-icon{
		  margin-left: auto;
		}


/* ============================
   More Info List Accordion (clean layout + 1. 2. 3. + tighter rows)
   ============================ */

		/* Reset counter ONCE for the whole MQL list */
		#info-list .acc-toggle{
		  counter-reset: mql-counter;
		}

		/* Row layout */
		#info-list .acc-block{
		  display: flex;
		  align-items: center;
		  justify-content: flex-start;
		  text-align: left;
		  width: 100%;
		}

		/* Number (hide 01/02/03 text, show 1. 2. 3.) */
		#info-list .acc-no{
		  counter-increment: mql-counter;

		  /* keep column width + spacing */
		  min-width: 2.2ch;
		  margin-right: 15px;
		  text-align: right;

		  /* hide the original 01/02/03 without breaking layout */
		  color: transparent;
		  position: relative;
		}

		/* injected number */
		#info-list .acc-no::before{
		  content: counter(mql-counter) ".";
		  color: var(--light-1);
		  position: absolute;
		  right: 0;
		  top: 0;
		}

		/* Title text */
		#info-list .acc-block .fs-3{
		  text-align: left;
		}

		/* Push the + icon to the far right */
		#info-list .acc-toggle-icon{
		  margin-left: auto;
		}

		/* Force the icon WHITE open + closed */
		#info-list .acc-toggle-icon i,
		#info-list i.ti-plus, 
		#features-list .acc-toggle-icon i,
		#features-list i.ti-plus{
		  color: #ffffff !important;
		}

		/* Check icon bullet list (image-based) */
		.check-list {
		  list-style: none;
		  padding-left: 0;       /* avoid double indentation */
		  margin: 0;
		  text-align: left;
		  margin-left: 60px;
		}

		.check-list li {
		  position: relative;
		  padding-left: 34px;    /* space for the image bullet */
		  line-height: 1.5;
		  font-weight: 400;
		  margin-bottom: 20px;   /* vertical gap BETWEEN items */
		}

		/* Bullet image */
		.check-list li::before {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 0.2em;
		  width: 18px;
		  height: 18px;
		  background-image: url("../../catmacs/tick-light.png");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		/* Keep warning span inline */
		.check-list li span {
		  display: inline;
		}

		/* Nested list: standard bullets */
		.facts-list {
		  list-style: disc;
		  list-style-position: outside;
		  padding-left: 14px;    /* controls indent of bullet list */
		  margin-top: 6px;
		  margin-bottom: 0;
		}

		.facts-list li {
		  line-height: 1.5;
		  margin-bottom: 6px;
		  padding-left: 0;       /* prevents big bullet text gap */
		  margin-left: 0;
		}

		/* IMPORTANT: remove image bullet from nested list */
		.facts-list li::before {
		  content: none;
		}



/* ==============================================
   Home Section - Text Adjustments
   ============================================== */

		/* Default: desktop / tablet (single line) */
		.home-tagline {
		  white-space: nowrap;
		  text-align: center;
		}

		/* Hide forced break on larger screens */
		.home-tagline .mobile-break {
		  display: inline;
		}

		/* Mobile only */
		@media (max-width: 576px) {
		  .home-tagline {
			white-space: normal;
			line-height: 1.2;
		  }

		  .home-tagline .mobile-break {
			display: block;
		  }
		}


		/* === FIX: MQL accordion rows are too tall in collapsed state === */
		#info-list .acc-block,
		#features-list .acc-block {
		  min-height: 0 !important;     /* overrides .acc-block { min-height:180px } */
		  height: auto !important;
		  padding: 30px 10px !important; /* change this number freely */
		}

		/* When a check-list panel is open, draw the divider using the NEXT accordion header */
		[data-collapse].is-open + ul.check-list + [data-collapse] .acc-block {
		  border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		[data-collapse].is-open .acc-block {
		  border-bottom: none;
		}


/* ================================================
   Mobile Font Size Fix - Intro
   ================================================ */

		/* Mobile: shrink Intro typography */
		@media (max-width: 900px){

		  #intro h2.fs-6{
			font-size: var(--fs-4) !important; /* fs-6 -> fs-4 */
		  }

		  #intro p.fs-2{
			font-size: var(--fs-1) !important; /* fs-2 -> fs-1 */
			text-align: center;
		  }

		  #home h3.fs-3{
			font-size: var(--fs-2) !important; /* fs-2 -> fs-1 */
		  }

		}


/* ===============================================
   Mobile - Discover Padding
   =============================================== */

		/* Mobile: increase spacing between MQL accordion and RFID compare */
		@media (max-width: 900px){
		  #rfid-compare{
			padding-top: calc(var(--section-padding-top, 0px) + 40px);
		  }
		}


/* ===============================================
   Mobile Very Small - Table Column
   =============================================== */

		/* Very small phones: cap first column to 50% of viewport */
		@media (max-width: 600px){

		  /* Default (non-scrolling) state */
		  #rfid-compare .rfid-compare-table th:nth-child(1),
		  #rfid-compare .rfid-compare-table td:nth-child(1){
			width: 50vw !important;
			min-width: 50vw !important;
			max-width: 50vw !important;
		  }

		  /* Also override the "rfid-scrolling" state */
		  #rfid-compare .rfid-compare-table.rfid-scrolling th:nth-child(1),
		  #rfid-compare .rfid-compare-table.rfid-scrolling td:nth-child(1){
			width: 50vw !important;
			min-width: 50vw !important;
			max-width: 50vw !important;
		  }

		  /* Remove the inner fixed text width so it can wrap */
		  #rfid-compare .col1-inner{
			width: 100% !important;
			max-width: none !important;
			overflow-wrap: anywhere;
			word-break: break-word;
		  }

		  /* Remove horizontal padding so 50vw aligns to screen center */
		  #rfid-compare{
			padding-left: 0 !important;
			padding-right: 0 !important;
		  }

		  /* If the table is wrapped in an inner container, remove that too */
		  #rfid-compare .container,
		  #rfid-compare .inner,
		  #rfid-compare .rfid-compare-wrap{
			padding-left: 0 !important;
			padding-right: 0 !important;
		  }

		  /* Ensure table truly spans viewport */
		  #rfid-compare .rfid-compare-table{
			width: 100vw;
			margin-left: 0;
			margin-right: 0;
		  }
		}


/* ====================================================
   Mobile - 1st Column Text Size
   ==================================================== */

		/* Mobile: reduce first-column font size */
		@media (max-width: 600px){
		  #rfid-compare .col1-inner{
			font-size: 0.9em;
			line-height: 1.35;
			padding-right: 14px;  /* space before vertical divider */
			box-sizing: border-box;
		  }
		}

		/* Very small phones: reduce a bit more */
		@media (max-width: 420px){
		  #rfid-compare .col1-inner{
			font-size: 0.85em;
			line-height: 1.3;
		  }
		}


/* =======================================================
   Mobile - Design Matters Image & Section Spacing
   ======================================================= */
		@media (max-width: 600px){

		  /* Reduce the parallax container height */
		  #matters .parallax-cont.vh-80{
			height: calc(80vh - 250px) !important;
		  }

		  /* Reduce the image height to match */
		  #matters .parallax-img img.h-105{
			height: calc(80vh - 250px) !important;
		  }

		  /* Mobile: increase spacing between RFID Specs and Matters */
		  #uses{
			margin-top: 100px;
		  }

		  /* Mobile: increase spacing between Accessories and Software */
		  #software{
			margin-top: 100px;
		  }
		}


/* ===============================
   Pre-Loader
   =============================== */

		/* Preload logo sizing (desktop) */
		#pre-load .loader-text .preload-logo{
		  width: 400px;
		  height: auto;
		}

		/* Mobile */
		@media (max-width: 992px), (pointer: coarse) {
		  #pre-load .loader-text .preload-logo{
			width: 250px;
		  }
		}


/* ==========================================================
   Button Accordion (Unified - Clean)
   ========================================================== */

		.accordion-button-expand{
		  overflow: hidden;
		  max-height: 0;
		  opacity: 0;
		  transform: translateY(-6px);
		  pointer-events: none;
		  transition:
			max-height 1000ms cubic-bezier(0.4, 0.0, 0.2, 1),
			opacity   1000ms cubic-bezier(0.4, 0.0, 0.2, 1),
			transform 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
		}

		[data-accordion-button].is-open .accordion-button-expand{
		  opacity: 1;
		  transform: translateY(0);
		  pointer-events: auto;
		}

		/* Sticky close bar under toolbar */
		.accordion-button-closebar{
		  display: none;
		  position: sticky;
		  top: var(--toolbar-h, 0px);
		  z-index: 999;
		  padding: 14px 0;
		  margin: 0 0 10px 0;
		  background: rgba(0,0,0,0.85);
		  backdrop-filter: blur(6px);
		  -webkit-backdrop-filter: blur(6px);
		  text-align: center;
		  border-bottom: 1px solid rgba(255,255,255,0.08);
		}

		[data-accordion-button].is-open .accordion-button-closebar{
		  display: block;
		}


/* ==========================================================
   FREEZE PANE WHEN ACCORDION OPEN
   ========================================================== */
		/* Freeze background while accordion open (prevents scroll-bg transitions showing through) */
		html.accordion-open,
		body.accordion-open{
		  background: #000 !important;
		}

		/* Mobile/tablet: remove internal scroll trap so page scroll is natural */
		@media (max-width: 1024px){
		  .accordion-button-wrap{
			max-height: none !important;
			overflow: visible !important;
			padding-right: 0 !important;
			scrollbar-gutter: auto !important;
		  }
		}


/* ==========================================================
   Section Background Colors - For Scroll Trigger
   ========================================================== */

		#info {
		  background-color: #000000;
		  color: #ffffff;
		  position: relative;
		  z-index: 1;
		  padding-bottom: 20px;
		}

		/* Match #info-list to #info (same background), and keep your layout styling */
		#info-list {
		  background-color: #000000;   /* same as #info so they stay in sync */
		  border-radius: 16px;
		  padding: 2rem;
		}

		/* If the .row inside #info-list was getting its own background elsewhere, force it to match */
		#info-list .row {
		  background-color: transparent; /* inherits visual from #info-list */
		}


		@media (max-width: 767px) {
		  #info-list {
			padding-left: 5px;
			padding-right: 5px;
		  }

		  #info-list .acc-block {
			padding-left: 5px;
			padding-right: 5px;
		  }
		}

		.acc-body-text {
		  font-size: 1.0rem;
		  font-weight: 300;
		  line-height: 1.5;
		  text-align: left;
		  padding-left: calc(1.5rem + 10px);
		}

		@media (max-width: 767px) {
		  #info-list ul.accordion li {
			padding-left: 10px;
			padding-right: 10px;
		  }
		}
		

/* ==========================================================
   Accordion Text Overwrite - More Info
   ========================================================== */

	@media (max-width: 767px) { 
		/* 1) Undo the inherited centering on mobile */ 
		#info-list .text-center {
			text-align: left !important; 
		} 
		/* 2) Make expanded content align left as well */ 
		#info-list ul.accordion, #info-list ul.accordion li, #info-list ul.accordion li p {
			text-align: left !important;
		}
		/* 3) Make the number sit flush-left */ 
		#info-list .acc-no { 
			min-width: auto;
			margin-right: 10px;
			text-align: left; 
		}
		#info-list .acc-no::before {
			left: 0; right: auto; 
		}
		/* 4) Align accordion body content with header padding (fixes the mismatch) */ 
		#info-list ul.accordion li {
			padding-left: 10px !important; 
			padding-right: 10px !important; 
		} 
		/* Preserve open-state spacing but keep the same 10px gutters */ 
		#info-list [data-collapse].is-open + ul.accordion li {
			padding: 8px 10px !important; 
		}
		/* Optional: if a single item is open, keep gutters too */ 
		#info-list [data-collapse].is-open + ul.accordion li:only-child { 
			padding-top: 12px !important;
			padding-bottom: 12px !important;
			padding-left: 10px !important;
			padding-right: 10px !important;
		}
	}


	/* Shared measurements so header + body align perfectly */
	#info-list{
	  --acc-num-col: 3ch;   /* fits 0099 nicely */
	  --acc-gap: 12px;
	}

	/* Header layout: number | title | icon */
	#info-list .acc-block{
	  display: grid;
	  grid-template-columns: var(--acc-num-col) 1fr auto;
	  column-gap: var(--acc-gap);
	  align-items: center;
	}

	/* Keeps icon on the far right */
	#info-list .acc-toggle-icon{
	  justify-self: end;
	}

	#info-list .acc-no{
	  margin-right: 0;   /* grid handles spacing */
	  min-width: auto;
	}

	/* Body text styling + alignment */
	#info-list .acc-body-text{
	  margin: 0;
	  padding-bottom: 20px;

	  font-size: 1.0rem;
	  font-weight: 300;
	  line-height: 1.5;
	  text-align: left;
	  padding-left: calc(var(--acc-num-col) + var(--acc-gap));
	}

	#info-list ul.acc-body-list{
	  margin: 0;
	  padding: 0px 10px;     /* matches header side padding */
	  list-style: none;
	}

	#info-list ul.acc-body-list > li{
	  margin: 0;
	  padding: 0;
	}

	@media (max-width: 767px) {

	  /* Reduce number ? title gap on mobile */
	  #info-list { --acc-gap: 6px; }

	  /* Accordion body text should NOT align to title start on mobile */
	  #info-list .acc-body-text { padding-left: 0; }

	  /* 10px left/right gutter for accordion text UL */
	  #info-list ul.acc-body-list {
		padding-left: 10px;
		padding-right: 10px;
	  }

	  /* Check-list: 10px gutters + force left alignment */
	  #info-list ul.check-list {
		padding-left: 10px;
		padding-right: 10px;
		margin: 0;
		list-style: none;
		text-align: left !important;
	  }

	  /* Each checklist row a left-aligned icon + text row */
	  #info-list ul.check-list > li {
		position: relative;
		margin: 0;
		padding-left: 44px;           /* reserve space for icon + gap */
		text-align: left !important;
		margin-bottom: 14px;   /* spacing between bullets */
	  }

	  #info-list ul.check-list > li::before{
		position: absolute;
		left: 10px;                  /* aligns with 10px gutter */
		top: 0.2em;                  /* tweak if needed */
	  }

	  #info-list ul.check-list > li:last-child {
		margin-bottom: 0px;
	  }

	  #info-list ul.check-list > li p,
	  #info-list ul.check-list > li span,
	  #info-list ul.check-list > li div {
		text-align: left !important;
	  }

	  #info-list ul.check-list > li i,
	  #info-list ul.check-list > li svg {
		flex: 0 0 auto;
	  }
	}

	/* PDF link layout */
	#info-list .acc-body-text a.pdf-link,
	#info-list .acc-body-text a.pdf-secure {
	  display: inline-flex;
	  align-items: center;
	  gap: 12px;
	  color: #ffffff;
	  text-decoration: none;
	  transition: color 0.2s ease;
	}

	/* PDF icon sizing (desktop) */
	#info-list .acc-body-text a.pdf-link img,
	#info-list .acc-body-text a.pdf-secure img {
	  width: 40px;
	  height: auto;
	  display: block;
	  transition: opacity 0.15s ease;
	}

	/* Swap image on hover */
	#info-list .acc-body-text a.pdf-link:hover img {
	  content: url("../../catmacs/pdf-black.png");
	}

	/* Swap image on hover */
	#info-list .acc-body-text a.pdf-secure:hover img {
	  content: url("../../catmacs/pdf-black-2.png");
	}

	/* Text colour on hover */
	#info-list .acc-body-text a.pdf-link:hover,
	#info-list .acc-body-text a.pdf-secure:hover {
	  color: #b1b1b1;
	}

	/* Mobile sizing */
	@media (max-width: 767px) {
	  #info-list .acc-body-text a.pdf-link img,
	  #info-list .acc-body-text a.pdf-secure img {
		width: 25px;
	  }
	}

	/* Video link hover swap */
	#info-list .acc-body-text a.video-link:hover img {
	  content: url("../../catmacs/video-black.png");
	}


	#info-list .features-info,
	#info-list .features-tick,
	#info-list .features-dot {
	  font-size: var(--fs-1);
	  font-weight: 300;
	  text-align: left;
	  padding-left: 20px;  /* Indent Block Text */
	}

	/* Target list items directly */
	#info-list .features-tick li,
	#info-list .features-dot li {
	  position: relative;
	  padding-left: 50px;  /* text indent */
	  line-height: 1.5;
	  margin-bottom: 12px;
	  list-style: none;
	  text-align: left;
	}

	/* Tick icon */
	#info-list .features-tick li::before {
	  content: "";
	  position: absolute;
	  left: 20px;  /* bullet indent */
	  top: 0.15em;
	  width: 16px;
	  height: 16px;
	  background-image: url("../../catmacs/tick-2-white.png");
	  background-size: contain;
	  background-repeat: no-repeat;
	}

	/* Tick icon */
	#info-list .features-dot li::before {
	  content: "";
	  position: absolute;
	  left: 20px;  /* bullet indent */
	  top: 0.15em;
	  width: 16px;
	  height: 16px;
	  background-image: url("../../catmacs/dot-white.png");
	  background-size: contain;
	  background-repeat: no-repeat;
	}

	/* Intro list anchor styling */
	#info-list .features-tick li a,
	#info-list .features-dot li a {
	  color: #c0b5a4;
	  font-weight: 600;
	  text-decoration: none;
	  transition: color 0.2s ease;
	}

	/* Hover state */
	#info-list .features-tick li a:hover,
	#info-list .features-dot li a:hover {
	  color: #e8e8e8;
	}

	/* Visited and active states reset */
	#info-list .features-tick a:visited,
	#info-list .features-tick li a:active,
	#info-list .features-tick li a:focus, 
	#info-list .features-dot a:visited,
	#info-list .features-dot li a:active,
	#info-list .features-dot li a:focus {
	  color: #c0b5a4;
	}


/* ==========================================================
   Floating Dock - Bottom Right
   ========================================================== */

/* Smooth scrolling to anchors */
html { scroll-behavior: smooth; }

/* Bottom-right floating dock (hidden by default; JS toggles .is-visible) */
.page-dock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* Visible state */
.page-dock.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Button */
.page-dock__btn{
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);

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

  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-dock__btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}

.page-dock__btn img{
  width: 26px;
  height: auto;
  display: block;
}

/* Hide dock on mobile only (tablet is allowed) */
@media (max-width: 576px){
  .page-dock{
    display: none !important;
  }
}



/* ==========================================================
   Hyperlink to bookmarks
   ========================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--toolbar-h, 0px) + 20px);
}

/* Ensures anchored sections are not hidden under the header */
section[id] {
  scroll-margin-top: calc(var(--toolbar-h, 0px) + 20px);
}


/* =========================================
   FAQ Q/A formatting inside accordion
   ========================================= */

.acc-qa .qa-q,
.acc-qa .qa-a{
  padding-right: 5px; /* requested */
}

/* Question */
.acc-qa .qa-q{
  font-weight: 600;
  margin: 0 0 10px 0; /* 10px gap to answer */
}

/* Answer */
.acc-qa .qa-a{
  font-weight: 300;
  margin: 0;                 /* control spacing via .qa-item */
  padding-left: 10px;        /* indent answer from question */
}

/* 20px gap between answer and NEXT question */
.acc-qa .qa-item{
  margin: 0 0 30px 0;
}

.acc-qa .qa-item:last-child{
  margin-bottom: 0; /* no extra space at end */
}



/* =========================================
   Intro Text
   ========================================= */

#intro-text .intro-content,
#accountable .intro {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #intro-text .intro-content,
  #accountable .intro {
    font-size: var(--fs-1) !important;
  }
}

#intro-text ul.intro-content {
  padding-bottom: 20px;
  padding-left: 30px;
}

/* Target list items directly */
#intro-text ul.intro-content li {
  position: relative;
  padding-left: 36px;
  line-height: 1.5;
  margin-bottom: 12px;
  list-style: none;
}

/* Tick icon */
#intro-text ul.intro-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 22px;
  height: 22px;
  background-image: url("../../catmacs/tick-2-gold.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Intro list anchor styling */
#intro-text ul.intro-content li a {
  color: #c0b5a4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Hover state */
#intro-text ul.intro-content li a:hover {
  color: #e8e8e8;
}

/* Visited and active states reset */
#intro-text ul.intro-content li a:visited,
#intro-text ul.intro-content li a:active,
#intro-text ul.intro-content li a:focus {
  color: #c0b5a4;
}



/* =========================================
   Private Label - Overlay Zoom Through "O"
   ========================================= */

#private-label{
  position: relative;
}

/* The pinned stage */
#private-label .pl-stage{
  position: relative;
  height: 80vh;             /* similar to your vh-60/vh-100 combo */
  min-height: 520px;
  overflow: hidden;
  border-radius: 0;         /* set if you want rounded corners */
}

/* Background image */
#private-label .pl-bg{
  position: absolute;
  inset: 0;
  background-image: url("../../catmacs/planning.jpg");
  background-position: left top;   /* same as 0% 0% */
  background-size: cover;          /* fills the container */
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: 1;
}

/* Semi-transparent layer image */
#private-label .pl-wash{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}

/* Overlay text graphic */
#private-label .pl-overlay{
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(700px, 120vw, 1400px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  z-index: 3;
  pointer-events: none;
}

/* Image minimum height */
@media (min-width: 768px){
  #private-label .pl-stage{
    min-height: 745px;
    height: max(80vh, 745px); /* whichever is larger */
  }
}

/* Optional: slightly tighter on large screens */
@media (min-width: 1200px){
  #private-label .pl-stage{
    height: max(85vh, 745px);
  }

  #private-label .pl-overlay{
    max-width: 900px;
  }
}

/* Message layer (appears after overlay fades) */
#private-label{
  --pl-message-top: 60%;      /* vertical position from top of stage */
  --pl-message-gap: 30px;    /* space between image and message box */
}

#private-label .pl-message{
  position: absolute;
  left: 50%;
  top: var(--pl-message-top);
  transform: translate(-50%, -50%);
  z-index: 4;
  opacity: 0;                /* revealed via GSAP */
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal centering */
  gap: var(--pl-message-gap);
}

/* Image above message */
#private-label .pl-message__image{
  max-width: 260px;          /* adjust as needed */
  width: 100%;
  height: auto;
  display: block;
}

/* Message box */
#private-label .pl-message__box{
  background: rgba(255,255,255,0.80);  /* same wash */
  color: #000000;
  font-size: var(--fs-6);
  font-weight: 500;
  padding: 40px 20px;
  text-align: center;
  width: min(900px, calc(100vw - 80px));
}

/* Hide line break by default (desktop) */
.private-mobile {
  display: none;
}

/* Show line break on mobile */
@media (max-width: 768px) {
  .private-mobile {
    display: inline;
  }
}


/* ============================
   Private Label breakpoint swap
   ============================ */

/* Static image defaults */
#private-label .pl-static {
  display: none;           /* hidden by default (desktop >=1600 shows stage) */
  width: 100%;
  text-align: center;
}

#private-label .pl-static{
  text-align: center; /* center contents */
}

#private-label .pl-static picture{
  display: block;
  width: 100%;
}

/* Control image size here */
#private-label .pl-static img{
  display: block;
  width: 85%;
  max-width: 1199.98px;
  height: auto;
  margin: 0 auto;
}

/* <1200px */
@media (max-width: 1199.98px){
  #private-label .pl-stage{
    display: none !important;
  }
  #private-label .pl-static{
    display: block;
  }

  #private-label .private-label-col{
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* >=1200px */
@media (min-width: 1200px){
  #private-label .pl-stage{
    display: block;
  }
  #private-label .pl-static{
    display: none;
  }
}


/* =========================================
   Re-sizing Text
   ========================================= */

#temp-sensor-text .temp-content,
#private-labelling-text .labelling-content,
#partner .partner-content {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #temp-sensor-text .temp-content,
  #private-labelling-text .labelling-content,
  #partner .partner-content {
    font-size: var(--fs-1) !important;
  }
}


/* =========================================
   Contact Form
   ========================================= */

#contact-form { position: relative; }
#contact-form-top{
  position: absolute;
  top: 0;
  left: 0;
}


/* =========================================
   Remove Hyperlink Border
   ========================================= */

/* Remove click focus box, keep keyboard focus */
a:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}

a.js-open-contact-form:focus:not(:focus-visible),
a.link-1:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}



/* =========================================
   Equipment Overlay (Application Range style)
   ========================================= */

:root{
  /* Backdrop (black) transparency */
  --equip-overlay-backdrop: rgba(0,0,0,0.75);

  /* Panel (white) transparency */
  --equip-overlay-panel: rgba(255,255,255,0.92);

  /* Image max height "percent" (use viewport % so it's predictable) */
  --equip-img-max-h-desktop: 60vh;
  --equip-img-max-h-tablet: 40vh;
  --equip-img-max-h-mobile: 20vh;

  /* Grid gap */
  --equip-overlay-gap: 18px;

  /* Panel max width */
  --equip-overlay-max-w: 1200px;
}

.equip-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.equip-overlay.is-open{
  display: block;
}

.equip-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: var(--equip-overlay-backdrop);
}

.equip-overlay__panel{
  position: relative;
  width: min(var(--equip-overlay-max-w), calc(100% - 48px));
  margin: 24px auto;
  background: var(--equip-overlay-panel);
  border-radius: 14px;
  padding: 22px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.equip-overlay__close{
  position: sticky; /* stays visible while scrolling inside panel */
  top: 0;
  margin-left: auto;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 0;
  background: #c0b5a4;
  color: #ffffff;
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
}

.equip-overlay__close:hover{
  filter: brightness(0.95);
}

.equip-overlay__grid{
  display: grid;
  gap: var(--equip-overlay-gap);
  padding-top: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* >= tablet */
  align-items: start; /* smaller images sit top with space below */
}

/* Mobile = 1 column */
@media (max-width: 767.98px){
  .equip-overlay__panel{
    width: calc(100% - 24px);
    margin: 12px auto;
    padding: 16px;
    max-height: calc(100vh - 24px);
  }
  .equip-overlay__grid{
    grid-template-columns: 1fr;
  }
}

/* Items */
.equip-overlay__item{
  background: transparent;      /* keep it clean like Easylube */
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* top */
  justify-content: flex-start;   /* top */
}

.equip-overlay__item img{
  width: 100%;
  height: auto;
  max-height: var(--equip-img-max-h-desktop);
  object-fit: contain;
  display: block;
}

/* Tablet image max height */
@media (max-width: 1200px){
  .equip-overlay__item img{
    max-height: var(--equip-img-max-h-tablet);
  }
}

/* Mobile image max height */
@media (max-width: 767.98px){
  .equip-overlay__item img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}

/* Prevent page scroll when overlay open */

body.equip-overlay-lock-fixed{
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}



/* =========================================
   Reusable Section Title Grid
========================================= */

.section-title-grid{
  --gap-1-2: 10px;
  --gap-2-3: 0px;
  --tighten-2-3: 0px; /* use negative px to pull row3 closer */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  text-align: center;
}

.section-title-grid > *{ margin:0; padding:0; }

.section-title-grid .stg-row-1{
  margin-bottom: var(--gap-1-2);
}

.section-title-grid .stg-stack{
  display: grid;
  justify-items: center;
  row-gap: var(--gap-2-3);
}

/* Row 2: stable box + bottom trim control */
.section-title-grid .stg-row-2{
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0.78;          /* keeps the big word tight */
  margin-bottom: var(--tighten-2-3); /* NEGATIVE pulls row3 up */
}

.section-title-grid .stg-row-3{
  margin: 0;
  padding: 0;
  line-height: 1;
}



/* =========================================
   Section Cluster Title Grid Rows
========================================= */

.cluster-title-grid,
.cluster-title-grid-sm {
  --gap-1-2: 10px;
  --gap-2-3: 0px;
  --tighten-2-3: 0px; /* use negative px to pull row3 closer */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  text-align: center;
}

.cluster-title-grid > *{ margin:0; padding:0; }
.cluster-title-grid-sm > *{ margin:0; padding:0; }

.cluster-title-grid .stg-row-1,
.cluster-title-grid-sm .stg-row-1 {
  margin-bottom: var(--gap-1-2);
}

.cluster-title-grid .stg-stack,
.cluster-title-grid-sm .stg-stack {
  display: grid;
  justify-items: center;
  row-gap: var(--gap-2-3);
}

/* Row 2: stable box + bottom trim control */
.cluster-title-grid .stg-row-2,
.cluster-title-grid-sm .stg-row-2 {
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0.78;          /* keeps the big word tight */
  margin-bottom: var(--tighten-2-3); /* NEGATIVE pulls row3 up */
}

.cluster-title-grid .stg-row-3,
.cluster-title-grid-sm .stg-row-3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.cluster-title-grid .stg-row-1,
.cluster-title-grid-sm .stg-row-1 {
  color: var(--brown-1);      /* fc-brown-1 */
  font-size: clamp(1.33rem, 1.78vw + 0.97rem, 5.25rem);   /* h5 size */
}

.cluster-title-grid .stg-row-2,
.cluster-title-grid-sm .stg-row-2 {
  font-size: clamp(3rem, 11vw, 154px);   /* .fs-11 size */
  text-transform: uppercase;    /* text-uppercase */
}

.cluster-title-grid .stg-row-3,
.cluster-title-grid-sm .stg-row-3 {
  font-size: clamp(2.5rem, 10vw, 140px); /* .fs-10 size */
  color: var(--brown-1);      /* fc-brown-1 */
}


@media (max-width: 600px){

  .cluster-title-grid .stg-row-1{
    font-size: calc(clamp(1.33rem, 1.78vw + 0.97rem, 5.25rem) * 1.08);
  }

  .cluster-title-grid .stg-row-2{
    font-size: calc(clamp(3rem, 11vw, 154px) * 1.08);
  }

  .cluster-title-grid .stg-row-3{
    font-size: calc(clamp(2.5rem, 10vw, 140px) * 1.08);
  }

}


@media (max-width: 600px){

  .cluster-title-grid-sm .stg-row-1{
    font-size: calc(clamp(1.33rem, 1.78vw + 0.97rem, 5.25rem) * 1.08);
  }

  .cluster-title-grid-sm .stg-row-2{
    font-size: calc(clamp(2.75rem, 11vw, 154px) * 0.95);
  }

  .cluster-title-grid-sm .stg-row-3{
    font-size: calc(clamp(2.25rem, 10vw, 140px) * 0.95);
  }

}


/* =========================================
   Primary Text
========================================= */

.primary-text,
.primary-text-2 {
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .primary-text,
  .primary-text-2 {
    font-size: var(--fs-1);
	padding-left: 10px;
	padding-right: 10px;
  }
}

/* Lists */
.primary-text ul,
.primary-text-2 ul {
  padding-bottom: 20px;
  padding-left: 30px;
}

.primary-text ul > li,
.primary-text-2 ul > li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  line-height: 1.5;
  list-style: none;
}

/* Tick icon */
.primary-text ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 22px;
  height: 22px;
  background-image: url("../../catmacs/tick-2-gold.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Tick icon */
.primary-text-2 ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  background-image: url("../../catmacs/hazard-white.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Links */
.primary-text ul li a,
.primary-text-2 ul li a {
  color: #c0b5a4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.primary-text ul li a:hover,
.primary-text-2 ul li a:hover {
  color: #e8e8e8;
}

.primary-text ul li a:visited,
.primary-text ul li a:active,
.primary-text ul li a:focus,
.primary-text-2 ul li a:visited,
.primary-text-2 ul li a:active,
.primary-text-2 ul li a:focus {
  color: #c0b5a4;
}

.primary-text ol,
.primary-text-2 ol {
  padding-bottom: 20px;
  padding-left: 30px;
  list-style: decimal;
}

.primary-text ol > li,
.primary-text-2 ol > li {
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 400;
  list-style-position: outside;
}

.primary-text ol,
.primary-text-2 ol {
  list-style: decimal !important;
}

/* =========================================
   Primary Text Small
========================================= */

.primary-text-sm {
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .primary-text-sm {
    font-size: var(--fs-1);
	padding-left: 10px;
	padding-right: 10px;
  }
}

/* Lists */
.primary-text-sm ul {
  padding-bottom: 20px;
  padding-left: 30px;
}

.primary-text-sm ul > li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  line-height: 1.5;
  list-style: none;
}

/* Tick icon */
.primary-text-sm ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 22px;
  height: 22px;
  background-image: url("../../catmacs/tick-2-gold.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Links */
.primary-text-sm ul li a {
  color: #c0b5a4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.primary-text-sm ul li a:hover {
  color: #e8e8e8;
}

.primary-text-sm ul li a:visited,
.primary-text-sm ul li a:active,
.primary-text-sm ul li a:focus {
  color: #c0b5a4;
}


/* =========================================
   Primary Text Center
========================================= */
.primary-text-center {
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1200px) {
  .primary-text-center {
    font-size: var(--fs-1);
	padding-left: 10px;
	padding-right: 10px;
	text-align: left;
  }
}



/* =========================================
   Faster Navbar Loading
========================================= */
header,
.header-toolbar {
  opacity: 1;
  visibility: visible;
}

/* Toolbar: let GSAP control transform */
.js-toolbar {
  opacity: 1;
  visibility: visible;
  will-change: transform;

  /* IMPORTANT: don't transition transform */
  transition: background-color 0.3s ease, color 0.3s ease;
}