/* ========================
   DESIGN SYSTEM / TOKENS
   ======================== */
:root{
  --ink:#0b1a2b;
  --muted:#5b6b7c;
  --primary:#0ea5e9;
  --primary-dk:#088ac9;      /* hover/active deepen */
  --hdr-h:64px;
  --topbar-h:36px;           /* if no topbar HTML, this is ignored via fallbacks */
  --surface:#fff;
  --bg:#fff;
  --border:#e6ecf2;
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --radius:12px;
  --radius-sm:10px;
  --ring:0 0 0 3px rgba(14,165,233,.18);
}

/* =========
   GLOBAL
   ========= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  margin:0;
  /* If topbar exists, this keeps content clear of both bars. If not, only header height applies. */
  padding-top: calc(var(--hdr-h) + var(--topbar-h, 0px));
  font:16px/1.6 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg);
}
a{ color:var(--primary); text-decoration:none }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:var(--ring);
}
img{ max-width:100%; display:block; border-radius:var(--radius) }

/* Container */
.wrap{ max-width:1120px; margin:auto; padding:0 16px }

/* =========
   TOP CONTACT BAR (optional)
   ========= */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h);
  z-index:1001;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.85));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
}
.topbar-row{ height:100%; display:flex; align-items:center; gap:12px; font-weight:700; color:var(--ink) }
.topbar .top-link{ color:var(--ink); opacity:.85 }
.topbar .top-link:hover{ opacity:1 }
.topbar .dot{ color:#c9d6e4 }
.topbar .grow{ flex:1 }
.wa-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 12px; border-radius:999px;
  border:1px solid #d8e9f6; background:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(14,165,233,.08);
}
.wa-chip:hover{ transform:translateY(-1px); background:#f7fbff }

/* Make in-page anchors visible below fixed bars */
:target{ scroll-margin-top: calc(var(--hdr-h) + var(--topbar-h, 0px) + 12px); }

/* =========
   HEADER / NAV
   ========= */
.hdr-min{
  position:fixed; inset:0 0 auto 0; height:var(--hdr-h);
  top: var(--topbar-h, 0px);                 /* safely offsets if topbar exists */
  z-index:1000; background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
}
.hbar{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.2px; color:var(--ink) }
.brand img{ display:block; height:24px; width:auto }
.brand .wordmark{ display:none; font-weight:800; letter-spacing:.1px; font-size:20px; line-height:1; color:var(--ink) }
.brand.no-logo .logo-img{ display:none }
.brand.no-logo .wordmark{ display:inline-block }
.wordmark .accent{ color:var(--primary) }

.nav-links{ display:flex; align-items:center; gap:16px; white-space:nowrap }
.nav-links > a,
.nav-links > details > summary{ color:var(--ink); font-weight:700; padding:10px 10px; border-radius:var(--radius-sm); position:relative; }
.nav-links > a:hover,
.nav-links > details[open] > summary{ background:#f7fbff }

/* Underline indicator (active + hover) */
.nav-links > a::after,
.nav-links > details > summary::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-12px; height:3px;
  background:var(--primary); border-radius:2px; transform:scaleX(0); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-links > a:hover::after,
.nav-links > details[open] > summary::after{ transform:scaleX(1); opacity:.35 }
.nav-links > a.active::after,
.nav-links details.active > summary::after{ transform:scaleX(1); opacity:1 }

/* Products dropdown (Other Rentals) */
.cities-dd{ position:relative }
.cities-dd > summary{ list-style:none; cursor:pointer }
.cities-dd > summary::-webkit-details-marker{ display:none }
.cities-dd .dd-panel{
  position:absolute; top:100%; left:0; min-width:220px; margin-top:10px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  padding:8px; display:grid; gap:4px; z-index:1001;
}
.cities-dd .dd-panel a{ padding:8px 10px; border-radius:8px; color:var(--ink) }
.cities-dd .dd-panel a:hover{ background:#f7fbff }
.cities-dd .dd-panel a.active{ background:#eaf7fc }

/* Header CTA (keep only Enquire for a clean menu) */
.nav-cta{ display:flex; align-items:center }
.btn-quote{
  display:inline-block; padding:12px 18px; border-radius:var(--radius); border:0;
  background:linear-gradient(180deg, var(--primary), var(--primary-dk));
  color:#fff; font-weight:800; box-shadow:0 8px 18px rgba(14,165,233,.22);
}
.btn-quote:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(14,165,233,.28) }

/* Burger (mobile) */
.btn-burger{
  display:none; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm);
  padding:8px 10px; font-size:18px; line-height:1; cursor:pointer;
}

/* =========
   MOBILE DRAWER
   ========= */
.nav-drawer{
  border:none; border-radius:var(--radius); padding:0; width:min(92vw,420px); max-width:92vw;
  margin:0; inset:auto 12px 12px auto;
}
.nav-drawer::backdrop{ background:rgba(15,23,42,.55) }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px; border-bottom:1px solid var(--border); background:#fff;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.drawer-brand{ font-weight:800; color:var(--ink) }
.drawer-close{
  border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); padding:6px 10px; cursor:pointer; font-weight:700;
}
.drawer-nav{ display:block; padding:10px 12px }
.drawer-link{
  display:block; padding:10px; border-radius:10px; color:var(--ink); font-weight:600;
}
.drawer-link.active{ background:#eaf7fc }
.drawer-group{
  padding:6px; border:1px solid var(--border); border-radius:10px; margin:6px 0;
}
.drawer-group > summary{ cursor:pointer; font-weight:700; color:var(--ink); list-style:none }
.drawer-group > summary::-webkit-details-marker{ display:none }
.drawer-group > summary::before{ content:"▸ "; display:inline-block; transition:transform .2s }
.drawer-group[open] > summary::before{ transform:rotate(90deg) }
.drawer-sub{ display:grid; gap:6px; padding:8px 6px 4px 20px }
.drawer-sub a{ display:block; padding:8px; border-radius:8px; color:var(--ink) }
.drawer-sub a.active{ background:#eaf7fc }
.drawer-cta{ padding:10px 12px 14px; display:grid; gap:8px }
.drawer-cta .btn, .drawer-cta .btn-ghost{
  border-radius:var(--radius); box-shadow:0 4px 12px rgba(15,23,42,.08);
}

/* Mobile visibility */
@media (max-width:900px){
  .nav-links{ display:none }
  .nav-cta{ display:none }
  .btn-burger{ display:inline-block }
}

/* iOS safe-area for sticky CTA */
@supports(padding:max(0px)){ .cta-sticky{ padding-bottom:max(12px, env(safe-area-inset-bottom)) } }

/* =========
   SECTIONS & CARDS
   ========= */
.section{ padding:28px 0 }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.feat-list{ margin:0 0 6px 0; padding-left:20px }
.fineprint{ color:var(--muted); font-size:12px; margin-top:6px }

/* =========
   HERO
   ========= */
.hero{
  display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:center; margin-top:12px;
  background:
    radial-gradient(800px 280px at 18% 8%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border:1px solid var(--border); border-radius:20px; padding:28px;
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}
.hero h1{ font-size:38px; line-height:1.2; margin:0 0 8px; letter-spacing:.2px }
.hero h1::after{
  content:""; display:block; width:56px; height:4px; margin-top:10px; border-radius:999px;
  background:linear-gradient(90deg, var(--primary), #6fd0ff);
}
.sub{ margin:4px 0 10px; color:var(--ink) }
.price-badge{
  display:inline-block; background:var(--primary); color:#fff; font-weight:800;
  border-radius:999px; padding:10px 14px; margin:10px 0;
}
.badges{ display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 }
.badge{ background:#f2f7fb; padding:8px 12px; border-radius:999px; font-size:14px }
img.round{ border-radius:16px; border:1px solid var(--border) }

/* =========
   LEAD FORM
   ========= */
form{ display:grid; gap:10px }
input, select, textarea{
  width:100%; padding:12px; border:1px solid #dbe4ee; border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color:#9dd8f5; box-shadow:0 0 0 4px rgba(14,165,233,.12);
}
.lead-grid{ display:grid; gap:22px; grid-template-columns:1.1fr .9fr; align-items:start }
.form-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 16px 18px; box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.btn{
  display:inline-block; padding:12px 18px; border-radius:var(--radius); border:0;
  background:linear-gradient(180deg, var(--primary), var(--primary-dk));
  color:#fff; font-weight:800; box-shadow:0 8px 18px rgba(14,165,233,.22);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(14,165,233,.28) }
.btn-ghost{
  display:inline-block; padding:10px 14px; border-radius:var(--radius);
  border:1px solid #dbe8f2; background:#fff; color:var(--ink); font-weight:700;
}
.btn-ghost:hover{ background:#f7fbff }
.btn-wide{ width:100% }
.assurance{ font-size:12px; color:var(--muted); margin:8px 0 0 }

/* =========
   GALLERY
   ========= */
.gallery{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) }
.gallery img{
  width:100%; height:auto; border:1px solid var(--border); border-radius:14px;
  cursor:zoom-in; transition: transform .18s ease, box-shadow .18s ease;
}
.gallery img:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.12) }

/* Lightbox */
#lightbox{ border:none; border-radius:16px; max-width:min(92vw,980px); padding:0; overflow:hidden }
#lightbox::backdrop{ background:rgba(15,23,42,.55) }
#lightbox img{ display:block; max-width:100%; height:auto }
#lightbox p{ margin:8px 12px 14px; color:var(--muted); font-size:14px }
.dlg-close{
  position:absolute; right:10px; top:10px; border:0; background:#fff; border-radius:10px;
  padding:6px 10px; box-shadow:0 6px 18px rgba(15,23,42,.2); cursor:pointer; font-weight:700;
}

/* =========
   STICKY CTA (mobile)
   ========= */
.cta-sticky{
  position:fixed; left:0; right:0; bottom:12px;
  display:none; gap:10px; justify-content:center; z-index:998; pointer-events:none;
}
.cta-sticky .btn, .cta-sticky .btn-ghost{ pointer-events:auto; border-radius:14px; box-shadow:0 12px 26px rgba(15,23,42,.14) }

/* =========
   FAQ
   ========= */
.faq-section{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.faq-group details{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px }
.faq-group details + details{ margin-top:10px }
.faq-group summary{ cursor:pointer; font-weight:700; color:var(--ink); outline:none; list-style:none }
.faq-group summary::-webkit-details-marker{ display:none }
.faq-group summary::marker{ content:'' } /* Firefox */
.faq-group summary::before{ content:"▸ "; display:inline-block; transition:transform .2s }
.faq-group details[open] summary::before{ transform:rotate(90deg) }

/* =========
   FOOTER
   ========= */
.site-footer{
  margin:48px 0 24px;
  background:
    radial-gradient(900px 220px at 10% -10%, #f7fbff 0%, transparent 50%),
    radial-gradient(900px 220px at 90% 110%, #f7fbff 0%, transparent 50%),
    var(--surface);
  border-top:1px solid var(--border);
  color:var(--muted); font-size:14px;
}
.site-footer.wrap{ max-width:1120px; margin:40px auto 24px; padding:0 16px }
.f-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); text-align:left; align-items:start; justify-items:start }
.f-title{ font-weight:800; color:var(--ink); margin:0 0 6px; font-size:15px; letter-spacing:.2px }
.f-list{ margin:0; padding:0; list-style:none }
.f-list li{ margin:6px 0 }
.f-list a{ color:var(--ink); opacity:.9 }
.f-list a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px }
.f-small{ color:var(--muted); font-size:12px; margin-top:10px }
.f-hr{ border:none; border-top:1px solid var(--border); margin:16px 0 8px }
.f-cols{ columns:2; column-gap:24px }
@media (max-width:640px){ .f-cols{ columns:1 } }

/* Footer brand lockup */
.f-brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); margin:0 0 6px }
.f-brand img{ display:block; width:28px; height:28px; border-radius:6px }

/* Footer CTA & bottom bar */
.f-cta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.f-cta .btn, .f-cta .btn-ghost{ border-radius:var(--radius-sm); box-shadow:0 6px 16px rgba(15,23,42,.08) }
.f-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0 0; margin-top:6px; border-top:1px solid var(--border);
}
.f-list-inline{ list-style:none; margin:0; padding:0; display:flex; gap:14px; flex-wrap:wrap }
.f-list-inline li{ margin:0 }

/* Optional footer highlight chips */
.f-highlights{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0 }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fbfdff; color:var(--ink); font-weight:600; font-size:13px;
}

/* =========
   RESPONSIVE
   ========= */
@media (max-width:1020px){ .hero h1{ font-size:32px } }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr }
  .lead-grid{ grid-template-columns:1fr }
  .cta-sticky{ display:flex }
}
@media (max-width:700px){
  .wrap{ padding:0 14px }
  .hero{ padding:22px }
  .price-badge{ padding:8px 12px }
  .topbar .email{ display:none }     /* in topbar: hide email on small screens */
  .f-cta{ flex-direction:column; align-items:flex-start }
  .f-bottom{ flex-direction:column; align-items:flex-start; gap:8px }
}
/* Make summary layout clean: label + caret */
.cities-dd > summary{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; border-radius:var(--radius-sm);
}
.cities-dd > summary .summary-link{
  font-weight:700; color:var(--ink);
}
.cities-dd.active > summary .summary-link{ color:var(--primary); }
.cities-dd > summary .summary-link:hover{ text-decoration:underline; text-underline-offset:4px }

/* Caret button for opening the dropdown */
.cities-dd > summary .caret{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:1px solid var(--border);
  border-radius:8px; background:#fff; cursor:pointer; font-size:12px;
}
.cities-dd[open] > summary .caret{ transform:rotate(180deg) }