:root{
  --bg:#05080b;--bg2:#0a0f14;--panel:#0d141a;--panel2:#111a22;
  --text:#f6f8fa;--muted:#9aa8b3;--blue:#e53b38;--blue2:#ffaaa5;
  --red:#e53b38;--green:#68f0aa;--line:rgba(255,255,255,.085);--line2:rgba(255,255,255,.16);
  --max:1460px;--shadow:0 30px 100px rgba(0,0,0,.48)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;background:var(--bg)}
body{margin:0;background:
radial-gradient(circle at 50% -10%,rgba(229,59,56,.065),transparent 24%),
linear-gradient(180deg,#040609,#06090d 52%,#05080b);
color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}

/* NAV */
.utilityBar{position:fixed;inset:0 0 auto;z-index:2100;height:38px;background:linear-gradient(90deg,#77151b 0%,#a3262d 50%,#77151b 100%);border-bottom:1px solid rgba(255,255,255,.18);color:#fff}
.utilityIn{height:38px;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;font-size:12px;font-weight:650}
.utilityItem.phone{justify-self:center}.utilityItem.address{justify-self:end}
.utilityItem{display:flex;align-items:center;gap:9px;white-space:nowrap;min-width:0}
.utilityIcon{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;flex:0 0 auto}
.utilityItem span:last-child{overflow:hidden;text-overflow:ellipsis}
.nav{position:fixed;inset:38px 0 auto;z-index:2000;background:rgba(4,7,10,.88);backdrop-filter:blur(20px) saturate(1.18);border-bottom:1px solid var(--line)}
.navin{   height:80px;   display:grid;   grid-template-columns:220px 1fr auto;   align-items:center;   gap:22px; }.brand{   justify-self:start;   width:220px;   height:60px;   display:flex;   align-items:center;   overflow:hidden; }.navlinks{justify-self:center}.navcta{justify-self:end}.brandLogo{   display:block;   width:170px;   height:50px;   object-fit:contain;   object-position:left center; }
.brand{display:flex;align-items:center;font-weight:900;letter-spacing:.145em;font-size:13px;white-space:nowrap}
.mark{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line2);background:linear-gradient(145deg,#111922,#080d12);color:var(--blue);font-size:23px;box-shadow:inset 0 0 18px rgba(229,59,56,.06)}
.brand b{color:var(--blue)}
.navlinks{display:flex;gap:26px;align-items:center;color:#d8e0e6;font-size:14px}
.navlinks a{position:relative}
.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--blue);transition:.22s}
.navlinks a:hover:after{right:0}
.navcta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:999px;border:1px solid var(--line2);background:#ffffff08;font-weight:800;white-space:nowrap;transition:.22s}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.27)}
.btn.primary{background:#fff;color:#081017;border-color:#fff}
.menu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:#ffffff08;color:#fff}
.mobileMenu{display:none}

/* SCROLL EXPERIENCE */
.scrollExperience{position:relative;height:165vh;background:linear-gradient(180deg,#05080b,#070b0f 58%,#05080b)}
.stage{position:sticky;top:118px;height:calc(100vh - 118px);min-height:650px;overflow:hidden;perspective:1600px;border-bottom:1px solid var(--line);background:#05080b}
.heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:saturate(.92) contrast(1.04) brightness(.68);transform:scale(1.01)}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:
linear-gradient(90deg,rgba(3,6,9,.92) 0%,rgba(3,6,9,.72) 34%,rgba(3,6,9,.28) 62%,rgba(3,6,9,.20) 100%),
linear-gradient(180deg,rgba(3,6,9,.10),rgba(3,6,9,.03) 58%,rgba(3,6,9,.58));
}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:
radial-gradient(circle at 78% 48%,rgba(229,59,56,.10),transparent 25%),
linear-gradient(180deg,transparent 72%,rgba(2,4,6,.48));
}
.stageInner{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,620px) 1fr;align-items:center;gap:44px}
.storyCopy{position:relative;z-index:5;padding:20px 0 18px;align-self:center}
.ey{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:#cbe9f8}
.ey:before{content:"";width:38px;height:1px;background:var(--blue)}
.storyTitle{font-size:clamp(54px,5.8vw,92px);line-height:.89;letter-spacing:-.072em;margin:16px 0 16px;max-width:610px}
.storyTitle span{display:block;color:#dbe4e9}
.storyText{max-width:550px;color:#aeb9c1;font-size:16px;line-height:1.65;margin:0}
.storyActions{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.storyMeta{display:none}
.storyMeta strong{display:block;font-size:22px;letter-spacing:-.04em}
.storyMeta span{display:block;margin-top:4px;color:#8ea0ac;font-size:12px}
.serviceSync{display:grid;gap:7px;margin-top:20px;max-width:600px}
.serviceStep{display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;padding:10px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(7,12,16,.42);backdrop-filter:blur(10px);opacity:.48;transform:translateX(0);transition:opacity .28s ease,transform .28s ease,border-color .28s ease,background .28s ease}
.serviceStep.active{opacity:1;transform:translateX(6px);background:rgba(10,18,24,.72);border-color:rgba(229,59,56,.42);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.serviceStepNum{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:11px;font-weight:900;letter-spacing:.14em;color:#a8c8d9;transition:.28s}
.serviceStep.active .serviceStepNum{background:#fff;color:#081017;border-color:#fff}
.serviceStepText strong{display:block;font-size:14px;line-height:1.25;margin-bottom:3px}
.serviceStepText span{display:block;font-size:11px;line-height:1.4;color:#91a2ad}
.serviceProgress{height:2px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:12px}
.serviceProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));box-shadow:0 0 12px rgba(229,59,56,.55);transition:width .12s linear}

.section{padding:92px 0}
.sectionHead{display:grid;grid-template-columns:.88fr 1.12fr;gap:48px;align-items:end;margin-bottom:34px}
.section h2{margin:14px 0 0;font-size:clamp(42px,5.3vw,72px);line-height:.93;letter-spacing:-.06em}
.sectionHead p{margin:0;color:var(--muted);font-size:16px;line-height:1.75;max-width:720px}
.serviceGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{min-height:220px;padding:24px;border-radius:22px;background:linear-gradient(180deg,#0f161d,#0a1015);border:1px solid var(--line);position:relative;overflow:hidden;transition:.22s}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue),transparent)}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.15)}
.card .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#b7d0dd}
.card h3{margin:48px 0 10px;font-size:26px;letter-spacing:-.04em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:16px}
.panel{padding:28px;border-radius:24px;background:linear-gradient(180deg,#0f161d,#0a1015);border:1px solid var(--line)}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.metric{padding:18px;border-radius:18px;background:#ffffff06;border:1px solid #ffffff0a}
.metric strong{display:block;font-size:38px;letter-spacing:-.05em}
.metric span{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:5px}
.featureList{display:grid;gap:11px;margin-top:20px}
.feature{padding:17px 18px;border-radius:18px;background:#ffffff06;border:1px solid #ffffff0a}
.feature strong{display:block;font-size:15px;margin-bottom:4px}
.feature span{display:block;color:var(--muted);font-size:13px;line-height:1.58}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{padding:25px;border-radius:22px;background:linear-gradient(180deg,#0f161d,#0a1015);border:1px solid var(--line)}
.stars{color:#ffd84f;letter-spacing:.08em;font-size:14px}
.review p{color:#dce5ea;font-size:14px;line-height:1.72;margin:14px 0 16px}
.review strong{font-size:14px}
.contact{padding:34px;border-radius:28px;background:radial-gradient(circle at 85% 0%,rgba(229,59,56,.10),transparent 28%),linear-gradient(180deg,#101821,#0b1117);border:1px solid var(--line);display:grid;grid-template-columns:1fr .95fr;gap:28px;box-shadow:var(--shadow)}
.contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contactCard{padding:18px;border-radius:18px;background:#ffffff06;border:1px solid #ffffff0a}
.contactCard small{display:block;text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:#b8d1df;margin-bottom:8px}
.contactCard strong{display:block;font-size:18px;margin-bottom:4px}
.contactCard span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.journeyFeature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px;align-items:stretch}
.journeyMedia{position:relative;min-height:560px;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#070b0f;box-shadow:var(--shadow)}
.journeyVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.05) brightness(.82)}
.journeyShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,10,.08),rgba(4,7,10,.10) 55%,rgba(4,7,10,.82));pointer-events:none}
.journeyCount{position:absolute;top:18px;right:18px;padding:10px 13px;border-radius:999px;background:rgba(5,9,12,.60);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);font-size:10px;letter-spacing:.16em;color:#d2e3eb}
.journeyCaption{position:absolute;left:28px;right:28px;bottom:24px}
.journeyCaption small{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#b8d8e7;margin-bottom:8px}
.journeyCaption strong{display:block;font-size:clamp(30px,3.2vw,48px);line-height:.98;letter-spacing:-.045em;max-width:720px}
.journeySteps{display:grid;gap:10px}.journeyFollow{padding:2px 3px 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#718590}
.journeyStep{width:100%;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;text-align:left;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#0f161d,#0a1015);color:var(--text);cursor:pointer;transition:.22s}
.journeyStep:hover{transform:translateX(3px);border-color:rgba(255,255,255,.16)}
.journeyStep.active{border-color:rgba(229,59,56,.42);background:linear-gradient(180deg,#111d25,#0b1319);box-shadow:inset 3px 0 0 var(--blue)}
.journeyStep>span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#ffffff06;border:1px solid #ffffff0b;color:#a9bfcb;font-size:10px;letter-spacing:.12em;font-weight:800}
.journeyStep.active>span{background:#fff;color:#081017;border-color:#fff}
.journeyStep strong{display:block;font-size:16px;margin-bottom:4px}
.journeyStep small{display:block;color:#8fa0ab;font-size:12px;line-height:1.45}
.bookingForm{display:grid;gap:14px;padding:22px;border-radius:20px;background:#ffffff05;border:1px solid #ffffff0a}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bookingForm label{display:grid;gap:7px}
.bookingForm label>span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#b4c8d3}
.bookingForm input,.bookingForm select,.bookingForm textarea{width:100%;border:1px solid rgba(255,255,255,.10);background:#0b1116;color:#f2f5f7;border-radius:12px;padding:13px 14px;outline:none}
.bookingForm input:focus,.bookingForm select:focus,.bookingForm textarea:focus{border-color:rgba(229,59,56,.55);box-shadow:0 0 0 3px rgba(229,59,56,.08)}
.bookingForm textarea{resize:vertical}
.formSubmit{justify-self:start;cursor:pointer}
.formNote{margin:0;color:#8798a4;font-size:12px}.formNote a{color:#d6ecf8}
footer{padding:28px 0 36px;color:#7e8b95;font-size:12px}
.footerin{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:1180px){.processLine{grid-template-columns:repeat(2,1fr)}
  .stageInner{grid-template-columns:minmax(0,610px) 1fr}.storyCopy{padding:18px 0}.stage{min-height:760px}
  .sectionHead,.split,.contact,.journeyFeature{grid-template-columns:1fr}.serviceGrid{grid-template-columns:repeat(2,1fr)}.reviews{grid-template-columns:1fr}
}
@media(max-width:920px){.navin{grid-template-columns:1fr auto}.navlinks{display:none}.navcta{justify-self:end}.utilityIn{grid-template-columns:1fr 1fr;gap:12px;font-size:11px}.utilityItem.address{display:none}
  .navcta .phone{display:none}.menu{display:grid;place-items:center}
  .mobileMenu{position:fixed;z-index:1999;top:118px;left:16px;right:16px;padding:16px;border-radius:20px;background:rgba(8,12,17,.97);border:1px solid var(--line);box-shadow:var(--shadow)}
  .mobileMenu.open{display:grid;gap:10px}.mobileMenu a{padding:14px;border-radius:14px;background:#ffffff07;border:1px solid #ffffff0b;font-weight:750}
}
@media(max-width:700px){.processLine{grid-template-columns:1fr}.processLine:before{display:none}.utilityBar{height:34px}.utilityIn{height:34px;grid-template-columns:1fr;font-size:10px}.utilityItem.hours{display:none}.utilityItem.phone{justify-content:center}
  .wrap{width:min(calc(100% - 24px),var(--max))}.navin{height:70px}.brandLogo{width:150px;max-height:56px}.brand{font-size:11px;letter-spacing:.11em}.mark{width:34px;height:34px;font-size:20px}
  .scrollExperience{height:150vh}.stage{top:104px;height:calc(100vh - 104px);min-height:730px}
  .stageInner{display:block;padding-top:18px}.storyCopy{padding-top:12px}.storyTitle{font-size:52px;line-height:.9}.storyText{font-size:15px}.storyMeta{gap:16px;margin-top:22px}
  .serviceSync{margin-top:16px;gap:7px}.serviceStep{grid-template-columns:42px 1fr;padding:10px 11px}.serviceStepNum{width:35px;height:35px;font-size:10px}
  .diagPanel{left:14px;right:14px;top:auto;bottom:8px;width:auto;min-width:0}.diagPanel .system:nth-of-type(n+4){display:none}
  .serviceGrid,.metrics,.contactGrid,.formRow{grid-template-columns:1fr}.journeyMedia{min-height:430px}.journeyCaption{left:20px;right:20px;bottom:18px}.journeySteps{grid-template-columns:1fr}.section{padding:72px 0}.sectionHead{gap:20px}.contact{padding:24px}.mobileMenu{top:104px}
}

/* =========================================
   ANIMATED WORKSHOP PROCESS TIMELINE
========================================= */
.processSection{
  padding-top:64px;
  padding-bottom:82px;
}
.processSection .processHead{
  margin-bottom:20px;
}
.processTimeline{
  --process-progress:0;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding-top:42px;
}
.processRail{
  position:absolute;
  left:6.5%;
  right:6.5%;
  top:19px;
  height:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.processRail i{
  display:block;
  height:100%;
  width:calc(var(--process-progress) * 100%);
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  box-shadow:0 0 16px rgba(229,59,56,.42);
  transition:width .16s linear;
}
.processStage{
  position:relative;
  min-height:235px;
  padding:58px 20px 20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 80% 0%,rgba(229,59,56,.05),transparent 28%),
    linear-gradient(180deg,#0f151b,#0a1015);
  border:1px solid rgba(255,255,255,.08);
  opacity:.34;
  transform:translateY(22px);
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}
.processStage.is-active{
  opacity:1;
  transform:translateY(0);
  border-color:rgba(229,59,56,.22);
  background:
    radial-gradient(circle at 80% 0%,rgba(229,59,56,.09),transparent 30%),
    linear-gradient(180deg,#101820,#0a1015);
}
.processMarker{
  position:absolute;
  top:-42px;
  left:18px;
  z-index:4;
}
.processMarker span{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b1218;
  border:1px solid rgba(229,59,56,.32);
  color:#a9d8ef;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:900;
  box-shadow:0 0 0 7px rgba(5,8,11,.95);
  transition:.35s ease;
}
.processStage.is-active .processMarker span{
  background:var(--red);
  color:#fff;
  border-color:#fff;
  box-shadow:0 0 0 7px rgba(229,59,56,.08),0 0 22px rgba(229,59,56,.18);
}
.processIcon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  color:#9fcfe6;
}
.processIcon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.processStage strong{
  display:block;
  font-size:22px;
  letter-spacing:-.035em;
  margin-bottom:8px;
}
.processStage p{
  margin:0;
  color:#aab7c0;
  font-size:13px;
  line-height:1.58;
}
.processStage small{
  display:block;
  margin-top:18px;
  color:#6f838f;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.processStage.is-active small{color:#8fb9cd}

@media(max-width:1180px){
  .processTimeline{
    grid-template-columns:repeat(2,1fr);
    gap:18px 14px;
    padding-top:0;
  }
  .processRail{display:none}
  .processMarker{
    top:16px;
    right:16px;
    left:auto;
  }
  .processMarker span{
    box-shadow:none;
  }
  .processStage{
    padding-top:24px;
    min-height:220px;
  }
}

@media(max-width:700px){
  .processSection{
    padding-top:48px;
    padding-bottom:64px;
  }
  .processTimeline{
    grid-template-columns:1fr;
    gap:12px;
  }
  .processStage{
    min-height:0;
    padding:22px 20px 20px 78px;
    transform:translateY(16px);
  }
  .processMarker{
    left:18px;
    right:auto;
    top:18px;
  }
  .processIcon{
    width:38px;
    height:38px;
    margin-bottom:12px;
  }
  .processStage strong{font-size:20px}
  .processStage small{margin-top:12px}
}

/* =========================================
   DETAILED WHY NEXTECH SECTION
========================================= */
.whySection{padding-top:78px}
.whyHead{margin-bottom:28px}
.whyLayout{
  display:grid;
  grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr);
  gap:16px;
  align-items:stretch
}
.whyProof{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:610px;
  padding:30px;
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 8%,rgba(229,59,56,.11),transparent 28%),
    linear-gradient(180deg,#101820,#0a1015);
  border:1px solid var(--line);
  box-shadow:var(--shadow)
}
.whyProofKicker{
  display:block;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#acd5e8;
  margin-bottom:18px
}
.whyRating{
  display:block;
  font-size:clamp(58px,6vw,96px);
  line-height:.88;
  letter-spacing:-.065em
}
.whyProofTop p{
  margin:18px 0 0;
  max-width:430px;
  color:#aab7c0;
  font-size:15px;
  line-height:1.65
}
.whyProofStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:28px 0
}
.whyProofStats>div{
  padding:15px;
  border-radius:15px;
  background:#ffffff05;
  border:1px solid #ffffff09
}
.whyProofStats strong{
  display:block;
  font-size:26px;
  letter-spacing:-.04em;
  margin-bottom:5px
}
.whyProofStats span{
  display:block;
  color:#82939d;
  font-size:11px;
  line-height:1.35
}
.whyAddress{
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08)
}
.whyAddress small{
  display:block;
  margin-bottom:7px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#8097a3;
  font-size:9px
}
.whyAddress strong{
  display:block;
  font-size:20px;
  margin-bottom:4px
}
.whyAddress span{color:#91a1aa;font-size:13px}

.whyReasons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.whyReason{
  position:relative;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:16px;
  min-height:190px;
  padding:24px 22px;
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 0%,rgba(229,59,56,.05),transparent 24%),
    linear-gradient(180deg,#0f161c,#0a1015);
  border:1px solid var(--line);
  transition:transform .22s ease,border-color .22s ease,background .22s ease
}
.whyReason:hover{
  transform:translateY(-3px);
  border-color:rgba(229,59,56,.25);
  background:
    radial-gradient(circle at 92% 0%,rgba(229,59,56,.09),transparent 27%),
    linear-gradient(180deg,#111920,#0a1015)
}
.whyReasonNo{
  position:absolute;
  right:16px;
  top:14px;
  color:#4f6470;
  font-size:9px;
  letter-spacing:.14em
}
.whyReasonIcon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#ffffff05;
  border:1px solid #ffffff0a;
  color:#9fd6ef;
  font-size:20px
}
.whyReason h3{
  margin:2px 0 9px;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.035em
}
.whyReason p{
  margin:0;
  color:#9eadb6;
  font-size:13px;
  line-height:1.6
}

@media(max-width:1180px){
  .whyLayout{grid-template-columns:1fr}
  .whyProof{min-height:auto}
}
@media(max-width:760px){
  .whyReasons{grid-template-columns:1fr}
  .whyProofStats{grid-template-columns:1fr}
  .whyReason{min-height:0}
}

/* =========================================
   RESPONSIVE / DYNAMIC MOBILE SIZING
   Keeps desktop unchanged; scales phone/tablet by viewport
========================================= */

/* Tablet / small laptop */
@media (max-width: 1024px){
  :root{
    --mobile-pad:clamp(14px,3vw,28px);
  }

  .wrap{
    width:min(calc(100% - (var(--mobile-pad) * 2)),var(--max));
  }

  .navin{
    padding-inline:0;
  }

  .brandLogo{
    width:clamp(145px,20vw,180px);
    max-height:58px;
  }

  .btn{
    padding:clamp(10px,1.5vw,13px) clamp(14px,2vw,18px);
    font-size:clamp(13px,1.5vw,15px);
  }

  .section,
  .servicesCinema{
    padding-top:clamp(58px,8vw,82px);
    padding-bottom:clamp(58px,8vw,82px);
  }

  .sectionHead,
  

  .section h2,
  .servicesIntro h2{
    font-size:clamp(38px,6vw,64px);
  }

  .serviceChapter.serviceScene,
  .serviceChapter.serviceScene .chapterVisual{
    min-height:clamp(500px,66vw,590px);
  }

  .sceneCaption h3,
  .serviceDiag2.diagFull .diagCaption h3{
    font-size:clamp(38px,5.8vw,58px);
  }

  .whyProof{
    padding:clamp(22px,3vw,30px);
  }
}

/* Phone / compact tablet */
@media (max-width: 700px){
  html{
    scroll-padding-top:104px;
  }

  body{
    font-size:clamp(14px,3.8vw,16px);
  }

  .wrap{
    width:calc(100% - clamp(24px,6vw,36px));
  }

  /* Top utility bar */
  .utilityBar{
    height:34px;
  }

  .utilityIn{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-inline:6px;
  }

  .utilityItem.phone{
    font-size:clamp(10px,2.9vw,12px);
  }

  .utilityItem.hours,
  .utilityItem.address{
    display:none;
  }

  /* Main mobile nav */
  .nav{
    inset:34px 0 auto;
  }

  .navin{
    height:70px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }

  .brandLogo{
    width:clamp(122px,37vw,155px);
    max-width:100%;
    height:auto;
  }

  .navcta{
    gap:8px;
  }

  .navcta .btn.primary{
    display:none;
  }

  .menu{
    display:grid;
    place-items:center;
    width:clamp(42px,11vw,48px);
    height:clamp(42px,11vw,48px);
  }

  .mobileMenu{
    top:104px;
    left:12px;
    right:12px;
    max-height:calc(100dvh - 116px);
    overflow:auto;
  }

  /* Hero adapts to both phone width AND phone height */
  .scrollExperience{
    height:clamp(115dvh,140dvh,150dvh);
  }

  .stage{
    top:104px;
    height:calc(100dvh - 104px);
    min-height:0;
  }

  .stageInner{
    height:100%;
    padding-top:clamp(10px,2.5dvh,20px);
  }

  .storyCopy{
    width:100%;
    max-width:100%;
    padding:clamp(10px,2dvh,18px) 0 14px;
  }

  .ey{
    font-size:clamp(9px,2.5vw,11px);
    letter-spacing:.17em;
  }

  .ey:before{
    width:clamp(24px,8vw,34px);
  }

  .storyTitle{
    max-width:min(92vw,560px);
    font-size:clamp(42px,12vw,58px);
    line-height:.91;
    margin:clamp(10px,2dvh,16px) 0 clamp(10px,2dvh,16px);
  }

  .storyText{
    max-width:92vw;
    font-size:clamp(13px,3.7vw,16px);
    line-height:1.55;
  }

  .storyActions{
    margin-top:clamp(14px,2.2dvh,20px);
    gap:8px;
  }

  .storyActions .btn{
    padding:11px 15px;
    font-size:13px;
  }

  .serviceSync{
    width:100%;
    max-width:100%;
    margin-top:clamp(12px,2dvh,16px);
    gap:6px;
  }

  .serviceStep{
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:9px 10px;
    border-radius:12px;
  }

  .serviceStepNum{
    width:34px;
    height:34px;
    font-size:9px;
  }

  .serviceStepText strong{
    font-size:clamp(12px,3.4vw,14px);
  }

  .serviceStepText span{
    font-size:clamp(9px,2.8vw,11px);
  }

  /* Service introduction */
  .servicesIntro,
  .sectionHead{
    display:block;
  }

  .servicesIntro h2,
  .section h2{
    font-size:clamp(38px,11vw,52px);
    line-height:.94;
    margin-top:10px;
  }

  .servicesIntro p,
  .sectionHead>p{
    margin-top:18px;
    font-size:14px;
    line-height:1.62;
  }

  /* Full service scenes */
  .serviceChapters{
    gap:16px;
    margin-top:24px;
  }

  .serviceChapter.serviceScene,
  .serviceChapter.serviceScene .chapterVisual,
  .serviceDiag2.diagFull,
  .serviceDiag2.diagFull .chapterVisual{
    min-height:clamp(430px,118vw,540px);
    border-radius:20px;
  }

  .serviceChapter.serviceScene .chapterVisual:after{
    transform:scale(1.02);
  }

  .sceneTag{
    top:14px !important;
    left:14px !important;
    max-width:calc(100% - 28px);
    padding:8px 10px;
    font-size:8px;
  }

  .sceneCaption,
  .serviceChapter.serviceScene .sceneCaption,
  .serviceDiag2.diagFull .diagCaption{
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    max-width:none;
  }

  .sceneCaption h3,
  .serviceDiag2.diagFull .diagCaption h3{
    font-size:clamp(34px,10vw,44px);
    line-height:.94;
    margin-bottom:9px;
  }

  .sceneCaption p,
  .serviceDiag2.diagFull .diagCaption p{
    font-size:clamp(12px,3.5vw,14px);
    line-height:1.55;
  }

  .sceneCaption a,
  .serviceDiag2.diagFull .diagCaption a{
    margin-top:14px;
    font-size:13px;
  }

  .serviceDiag2.diagFull .diagOverlay{
    top:14px;
    right:14px;
    width:min(48vw,205px);
    padding:11px 12px;
    border-radius:14px;
  }

  .serviceDiag2.diagFull .diagOverlay small{
    font-size:8px;
    margin-bottom:5px;
  }

  .serviceDiag2.diagFull .diagOverlay i{
    padding:6px 0;
    font-size:10px;
  }

  .hotspot{
    font-size:8px;
  }

  .hotspot span{
    display:none;
  }

  /* More services */
  .moreServices{
    margin-top:24px;
    padding-top:18px;
  }

  

  

  

  .moreService{
    padding:14px;
    border-radius:14px;
  }

  /* Process timeline */
  .processSection{
    padding-top:clamp(44px,10vw,58px);
    padding-bottom:clamp(52px,12vw,68px);
  }

  .processSection .processHead{
    margin-bottom:18px;
  }

  .processTimeline{
    grid-template-columns:1fr;
    gap:10px;
  }

  .processStage{
    padding:20px 18px 18px 72px;
    border-radius:16px;
  }

  .processMarker{
    left:16px;
    top:17px;
  }

  .processMarker span{
    width:34px;
    height:34px;
  }

  .processIcon{
    width:36px;
    height:36px;
  }

  .processStage strong{
    font-size:19px;
  }

  .processStage p{
    font-size:12px;
    line-height:1.52;
  }

  /* Why Nextech */
  .whySection{
    padding-top:clamp(52px,12vw,70px);
  }

  .whyLayout{
    grid-template-columns:1fr;
    gap:12px;
  }

  .whyProof{
    min-height:0;
    padding:20px;
    border-radius:20px;
  }

  .whyRating{
    font-size:clamp(54px,18vw,78px);
  }

  .whyProofTop p{
    font-size:13px;
  }

  .whyProofStats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin:20px 0;
  }

  .whyProofStats>div{
    padding:11px 9px;
    min-width:0;
  }

  .whyProofStats strong{
    font-size:clamp(20px,6vw,26px);
  }

  .whyProofStats span{
    font-size:9px;
  }

  .whyReasons{
    grid-template-columns:1fr;
    gap:9px;
  }

  .whyReason{
    min-height:0;
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    padding:18px 16px;
    border-radius:16px;
  }

  .whyReasonIcon{
    width:40px;
    height:40px;
    border-radius:11px;
    font-size:17px;
  }

  .whyReason h3{
    padding-right:22px;
    font-size:18px;
    line-height:1.15;
    margin-bottom:7px;
  }

  .whyReason p{
    font-size:12px;
    line-height:1.55;
  }

  /* Reviews */
  .reviews{
    grid-template-columns:1fr;
    gap:10px;
  }

  .review{
    padding:20px;
    border-radius:18px;
  }

  /* Booking/contact */
  .contact{
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
    border-radius:20px;
  }

  .bookingForm{
    padding:16px;
    border-radius:16px;
  }

  .formRow{
    grid-template-columns:1fr;
    gap:12px;
  }

  .bookingForm input,
  .bookingForm select,
  .bookingForm textarea{
    font-size:16px; /* prevents iOS zoom on focus */
    padding:13px;
  }

  .formSubmit{
    width:100%;
  }
}

/* Very small phones */
@media (max-width: 390px){
  .wrap{
    width:calc(100% - 20px);
  }

  .brandLogo{
    width:118px;
  }

  .storyTitle{
    font-size:clamp(38px,11.8vw,46px);
  }

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

  .storyActions .btn{
    width:100%;
    padding-inline:10px;
  }

  .serviceStep{
    grid-template-columns:34px minmax(0,1fr);
  }

  .serviceStepNum{
    width:30px;
    height:30px;
  }

  .whyProofStats{
    grid-template-columns:1fr;
  }

  .serviceDiag2.diagFull .diagOverlay{
    width:180px;
  }
}

/* Short landscape phones */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape){
  .utilityBar{
    display:none;
  }

  .nav{
    inset:0 0 auto;
  }

  .navin{
    height:60px;
  }

  .brandLogo{
    width:125px;
    max-height:48px;
  }

  .stage{
    top:60px;
    height:calc(100dvh - 60px);
  }

  .scrollExperience{
    height:120dvh;
  }

  .storyTitle{
    font-size:clamp(34px,7vw,50px);
  }

  .storyText{
    font-size:12px;
    max-width:52vw;
  }

  .serviceSync{
    max-width:50vw;
  }
}

/* Mobile: remove suspension hotspots / blue dots */
@media (max-width:700px){
  .suspensionScene .hotspot{
    display:none !important;
  }
}

/* =========================================
   FAQ + MOBILE CONVERSION BAR
========================================= */
.faqSection{
  padding-top:76px;
}
.faqHead{
  margin-bottom:24px;
}
.faqGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.faqItem{
  border-radius:18px;
  background:linear-gradient(180deg,#0f161c,#0a1015);
  border:1px solid var(--line);
  overflow:hidden;
}
.faqItem summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  font-weight:800;
  font-size:16px;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary b{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#ffffff06;
  border:1px solid #ffffff0a;
  color:#9fd6ef;
  font-size:18px;
  font-weight:500;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.faqItem[open] summary b{
  transform:rotate(45deg);
  background:#fff;
  color:#081017;
}
.faqItem p{
  margin:0;
  padding:0 22px 22px;
  color:#9eadb6;
  font-size:13px;
  line-height:1.65;
  max-width:760px;
}

.mobileActionBar{
  display:none;
}

@media(max-width:800px){
  .faqGrid{
    grid-template-columns:1fr;
  }

  .faqItem summary{
    padding:17px 18px;
    font-size:15px;
  }

  .faqItem p{
    padding:0 18px 18px;
    font-size:12px;
  }

  .mobileActionBar{
    position:fixed;
    z-index:2600;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:7px;
    border-radius:18px;
    background:rgba(7,11,15,.88);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 40px rgba(0,0,0,.38);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(16px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }

  .mobileActionBar.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .mobileActionBar a{
    min-height:46px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:850;
    background:#ffffff07;
    border:1px solid #ffffff0a;
  }

  .mobileActionBar a.primary{
    background:#fff;
    color:#081017;
    border-color:#fff;
  }

  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }
}

@media(max-width:390px){
  .mobileActionBar{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
  }

  .mobileActionBar a{
    min-height:44px;
    font-size:12px;
  }
}

/* =========================================
   CLIENT PITCH POLISH
========================================= */

/* Header compresses subtly after the hero starts moving */
.nav,
.navin,
.brandLogo,
.navlinks,
.navcta .btn{
  transition:
    height .28s ease,
    width .28s ease,
    max-height .28s ease,
    padding .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
.nav.is-scrolled{
  background:rgba(4,7,10,.95);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 14px 38px rgba(0,0,0,.22);
}
.nav.is-scrolled .brandLogo{
  width:168px;
  max-height:55px;
}
.nav.is-scrolled .navcta .btn{
  padding:10px 16px;
}

/* Trust proof above testimonials */
.reviewTrustBar{
  display:grid;
  grid-template-columns:auto 1px auto minmax(260px,1fr);
  align-items:center;
  gap:22px;
  margin:0 0 14px;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 0%,rgba(229,59,56,.07),transparent 25%),
    linear-gradient(180deg,#0f161d,#0a1015);
}
.reviewTrustBar>div{
  display:flex;
  align-items:baseline;
  gap:9px;
  white-space:nowrap;
}
.reviewTrustBar strong{
  font-size:25px;
  letter-spacing:-.04em;
}
.reviewTrustBar span{
  color:#8397a2;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.reviewTrustBar i{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.10);
}
.reviewTrustBar p{
  margin:0;
  color:#9aaab4;
  font-size:12px;
  line-height:1.5;
  justify-self:end;
  max-width:440px;
}
.review{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.review:hover{
  transform:translateY(-4px);
  border-color:rgba(229,59,56,.20);
  box-shadow:0 20px 45px rgba(0,0,0,.18);
}

/* Demo form interaction */
.demoFormStatus{
  display:none;
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(104,240,170,.07);
  border:1px solid rgba(104,240,170,.18);
  color:#bdf5d5;
  font-size:12px;
  line-height:1.5;
}
.demoFormStatus.show{
  display:block;
}

/* Discreet pitch disclaimer */
.conceptNote{
  max-width:680px;
  text-align:right;
  color:#63737d;
}

/* Progressive enhancement: content remains visible without JS */
.revealItem{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .65s cubic-bezier(.2,.8,.2,1),
    transform .65s cubic-bezier(.2,.8,.2,1);
}
.revealItem.revealed{
  opacity:1;
  transform:none;
}

/* Keep oil/service visual grounded: scanning belongs to diagnostics only */
.oilScene .sceneSweep{
  display:none !important;
}

@media(max-width:900px){
  .nav.is-scrolled .brandLogo{
    width:145px;
    max-height:50px;
  }

  .reviewTrustBar{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .reviewTrustBar>i{display:none}
  .reviewTrustBar p{
    grid-column:1/-1;
    justify-self:start;
  }

  .conceptNote{
    max-width:none;
    text-align:left;
  }
}

@media(max-width:700px){
  .nav.is-scrolled .brandLogo{width:132px}

  .reviewTrustBar{
    padding:14px;
    border-radius:16px;
  }
  .reviewTrustBar strong{font-size:22px}
  .reviewTrustBar span{font-size:9px}
  .reviewTrustBar p{font-size:11px}

  /* Swipeable review preview on phone */
  .reviews{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .reviews::-webkit-scrollbar{display:none}
  .review{
    flex:0 0 min(86vw,360px);
    scroll-snap-align:start;
  }

  .footerin{
    display:grid;
    gap:8px;
    padding-bottom:10px;
  }
  .conceptNote{
    font-size:10px;
    line-height:1.5;
  }
}

@media(prefers-reduced-motion:reduce){
  .revealItem,
  .review,
  .nav,
  .navin,
  .brandLogo,
  .navcta .btn{
    transition:none !important;
  }
  .revealItem{
    opacity:1 !important;
    transform:none !important;
  }
}

/* =========================================
   iPHONE LOW POWER VIDEO FALLBACK
========================================= */
.stage{
  background:
    linear-gradient(90deg,rgba(3,6,9,.88),rgba(3,6,9,.42)),
    url('../assets/services/servicing.jpg') center/cover no-repeat,
    #05080b;
}
.videoPowerNotice{
  position:absolute;
  z-index:8;
  right:22px;
  bottom:22px;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(6,10,13,.72);
  color:#dce8ee;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  font:inherit;
  cursor:pointer;
}
.videoPowerNotice span{
  color:#8fa5b1;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.videoPowerNotice strong{
  color:#fff;
  font-size:11px;
}
.videoPowerNotice.show{
  display:flex;
}
.videoPowerNotice:hover{
  border-color:rgba(229,59,56,.30);
}

@media(max-width:700px){
  .videoPowerNotice{
    right:14px;
    bottom:14px;
    left:14px;
    justify-content:center;
    border-radius:14px;
    padding:10px 12px;
  }
  .videoPowerNotice span{
    display:none;
  }
  .videoPowerNotice strong{
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .videoPowerNotice{
    display:none !important;
  }
}

/* Smooth, full-resolution low-power fallback from three video frames. */
.heroMotionFallback{
  position:absolute;
  inset:0;
  z-index:0;
  display:none;
  overflow:hidden;
  transform:scale(1.01);
  transform-origin:center;
}
.heroMotionFallback img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.92) contrast(1.04) brightness(.68);
  opacity:0;
  transform:scale(1.035);
  will-change:opacity,transform;
  animation:heroFramePan 16.4s ease-in-out infinite alternate;
}
.stage.motion-fallback .heroMotionFallback img:nth-child(1){animation:heroFrameOne 8.2s linear infinite,heroFramePan 16.4s ease-in-out infinite alternate}
.stage.motion-fallback .heroMotionFallback img:nth-child(2){animation:heroFrameTwo 8.2s linear infinite,heroFramePan 16.4s ease-in-out infinite alternate}
.stage.motion-fallback .heroMotionFallback img:nth-child(3){animation:heroFrameThree 8.2s linear infinite,heroFramePan 16.4s ease-in-out infinite alternate}
@keyframes heroFrameOne{0%,30%,100%{opacity:1}36%,96%{opacity:0}}
@keyframes heroFrameTwo{0%,30%,67%,100%{opacity:0}36%,61%{opacity:1}}
@keyframes heroFrameThree{0%,61%,100%{opacity:0}67%,96%{opacity:1}}
@keyframes heroFramePan{from{transform:scale(1.035) translate3d(-.4%,0,0)}to{transform:scale(1.10) translate3d(.4%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .stage.motion-fallback .heroMotionFallback img{animation:none;opacity:0}
  .stage.motion-fallback .heroMotionFallback img:first-child{opacity:1}
}
.stage.motion-fallback .heroVideo{
  display:none;
}
.stage.motion-fallback .heroMotionFallback{
  display:block;
}

.lowPowerHint{display:none}
@media(max-width:700px){
  .stage.motion-fallback .lowPowerHint{
    display:inline-block;
    max-width:100%;
    margin:10px 0 0;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    background:rgba(5,10,14,.72);
    color:#e5edf1;
    font-size:11px;
    line-height:1.35;
  }
}

/* Old tap-to-play notice is no longer used. */
.videoPowerNotice{
  display:none !important;
}


/* =========================================
   EA34117 CONVERSION POLISH
   Keeps the established visual direction.
========================================= */

/* Immediate trust proof without crowding the hero */
.storyMeta{
  display:grid;
  grid-template-columns:repeat(4,max-content);
  gap:0;
  width:max-content;
  max-width:100%;
  margin-top:16px;
  padding:10px 12px;
  border-radius:15px;
  background:rgba(5,10,14,.42);
  border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(10px);
}
.storyMeta>div{
  padding:0 13px;
  border-right:1px solid rgba(255,255,255,.08);
}
.storyMeta>div:first-child{padding-left:2px}
.storyMeta>div:last-child{border-right:0;padding-right:2px}
.storyMeta strong{font-size:15px;line-height:1;color:#f4f9fb}
.storyMeta span{font-size:9px;margin-top:4px;letter-spacing:.08em;text-transform:uppercase;color:#7f929d}

/* Hero service controls now read as controls rather than static cards */
.serviceStep{
  cursor:pointer;
  user-select:none;
}
.serviceStep:hover{
  opacity:.78;
  border-color:rgba(229,59,56,.20);
}
.serviceStep:focus-visible{
  outline:2px solid rgba(229,59,56,.75);
  outline-offset:2px;
}
.serviceStep.active{
  box-shadow:0 13px 34px rgba(0,0,0,.22),inset 2px 0 0 rgba(229,59,56,.78);
}
.serviceStep.active .serviceStepText strong{
  color:#f5fbfe;
}

/* Reviews keep the existing layout but get a subtle moving spotlight */
.review{
  opacity:.66;
  transform:scale(.985);
  transition:opacity .45s ease,transform .45s ease,border-color .45s ease,box-shadow .45s ease;
}
.review.reviewSpotlight{
  opacity:1;
  transform:translateY(-5px) scale(1);
  border-color:rgba(229,59,56,.26);
  box-shadow:0 24px 58px rgba(0,0,0,.22),0 0 0 1px rgba(229,59,56,.05) inset;
}

/* Booking form communicates the next action more clearly */
.bookingForm::before{
  content:"Booking request";
  display:block;
  font-size:10px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#9fd6ef;
  margin-bottom:-2px;
}
.formSubmit{
  min-width:220px;
}
.bookingForm input[type="date"]{
  color-scheme:dark;
}

@media(max-width:900px){
  .storyMeta{
    grid-template-columns:repeat(2,1fr);
    width:100%;
    gap:7px;
    padding:8px;
  }
  .storyMeta>div{
    border:0;
    padding:8px 9px !important;
    border-radius:10px;
    background:rgba(255,255,255,.035);
  }
}

@media(max-width:700px){
  .storyMeta{
    margin-top:14px;
  }
  .storyMeta strong{font-size:14px}
  .storyMeta span{font-size:8px}
  .review{opacity:1;transform:none}
  .review.reviewSpotlight{
    transform:none;
  }
}


/* Make conversion upgrades clearly visible inside the first viewport */
.serviceControlLabel{
  margin-top:17px;
  margin-bottom:7px;
  color:#7e929e;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.storyActions + .storyMeta{
  margin-top:13px;
}
@media(min-width:901px){
  .storyMeta{
    padding:8px 10px;
  }
  .storyMeta>div{
    padding:0 11px;
  }
  .serviceSync{
    margin-top:0;
  }
}
@media(max-height:850px) and (min-width:901px){
  .storyTitle{
    font-size:clamp(48px,5.2vw,78px);
    margin:12px 0 12px;
  }
  .storyText{
    line-height:1.55;
  }
  .storyActions{
    margin-top:17px;
  }
  .storyMeta{
    margin-top:11px;
  }
  .serviceControlLabel{
    margin-top:12px;
  }
  .serviceStep{
    padding:8px 11px;
  }
  .serviceStepNum{
    width:34px;
    height:34px;
  }
}


/* =========================================
   BUSINESS VALUE POLISH
   Adds proof, navigation and conversion UX without redesigning ea34117.
========================================= */

/* Active navigation section */
.navlinks a.active{
  color:#fff;
}
.navlinks a.active::after{
  right:0;
  box-shadow:0 0 12px rgba(229,59,56,.50);
}

/* Review rotation controls */
.reviewControls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:#71838e;
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.reviewDot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  cursor:pointer;
  transition:.25s ease;
}
.reviewDot.active{
  width:24px;
  border-radius:99px;
  background:var(--blue);
  border-color:var(--blue);
  box-shadow:0 0 12px rgba(229,59,56,.42);
}
.reviewControls span{
  margin-left:5px;
}

/* Location section */
.locationSection{
  padding-top:80px;
}
.locationGrid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);
  gap:16px;
  align-items:stretch;
}
.mapCard{
  min-height:470px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--line);
  background:#0b1015;
  box-shadow:var(--shadow);
}
.mapCard iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:470px;
  border:0;
  filter:grayscale(.8) invert(.90) contrast(.86) brightness(.72) saturate(.55);
}
.locationInfo{
  padding:30px;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 0%,rgba(229,59,56,.11),transparent 27%),
    linear-gradient(180deg,#101820,#0a1015);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.locationBadge{
  width:max-content;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(229,59,56,.20);
  color:#a9dbf1;
  background:rgba(229,59,56,.05);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.locationInfo h3{
  margin:18px 0 4px;
  font-size:36px;
  letter-spacing:-.045em;
}
.locationInfo>p{
  margin:0;
  color:#9cacb5;
}
.locationHours{
  margin-top:24px;
  display:grid;
  gap:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.locationHours>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.locationHours span{color:#80919c}
.locationHours strong{font-weight:750}

/* Conversion form clearer on completion */
.bookingForm.formPrepared{
  border-color:rgba(104,240,170,.22);
  box-shadow:0 0 0 3px rgba(104,240,170,.035);
}

@media(max-width:1000px){
  .locationGrid{
    grid-template-columns:1fr;
  }
  .mapCard,.mapCard iframe{
    min-height:390px;
  }
}
@media(max-width:700px){
  .reviewControls{
    display:none;
  }
  .mapCard,.mapCard iframe{
    min-height:320px;
  }
  .locationInfo{
    padding:22px;
  }
  .locationInfo h3{
    font-size:30px;
  }
}


/* =========================================
   RESPONSIVE SERVICE EXPLORER — ONE DESIGN
   Complete self-contained component.
========================================= */
.serviceExplorerSection{
  padding:clamp(66px,7vw,104px) 0 clamp(76px,7vw,112px);
  background:
    radial-gradient(circle at 80% 12%,rgba(229,59,56,.07),transparent 24%),
    linear-gradient(180deg,#05080b,#080d11 48%,#06090d);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.serviceExplorerSection .wrap,
.serviceExplorer,
.serviceExplorerNav,
.serviceExplorerStage,
.serviceExplorerCopy{min-width:0}

.serviceExplorerHead{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.5vw,20px);
  align-items:start;
  margin-bottom:clamp(20px,2.4vw,34px);
}
.serviceExplorerHead .ey{margin-bottom:0}
.serviceExplorerHead h2{
  max-width:980px;
  margin:12px 0 0;
  font-size:clamp(42px,5.2vw,76px);
  line-height:.94;
  letter-spacing:-.058em;
}
.serviceExplorerHead>p{
  max-width:760px;
  margin:0;
  color:#9dabb4;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.65;
}
.serviceSwipeHint{display:none}

/* Same composition on every device: service rail + active visual */
.serviceExplorer{
  display:grid;
  grid-template-columns:clamp(108px,15vw,238px) minmax(0,1fr);
  gap:clamp(8px,1.25vw,18px);
  align-items:stretch;
}
.serviceExplorerNav{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:clamp(6px,.65vw,9px);
  align-content:stretch;
}
.serviceExplorerTab{
  width:100%;
  min-width:0;
  height:100%;
  display:grid;
  grid-template-columns:clamp(27px,2.7vw,42px) minmax(0,1fr);
  gap:clamp(7px,.8vw,12px);
  align-items:center;
  text-align:left;
  padding:clamp(9px,1.05vw,16px);
  border-radius:clamp(13px,1.25vw,18px);
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(17,26,34,.96),rgba(8,14,19,.96));
  color:#f2f6f8;
  cursor:pointer;
  opacity:.66;
  transition:opacity .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.serviceExplorerTab:hover{
  opacity:.92;
  border-color:rgba(255,255,255,.16);
}
.serviceExplorerTab.active{
  opacity:1;
  border-color:rgba(229,59,56,.42);
  background:
    radial-gradient(circle at 0 50%,rgba(229,59,56,.11),transparent 44%),
    linear-gradient(180deg,#101d25,#091219);
  box-shadow:
    inset 3px 0 0 var(--blue),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 18px 36px rgba(0,0,0,.18);
}
.serviceExplorerTab>span{
  width:clamp(27px,2.7vw,42px);
  height:clamp(27px,2.7vw,42px);
  border-radius:clamp(8px,.8vw,11px);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.09);
  background:#ffffff05;
  color:#91a9b6;
  font-size:clamp(8px,.72vw,10px);
  font-weight:900;
  letter-spacing:.12em;
}
.serviceExplorerTab.active>span{
  background:#fff;
  color:#081017;
  border-color:#fff;
}
.serviceExplorerTab strong{
  display:block;
  margin-bottom:clamp(2px,.25vw,4px);
  font-size:clamp(10px,1.02vw,15px);
  line-height:1.12;
}
.serviceExplorerTab small{
  display:block;
  color:#80929d;
  font-size:clamp(7px,.72vw,10px);
  line-height:1.28;
}

/* Main service visual */
.serviceExplorerStage{
  position:relative;
  min-height:clamp(560px,51vw,700px);
  overflow:hidden;
  border-radius:clamp(18px,1.8vw,28px);
  border:1px solid rgba(255,255,255,.095);
  background:#070b0f;
  box-shadow:
    0 34px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.025);
  isolation:isolate;
}
.serviceExplorerMedia{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#05080c;
}
.serviceExplorerPhoto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  filter:saturate(.96) contrast(1.03) brightness(.90);
  transform:scale(1.015);
  transition:opacity .22s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.serviceExplorerPhoto.active{
  opacity:1;
}
@media(hover:hover) and (pointer:fine){
  .serviceExplorerStage:hover .serviceExplorerPhoto.active{transform:scale(1.035)}
}
.serviceExplorerShade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,6,9,.76) 0%,rgba(3,6,9,.34) 43%,rgba(3,6,9,.07) 72%,rgba(3,6,9,.10) 100%),
    linear-gradient(180deg,rgba(3,6,9,.03) 0%,rgba(3,6,9,.04) 46%,rgba(3,6,9,.88) 100%);
}
.serviceExplorerTop{
  position:absolute;
  z-index:5;
  top:clamp(10px,1.35vw,20px);
  left:clamp(10px,1.35vw,20px);
  right:clamp(10px,1.35vw,20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.serviceExplorerMode{
  padding:clamp(7px,.72vw,10px) clamp(9px,.85vw,13px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,9,12,.62);
  backdrop-filter:blur(10px);
  color:#d4e6ee;
  font-size:clamp(7px,.62vw,9px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.serviceExplorerCopy{
  position:absolute;
  z-index:5;
  left:clamp(14px,2vw,34px);
  right:clamp(14px,2vw,34px);
  bottom:clamp(30px,3.2vw,50px);
  max-width:min(720px,88%);
}
.serviceExplorerCopy small{
  display:block;
  margin-bottom:clamp(6px,.65vw,10px);
  color:#e3b4b1;
  font-size:clamp(7px,.72vw,10px);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.serviceExplorerCopy h3{
  max-width:680px;
  margin:0 0 clamp(9px,.9vw,14px);
  font-size:clamp(24px,3.8vw,60px);
  line-height:.93;
  letter-spacing:-.055em;
}
.serviceExplorerCopy p{
  max-width:620px;
  margin:0;
  color:#c3cfd5;
  font-size:clamp(11px,1.03vw,15px);
  line-height:1.55;
}
.serviceExplorerCopy a{
  display:inline-block;
  margin-top:clamp(13px,1.3vw,21px);
  color:#e8f6fc;
  font-size:clamp(11px,.98vw,14px);
  font-weight:850;
}
.serviceExplorerCopy a::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-top:5px;
  background:var(--blue);
  transition:width .25s ease;
}
.serviceExplorerCopy a:hover::after{width:100%}
.serviceExplorerProgress{
  position:absolute;
  z-index:5;
  left:clamp(14px,2vw,34px);
  right:clamp(14px,2vw,34px);
  bottom:clamp(12px,1.25vw,20px);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(4px,.45vw,7px);
}
.serviceExplorerProgress i{
  height:2px;
  border-radius:99px;
  background:rgba(255,255,255,.13);
  transition:background .2s ease,box-shadow .2s ease;
}
.serviceExplorerProgress i.active{
  background:var(--blue);
  box-shadow:0 0 10px rgba(229,59,56,.45);
}


/* Same image crop/focal point on phone/tablet/laptop */
.serviceExplorerPhoto[data-explorer-photo="servicing"]{object-position:67% center}
.serviceExplorerPhoto[data-explorer-photo="brakes"]{object-position:64% center}
.serviceExplorerPhoto[data-explorer-photo="diagnostics"]{object-position:64% center}
.serviceExplorerPhoto[data-explorer-photo="suspension"]{object-position:62% center}
.serviceExplorerPhoto[data-explorer-photo="transmission"]{object-position:64% center}
.serviceExplorerPhoto[data-explorer-photo="tyres"]{object-position:68% center}

/* Laptop */
@media(min-width:1180px){
  .serviceExplorer{
    grid-template-columns:238px minmax(0,1fr);
    gap:18px;
  }
  .serviceExplorerStage{
    min-height:660px;
    max-height:720px;
  }
  .serviceExplorerTab{padding:16px 17px}
  .serviceExplorerTab>span{width:42px;height:42px}
  .serviceExplorerTab strong{font-size:15px}
  .serviceExplorerTab small{font-size:10px}
  .serviceExplorerCopy{left:34px;bottom:50px}
  .serviceExplorerCopy h3{font-size:clamp(50px,4vw,64px)}
}

/* Tablet / smaller laptop */
@media(min-width:701px) and (max-width:1179px){
  .serviceExplorer{
    grid-template-columns:clamp(155px,20vw,210px) minmax(0,1fr);
  }
  .serviceExplorerStage{min-height:clamp(570px,61vw,650px)}
}

/* Phone — same composition, scaled only */
@media(max-width:700px){
  .serviceExplorerSection{padding:66px 0 76px}
  .serviceExplorerHead h2{font-size:clamp(38px,10.4vw,52px)}
  .serviceExplorer{
    grid-template-columns:108px minmax(0,1fr);
    gap:8px;
  }
  .serviceExplorerNav{gap:6px}
  .serviceExplorerTab{
    padding:9px 8px;
    grid-template-columns:27px minmax(0,1fr);
    gap:7px;
    border-radius:13px;
  }
  .serviceExplorerTab>span{
    width:27px;
    height:27px;
    font-size:8px;
  }
  .serviceExplorerTab strong{font-size:10px}
  .serviceExplorerTab small{font-size:7px}
  .serviceExplorerStage{
    min-height:560px;
    border-radius:18px;
  }
  .serviceExplorerPhoto,
  .serviceExplorerStage:hover .serviceExplorerPhoto.active{
    transform:scale(1.015);
  }
  .serviceExplorerStatus{display:none}
  .serviceExplorerTop{
    top:10px;
    left:10px;
    right:10px;
  }
  .serviceExplorerMode{
    padding:7px 9px;
    font-size:7px;
  }
  .serviceExplorerCopy{
    left:14px;
    right:14px;
    bottom:29px;
    max-width:none;
  }
  .serviceExplorerCopy small{
    margin-bottom:6px;
    font-size:7px;
  }
  .serviceExplorerCopy h3{
    margin-bottom:9px;
    font-size:clamp(24px,7.4vw,34px);
  }
  .serviceExplorerCopy p{
    font-size:11px;
    line-height:1.45;
  }
  .serviceExplorerCopy a{
    margin-top:13px;
    font-size:11px;
  }
  .serviceExplorerProgress{
    left:14px;
    right:14px;
    bottom:12px;
    gap:4px;
  }
}
@media(max-width:430px){
  .serviceExplorer{grid-template-columns:102px minmax(0,1fr)}
  .serviceExplorerStage{min-height:545px}
}
@media(max-width:390px){
  .serviceExplorer{grid-template-columns:94px minmax(0,1fr)}
  .serviceExplorerTab{
    padding:8px 6px;
    grid-template-columns:24px minmax(0,1fr);
    gap:5px;
  }
  .serviceExplorerTab>span{width:24px;height:24px}
  .serviceExplorerTab strong{font-size:9px}
  .serviceExplorerTab small{font-size:6.5px}
  .serviceExplorerStage{min-height:520px}
  .serviceExplorerCopy h3{font-size:23px}
}

@media(prefers-reduced-motion:reduce){
  .serviceExplorerPhoto,
  .serviceExplorerTab,
  .serviceExplorerProgress i,
  .serviceExplorerCopy a::after{
    transition:none!important;
  }
}
/* =========================================
   MOVING CUSTOMER REVIEWS
========================================= */
.reviewMarquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:10px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.reviewMarquee::before,
.reviewMarquee::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:54px;
  pointer-events:none;
}
.reviewMarquee::before{
  left:0;
  background:linear-gradient(90deg,#05080b,transparent);
}
.reviewMarquee::after{
  right:0;
  background:linear-gradient(270deg,#05080b,transparent);
}
.reviews.reviewTrack{
  display:flex!important;
  width:max-content!important;
  gap:14px!important;
  overflow:visible!important;
  padding:0!important;
  scroll-snap-type:none!important;
  will-change:transform;
  animation:nextechReviewRail 48s linear infinite;
}
.reviewMarquee:hover .reviewTrack,
.reviewMarquee:focus-within .reviewTrack,
.reviewMarquee.is-paused .reviewTrack{
  animation-play-state:paused;
}
.reviewTrack .review{
  flex:0 0 clamp(300px,30vw,430px)!important;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  scroll-snap-align:none!important;
  opacity:1!important;
  transform:none!important;
  padding:24px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:20px;
  background:
    radial-gradient(circle at 90% 5%,rgba(229,59,56,.055),transparent 28%),
    linear-gradient(180deg,#0f161d,#0a1015);
  box-shadow:0 18px 44px rgba(0,0,0,.15);
}
.reviewTrack .review:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(229,59,56,.22);
  box-shadow:0 24px 52px rgba(0,0,0,.20);
}
.reviewTrack .review p{
  flex:1;
  margin:14px 0 20px;
  color:#d7e0e5;
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.65;
}
.reviewTrack .review strong{
  display:block;
  font-size:14px;
}
.reviewTrack .review>span{
  display:block;
  margin-top:5px;
  color:#71848f;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.reviewTrack .stars{
  letter-spacing:.14em;
}
.reviewMotionNote{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  color:#71838e;
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.reviewMotionDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px rgba(229,59,56,.55);
}
@keyframes nextechReviewRail{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 7px),0,0)}
}

@media(max-width:700px){
  .reviewMarquee{
    margin-inline:calc((100vw - 100%) / -2);
    width:100vw;
    padding-inline:12px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  .reviewMarquee::before,
  .reviewMarquee::after{
    width:22px;
  }
  .reviews.reviewTrack{
    gap:10px!important;
    animation-duration:56s;
  }
  .reviewTrack .review{
    flex-basis:min(82vw,340px)!important;
    min-height:205px;
    padding:20px;
  }
  .reviewMotionNote{
    font-size:8px;
  }
}
@media(prefers-reduced-motion:reduce){
  .reviewMarquee{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .reviews.reviewTrack{
    animation:none!important;
  }
}


/* COPYRIGHT-SAFE TEXT WORDMARK */
.brandWordmark{
  display:grid;
  line-height:.86;
  text-transform:uppercase;
  min-width:150px;
}
.brandWordmark strong{
  color:#e53b38;
  font-size:clamp(24px,2vw,34px);
  letter-spacing:-.055em;
  font-weight:950;
}
.brandWordmark small{
  margin-top:6px;
  color:#aab5bc;
  font-size:8px;
  letter-spacing:.26em;
  font-weight:800;
}
@media(max-width:700px){
  .brandWordmark{min-width:118px}
  .brandWordmark strong{font-size:24px}
  .brandWordmark small{font-size:7px;letter-spacing:.20em}
}




/* =========================================
   CURRENT-SITE COOKIE NOTICE
========================================= */
.cookieNotice{
  position:fixed;
  z-index:3000;
  left:auto;
  right:20px;
  bottom:20px;
  margin:0;
  width:min(390px,calc(100% - 40px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 12px 12px 15px;
  border:1px solid rgba(229,59,56,.20);
  border-radius:15px;
  background:rgba(7,11,15,.95);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.32);
  color:#aab8c1;
  font-size:10.5px;
  line-height:1.45;
}
.cookieNotice[hidden]{display:none!important}
.cookieNotice button{
  flex:0 0 auto;
  min-width:52px;
  min-height:38px;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#081017;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}
@media(max-width:700px){
  .cookieNotice{
    left:10px;
    right:10px;
    bottom:calc(84px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    font-size:10px;
  }
  body:not(.past-hero) .cookieNotice{
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
}


/* =========================================
   BELOW-FOLD RENDER OPTIMISATION
========================================= */
@supports (content-visibility:auto){
  .processSection,
  .whySection,
  #reviews,
  .faqSection,
  .locationSection,
  #contact{
    content-visibility:auto;
    contain-intrinsic-size:900px;
  }
}


/* =========================================
   NEXTECH RED BRAND POLISH
========================================= */
.navlinks a.active::after,
.navlinks a:hover::after{
  background:var(--red);
}
.serviceExplorerStage{
  box-shadow:
    0 34px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 1px rgba(229,59,56,.025);
}
.serviceExplorerTab.active>span{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.serviceExplorerCopy a{
  color:#fff;
}
.reviewMotionDot{
  background:var(--red);
  box-shadow:0 0 12px rgba(229,59,56,.45);
}








/* =========================================
   PREMIUM SCROLL-DRIVEN SERVICES
   Same clean selector, shorter sticky sequence.
========================================= */
.serviceExplorerScroll{
  position:relative;
  height:330vh;
  min-height:2500px;
}
.serviceExplorerSticky{
  position:sticky;
  top:130px;
}
.serviceExplorerSticky .serviceExplorer{
  width:100%;
}
.serviceExplorerSticky .serviceExplorerStage{
  height:min(700px,calc(100vh - 154px));
  min-height:560px;
  max-height:700px;
}
.serviceExplorerPhoto{
  will-change:opacity,transform;
}
.serviceExplorerPhoto.active{
  transform:translate3d(0,calc(var(--service-depth,0) * 1px),0) scale(1.02);
}
.serviceExplorer.scene-enter .serviceExplorerCopy{
  animation:premiumServiceCopy .38s cubic-bezier(.2,.8,.2,1) both;
}
.serviceExplorer.scene-enter .serviceExplorerMode{
  animation:premiumServiceMode .32s ease both;
}
@keyframes premiumServiceCopy{
  from{opacity:.18;transform:translateY(13px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes premiumServiceMode{
  from{opacity:.28;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
.serviceExplorerProgress i{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.13);
  box-shadow:none;
}
.serviceExplorerProgress i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--red);
  box-shadow:0 0 10px rgba(229,59,56,.42);
  transform:scaleX(var(--service-fill,0));
  transform-origin:left center;
  transition:transform .08s linear;
}
.serviceExplorerProgress i.active{
  background:rgba(255,255,255,.13);
  box-shadow:none;
}
.serviceExplorerProgress i.complete::after{
  transform:scaleX(1);
}
.serviceExplorerTab.active{
  transform:translateX(3px);
}
@media(hover:hover) and (pointer:fine){
  .serviceExplorerSticky .serviceExplorerStage:hover .serviceExplorerPhoto.active{
    transform:translate3d(0,calc(var(--service-depth,0) * 1px),0) scale(1.032);
  }
}
@media(max-width:1179px){
  .serviceExplorerScroll{
    height:350vh;
    min-height:2400px;
  }
  .serviceExplorerSticky{top:118px}
  .serviceExplorerSticky .serviceExplorerStage{
    height:min(640px,calc(100vh - 140px));
    min-height:540px;
  }
}
@media(max-width:700px){
  .serviceExplorerScroll{
    height:390vh;
    min-height:2550px;
  }
  .serviceExplorerSticky{top:108px}
  .serviceExplorerSticky .serviceExplorerStage{
    height:min(570px,calc(100vh - 122px));
    min-height:500px;
  }
  .serviceExplorerTab.active{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .serviceExplorerScroll{height:auto;min-height:0}
  .serviceExplorerSticky{position:relative;top:auto}
  .serviceExplorerSticky .serviceExplorerStage{height:auto}
  .serviceExplorerPhoto.active{transform:scale(1.015)!important}
  .serviceExplorer.scene-enter .serviceExplorerCopy,
  .serviceExplorer.scene-enter .serviceExplorerMode{animation:none!important}
}




/* Nextech header logo: give the full supplied image room to read. */
@media(min-width:1025px){
  .navin{height:96px;grid-template-columns:310px minmax(0,1fr) auto}
  .nav .brand{width:310px;height:96px;overflow:visible}
  .nav .brandLogo,.nav.is-scrolled .brandLogo{
    display:block;width:310px;height:96px;max-width:none;max-height:none;
    object-fit:contain;object-position:left center;
  }
  .stage{top:134px;height:calc(100vh - 134px)}
}
@media(min-width:701px) and (max-width:1024px){
  .nav .brand{width:220px;height:70px;overflow:visible}
  .nav .brandLogo,.nav.is-scrolled .brandLogo{
    width:220px;height:70px;max-height:none;object-fit:contain;object-position:left center;
  }
}
@media(max-width:700px){
  .nav .brand{width:170px;height:60px;overflow:visible}
  .nav .brandLogo,.nav.is-scrolled .brandLogo{
    width:170px;height:60px;max-width:100%;max-height:none;
    object-fit:contain;object-position:left center;
  }
}

/* Editorial spacing for the service introduction. */
@media(min-width:1180px){
  .serviceExplorerHead{
    grid-template-columns:minmax(0,1fr) minmax(260px,370px);
    align-items:end;
    gap:clamp(28px,5vw,88px);
    padding-bottom:clamp(28px,3vw,44px);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .serviceExplorerHead>p{
    max-width:370px;
    padding-left:20px;
    border-left:2px solid var(--red);
  }
}

/* Phone service explorer: readable tabs and one full-width scene. */
@media(max-width:700px){
  .serviceExplorerScroll{height:auto;min-height:0}
  .serviceExplorerSticky{position:relative;top:auto}
  .serviceExplorer{display:flex;flex-direction:column;gap:12px}
  .serviceSwipeHint{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin:-4px 0 -7px;
    color:#b9c7ce;
    font-size:10px;
    font-weight:750;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .serviceSwipeHint svg{width:17px;height:17px;color:var(--red)}
  .serviceExplorerNav{
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 8px;
    -webkit-overflow-scrolling:touch;
  }
  .serviceExplorerNav::-webkit-scrollbar{display:none}
  .serviceExplorerTab{
    flex:0 0 auto;width:auto;min-width:135px;height:58px;
    display:flex;align-items:center;gap:9px;padding:9px 12px;
    scroll-snap-align:start;opacity:.82;border-radius:13px;
  }
  .serviceExplorerTab>span{flex:0 0 30px;width:30px;height:30px;font-size:9px}
  .serviceExplorerTab strong{margin:0;font-size:13px;line-height:1.2}
  .serviceExplorerTab small{display:none}
  .serviceExplorerTab.active{opacity:1;box-shadow:inset 0 -3px 0 var(--red)}
  .serviceExplorerSticky .serviceExplorerStage{
    width:100%;height:clamp(490px,128vw,610px);min-height:0;max-height:none;
    border-radius:18px;
  }
  .serviceExplorerCopy{left:20px;right:20px;bottom:34px}
  .serviceExplorerCopy small{font-size:9px}
  .serviceExplorerCopy h3{font-size:clamp(30px,8.5vw,44px);line-height:1.02}
  .serviceExplorerCopy p{font-size:13px;line-height:1.5}
  .serviceExplorerCopy a{font-size:13px}
  .serviceExplorerProgress{left:20px;right:20px}
}

/* Consistent outline icons in the utility bar and workshop benefits. */
.utilityIcon svg{display:block;width:16px;height:16px}
.whyReasonIcon svg{display:block;width:25px;height:25px}
@media(max-width:700px){.whyReasonIcon svg{width:22px;height:22px}}

/* Centre and enlarge the supplied logo on phones. Keep menu controls at the right. */
@media(max-width:700px){
  .navin{position:relative}
  .nav .brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:clamp(190px,56vw,230px);
    height:70px;
    justify-content:center;
  }
  .nav .brandLogo,.nav.is-scrolled .brandLogo{
    width:100%;
    height:70px;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .navcta{grid-column:2;position:relative;z-index:1}
}