/* =========================================================
   0. TOKENS
========================================================= */
:root{
  --black: #050505;
  --carbon: #0B0B0B;
  --graphite: #151515;
  --graphite-2: #1c1c1c;
  --white: #FFFFFF;
  --soft: #E8E8E8;
  --mute: #8a8a8a;
  --red: #DF0C15;
  --red-deep: #A5080F;
  --line: rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.05);

  --f-display: 'Archivo', 'Inter', sans-serif;
  --f-body: 'Inter', sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --container: 1320px;
  --nav-h: 84px;
}

/* =========================================================
   1. RESET
========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--soft);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background: var(--red); color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px){ .container{ padding: 0 24px; } }

/* =========================================================
   2. TYPOGRAPHY UTILITIES
========================================================= */
.eyebrow{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mute);
  display:flex;
  align-items:center;
  gap: 12px;
}
.eyebrow::before{
  content:'';
  width: 22px;
  height: 1px;
  background: var(--red);
  display:inline-block;
}
.h-display{
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--white);
}
.h-xl{ font-size: clamp(1.8rem, 4.4vw, 4rem); }
.h-lg{ font-size: clamp(2.2rem, 5vw, 4.4rem); }
.h-md{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
.body-lg{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--soft); font-weight: 400; line-height:1.6; }
.mono-num{
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--red);
}

/* =========================================================
   3. REVEAL / MOTION UTILITIES
========================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  filter: blur(4px);
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal-delay="4"]{ transition-delay: .32s; }

/* =========================================================
   4. SCROLL PROGRESS
========================================================= */
.scroll-progress{
  position: fixed;
  top:0; left:0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 900;
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red));
  transition: width .08s linear;
}

/* =========================================================
   5. CURSOR (desktop only)
========================================================= */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events: none;
  z-index: 950;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width: 5px; height:5px;
  background: var(--red);
}
.cursor-ring{
  width: 34px; height:34px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s var(--ease-soft), background .25s var(--ease-soft);
}
.cursor-ring.hover{
  width: 60px; height: 60px;
  border-color: var(--red);
  background: rgba(223,12,21,.08);
}
.cursor-ring.click{ transition: width .15s var(--ease-soft), height .15s var(--ease-soft), border-color .15s var(--ease-soft); }
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button{ cursor:none; }
@media (max-width: 900px), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none !important; }
}

/* =========================================================
   5b. PAGE TRANSITIONS
========================================================= */
body{ transition: opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1); }
body.pt-out{ opacity:0; transform: translateY(-8px); transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce){
  body, body.pt-out{ transition:none; transform:none; opacity:1; }
}

/* =========================================================
   6. NAVIGATION
========================================================= */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 800;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease-soft), border-color .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft), height .4s var(--ease-soft);
}
.nav.scrolled{
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  height: 72px;
}
.nav-inner{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width:900px){ .nav-inner{ padding:0 24px; } }

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand img{ height: 34px; width:auto; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
}
.nav-links a{
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--soft);
  padding: 6px 0;
  transition: color .3s var(--ease-soft);
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--red);
  transition: width .35s var(--ease-soft);
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:hover::after{ width:100%; }

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 11px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
  white-space: nowrap;
}
.nav-cta:hover{ border-color: var(--red); background: rgba(223,12,21,.08); }

.nav-toggle{
  display:none;
  width: 40px; height: 40px;
  border:1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  position:absolute;
  height: 1px;
  background: var(--white);
  transition: transform .3s var(--ease-soft), opacity .3s var(--ease-soft), top .3s var(--ease-soft), background .3s var(--ease-soft);
}
.nav-toggle span{ left: 10px; right:10px; top: 19px; }
.nav-toggle span::before{ left:0; right:0; top: -7px; }
.nav-toggle span::after{ left:0; right:0; top: 7px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top:0; transform: rotate(45deg); background: var(--red); }
.nav-toggle.open span::after{ top:0; transform: rotate(-45deg); background: var(--red); }

@media (max-width: 900px){
  .nav-links, .nav-cta.desktop-only{ display:none; }
  .nav-toggle{ display:block; }
}

.mobile-menu{
  position: fixed;
  inset:0;
  z-index: 780;
  background: var(--black);
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
  visibility: hidden;
}
.mobile-menu.open{ transform: translateY(0); visibility: visible; }
.mobile-menu a{
  display:block;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 9vw;
  line-height: 1.25;
  color: var(--white);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}
.mobile-menu a span{ color: var(--red); font-size: 14px; margin-right: 10px; vertical-align: middle; }
.mobile-menu .mm-cta{
  margin-top: 28px;
  display:inline-block;
  padding: 16px 28px;
  background: var(--red);
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 2px;
  border:none;
}

/* =========================================================
   7. HERO
========================================================= */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  display:flex;
  align-items: flex-end;
  background: var(--black);
  padding-top: var(--nav-h); /* guarantees hero content can never render under the fixed navbar */
}
.hero-media{
  position:absolute;
  inset:0;
  z-index: 1;
}
.hero-media video, .hero-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: 55% 40%;
  transform: scale(1.06);
}
.hero-media::after{ /* cinematic vignette + gradient for legibility */
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.12) 30%, rgba(5,5,5,.35) 62%, rgba(5,5,5,.94) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(5,5,5,.55), transparent 60%),
    radial-gradient(80% 60% at 85% 10%, rgba(5,5,5,.35), transparent 60%);
}
.hero-veil{
  position:absolute; inset:0;
  background: var(--black);
  z-index: 2;
  transform-origin: bottom;
  animation: veilLift 1.5s var(--ease) .1s forwards;
}
@keyframes veilLift{ to{ opacity: 0; visibility:hidden; } }

.hero-content{
  position: relative;
  z-index: 3;
  width:100%;
  padding: 0 40px 88px;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width:900px){ .hero-content{ padding: 0 24px 132px; } }
@media (max-width:900px) and (max-height:700px){
  /* short-viewport phones (e.g. iPhone SE): tighten spacing so hero content
     never crowds the fixed navbar */
  .hero-content{ padding-bottom: 76px; }
  .hero .h-xl{ font-size: clamp(1.3rem, 4vw, 3.2rem); }
  .hero-sub{ margin-top: 14px; }
  .hero-actions{ margin-top: 20px; gap: 12px; }
}

.hero-eyebrow{ opacity:0; transform: translateY(16px); animation: heroIn .9s var(--ease) .9s forwards; margin-bottom: 22px; }
.hero-title{ overflow:hidden; }
.hero-title .line{
  display:block;
  overflow:hidden;
}
.hero-title .line span{
  display:block;
  opacity:0;
  transform: translateY(110%);
  filter: blur(6px);
  animation: heroLine 1.1s var(--ease) forwards;
}
.hero-title .line:nth-child(1) span{ animation-delay: 1.05s; }
.hero-title .line:nth-child(2) span{ animation-delay: 1.22s; }
@keyframes heroLine{ to{ opacity:1; transform: translateY(0); filter: blur(0); } }

.hero-sub{
  max-width: 560px;
  margin-top: 26px;
  opacity:0; transform: translateY(16px);
  animation: heroIn .9s var(--ease) 1.55s forwards;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap: 18px;
  margin-top: 40px;
  flex-wrap: wrap;
  opacity:0; transform: translateY(16px);
  animation: heroIn .9s var(--ease) 1.75s forwards;
}
@keyframes heroIn{ to{ opacity:1; transform: translateY(0); } }

.btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 17px 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  isolation: isolate;
  overflow:hidden;
}
.btn-primary{
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  transition: background .35s var(--ease-soft), transform .3s var(--ease-soft);
}
.btn-primary:hover{ background: var(--red-deep); }
.btn-ghost{
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  transition: border-color .35s var(--ease-soft), color .35s var(--ease-soft), background .35s var(--ease-soft);
}
.btn-ghost:hover{ border-color: var(--white); background: rgba(255,255,255,.06); }
.btn svg{ width:14px; height:14px; transition: transform .35s var(--ease-soft); }
.btn:hover svg{ transform: translateX(3px); }

.hero-scrollcue{
  position:absolute;
  right: 40px;
  bottom: 34px;
  z-index: 4;
  display:flex;
  align-items:center;
  gap: 10px;
  opacity:0;
  animation: heroIn 1s var(--ease) 2.1s forwards;
}
@media (max-width:900px){ .hero-scrollcue{ right:24px; bottom: 96px; } }
.hero-scrollcue .txt{
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  writing-mode: vertical-rl;
}
.scroll-line{
  width:1px; height: 46px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow:hidden;
}
.scroll-line::after{
  content:'';
  position:absolute;
  top:-100%; left:0; right:0; height: 50%;
  background: var(--red);
  animation: scrollDrip 2.1s ease-in-out infinite;
}
@keyframes scrollDrip{
  0%{ top:-50%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

/* =========================================================
   8. SECTION SHELL
========================================================= */
section{ position: relative; }
.sec{ padding: 140px 0; }
.sec-tight{ padding: 100px 0; }
@media (max-width: 900px){
  .sec{ padding: 96px 0; }
  .sec-tight{ padding: 72px 0; }
}
.sec-carbon{ background: var(--carbon); }
.sec-black{ background: var(--black); }
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* =========================================================
   9. TRUST / INTRO SECTION
========================================================= */
.trust-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 900px){ .trust-grid{ grid-template-columns: 1fr; gap: 48px; } }

.trust-copy p{ margin-top: 26px; max-width: 520px; }

.rating-panel{
  border-left: 1px solid var(--line);
  padding-left: 36px;
}
@media (max-width:900px){ .rating-panel{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:28px; } }
.rating-stars{ display:flex; gap:6px; margin-bottom: 14px; }
.rating-stars svg{ width:18px; height:18px; fill: var(--red); }
.rating-num{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 3.6rem;
  color: var(--white);
  line-height: 1;
}
.rating-sub{
  margin-top: 10px;
  font-size: 14px;
  color: var(--mute);
  letter-spacing: .02em;
}
.rating-line{
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

/* =========================================================
   10. SERVICES
========================================================= */
.services-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 60px;
}
.services-head p{ max-width: 380px; padding-bottom: 6px; }
@media (max-width:900px){ .services-head{ flex-direction: column; align-items:flex-start; gap:20px; } }

.service-row{
  display:flex;
  align-items:center;
  gap: 32px;
  padding: 30px 6px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .5s var(--ease-soft), padding .5s var(--ease-soft);
  position: relative;
}
.services-list .service-row:last-child{ border-bottom: 1px solid var(--line); }
.service-row .num{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--mute);
  width: 46px;
  flex-shrink:0;
  transition: color .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.service-row .title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  text-transform: uppercase;
  color: var(--soft);
  transition: color .4s var(--ease-soft), transform .45s var(--ease-soft);
  flex: 1;
}
.service-row .desc{
  max-width: 320px;
  font-size: 13.5px;
  color: var(--mute);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
  display:none;
}
@media (min-width: 901px){ .service-row .desc{ display:block; } }
.service-row .arrow{
  width: 44px; height:44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: border-color .4s var(--ease-soft), background .4s var(--ease-soft), transform .5s var(--ease);
}
.service-row .arrow svg{ width:16px; height:16px; stroke: var(--soft); transition: stroke .4s var(--ease-soft); }

.service-row:hover{ background: rgba(255,255,255,.02); padding-left: 20px; padding-right: 20px; }
.service-row:hover .num{ color: var(--red); transform: translateX(2px); }
.service-row:hover .title{ color: var(--white); transform: translateX(6px); }
.service-row:hover .desc{ opacity:1; transform: translateY(0); }
.service-row:hover .arrow{ border-color: var(--red); background: var(--red); transform: rotate(45deg); }
.service-row:hover .arrow svg{ stroke: #fff; }

/* =========================================================
   11. PROCESS
========================================================= */
.process-head{ margin-bottom: 100px; }
.process-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 860px){ .process-list{ grid-template-columns: 1fr; gap: 60px; } }

.process-item{
  padding: 0 36px 0 0;
  position: relative;
}
.process-item:not(:last-child){ border-right: 1px solid var(--line); }
@media (max-width: 860px){
  .process-item{ padding: 0; border-right:none !important; }
}
.process-num{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 3rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  margin-bottom: 26px;
  transition: -webkit-text-stroke .5s var(--ease-soft), color .5s var(--ease-soft);
}
.process-item.in-view .process-num{ -webkit-text-stroke: 1px var(--red); }
.process-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.process-desc{ color: var(--mute); font-size: 14.5px; max-width: 260px; }
.process-track{
  height: 2px;
  background: var(--line);
  margin-top: 30px;
  position: relative;
  overflow:hidden;
}
.process-track::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width: 0%;
  background: var(--red);
  transition: width 1.2s var(--ease);
}
.process-item.in-view .process-track::after{ width: 100%; }

/* =========================================================
   12. VISUAL FEATURE (video band)
========================================================= */
.feature-band{
  position: relative;
  height: 78vh;
  min-height: 460px;
  overflow:hidden;
}
.feature-band video, .feature-band img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: 30% 50%;
  filter: grayscale(.15);
  transform: scale(1.02);
}
.feature-band::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.55) 42%, rgba(5,5,5,.15) 70%, rgba(5,5,5,.55) 100%);
  z-index:1;
}
.feature-content{
  position: relative;
  z-index: 2;
  height:100%;
  display:flex;
  align-items:center;
}
.feature-content .inner{ max-width: 560px; }
.feature-content p{ margin-top: 22px; max-width: 420px; }

/* =========================================================
   13. WHY US
========================================================= */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 60px;
}
@media (max-width: 860px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

.why-item{
  background: var(--carbon);
  padding: 44px 34px;
  transition: background .5s var(--ease-soft);
}
.why-item:hover{ background: var(--graphite); }
.why-mark{
  display: block;
  width: 30px; height: 26px;
  margin-bottom: 26px;
}
.why-mark svg{ display:block; width:100%; height:100%; }
.why-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: .01em;
}
.why-desc{ font-size: 13.5px; color: var(--mute); line-height:1.6; }

/* =========================================================
   13B. BUSINESS GROUP (Matruchhaya Motors / Automobile)
========================================================= */
.group-intro{ max-width: 720px; margin: 0 0 44px; color: var(--soft); font-size: 1.02rem; line-height: 1.7; }
.group-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 720px){ .group-grid{ grid-template-columns: 1fr; } }
.group-card{
  background: var(--carbon);
  padding: 40px 34px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.group-card .group-name{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: .01em;
  margin-bottom: 14px;
}
.group-card .group-label{ font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: var(--mute); margin-top: 8px; }
.group-card .group-value{ font-size: 15px; color: var(--soft); }
.group-card .group-actions{ margin-top: 22px; }
.group-card .btn{ width:100%; justify-content:center; }
.group-foot{ margin-top: 26px; font-size: 13px; color: var(--mute); }

/* =========================================================
   14. REVIEWS
========================================================= */
.reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
  flex-wrap: wrap;
}
.reviews-score{
  display:flex;
  align-items:baseline;
  gap:14px;
}
.reviews-score .num{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--white);
}
.reviews-score .of{ color: var(--mute); font-size: 14px; }
.review-rail{
  display:flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 20px;
  margin: 0 -40px;
  padding-left: 40px;
  padding-right: 40px;
  scrollbar-width: none;
  cursor: grab;
}
.review-rail.dragging{ cursor: grabbing; scroll-snap-type: none; }
.review-rail::-webkit-scrollbar{ display:none; }
@media (max-width:900px){ .review-rail{ margin:0 -24px; padding-left:24px; padding-right:24px; } }

.review-card{
  flex: 0 0 auto;
  width: min(400px, 82vw);
  background: var(--graphite);
  border: 1px solid var(--line);
  padding: 34px 30px;
  scroll-snap-align: start;
}
.review-card .quote-mark{ color: var(--red); font-family: var(--f-display); font-size: 2.4rem; font-weight: 900; line-height: .6; display:block; margin-bottom: 14px; }
.review-card p{ font-size: 15px; color: var(--soft); line-height: 1.65; min-height: 96px; }
.review-card .stars{ display:flex; gap:4px; margin-top: 22px; }
.review-card .stars svg{ width:13px; height:13px; fill: var(--red); }
.review-card .name{ margin-top: 14px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.rail-controls{
  display:flex;
  gap: 12px;
  margin-top: 30px;
}
.rail-btn{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background: transparent;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.rail-btn:hover{ border-color: var(--red); background: rgba(223,12,21,.08); }
.rail-btn svg{ width:16px; height:16px; stroke: var(--white); }

/* =========================================================
   15. LOCATION
========================================================= */
.loc-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
@media (max-width: 900px){ .loc-grid{ grid-template-columns: 1fr; gap:48px; } }
.loc-block + .loc-block{ margin-top: 40px; }
.loc-label{ font-size: 11.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--mute); margin-bottom: 12px; }
.loc-value{ font-size: 17px; color: var(--white); line-height: 1.6; }
.loc-actions{ display:flex; gap:16px; margin-top: 36px; flex-wrap: wrap; }
.loc-owner{ font-size: 13px; letter-spacing:.06em; text-transform:uppercase; color: var(--mute); margin-bottom: 22px; }
.loc-owner span{ color: var(--soft); }

.map-frame{
  position: relative;
  border: 1px solid var(--line);
  aspect-ratio: 4/3.4;
  overflow:hidden;
  background: var(--graphite);
}
.map-frame iframe{
  width:100%; height:100%; border:0; display:block;
  filter: grayscale(.25) contrast(1.05) brightness(.88);
}
.map-caption{
  position:absolute; left:20px; bottom:20px;
  font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute);
  background: rgba(11,11,11,.7);
  padding: 6px 10px;
  pointer-events:none;
}

/* =========================================================
   16. FINAL CTA
========================================================= */
.final-cta{
  padding: 160px 0 150px;
  text-align:center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(223,12,21,.09), transparent 60%),
    var(--black);
  border-top: 1px solid var(--line);
}
@media (max-width:900px){ .final-cta{ padding: 100px 0 96px; } }
.final-cta h2{ max-width: 900px; margin: 0 auto; }
.final-actions{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin-top: 46px;
  flex-wrap: wrap;
}

/* =========================================================
   17. FOOTER
========================================================= */
.footer{
  padding: 56px 0 130px;
  background: var(--carbon);
  border-top: 1px solid var(--line);
}
@media (min-width:901px){ .footer{ padding-bottom: 56px; } }
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height: 40px; }
.footer-brand .fb-text{ font-family: var(--f-display); font-weight:800; letter-spacing:.05em; color:var(--white); font-size:15px; text-transform:uppercase; }
.footer-brand .fb-sub{ font-size:12px; color:var(--mute); margin-top:4px; letter-spacing:.05em; }
.footer-links{ display:flex; gap: 34px; flex-wrap:wrap; }
.footer-links a{ font-size: 13px; color: var(--soft); transition: color .3s; }
.footer-links a:hover{ color: var(--red); }
.footer-contact{ text-align:right; }
@media (max-width: 700px){ .footer-contact{ text-align:left; } }
.footer-contact a{ display:block; font-size: 13.5px; color: var(--soft); margin-bottom:6px; }
.footer-contact a:hover{ color: var(--red); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 14px;
  padding-top: 26px;
  font-size: 12px;
  color: var(--mute);
}
.footer-rating{ display:flex; align-items:center; gap:8px; }
.footer-rating svg{ width:12px; height:12px; fill: var(--red); }

/* =========================================================
   18. MOBILE BOTTOM BAR
========================================================= */
.mobile-bar{
  display:none;
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 700;
  background: rgba(11,11,11,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
@media (max-width: 900px){ .mobile-bar{ display:flex; gap:10px; } }
.mobile-bar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 5px;
  padding: 8px 4px;
  font-size: 10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--soft);
  border-radius: 2px;
}
.mobile-bar a svg{ width:18px; height:18px; stroke: var(--soft); }
.mobile-bar a.primary{ background: var(--red); color:#fff; }
.mobile-bar a.primary svg{ stroke:#fff; }

/* =========================================================
   18b. WHATSAPP — nav icon, floating button, inline CTAs
========================================================= */
.nav-wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft), transform .3s var(--ease-soft);
  flex-shrink:0;
}
.nav-wa svg{ width:18px; height:18px; stroke:#25D366; }
.nav-wa:hover{ border-color:#25D366; background: rgba(37,211,102,.1); }
@media (max-width:900px){ .nav-wa{ display:none; } }

.wa-float{
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 750;
  width: 58px; height: 58px;
  border-radius: 50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
.wa-float:hover{ transform: scale(1.08); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
@media (max-width:900px){ .wa-float{ right:18px; bottom: 88px; width:52px; height:52px; } .wa-float svg{ width:25px; height:25px; } }

.btn-whatsapp{
  border-color: rgba(37,211,102,.4) !important;
}
.btn-whatsapp:hover{ border-color:#25D366 !important; background: rgba(37,211,102,.1) !important; }
.btn-whatsapp svg{ stroke:#25D366; }

.services-wa{
  margin-top: 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.services-wa p{ color: var(--soft); font-size:14.5px; margin:0; }
@media (max-width:600px){ .services-wa{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   19. MISC
========================================================= */
.tag-line{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.tag-line svg{ width:12px; height:12px; fill: var(--red); }

/* =========================================================
   20. BOOKING FORM
========================================================= */
.book-wrap{ max-width: 860px; }
.book-card{
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 52px;
}
@media (max-width: 760px){ .book-card{ padding: 30px 20px; } }

/* stepper */
.book-stepper{ position:relative; margin-bottom: 48px; }
.book-stepper-track{
  position:absolute; top:17px; left:18px; right:18px; height:2px;
  background: var(--line); z-index:0;
}
.book-stepper-fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background: var(--red); transition: width .5s var(--ease-soft);
}
.book-stepper-items{ position:relative; z-index:1; display:flex; justify-content:space-between; }
.book-step-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.book-step-item .num-circle{
  width:36px; height:36px; border-radius:50%;
  background: var(--carbon); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; font-size:13px; color: var(--mute);
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), color .4s var(--ease-soft);
}
.book-step-item .label{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--mute);
  transition: color .4s var(--ease-soft);
}
.book-step-item.active .num-circle{ border-color: var(--red); background: var(--red); color:#fff; }
.book-step-item.active .label{ color: var(--white); }
.book-step-item.done .num-circle{ border-color: var(--red); background:transparent; color: var(--red); }
@media (max-width:560px){ .book-step-item .label{ display:none; } .book-step-item.active .label{ display:block; position:absolute; top:44px; white-space:nowrap; } }

/* panels */
.book-panel{ display:none; }
.book-panel.active{ display:block; animation: bookIn .5s var(--ease) forwards; }
@keyframes bookIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
@media (max-width:640px){ .book-grid{ grid-template-columns:1fr; } }
.book-field{ display:flex; flex-direction:column; gap:8px; }
.book-field.full{ grid-column: 1 / -1; }
.book-field label{ font-size:12.5px; font-weight:600; letter-spacing:.03em; color: var(--soft); }
.book-field label .req{ color: var(--red); margin-left:3px; }

.book-field input, .book-field select, .book-field textarea{
  background: var(--carbon);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--f-body);
  font-size:15px;
  padding:14px 16px;
  border-radius:2px;
  width:100%;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.book-field input::placeholder, .book-field textarea::placeholder{ color: var(--mute); }
.book-field input:focus, .book-field select:focus, .book-field textarea:focus{
  outline:none; border-color: var(--red); background: rgba(223,12,21,.05);
}
.book-field textarea{ resize:vertical; min-height:92px; font-family:var(--f-body); }
.book-field select{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:40px;
  cursor:pointer;
}
.book-field input[type="date"], .book-field input[type="time"]{ color-scheme: dark; cursor:pointer; }

.book-field.error input, .book-field.error select, .book-field.error textarea{
  border-color: var(--red); background: rgba(223,12,21,.07);
  animation: bookShake .35s;
}
@keyframes bookShake{
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-3px); } 40%,60%{ transform:translateX(3px); }
}
.book-error-msg{ font-size:12px; color: var(--red); display:none; }
.book-field.error .book-error-msg{ display:block; }

/* fuel type pills */
.book-pill-group{ display:flex; flex-wrap:wrap; gap:10px; }
.book-pill{ position:relative; display:inline-flex; }
.book-pill input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.book-pill span{
  display:inline-flex; align-items:center; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px;
  font-size:13px; color: var(--soft);
  transition: all .3s var(--ease-soft);
}
.book-pill input:checked + span{ border-color: var(--red); background: var(--red); color:#fff; }
.book-pill input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }

/* searchable vehicle combobox */
.combo{ position:relative; }
.combo-input{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  background: var(--carbon);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--f-body);
  font-size:15px;
  padding:14px 16px;
  border-radius:2px;
  text-align:left;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.combo-input:focus-visible{ outline:none; border-color: var(--red); background: rgba(223,12,21,.05); }
.combo-input.open{ border-color: var(--red); }
.combo-value{ color: var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-value.has-value{ color: var(--white); }
.combo-input-icons{ display:flex; align-items:center; gap:8px; flex:none; }
.combo-clear{
  display:none; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; color: var(--mute); flex:none;
  transition: color .2s var(--ease-soft), background .2s var(--ease-soft);
}
.combo-clear:hover{ color:#fff; background: rgba(255,255,255,.08); }
.combo-value.has-value ~ .combo-input-icons .combo-clear{ display:inline-flex; }
.combo-chevron{ width:16px; height:16px; flex:none; stroke: var(--mute); transition: transform .3s var(--ease-soft); }
.combo-input.open .combo-chevron{ transform: rotate(180deg); }
.combo-input:disabled{ opacity:.5; cursor:not-allowed; }

.combo-panel{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  background: var(--graphite-2);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  overflow:hidden;
  opacity:0; transform: translateY(-6px) scaleY(.98); transform-origin: top;
  pointer-events:none;
  transition: opacity .2s var(--ease-soft), transform .2s var(--ease-soft);
}
.combo-panel.open{ opacity:1; transform: translateY(0) scaleY(1); pointer-events:auto; }
.combo-search-wrap{ padding:10px; border-bottom:1px solid var(--line); }
.combo-search{
  width:100%; background: var(--carbon); border:1px solid var(--line); color:#fff;
  font-family: var(--f-body); font-size:14px; padding:10px 12px; border-radius:2px;
}
.combo-search:focus{ outline:none; border-color: var(--red); }
.combo-list{ max-height:220px; overflow-y:auto; overflow-x:hidden; padding:6px; }
.combo-option{
  padding:10px 12px; font-size:14.5px; color: var(--soft); border-radius:2px; cursor:pointer;
  transition: background .15s var(--ease-soft), color .15s var(--ease-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-option:hover, .combo-option.active{ background: rgba(223,12,21,.12); color:#fff; }
.combo-option.selected{ color: var(--red); }
.combo-option.other-option{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px; color: var(--mute); }
.combo-empty{ padding:14px 12px; font-size:13.5px; color: var(--mute); text-align:center; }
.combo-other-input{ display:none; margin-top:10px; }
.combo-other-input.show{ display:block; }
.combo-hint{ font-size:11.5px; color: var(--mute); margin-top:6px; }
@media (max-width: 640px){ .combo-list{ max-height:180px; } }

.book-actions{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:36px; }
.book-actions .spacer{ flex:1; }
.book-actions .btn{ padding:15px 26px; }
@media (max-width:480px){ .book-actions{ flex-direction:column-reverse; } .book-actions .btn{ width:100%; justify-content:center; } }

.book-form-error{
  display:none; margin-top:18px; padding:12px 16px;
  border:1px solid var(--red); background: rgba(223,12,21,.08);
  color:#fff; font-size:13px; border-radius:2px; text-align:center;
}
.book-form-error.active{ display:block; }

.book-reassure{
  margin-top:16px; text-align:center; font-size:12.5px;
  color: var(--mute); max-width:420px; margin-left:auto; margin-right:auto;
}

/* confirm summary */
.book-summary{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
@media (max-width:640px){ .book-summary{ grid-template-columns:1fr; } }
.book-summary-item{ padding:16px 18px; background: var(--carbon); border:1px solid var(--line); border-radius:2px; }
.book-summary-item .k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute); margin-bottom:6px; }
.book-summary-item .v{ font-size:14.5px; color: var(--white); font-weight:600; word-break:break-word; }

/* success state */
.book-success{ display:none; text-align:center; padding:12px 0 4px; }
.book-success.active{ display:block; animation: bookIn .6s var(--ease) forwards; }
.book-success-icon{
  width:64px; height:64px; border-radius:50%;
  background: rgba(223,12,21,.12); border:1px solid var(--red);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
}
.book-success-icon svg{ width:26px; height:26px; stroke: var(--red); }
.book-success h3{
  font-family: var(--f-display); font-weight:900; text-transform:uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--white); margin-bottom:14px;
}
.book-success p.lead{ color: var(--soft); max-width:460px; margin:0 auto 34px; line-height:1.6; }
.book-success .book-summary{ text-align:left; margin-bottom:34px; }
.book-success-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }



/* =========================================================
   SEO CONTENT / FAQ
========================================================= */
.seo-intro-section{ padding-top: 96px; padding-bottom: 96px; }
.seo-intro{ max-width: 880px; }
.seo-intro .body-lg{ margin-top: 24px; max-width: 820px; }

.seo-section{ padding-top: 110px; padding-bottom: 110px; }
.seo-section-head{ max-width: 900px; }
.seo-section-head h2{ margin-top: 22px; }
.seo-section-head .body-lg{ margin-top: 24px; max-width: 760px; }
.seo-cta{ margin-top: 30px; }

.seo-urgency-copy{ margin-top: 34px; max-width: 1040px; }
.problem-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}
.problem-card{
  background: var(--carbon);
  padding: 28px 24px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 130px;
  font-size: 14px;
  color: var(--mute);
}
.problem-label{
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
}
.seo-closing{ margin-top: 30px; color: var(--soft); font-size: 15px; max-width: 700px; }
.seo-trust-copy{ margin-top: 26px; max-width: 760px; }
.seo-trust-close{ margin-top: 18px; color: var(--soft); max-width: 760px; }

.faq-section{ padding-top: 120px; padding-bottom: 120px; }
.faq-head h2{ margin-top: 22px; }
.faq-list{ margin-top: 54px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 24px 4px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: var(--white);
  line-height:1.35;
}
.faq-icon{
  width: 30px;
  height: 30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  color: var(--white);
  font-size: 20px;
  line-height:1;
  transition: transform .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.faq-item[open] .faq-icon{ transform: rotate(45deg); border-color: var(--red); }
.faq-answer{ padding: 0 54px 24px 4px; }
.faq-answer p{ color: var(--mute); font-size: 14.5px; line-height:1.7; max-width: 820px; }

@media (max-width: 900px){
  .seo-intro-section{ padding-top: 72px; padding-bottom: 72px; }
  .seo-section{ padding-top: 82px; padding-bottom: 82px; }
  .problem-grid{ grid-template-columns: repeat(2, 1fr); }
  .faq-section{ padding-top: 88px; padding-bottom: 88px; }
}
@media (max-width: 560px){
  .problem-grid{ grid-template-columns: 1fr; }
  .problem-card{ min-height: auto; padding: 24px 20px; }
  .faq-item summary{ padding: 20px 0; }
  .faq-answer{ padding: 0 38px 20px 0; }
}