:root {
  --ink:#12201e;
  --muted:#52615e;
  --deep:#11201f;
  --lagoon:#0f766e;
  --bay:#0ea5a5;
  --copper:#b96b35;
  --mint:#d7f2ec;
  --paper:#fffdf8;
  --line:#d9e3df;
  --soft:#f1f7f5;
  --shadow:0 22px 60px rgba(15, 32, 31, .16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#0f1f1d;color:#f8fafc}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;background:#f7fbf9;color:var(--ink);line-height:1.65;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 34px));margin:0 auto}
.topbar{background:#0d1716;color:#e7fffa;border-bottom:1px solid rgba(255,255,255,.12);font-weight:800;font-size:.92rem}
.topbar .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:8px 0;flex-wrap:wrap}
.site-head{position:sticky;top:0;z-index:20;background:rgba(247,251,249,.94);color:#172825;backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,118,110,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:950;color:#12201e;min-width:235px}
.brand img{width:56px;height:56px;border-radius:14px;background:#ffffff;color:#12201e;object-fit:cover;border:1px solid #dbe7e2;box-shadow:0 8px 18px rgba(15,32,31,.12)}
.brand span{display:block;font-size:1.02rem;line-height:1.1}
.brand small{display:block;color:#62706d;font-size:.78rem;font-weight:800;margin-top:2px}
.links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.links a{padding:9px 10px;border-radius:9px;color:#263b37;font-weight:840;font-size:.91rem}
.links a:hover{background:#d7f2ec;color:#0b4f49}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:#0f766e;color:#ffffff;padding:12px 17px;font-weight:900;box-shadow:0 12px 28px rgba(15,118,110,.24);cursor:pointer}
.btn:hover{transform:translateY(-1px);background:#0b5f59;color:#ffffff}
.btn.alt{background:#fff7ed;color:#6b3218;border:1px solid #fed7aa;box-shadow:none}
.btn.dark{background:#12201e;color:#f9fafb}
.btnrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}
.hero{background:radial-gradient(circle at 15% 5%, rgba(14,165,165,.28), transparent 34%), linear-gradient(135deg,#10201f 0%,#173734 54%,#164e4b 100%);color:#ffffff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.86fr);gap:38px;align-items:center;min-height:640px;padding:58px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#0f766e;background:#e2fbf5;border:1px solid #bdece4;border-radius:999px;padding:6px 10px}
.hero .eyebrow{color:#eafffa;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
h1,h2,h3{line-height:1.08;margin:0 0 14px;letter-spacing:0;color:inherit}
h1{font-size:clamp(2.2rem,4vw,4.7rem);max-width:980px}
h2{font-size:clamp(1.62rem,2.2vw,2.55rem)}
h3{font-size:1.22rem}
p{margin:0 0 16px;color:inherit}
.hero p{font-size:1.12rem;color:#e2f2ee;max-width:760px}
.hero-card,.photo-card,.tile,.side-card,.lead-card,.content-card{background:#ffffff;color:#172825;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.hero-card{background:rgba(255,255,255,.1);color:#ffffff;border-color:rgba(255,255,255,.22);padding:12px;backdrop-filter:blur(8px)}
.hero-card img{border-radius:14px;aspect-ratio:16/10;object-fit:cover;width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.stat{background:rgba(255,255,255,.1);color:#ffffff;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px}
.stat strong{display:block;font-size:1.32rem;color:#ffffff}
.stat span{color:#d8eee9;font-size:.86rem;font-weight:780}
.section{padding:72px 0;background:#f7fbf9;color:#172825}
.section.alt{background:#ffffff;color:#172825}
.section.dark{background:#10201f;color:#f8fafc}
.section-head{display:grid;gap:8px;margin-bottom:28px;max-width:850px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.lede{font-size:1.06rem;color:#52615e;max-width:860px}
.dark .lede,.section.dark p{color:#d9ece8}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{padding:22px;transition:transform .16s ease, box-shadow .16s ease;color:#172825;background:#ffffff}
.tile:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(15,32,31,.18)}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:13px;margin-bottom:15px;background:#d7f2ec;color:#12201e}
.go{display:inline-flex;font-weight:950;color:#0f766e;margin-top:4px}
.article{padding:68px 0;background:#ffffff;color:#172825}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.content-card{padding:30px;background:#ffffff;color:#172825}
.content-card h2{margin-top:34px;color:#12201e}
.content-card h2:first-child{margin-top:0}
.content-card p,.content-card li{color:#30413d}
.content-card ul{padding-left:22px;margin:0 0 20px}
.side{position:sticky;top:100px;display:grid;gap:16px}
.side-card{padding:20px;background:#ffffff;color:#172825}
.side-card img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;margin-bottom:12px}
.lead-card{padding:26px;background:#ffffff;color:#172825}
.leadform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.leadform label{display:grid;gap:6px;font-weight:820;color:#2d403d;font-size:.94rem}
.leadform input,.leadform textarea,.leadform select{width:100%;border:1px solid #cfded9;border-radius:12px;padding:12px 13px;font:inherit;background:#ffffff;color:#12201e}
.leadform textarea{min-height:132px;resize:vertical}
.leadform .full{grid-column:1/-1}
.leadform .consent{display:flex;gap:10px;align-items:flex-start;font-weight:650;color:#4b5f5b;line-height:1.45}
.leadform .consent input{width:auto;margin-top:5px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.brand-stamp{position:relative;overflow:hidden}
.brand-stamp:after{content:"Foster City Garage Doors - (650) 402-2110";position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px);padding:7px 10px;border-radius:999px;color:#ffffff;background:rgba(15,32,31,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);font-size:.72rem;font-weight:850;box-shadow:0 8px 18px rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faq{display:grid;gap:12px}
.faq details{background:#ffffff;color:#172825;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(15,32,31,.08)}
.faq summary{font-weight:920;cursor:pointer;color:#12201e}
.footer{background:#0f1f1d;color:#e8fffa;padding:46px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:24px}
.footer a{color:#f9fafb}
.footer p,.footer li{color:#cfe4df}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footbrand{display:flex;gap:12px;align-items:center;font-weight:950;color:#ffffff;margin-bottom:12px}
.footbrand img{width:58px;height:58px;border-radius:14px;background:#ffffff;color:#12201e;object-fit:cover}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;color:#bdd3ce;font-size:.9rem}
@media (max-width:920px){.hero-grid,.article-grid,.footer-grid{grid-template-columns:1fr}.side{position:static}.grid,.grid.two{grid-template-columns:1fr 1fr}.links{justify-content:flex-start}}
@media (max-width:640px){.topbar .wrap,.nav{align-items:flex-start}.nav{display:grid}.links{display:grid;grid-template-columns:1fr 1fr;width:100%}.links a,.btn{width:100%}.hero-grid{min-height:auto;padding:42px 0}.grid,.grid.two,.stats,.leadform{grid-template-columns:1fr}h1{font-size:2.24rem}.section,.article{padding:48px 0}.brand-stamp:after{font-size:.64rem}}