/* KRAVE CAR — premium homepage hero, responsive and image-led */
.hero {
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 82% 35%, rgba(194,155,83,.10), transparent 34%), #111318;
  padding-top: clamp(54px, 6vw, 86px);
}
.hero::before { display: none !important; }
.hero-glow {
  background: linear-gradient(105deg, rgba(255,255,255,.025), transparent 58%);
}
.hero-grid {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(34px, 5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 68px);
}
.hero-copy { max-width: 590px; }
.hero h1 {
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -2.8px;
  margin: 20px 0 18px;
}
.hero h1 em { color: #d1ad69; }
.hero-copy > p { max-width: 470px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #c2c5cc; }
.hero-actions { margin-top: 27px; }
.hero .btn { min-height: 48px; padding: 13px 18px; }
.hero .btn-primary { background: #caa65f; color: #151515; }
.hero .btn-outline { color: #f8f8f8 !important; border-color: rgba(255,255,255,.26) !important; background: rgba(255,255,255,.035); }
.hero-visual { min-width: 0; position: relative; padding: 0 0 22px; }
.hero-photo-frame {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  aspect-ratio: 1.18 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(135deg, #292c32, #17191e 72%);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.hero-fleet-photo { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-photo-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,10,12,.12) 12%,rgba(9,10,12,.02) 38%,rgba(9,10,12,.84) 100%); pointer-events:none; }
.hero-photo-label { position:absolute; top:22px; left:22px; display:inline-flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(15,16,19,.62); color:#fff; font-size:9px; font-weight:800; letter-spacing:1.4px; backdrop-filter:blur(12px); }
.hero-photo-dot { width:7px; height:7px; border-radius:50%; background:#d1ad69; box-shadow:0 0 0 4px rgba(209,173,105,.16); }
.hero-photo-caption { position:absolute; left:clamp(20px,3vw,34px); right:75px; bottom:clamp(22px,3vw,34px); display:flex; flex-direction:column; align-items:flex-start; gap:7px; color:#fff; }
.hero-caption-kicker { color:#d9bd83; font-size:9px; font-weight:800; letter-spacing:1.8px; }
.hero-photo-caption strong { font:800 clamp(22px,2.6vw,34px)/1.12 Manrope,Arial,sans-serif; letter-spacing:-.8px; }
.hero-photo-caption > span:last-child { color:rgba(255,255,255,.78); font-size:12px; }
.hero-photo-link { position:absolute; right:24px; bottom:26px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#caa65f; color:#151515; font-size:23px; transition:transform .2s,background .2s; }
.hero-photo-link:hover { transform:translate(2px,-2px); background:#dfbd79; }
.hero-photo-note { position:absolute; right:18px; bottom:0; display:flex; align-items:center; gap:11px; max-width:290px; padding:13px 17px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:#202228; color:#fff; box-shadow:0 14px 36px rgba(0,0,0,.24); }
.hero-note-icon { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(202,166,95,.16); color:#dfbd79; font-weight:900; }
.hero-photo-note strong,.hero-photo-note small { display:block; }
.hero-photo-note strong { font-size:11px; }
.hero-photo-note small { margin-top:4px; color:#b7bbc3; font-size:9px; line-height:1.5; }
.hero-photo-empty { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(24px,4vw,48px); color:#fff; }
.hero-empty-mark { color:#d1ad69; font:900 15px/1 Manrope,Arial,sans-serif; letter-spacing:3px; }
.hero-photo-empty strong { max-width:360px; margin-top:24px; font:800 clamp(25px,3vw,38px)/1.15 Manrope,Arial,sans-serif; }
.hero-photo-empty p { max-width:350px; color:#c2c5cc; font-size:14px; line-height:1.7; }
.hero-photo-empty .btn { margin-top:12px; }
.hero-stats { border-top-color:rgba(255,255,255,.17); padding-top:22px; }
.hero-stats > div { border-left-color:#caa65f; }
.hero-stats b { color:#f7f8fa; font-size:12px; }
.hero-stats span { color:#b4b8c0; font-size:11px; line-height:1.6; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:34px; }
  .hero-copy { max-width:720px; }
  .hero-visual { width:100%; max-width:760px; margin-inline:auto; }
  .hero-photo-frame { aspect-ratio:1.35 / 1; min-height:300px; }
  .hero-photo-note { right:14px; }
}
@media (max-width: 600px) {
  .hero { padding-top:42px; }
  .hero-grid { gap:28px; padding-bottom:34px; }
  .hero h1 { font-size:clamp(37px,10vw,48px); letter-spacing:-1.8px; margin:17px 0 14px; }
  .hero-copy > p { font-size:14px; line-height:1.75; }
  .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .hero-actions .btn { width:100%; justify-content:space-between; }
  .hero-photo-frame { aspect-ratio: .96 / 1; min-height:300px; border-radius:17px; }
  .hero-photo-label { top:14px; left:14px; font-size:8px; padding:9px 11px; }
  .hero-photo-caption { left:18px; bottom:23px; right:65px; }
  .hero-photo-caption strong { font-size:25px; }
  .hero-photo-caption > span:last-child { font-size:10px; line-height:1.5; }
  .hero-photo-link { right:15px; bottom:18px; width:40px; height:40px; }
  .hero-photo-note { position:relative; right:auto; bottom:auto; margin:-1px 12px 0; max-width:none; padding:11px 13px; }
  .hero-stats { grid-template-columns:1fr; gap:15px; padding:19px 0 23px; }
  .hero-stats > div { padding-left:14px; }
}