/** Shopify CDN: Minification failed

Line 3765:0 Unexpected "}"

**/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.eot?v=115928927755750249461776070176');
    src: local('Montserrat Black'), local('Montserrat-Black'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.eot?%23iefix&v=115928927755750249461776070176') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.woff2?v=167310412512219466281776070176') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.woff?v=47983382647279860351776070176') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.ttf?v=26186570591497357441776070177') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Black.svg%23Montserrat-Black?v=348') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.eot?v=39117878101969123541776070177');
    src: local('Montserrat Bold'), local('Montserrat-Bold'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.eot?%23iefix&v=39117878101969123541776070177') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.woff2?v=106254451792745681271776070177') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.woff?v=56890873994703470171776070177') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.ttf?v=75133421944037246061776070177') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Bold.svg%23Montserrat-Bold?v=348') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.eot?v=63602568015129941411776070178');
    src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.eot?%23iefix&v=63602568015129941411776070178') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.woff2?v=108439664751109669781776070177') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.woff?v=28357142666987775501776070177') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.ttf?v=88270943697123312161776070178') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraBold.svg%23Montserrat-ExtraBold?v=348') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.eot?v=152595164593201260651776070178');
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.eot?%23iefix&v=152595164593201260651776070178') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.woff2?v=61655274975036904101776070177') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.woff?v=51726530646922481001776070177') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.ttf?v=74550130135110115191776070178') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-ExtraLight.svg%23Montserrat-ExtraLight?v=348') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.eot?v=176786928337399229211776070183');
    src: local('Montserrat Light'), local('Montserrat-Light'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.eot?%23iefix&v=176786928337399229211776070183') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.woff2?v=147447115902279178331776070186') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.woff?v=17811411409287342031776070186') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.ttf?v=123691068401542346801776070186') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Light.svg%23Montserrat-Light?v=348') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.eot?v=21185028801948057991776070187');
    src: local('Montserrat Medium'), local('Montserrat-Medium'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.eot?%23iefix&v=21185028801948057991776070187') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.woff2?v=46056231841835443671776070188') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.woff?v=57527277106006414271776070188') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.ttf?v=19108379370421312561776070188') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Medium.svg%23Montserrat-Medium?v=348') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.eot?v=133802638458542221251776070188');
    src: local('Montserrat Regular'), local('Montserrat-Regular'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.eot?%23iefix&v=133802638458542221251776070188') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.woff2?v=141474772433655853141776070189') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.woff?v=169395701198977676701776070189') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.ttf?v=139729835099091408281776070190') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Regular.svg%23Montserrat-Regular?v=348') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.eot?v=102720663979517712161776070190');
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.eot?%23iefix&v=102720663979517712161776070190') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.woff2?v=162973503680762098341776070190') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.woff?v=151092248416705273261776070190') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.ttf?v=94086860646062965961776070191') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-SemiBold.svg%23Montserrat-SemiBold?v=348') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.eot?v=38578514909553018851776070191');
    src: local('Montserrat Thin'), local('Montserrat-Thin'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.eot?%23iefix&v=38578514909553018851776070191') format('embedded-opentype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.woff2?v=68575854491291638081776070193') format('woff2'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.woff?v=101437913595990583701776070192') format('woff'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.ttf?v=150288841464258963411776070192') format('truetype'),
        url('//stahlgard.myshopify.com/cdn/shop/t/3/assets/Montserrat-Thin.svg%23Montserrat-Thin?v=348') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: block;
}
@font-face {
  font-family: 'Resist Sans Display';
  src: url('{{ "ResistSansDisplay-Regular.woff2" | asset_url }}') format('woff2'),
       url('{{ "ResistSansDisplay-Regular.woff" | asset_url }}') format('woff'),
       url('{{ "ResistSansDisplay-Regular.ttf" | asset_url }}') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --font-mono: "Montserrat";
  --font-inter: "Inter";
  --font-resist: 'Resist Sans Display';
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 22px;
  --text-2xl: 24px;
  --text-mid: 28px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 62px;
  --text-7xl: 72px;
  --color-base: #000;
  --color-white: #fff;
  --color-theme-bg: #0d0d0d;
  --color-white-muted: #D5D5D5;
  --color-yellow: #e8b93f;
  --color-gold: #E8563F;
  --color-silver: #7E7E7E;
  --color-footer-bg: #0d0d0d;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


a {
  text-decoration: none;
  outline: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background 0.3s ease, text-decoration 0.3s ease !important;
}

svg,
svg path {
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background 0.3s ease, text-decoration 0.3s ease !important;
}

button {
  all: unset;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background 0.3s ease, text-decoration 0.3s ease;
}

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

li {
  list-style: none;
}

body {
  font-family: var(--font-mono);
  background: var(--color-theme-bg);
  letter-spacing: -0.03em;
}

.container {
  width: 100%;
  max-width: 90%;
  margin: auto;
}

section {
  overflow: hidden;
}

@media (min-width:1800px) {
  .container {
    max-width: 1600px;
  }
  
  .contact-container {
    max-width: unset;
  }
}

@media (max-width:767.98px) {
  .container {
    max-width: 100%;
    padding: 0 30px;
  }
}

@media (max-width:576px) {
  .container {
    padding: 0 20px;
  }
}

/* ── NAVBAR ── */
header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 100%;
  max-width: calc(100% - 80px);
}

nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 28px;
  min-height: 63px;
  background: var(--color-theme-bg);
  backdrop-filter: blur(16px);
  border-radius: 60px;
  border: 1px solid rgba(253, 253, 253, 0.302);
}

/* Animated shimmer that sweeps across the header pill's border.
   Mirrors the footer-divider shimmer (linear gradient + sliding
   background-position) but masked into a 1px ring around the
   rounded pill via the gradient-padding trick. */
nav::before,
nav::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 0.5px;
  /* Two-layer background: chromatic shimmer on top, solid pill-border
     base underneath. When the shimmer gradient's edges sweep past the
     visible ring they'd otherwise expose the page content behind the
     pill — the base layer keeps the ring opaque so the pill never
     looks see-through. */
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(220, 180, 255, 0.25) 8%,
      rgba(180, 210, 255, 0.28) 15%,
      rgba(180, 255, 230, 0.25) 22%,
      rgba(255, 255, 255, 0.9)  28%,
      rgba(255, 245, 180, 0.28) 35%,
      rgba(255, 200, 160, 0.25) 42%,
      rgba(255, 180, 220, 0.25) 49%,
      rgba(210, 180, 255, 0.28) 56%,
      rgba(255, 255, 255, 0.9)  62%,
      rgba(180, 225, 255, 0.25) 69%,
      rgba(180, 255, 210, 0.25) 76%,
      rgba(255, 235, 160, 0.25) 83%,
      rgba(255, 255, 255, 0.7)  89%,
      transparent 100%
    ),
    rgba(253, 253, 253, 0.28);
  background-size: 200% 100%, auto;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
nav::before { animation-name: shimmer-outward; }
nav::after  { animation-name: shimmer-inward; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.nav-logo:hover {
  transform: scale(1.05);
}
.cart_icon {
  position: relative;
  background: transparent !important;
  border-color: transparent !important;
}

.cart_icon:hover,
.cart_icon:active,
.cart_icon:focus-within {
  background: transparent !important;
  border-color: transparent !important;
}

.cart_icon svg {
  width: 43px !important;
  height: 43px !important;
  transition: transform 0.25s ease;
}

.cart_icon:hover svg {
  transform: scale(1.2);
}

.nav-logo img {
  max-width: 200px;
}

/* Hide " Guide" on narrow desktop / large tablet so "Installation
   Guide" stays on a single line in the cramped nav. Range is the gap
   between desktop nav showing (≥992px) and where the nav has enough
   room for the full label (~1200px+). Mobile drawer uses the full text. */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-links .nav-link__suffix { display: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.nav-links a {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.03em;
  position: relative;
  transition: color 0.2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active {
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  color: var(--white);
}

.nav-btn:hover,
  .nav-btn:active,
  .nav-btn:focus-within {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Header "Buy Now" pill — replaces the cart icon and routes to the product page.
   Pill is intentionally shorter than the nav's min-height so the nav keeps its
   original visual height (nav uses min-height: 63px to anchor that).
   Yellow base with a sweeping white sheen, mirroring the product page's
   .pdp-buy-now button (btnShimmer keyframes are defined further down). */
.nav-buy-btn {
  position: relative;
  overflow: hidden;
  width: auto;
  height: 36px;
  border-radius: 999px;
  padding: 0 20px;
  background: #FFB901;
  color: var(--color-theme-bg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.nav-buy-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.nav-buy-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}
.nav-buy-btn:hover,
.nav-buy-btn:focus-within {
  background: #FFB901;
  border-color: transparent;
  color: var(--color-theme-bg);
  transform: scale(1.04);
}

.nav-btn:hover img,
  .nav-btn:active img,
  .nav-btn:focus-within img {
  filter: brightness(0) invert(1);
}

.nav-btn img {
  transition: all 0.2s ease;
}

.nav-btn svg {
  width: 18px;
  height: 18px;
}

/* ── HERO SLIDER ── */
.hero-slider-wrap {
  position: relative;
}

/* CLS reservation only for the homepage carousel (`.hero-slider`).
   Inner-page banners use `.hero-slider--about` and have their own 380px cap. */
.hero-slider-wrap:has(> .hero-slider) {
  min-height: 100vh;
}

@media (max-width: 768px) {
  .hero-slider-wrap:has(> .hero-slider) {
    min-height: 650px;
  }
}

/* CLS fix: before Slick initializes, only show the first slide so the
   layout reserves the right space (one viewport, not N viewports). */
.hero-slider:not(.slick-initialized) .hero-slide:nth-child(n+2) {
  display: none !important;
}

/* CLS hack removed: slide-content children are now opacity:1 by default;
   the entrance animation only runs when JS adds .is-entering on slide
   change (see hero-slider beforeChange handler in custom.js). */

/* Inner-page banner variant (.hero-slider--about) is a static single slide —
   Slick never initializes it, so .slick-active never fires the heroFadeUp
   animation that reveals the title. Reveal statically. */
.hero-slider--about .slide-content > .slide-rating,
.hero-slider--about .slide-content > .hero-title,
.hero-slider--about .slide-content > .slide-desc,
.hero-slider--about .slide-content > .btn-hero {
  opacity: 1;
}

/* CLS fix: testimonials slider — only first card visible pre-init */
.slider-testimonials:not(.slick-initialized) > *:nth-child(n+2) {
  display: none !important;
}

.hero-slide {
  position: relative;
  height: 100vh;
  min-height: 650px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 6s ease;
}

.slick-active .slide-bg {
  transform: scale(1.0);
}

[data-parallax-image] {
  overflow: hidden;
}

.slide-bg[data-parallax-image],
.slick-active .slide-bg[data-parallax-image] {
  transition: none;
  transform: translate3d(0, 0, 0) scale(1.45);
  transform-origin: center center;
  will-change: transform;
}

[data-parallax-image] > img {
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .slide-bg[data-parallax-image],
  .slick-active .slide-bg[data-parallax-image],
  [data-parallax-image] > img {
    transform: none !important;
  }
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.70) 100%);
  background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 100%);
}

.slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 50px;
  animation: none;
  color: var(--color-white);
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrance animation only fires on slide CHANGE — JS adds .is-entering
     to the upcoming slide via Slick's beforeChange. This avoids the init
     flicker where the first slide's content would jump from visible
     (CLS hack) to opacity:0 (animation backwards fill) during the
     animation-delay window. */
  .slick-slide.is-entering .slide-content > .slide-rating,
  .slick-slide.is-entering .slide-content > .hero-title,
  .slick-slide.is-entering .slide-content > .slide-desc,
  .slick-slide.is-entering .slide-content > .btn-hero {
    animation: heroFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .slick-slide.is-entering .slide-content > .slide-rating { animation-delay: 0.15s; }
  .slick-slide.is-entering .slide-content > .hero-title   { animation-delay: 0.30s; }
  .slick-slide.is-entering .slide-content > .slide-desc   { animation-delay: 0.55s; }
  .slick-slide.is-entering .slide-content > .btn-hero     { animation-delay: 0.80s; }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.slide-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  /* color: var(--color-white); */
  font-weight: 500;
}

.stars {
  display: flex;
  gap: 3px;
}

.star {
  color: var(--color-yellow);
  font-size: var(--text-lg);
  line-height: 1;
}

.hero-title {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  /* color: var(--white); */
  margin: 0 auto 22px;
}

.hero-slider .hero-title {
  max-width: 595px;
}

.slide-desc {
  font-size: clamp(14px, 1.8vw, 18px);
  /* color: var(--color-white); */
  line-height: 1.65;
  color: #FFFFFF;
  max-width: 1050px;
  margin: 0 auto 34px;
  font-weight: 400;
}

.hero-slider.slick-slider {
  margin-bottom: 0;
}

.btn-hero {
  display: inline-block;
  padding: 12px 20px;
  min-width: 190px;
  background: var(--color-white);
  color: var(--color-base);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: capitalize;
  text-decoration: none;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-hero:hover,
  .btn-hero:active,
  .btn-hero:focus-within {
  background: transparent;
  color: var(--color-white);
  transform: translateY(-2px);
  border-color: var(--color-white);
}

/* Conversion CTA — mirrors the header .nav-buy-btn recipe (yellow base,
   shimmering white sheen, slight scale on hover) but sized as a
   section-level button so it can slot in wherever .btn-hero was being
   used for purchase actions. The shared btnShimmer keyframes are
   defined further down. */
.btn-buy {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 12px 20px;
  min-width: 190px;
  background: #FFB901;
  color: var(--color-base);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-buy::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.btn-buy:hover,
.btn-buy:active,
.btn-buy:focus-within {
  background: #FFB901;
  color: var(--color-base);
  transform: translateY(-2px) scale(1.04);
}



/* ── SLICK ARROWS ── */
.hero-slider .slick-prev,
.hero-slider .slick-next,
.slider-testimonials .slick-prev,
.slider-testimonials .slick-next {
  z-index: 10;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
  outline: 1.5px solid #fff;
  outline-offset: 6px;
}

.hero-slider .slick-prev {
  left: 28px;
}

.hero-slider .slick-next {
  right: 28px;
}

.hero-slider .slick-prev:hover,
  .hero-slider .slick-next:hover,
  .slider-testimonials .slick-prev:hover,
  .slider-testimonials .slick-next:hover {
  outline-color: transparent;
  background: rgba(255, 255, 255, 0.85);
}

@keyframes slick-btn-pulse-y {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); transform: translate(0, -50%) scale(1); }
  50%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: translate(0, -50%) scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: translate(0, -50%) scale(1); }
}

@keyframes slick-btn-pulse-flat {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); transform: scale(1); }
  50%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}

.slider-testimonials .slick-prev:hover,
.slider-testimonials .slick-next:hover {
  animation: slick-btn-pulse-y 0.93s ease infinite;
}

.product-testimonials .slider-testimonials .slick-prev:hover,
.product-testimonials .slider-testimonials .slick-next:hover {
  animation: slick-btn-pulse-flat 0.93s ease infinite;
}

.hero-slider .slick-prev::before,
  .hero-slider .slick-next::before,
  .slider-testimonials .slick-prev::before,
  .slider-testimonials .slick-next::before {
  content: "";
  height: 20px;
  width: 20px;
}

.hero-slider .slick-prev::before,
  .slider-testimonials .slick-prev::before {
  background: url('../images/arrowleft.png') center center no-repeat !important;
}

.hero-slider .slick-next::before,
  .slider-testimonials .slick-next::before {
  background: url('../images/arrowright.png') center center no-repeat !important;
}

/* ── DOTS ── */
.hero-slider .slick-dots {
  bottom: 28px !important;
}

.hero-slider .slick-dots li button::before {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 10px !important;
  transition: color 0.2s !important;
}

.hero-slider .slick-dots li.slick-active button::before {
  color: var(--gold) !important;
}

/* ── SLIDE BACKGROUNDS ── */
.slide-1 .slide-bg {
  background-image: url('../images/hero1.jpg');
}

.slide-1 .slide-bg.slide-bg--about {
  background-image: unset !important;
}

.slide-1 .slide-bg.slide-bg--about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.slide-2 .slide-bg {
  background-image: url('../images/close-up-stoplock.png');
}

.slide-3 .slide-bg {
  background-image: url('../images/stoplock-steering-wheel-lock.png');
}

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE MENU ── */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0 8px;
  backdrop-filter: blur(20px);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s ease;
}

.mobile-menu.open {
  max-height: 360px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding: 12px 8px;
  gap: 10px;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: background 0.2s, color 0.2s, opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateX(-10px);
}

.mobile-menu.open a {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu.open a:nth-child(1) {
  transition-delay: 0.06s;
}

.mobile-menu.open a:nth-child(2) {
  transition-delay: 0.10s;
}

.mobile-menu.open a:nth-child(3) {
  transition-delay: 0.14s;
}

.mobile-menu.open a:nth-child(4) {
  transition-delay: 0.18s;
}

.mobile-menu.open a:nth-child(5) {
  transition-delay: 0.22s;
}

.mobile-menu.open a:nth-child(6) {
  transition-delay: 0.26s;
}

.mobile-menu a:hover,
  .mobile-menu a.active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
}

/* Active marker — text-decoration underline (instead of a dot prefix or
   a full-width bar) so the line tracks the actual text width like a
   conventional inline underline. */
.mobile-menu a.active {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-white);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* ── SHARED REUSABLE ── */
.section-title {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.visibility-banner-content .section-title {
  margin-bottom: 14px;
}

.section-title-brief {
  font-size: var(--text-base);
  color: #D5D5D5;
  font-weight: 500;
  line-height: 1.72;
  margin-bottom: 20px;
}

.protection-section .section-title-brief {
  max-width: 1080px;
  margin-inline: auto;
}

.brief-block p {
  max-width: 530px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  padding: 3px 30px 3px 3px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white-muted);
  transition: background 0.2s;
}

.tag-pill-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.tag-pill:hover {
  background: rgba(255, 255, 255, 0.11);
}

.tag-pill-icon svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── SCROLL FADE-UP ── */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Mobile keeps the fade-up, but with a shorter transition so it doesn't
   feel laggy on a small viewport during quick scrolls. The IntersectionObserver
   pre-triggers via rootMargin (custom.js) so sections fade in BEFORE
   entering the viewport — that's what kills the empty-black flash. */
@media (max-width: 576px) {
  .fade-up {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes step-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-base);
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* ── ENGINEERED SECTION ── */
.engineered-section {
  padding: 70px 0;
  background: var(--color-theme-bg);
}

.engineered-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.engineered-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  height: 100%;
}

.engineered-img-wrap img,
.engineered-img-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.how-card:hover .step-number::before,
.how-card:hover .step-number::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: step-pulse 2s ease-out infinite;
}
.how-card:hover .step-number::after {
  animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .how-card:hover .step-number::before,
  .how-card:hover .step-number::after {
    animation: none;
  }
}

/* ── HOW IT WORKS SECTION ── */
.how-section {
  padding: 70px 0 70px;
  background: var(--color-theme-bg);
}


.protection-section {
  padding: 70px 0 70px;
  background: var(--color-theme-bg);
    overflow: visible;
  min-height: 500px;
  transition: min-height 0.3s ease-in-out;
}

.protection-section:has(.how-card:hover) {
  min-height: 710px;
}

.how-header {
  text-align: center;
  margin-bottom: 30px;
}

/* .how-header .section-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(20px, 2.5vw, 28px);
} */
.how-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.how-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 3.2;
  background: #1a1a1a;
  transition: transform 0.3s ease-in-out;
}

.how-card:hover {
  transform: translateY(30px);
}

.protection-section .how-card:hover {
  transform: translateY(30px);
}

.protection-section .how-card {
  box-shadow: -1px 10px 52.4px 0px #FFFFFF1A;
}

@media (prefers-reduced-motion: no-preference) {
  .how-section .how-card,
  .protection-section .how-card {
    opacity: 0;
  }

  .how-section.is-visible .how-card,
  .protection-section.is-visible .how-card {
    animation: howCardFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .how-section.is-visible .how-card:nth-child(1),
  .protection-section.is-visible .how-card:nth-child(1) { animation-delay: 0.10s; }
  .how-section.is-visible .how-card:nth-child(2),
  .protection-section.is-visible .how-card:nth-child(2) { animation-delay: 0.35s; }
  .how-section.is-visible .how-card:nth-child(3),
  .protection-section.is-visible .how-card:nth-child(3) { animation-delay: 0.60s; }
  .how-section.is-visible .how-card:nth-child(4),
  .protection-section.is-visible .how-card:nth-child(4) { animation-delay: 0.85s; }
  .how-section.is-visible .how-card:nth-child(5),
  .protection-section.is-visible .how-card:nth-child(5) { animation-delay: 1.10s; }

  @keyframes howCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(60px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

.how-card-img {
  position: absolute;
  inset: 0;
}

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

.how-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  background: linear-gradient(180.67deg, rgba(34, 34, 34, 0) 0.56%, rgba(34, 34, 34, 0.8) 99.42%);
  z-index: 0;
}

.how-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 22px 28px;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.how-card-title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 10px 0 8px;
}

.how-card-desc {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.55;
}

/* ── VISIBLE SECURITY BANNER ── */
.visibility-banner-section {
  background: var(--color-theme-bg);
  padding-bottom: 98px;
}

.visibility-banner-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
}

.visibility-banner-bg {
  position: absolute;
  inset: 0;
}

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

.visibility-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 45, 45, 0.431);
}

.visibility-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 40px;
  max-width: 630px;
}



.visibility-banner-content .section-title-brief {
  margin-bottom: 28px;
}

/* ── FEATURES GRID ── */
.features-section {
  padding: 70px 0 0;
  background: var(--color-theme-bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 30px;
  gap: 14px;
  position: relative;
}

.feature-item:not(:last-child)::after {
  content: "";
  height: 80px;
  width: 1px;
  /* border: 1px solid;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%); */
  background: url(../images/line-gradient.png) no-repeat center center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.feature-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.feature-icon-wrap .stahlgard-icon {
  width: 48px !important;
  height: 48px !important;
}

.feature-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}

.feature-title-brief {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white-muted);
  line-height: 1.5;
}

/* ── TESTIMONIALS ── */
.testimonials-section {
  padding: 70px 0 0;
  background: var(--color-theme-bg);
}

.testimonials-section .section-header .section-title-brief {
  max-width: 585px;
  margin-inline: auto;
}

.product-testimonials {
  padding: 0px 0 70px;
  background: var(--color-theme-bg);
}

.product-testimonials .section-header .section-title-brief {
  max-width: 585px;
  margin-inline: auto;
}

.slider-testimonials {
  position: relative;
  margin: 0 auto;
  padding: 0 56px;
  margin-top: 30px;
}

.product-testimonials .slider-testimonials {
  padding-bottom: 56px;
}

.slider-testimonials .slick-prev,
.slider-testimonials .slick-next {
  position: absolute;
  top: calc(50% - 35px);
  transform: translateY(-50%);
}

.product-testimonials .slider-testimonials .slick-prev,
.product-testimonials .slider-testimonials .slick-next {
  top: unset;
  transform: unset;
  bottom: 28px;
}

.product-testimonials .slider-testimonials .slick-prev {
  left: calc(50% - 50px);
}

.product-testimonials .slider-testimonials .slick-next {
  left: calc(50% + 10px);
}

.testi-card {
  min-width: 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px 26px;
  transition: all 0.3s ease;
  box-shadow: 0px 15px 22px 0px rgba(255, 255, 255, 0.22);
}

.testi-card:hover {
  transform: translateY(40px);
}

.testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  color: var(--color-gold);
  font-size: var(--text-lg);
}

.testi-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-silver);
  line-height: 1.7;
  margin-bottom: 20px;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-base);
}

.author-loc {
  font-size: var(--text-2xs);
  color: var(--color-silver);
}

.slider-testimonials .slick-list {
  padding-bottom: 70px !important;
}

.slider-testimonials .slick-slide {
  margin: 0 20px;
}

.slider-testimonials .slick-prev {
  left: 0;
}

.slider-testimonials .slick-next {
  right: 0;
}

/* ── FAQ SECTION ── */
.faq-section {
  padding: 40px 0 70px;
  background: var(--color-theme-bg);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin: 0 auto;
}

.faq-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.faq-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.faq-content {
  display: flex;
  flex-direction: column;
}

/* ── BOOTSTRAP ACCORDION OVERRIDES ── */
.faq-content .accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-content .accordion-item {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-white);
  border-radius: 0 !important;
}

.faq-section--product-page .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid #FFFFFF1A;
  border-radius: 0 !important;
}

.faq-content .accordion-header {
  margin: 0;
}

.faq-content .accordion-button {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.35;
  gap: 16px;
  background: transparent;
  box-shadow: none !important;
  transition: color 0.2s;
}

/* custom + /× icon — remove default Bootstrap chevron */
.faq-content .accordion-button::after {
  display: none !important;
}

.faq-content .accordion-button::before {
  content: ' + ';
  order: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--color-white);
  font-weight: 400;
  line-height: 1;
  transition: all 0.25s ease;
  text-align: center;
}

.faq-content .accordion-button:not(.collapsed)::before {
  content: '×';
}

.faq-content .accordion-collapse {
  background: transparent;
}

.faq-content .accordion-body {
  padding: 0 0 18px;
  font-weight: 500;
  font-size: var(--text-sm);
  color: #D5D5D5;
  line-height: 1.5;
}


/* ── GALLERY SECTION ── */
.gallery-section {
  padding: 10px 0 90px;
  background: var(--color-theme-bg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.gallery-item {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #161616;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* about us page */
.slide-1 .slide-bg .slide-bg--about {
  background-image: url('../aboutimg/about-bannerimg.png');
}

.hero-slider--about .hero-slide {
  min-height: 380px;
  max-height: 380px;
}

.hero-slider--about .hero-title {
  max-width: 595px;
}

.mission-section {
  padding: 70px 0;
  background: var(--color-theme-bg);
}

.mission-section .mission-block:nth-child(2) {
  flex-direction: row-reverse;
  margin-bottom: 0px;
}

/* Pull the about-page mission section up closer to the built-protect
   image above it. Applied at all breakpoints; mobile spacing can be
   tuned separately if needed. Scoped to .mission-section--about so
   product-info and watch-how-works sections (which share .mission-
   section) are unaffected. */
.mission-section--about {
  padding-top: 20px;
}

.mission-block {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.mission-block--product-page {
  align-items: flex-start;
}

.mission-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  height: 100%;
  flex: 1;
}
.mission-block--product-page .mission-img-wrap{
  flex: 0 0 55%;
}
.mission-block--product-page .mission-content{
  flex: 0 0 45%;
}

.mission-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission-content {
  flex: 1;
}

.hero-slider--about .slide-content {
  margin-top: 81.2px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* build section */

.build-banner-section {
  background: var(--color-theme-bg);
  padding-top: 70px;
  padding-bottom: 65px;
}

.build-banner-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
}

.build-banner-bg {
  position: absolute;
  inset: 0;
}

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

/* .build-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 45, 45, 0.431);
} */

.build-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 40px;
  max-width: 620px;
}

.build-banner-content .section-title {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 14px;
}

.build-banner-section .section-title,.build-banner-section .section-title-brief {
  text-align: center;
  max-width: 1035px;
  margin-inline: auto;
}

.build-banner-content .section-title-brief {
  margin-bottom: 28px;
}

.about-visibility {
  padding: 0px 0 90px;
}
/* about us end */

/* slider */
.viewer {
  width: 100%;
}

.wrapper {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

/* MAIN IMAGE */
.main {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* min-width: 440px; */
}

.mission-block--product-page .main {
  overflow: visible;
  border: 1.5px solid transparent;
  background:
    #000 padding-box,
    conic-gradient(from var(--pdcard-angle, 0deg),
      #1a1200 0%,
      #1a1200 5%,
      #FFB901 13%,
      #6b4d00 22%,
      #1a1200 38%,
      #1a1200 56%,
      #FFB901 66%,
      #6b4d00 75%,
      #1a1200 88%,
      #1a1200 100%) border-box;
  animation: pdcard-border-spin 9s linear infinite;
}

.mission-block--product-page .main img {
  border-radius: 18px;
  object-position: calc(50% - 43px) 50%;
}

/* ── Page-load slide-in: gallery from left, buy card from right ── */
@media (prefers-reduced-motion: no-preference) {
  /* Opt the mission section out of the global section-level fade-up
     so the per-column slides are the only intro motion. */
  .mission-section.fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mission-block--product-page .mission-img-wrap {
    animation: missionSlideInLeft 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .mission-block--product-page > .pdcard {
    animation: missionSlideInLeft 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
  }

  .mission-block--product-page .mission-content {
    animation: missionSlideInRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes missionSlideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes missionSlideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* contact page css */
.contact-section {
  padding-bottom: 70px;
}

.contact-section .section-title-brief {
  max-width: unset;
}

.contact-section .section-title-brief p {
  max-width: 1035px;
  margin-inline: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.contact-form {
  width: 100%;
  padding: 35px;
  border: 1px solid #FFFFFF1A;
  border-radius: 40px;
  background: var(--color-theme-bg);
}

.contact-section .build-banner-wrap {
  border-radius: unset;
  background: unset;
}

.contact-form input {
  margin-bottom: 20px;
}

.contact-form input, .contact-form textarea {
  border: 1px solid #E6E5E5;
  background: #FFFFFF40;
  border-radius: 28px;
}

.contact-form input {
  height: 60px;
}

.contact-form textarea {
  height: 140px;
  line-height: 125px;
}

.contact-form textarea:focus {
  line-height: 1.2;
}

.form-control:focus {
  border-color: unset;
  outline: 0;
  box-shadow: unset;
}

.contact-form label {
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  color: var(--color-white);
  padding-bottom: 10px;
}

.contact-form textarea {
  resize: none;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-white);
}

.contact-btn {
  display: flex;
  justify-content: center;
  padding-top: 35px;
}

.contact-btn .btn-hero {
  text-align: center;
  max-width: 190px;
  min-width: 150px;
}
/* contact end */
/* SLIDER */
.slider-container {
  position: relative;
  min-width: 155px;
  max-width: 155px;
}

.slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  height: 100%;
  /* height: 540px; */
}

.slider-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.slider img {
  width: 100%;
  /* height: 170px; */
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.6;
  margin-bottom: 10px;
  aspect-ratio: 1 / 1;
}

.slider img.active {
  opacity: 1;
  border: 2px solid white;
}

.mission-img-wrap .slider-container .arrow-up img,
.mission-img-wrap .slider-container .arrow-down img {
  width: auto;
  height: auto;
  object-position: center;
}

/* ARROWS */
.arrow-up, .arrow-down {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
  outline: 1.5px solid #fff;
  outline-offset: 6px;
}
.arrow-up:hover, .arrow-down:hover {
  outline-color: transparent;
  background: #ffffffd9;
  animation: gallery-btn-pulse 0.93s ease infinite;
}

@keyframes gallery-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); transform: translateX(-50%) scale(1); }
  50%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: translateX(-50%) scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: translateX(-50%) scale(1); }
}
.arrow-up {
  top: -16px;
}

.arrow-down {
  bottom: -16px;
}

/* MOBILE */
@media (max-width:768px) {
}
/* slider end */
/* PRODUCT CARD (renamed) */
.product-card {
  width: 100%;
  background: #252525;
  /* background: linear-gradient(180deg, #1c1c1c, #121212); */
  border-radius: 20px;
  padding: 25px;
  color: #fff;
  border: 1px solid #FFFFFF0D;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 270px;
  color: var(--color-white);
}

.price {
  text-align: right;
}

.old-price {
  color: var(--color-white-muted);
  font-size: var(--text-base);
  font-weight: 500;
}
/* Strike only the RRP value, leave the "RRP" label readable. */
.old-price s {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.new-price {
  font-size: 35px;
  font-weight: 700;
  background: linear-gradient(180deg, #FFE97A 0%, #FFB901 45%, #c68a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,185,1,0.15))
    drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.star-block {
  display: flex;
  gap: 2px;
  /* align-items: flex-end;
  margin-top: 20px; */
}

.star {
  width: 11px;
  height: 11px;
  background: #FB923C;
  clip-path: polygon(
  50% 0%,
  61% 35%,
  98% 35%,
  68% 57%,
  79% 91%,
  50% 70%,
  21% 91%,
  32% 57%,
  2% 35%,
  39% 35%
  );
  transform: rotate(36deg);
}

/* RATING */
.rating {
  margin-top: 10px;
  color: #ff8c00;
  font-size: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.reviews a{
  color: var(--color-white-muted);
  margin-left: 8px;
}

/* SUBTITLE */
.subtitle {
  margin-top: 20px;
  color: var(--color-white-muted);
  font-size: var(--text-base);
}
.trust_line {
  margin-top: 20px;
  color: var(--color-white-muted);
  font-size: var(--text-base);
}

.trust_line:last-child {
  margin-top: 10px;
}

/* OPTIONS */
.options {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* HIDE RADIO */
.options input[type="radio"] {
  display: none;
}

/* OPTION */
.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #191919;
  padding: 15px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}

/* ACTIVE STATE USING RADIO */
.options input[type="radio"]:checked + label {
  border: 2px solid #fff;
  background: #222;
}

/* RADIO CIRCLE */
.radio {
  width: 16px;
  height: 16px;
  border: 2px solid #aaa;
  border-radius: 50%;
  margin-right: 10px;
  /* Prevent the flex parent from shrinking the radio horizontally
     when text wraps (e.g. on mobile). Without this the radio gets
     squeezed to ~12×16 and border-radius:50% renders as an oval. */
  flex-shrink: 0;
}

/* checked circle */
.options input[type="radio"]:checked + label .radio {
  border-color: #fff;
  background: #fff;
}

.options input[type="radio"]:checked + label span {
  color: #fff;
}

.option-left {
  display: flex;
  align-items: center;
}

.option-text {
  font-size: var(--text-lg);
  color: var(--color-white);
  font-weight: 600;
}

.option-text span {
  display: block;
  font-size: var(--text-sm);
  color: #616161;
  font-weight: 500;
}

.option-price {
  font-family: var(--font-inter);
  text-align: right;
  font-size: var(--text-base);
  font-weight: 800;
}

.save {
  font-size: var(--text-2xs);
  color: var(--color-white);
  font-weight: 700;
}

/* BADGE */
.badge {
  font-family: var(--font-inter);
  font-weight: 700;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: bold;
}

/* FEATURES */

.features {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white-muted);
  font-size: var(--text-base);
  font-weight: 500;
}

.feature i {
  font-style: normal;
}

.feature span img {
  width: 20px;
  height: 20px;
}

/* BUTTON */
.product-button {
  margin-top: 20px;
}
.product-button > a > span {
  padding-right: 8px;
}
.product-button .btn-text{
  color: #000000;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing:-0.03em;

}

.product-card .product-button a,
.product-card .product-button .pdp-buy-now {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  background: #FFB901;
  color: var(--color-base);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  line-height: 1.2;
}

.product-card .product-button a::after,
.product-card .product-button .pdp-buy-now::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.product-card .product-button a:hover::after,
.product-card .product-button a:active::after,
.product-card .product-button .pdp-buy-now:hover::after,
.product-card .product-button .pdp-buy-now:active::after {
  display: none;
}

@keyframes btnShimmer {
  0%   { left: -80%; }
  35%  { left: 120%; }
  100% { left: 120%; }
}
/* Keep Buy Now + More-payment-options solid yellow on hover and just
   lift + scale. The previous rule made bg transparent + text white,
   but .btn-text has its own color:#000 so the label became black on
   the dark page bg = invisible. Matching the .btn-buy pattern. */
.product-card .product-button a:hover,
.product-card .product-button a:active,
.product-card .product-button a:focus-within,
.product-card .product-button .pdp-buy-now:hover,
.product-card .product-button .pdp-buy-now:active,
.product-card .product-button .pdp-buy-now:focus-within {
  background: #FFB901;
  color: var(--color-base);
  transform: translateY(-2px) scale(1.02);
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(255, 185, 1, 0.35);
}
.product-card .product-button a:hover svg path,
.product-card .product-button a:active svg path,
.product-card .product-button a:focus-within svg path{
  fill: var(--color-base);
}
.product-card .product-button a:hover .btn-text,
.product-card .product-button a:active .btn-text,
.product-card .product-button a:focus-within .btn-text{
    color: var(--color-base);
}
#judgeme_product_reviews .jm-text.jm-review-widget-minimal-header__title{
  display: none;
}
/* DOTS */
.dots {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  max-width: 24px;
  max-height: 16px;
}

/* ── Dynamic payment buttons (Apple Pay / Google Pay / Shop Pay / PayPal) ── */
.product-card .product-button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.pdp-buy-form {
  margin: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.product-card .product-button .pdp-buy-now {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.pdp-express-checkout {
  margin-top: 14px;
}

.pdp-express-checkout .shopify-payment-button {
  width: 100%;
}

/* Hide Shopify's generic blue "Buy it now" — our yellow Buy Now button replaces it */
.pdp-express-checkout .shopify-payment-button__button--unbranded {
  display: none !important;
}

/* Style the branded express buttons (Shop Pay / Apple Pay / Google Pay / PayPal) */
.pdp-express-checkout .shopify-payment-button__button {
  border-radius: 50px !important;
  min-height: 48px;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Match the Buy Now / More-payment hover treatment — lift + scale + glow.
   Brand bg colour comes from Shopify so we don't override it; the purple
   tint on the glow blends with the Shop Pay button without clashing on
   Apple/Google Pay (which are mostly white/black and read the shadow as
   a soft halo). */
.pdp-express-checkout .shopify-payment-button__button:hover,
.pdp-express-checkout .shopify-payment-button__button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 24px rgba(90, 49, 244, 0.35);
}

.pdp-express-checkout .shopify-payment-button__more-options {
  /* Hidden — duplicates Buy Now's destination (both lead to the standard
     Shopify checkout where card / PayPal / bank options are available). */
  display: none !important;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.03em;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.pdp-returns-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
/* Force inline-text rendering — the surrounding `.product-card
   .product-button a` rule paints any anchor here as a full yellow
   pill button with dark text, transforms, and shadows. Override all
   of it so this disclaimer link reads as a plain inline hyperlink. */
.pdp-returns-note .pdp-returns-note__link,
.pdp-returns-note a {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.pdp-returns-note .pdp-returns-note__link:hover,
.pdp-returns-note a:hover {
  color: #FFB901 !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Kill the white sheen sweep (::after pseudo) that the surrounding
   .product-button a rules apply to every anchor. */
.pdp-returns-note .pdp-returns-note__link::before,
.pdp-returns-note .pdp-returns-note__link::after,
.pdp-returns-note a::before,
.pdp-returns-note a::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}

.pdp-express-checkout .shopify-payment-button__more-options:hover {
  /* Bg stays yellow on hover (see .product-card .product-button a:hover
     above), so the text needs to stay dark for contrast — not yellow. */
  color: var(--color-base);
}

.dot.active {
  background: #00bcd4;
}
/* faq page*/
.faq-section--faq-page .slick-dots {
  bottom: -45px;
}

/* .faq-section--faq-page .faq-img-wrap img{
  min-height: 560px;
  max-height: 560px;
} */

.faq-section--faq-page {
  padding: 70px 0 70px;
}

.faq-testimonials .slick-dots li {
  margin: 0 2px;
}

.faq-testimonials .slick-dots li button {
  width: 100%;
  height: 100%;
}

.faq-testimonials .slick-dots li button:before {
  font-size: 45px;
  width: 100%;
  height: 100%;
  color: #B4B4B4;
  opacity: 1;
}

.faq-testimonials .slick-dots li.slick-active button:before {
  color: #C3761A;
}

/* faq page end */
/* RESPONSIVE */
@media(max-width:480px) {
  .product-card {
    padding: 18px;
  }
  
  .title {
    font-size: 22px;
  }
  
  .new-price {
    font-size: 22px;
  }
}
/* product card end */

/* ── FOOTER ── */
.footer {
  position: relative;
  z-index: 1;
  background: var(--color-footer-bg);
  padding: 16px 0 56px;
}

.footer-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* logo */
.footer-logo img {
  max-width: 220px;
}

/* description */
.footer-desc {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white-muted);
  line-height: 1.72;
  margin: 20px 0 25px;
}

/* email subscribe */
.footer-subscribe {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  position: relative;
}

.footer-email-input {
  background: rgba(217, 217, 217, 0.149);
  border: 1.5px solid rgba(176, 176, 176, 1);
  border-radius: 100px;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-white);
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 3px 20px;
}

.footer-email-input::placeholder {
  color: rgba(210, 210, 210, 1);
}

.footer-send-btn {
  background: var(--color-white);
  color: #000000;
  border: none;
  border-radius: 100px;
  padding: 10px 45px;
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  position: absolute;
  right: 4px;
  top: 3px;
}

.footer-send-btn:hover {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

/* nav links */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  margin: 48px 0;
}

.footer-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFFB2;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--color-white);
}

/* social icons */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 56px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(0, 119, 181, 0) 0%, rgba(0, 146, 207, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.2s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

.social-icon svg {
  width: 15px;
  height: 15px;
}

/* divider */
@keyframes shimmer-outward {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
@keyframes shimmer-inward {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.16);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, white 18%, white 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, white 18%, white 82%, transparent 100%);
}

.footer > .footer-divider {
  margin-bottom: 64px;
}

.footer-divider::before,
.footer-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(220, 180, 255, 0.25) 8%,
    rgba(180, 210, 255, 0.28) 15%,
    rgba(180, 255, 230, 0.25) 22%,
    rgba(255, 255, 255, 0.9)  28%,
    rgba(255, 245, 180, 0.28) 35%,
    rgba(255, 200, 160, 0.25) 42%,
    rgba(255, 180, 220, 0.25) 49%,
    rgba(210, 180, 255, 0.28) 56%,
    rgba(255, 255, 255, 0.9)  62%,
    rgba(180, 225, 255, 0.25) 69%,
    rgba(180, 255, 210, 0.25) 76%,
    rgba(255, 235, 160, 0.25) 83%,
    rgba(255, 255, 255, 0.7)  89%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.footer-divider::before { animation-name: shimmer-outward; }
.footer-divider::after  { animation-name: shimmer-inward; }

/* copyright */
.footer-copy {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin: 18px 0 0;
  text-align: center;
}

@media (max-width:1200px) {
  .slider-testimonials .slick-slide {
    margin: 0 10px;
  }
}

@keyframes btn-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); transform: scale(1); }
  50%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}

.btn-hero {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.btn-hero:hover,
.btn-hero:active,
.btn-hero:focus-within {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: none !important;
  animation: btn-hero-pulse 0.93s ease infinite !important;
}

@media (max-width:1024px) {
  .nav-links a {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .logo-text {
    font-size: 19px;
  }
  
  .testi-card {
    padding: 16px 20px;
  }
  
  .testimonials-section {
    padding: 40px 0 0;
  }
  
  .product-testimonials {
    padding: 0px 0 40px;
  }
}

@media (max-width:991.98px) {
  /* faq page */
  .protection-section .how-card:hover {
  transform: unset;
}

  .faq-section--faq-page .faq-img-wrap img {
    max-height: 360px;
    min-height: 360px;
    position: relative;
  }
  
  .faq-section--faq-page .faq-img-wrap {
    display: block;
  }
  
  .faq-section.faq-section--faq-page {
    padding: 70px 0 70px;
  }
  /* faq page end */
  .form-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .contact-form {
    padding: 20px;
  }
  
  .contact-form input {
    height: 45px;
  }
  
  .about-visibility {
    padding: 0px 0 50px;
  }
  /* about us */
  .mission-img-wrap {
    width: 100%;
  }
  
  .mission-section .mission-block:nth-child(2) {
    flex-direction: column;
  }
  
  .mission-block {
    flex-direction: column;
  }
  
  .mission-img-wrap {
    aspect-ratio: 16 / 9;
  }
  
  .mission-block--product-page .mission-img-wrap {
    aspect-ratio: unset;
  }
  
  .engineered-section {
    padding: 50px 0;
  }
  
  
  /* about us end */
  .nav-links {
    display: none;
  }
  
  .hamburger {
    display: flex;
  }
  
  header {
    max-width: calc(100% - 60px);
    top: 12px;
  }
  
  nav {
    padding: 8px 20px;
    position: relative;
  }
  
  .slide-desc {
    font-size: 14px;
    padding: 0 8px;
  }
  
  .btn-shop {
    padding: 14px 36px;
    font-size: 14px;
  }
  
  .hero-slider .slick-prev {
    left: 14px;
  }
  
  .hero-slider .slick-next {
    right: 14px;
  }
  
  .hero-slider .slick-prev,
  .hero-slider .slick-next,
  .slider-testimonials .slick-prev,
  .slider-testimonials .slick-next {
    width: 32px;
    height: 32px;
  }
  
  .hero-slide {
    height: 95vh;
    min-height: 575px;
  }
  
  .engineered-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  
  .engineered-img-wrap {
    aspect-ratio: 16 / 9;
  }
  
  .how-card {
    aspect-ratio: 3 / 4;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-item:nth-child(2) {
    border-right: none;
  }
  
  .feature-item:nth-child(1),
    .feature-item:nth-child(2) {
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .testi-card {
    flex: 0 0 calc(50% - 10px);
  }
  
  .slider-testimonials {
    padding: 0 28px;
  }
  
  .feature-item:nth-child(2)::after {
    display: none;
  }
  
  /* .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
  .gallery-item {
    height: 180px;
    border-radius: 10px;
    aspect-ratio: inherit;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .faq-img-wrap {
    display: none;
  }
  
  .engineered-section {
    padding: 50px 0;
  }
  
  .how-section {
    padding: 0 0 50px;
  }
  
  .protection-section {
    padding: 50px 0 50px;
  }
  
  .features-section {
    padding: 50px 0 0;
  }
  
  .testimonials-section {
    padding: 50px 0 0;
  }
  
  .product-testimonials {
    padding: 0px 0 50px;
  }
  
  .slider-testimonials .slick-list {
    padding-bottom: 50px !important;
  }
  
  .testi-card:hover {
    transform: translateY(18px);
  }
  
  .faq-section {
    padding: 0px 0 35px;
  }
  
  .gallery-section {
    padding: 0px 0 50px;
  }
  
  .mission-block--product-page .mission-content {
    width: 100%;
  }
}

@media (max-width:767.98px) {
  .main{
    aspect-ratio: unset;
  }
  .main img{
    height: 360px;
  }
  .how-card:hover {
  transform: unset;
}
  .home_page_hero .slick-slider .slick-list{
    max-height: 500px;
  }
  .protection-section .how-cards{
    gap: 30px;
  }
  /* product slider */
  .slider-container {
    position: relative;
    min-width: 270px;
    max-width: 270px;
  }
  
  .mission-img-wrap .slider-container .arrow-up img {
    transform: rotate(270deg);
  }
  
  .mission-img-wrap .slider-container .arrow-down img {
    transform: rotate(270deg);
  }
  
  .mission-block--product-page .mission-content {
    width: 100%;
  }
  
  .wrapper {
    flex-direction: column;
  }
  
  .slider-container {
    width: 100%;
  }
  
  .slider {
    flex-direction: row;
    height: auto;
  }
  
  .slider-track {
    flex-direction: row;
  }
  
  .slider img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
  
  .arrow-up {
    left: calc(0px - 10px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  .arrow-up, .arrow-down {
    width: 20px;
    height: 20px;
  }
  
  .arrow-down {
    top: 50%;
    left: calc(100% - 20px);
    transform: translateY(-50%);
  }
  /* slider end */
  .hero-slide {
    max-height: 500px;
  }
  
  .how-cards {
    grid-template-columns: 1fr;
  }
  
  .how-card {
    aspect-ratio: 4 / 1.6;
  }
  
  .slider-testimonials {
    padding: 0 15px;
  }
  
  
        /* .slider-testimonials .slick-prev {
        left: 50%;
        bottom: 0;
        top: unset;
    }
 
  
  .slider-testimonials .slick-next {
     right: 50%;
        bottom: 0;
        top: unset;
  } */
  .slider-testimonials .slick-prev {
  left: calc(50% - 40px); /* move left button left */
  bottom: 0;
  top: unset;
}

.slider-testimonials .slick-next {
  left: calc(50% + 14px); /* move right button right */
  bottom: 0;
  top: unset;
}
  .testi-card:hover {
    transform: translateY(0);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-item {
    height: 140px;
  }
  
  .how-card-title {
    font-size: var(--text-base);
  }
  
  .section-title-brief {
    font-size: var(--text-sm);
  }
  
  .engineered-img-wrap {
    aspect-ratio: inherit;
    min-height: inherit;
    height: 270px;
  }
  
  .tag-pill-icon {
    width: 30px;
    height: 30px;
  }
  
  .tag-pill {
    font-size: var(--text-xs);
  }
}

@media (max-width:576px) {
  /* Hero fills the full viewport on mobile. Overrides the 650px wrap
     cap (≤768px), the 95vh/575px slide rule (≤991.98px), the 500px
     hero-slide max-height (≤767.98px), and the 500px slick-list cap
     (≤767.98px) which was the actual visual constraint — Slick's
     .slick-list is the parent that clips the slide. Uses 100dvh so
     the browser chrome appearing/disappearing doesn't leave a gap. */
  /* Product page section reorder: video before "Guaranteed for Life" on
     mobile only. Shopify renders sections in JSON-order which is shared
     across all viewports, so we make #MainContent a flex column on
     mobile and assign explicit `order` values to swap two sections
     while keeping everything else in place. Scoped via :has() so the
     flex layout only applies on the product page. Section IDs use
     [id$="__name"] (attribute suffix selector) because Shopify wraps
     them with a template prefix like `template--12345__` in production. */
  #MainContent:has([id$="__product_video_section"]) {
    display: flex;
    flex-direction: column;
  }
  /* Even the video spacing on mobile. Section default is `padding:24px
     0 48px; margin-top:-40px` which was set up for the old desktop
     order (video after trust). With video now between product_info and
     trust on mobile, the negative margin collapses the top gap. Reset
     it so both sides breathe equally. */
  .product-video-section {
    margin-top: 0;
    padding: 40px 0;
  }
  [id$="__page_banner_thNnBp"]            { order: 1; }
  [id$="__brand_divider_pdp_top"]         { order: 2; }
  [id$="__product_info_Mf3Ng3"]           { order: 3; }
  [id$="__product_video_section"]         { order: 4; } /* moved up */
  [id$="__brand_divider_pdp_video_trust"] { order: 5; } /* divider between */
  [id$="__product_trust_band"]            { order: 6; } /* moved down */
  [id$="__brand_divider_pdp_a"]           { order: 7; }
  [id$="__how_it_works_product"]          { order: 8; }
  [id$="__brand_divider_pdp_b"]           { order: 9; }
  [id$="__visible_security_Y8dayr"]       { order: 10; }

  .hero-slider-wrap:has(> .hero-slider) {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .home_page_hero .slick-slider .slick-list {
    max-height: none;
    height: 100vh;
    height: 100dvh;
  }
  .hero-slide {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
  }

  .slider-container{
    min-width: 100%;
    max-width: 100%;
  }
  .mission-img-wrap{
    min-height: unset !important;
  }
  .build-banner-wrap {
    min-height: 280px;
  }
  
  .option-text {
    font-size: var(--text-md);
  }
  
  header {
    max-width: calc(100% - 20px);
    top: 10px;
  }
  
  nav {
    padding: 8px;
    min-height: 51px;
  }

  .nav-logo {
    margin-left: 16px;
  }

  .nav-logo img {
    max-width: 165px;
  }
  
  .nav-btn {
    width: 34px;
    height: 34px;
  }

  /* Buy Now pill keeps text on phone — override the round 34×34 nav-btn rule.
     Smaller than the nav's min-height so the header height is preserved by nav. */
  .nav-buy-btn {
    width: auto;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    gap: 5px;
  }

  .nav-buy-btn .nav-buy-btn__icon {
    width: 14px;
    height: 14px;
  }
  
  .nav-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .nav-actions {
    gap: 6px;
  }
  
  .slide-content {
    padding: 50px 42px;
  }
  
  .slide-rating {
    font-size: 12px;
    margin-bottom: 14px;
  }
  
  .star {
    font-size: 14px;
  }
  
  .hero-title {
    margin-bottom: 14px;
  }
  
  .slide-desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  
  .btn-shop {
    padding: 13px 30px;
    font-size: 13px;
  }
  
  .hero-slider .slick-prev {
    left: 8px;
  }
  
  .hero-slider .slick-next {
    right: 8px;
  }
  
  .hero-slider .slick-prev,
  .hero-slider .slick-next,
  .slider-testimonials .slick-prev,
  .slider-testimonials .slick-next {
    width: 26px;
    height: 26px;
  }
  
  .hero-slider .slick-prev::before,
    .hero-slider .slick-next::before {
    font-size: 14px;
  }
  
  .hero-slider .slick-dots {
    bottom: 18px;
  }
  
  .how-card-content {
    padding: 12px 12px 8px;
  }
  
  .step-number {
    width: 30px;
    height: 30px;
    font-size: var(--text-sm);
  }
  
  .slider-testimonials {
    padding: 0 44px;
  }
  
  .visibility-banner-content {
    padding: 35px 10px;
  }
  
  .slider-testimonials {
    padding: 0;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .feature-item::after {
    display: none;
  }
  
  .gallery-grid {
    gap: 10px;
  }
  
  .engineered-img-wrap {
    height: 200px;
  }
  
  .faq-section {
    padding-left: 20px;
    padding-right: 20px;
    /* Breathing room from the testimonials slider above — without this
       the FAQ header sits right against the slider's prev/next arrows. */
    padding-top: 40px;
  }

  /* Inner-page banners (about, faq, installation, etc.) butt right up
     against the next section on mobile. Add breathing room — scoped to
     :not(.home_page_hero) so the home hero stays edge-to-edge. */
  .hero-slider-wrap:not(.home_page_hero) {
    margin-bottom: 30px;
  }

  /* Reorder image+content sections to: HEADING → IMAGE/VIDEO → BODY.
     The heading-first read works better on a tall, narrow phone where the
     image alone gives no context. `display: contents` on the wrapping
     content div flattens its h2 + body children into the flex parent so
     they can be ordered around the image sibling. */
  .mission-section .mission-block {
    display: flex;
    flex-direction: column;
  }
  .mission-section .mission-content {
    display: contents;
  }
  .mission-section .mission-content > .section-title {
    order: 1;
  }
  .mission-section .mission-img-wrap {
    order: 2;
  }
  .mission-section .mission-content > .section-title-brief,
  .mission-section .mission-content > .brief-block {
    order: 3;
  }

  /* Trim trailing margin inside mission-section body copy so the gap to
     the next divider matches the how-section's gap (the section above
     uses padding-bottom, this one was relying on stacked text margins,
     which read as a visibly bigger gap). */
  .mission-section .brief-block,
  .mission-section .section-title-brief {
    margin-bottom: 0;
  }
  .mission-section .brief-block > :last-child,
  .mission-section .section-title-brief > :last-child {
    margin-bottom: 0;
  }
  /* Section padding-bottom tuned to make watch-how-works's above-divider
     gap match how-section's (~74px). The section already inherits ~40px
     of intrinsic trailing space from line-height + flex layout, so 34px
     padding-bottom lands the visible gap at parity. Scoped via :has()
     so it only applies to the watch-how-works variant, not the
     about-mission section which needs padding-bottom: 0 for its in-
     section divider symmetry. */
  .mission-section:has(.whw-video-wrap) {
    padding-bottom: 34px;
  }

  /* ── BRAND DIVIDER GAP NORMALISATION ──
     Every section that immediately precedes a brand-divider on mobile
     gets a uniform 50px bottom padding so the visible gap from content
     edge to the divider monogram lands close to the install page's
     74px reference (50px pb + 36px divider pt - some intrinsic = ~74).
     Same on the other side via the adjacent-sibling selector. */
  [id^="shopify-section"]:has(+ .brand-divider-section) > section {
    padding-bottom: 50px;
  }
  .brand-divider-section + [id^="shopify-section"] > section {
    padding-top: 50px;
  }
  /* watch-how-works carries ~40px of intrinsic trailing whitespace, so
     give it less explicit padding — needs to win specificity over the
     universal :has(+ .brand-divider-section) rule above. */
  [id^="shopify-section"]:has(+ .brand-divider-section) > .mission-section:has(.whw-video-wrap) {
    padding-bottom: 34px;
  }
  .brand-divider-section + [id^="shopify-section"] > .mission-section:has(.whw-video-wrap) {
    padding-top: 0;
  }

  /* Built To Protect has the same heading → image → body intent but its
     image is a sibling of the heading/body, not nested. */
  .build-banner-section .container {
    display: flex;
    flex-direction: column;
  }
  .build-banner-section .container > .section-title {
    order: 1;
  }
  .build-banner-section .build-banner-wrap {
    order: 2;
  }
  .build-banner-section .container > .section-title-brief {
    order: 3;
  }

  /* Engineered Section — same heading → media → body reorder pattern.
     display:contents flattens .engineered-content's children into the
     flex parent so the h2 can be ordered above the video while the
     description + tag pills stay below. */
  .engineered-section .engineered-grid {
    display: flex;
    flex-direction: column;
  }
  .engineered-section .engineered-content {
    display: contents;
  }
  .engineered-section .engineered-content > .section-title {
    order: 1;
  }
  .engineered-section .engineered-img-wrap {
    order: 2;
  }
  .engineered-section .engineered-content > .section-title-brief,
  .engineered-section .engineered-content > .tags-row {
    order: 3;
  }

  /* ── BRAND SECTION DIVIDER (mobile-only) ──
     Stahlgard monogram centered between two thin rules that draw inward
     from the outer edges toward the monogram when the divider scrolls
     into view, then a continuous yellow "breath" pulse synchronises the
     monogram halo and the rule
     glow so the divider keeps subtly animating, not just on reveal.
     Triggered by .is-visible (added by the brand-divider observer in
     custom.js). */
  .brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px 24px;
    width: 100%;
    box-sizing: border-box;
  }
  .brand-divider__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 185, 1, 0.55) 100%);
    transform: scaleX(0);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  }
  .brand-divider__rule--left {
    /* Draw in from the LEFT edge toward the monogram. Gradient is
       transparent at the outer edge, brightening to gold near the
       centre, so the line reads as fading in from offscreen. */
    transform-origin: left center;
  }
  .brand-divider__rule--right {
    /* Draw in from the RIGHT edge toward the monogram. Gradient is
       gold near the centre, fading to transparent at the outer edge. */
    transform-origin: right center;
    background: linear-gradient(90deg, rgba(255, 185, 1, 0.55) 0%, transparent 100%);
  }
  .brand-divider__mark {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.78) rotate(-6deg);
    transition:
      opacity 0.6s ease 0.05s,
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
  }
  .brand-divider__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
  }
  /* Metallic shimmer — a soft diagonal highlight sweeps across the
     monogram and is masked to the silhouette (via --mark-img set inline
     on the .brand-divider__mark element from the snippet) so the sheen
     only paints over the S shape, not the surrounding box. Reads like
     light catching polished steel. */
  .brand-divider__mark::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Two highlights baked into one gradient — both sweep right-to-left
       in lockstep across the monogram, one chasing the other. */
    background-image: linear-gradient(
      110deg,
      transparent 10%,
      rgba(255, 255, 255, 0.65) 25%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.65) 75%,
      transparent 90%
    );
    background-size: 220% 100%;
    background-position: 110% 0;
    background-repeat: no-repeat;
    -webkit-mask: var(--mark-img) center / contain no-repeat;
            mask: var(--mark-img) center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease 0.7s;
  }
  .brand-divider.is-visible .brand-divider__rule {
    transform: scaleX(1);
  }
  .brand-divider.is-visible .brand-divider__mark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  /* Kick the shimmer sweep off after the entrance settles. The keyframe
     parks the highlight off-screen for most of each cycle, so the sheen
     reads as an occasional flash rather than a constant slider. */
  .brand-divider.is-visible .brand-divider__mark::after {
    opacity: 1;
    animation: brandDividerShimmer 4s ease-in-out 0.9s infinite;
  }
  /* Right-to-left sweep: start with the highlight off to the right of the
     monogram (position 110% puts the gradient origin past the right edge),
     then ease to -110% which carries it off to the left. The hold at the
     end parks the sheen out of view between cycles. */
  @keyframes brandDividerShimmer {
    0%   { background-position:  110% 0; }
    55%  { background-position: -110% 0; }
    100% { background-position: -110% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand-divider__rule,
    .brand-divider__mark { transition: none; transform: none; opacity: 1; }
    .brand-divider.is-visible .brand-divider__mark::after { animation: none; opacity: 0; }
  }

  /* Symmetric spacing around the divider on mobile — kill the surrounding
     section paddings so the divider's own 36px padding dominates equally
     on both sides. Without this the divider sits visibly higher than
     centre because mission-section's 70px top padding + build-banner's
     65px bottom padding stack ABOVE the divider while only the divider's
     own padding sits BELOW it. */
  .build-banner-section {
    padding-bottom: 0;
  }
  .mission-section {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Reclaim a small breathing margin between mission blocks themselves
     (the second divider sits here — its 36px padding is the visual gap). */
  .mission-section .mission-block + .mission-block {
    margin-top: 0;
  }
}

/* Hide the brand divider on tablet/desktop — it's a mobile-only flourish.
   Scoped to min-width so it never competes with the mobile display:flex
   inside @media (max-width: 576px). */
@media (min-width: 577px) {
  .brand-divider {
    display: none;
  }
}
  
  .footer {
    padding: 35px 0;
  }
  
  .footer-subscribe {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-subscribe > form{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .footer-nav {
    gap: 10px 20px;
    margin: 35px 0;
  }
  
  .footer-send-btn {
    position: relative;
    top: inherit;
    right: inherit;
  }
  
  .footer-socials {
    margin-bottom: 35px;
  }
}

@media (max-width:480px) {
  .how-card {
    aspect-ratio: 4 / 2;
  }
}