/* ===== Variables ===== */
:root{
  --navy:#0a254d; --red:#c8181f; --line:#e3e9f3;
  --bg-muted:#f6f8fc; --ink:#0f1f3a;
  --container:1180px; --shadow:0 10px 24px rgba(15,31,58,.10);
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
a{text-decoration:none;color:var(--navy)}
img{max-width:100%;display:block}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.header-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;gap:16px;
  min-height:86px;padding:0 22px;position:relative;
}
.header-inner .brand{position:absolute;left:50%;transform:translateX(-50%)}

/* ✅ Single logo rule */
.logo img{
  display:block;margin:0 auto;
  max-height:70px;width:auto;height:auto;
}
@media(max-width:768px){.logo img{max-height:55px}}
@media(max-width:480px){.logo img{max-height:45px}}

/* ===== Navigation ===== */
.main-nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.main-nav a{font-weight:600}
.main-nav .nav-cta{background:var(--navy);color:#fff;padding:8px 12px;border-radius:8px}

/* ===== Hero ===== */
.hero{position:relative}
.hero-image{width:100%;max-height:520px;object-fit:cover}
.hero-cta{position:absolute;inset:auto 0 28px;text-align:center}
.hero-cta h1{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);margin:0}

/* ===== Buttons ===== */
.btn{padding:12px 20px;border-radius:10px;font-weight:800}
.btn-primary{background:var(--red);color:#fff;border:1px solid var(--red)}
.btn-ghost{background:#fff;border:1px solid var(--line)}

/* ===== Sections ===== */
.section{padding:56px 22px}
.section-title{text-align:center;font-size:32px;color:var(--navy)}

/* ===== Choose Cards ===== */
.choose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:var(--container);margin:0 auto}
.choose-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:.2s}
.choose-card:hover{transform:translateY(-2px)}

/* ===== Quote Form ===== */
.quote-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;max-width:var(--container);margin:0 auto}
@media(max-width:960px){.quote-grid{grid-template-columns:1fr}}
.quote-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}

/* ===== Van Hire Cards ===== */
.van-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:var(--container);margin:0 auto}
.van-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;display:none;z-index:2000;padding:88px 12px 24px}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-dialog{position:relative;background:#fff;max-width:960px;margin:0 auto;border-radius:16px;box-shadow:var(--shadow)}
.modal-close{position:absolute;top:10px;right:12px}

/* ===== Footer ===== */
.site-footer{background:var(--navy);color:#fff;margin-top:42px;text-align:center;padding:22px}
.footer-logo{height:62px;margin:0 auto}
/* FINAL logo size override (matches <img class="logo">) */
img.logo,
.site-header .brand img.logo {
  display: block;
  margin: 0 auto;
  height: auto !important;
  width: auto !important;
  max-height: 64px !important;   /* Desktop target size */
}

@media (max-width: 768px) {
  img.logo,
  .site-header .brand img.logo {
    max-height: 50px !important; /* Tablet */
  }
}
@media (max-width: 480px) {
  img.logo,
  .site-header .brand img.logo {
    max-height: 44px !important; /* Mobile */
  }
}
/* === Header layout (center brand) === */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.header-inner{position:relative;display:flex;align-items:center;min-height:86px;padding:0 22px}
.header-inner .brand{position:absolute;left:50%;transform:translateX(-50%);line-height:0}
.main-nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.hamburger{position:absolute;left:16px;width:40px;height:40px;border:1px solid #e6ecf5;border-radius:10px;background:#f7f9ff;display:flex;align-items:center;justify-content:center;gap:4px}
.hamburger span{width:18px;height:2px;background:#0a254d}

/* === Compact logo size (this targets <img class="logo"> exactly) === */
img.logo,
.site-header .brand > img.logo{
  display:block;margin:0 auto;
  height:auto !important;width:auto !important;
  max-height:64px !important;          /* desktop size */
}
@media (max-width: 900px){
  img.logo,.site-header .brand > img.logo{ max-height:56px !important; }
}
@media (max-width: 600px){
  img.logo,.site-header .brand > img.logo{ max-height:48px !important; }
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  width: 100%;
  height: auto;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.hero-content {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.hero-content .btn {
  background: #e30613; /* matches your red logo */
  color: #fff;
  padding: 14px 36px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}

.hero-content .btn:hover {
  background: #b8050f;
}

/* Reset any old hero block */
.hero-cta { display:none !important; }

/* Full-screen hero (mobile-safe) */
.hero.hero-full{
  position: relative;
  width: 100%;
  height: 100svh;        /* correct on iOS/Android */
  min-height: 100dvh;    /* desktop fallback */
  overflow: hidden;
}

.hero-full__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill with crop, no black bars */
  display: block;
}

.hero-full__content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(14px, 12vh, 120px); /* sits nicely above bottom on all screens */
  text-align: center;
  width: max-content;    /* prevents strange full-width behaviour */
}

.btn-hero{
  padding: 16px 40px;
  border-radius: 12px;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
}

/* Hero section fix */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full screen height */
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* scales image correctly */
  object-position: center; /* keeps it centered */
  display: block;
}