:root {
  --gold: #c9a84c;
  --gold-dim: rgba(201,168,76,0.18);
  --black: #050505;
  --dark: #0a0a0a;
  --dark2: #0f0f0f;
  --dark3: #141414;
  --text: #e8e8e8;
  --text-dim: #666;
  --font-d: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-b: 'Inter', Arial, sans-serif;
  --max: 1160px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:var(--font-b);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── NAVBAR ─────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 32px;
  background:rgba(5,5,5,0.90);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,168,76,0.2);
  transition:padding .3s;
}
.navbar.scrolled{padding:8px 32px}
.nav-logo{display:flex;align-items:center}
.logo-img{height:42px;width:auto;object-fit:contain}
.nav-links{display:none;gap:36px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#888;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{
  display:none;background:var(--gold);color:#000;border:none;
  padding:10px 22px;font-size:10px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;cursor:pointer;font-family:var(--font-b);
  transition:background .2s,transform .15s;
}
@media(min-width:768px){.nav-cta{display:block}}
.nav-cta:hover{background:#dfc05e;transform:translateY(-1px)}
.nav-hamburger{
  display:flex;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:4px;
}
@media(min-width:768px){.nav-hamburger{display:none}}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--gold);transition:.3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE NAV ─────────────────────────────────── */
.mobile-nav{
  position:fixed;top:66px;left:0;right:0;z-index:999;
  background:rgba(5,5,5,0.98);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gold-dim);
  padding:24px 32px 32px;
  display:flex;flex-direction:column;gap:20px;
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.open{transform:translateY(0)}
.mn-link{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#aaa;transition:color .2s}
.mn-link:hover{color:var(--gold)}

/* ── HERO SECTION ───────────────────────────────── */
#hero-section{
  position:relative;
  height:100vh;
}

.engine-stage{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* subtle radial bg glow */
.engine-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 55% 50%, rgba(201,168,76,0.08) 0%, transparent 65%);
  pointer-events:none;
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}

/* Hero canvas background */
.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  display:block;
}

/* ── HERO PHOTO + OVERLAY ───────────────────────── */
.hero-photo-bg{
  position:absolute;inset:0;
  background-image:url('images/civic.jpg');
  background-size:cover;
  background-position:center 40%;
  z-index:0;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    100deg,
    rgba(5,5,5,0.93) 0%,
    rgba(5,5,5,0.80) 45%,
    rgba(5,5,5,0.30) 75%,
    rgba(5,5,5,0.05) 100%
  );
  z-index:1;
}

/* Hero text — left aligned */
.hero-text{
  position:absolute;
  left:7vw;top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:flex;flex-direction:column;
  align-items:flex-start;
  max-width:580px;
  pointer-events:none;
}
.hero-text .btn-primary,.hero-text .btn-outline{pointer-events:auto}

/* Logo above headline */
.hero-logo{
  width:clamp(130px,16vw,200px);
  height:auto;
  margin-bottom:20px;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.7));
}

/* Text */
.hero-eyebrow{
  font-size:10px;letter-spacing:5px;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;opacity:.9;
}
.hero-title{
  font-family:var(--font-d);
  font-size:clamp(58px,8vw,100px);
  line-height:.88;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:18px;
}
.hero-title em{font-style:normal;color:var(--gold);display:block}
.hero-sub{
  font-size:12px;color:#aaa;letter-spacing:.6px;line-height:2;
  margin-bottom:36px;
}

/* CTA row */
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

@keyframes linepulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Spec badge */
.spec-badge{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:20px;
  z-index:5;pointer-events:none;opacity:0;
  background:rgba(5,5,5,0.7);backdrop-filter:blur(10px);
  border:1px solid var(--gold-dim);border-radius:2px;
  padding:14px 28px;white-space:nowrap;
}
.spec-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.spec-item em{font-style:normal;font-family:var(--font-d);font-size:26px;color:var(--gold);line-height:1}
.spec-item span,.spec-item{font-size:9px;letter-spacing:2px;color:#888;text-transform:uppercase}
.spec-div{color:var(--gold-dim);font-size:20px}

/* ── TRUST BAR ──────────────────────────────────── */
.trust-bar{
  background:var(--dark);
  border-top:1px solid var(--gold-dim);
  border-bottom:1px solid var(--gold-dim);
  padding:44px 24px;
}
.trust-inner{
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:0;max-width:var(--max);margin:0 auto;
}
.trust-item{
  flex:1;min-width:140px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 24px;text-align:center;
}
.ti-num{font-family:var(--font-d);font-size:44px;color:var(--gold);line-height:1}
.ti-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#555}
.trust-sep{width:1px;height:48px;background:var(--gold-dim);flex-shrink:0}
@media(max-width:600px){.trust-sep{display:none}.trust-item{min-width:50%}}

/* ── ABOUT ──────────────────────────────────────── */
.about-section{padding:100px 32px;max-width:var(--max);margin:0 auto}
.about-inner{display:grid;grid-template-columns:1fr;gap:60px;align-items:center}
@media(min-width:900px){.about-inner{grid-template-columns:1fr 1fr}}
.about-text h2{
  font-family:var(--font-d);font-size:clamp(36px,5vw,54px);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;line-height:1;
}
.about-text h2 span{color:var(--gold)}
.body-copy{font-size:13px;color:#777;line-height:1.85;margin-bottom:16px}
.body-copy strong{color:#bbb}
.about-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badge{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--gold-dim);padding:8px 16px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;
}
.badge span{color:var(--gold)}
.about-engine{position:relative;display:flex;align-items:center;justify-content:center}
.about-engine-glow{
  position:absolute;inset:-40px;
  background:radial-gradient(ellipse at center,rgba(201,168,76,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.about-engine-img{width:100%;max-width:520px;filter:drop-shadow(0 20px 50px rgba(0,0,0,0.8))}

/* ── SERVICES ───────────────────────────────────── */
.services-section{padding:100px 32px;background:var(--dark)}
.services-grid{
  display:grid;grid-template-columns:1fr;gap:2px;
  max-width:var(--max);margin:0 auto 24px;
}
@media(min-width:600px){.services-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-card{
  background:var(--dark2);
  border:1px solid #161616;border-left:3px solid var(--gold);
  padding:32px 28px;position:relative;
  transition:background .25s,border-color .25s;
  cursor:default;
}
.service-card:hover{background:var(--dark3)}
.svc-num{
  position:absolute;top:16px;right:20px;
  font-family:var(--font-d);font-size:56px;
  color:rgba(201,168,76,0.18);line-height:1;
}
.svc-icon{width:36px;height:36px;margin-bottom:18px}
.service-card h3{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.service-card p{font-size:12px;color:#666;line-height:1.8;margin-bottom:24px}
.svc-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1a1a1a;padding-top:14px}
.svc-price{font-size:14px;font-weight:700;color:var(--gold)}
.svc-time{font-size:10px;color:#777;letter-spacing:1px}
.services-note{text-align:center;font-size:12px;color:#555;max-width:var(--max);margin:0 auto;padding-top:8px}
.services-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ── PROCESS ────────────────────────────────────── */
.process-section{padding:100px 32px}
.process-steps{
  display:grid;grid-template-columns:1fr;
  align-items:center;gap:0;
  max-width:var(--max);margin:0 auto;
}
@media(min-width:768px){
  .process-steps{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
}
.step{text-align:center;padding:16px}
.step-num{font-family:var(--font-d);font-size:56px;color:var(--gold);opacity:.3;line-height:1;margin-bottom:12px}
.step h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.step p{font-size:11px;color:#555;line-height:1.8}
.step-connector{display:flex;align-items:center;justify-content:center;padding:0 8px}
.connector-line{
  width:2px;height:40px;background:linear-gradient(to bottom,var(--gold-dim),transparent);
}
@media(min-width:768px){
  .connector-line{width:60px;height:1px;background:linear-gradient(to right,var(--gold-dim),transparent)}
}

/* ── REVIEWS ────────────────────────────────────── */
.reviews-section{padding:100px 32px;background:var(--dark)}
.reviews-grid{
  display:grid;grid-template-columns:1fr;gap:2px;
  max-width:var(--max);margin:0 auto 48px;
}
@media(min-width:700px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.reviews-grid{grid-template-columns:1fr 1.1fr 1fr;align-items:start}}
.review-card{
  background:var(--dark2);border:1px solid #161616;
  padding:32px 28px;position:relative;
}
.review-card.featured{
  border-color:var(--gold-dim);
  background:linear-gradient(135deg,#0f0d06 0%,var(--dark2) 100%);
}
.review-card.featured::before{
  content:'FEATURED REVIEW';
  position:absolute;top:-1px;left:24px;
  font-size:8px;letter-spacing:3px;color:var(--black);
  background:var(--gold);padding:4px 10px;font-weight:700;
}
.stars{color:var(--gold);font-size:14px;margin-bottom:16px;letter-spacing:2px}
.review-card p{font-size:13px;color:#888;line-height:1.8;margin-bottom:24px;font-style:italic}
.reviewer{display:flex;align-items:center;gap:14px}
.reviewer-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--gold-dim);border:1px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--gold);flex-shrink:0;letter-spacing:1px;
}
.reviewer strong{display:block;font-size:12px;margin-bottom:2px}
.reviewer span{font-size:10px;color:#555;letter-spacing:1px}
.rating-bar{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--gold-dim);padding:20px 32px;
}
.rb-score{font-family:var(--font-d);font-size:52px;color:var(--gold);line-height:1}
.rb-stars{color:var(--gold);font-size:18px;letter-spacing:4px}
.rb-count{font-size:11px;color:#555;letter-spacing:.5px}

/* ── SERVICE AREA ───────────────────────────────── */
.area-section{padding:100px 32px;max-width:var(--max);margin:0 auto}
.area-inner{display:grid;grid-template-columns:1fr;gap:60px;align-items:center}
@media(min-width:900px){.area-inner{grid-template-columns:1fr 1fr}}
.area-text h2{font-family:var(--font-d);font-size:clamp(36px,5vw,52px);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;line-height:1}
.area-text h2 span{color:var(--gold)}
.area-list{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:10px}
.area-list li{font-size:12px;letter-spacing:1px;color:#888;padding-left:18px;position:relative}
.area-list li::before{content:'—';position:absolute;left:0;color:var(--gold);font-size:10px}
.area-map{display:flex;align-items:center;justify-content:center}
.map-placeholder{
  position:relative;width:280px;height:280px;
  display:flex;align-items:center;justify-content:center;
}
.map-ring{
  position:absolute;border-radius:50%;border:1px solid var(--gold-dim);
  animation:ripple 3s ease-out infinite;
}
.map-ring-1{width:100%;height:100%;animation-delay:0s}
.map-ring-2{width:66%;height:66%;animation-delay:.5s;border-color:rgba(201,168,76,0.25)}
.map-ring-3{width:33%;height:33%;animation-delay:1s;border-color:rgba(201,168,76,0.4)}
@keyframes ripple{0%{opacity:.6}50%{opacity:.3}100%{opacity:.6}}
.map-pin{position:absolute;animation:pinbob 2s ease-in-out infinite}
@keyframes pinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.map-label{
  position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);white-space:nowrap;
}

/* ── BOOKING SECTION ────────────────────────────── */
.booking-section{
  padding:80px 32px 100px;
  background:#080808;
}
.booking-wrap{
  max-width:980px;
  margin:0 auto;
  border:1px solid rgba(201,168,76,0.15);
  border-radius:6px;
  overflow:hidden;
  background:#0d0d0d;
}
#ari-booking-container{width:100%;}

/* ── CTA SECTION ────────────────────────────────── */
.cta-section{
  position:relative;padding:120px 32px;text-align:center;overflow:hidden;
  background:var(--dark);
}
.cta-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(201,168,76,0.08) 0%,transparent 65%);
  pointer-events:none;
}
.cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-logo{height:80px;width:auto;margin:0 auto 32px;object-fit:contain}
.cta-title{
  font-family:var(--font-d);font-size:clamp(48px,8vw,80px);
  text-transform:uppercase;letter-spacing:2px;line-height:.9;margin-bottom:20px;
}
.cta-title span{color:var(--gold)}
.cta-sub{font-size:12px;color:#555;letter-spacing:.5px;margin-bottom:44px}
.cta-btns{display:flex;flex-direction:column;gap:14px;align-items:center;margin-bottom:40px}
@media(min-width:480px){.cta-btns{flex-direction:row;justify-content:center}}
.cta-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  font-size:10px;color:#444;letter-spacing:.5px;
}

/* ── SHARED COMPONENTS ──────────────────────────── */
.section-header{margin-bottom:56px}
.section-header.centered{text-align:center}
.eyebrow{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:10px;display:block}
.section-header h2,.about-text h2,.area-text h2{
  font-family:var(--font-d);font-size:clamp(38px,5vw,58px);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:18px;line-height:1;
}
.section-header h2 span{color:var(--gold)}
.gold-bar{width:40px;height:2px;background:var(--gold);margin-bottom:28px}
.center-bar{margin-left:auto;margin-right:auto}
.btn-primary{
  background:var(--gold);color:#000;border:none;
  padding:16px 36px;font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;cursor:pointer;
  font-family:var(--font-b);transition:background .2s,transform .15s;display:inline-block;
}
.btn-primary:hover{background:#dfc05e;transform:translateY(-2px)}
.btn-outline{
  background:transparent;color:var(--gold);
  border:1px solid var(--gold);
  padding:16px 36px;font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;cursor:pointer;
  font-family:var(--font-b);transition:background .2s;display:inline-block;
}
.btn-outline:hover{background:rgba(201,168,76,0.1)}

/* ── FOOTER ─────────────────────────────────────── */
.site-footer{background:#040404;border-top:1px solid rgba(201,168,76,0.15)}
.footer-top{
  display:grid;grid-template-columns:1fr;gap:48px;
  max-width:var(--max);margin:0 auto;
  padding:72px 32px 56px;
}
@media(min-width:600px){.footer-top{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.footer-top{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer-brand .footer-logo{height:52px;width:auto;margin-bottom:18px;object-fit:contain}
.footer-brand p{font-size:11px;color:#444;line-height:1.8;margin-bottom:20px}
.social-links{display:flex;gap:16px}
.social-links a{
  width:36px;height:36px;border:1px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;
}
.social-links a:hover{border-color:var(--gold);background:rgba(201,168,76,0.08)}
.footer-col h5{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col a,.footer-col p{display:block;font-size:11px;color:#444;margin-bottom:10px;transition:color .2s;letter-spacing:.3px}
.footer-col a:hover{color:#888}
.footer-bottom{
  border-top:1px solid #111;
  padding:20px 32px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;
  max-width:var(--max);margin:0 auto;
}
.footer-bottom p{font-size:10px;color:#2a2a2a;letter-spacing:.5px}

/* ── MOBILE ─────────────────────────────────────── */
@media(max-width:767px){

  /* Hero */
  .hero-text{
    left:20px;right:20px;
    max-width:none;
    transform:translateY(-50%);
  }
  .hero-logo{width:110px;margin-bottom:14px}
  .hero-eyebrow{font-size:9px;letter-spacing:3px}
  .hero-title{font-size:48px}
  .hero-sub{font-size:11px;margin-bottom:28px}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn-primary,
  .hero-btns .btn-outline{width:100%;text-align:center;justify-content:center}

  /* Sections padding */
  .about-section,
  .services-section,
  .process-section,
  .reviews-section,
  .booking-section{padding-left:20px;padding-right:20px}

  /* CTA */
  .cta-section{padding:80px 20px}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btns .btn-primary,
  .cta-btns .btn-outline{width:100%;text-align:center}

  /* Footer */
  .footer-top{padding:60px 20px 40px}
  .site-footer .footer-bottom{padding:20px}

  /* Booking */
  .booking-section{padding:60px 16px 80px}
  .booking-wrap{border-radius:4px}
}