/* Vettura Rentals — site.css (final) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:#0c0e14;color:#e9ecf1;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img,picture,video,canvas,svg{display:block;max-width:100%}
a{color:#c4993f;text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid #c4993f;outline-offset:2px}
/* stop sideways scroll */
html,body{overflow-x:hidden}

/* Layout */
.container{max-width:1200px;margin-inline:auto;padding-inline:24px}
.section{padding:clamp(28px,6vw,72px) 0}

/* Header */
header.nav{position:sticky;top:0;z-index:40;background:rgba(12,14,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid #24283a;padding:12px 24px;display:flex;justify-content:space-between;align-items:center}
header.nav .logo{display:flex;gap:10px;align-items:center;color:#fff;font-weight:800}
header.nav .nav-links{display:flex;gap:22px;align-items:center}
header.nav .nav-links a{color:#e9ecf1}
header.nav .ig{width:20px;height:20px;color:#e9ecf1}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:36px 0}
@media (max-width:950px){.hero{grid-template-columns:1fr}}
.hero .lead{color:#a8afbf}
.hero-media{border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35);border:2px solid rgba(196,153,63,.25)}
.hero-media .frame{position:relative;padding-top:56.25%}
.hero-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:12px;padding:10px 16px;border:1px solid #2c3044;background:#171a28;color:#fff}
.btn:hover{text-decoration:none;border-color:#3a4162}
.btn.gold{background:#c4993f;color:#111;border-color:transparent}
.btn.ghost{background:transparent}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:24px 0}
.card{background:#121526;border:1px solid #24283a;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;flex-direction:column}
.card .pad{padding:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{font-size:12px;background:#0f1220;color:#e9ecf1;border:1px solid #24283a;border-radius:999px;padding:6px 10px}

/* Image clamp to stop overflow and keep aspect */
.media-clamp{aspect-ratio:3/2;overflow:hidden;background:#0f1220;border-bottom:1px solid #24283a}
.media-clamp img,.media-clamp picture{width:100%;height:100%;object-fit:cover;display:block}

/* Quote / forms */
.panel{background:#121526;border:1px solid #24283a;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.quote{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
@media (max-width:980px){.quote{grid-template-columns:1fr}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1 / -1}
input,select,textarea{width:100%;background:#0f1220;color:#e9ecf1;border:1px solid #2a2f45;border-radius:10px;padding:12px 14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#c4993f;box-shadow:0 0 0 3px rgba(196,153,63,.18)}
label.small{font-size:12px;color:#a8afbf}
/* delivery/pickup toggle */
.toggle{display:flex;gap:10px;margin:10px 0 6px}
.tbtn{background:#0f1220;color:#e9ecf1;border:1px solid #2a2f45;border-radius:999px;padding:8px 14px;cursor:pointer}
.tbtn.active{background:#c4993f;color:#111;border-color:transparent}
/* hide delivery location unless delivery mode is active (JS sets .mode-delivery / .mode-pickup) */
[data-quote-root].mode-pickup [data-delivery-group]{display:none}
[data-quote-root].mode-delivery [data-delivery-group]{display:block}
/* fallback: if no JS, keep visible so the form still works */
.no-js [data-delivery-group]{display:block}
/* hide honeypot row */
.hidden{display:none !important}

/* FAQ “bubbles” */
.faq{display:grid;gap:12px;margin:28px 0}
.acc{background:#121526;border:1px solid #24283a;border-radius:14px;overflow:hidden}
.acc > button{all:unset;display:block;width:100%;padding:14px 16px;font-weight:700;cursor:pointer}
.acc .content{max-height:0;overflow:hidden;transition:max-height .25s ease}
.acc.open .content{max-height:280px}
.acc .content .pad{padding:0 16px 16px;color:#a8afbf}

/* Footer */
.site-footer{background:#0f1220;border-top:1px solid #24283a;margin-top:36px}
.site-footer .cols{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr;max-width:1200px;margin:0 auto;padding:24px}
.site-footer h4,h5{margin:0 0 6px}
.site-footer p,.site-footer li{color:#a8afbf}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer .sub{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.site-header{display:flex;align-items:center;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{display:block;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:20px;margin-left:auto}
.nav-link{text-decoration:none}
.nav-link:focus-visible,.brand:focus-visible{outline:2px solid #c7a04a;outline-offset:3px}
@media (max-width:640px){
  .site-header{padding:12px 14px}
  .nav-links{gap:16px;font-size:.95rem;flex-wrap:wrap}
  .brand{gap:8px}
}

/* Kill the old dot logo anywhere it still exists */
header.nav .logo svg { display: none; }

/* Tiny header spacing overrides (previously inline in some pages) */
header.nav{display:flex;align-items:center;padding:12px 16px}
a.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
a.logo img{display:block;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:20px;margin-left:auto}
@media (max-width:640px){
  header.nav{padding:12px 14px}
  .nav-links{gap:16px;font-size:.95rem;flex-wrap:wrap}
  a.logo{gap:8px}
}

/* Accessibility: skip link shown on keyboard focus */
.skip-link{position:absolute;left:12px;top:12px;background:#111;color:#fff;padding:8px 12px;border-radius:8px;z-index:120;transform:translateY(-140%);transition:transform .12s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid #c4993f;outline-offset:3px}

/* Video placeholder for lazy-loading hero iframe */
.hero-media .video-placeholder{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;display:block}
.hero-media .video-placeholder img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .video-placeholder .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;background:#c4993f;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hero-media .video-placeholder .play svg{width:28px;height:28px;color:#111}

/* Cookie consent banner */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;background:linear-gradient(180deg,#0f1220,rgba(12,14,20,.95));border:1px solid #24283a;padding:12px;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.45);z-index:150;display:flex;align-items:center}
.cookie-banner .cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.cookie-banner .cookie-text{color:#e9ecf1;font-size:14px}
.cookie-banner .cookie-actions{display:flex;gap:8px}
.cookie-banner .btn{padding:8px 12px;border-radius:10px}
.cookie-banner .btn.ghost{border-color:#444}
.cookie-banner .btn.gold{background:#c4993f;color:#111}

@media (max-width:640px){
  .cookie-banner{left:8px;right:8px;bottom:8px;padding:10px}
  .cookie-banner .cookie-inner{flex-direction:column;align-items:flex-start}
}