/* Midland Window Guide — one stylesheet for the whole site.
   Before this, 52 pages each carried their own inline <style> block, so a change
   to the header meant editing 52 files. That is why the site froze in May.
   Everything visual lives here now. */

:root {
  --blue-900: #0c2340;
  --blue-700: #14508c;
  --blue-600: #1a66b3;
  --blue-100: #dbeafe;
  --blue-50:  #f0f6ff;
  --ink:      #14202e;
  --ink-600:  #47586b;
  --ink-400:  #7a8899;
  --line:     #dfe6ee;
  --bg:       #ffffff;
  --bg-soft:  #f6f9fc;
  --amber:    #b45309;
  --green:    #0f7a4d;
  --radius:   12px;
  --wrap:     1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--blue-700); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px; z-index: 100; background: #fff; padding: 10px 16px;
  border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 20px; height: 62px; }
.logo {
  font-weight: 800; font-size: 1.05rem; color: var(--blue-900);
  text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--blue-600); }
.logo-mark { margin-right: 4px; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a {
  color: var(--ink-600); text-decoration: none; font-size: .93rem; font-weight: 600;
}
.nav-links a:hover { color: var(--blue-700); }
.nav-call {
  background: var(--blue-600); color: #fff; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  white-space: nowrap;
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--blue-50) 0%, #fff 70%);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 48px;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.15; margin: 0 0 16px; letter-spacing: -.02em; color: var(--blue-900);
}
.hero .lede { font-size: 1.15rem; color: var(--ink-600); max-width: 62ch; margin: 0 0 26px; }
.eyebrow {
  display: inline-block; background: var(--blue-100); color: var(--blue-700);
  font-size: .8rem; font-weight: 700; padding: 5px 13px; border-radius: 999px;
  margin-bottom: 16px; letter-spacing: .01em;
}

/* ---------- content ---------- */
.prose { max-width: 74ch; margin: 0 auto; padding: 44px 20px; }
.prose h2 {
  font-size: 1.6rem; margin: 42px 0 14px; color: var(--blue-900); letter-spacing: -.01em;
}
.prose h3 { font-size: 1.2rem; margin: 30px 0 8px; color: var(--blue-900); }
.prose p, .prose li { color: var(--ink-600); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }

.callout {
  background: var(--bg-soft); border-left: 4px solid var(--blue-600);
  padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; margin: 26px 0;
}
.callout.warn { border-left-color: var(--amber); background: #fffbf5; }
.callout p:last-child { margin-bottom: 0; }
.callout p:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--bg-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400); }
.table-scroll { overflow-x: auto; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 30px 0; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  background: #fff; text-decoration: none; display: block; color: inherit;
  transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--blue-600); transform: translateY(-2px); }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--blue-900); }
.card p { margin: 0; font-size: .93rem; color: var(--ink-600); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 10px;
  font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-700); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hero .btn-ghost { border-color: var(--blue-600); color: var(--blue-700); }

/* ---------- form ---------- */
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; background: #fff; box-shadow: 0 2px 20px rgba(12,35,64,.06);
  max-width: 560px; margin: 0 auto;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 9px; font-size: 16px; font-family: inherit; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue-600); border-color: var(--blue-600); }
.field textarea { min-height: 96px; resize: vertical; }
.field .hint { font-size: .82rem; color: var(--ink-400); margin-top: 4px; }
/* Honeypot — hidden from people, visible to bots. Not display:none, which some
   bots skip; off-screen with aria-hidden is the more reliable trap. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: 9px; font-weight: 600; display: none; }
.form-status.ok  { display: block; background: #eafaf1; color: var(--green); border: 1px solid #b7e4cd; }
.form-status.err { display: block; background: #fff2f2; color: #b42318; border: 1px solid #fbd0d0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--blue-900) 0%, #163a63 100%);
  color: #fff; padding: 54px 0; text-align: center; margin-top: 60px;
}
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 10px; }
.cta-band p { color: #c7d8ec; max-width: 56ch; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 44px 0 26px; font-size: .93rem; }
.footer-inner { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
.footer a { display: block; color: var(--ink-600); text-decoration: none; margin-bottom: 7px; }
.footer a:hover { color: var(--blue-700); }
.footer p { color: var(--ink-600); margin: 8px 0 0; }
.footer-call { font-weight: 800; color: var(--blue-700) !important; font-size: 1.05rem; }
.fine { font-size: .82rem; color: var(--ink-400); }
.legal { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; }
.legal p { margin: 0 0 8px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-inner { gap: 12px; }
  .nav-call { margin-left: auto; }
  body { font-size: 16px; }
  .hero { padding: 40px 0 34px; }
}

/* Narrow phones. Measured at 413px: the logo (213px) plus the call button
   (168px) exceeded the 373px content box, so the button pushed past the wrap
   padding and sat flush against the screen edge. Both shrink here so the two
   always fit with room to spare — the tap-to-call button is the highest-value
   element on a mobile home-services page and must never be clipped. */
@media (max-width: 620px) {
  .wrap { padding: 0 14px; }
  .nav-inner { gap: 8px; }
  .logo { font-size: .93rem; min-width: 0; }
  .nav-call { padding: 8px 12px; font-size: .84rem; flex: 0 0 auto; }
}

/* Very narrow (iPhone SE and similar): drop the town name from the wordmark
   rather than let anything clip. "Window Guide" still reads as the brand. */
@media (max-width: 400px) {
  .logo .logo-town { display: none; }
  .logo { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}