:root{
  --bg:#050607;
  --surface:#0d1014;
  --surface-2:#12161b;
  --text:#f6f7f8;
  --muted:#a6adb7;
  --line:#252b33;
  --red:#ff2145;
  --red-2:#c80f2d;
  --green:#57d98b;
  --radius:24px;
  --shadow:0 24px 60px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,72px);
  background:rgba(5,6,7,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;gap:12px;align-items:center}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid #505761;border-radius:12px;font-weight:800;
  color:var(--red);background:linear-gradient(145deg,#151a20,#090b0e)
}
.brand strong{font-family:Montserrat,sans-serif;letter-spacing:.15em;font-size:1.05rem}
.brand small{display:block;color:var(--muted);font-size:.56rem;letter-spacing:.17em;margin-top:2px}
.site-nav{display:flex;align-items:center;gap:24px;color:#d8dce1;font-size:.92rem}
.site-nav a:hover{color:white}
.nav-cta{border:1px solid var(--red);padding:10px 14px;border-radius:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:white;padding:9px 12px;border-radius:10px}
.hero{
  min-height:78vh;
  padding:clamp(70px,9vw,130px) clamp(20px,6vw,90px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(40px,8vw,120px);align-items:center;position:relative;overflow:hidden;
}
.hero-glow{position:absolute;width:560px;height:560px;background:#96152c;filter:blur(170px);opacity:.2;right:-120px;top:-100px}
.eyebrow{color:var(--red);font-weight:800;letter-spacing:.19em;font-size:.74rem}
h1,h2,h3{font-family:Montserrat,sans-serif;margin-top:0}
h1{font-size:clamp(3rem,6vw,6.6rem);line-height:.95;letter-spacing:-.04em;margin-bottom:24px}
h1 span{color:var(--red)}
.hero-text{max-width:720px;color:#c6cbd2;font-size:clamp(1.05rem,1.6vw,1.3rem)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{border-radius:12px;padding:14px 20px;font-weight:800;display:inline-flex;justify-content:center;align-items:center;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-2));color:white;box-shadow:0 10px 32px rgba(255,33,69,.2)}
.btn-secondary{border-color:#3a414b;background:#11151a;color:white}
.btn-small{padding:10px 14px;font-size:.86rem}
.hero-card{position:relative;background:linear-gradient(145deg,#11151a,#090b0e);border:1px solid #232932;border-radius:30px;padding:18px;box-shadow:var(--shadow)}
.lens-visual{height:390px;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 4px 1fr;background:#12171c}
.lens{position:relative}
.lens::before,.lens::after{content:"";position:absolute;border-radius:50%}
.lens::before{width:160px;height:160px;inset:50% auto auto 50%;transform:translate(-50%,-50%);border:22px solid #343b44;box-shadow:inset 0 0 0 16px #0a0d11,0 0 60px rgba(255,255,255,.06)}
.lens::after{width:86px;height:86px;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#f8f8e9 0,#ccd8e0 18%,#52606b 38%,#101419 70%)}
.lens-before{filter:sepia(.35) blur(.7px);opacity:.62;background:linear-gradient(110deg,#443f31,#18191b)}
.lens-after{background:linear-gradient(110deg,#0c1116,#1c2732)}
.lens-divider{background:var(--red)}
.hero-card-copy{padding:18px 6px 4px;display:flex;flex-direction:column;gap:4px}
.hero-card-copy span{color:var(--muted);font-size:.9rem}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.trust-strip div{background:#090b0e;padding:24px clamp(18px,3vw,40px);display:flex;flex-direction:column;gap:4px}
.trust-strip span{color:var(--muted);font-size:.86rem}
.section{padding:clamp(72px,8vw,120px) clamp(20px,6vw,90px)}
.surface{background:var(--surface)}
.section-heading{max-width:840px;margin-bottom:38px}
.section-heading h2,.request-copy h2,.fleet-section h2{font-size:clamp(2rem,4vw,4.2rem);line-height:1.05;letter-spacing:-.035em;margin-bottom:14px}
.section-heading p:not(.eyebrow),.request-copy>p,.fleet-section>div>p{color:var(--muted);font-size:1.05rem}
.split-heading{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:40px}
.split-heading>p{max-width:480px}
.gallery-grid,.cards{display:grid;gap:18px}
.gallery-grid{grid-template-columns:repeat(3,1fr)}
.gallery-placeholder{
  min-height:330px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(145deg,#151a20,#090b0e);display:flex;flex-direction:column;
  justify-content:end;padding:24px;position:relative;overflow:hidden
}
.gallery-placeholder::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;border:20px solid #2e353d;left:50%;top:46%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 12px #090c10}
.gallery-placeholder span,.gallery-placeholder strong,.gallery-placeholder small{position:relative;z-index:1}
.gallery-placeholder span{color:var(--red);font-size:.74rem;font-weight:800;letter-spacing:.14em}
.gallery-placeholder small{color:var(--muted)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card,.review-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#151a20,#0b0e12)}
.card .icon{width:46px;height:46px;border-radius:13px;background:#211019;color:var(--red);display:grid;place-items:center;font-weight:800;margin-bottom:26px}
.card h3{font-size:1.18rem}
.card p,.review-card span{color:var(--muted)}
.card a{color:#ff667f;font-weight:700;font-size:.9rem}
.pricing-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;background:#0d1014;border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row>div:first-child{display:flex;flex-direction:column;gap:3px}
.price-row span{color:var(--muted);font-size:.9rem}
.price{font-weight:800;font-size:1.1rem}
.fleet-section{display:grid;grid-template-columns:1.4fr 1fr auto;gap:40px;align-items:center;background:radial-gradient(circle at 10% 50%,rgba(255,33,69,.12),transparent 35%),#080a0d}
.fleet-points{display:grid;gap:12px;color:#d7dbe0}
.stars{color:#ff3858;letter-spacing:.15em}
.review-card p{font-size:1.02rem}
.faq-list{display:grid;gap:10px}
details{border:1px solid var(--line);border-radius:16px;background:#0c0f13;padding:20px 22px}
summary{cursor:pointer;font-weight:700}
details p{color:var(--muted);margin-bottom:0}
.request-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;background:linear-gradient(145deg,#11151a,#07090b)}
.contact-lines{display:grid;gap:8px;color:#d8dde3;margin-top:28px}
.request-form{display:grid;gap:16px;background:#0b0e12;border:1px solid var(--line);padding:28px;border-radius:var(--radius)}
.request-form label{display:grid;gap:7px;color:#c9ced5;font-size:.88rem;font-weight:700}
.request-form input,.request-form select,.request-form textarea{
  width:100%;background:#11161b;border:1px solid #2b323b;color:white;border-radius:12px;padding:13px 14px;outline:none
}
.request-form input:focus,.request-form select:focus,.request-form textarea:focus{border-color:#a22b3e;box-shadow:0 0 0 3px rgba(255,33,69,.08)}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-status{margin:0;color:var(--green);min-height:1.4em}
.footer{
  padding:50px clamp(20px,6vw,90px) 30px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:35px;background:#050607;color:#cdd2d8
}
.footer>div:not(.brand){display:flex;flex-direction:column;gap:7px;font-size:.9rem}
.footer>div:not(.brand)>strong{color:white;margin-bottom:5px}
.footer>div:not(.brand)>span,.footer>div:not(.brand)>a{color:var(--muted)}
.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;color:#717986;font-size:.82rem}
@media (max-width:1050px){
  .site-nav{display:none;position:absolute;top:78px;left:20px;right:20px;flex-direction:column;align-items:stretch;background:#0b0e12;padding:18px;border:1px solid var(--line);border-radius:16px}
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-card{max-width:700px}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .fleet-section{grid-template-columns:1fr}
  .request-section{grid-template-columns:1fr}
  .footer{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .hero{padding-top:70px}
  .lens-visual{height:300px}
  .trust-strip,.gallery-grid,.cards.four,.cards.three{grid-template-columns:1fr}
  .split-heading{display:block}
  .price-row{align-items:flex-start;flex-direction:column}
  .form-row{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
}


/* WEB-001A — Permanent KAIVAR Master Header */
.site-header{
  display:block;
  padding:0;
  background:#000;
  border-bottom:1px solid rgba(226,0,26,.30);
}
.brand-header-row{
  min-height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:10px clamp(18px,4vw,52px) 0;
  background:#000;
}
.master-brand{
  display:block;
  width:min(620px,58vw);
  line-height:0;
}
.master-brand img{
  display:block;
  width:100%;
  height:auto;
}
.site-nav{
  min-height:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(16px,2.2vw,30px);
  padding:0 clamp(20px,5vw,72px) 12px;
  background:#000;
}
.nav-toggle{
  position:absolute;
  right:clamp(18px,4vw,52px);
  top:50%;
  transform:translateY(-50%);
}
.footer-brand img{
  width:min(420px,100%);
  height:auto;
  display:block;
}
.footer-brand{
  align-self:start;
}

/* Request Service field cleanup */
.request-form input[data-title-case],
.request-form textarea[data-sentence-case]{
  text-transform:none;
}

@media (max-width:1050px){
  .brand-header-row{
    min-height:96px;
    justify-content:flex-start;
    padding-right:110px;
  }
  .master-brand{
    width:min(500px,72vw);
  }
  .site-nav{
    display:none;
    position:absolute;
    top:96px;
    left:16px;
    right:16px;
    min-height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#080a0d;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 14px;border-radius:10px}
  .nav-cta{text-align:center}
}

@media (max-width:620px){
  .brand-header-row{
    min-height:86px;
    padding:6px 96px 0 8px;
  }
  .master-brand{
    width:100%;
    max-width:390px;
  }
  .nav-toggle{
    right:14px;
    font-size:1rem;
    padding:10px 13px;
  }
  .site-nav{top:86px}
}


/* WEB-001B — Desktop Header Alignment
   Desktop: approved KAIVAR master logo left, navigation right.
   Mobile/tablet layout from WEB-001A remains unchanged. */
@media (min-width:1051px){
  .site-header{
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    padding:10px clamp(28px,4vw,64px);
    background:#000;
  }

  .brand-header-row{
    min-height:0;
    flex:0 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0;
    background:transparent;
  }

  .master-brand{
    width:clamp(360px,35vw,540px);
    max-width:540px;
  }

  .master-brand img{
    display:block;
    width:100%;
    height:auto;
  }

  .site-nav{
    min-height:0;
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:clamp(14px,1.8vw,26px);
    padding:0;
    background:transparent;
  }

  .site-nav a{
    white-space:nowrap;
  }

  .nav-toggle{
    display:none;
  }
}


/* WEB-001C — Temporary Real Photography */
.hero-photo-card{
  overflow:hidden;
}
.hero-stock-photo{
  display:block;
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:22px;
}
.temporary-photo-badge{
  position:absolute;
  top:30px;
  left:30px;
  z-index:2;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(0,0,0,.74);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  backdrop-filter:blur(8px);
}
.gallery-photo-card{
  min-height:330px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#0b0e12;
}
.gallery-photo-card img{
  width:100%;
  height:100%;
  min-height:330px;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.gallery-photo-card:hover img{
  transform:scale(1.025);
}
.gallery-photo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.15) 56%,transparent 80%);
  pointer-events:none;
}
.gallery-photo-overlay{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.gallery-photo-overlay span{
  color:var(--red);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
}
.gallery-photo-overlay strong{
  font-size:1.02rem;
}
.gallery-photo-overlay small{
  color:#c3c8cf;
}
.process-photo-banner{
  display:grid;
  grid-template-columns:minmax(280px,.75fr) 1.25fr;
  gap:0;
  margin-bottom:24px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#090c10;
}
.process-photo-banner img{
  width:100%;
  height:260px;
  object-fit:cover;
  object-position:center 45%;
}
.process-photo-banner>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 34px;
}
.process-photo-banner strong{
  display:block;
  margin:5px 0 7px;
  font-family:Montserrat,sans-serif;
  font-size:1.35rem;
}
.process-photo-banner small{
  color:var(--muted);
  line-height:1.55;
}
.fleet-section{
  grid-template-columns:minmax(340px,.95fr) minmax(0,1.05fr);
}
.fleet-photo-wrap{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  min-height:360px;
}
.fleet-photo-wrap img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
}
.fleet-section .fleet-points{
  margin:26px 0;
}

@media(max-width:1050px){
  .process-photo-banner{
    grid-template-columns:1fr;
  }
  .fleet-section{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .hero-stock-photo{
    height:300px;
  }
  .process-photo-banner img{
    height:230px;
  }
  .process-photo-banner>div{
    padding:24px;
  }
  .temporary-photo-badge{
    top:22px;
    left:22px;
  }
}


/* WEB-001D — KAIVAR Service Concept Artwork */
.showcase-card{
  min-height:390px;
}
.showcase-card img{
  min-height:390px;
  height:390px;
  object-fit:cover;
  object-position:center 20%;
}
.hero-photo-card .hero-stock-photo{
  object-position:center 20%;
}
.fleet-photo-wrap{
  min-height:430px;
}
.fleet-photo-wrap img{
  min-height:430px;
  object-position:center 18%;
}
@media(max-width:700px){
  .showcase-card,
  .showcase-card img{
    min-height:360px;
    height:360px;
  }
  .fleet-photo-wrap,
  .fleet-photo-wrap img{
    min-height:390px;
  }
}


/* WEB-001E — exact KAIVAR service visuals from approved uploaded images */
.hero-photo-card .hero-stock-photo{
  width:100%;
  height:auto;
  max-height:390px;
  object-fit:contain;
  object-position:center;
  background:#050607;
}

.service-visual-grid{
  align-items:start;
}
.service-visual-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,#11151a,#090b0e);
}
.service-visual-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:#050607;
}
.service-visual-copy{
  padding:18px 20px 20px;
  border-top:1px solid var(--line);
}
.service-visual-copy h3{
  margin:0 0 7px;
  font-family:Montserrat,sans-serif;
  font-size:1.05rem;
}
.service-visual-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.fleet-photo-wrap{
  min-height:0;
  height:auto;
  background:#050607;
}
.fleet-photo-wrap img{
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  object-position:center;
}

@media(max-width:700px){
  .hero-photo-card .hero-stock-photo{
    height:auto;
    max-height:none;
  }
  .service-visual-grid{
    grid-template-columns:1fr;
  }
  .fleet-photo-wrap img{
    height:auto;
    min-height:0;
  }
}


/* WEB-002A — Request Service Intake Engine */
.request-trap{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}
.field-help{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.35;
}
.request-note{
  margin:2px 0 4px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:#aeb5bf;
  font-size:.78rem;
  line-height:1.5;
}
#request-submit[disabled]{
  cursor:wait;
  opacity:.66;
}
.form-status{
  min-height:24px;
  margin:2px 0 0;
  font-size:.86rem;
  line-height:1.45;
}
.form-status.success{
  color:#9ce7b4;
}
.form-status.error{
  color:#ff9a9f;
}
.form-status.working{
  color:#d4d8de;
}


/* WEB-002B — Live Pricing */
.price[data-live-pricing="true"]{
  color:#fff;
}

/* WEB-002C.2 — Balanced sticky-header anchor positioning
   Section content already has generous top padding, so the anchor clearance
   only needs to offset the portion that would otherwise sit behind the
   sticky KAIVAR header. This also fixes the Home/#top landing. */
:root{
  --kaivar-anchor-offset:48px;
}

#top,
section[id]{
  scroll-margin-top:var(--kaivar-anchor-offset);
}

@media (max-width:1050px){
  :root{
    --kaivar-anchor-offset:40px;
  }
}

@media (max-width:620px){
  :root{
    --kaivar-anchor-offset:32px;
  }
}


/* WEB-002D — Premium branded entry splash
   Full-size first-entry presentation. The page renders underneath so this is
   branding, not an artificial loading gate. JS removes it after the intro. */
.kaivar-entry{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#030405;
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease, visibility .42s ease;
}
.kaivar-entry-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:min(72vw,980px);
  aspect-ratio:2.7/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,33,69,.18),rgba(255,33,69,.055) 40%,transparent 72%);
  filter:blur(34px);
  opacity:0;
  animation:kaivarEntryGlow 1.2s ease-out .08s forwards;
}
.kaivar-entry-logo{
  position:relative;
  z-index:1;
  width:min(62vw,860px);
  max-height:70vh;
  object-fit:contain;
  opacity:0;
  transform:scale(.94);
  filter:drop-shadow(0 14px 42px rgba(0,0,0,.66));
  animation:kaivarEntryLogo 1.08s cubic-bezier(.2,.72,.2,1) .08s forwards;
}
.kaivar-entry.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.kaivar-entry.is-skipped{
  display:none;
}
body.kaivar-entry-pending{
  overflow:hidden;
}
body.kaivar-entry-ready{
  overflow:auto;
}
@keyframes kaivarEntryLogo{
  0%{opacity:0;transform:scale(.94)}
  38%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@keyframes kaivarEntryGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.88)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (max-width:820px){
  .kaivar-entry-logo{width:min(86vw,720px)}
  .kaivar-entry-glow{width:96vw}
}
@media (prefers-reduced-motion:reduce){
  .kaivar-entry,
  .kaivar-entry-logo,
  .kaivar-entry-glow{
    animation:none!important;
    transition:none!important;
  }
  .kaivar-entry-logo{opacity:1;transform:none}
  .kaivar-entry-glow{opacity:.55}
}


/* WEB-002D.1 — Fresh-home alignment while preserving the WEB-002D splash.
   CSS-only: no load-time scrolling, so the branded entry remains independent. */
#top:not(:target) > .hero{
  padding-top:clamp(24px,3vw,44px);
}
@media (max-width:1050px){
  #top:not(:target) > .hero{padding-top:32px;}
}
@media (max-width:620px){
  #top:not(:target) > .hero{padding-top:26px;}
}