/* ══════════════════════════════════════════════
   VeloPath Garage Door Repair — shared styles
   Every page loads this file. Nothing page specific
   belongs here and no page should redefine it.
   ══════════════════════════════════════════════ */

:root {
  --ink:#0B1F3A; --navy:#16355C; --signal:#F4B63F;
  --paper:#FBFAF7; --slate:#5C6B80; --rule:#E2DED6; --white:#fff;
  --line-dark:#2C466E;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display {
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 78;
  font-weight:800; letter-spacing:-0.02em; line-height:1.04;
}

a { color:inherit; }
img { max-width:100%; display:block; }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ── Header ── */
header { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.logo {
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 80;
  font-weight:800; font-size:24px; text-decoration:none;
}
.logo em { font-style:normal; color:var(--signal); }
.bar nav { display:flex; gap:26px; font-size:15px; color:var(--slate); }
.bar nav a { text-decoration:none; padding:4px 0; }
.bar nav a:hover { color:var(--ink); }
.bar nav a.on { color:var(--ink); font-weight:600; border-bottom:2px solid var(--signal); }
.callbtn {
  background:var(--ink); color:var(--white); text-decoration:none;
  font-weight:600; font-size:16px; padding:11px 20px; border-radius:6px; white-space:nowrap;
}
.callbtn:hover { background:var(--navy); }

/* ── Call buttons ── */
.big-call {
  display:inline-flex; flex-direction:column; text-decoration:none;
  background:var(--ink); color:var(--white); padding:16px 28px; border-radius:8px;
}
.big-call small { font-size:13px; color:#A9BBD4; letter-spacing:.02em; }
.big-call strong {
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 78;
  font-weight:800; font-size:32px; letter-spacing:-0.01em; line-height:1.2;
}
.ghost {
  display:inline-block; text-decoration:none; padding:16px 24px;
  border:1px solid var(--ink); border-radius:8px; font-weight:600;
}
.ghost:hover { background:var(--ink); color:var(--white); }

/* ── Hero, home page only ── */
.hero { padding:74px 0 64px; }
.hero h1 { font-size:66px; }
.hero p.lede { margin-top:22px; font-size:20px; color:var(--navy); max-width:26em; }
.hero-actions { margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.assurance { margin-top:34px; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:15px; color:var(--navy); }
.assurance span { border-left:3px solid var(--signal); padding-left:12px; }

/* ── Page header, inner pages ── */
.pagehead { padding:66px 0 10px; }
.pagehead h1 { font-size:54px; }
.pagehead p { margin-top:18px; font-size:20px; color:var(--navy); max-width:34em; }

/* ── Sections ── */
section { padding:66px 0; border-top:1px solid var(--rule); }
section.plain { border-top:none; }
.eyebrow { font-size:15px; color:var(--slate); margin-bottom:10px; }
section h2 { font-size:42px; }
section p.intro { margin-top:16px; font-size:19px; color:var(--navy); max-width:34em; }

/* ── Three column blocks ── */
.cols3 { margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.cols2 { margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:36px; }
.block { border-top:2px solid var(--ink); padding-top:18px; }
.block h3 { font-size:26px; }
.block p { margin-top:10px; color:var(--slate); font-size:16px; }
.block ul { margin-top:12px; padding-left:18px; color:var(--slate); font-size:16px; }
.block li { margin-bottom:5px; }

/* ── Numbered steps ── */
.steps { margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; counter-reset:s; }
.step { counter-increment:s; }
.step h3 { font-size:23px; margin-top:8px; }
.step p { margin-top:8px; color:var(--slate); font-size:16px; }
.step::before {
  content:counter(s); font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 78;
  font-weight:800; font-size:28px; color:var(--signal);
}

/* ── Prose ── */
.prose { margin-top:26px; max-width:38em; }
.prose p { margin-bottom:18px; font-size:18px; }
.prose h3 { font-size:26px; margin:34px 0 12px; }

/* ── Dark section ── */
.dark { background:var(--ink); color:var(--paper); border-top:none; }
.dark h2, .dark h3 { color:var(--white); }
.dark .eyebrow { color:#A9BBD4; }
.dark p.intro, .dark p { color:#A9BBD4; }
.metro { margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px; }
.metro span { display:block; padding:11px 0; border-top:1px solid var(--line-dark); font-size:16px; color:var(--paper); }
.dark .note { margin-top:26px; font-size:16px; }

/* ── Questions ── */
.faq { margin-top:34px; max-width:46em; }
.qa { border-top:1px solid var(--rule); padding:22px 0; }
.qa h3 { font-size:22px; }
.qa p { margin-top:9px; color:var(--slate); font-size:16px; }

/* ── Form ── */
.card { background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:28px; }
.card h2 { font-size:28px; }
.card p.sub { font-size:15px; color:var(--slate); margin-top:8px; }
.field { margin-top:16px; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 13px; border:1px solid var(--rule); border-radius:7px;
  font-family:inherit; font-size:16px; background:var(--paper); color:var(--ink);
}
.field textarea { min-height:92px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--navy); }
.submit {
  margin-top:20px; width:100%; padding:14px; border:none; border-radius:7px;
  background:var(--signal); color:var(--ink); font-family:inherit;
  font-size:17px; font-weight:600; cursor:pointer;
}
.submit:hover { filter:brightness(.95); }
.submit:disabled { opacity:.6; cursor:not-allowed; }
.formnote { margin-top:12px; font-size:14px; color:var(--slate); }
.formnote a { font-weight:600; }

/* ── Final CTA ── */
.final { background:var(--navy); color:var(--white); text-align:center; border-top:none; }
.final h2 { color:var(--white); font-size:44px; }
.final p { margin-top:14px; color:#C3D2E6; font-size:19px; }
.final .big-call { margin-top:28px; background:var(--signal); color:var(--ink); align-items:center; }
.final .big-call small { color:#6B5417; }

/* ── Footer ── */
footer { background:var(--ink); color:#A9BBD4; padding:42px 0 34px; font-size:15px; }
.foot { display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.foot a { color:var(--white); text-decoration:none; }
.foot .head { color:var(--white); font-weight:600; margin-bottom:8px; }
.foot ul { list-style:none; }
.foot li { margin-bottom:5px; }
.foot .legal { width:100%; border-top:1px solid var(--line-dark); padding-top:20px; margin-top:14px; font-size:14px; }

/* ── Mobile sticky call bar ── */
.mobilecall { display:none; }

@media (max-width:900px) {
  .hero h1 { font-size:44px; }
  .pagehead h1 { font-size:38px; }
  section h2, .final h2 { font-size:32px; }
  .cols3, .cols2, .steps { grid-template-columns:1fr; }
  .metro { grid-template-columns:repeat(2,1fr); }
  .bar nav { display:none; }
  section { padding:48px 0; }
  .hero { padding:52px 0 44px; }
  body { padding-bottom:74px; }
  .mobilecall {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ink); padding:12px 16px;
  }
  .mobilecall a {
    display:block; background:var(--signal); color:var(--ink); text-decoration:none;
    font-weight:700; font-size:18px; padding:13px; border-radius:7px; text-align:center;
  }
}