/* ───────────────────────────────────────────────
   Crestline — AutoLocks-like Mobile FLOW (no color changes)
   Layout/spacing/behavior only; uses your existing variables/colors.
   Place AFTER your main CSS.
   ─────────────────────────────────────────────── */

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Container */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }

/* Typography */
h1{ font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); letter-spacing: -.02em; line-height: .98; margin: 0 0 .4rem; }
h2{ font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 0 0 .4rem; }
h3{ font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); margin: 0 0 .4rem; }
.small{ font-size: .95rem; opacity: .9; }

.stack-sm > * + *{ margin-top: .5rem; }
.stack-md > * + *{ margin-top: 1rem; }
.stack-lg > * + *{ margin-top: 1.5rem; }

/* Header (works with .site-topbar OR .site-header) */
.site-topbar, .site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.site-topbar .bar, .site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
}
.brand, .site-topbar .brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--ink, #0F2742); font-weight: 800;
}
.brand img, .site-topbar .brand img { height: 34px; width: auto; border-radius: 6px; }
.site-nav, .site-topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.site-nav a, .site-topbar nav a { text-decoration: none; color: var(--ink, #0F2742); font-weight: 600; }
.top-cta a {
  display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: 999px;
  background: var(--ink, #0F2742); color: #fff; text-decoration: none; font-weight: 800;
  box-shadow: 0 6px 16px rgba(14,42,71,.18);
}

/* Hero (supports .hero OR .hero-block) */
.hero, .hero-block {
  position: relative; isolation: isolate; text-align: center;
  color: #fff; min-height: 70vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: 5rem 1rem;
}
.hero .media, .hero-block .media { position: absolute; inset: 0; z-index: -1; }
.hero picture, .hero img, .hero-block picture, .hero-block img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero::after, .hero-block::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}
.hero h1, .hero p, .hero-block .title, .hero-block .sub { position: relative; z-index: 1; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.hero h1, .hero-block .title { font-weight: 800; letter-spacing: .5px; }
.hero p, .hero-block .sub { margin-top: 1rem; font-weight: 600; font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.8rem;
  border-radius: 8px; font-weight: 800; text-decoration: none; border: 2px solid transparent;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.primary, .btn-primary{
  background: var(--ink, #0F2742); color: #fff; border-color: var(--ink, #0F2742);
  box-shadow: 0 6px 18px rgba(14,42,71,.18);
}
.btn.outline, .btn-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.outline:hover, .btn-outline:hover{ border-color: #fff; }

/* Cards */
.card-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.card{ border:1px solid #e5e7eb; border-radius:12px; padding:1.1rem; background:#fff; box-shadow:0 1px 0 rgba(14,42,71,.12); }

/* Footer */
.site-footer{ text-align:center; padding: 1.5rem 0; margin-top: 3rem; }

/* Floating call button */
.call-now {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--gold);
  color: var(--navy);
  font-size: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: 0.3s;
  z-index: 2000;
}
.call-now:hover {
  background: var(--navy);
  color: #fff;
}

/* Locations/cities (optional classes if present) */
.locations-intro{ margin-top:2rem; text-align:center; padding:0 1rem; }
.locations-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:1rem; margin-top:2rem; padding:1rem 0 3rem; text-align:center;
}
.locations-grid a{
  display:block; background:#f7f9fb; color:var(--ink, #0F2742); font-weight:600; padding:1rem;
  border-radius:8px; text-decoration:none; border:1px solid #e0e5e9; transition: all .25s ease;
}
.locations-grid a:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }

.city-content{ padding: 2rem 1rem 4rem; max-width: 800px; margin: 0 auto; text-align: left; }
.service-list{ list-style:none; padding-left:0; margin-bottom:2rem; }
.service-list li{ background:#f7f9fb; border:1px solid #e0e5e9; padding:.75rem 1rem; margin-bottom:.5rem; border-radius:6px; }
.cta-box{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; }

/* Responsive */
@media (max-width: 768px){
  .site-topbar .bar, .site-header{ flex-direction:column; align-items:flex-start; gap:.8rem; padding:1rem; }
  .brand, .site-topbar .brand{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .site-nav, .site-topbar nav{ width:100%; display:flex; flex-wrap:wrap; gap:1rem; }
  .hero h1, .hero-block .title{ font-size: 2rem; }
  .btn{ padding:.7rem 1.4rem; }
}