:root{
  --brown:#5b3000; --steel:#235789; --leather:#66462c; --olive:#726953; --lightblue:#82a6b1;
  --ink:#0e1216; --bg:#ffffff; --muted:#5b6672; --border:#e7edf3; --bg-soft:#f7fafc;
  --accent: var(--steel);
  --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px;
  --shadow-sm: 0 2px 6px rgba(16,24,40,.05);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
img, picture, video, canvas, svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
h1{font-size:48px;line-height:1.15;margin:0 0 10px}
h2{font-size:34px;margin:0 0 14px}
h3{font-size:20px;margin:0 0 8px}
p.lead{font-size:18px;color:#3b4753}
.badge{background:#eef3ff;color:#29415b;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}

.btn{display:inline-block;padding:14px 18px;border-radius:14px;font-weight:800;letter-spacing:.2px;transition:.2s transform ease,.2s box-shadow ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-md)}
.btn-outline{border:2px solid var(--accent);color:var(--accent);background:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}

.utility{background:#0e1216;color:#e6ecf2;font-size:14px}
.utility .bar{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.utility a{color:#cfe3ff}
.utility .left,.utility .right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

.header{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid var(--border)}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:46px;width:auto}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{padding:10px 12px;border-radius:10px;color:#18202a}
.nav a:hover{background:var(--bg-soft)}
.nav a.cta{background:var(--accent);color:#fff;font-weight:800}

.hero{position:relative;background:var(--bg-soft)}
.hero--image{background-size:cover;background-position:center}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;min-height:420px}
.hero .panel{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.hero .kv{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.0) 100%);opacity:.0}
.hero .inner{position:relative;}

.quicklinks{background:#0e1216;color:#e6ecf2}
.quicklinks .row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:14px 0}
.quicklinks a{color:#e6ecf2;padding:10px 14px;border:1px solid #2a323a;border-radius:12px}
.quicklinks a:hover{background:#1a2027}

.grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;max-width:100%}
@media (max-width:980px){.hero .container{grid-template-columns:1fr;min-height:auto} .grid-3{grid-template-columns:1fr} h1{font-size:40px}}

.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);min-width:0}
.card:hover{transform:translateY(-2px);transition:.18s ease}
.card .media{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#f4f6f8;box-shadow: inset 0 0 0 1px var(--border)}
.card .media img{width:100%;height:100%;object-fit:cover;display:block}

.promo{background:var(--accent);color:#fff;padding:18px 0}
.promo .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.promo strong{font-size:18px}

.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}

.form{display:grid;gap:14px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
.form .row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
.form .row-3{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
@media (max-width:980px){.form .row,.form .row-3{grid-template-columns:1fr}}

.footer{background:#0f1418;color:#eaeef2;margin-top:64px}
.footer a{color:#cfe3ff}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:30px 0}
.footer .bottom{border-top:1px solid #252b31;padding:12px 0;color:#9fb0c2;font-size:14px}

.sticky-cta{position:fixed;bottom:16px;right:16px;display:flex;gap:10px;z-index:9999}
.sticky-cta a{box-shadow:var(--shadow-md)}

.hero.home-hero{background-image:url('../img/hero-home-tampa.jpg')}
.hero.emergency-hero{background-image:url('../img/emergency-van-night.jpg')}
.hero.springs-hero{background-image:url('../img/springs-detail.jpg')}
.hero.opener-hero{background-image:url('../img/opener-upgrade.jpg')}
.hero.install-hero{background-image:url('../img/installation-hero.jpg')}
.hero.maintenance-hero{background-image:url('../img/tuneup-checklist.png')}
.hero.commercial-hero{background-image:url('../img/commercial-bay-doors.jpg')}
.hero.costs-hero{background-image:url('../img/pricing-visual.png')}
.hero.company-hero{background-image:url('../img/family-team.jpg')}
.hero.areas-hero{background-image:url('../img/map-tampa.png')}


/* Fix logo scale & spacing */
.logo img{height:56px;width:auto}
.topnav{padding:18px 0}

/* Ensure hero background shows and panel doesn't exceed width */
.hero.hero--image{background-size:cover;background-position:center;position:relative}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;min-height:460px}
@media (max-width:980px){.hero .container{grid-template-columns:1fr;min-height:auto}}

/* Prevent large inline images (like logos) in content from exceeding layout */
.container img{max-width:100%;height:auto}