/* ================================================================
   styles.css — Sport Upholstery & Car Accessories UAE
   sportuholsteryuae.com
   ================================================================ */

:root {
  /* Chrome-blue logo palette */
  --red: #1e6fff;           /* primary blue  */
  --red-light: #4d8fff;     /* hover blue    */
  --red-dark: #0a3dbf;      /* deep blue     */
  --gold: #a8c8f0;          /* chrome silver-blue  */
  --gold-light: #e0eeff;    /* bright chrome */
  --dark: #05080f;          /* near-black navy */
  --dark2: #090e1a;
  --dark3: #0e1626;
  --dark4: #141f33;
  --gray: #7a8fa8;
  --light: #e8f0fa;
  --white: #fff;

  /* Glow helpers */
  --glow: rgba(30,111,255,0.45);
  --glow-soft: rgba(30,111,255,0.18);
  --chrome: linear-gradient(135deg,#c8d8f0 0%,#ffffff 35%,#8aacd4 60%,#c0d4ee 100%);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:72px;}
body{font-family:'Barlow',sans-serif;background:var(--dark);color:var(--white);cursor:auto;padding-bottom:120px;}
a, a:link, a:visited, a:active { color: inherit; text-decoration: none; }
p, li, a { overflow-wrap: anywhere; }
img, video, iframe { max-width: 100%; }
section:not(.hero){content-visibility:auto;contain-intrinsic-size:1000px;}

/* ── CURSOR ─────────────────────────────────────────────────── */
.cursor, .cursor-follower {
  display: none; /* Hidden by default */
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#cursor){
    cursor:none;
  }
  .cursor {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--red);
    border-radius: 50%;
    transition: transform .1s, width .2s, height .2s, background .2s;
  }
  .cursor-follower {
    display: block;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(30,111,255,0.5);
    border-radius: 50%;
    transition: transform .25s cubic-bezier(.17,.67,.52,1.05), border-color .3s;
  }
  body:has(a:hover) .cursor {
    width: 20px;
    height: 20px;
    background: var(--red-light);
  }
}

@media (max-width: 900px) {
  .cursor, .cursor-follower {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

/* ── NAV ─────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 60px;display:flex;align-items:center;justify-content:space-between;transition:background .4s,padding .4s;overflow:hidden;}
body:has(.mnav-drawer.open) nav{z-index:9997;}
nav.scrolled{background:rgba(5,8,15,0.97);padding:14px 60px;border-bottom:1px solid rgba(30,111,255,0.25);backdrop-filter:blur(16px);}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;}
.nav-logo-mark{width:46px;height:46px;background:linear-gradient(135deg,#1e6fff,#0a3dbf);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(30,111,255,0.45);transition:border-radius .3s;}
.nav-logo:hover .nav-logo-mark{border-radius:50%;}
.nav-logo-text{font-family:'Bebas Neue',cursive;font-size:17px;letter-spacing:2px;color:#fff;line-height:1.1;}
.nav-links{display:flex;gap:34px;list-style:none;}
.nav-links a{color:rgba(255,255,255,0.65);text-decoration:none;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;transition:color .2s;font-family:'Barlow Condensed',sans-serif;}
.nav-links a:hover{color:var(--red);}
.nav-cta{background:linear-gradient(135deg,#1e6fff,#0a3dbf)!important;color:#fff!important;padding:9px 22px!important;border-radius:8px!important;transition:background .2s,transform .2s!important;}
.nav-cta:hover{background:linear-gradient(135deg,#4d8fff,#1e6fff)!important;transform:translateY(-1px);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px;margin:-10px;background:none;border:none;}
.hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:all .35s cubic-bezier(.4,0,.2,1);display:block;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── MOBILE NAV RIGHT GROUP ─────────────────────────────────── */
.nav-mobile-right{display:none;align-items:center;gap:10px;}
.nav-wa-pill{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(37,211,102,0.12);border:1.5px solid rgba(37,211,102,0.35);color:#25d366;transition:all .2s;text-decoration:none;flex-shrink:0;}
.nav-wa-pill:hover{background:rgba(37,211,102,0.25);}

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.mnav-backdrop{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0);transition:background .35s;pointer-events:none;}
.mnav-backdrop.open{background:rgba(0,0,0,0.65);pointer-events:auto;}
/* ── MOBILE DRAWER — fixed flex column, links scroll, buttons always pinned bottom ── */
.mnav-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(88vw,360px);
  z-index:9999;
  background:#050810;
  border-left:1px solid rgba(30,111,255,0.18);
  box-shadow:-20px 0 60px rgba(0,0,0,0.8);
  /* three-row flex column: header | scrollable links | pinned buttons */
  display:flex;
  flex-direction:column;
  height:100%;            /* must be explicit so children can use flex */
  overflow:hidden;        /* clip; scroll only in .mnav-links */
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.mnav-drawer.open{transform:translateX(0);visibility:visible;}

/* Row 1 — header (fixed height, never shrinks) */
.mnav-header{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:26px 24px 20px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex:0 0 auto;          /* never grow or shrink */
}
.mnav-logo-text{font-family:'Bebas Neue',cursive;font-size:22px;letter-spacing:2px;color:#fff;line-height:1;flex:1;text-decoration:none;display:block;}
.mnav-logo-text span{color:var(--red);}
.mnav-close{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;flex-shrink:0;}
.mnav-close:hover{background:var(--red);transform:rotate(90deg);}

/* Row 2 — nav links (fills remaining space, scrolls if needed) */
.mnav-links{
  display:flex;flex-direction:column;
  flex:1 1 0;             /* grow to fill ALL remaining space */
  min-height:0;           /* allow shrinking below content size */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 0;
}
.mnav-links a{
  display:flex;align-items:center;gap:16px;
  padding:14px 28px;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.65);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:all .25s;
  flex-shrink:0;          /* each row stays its height; list scrolls */
}
.mnav-links a:hover{color:#fff;background:rgba(30,111,255,0.08);padding-left:36px;}
.mnav-links a:last-child{border-bottom:none;}
.mnav-num{font-size:11px;color:var(--red);opacity:0.5;font-weight:700;width:22px;flex-shrink:0;font-family:'Barlow',sans-serif;}

/* Row 3 — action buttons (pinned to bottom, never shrinks) */
.mnav-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 20px 32px;
  border-top:1.5px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg,#060912 0%,#08091580 100%);
  flex:0 0 auto;          /* fixed height, never pushed out of view */
}
.mnav-actions-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.22);
  margin-bottom:2px;text-align:center;
}
.mnav-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 16px;border-radius:12px;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  text-decoration:none;transition:all .22s;width:100%;
}
.mnav-btn:hover{transform:translateY(-2px);filter:brightness(1.18);}
.mnav-btn-wa{background:rgba(37,211,102,0.10);border:1.5px solid rgba(37,211,102,0.45);color:#25d366;}
.mnav-btn-insta{background:rgba(225,48,108,0.10);border:1.5px solid rgba(225,48,108,0.45);color:#e1306c;}
.mnav-btn-call{background:rgba(30,111,255,0.10);border:1.5px solid rgba(30,111,255,0.45);color:#aac8ff;}

/* ── HERO ────────────────────────────────────────────────────── */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;}
.hero-bg-img{position:absolute;inset:0;background:url('images/project_photos/frontimage.jpg') center/cover no-repeat;z-index:0;animation:heroZoom 18s ease-in-out infinite alternate;will-change: transform;}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.75) 55%,rgba(14,52,140,.30) 100%);z-index:1;}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px;}

@media (prefers-reduced-motion: reduce), (max-width: 900px){
  .hero-bg-img{animation:none;}
  html{scroll-behavior:auto;}
}
.hero-diagonal{position:absolute;right:0;top:0;bottom:0;width:40%;background:linear-gradient(135deg,transparent 0%,rgba(30,111,255,.06) 100%);clip-path:polygon(15% 0%,100% 0%,100% 100%,0% 100%);z-index:2;}
.hero-content{position:relative;z-index:3;padding:0 60px;max-width:800px;}

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@-webkit-keyframes heroZoom{from{transform:scale(1.04);}to{transform:scale(1.12);}}
@keyframes heroZoom{from{transform:scale(1.04);}to{transform:scale(1.12);}}
@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px);}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
@-webkit-keyframes fadeLeft{from{opacity:0;-webkit-transform:translateX(-40px);transform:translateX(-40px);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:translateX(0);}}
@-webkit-keyframes fadeRight{from{opacity:0;-webkit-transform:translateX(40px);transform:translateX(40px);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}
@keyframes fadeRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@-webkit-keyframes scaleIn{from{opacity:0;-webkit-transform:scale(.9);transform:scale(.9);}to{opacity:1;-webkit-transform:scale(1);transform:scale(1);}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
@-webkit-keyframes slideReveal{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0% 0 0);}}
@keyframes slideReveal{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0% 0 0);}}
@-webkit-keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.5);}}
@-webkit-keyframes scrollLine{0%,100%{opacity:.3;}50%{opacity:1;}}
@keyframes scrollLine{0%,100%{opacity:.3;}50%{opacity:1;}}
@-webkit-keyframes ticker{from{-webkit-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(-50%);transform:translateX(-50%);}}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@-webkit-keyframes waFloat{0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.4);}50%{box-shadow:0 4px 48px rgba(37,211,102,.7);}}
@keyframes waFloat{0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.4);}50%{box-shadow:0 4px 48px rgba(37,211,102,.7);}}
@-webkit-keyframes spinSlow{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes spinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@-webkit-keyframes float{0%,100%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ── HERO CONTENT ────────────────────────────────────────────── */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(30,111,255,.12);border:1px solid rgba(30,111,255,.4);padding:6px 16px;border-radius:20px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light);font-family:'Barlow Condensed',sans-serif;font-weight:700;margin-bottom:28px;opacity:0;animation:fadeUp .8s .2s forwards;}
.hero-badge::before{content:'';width:6px;height:6px;background:#4d8fff;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 8px #1e6fff;}
.hero h1{font-family:'Bebas Neue',cursive;font-size:clamp(58px,8.5vw,118px);line-height:.9;letter-spacing:2px;margin-bottom:24px;}
.h1-l1{opacity:0;animation:fadeUp .8s .4s forwards;display:block;}
.h1-l2{color:var(--red);opacity:0;animation:fadeUp .8s .55s forwards;display:block;}
.h1-l3{-webkit-text-stroke:1px rgba(255,255,255,.25);color:transparent;opacity:0;animation:fadeUp .8s .7s forwards;display:block;}
.hero-sub{font-size:16px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.75;max-width:520px;margin-bottom:40px;opacity:0;animation:fadeUp .8s .85s forwards;}
.hero-meta{font-size:12px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.7);margin-top:18px;opacity:0;animation:fadeUp .8s 1.05s forwards;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1s forwards;}
.hero-stats{position:absolute;bottom:50px;right:60px;z-index:3;display:flex;gap:48px;opacity:0;animation:fadeUp .8s 1.2s forwards;}
.stat{text-align:center;}
.stat-num{font-family:'Bebas Neue',cursive;font-size:46px;line-height:1;color:var(--red);}
.stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);font-family:'Barlow Condensed',sans-serif;font-weight:700;}
.hero-scroll{position:absolute;bottom:50px;left:60px;z-index:3;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:'Barlow Condensed',sans-serif;font-weight:700;opacity:0;animation:fadeUp .8s 1.4s forwards;}
.hero-scroll::before{content:'';width:1px;height:50px;background:linear-gradient(to bottom,transparent,#1e6fff);animation:scrollLine 2s ease-in-out infinite;}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary{background:linear-gradient(135deg,#1e6fff,#0a3dbf);color:#fff;padding:15px 34px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .25s;position:relative;overflow:hidden;}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:transform .5s;}
.btn-primary:hover::after{transform:translateX(100%);}
.btn-primary:hover{background:linear-gradient(135deg,#4d8fff,#1e6fff);transform:translateY(-2px);box-shadow:0 8px 32px rgba(30,111,255,.4);}
.btn-outline{color:#fff;padding:15px 34px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:1px solid rgba(255,255,255,.25);border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .25s;background:transparent;}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);transform:translateY(-2px);}
.btn-white{background:#fff;color:#1e6fff!important;padding:16px 32px;border-radius:10px;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;transition:all .3s;-webkit-text-fill-color:#1e6fff!important;}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.2);}
.btn-outline-white{background:transparent;color:#fff!important;border:2px solid #fff;padding:14px 30px;border-radius:10px;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;transition:all .3s;-webkit-text-fill-color:#fff!important;}
.btn-outline-white:hover{background:#fff;color:#1e6fff;transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.2);}

/* ── PRELOADER ───────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: #080808;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
  will-change: opacity, visibility;
}

.loader-content {
  text-align: center;
  width: 280px;
}

.loader-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
  animation: loaderPulse 2s ease-in-out infinite;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(30, 111, 255, 0.5));
}

.loader-bar-wrap {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #1e6fff, #ff102e);
  transition: width 0.4s ease;
  animation: loaderBar 2.5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.loader-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

body.loading {
  overflow: hidden;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes loaderBar {
  0% { width: 0%; transform: translateX(-100%); }
  50% { width: 100%; transform: translateX(0%); }
  100% { width: 0%; transform: translateX(100%); }
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.ticker{background:linear-gradient(90deg,#0a1a3d,#1a3a7a,#0a1a3d);padding:13px 0;overflow:hidden;}
.ticker-inner{display:flex;animation:ticker 30s linear infinite;white-space:nowrap;}
.ticker-item{font-family:'Bebas Neue',cursive;font-size:15px;letter-spacing:3px;color:#fff;padding:0 38px;opacity:.9;}
.ticker-dot{color:rgba(255,255,255,.4);font-size:7px;align-self:center;}

.lang-mini{background:var(--dark2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:26px 60px;}
.lang-mini-inner{max-width:1100px;margin:0 auto;}
.lang-mini-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:14px;}
.lang-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.lang-mini-block{padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03);min-width:0;}
.lang-mini-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.lang-mini-text{font-size:13px;color:rgba(255,255,255,.72);line-height:1.7;overflow-wrap:anywhere;}

/* ── SECTIONS ────────────────────────────────────────────────── */
section{padding:100px 60px;} /* Optimization: content-visibility would be better but contain is safer for compatibility */
.content-wrap{max-width:1100px;margin:0 auto;padding:0 18px;}
.section-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.section-tag::before{content:'';width:32px;height:2px;background:linear-gradient(90deg,#1e6fff,#4d8fff);}
.section-title{font-family:'Bebas Neue',cursive;font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:1px;margin-bottom:18px;}
.section-title span{color:var(--red);}
.section-sub{font-size:15px;font-weight:300;color:rgba(255,255,255,.5);max-width:520px;line-height:1.75;}

/* ── ABOUT ───────────────────────────────────────────────────── */
.about-band{background:var(--dark2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.about-img-wrap{position:relative;max-width:100%;min-width:0;overflow:hidden;}
.about-img-main{width:100%;display:block;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;filter:brightness(.9) contrast(1.1);}
.about-img-accent{position:absolute;bottom:-24px;right:-24px;width:min(46%,320px);max-width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;border:4px solid var(--dark2);background:var(--dark2);}
.about-badge-float{position:absolute;top:24px;left:24px;max-width:calc(100% - 48px);background:linear-gradient(135deg,#1e6fff,#0a3dbf);padding:16px 20px;border-radius:16px;text-align:center;box-shadow:0 10px 32px rgba(30,111,255,.3);}
.about-badge-float strong{font-family:'Bebas Neue';font-size:36px;display:block;color:#fff;}
.about-badge-float span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8);font-family:'Barlow Condensed';}
.about-list{list-style:none;margin-top:24px;}
.about-box{position:absolute;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.25);}
.about-box-1{top:12%;left:8%;width:130px;height:130px;}
.about-box-2{bottom:14%;left:6%;width:110px;height:110px;}
.about-list li{font-size:14px;font-weight:300;color:rgba(255,255,255,.6);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-start;gap:10px;line-height:1.5;}
.about-list li::before{content:'';width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0;margin-top:6px;}

/* ── SERVICES ────────────────────────────────────────────────── */
.services-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.service-card{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer;}
.service-card:first-child{grid-column:span 2;aspect-ratio:unset;min-height:420px;}
.service-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94),filter .5s;}
.service-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,15,.96) 0%,rgba(5,8,15,.3) 60%,transparent 100%);z-index:1;transition:background .4s;}
.service-card:hover .service-img{transform:scale(1.07);filter:brightness(.7);}
.service-card:hover .service-overlay{background:linear-gradient(to top,rgba(5,8,15,.98) 0%,rgba(5,8,15,.5) 60%,rgba(10,30,80,.15) 100%);}
.service-content{position:absolute;bottom:0;left:0;right:0;padding:32px;z-index:2;}
.service-num{font-family:'Bebas Neue',cursive;font-size:13px;letter-spacing:3px;color:var(--red);margin-bottom:8px;}
.service-name{font-family:'Bebas Neue',cursive;font-size:clamp(22px,2.5vw,30px);line-height:1;letter-spacing:1px;margin-bottom:12px;color:#fff;}
.service-desc{font-size:13px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.65;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94),opacity .4s;}
.service-card:hover .service-desc{max-height:200px;}
.service-arrow{position:absolute;top:24px;right:24px;z-index:2;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .3s;}
.service-card:hover .service-arrow{opacity:1;transform:scale(1);background:var(--red);border-color:var(--red);}

/* ── EXTENDED SERVICES ───────────────────────────────────────── */
#services-extra{background:var(--dark3);}
.services-extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:56px;}
.service-extra-card{background:var(--dark4);padding:36px 28px;position:relative;overflow:hidden;transition:background .3s;border-radius:0;}
.service-extra-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1e6fff,#4d8fff);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.service-extra-card:hover{background:#222;}
.service-extra-card:hover::after{transform:scaleX(1);}
.service-extra-icon{width:52px;height:52px;background:rgba(30,111,255,.1);border:1px solid rgba(30,111,255,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s,border-color .3s;}
.service-extra-card:hover .service-extra-icon{background:rgba(30,111,255,.2);border-color:rgba(30,111,255,.5);}
.service-extra-icon svg{width:24px;height:24px;color:var(--red);}
.service-extra-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;color:#fff;}
.service-extra-desc{font-size:13px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.65;}

/* ── EXTRA SERVICES ─────────────────────────────────────────── */
.services-extra{background:var(--dark);padding-bottom:100px;}
.services-extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.service-extra-card{background:rgba(255,255,255,0.03);padding:40px 30px;border-radius:24px;border:1px solid rgba(255,255,255,0.05);transition:all .3s;text-align:center;}
.service-extra-card:hover{background:rgba(30,111,255,0.05);border-color:rgba(30,111,255,0.3);transform:translateY(-10px);}
.se-icon{margin-bottom:20px;display:flex;justify-content:center;color:var(--red);transition:transform .3s, color .3s;}
.service-extra-card:hover .se-icon{transform:scale(1.1);color:#fff;}
.se-icon svg{width:36px;height:32px;filter:drop-shadow(0 0 8px rgba(200,16,46,0.3));}
.service-extra-card h3{font-family:'Bebas Neue',cursive;font-size:24px;letter-spacing:2px;margin-bottom:12px;color:#fff;}
.service-extra-card p{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.6;}

@media(max-width:900px){
  .services-extra-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .services-extra-grid{grid-template-columns:1fr;}
}

/* ── WHY US ─────────────────────────────────────────────────── */
#why{background:var(--dark2);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:56px;}
.why-card{background:var(--dark3);padding:40px 30px;position:relative;overflow:hidden;transition:background .3s;}
.why-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1e6fff,#4d8fff);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.why-card:hover{background:var(--dark4);}
.why-card:hover::before{transform:scaleX(1);}
.why-icon-wrap{width:56px;height:56px;background:rgba(30,111,255,.1);border:1px solid rgba(30,111,255,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:all .3s;}
.why-card:hover .why-icon-wrap{background:rgba(30,111,255,.2);border-color:var(--red);}
.why-icon-wrap svg{width:26px;height:26px;color:var(--red);}
.why-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;color:#fff;}
.why-text{font-size:13px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.7;}

/* ── PROCESS ─────────────────────────────────────────────────── */
#process{background:var(--dark);}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative;}
.process-steps::before{content:'';position:absolute;top:35px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#1e6fff,transparent);}
.process-step{text-align:center;padding:0 24px;}
.step-num{width:70px;height:70px;border:2px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-family:'Bebas Neue',cursive;font-size:28px;color:var(--red);background:var(--dark);box-shadow:0 0 16px rgba(30,111,255,.15);position:relative;z-index:1;transition:all .3s;}
.process-step:hover .step-num{background:var(--red);color:#fff;box-shadow:0 0 32px rgba(30,111,255,.45);}
.step-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;color:#fff;}
.step-text{font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.65;}

/* ── GALLERY ─────────────────────────────────────────────────── */
.gallery-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 60px;
  margin-bottom: 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--red) rgba(255,255,255,0.05);
  content-visibility: auto; /* Performance optimization */
}

/* Custom scrollbar for Chrome/Safari/Edge */
.gallery-strip::-webkit-scrollbar {
  height: 6px;
  display: block;
}
.gallery-strip::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  margin: 0 60px;
}
.gallery-strip::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 10px;
}
.gallery-strip::-webkit-scrollbar-thumb:hover {
  background: #ff4d4d;
}

.gallery-strip img, .gallery-strip video {
  height: 280px;
  width: auto;
  flex-shrink: 0;
  object-fit: cover;
  filter: brightness(.7) saturate(.8);
  transition: all 0.4s cubic-bezier(.25,.46,.45,.94);
  border-radius: 16px;
  scroll-snap-align: start;
  transform: translateZ(0); /* hardware acceleration */
  will-change: transform, filter;
}

.gallery-strip img:hover, .gallery-strip video:hover {
  filter: brightness(1) saturate(1.1);
  transform: scale(1.02);
  z-index: 2;
}

/* Responsive adjustments for gallery */
@media (max-width: 1024px) {
  .gallery-strip { padding: 20px 40px; }
  .gallery-strip::-webkit-scrollbar-track { margin: 0 40px; }
  .gallery-strip img, .gallery-strip video { height: 240px; }
}
@media (max-width: 768px) {
  .gallery-strip { padding: 15px 20px; gap: 8px; }
  .gallery-strip::-webkit-scrollbar-track { margin: 0 20px; }
  .gallery-strip img, .gallery-strip video { height: 200px; border-radius: 12px; }
}
@media (max-width: 480px) {
  .gallery-strip { padding: 10px 15px; }
  .gallery-strip::-webkit-scrollbar-track { margin: 0 15px; }
  .gallery-strip img, .gallery-strip video { height: 180px; }
}

.gallery-strip--mobile{display:none;}

@media (max-width: 1024px){
  .gallery-strip--desktop{display:none;}
  .gallery-strip--mobile{display:flex;}
}

.ba-section{background:var(--dark2);padding:70px 60px 24px;}
.ba{max-width:1100px;margin:34px auto 0;}
.ba-media{position:relative;max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);box-shadow:0 16px 55px rgba(0,0,0,0.45);background:rgba(255,255,255,0.03);aspect-ratio:16/9;}
.ba-media > .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-after-wrap{position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden;}
.ba-after-wrap .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-handle{position:absolute;top:0;left:50%;width:2px;height:100%;background:rgba(30,111,255,0.85);transform:translateX(-1px);}
.ba-handle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(5,8,15,0.75);border:1.5px solid rgba(30,111,255,0.65);box-shadow:0 0 24px rgba(30,111,255,0.35);}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;}
.ba-label{position:absolute;top:16px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.14);font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;user-select:none;pointer-events:none;}
.ba-label-left{left:16px;}
.ba-label-right{right:16px;}

@media(max-width:480px){
  .ba-media{border-radius:14px;}
  .ba-handle::before{width:38px;height:38px;}
}

@media(max-width:1100px){
  .ba-section{padding:64px 40px 18px;}
}
@media(max-width:900px){
  .ba-section{padding:60px 16px 14px;}
  .ba-label{top:12px;}
  .ba-label-left{left:12px;}
  .ba-label-right{right:12px;}
}

.gallery-copy{padding:18px 60px 0;margin-bottom:34px;}
.gallery-copy-inner{max-width:1100px;margin:0 auto;}
.gallery-copy-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:10px;}
.gallery-copy-text{font-size:13px;color:rgba(255,255,255,.55);line-height:1.8;margin-top:8px;}
.gallery-copy-text a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px;}
.gallery-copy-text a:hover{color:var(--red);}

@media (max-width: 1024px){
  .gallery-copy{padding-left:40px;padding-right:40px;}
}
@media (max-width: 768px){
  .gallery-copy{padding-left:20px;padding-right:20px;}
}
@media (max-width: 480px){
  .gallery-copy{padding-left:15px;padding-right:15px;}
}

/* ── CONTACT ─────────────────────────────────────────────────── */
#contact{background:var(--dark2);padding-bottom:0;}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;}
.contact-info{padding-bottom:80px;}
.contact-items{margin-top:40px;}
.contact-item{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07);}
.contact-icon{width:44px;height:44px;background:rgba(30,111,255,.1);border:1px solid rgba(30,111,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-icon svg{width:20px;height:20px;color:var(--red);}
.contact-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:4px;font-family:'Barlow Condensed',sans-serif;}
.contact-value{font-size:15px;color:#fff;font-weight:600;}
.contact-value a{color:#fff;text-decoration:none;transition:color .2s;}
.contact-value a:hover{color:var(--red);}
.contact-note{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px;}
.hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:16px;}
.hours-row{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.5);padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.hours-row.today{color:#fff;}
.hours-row.today .hours-time{color:var(--red);}
.hours-closed{color:rgba(255,255,255,.25)!important;}
.map-wrap{height:100%;min-height:500px;position:relative;}
.map-wrap iframe{width:100%;height:100%;min-height:500px;border:none;filter:brightness(.8) contrast(1.1) saturate(.8) hue-rotate(10deg);}
.map-overlay-pin{position:absolute;bottom:28px;left:28px;background:linear-gradient(135deg,#1e6fff,#0a3dbf);color:#fff;padding:12px 20px;font-family:'Barlow Condensed';font-size:13px;font-weight:700;letter-spacing:1px;border-radius:10px;text-decoration:none;display:flex;align-items:center;gap:8px;transition:background .2s,transform .2s;box-shadow:0 4px 24px rgba(30,111,255,.4);}
.map-overlay-pin:hover{background:var(--red-light);transform:translateY(-2px);}

/* ── CTA BAND ───────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,#1e6fff,#0a3dbf);padding:80px 20px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.cta-band h2{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:2px;margin-bottom:15px;}
.cta-band p{font-size:18px;opacity:.9;margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto;}
.cta-btns{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer{position:relative;z-index:100;background:var(--dark);border-top:1px solid rgba(255,255,255,.05);padding:50px 60px 140px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;margin-bottom:40px;}
.footer-grid > *{min-width:0;}
.footer-brand-text{font-size:13px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:16px;overflow-wrap:anywhere;}
.footer-col h4{font-family:'Barlow Condensed';font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:14px;}
  .footer-col a{font-size:14px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;padding:5px 0;display:inline-block;}
.footer-col a:hover{color:#fff;}
.footer-bottom{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;}
.footer-copy{font-size:11px;color:rgba(255,255,255,.3);}
.footer-socials{display:flex;gap:10px;}
.footer-social{width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .2s;}
.footer-social svg{width:16px;height:16px;color:rgba(255,255,255,.4);transition:color .2s;}
.footer-social:hover{border-color:var(--red);}
.footer-social:hover svg{color:var(--red);}

.service-areas{background:var(--dark);border-top:1px solid rgba(255,255,255,.05);padding:44px 60px;}
.service-areas-inner{max-width:1100px;margin:0 auto;}
.service-areas h3{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:14px;}
.service-areas p{font-size:14px;color:rgba(255,255,255,.75);line-height:1.8;max-width:900px;}
.service-areas-list{margin-top:16px;list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.service-areas-list li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 14px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.85);font-family:'Barlow Condensed',sans-serif;}

/* ── WHATSAPP FLOAT & WIDGET ──────────────────────────────────── */

.video-page{min-height:100vh;padding:110px 16px 60px;background:var(--dark);}
.video-page-inner{max-width:980px;margin:0 auto;padding:0 18px;}
.video-page-back{display:inline-block;margin-bottom:18px;text-decoration:none;color:rgba(255,255,255,.7);font-family:'Barlow Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:12px;}
.video-page-back:hover{color:#fff;}
.video-page-title{font-family:'Bebas Neue',cursive;font-size:clamp(42px,6vw,72px);letter-spacing:1px;line-height:1;margin-bottom:14px;}
.video-page-sub{font-size:15px;color:rgba(255,255,255,.65);line-height:1.75;max-width:820px;margin-bottom:26px;}
.video-page-player{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:#000;box-shadow:0 18px 70px rgba(0,0,0,.45);}
.video-page-video{width:100%;height:auto;display:block;aspect-ratio:16/9;}
.video-page-video--mobile{display:none;}

@media (max-width: 1024px){
  .video-page-video--desktop{display:none;}
  .video-page-video--mobile{display:block;}
}
.video-page-meta{margin-top:28px;max-width:820px;}
.video-page-h2{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.9);margin:22px 0 10px;}
.video-page-p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.75;}
.video-page-p a{color:#fff;}
.wa-widget { position: fixed; bottom: 30px; right: 30px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.wa-float { width: 58px; height: 58px; background: #25D366; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(37,211,102,.4); cursor: pointer; animation: waFloat 3s ease-in-out infinite; transition: transform .2s; }
.wa-float:hover { transform: scale(1.12); }
.wa-float svg { width: 28px; height: 28px; color: #fff; }

.wa-popup { width: 320px; max-width: calc(100vw - 40px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.25); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(.17,.67,.52,1.05); border: 1px solid rgba(0,0,0,.05); }
.wa-popup.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

.wa-header { background: #075e54; color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.wa-header span { font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 700; }
.wa-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; opacity: .7; transition: opacity .2s; padding: 10px; line-height: 1; margin: -10px; } /* Increased touch target with padding and negative margin */
.wa-close:hover { opacity: 1; }

.wa-body { padding: 20px; background: #e5ddd5; position: relative; }
.wa-body::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); opacity: .4; pointer-events: none; }

.wa-msg { background: #fff; color: #333; padding: 12px 16px; border-radius: 0 12px 12px 12px; font-size: 14px; line-height: 1.5; margin-bottom: 20px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.wa-msg::after { content: ''; position: absolute; top: 0; left: -10px; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #fff transparent transparent; }

.wa-btn { background: #25D366; color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 30px; font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 700; transition: all .25s; box-shadow: 0 4px 12px rgba(37,211,102,.3); position: relative; z-index: 1; }
.wa-btn:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,211,102,.4); }

/* ── BOAT CARD SPECIALS ──────────────────────────────────────── */
.boat-badge { position: absolute; top: 20px; left: 20px; z-index: 10; background: rgba(5,8,15,0.65); border: 1px solid rgba(30,111,255,0.3); border-radius: 6px; padding: 5px 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); }
.boat-btn { position: absolute; top: 20px; right: 20px; z-index: 10; width: 40px; height: 40px; background: var(--red); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(30,111,255,0.4); transition: transform .3s, background .3s; }
.boat-btn:hover { transform: scale(1.1); background: var(--red-light); }
.blue-dot { display: inline-block; width: 12px; height: 12px; background: var(--red); border-radius: 50%; margin-left: 8px; vertical-align: middle; box-shadow: 0 0 10px var(--red); position: relative; }
.blue-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--red); border-radius: 50%; opacity: .4; animation: pulse 2s infinite; }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s,transform .7s;}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s,transform .7s;}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s,transform .7s;}
.reveal-scale.visible{opacity:1;transform:scale(1);}

/* ── EXPERTISE GRID ──────────────────────────────────────────── */
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.exp-col{background:var(--dark3);padding:36px 28px;}
.exp-heading{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(30,111,255,.2);}
.exp-list{list-style:none;}
.exp-list li{font-size:13px;color:rgba(255,255,255,.55);font-weight:300;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
.exp-list li::before{content:'';width:5px;height:5px;background:var(--red);border-radius:50%;flex-shrink:0;margin-top:6px;}

/* ── FAQ SECTION (CONSOLIDATED) ──────────────────────────────── */
.faq-section{background:var(--dark2);padding-bottom:120px;}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:15px;}
.faq-item{background:rgba(255,255,255,0.03);padding:10px 24px;border-radius:16px;border:1px solid rgba(255,255,255,0.05);transition:all .3s;}
.faq-item:hover{border-color:rgba(30,111,255,0.2);background:rgba(30,111,255,0.02);}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;line-height:1.4;transition:color .2s;text-transform:uppercase;}
.faq-q:hover{color:var(--red);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .3s;}
.faq-a.open{max-height:300px;}
.faq-a p{font-size:15px;color:rgba(255,255,255,0.6);line-height:1.6;padding-bottom:22px;}
.faq-chevron{width:20px;height:20px;flex-shrink:0;color:var(--red);transition:transform .35s cubic-bezier(.4,0,.2,1);}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);}

/* ── SERVICE AREA STRIP ──────────────────────────────────────── */
.area-strip{background:var(--dark2);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:18px 60px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.area-strip-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);white-space:nowrap;margin-right:6px;}
.area-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:10px 16px;font-size:12px;font-weight:600;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;color:rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase;transition:all .2s;white-space:nowrap;display:inline-block;} /* Increased padding for mobile */
.area-chip:hover{background:rgba(30,111,255,.15);border-color:rgba(30,111,255,.4);color:#fff;}

/* ── QUOTE FORM ──────────────────────────────────────────────── */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.qfield-full{grid-column:1/-1;}
.qfield-wrap{display:flex;flex-direction:column;gap:7px;}
.qlabel{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);}
.qreq{color:var(--red);}
.qopt{color:rgba(255,255,255,.3);font-weight:400;letter-spacing:0;text-transform:none;font-size:11px;}
.qinput{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px;font-family:'Barlow',sans-serif;font-size:14px;font-weight:400;color:#fff;outline:none;transition:border-color .25s,background .25s,box-shadow .25s;width:100%;}
.qinput::placeholder{color:rgba(255,255,255,.25);}
.qinput:focus{border-color:var(--red);background:rgba(30,111,255,.06);box-shadow:0 0 0 3px rgba(30,111,255,.12);}
.qinput.valid{border-color:rgba(37,211,102,.6);background:rgba(37,211,102,.04);}
.qinput.invalid{border-color:rgba(200,16,46,.8);background:rgba(30,111,255,.06);}

/* ── CHROME AUTOFILL FIX ─────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset;
  transition: background-color 5000s ease-in-out 0s;
}

.qtextarea{min-height:130px;resize:vertical;}
.qpreview-wrap{display:flex;flex-direction:column;gap:10px;}
.qpreview{background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:400;color:rgba(255,255,255,.85);outline:none;width:100%;min-height:160px;resize:vertical;line-height:1.65;}
.qcopy-btn{align-self:flex-start;background:rgba(30,111,255,.16);border:1.5px solid rgba(30,111,255,.35);color:#fff;border-radius:12px;padding:12px 16px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;}
.qcopy-btn:hover{background:rgba(30,111,255,.25);border-color:rgba(30,111,255,.55);transform:translateY(-1px);}
.qcopy-btn:active{transform:translateY(0);}
.qerr{font-size:12px;color:var(--red);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none;font-weight:600;}
.qerr.show{opacity:1;transform:translateY(0);}
.qservice-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.qservice-btn{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);border-radius:20px;padding:12px 20px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.82);cursor:pointer;transition:all .2s;} /* Increased padding for mobile */
.qservice-btn:hover{border-color:rgba(30,111,255,.5);color:rgba(255,255,255,.85);}
.qservice-btn.active{background:rgba(30,111,255,.18);border-color:var(--red);color:#fff;box-shadow:0 0 12px rgba(30,111,255,.2);}
.qsubmit-btn{width:100%;margin-top:32px;padding:20px 24px;background:#25D366;color:#fff;border:none;border-radius:12px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .25s,transform .2s,box-shadow .2s;box-shadow:0 4px 24px rgba(37,211,102,.25);} /* Increased padding */
.qsubmit-btn:hover{background:#1ebe5a;transform:translateY(-2px);box-shadow:0 8px 32px rgba(37,211,102,.35);}
.qsubmit-btn:active{transform:translateY(0);}
.qsubmit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1100px){
  nav{padding:18px 40px;}
  nav.scrolled{padding:12px 40px;}
  section{padding:80px 40px;}
  .lang-mini{padding:26px 40px;}
  .cta-band{padding:64px 40px;}
  footer{padding:50px 40px 140px;}
  .service-areas{padding:44px 40px;}
  .area-strip{padding:18px 40px;}
  .expertise-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  nav{padding:12px 16px;}
  nav.scrolled{padding:10px 16px;}
  .nav-logo{gap:8px;min-width:0;flex:1;}
  .nav-logo-text{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;}
  .nav-logo-mark{width:38px;height:40px;flex-shrink:0;}
  .nav-mobile-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .hamburger{display:flex;padding:8px;margin:0;}
  .nav-wa-pill{width:36px;height:36px;}
  .about-inner{grid-template-columns:1fr;gap:40px;}
  .about-img-accent{right:0;bottom:-18px;width:48%;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  
  .mnav-backdrop{display:block;}
  .nav-links{display:none;}
  body{cursor:auto;}
  .cursor,.cursor-follower{display:none;}
}

@media(max-width:400px){
  .nav-logo-text span{display:none;} /* Hide 'UPHOLSTERY' on tiny screens to prevent overlap */
  .nav-logo-text{font-size:16px;letter-spacing:1px;}
  .nav-logo-mark{width:34px;height:34px;}
  nav{padding:10px 12px;}
}

@media(max-width:600px){
  .hero-content{padding:0 20px;max-width:100%;}
  .hero h1{font-size:clamp(44px,12vw,90px);}
  .hero-stats{display:none;}
  .hero-scroll{display:none;}
  .video-page{padding-top:90px;}
  .lang-mini{padding:22px 16px;}
  .lang-mini-grid{grid-template-columns:1fr;}
  .service-areas{padding:36px 16px;}
  /* Mobile card tweaks & Glassmorphism */
  .why-card, .service-extra-card, .process-step, .quote-form, .contact-info, .map-wrap {
    background: rgba(15, 18, 25, 0.7) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(30, 111, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 32px 24px !important;
    border-radius: 20px;
  }
  .process-step{padding:32px 24px !important;}
  
  /* Vertical Stacking for Contact Items */
  .contact-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    padding: 30px 0;
  }
  .contact-icon {
    margin: 0 auto;
  }
  
  /* WhatsApp Float Offset */
  .wa-widget {
    bottom: 40px;
    right: 20px;
  }
  .wa-float {
    width: 54px;
    height: 54px;
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
  }
  .wa-popup {
    width: 280px;
    bottom: 70px;
    right: 0;
  }
  .wa-btn {
    flex-direction: column;
    height: auto;
    padding: 15px;
    gap: 10px;
  }
  .wa-btn svg {
    width: 24px;
    height: 24px;
  }
  
  /* Hero CTA Stacking */
  .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline {
    width: 100%;
    justify-content: center;
  }
  
  /* Section Header Safe Zones */
  .section-title {
    margin-top: 30px;
    font-size: 32px;
    line-height: 1.2;
  }
  .section-tag {
    margin-top: 20px;
  }
  section{padding:80px 20px;} /* Restored and increased padding */
  .about-inner{grid-template-columns:1fr;gap:50px;}
  .about-img-accent{display:none;}
  .services-grid{grid-template-columns:1fr 1fr;gap:3px;}
  .service-card:first-child{grid-column:span 2;min-height:360px;}
  .services-extra-grid{grid-template-columns:repeat(2,1fr);}
  .expertise-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .process-steps{grid-template-columns:repeat(2,1fr);gap:40px;}
  .process-steps::before{display:none;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .map-wrap{min-height:360px;}
  .map-wrap iframe{min-height:360px;}
  .about-img-wrap{max-width:100%;margin:0 auto;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center;}
  .footer-socials{justify-content:center;}
  .cta-band{padding:50px 20px;}
  .cta-band::before{display:none;}
  .area-strip{padding:16px 20px;}
  .faq-list{max-width:100%;}
  .hero-badge{font-size:9px;letter-spacing:2px;}
  .services-header{flex-direction:column;}
}
@media(max-width:700px){
  .quote-grid{grid-template-columns:1fr;}
  .qfield-full{grid-column:1;}
  .qservice-btn{padding:10px 13px;font-size:11px;}
  .qsubmit-btn{font-size:13px;letter-spacing:1px;padding:17px 14px;gap:8px;flex-wrap:nowrap;}
  .qsubmit-btn svg{flex-shrink:0;width:18px;height:18px;}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .service-card:first-child{grid-column:span 1;min-height:300px;}
  .services-extra-grid{grid-template-columns:1fr;}
  .expertise-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center;}
  .hero-ctas{flex-direction:column;gap:12px;}
  .btn-primary,.btn-outline{justify-content:center;width:100%;}
  section{padding:60px 16px;}
  .cta-band{padding:48px 16px;}
  .area-strip{padding:14px 16px;gap:8px;}
  .services-header{flex-direction:column;align-items:flex-start;}
  .hero-stats{right:16px;gap:28px;}
  .hero-stats .stat-num{font-size:34px;}
  .section-title{font-size:clamp(32px,10vw,48px); line-height: 1.1;}
  .about-badge-float{top:-12px;left:-12px;}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(36px,14vw,60px);}
  .hero-badge{display:none;}
  .stat-num{font-size:28px;}
}

/* ── LOGO CHROME GLOW ────────────────────────────────────────── */
.nav-logo-text span {
  background: linear-gradient(135deg, #4d8fff 0%, #a8d0ff 50%, #1e6fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BODY: subtle blue-leather grain ────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── HERO: electric blue speed line ─────────────────────────── */
.hero-diagonal {
  background: linear-gradient(135deg, transparent 0%, rgba(30,111,255,.05) 100%);
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ── NAV logo glow on hover ──────────────────────────────────── */
.nav-logo:hover .nav-logo-mark img {
  filter: drop-shadow(0 0 14px rgba(30,111,255,0.9));
}

/* ── STAT NUM: chrome blue ───────────────────────────────────── */
.stat-num {
  background: linear-gradient(135deg, #4d8fff 0%, #a8d0ff 50%, #1e6fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── HERO H1 LINE 2: blue glow ───────────────────────────────── */
.h1-l2 {
  text-shadow: 0 0 60px rgba(30,111,255,.5), 0 0 120px rgba(30,111,255,.2);
}

/* ── SERVICE NUM: chrome-blue ────────────────────────────────── */
.service-num {
  background: linear-gradient(135deg, #4d8fff, #a8d0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CONTACT LABEL: blue ─────────────────────────────────────── */
.contact-label { color: var(--red); }

/* ── HOURS TIME: blue ────────────────────────────────────────── */
.hours-row.today .hours-time { color: var(--red); }

/* ── AREA CHIP hover ─────────────────────────────────────────── */
.area-chip:hover {
  background: rgba(30,111,255,.15);
  border-color: rgba(30,111,255,.4);
  color: #fff;
}

/* ── FOOTER col heading ──────────────────────────────────────── */
.footer-col h4 { color: var(--red); }

/* ── MAP pin button ──────────────────────────────────────────── */
.map-overlay-pin:hover { background: linear-gradient(135deg,#4d8fff,#1e6fff); }

/* ── CTA BAND: blue glow border rings ───────────────────────── */
.cta-band::before {
  content: 'SPORT';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue';
  font-size: 200px;
  color: rgba(30,111,255,.06);
  letter-spacing: -10px;
  pointer-events: none;
}

/* ── QINPUT focus: blue glow ─────────────────────────────────── */
.qinput:focus {
  border-color: var(--red);
  background: rgba(30,111,255,.06);
  box-shadow: 0 0 0 3px rgba(30,111,255,.15);
}

/* ── FAQ CHEVRON ─────────────────────────────────────────────── */
.faq-chevron { color: var(--red); }
.faq-q:hover { color: var(--red); }

/* ── FOOTER SOCIAL hover ─────────────────────────────────────── */
.footer-social:hover { border-color: var(--red); box-shadow: 0 0 12px rgba(30,111,255,.3); }
.footer-social:hover svg { color: var(--red); }

/* ── WHY ICON hover ──────────────────────────────────────────── */
.why-card:hover .why-icon-wrap {
  background: rgba(30,111,255,.2);
  border-color: var(--red);
  box-shadow: 0 0 20px rgba(30,111,255,.25);
}

/* ── SERVICE EXTRA ICON hover ────────────────────────────────── */
.service-extra-card:hover .service-extra-icon {
  background: rgba(30,111,255,.2);
  border-color: rgba(30,111,255,.5);
  box-shadow: 0 0 16px rgba(30,111,255,.2);
}

/* ── SCROLLBAR: blue tint ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: #1e3a7a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1e6fff; }

/* ================================================================
   SEAT CAROUSEL — Card 01 only (seating_1 to seating_10)
   ================================================================ */

/* Card wrapper — must be position:relative & overflow:hidden (already set) */
#seatCarouselCard, #roofCarouselCard, #steeringCarouselCard, #carpetCarouselCard, #coversCarouselCard { isolation: isolate; }

/* Each slide */
.sc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s ease;
  z-index: 0;
  pointer-events: none;
}
/* Active slide sits on top and fills the card naturally */
.sc-slide.sc-active {
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
/* Non-active slides are absolute so they don't push layout */
.sc-slide:not(.sc-active) .service-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Prev / Next buttons ──────────────────────────────────────── */
.sc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; /* Increased from 38px for better touch target */
  height: 44px; /* Increased from 38px for better touch target */
  background: rgba(5,8,15,0.65);
  border: 1px solid rgba(30,111,255,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px);
}
.sc-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 18px rgba(30,111,255,0.5);
}
.sc-prev { left: 14px; }
.sc-next { right: 14px; }

/* ── Dot strip ────────────────────────────────────────────────── */
.sc-dots {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(5,8,15,0.5);
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.sc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.25s, transform 0.25s;
}
.sc-dot.sc-dot-active {
  background: var(--red);
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(30,111,255,0.7);
}

/* ── Counter badge ────────────────────────────────────────────── */
.sc-counter {
  position: absolute;
  bottom: 58px;
  right: 14px;
  z-index: 10;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.7);
  background: rgba(5,8,15,0.55);
  padding: 4px 10px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

/* ── Mobile tweaks for carousel ───────────────────────────────── */
@media(max-width:600px){
  .sc-btn { width:44px; height:44px; }
  .sc-prev { left:8px; }
  .sc-next { right:8px; }
  .sc-dots { bottom:52px; }
  .sc-counter { bottom:52px; right:8px; }
}

/* ================================================================
   BOAT SERVICE CARD — video with placeholder
   ================================================================ */

/* Video wrapper fills the card exactly like a service-img */
.boat-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dark3);
}

/* The actual <video> element */
.boat-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  transition: transform 0.7s cubic-bezier(.25,.46,.45,.94), filter 0.5s;
  filter: brightness(0.65) saturate(0.9);
}

.boat-video-link{
  position:absolute;
  inset:0;
  display:block;
  z-index:4;
}

.boat-video-link .boat-video{
  width:100%;
  height:100%;
}

/* Scale + darken on hover (same as other cards) */
.boat-card:hover .boat-video {
  transform: scale(1.07);
  filter: brightness(0.4) saturate(0.7);
}

/* Placeholder shown when video src is empty / not yet linked */
.boat-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--dark3) 0%, var(--dark4) 100%);
  transition: opacity 0.3s;
  pointer-events:none;
  z-index:2;
}

.boat-card .service-overlay{pointer-events:none;}

/* Hide placeholder once video has a src and can play */
.boat-video-wrap video.boat-video[src]:not([src=""]) ~ .boat-video-placeholder,
.boat-video-wrap:has(video.boat-video[src]:not([src=""])) .boat-video-placeholder {
  display: none;
}

.boat-video-placeholder svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 16px rgba(30,111,255,0.5));
  animation: float 3s ease-in-out infinite;
}

.boat-video-placeholder span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}