/* ============================================================
   VOLTIQ ELECTRICAL — Design System
   Single font family sitewide: Inter (headings, body, labels, nav — no mixed typefaces)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --navy: #0B1F33;
  --navy-2: #0F2A45;
  --navy-3: #14304f;
  --charcoal: #111827;
  --white: #FFFFFF;
  --grey-50: #F5F6F8;
  --grey-100: #ECEEF1;
  --grey-200: #DCE0E6;
  --grey-500: #6B7280;
  --grey-700: #3A4250;
  --orange: #FF8C00;
  --orange-dim: #C96A00;
  --gold: #FFC857;

  --display: 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'Inter', sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --container: 1240px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,textarea,select{font-family:inherit;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 32px;}
@media(max-width:480px){.wrap{padding:0 20px;}}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  text-transform:none;
  color:var(--navy);
}
h1{font-size:clamp(3rem,7vw,6.4rem); font-weight:800;}
h2{font-size:clamp(2.2rem,4.2vw,3.6rem);}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem);}
p{color:var(--grey-700);}

.eyebrow{
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--orange);
  display:inline-block;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:2px;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  isolation:isolate;
  white-space:nowrap;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.35);
  transform:translateX(-110%) skewX(-12deg);
  transition:transform .55s var(--ease);
  z-index:-1;
}
@media(max-width:480px){
  .btn{padding:14px 22px; font-size:.76rem; letter-spacing:.06em;}
}
.btn:hover::after{transform:translateX(110%) skewX(-12deg);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange); color:var(--navy);}
.btn-primary:hover{box-shadow:0 14px 30px -10px rgba(255,140,0,.55);}
.btn-outline{
  background:transparent;
  color:var(--white);
  border:1px solid rgba(255,255,255,.4);
}
.btn-outline:hover{border-color:var(--orange); color:var(--orange);}
.btn-dark{background:var(--navy); color:var(--white);}
.btn-dark:hover{box-shadow:0 14px 30px -10px rgba(11,31,51,.5);}
.btn-ghost-navy{background:transparent; color:var(--navy); border:1px solid var(--grey-200);}
.btn-ghost-navy:hover{border-color:var(--navy);}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between;}
.site-header.scrolled{
  padding:12px 0;
  background:rgba(11,31,51,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -14px rgba(0,0,0,.4);
}
.logo{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--white);
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.logo .bolt{color:var(--orange);}
.logo small{
  display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.25em;
  color:var(--gold); font-weight:400; text-transform:uppercase; margin-top:-2px;
}
.main-nav{display:flex; align-items:center; gap:38px;}
.main-nav a{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  position:relative;
  padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--orange); transition:width .35s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--orange);}
.header-cta{display:flex; align-items:center; gap:18px;}
.lang-toggle{ display:inline-flex; align-items:center; gap:6px;font-family:var(--body); font-weight:700; font-size:.8rem; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.4rem .85rem; cursor:pointer; transition:background .2s ease; margin-left:14px;}
.lang-toggle:hover{background:rgba(255,255,255,.2);}
@media(max-width:1180px){ .lang-toggle{padding:.35rem .7rem; font-size:.76rem;} }
.header-phone{
  font-family:var(--mono); color:var(--white); font-size:.82rem; display:flex; align-items:center; gap:8px;
}
.header-phone .dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,140,0,.5);}50%{box-shadow:0 0 0 6px rgba(255,140,0,0);}}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.nav-toggle span{height:2px; background:var(--white); width:100%;}

@media(max-width:1180px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px;
    background:var(--navy); flex-direction:column; align-items:flex-start;
    padding:110px 34px 34px; gap:26px;
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .main-nav.open{transform:translateX(0);}
  .header-phone{display:none;}
  .nav-toggle{display:flex;}
}
@media(max-width:560px){
  .site-header{padding:16px 0;}
  .site-header.scrolled{padding:10px 0;}
  .logo{font-size:1.15rem; gap:7px;}
  .logo small{display:none;}
  .header-cta .btn{display:none;}
}

/* ---------- Progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  z-index:1100;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height: clamp(600px, 100vh, 1000px);
  display:flex; align-items:flex-end; justify-content:flex-end;
  color:var(--white);
  overflow:hidden;
  background:var(--navy);
  text-align:right;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.08);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,31,51,.88) 0%, rgba(11,31,51,.55) 22%, rgba(11,31,51,.15) 42%, transparent 60%);
}
.hero-content{position:relative; z-index:2; padding:120px 32px 140px; max-width:600px; margin:0;}
.hero-content .eyebrow{
  color:var(--gold); justify-content:flex-end;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  opacity:0; animation: heroSlideUp .8s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.hero-content .eyebrow::before{background:var(--gold);}
.hero h1{
  color:var(--white); max-width:560px; margin:0 0 0 auto;
  font-size:clamp(1.8rem,3.1vw,2.7rem); line-height:1.18;
  text-shadow: 0 4px 26px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.5);
  opacity:0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .28s forwards;
}
.hero h1 em{font-style:normal; color:var(--orange);}
.hero-sub{
  max-width:460px; margin:18px 0 0 auto; color:rgba(255,255,255,.8); font-size:1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  opacity:0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .42s forwards;
}
.hero-actions{
  display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; justify-content:flex-end;
  opacity:0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .56s forwards;
}
.hero-trust{
  margin-top:38px; display:flex; gap:0; flex-wrap:wrap; justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.18); padding-top:20px;
  opacity:0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .7s forwards;
}
@keyframes heroSlideUp{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-content .eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-trust{
    animation:none; opacity:1;
  }
}

/* ---------- mobile-only hero recap: shown instead of the video-overlay text on small
   screens, where the full heading + sub + actions + trust bar was covering the video ---------- */
.hero-mobile-recap{
  display:none;
  background: var(--navy);
  padding: 44px 24px 48px;
  text-align: center;
}
.hero-mobile-recap .eyebrow{ color:var(--gold); justify-content:center; margin-bottom:14px; }
.hero-mobile-recap h1{ color:var(--white); font-size:clamp(1.7rem,7vw,2.2rem); line-height:1.2; margin:0 auto; max-width:100%; }
.hero-mobile-recap h1 em{ font-style:normal; color:var(--orange); }
.hero-mobile-recap .hero-sub{ color:rgba(255,255,255,.8); font-size:1rem; margin:16px auto 0; max-width:100%; }
.hero-mobile-recap .hero-actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.hero-mobile-recap .hero-trust{
  margin-top:28px; display:flex; gap:0; flex-wrap:wrap; justify-content:center;
  border-top:1px solid rgba(255,255,255,.18); padding-top:20px;
}
.hero-mobile-recap .hero-trust div{
  padding:0 0 12px; margin-right:16px; border-right:none; text-align:center;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:rgba(255,255,255,.75);
  text-transform:uppercase;
}
.hero-mobile-recap .hero-trust strong{ display:block; font-family:var(--display); font-size:1.25rem; color:var(--white); text-transform:none; font-weight:700; }
.hero-trust div{
  padding:0 22px 0 0; margin-right:22px; border-right:1px solid rgba(255,255,255,.18);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:rgba(255,255,255,.75);
  text-transform:uppercase; text-align:left;
}
.hero-trust div:last-child{border-right:none; margin-right:0;}
.hero-trust strong{display:block; font-family:var(--display); font-size:1.25rem; color:var(--white); text-transform:none; font-weight:700;}
@media(max-width:700px){
  .hero{ height: 58vh; }
  .hero-content{ display:none; }
  .hero-mobile-recap{ display:block; }
}

/* signature: oscilloscope trace */
.hero-trace{
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:2;
  opacity:.9;
}
.hero-trace path{
  fill:none; stroke:var(--orange); stroke-width:1.6;
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:traceDraw 2.6s var(--ease) .3s forwards;
  filter:drop-shadow(0 0 6px rgba(255,140,0,.5));
}
@keyframes traceDraw{to{stroke-dashoffset:0;}}

.scroll-cue{
  position:absolute; right:32px; bottom:34px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.6); font-family:var(--mono); font-size:.7rem; letter-spacing:.15em;
}
.scroll-cue .line{width:1px; height:40px; background:rgba(255,255,255,.3); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:""; position:absolute; top:-40px; left:0; width:100%; height:40px; background:var(--orange);
  animation:cueMove 2s ease-in-out infinite;
}
@keyframes cueMove{50%{top:100%;}100%{top:100%;}}

/* ---------- Section shells ---------- */
section{position:relative;}
.section-pad{padding:80px 0;}
.section-pad-sm{padding:56px 0;}
.bg-navy{background:var(--navy); color:var(--white);}
.bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy p{color:rgba(255,255,255,.68);}
.bg-charcoal{background:var(--charcoal); color:var(--white);}
.bg-charcoal h2, .bg-charcoal h3{color:var(--white);}
.bg-charcoal p{color:rgba(255,255,255,.68);}
.bg-grey{background:var(--grey-50);}

.section-head{max-width:680px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* thin animated current divider — signature element reused sparingly */
.current-rule{
  position:relative; height:2px; width:100%; background:var(--grey-200); overflow:hidden; margin:0;
}
.current-rule::after{
  content:""; position:absolute; top:0; left:-20%; width:20%; height:100%;
  background:linear-gradient(90deg, transparent, var(--orange), transparent);
  animation:currentRun 3.4s linear infinite;
}
@keyframes currentRun{to{left:120%;}}
.bg-navy .current-rule, .bg-charcoal .current-rule{background:rgba(255,255,255,.12);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.11s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.27s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.43s;}

/* ---------- Grid utilities ---------- */
.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---------- Why Choose Us cards ---------- */
.value-card{
  background:var(--white); border:1px solid var(--grey-200); padding:36px 30px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.value-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.value-card:hover{transform:translateY(-8px); box-shadow:0 24px 50px -20px rgba(11,31,51,.25); border-color:transparent;}
.value-card:hover::before{transform:scaleX(1);}
.value-card .num{font-family:var(--mono); color:var(--orange); font-size:.78rem; letter-spacing:.1em;}
.value-card h4{font-family:var(--display); font-size:1.3rem; margin:14px 0 10px; color:var(--navy); text-transform:none;}
.value-card p{font-size:.95rem;}

/* ---------- Process grid ---------- */
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); margin-top:10px;}
.process-card{
  background:var(--navy); padding:34px 30px; position:relative; overflow:hidden;
}
.process-card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0; background:var(--orange);
  transition:width .6s var(--ease);
}
.process-card.in::before{width:100%;}
.process-card .pnum{
  display:block; font-family:var(--mono); font-size:2rem; font-weight:600; color:transparent;
  -webkit-text-stroke:1px rgba(255,140,0,.55); margin-bottom:16px;
}
.process-card h4{color:var(--white); font-size:1.15rem; margin-bottom:10px;}
.process-card p{font-size:.92rem;}
@media(max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.process-grid{grid-template-columns:1fr;}}

/* ---------- Stats ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15);
}
.stat{padding:34px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.15);}
.stat:last-child{border-right:none;}
.stat .val{font-family:var(--display); font-size:2.6rem; color:var(--orange); font-weight:800;}
.stat .lbl{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:6px;}
@media(max-width:900px){.stats-strip{grid-template-columns:repeat(2,1fr);} .stat{border-bottom:1px solid rgba(255,255,255,.15);}}

/* ---------- Service cards ---------- */
.service-card{
  position:relative; overflow:hidden; height:420px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.service-card .ov{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,51,0) 30%, rgba(11,31,51,.92) 100%);
  transition:background .4s var(--ease);
}
.service-card .sc-content{position:relative; z-index:2; padding:30px; color:var(--white); width:100%;}
.service-card .sc-tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--gold); text-transform:uppercase;}
.service-card h4{color:var(--white); font-size:1.5rem; margin:10px 0 12px;}
.service-card p{
  color:rgba(255,255,255,.75); font-size:.92rem; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
}
.service-card:hover p{max-height:120px; opacity:1; margin-bottom:14px;}
.service-card .sc-link{
  font-family:var(--mono); font-size:.76rem; color:var(--orange); letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.service-card:hover{transform:translateY(-4px);}
.service-card{transition:transform .4s var(--ease);}

/* ---------- Service detail rows (services page) ---------- */
.svc-row{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.svc-row:nth-child(even){direction:rtl;}
.svc-row:nth-child(even) > *{direction:ltr;}
.svc-row img{width:100%; height:460px; object-fit:cover;}
.svc-list{margin:22px 0 28px;}
.svc-list li{
  display:flex; align-items:flex-start; gap:12px; padding:9px 0; font-size:.96rem; color:var(--grey-700);
  border-bottom:1px dashed var(--grey-200);
}
.svc-list li::before{content:"//"; color:var(--orange); font-family:var(--mono); font-weight:600;}
@media(max-width:900px){.svc-row, .svc-row:nth-child(even){grid-template-columns:1fr; direction:ltr;} .svc-row img{height:280px;}}

/* ---------- Gallery / Projects ---------- */
.filter-bar{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:50px;}
.filter-btn{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--grey-200); color:var(--grey-700); transition:all .3s var(--ease);
}
.filter-btn:hover, .filter-btn.active{background:var(--navy); color:var(--white); border-color:var(--navy);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:22px;}
.gallery-item{position:relative; overflow:hidden; aspect-ratio:4/5; cursor:pointer;}
.gallery-item.wide{grid-column:span 2; aspect-ratio:16/10;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item .gi-ov{
  position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%, rgba(11,31,51,.92) 100%);
  display:flex; align-items:flex-end; padding:24px; opacity:0; transition:opacity .4s var(--ease);
}
.gallery-item:hover .gi-ov{opacity:1;}
.gi-ov .cat{font-family:var(--mono); font-size:.68rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase;}
.gi-ov h5{color:var(--white); font-family:var(--display); font-size:1.2rem; text-transform:none; margin-top:6px;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);} .gallery-item.wide{grid-column:span 2;}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr;} .gallery-item.wide{grid-column:span 1;}}

/* Before/After slider */
.ba-wrap{position:relative; aspect-ratio:16/9; overflow:hidden; user-select:none; max-width:900px; margin:0 auto;}
.ba-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-after{clip-path:inset(0 0 0 50%);}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--orange);
  transform:translateX(-1px); cursor:ew-resize;
}
.ba-handle .knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-family:var(--mono); font-size:1rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.ba-tag{position:absolute; top:16px; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--white); background:rgba(11,31,51,.65); padding:6px 12px;}
.ba-tag.before{left:16px;}
.ba-tag.after{right:16px;}

/* ---------- Testimonials ---------- */
.testi-track{overflow:hidden; position:relative;}
.testi-slides{display:flex; transition:transform .6s var(--ease);}
.testi-slide{min-width:100%; padding:0 6px;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{
  background:var(--white); border:1px solid var(--grey-200); padding:34px; position:relative;
}
.testi-stars{color:var(--gold); letter-spacing:3px; font-size:.9rem; margin-bottom:16px;}
.testi-card p{font-size:.98rem; color:var(--grey-700); margin-bottom:22px;}
.testi-person{display:flex; align-items:center; gap:14px;}
.testi-avatar{width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700;}
.testi-name{font-weight:600; color:var(--navy); font-size:.92rem;}
.testi-loc{font-family:var(--mono); font-size:.72rem; color:var(--grey-500); text-transform:uppercase;}
.testi-dots{display:flex; gap:10px; justify-content:center; margin-top:40px;}
.testi-dots button{width:9px; height:9px; border-radius:50%; background:var(--grey-200); transition:background .3s;}
.testi-dots button.active{background:var(--orange);}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ---------- Logo strip ---------- */
.logo-strip{
  display:flex; align-items:center; gap:70px; overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logo-track{display:flex; gap:70px; animation:logoScroll 26s linear infinite;}
.logo-track span{
  font-family:var(--display); font-size:1.4rem; text-transform:uppercase; color:var(--grey-500);
  white-space:nowrap; letter-spacing:.03em; filter:grayscale(1); opacity:.7; transition:opacity .3s, color .3s;
}
.logo-track span:hover{opacity:1; color:var(--navy);}
@keyframes logoScroll{to{transform:translateX(-50%);}}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--grey-200);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; padding:26px 0; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:1.05rem; text-transform:none; color:var(--navy);
  line-height:1.4;
}
.faq-q .plus{font-family:var(--mono); font-size:1.3rem; color:var(--orange); transition:transform .35s var(--ease);}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease), padding .45s var(--ease);}
.faq-item.open .faq-a{max-height:220px; padding-bottom:24px;}
.faq-a p{font-size:.96rem;}

/* ---------- Emergency Banner ---------- */
.emergency-banner{
  position:relative; background:var(--navy); color:var(--white); overflow:hidden;
  padding:90px 0;
}
.emergency-banner::before{
  content:""; position:absolute; inset:0;
  background:
   radial-gradient(circle at 15% 30%, rgba(255,140,0,.18), transparent 45%),
   radial-gradient(circle at 85% 70%, rgba(255,200,87,.14), transparent 45%);
}
.emergency-banner .wrap{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.emergency-banner h2{color:var(--white);}
.emergency-banner p{max-width:460px; margin-top:12px; color:rgba(255,255,255,.78);}
.particles{position:absolute; inset:0; z-index:1; pointer-events:none;}
.particle{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--orange);
  opacity:.6; animation:floatUp linear infinite;
}
@keyframes floatUp{
  from{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.5;}
  to{transform:translateY(-320px) translateX(20px); opacity:0;}
}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500);
}
.field input, .field select, .field textarea{
  border:1px solid var(--grey-200); background:var(--white); padding:14px 16px; font-size:.95rem; color:var(--navy);
  transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange);
}
.field textarea{resize:vertical; min-height:120px;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}

/* ---------- Contact info cards ---------- */
.contact-info-card{
  display:flex; gap:18px; padding:26px 0; border-bottom:1px solid var(--grey-200);
}
.contact-info-card .ic{
  width:46px; height:46px; border:1px solid var(--orange); color:var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); flex-shrink:0;
}
.contact-info-card h4{font-size:1.05rem; margin-bottom:4px; text-transform:none; font-family:var(--body); font-weight:700; color:var(--navy);}
.contact-info-card p{font-size:.92rem;}

.map-frame{width:100%; height:380px; border:0; filter:grayscale(.2) contrast(1.05);}

/* ---------- Footer ---------- */
footer{background:var(--charcoal); color:rgba(255,255,255,.7); padding-top:90px;}
footer p{color:rgba(255,255,255,.65);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px;}
.footer-col h5{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.footer-col li{padding:7px 0; font-size:.92rem;}
.footer-col a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.45);
}
.footer-bottom a:hover{color:var(--orange);}
.footer-social{display:flex; gap:14px;}
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.72rem; transition:all .3s;
}
.footer-social a:hover{background:var(--orange); border-color:var(--orange); color:var(--navy);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr; gap:36px;}}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  background:var(--navy); color:var(--white); padding:190px 0 90px; position:relative; overflow:hidden;
}
@media(max-width:700px){.page-hero{padding:130px 0 60px;}}
.page-hero::after{
  content:""; position:absolute; right:-10%; top:-20%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,140,0,.15), transparent 70%);
}
.page-hero h1{color:var(--white); font-size:clamp(2.6rem,5.5vw,4.6rem);}
.breadcrumb{font-family:var(--mono); font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:20px;}
.breadcrumb span{color:var(--orange);}

/* misc */
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
@media(max-width:900px){.split-2{grid-template-columns:1fr;}}
.tag-pill{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--grey-200); padding:6px 14px; margin:0 8px 8px 0; color:var(--grey-700);
}
.mono-num{font-family:var(--mono);}

/* ============================================================
   EDGE QUOTE TAB (vertical, right-hand side) + WHATSAPP BUBBLE
   ============================================================ */
.edge-quote-tab{
  position:fixed; top:50%; right:0; z-index:850;
  transform:translateY(-50%);
  display:flex; align-items:center;
  padding:26px 16px;
  background:var(--orange);
  border-radius:12px 0 0 12px;
  box-shadow:-10px 8px 30px -10px rgba(0,0,0,.45);
  border:none; cursor:pointer;
  transition:padding-right .22s ease, background .18s ease, box-shadow .22s ease, opacity .2s ease;
}
.edge-quote-tab:hover{ background:var(--orange-dim); padding-right:22px; box-shadow:-14px 10px 36px -8px rgba(0,0,0,.5); }
.edge-quote-tab span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:var(--navy); font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  font-family:var(--mono); white-space:nowrap;
}
.edge-whatsapp{
  position:fixed; right:14px; z-index:850;
  top:calc(50% + 108px);
  width:50px; height:50px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  transition:transform .18s ease, background .18s ease, opacity .2s ease;
}
.edge-whatsapp:hover{ transform:translateY(-2px) scale(1.06); background:#1EBE5A; }
.edge-whatsapp svg{ color:#fff; }
@media(max-width:640px){
  .edge-quote-tab{ padding:16px 10px; border-radius:10px 0 0 10px; }
  .edge-quote-tab:hover{ padding-right:14px; }
  .edge-quote-tab span{ font-size:.72rem; }
  .edge-whatsapp{ width:44px; height:44px; right:10px; top:calc(50% + 82px); }
}

.qd-overlay{ position:fixed; inset:0; z-index:950; background:rgba(11,31,51,.55); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.qd-overlay.open{ opacity:1; pointer-events:auto; }
.qd-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:951;
  width:min(430px,92vw); background:linear-gradient(165deg, var(--navy-3), var(--navy) 60%);
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; display:flex; flex-direction:column;
}
.qd-panel.open{ transform:translateX(0); }
.qd-head{ padding:1.6rem 1.7rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.qd-head h3{ font-size:1.25rem; color:#fff; font-family:var(--display); }
.qd-head p{ color:rgba(255,255,255,.6); font-size:.86rem; margin-top:.4rem; }
.qd-trust{
  display:flex; align-items:center; gap:5px; margin-bottom:.6rem;
  color:var(--gold); font-family:var(--mono); font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.qd-trust svg{ color:var(--gold); }
.qd-trust span{ margin-left:4px; color:rgba(255,255,255,.55); text-transform:none; letter-spacing:normal; }
.qd-close{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; }
.qd-body{ padding:1.4rem 1.7rem 1.8rem; }
.qd-body .field{ margin-bottom:1rem; }
.qd-body label{ display:block; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:.4rem; }
.qd-body input, .qd-body select{ width:100%; min-width:0; font-family:var(--body); font-size:.94rem; padding:.75rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:var(--grey-50); color:var(--navy); }
.qd-body input::placeholder{ color:var(--grey-500); }
.qd-body input:focus, .qd-body select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.qd-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.qd-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.9rem; }
@media(max-width:640px){ .qd-row{ grid-template-columns:1fr; } .qd-row-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:420px){ .qd-row-3{ grid-template-columns:1fr; } }
.qd-check-list{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; margin-bottom:1rem; }
@media(max-width:420px){ .qd-check-list{ grid-template-columns:1fr; } }
.qd-check-item{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:rgba(255,255,255,.85); cursor:pointer; }
.qd-check-item input{ width:16px; height:16px; accent-color:var(--gold); flex-shrink:0; }
.qd-consent{ margin-bottom:1.1rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.14); }
.qd-consent-label{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.6rem; font-size:.82rem; font-weight:700; color:#fff; }
.qd-consent-label em{ font-style:normal; color:var(--gold); font-size:.72rem; font-weight:700; }
.qd-consent .qd-check-item{ align-items:flex-start; font-size:.82rem; color:rgba(255,255,255,.6); }
.qd-consent .qd-check-item input{ margin-top:2px; }
.qd-body #qdForm .btn-primary{ padding:14px 20px; font-size:.78rem; }
.qd-success{ text-align:center; padding:2.6rem 1rem; }
.qd-success .qd-check{ width:60px; height:60px; border-radius:50%; background:var(--orange); color:var(--navy); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; }
.qd-success h3{ color:#fff; margin-bottom:.5rem; font-family:var(--display); }
.qd-success p{ color:rgba(255,255,255,.6); font-size:.92rem; }
@media(max-width:640px){
  .qd-panel{ top:auto; left:0; right:0; bottom:0; width:100%; height:min(88vh,680px); border-radius:20px 20px 0 0; transform:translateY(100%); }
  .qd-panel.open{ transform:translateY(0); }
}

/* ---------- contact page quote CTA card (replaces inline form) ---------- */
.quote-cta-card{ text-align:center; padding:3rem 2.4rem; background:var(--grey-50); border:1px solid var(--grey-200); border-radius:16px; box-shadow:0 30px 60px -30px rgba(11,31,51,.3), 0 4px 14px -4px rgba(11,31,51,.08); }
.quote-cta-icon{ width:56px; height:56px; border-radius:50%; margin:0 auto 1.2rem; background:linear-gradient(135deg,var(--orange),var(--orange-dim)); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.quote-cta-card h2{ font-size:1.7rem; margin-bottom:.7rem; }
.quote-cta-card p{ color:var(--grey-500); font-size:.96rem; max-width:38ch; margin:0 auto 1.6rem; }
.quote-cta-alt{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; align-items:center; }
.quote-cta-alt-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--grey-500); transition:color .18s ease; }
.quote-cta-alt-link:hover{ color:var(--orange-dim); }
@media(max-width:600px){ .quote-cta-card{ padding:2.4rem 1.5rem; } }

/* ---------- contact page 2-col layout, collapses on mobile ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }