/* 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: #17352f;
  --blue-700: #275c50;
  --blue-600: #337264;
  --blue-100: #dce9e4;
  --blue-50:  #f0f4ef;
  --ink:      #20241f;
  --ink-600:  #555d55;
  --ink-400:  #7b827a;
  --line:     #dcded7;
  --bg:       #fbfaf6;
  --bg-soft:  #f2f0e8;
  --amber:    #a76028;
  --green:    #246b4d;
  --cream:    #f6f1e6;
  --copper:   #b96632;
  --radius:   18px;
  --wrap:     1180px;
  --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(251,250,246,.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 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #f8f4e9 0%, #edf2ed 100%);
  border-bottom: 1px solid var(--line);
  padding: 70px 0 66px;
}
.hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(51,114,100,.16);
  border-radius: 50%;
  left: -260px;
  top: -210px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: clamp(38px, 6vw, 78px);
  align-items: center;
}
.hero h1 {
  max-width: 760px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.25rem);
  font-weight: 500;
  line-height: .98;
  margin: 0 0 24px;
  letter-spacing: -.045em;
  color: var(--blue-900);
}
.hero .lede { font-size: 1.13rem; color: var(--ink-600); max-width: 57ch; margin: 0 0 30px; }
.eyebrow {
  display: inline-block;
  color: var(--blue-700);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 22px;
  letter-spacing: .14em;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-quiet { color: var(--blue-900); border-bottom: 1px solid currentColor; border-radius: 0; padding: 9px 0; }
.hero-assurances { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 19px; color: var(--ink-600); font-size: .85rem; }
.hero-assurances span::before { content: "\2713"; color: var(--blue-600); font-weight: 900; margin-right: 7px; }
.transparency { max-width: 62ch; margin: 24px 0 0; padding-top: 19px; border-top: 1px solid rgba(23,53,47,.14); color: var(--ink-600); font-size: .82rem; line-height: 1.55; }
.hero-visual { position: relative; min-height: 530px; border-radius: 180px 18px 18px 18px; overflow: hidden; box-shadow: 0 28px 70px rgba(23,53,47,.18); background: var(--blue-900); }
.hero-visual img { width: 100%; height: 100%; min-height: 530px; position: absolute; inset: 0; object-fit: cover; object-position: center 35%; filter: saturate(.78) contrast(1.02); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,39,33,.66), transparent 55%); }
.hero-note { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 24px; padding: 19px 22px; border: 1px solid rgba(255,255,255,.36); border-radius: 12px; color: #fff; background: rgba(23,53,47,.78); backdrop-filter: blur(9px); }
.hero-note strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.3; }
.note-kicker { display: block; margin-bottom: 5px; color: #d5e8e0; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- 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: 46px 0 42px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 680px; }
  .hero-visual { min-height: 380px; border-radius: 120px 16px 16px 16px; }
  .hero-visual img { min-height: 380px; }
}

/* 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; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 3.55rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { text-align: center; }
  .hero-assurances { gap: 10px 18px; }
  .hero-visual { min-height: 330px; }
  .hero-visual img { min-height: 330px; }
}

/* 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; }
}

/* ---------- conversion-led 2026 redesign ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #d88b56;
  outline-offset: 3px;
}

.topline {
  background: var(--blue-900);
  color: #dce8e2;
  font-size: .72rem;
  letter-spacing: .035em;
}
.topline-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 34px;
  align-items: center;
}
.topline a { color: #f6f1e6; text-decoration: none; }
.nav { top: 0; }
.nav-inner { height: 78px; gap: 28px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--blue-900);
  line-height: 1;
}
.logo-mark {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 2px;
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 2px solid currentColor;
}
.logo-mark i { display: block; background: currentColor; opacity: .82; }
.logo-words { display: grid; gap: 3px; }
.logo-words strong {
  color: var(--blue-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.logo-words small {
  color: var(--ink-600);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav-links { gap: 24px; }
.nav-links a { font-size: .82rem; letter-spacing: .01em; }
.nav-call {
  border-radius: 4px;
  background: var(--copper);
  padding: 12px 16px;
  font-size: .82rem;
  letter-spacing: .015em;
}
.nav-call:hover { background: #9e5227; }
.nav-toggle { display: none; }

.btn {
  border-radius: 4px;
  padding: 14px 22px;
  font-size: .9rem;
  letter-spacing: .01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue-900); }
.btn-primary:hover { background: #254d44; }
.btn-accent { background: #d7793f; color: #fff; }
.btn-accent:hover { background: #bf6531; }
.btn-outline { border-color: var(--blue-900); color: var(--blue-900); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled { opacity: .68; cursor: wait; transform: none; }

.hero-copy { position: relative; z-index: 1; }
.hero .btn-quiet { color: var(--blue-900); border: 0; border-bottom: 1px solid currentColor; }
.hero .wrap:not(.hero-grid) { max-width: 900px; }
.hero .wrap:not(.hero-grid) h1 {
  max-width: 820px;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.02;
}
.hero .wrap:not(.hero-grid) .lede { max-width: 68ch; }

.proof-strip { background: #fff; border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-grid div { position: relative; padding: 24px 30px 24px 0; }
.proof-grid div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.proof-grid strong { display: block; margin-bottom: 3px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: .98rem; }
.proof-grid span { color: var(--ink-600); font-size: .78rem; }

.home-section,
.areas-section,
.faq-section { padding: 104px 0; }
.section-heading { margin-bottom: 44px; }
.section-heading h2,
.plan-copy h2,
.cost-grid h2,
.faq-grid h2,
.framework-copy h2 {
  margin: 0;
  color: var(--blue-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.section-kicker,
.form-eyebrow {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--copper);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-kicker.light { color: #e4a77d; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .7fr); gap: 80px; align-items: end; }
.split-heading > p,
.centered > p { color: var(--ink-600); margin: 0; }
.centered { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.centered p { max-width: 62ch; margin: 18px auto 0; }

.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.need-card {
  min-height: 275px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.44);
  transition: background .2s ease, transform .2s ease;
}
.need-card:hover { background: #fff; transform: translateY(-3px); }
.need-card.featured { background: var(--blue-900); color: #fff; }
.need-number { display: block; color: var(--copper); font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.need-card h3 { margin: 44px 0 10px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.32rem; font-weight: 600; }
.need-card p { margin: 0 0 24px; color: var(--ink-600); font-size: .88rem; line-height: 1.6; }
.need-card.featured h3,
.need-card.featured p { color: #fff; }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: var(--blue-700); font-size: .79rem; font-weight: 800; text-decoration: none; }
.text-link b { transition: transform .18s ease; }
a:hover .text-link b,
.text-link:hover b { transform: translateX(4px); }
.text-link.on-dark { color: #f3c9a9; }

.framework-section { padding: 112px 0; overflow: hidden; background: var(--blue-900); color: #eef4f0; }
.framework-grid { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr); gap: clamp(60px, 9vw, 130px); align-items: center; }
.framework-visual { position: relative; min-height: 610px; }
.window-demo {
  position: absolute;
  inset: 32px 48px 58px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 9px;
  padding: 18px;
  border: 12px solid #efe7d8;
  box-shadow: 0 28px 65px rgba(0,0,0,.28);
  background: #c4d5d1;
}
.window-demo span { background: linear-gradient(145deg, #7da29d, #d8e2db); border: 4px solid #efe7d8; }
.spec-card { position: absolute; z-index: 1; min-width: 230px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.28); background: rgba(13,43,36,.9); box-shadow: 0 16px 38px rgba(0,0,0,.24); backdrop-filter: blur(8px); }
.spec-card small { display: block; margin-bottom: 5px; color: #9dc4b8; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.spec-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.spec-one { right: 0; top: 0; }
.spec-two { left: 20px; bottom: 10px; }
.framework-copy h2 { color: #fff; }
.framework-copy > p { max-width: 60ch; margin: 22px 0 32px; color: #bed0ca; }
.framework-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.framework-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.framework-list > li > span { color: #e4a77d; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.framework-list strong { display: block; margin-bottom: 4px; color: #fff; }
.framework-list p { margin: 0; color: #aebfba; font-size: .84rem; line-height: 1.55; }

.plan-section { background: var(--cream); }
.plan-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, .78fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.plan-copy > p { max-width: 60ch; margin: 22px 0 32px; color: var(--ink-600); }
.plan-includes { border-top: 1px solid var(--line); }
.plan-includes > div { display: grid; grid-template-columns: 35px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.plan-includes span { color: var(--copper); font-size: .68rem; font-weight: 900; }
.plan-includes p { margin: 0; color: var(--ink-600); font-size: .88rem; }
.plan-includes strong { color: var(--ink); }
.compact-form { max-width: none; margin: 0; padding: 34px; border: 0; border-radius: 8px; box-shadow: 0 30px 70px rgba(23,53,47,.12); }
.form-intro { margin-bottom: 25px; }
.form-intro h3 { margin: 0 0 5px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 600; }
.form-intro p { margin: 0; color: var(--ink-400); font-size: .82rem; }
.form-row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { margin-bottom: 14px; }
.field label { color: var(--ink); font-size: .78rem; letter-spacing: .015em; }
.field input,
.field textarea,
.field select {
  border-color: #ced3ca;
  border-radius: 3px;
  background: #fdfdfb;
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: 2px solid var(--blue-600); outline-offset: 1px; border-color: var(--blue-600); }
.form-consent { margin: 12px 0 0; color: var(--ink-400); font-size: .69rem; line-height: 1.5; }
.form-status { line-height: 1.5; }
.form-status a { color: inherit; }
form[data-lead-form].is-submitted > :not(.form-status) { display: none; }
form[data-lead-form].is-submitted .form-status { margin: 0; }

.cost-section { padding: 105px 0; background: #fff; }
.cost-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(380px, .75fr); gap: clamp(60px, 9vw, 130px); align-items: center; }
.cost-grid > div:first-child > p { max-width: 58ch; margin: 22px 0 30px; color: var(--ink-600); }
.cost-list { border-top: 1px solid var(--line); }
.cost-list > div { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cost-list span { color: var(--copper); font-size: .68rem; font-weight: 900; }
.cost-list p { margin: 0; color: var(--ink-600); font-size: .87rem; }
.cost-list strong { display: block; margin-bottom: 4px; color: var(--blue-900); }

.process-section { background: var(--bg); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.process-grid > div { padding: 34px 24px 0 0; }
.process-grid > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.process-grid span { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -52px; border-radius: 50%; background: var(--blue-900); color: #fff; font-size: .7rem; font-weight: 900; }
.process-grid h3 { margin: 30px 0 9px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; }
.process-grid p { margin: 0; color: var(--ink-600); font-size: .84rem; }

.areas-section { background: #e8eee9; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: 18px; }
.area-card { min-height: 360px; padding: 34px; color: #fff; text-decoration: none; background: var(--blue-900); }
.area-card.midland { background: linear-gradient(145deg, #17352f, #315c50); }
.area-card.frankenmuth { background: linear-gradient(145deg, #603a2b, #915b3f); }
.area-card.region { background: #f8f6ef; color: var(--ink); border: 1px solid var(--line); }
.area-card > span { color: #c2d9d0; font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.area-card.frankenmuth > span { color: #efd1bd; }
.area-card.region > span { color: var(--copper); }
.area-card h3 { margin: 92px 0 14px; color: inherit; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; line-height: 1.12; }
.area-card p { margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: .86rem; }
.area-card.region p { color: var(--ink-600); }
.area-card b,
.area-card > a { color: inherit; font-size: .79rem; text-decoration: none; }
.area-card i { margin-left: 8px; font-style: normal; }

.resources-section { background: #fff; }
.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.resource-grid a { padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.resource-grid a:hover { background: var(--bg-soft); }
.resource-grid span { color: var(--copper); font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.resource-grid h3 { margin: 35px 0 10px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; }
.resource-grid p { margin: 0; color: var(--ink-600); font-size: .86rem; }

.faq-section { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: minmax(260px, .6fr) minmax(0, 1fr); gap: clamp(60px, 9vw, 130px); align-items: start; }
.faq-grid > div:first-child > p { margin: 20px 0 25px; color: var(--ink-600); }
.faq-list { border-top: 1px solid #cfd2ca; }
.faq-list details { border-bottom: 1px solid #cfd2ca; }
.faq-list summary { position: relative; padding: 22px 44px 22px 0; color: var(--blue-900); font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 20px; color: var(--copper); font-size: 1.4rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list p { max-width: 66ch; margin: -4px 0 22px; color: var(--ink-600); font-size: .9rem; }

.cta-band { margin-top: 0; padding: 82px 0; background: linear-gradient(135deg, #17352f 0%, #254c43 100%); }
.cta-band .wrap { max-width: 820px; }
.cta-band h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 500; line-height: 1.05; }
.cta-band p { color: #c3d2cc; }
.cta-fine { margin-top: 17px !important; margin-bottom: 0 !important; font-size: .73rem; }

.footer { padding: 68px 0 28px; background: #111f1c; border: 0; }
.footer-inner { grid-template-columns: 1.45fr 1fr 1fr .85fr; gap: 46px; }
.footer-logo { margin-bottom: 20px; }
.footer .logo-words strong,
.footer .logo-mark { color: #fff; }
.footer .logo-words small { color: #9cb0aa; }
.footer-brand p { max-width: 34ch; margin-bottom: 22px; color: #9cb0aa; }
.footer a { color: #aebdb8; }
.footer a:hover { color: #fff; }
.footer-col > strong { display: block; margin-bottom: 18px; color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-call { color: #f0b489 !important; }
.legal { display: flex; justify-content: space-between; gap: 40px; margin-top: 48px; padding-top: 24px; border-color: rgba(255,255,255,.12); }
.legal p { max-width: 90ch; color: #83958f; }
.mobile-cta { display: none; }

/* Long-form guide pages */
.prose { max-width: 800px; padding-top: 70px; padding-bottom: 90px; }
.prose > p:first-child { font-size: 1.08rem; }
.prose h2 { margin-top: 58px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 4vw, 2.35rem); font-weight: 600; line-height: 1.15; }
.prose h3 { margin-top: 36px; font-size: 1.12rem; }
.prose a:not(.card):not(.btn) { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose .cards { grid-template-columns: repeat(2, 1fr); }
.prose .card { border-radius: 5px; padding: 24px; }
.prose .callout { border-radius: 0 5px 5px 0; }

@media (max-width: 1060px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .76rem; }
  .framework-grid { gap: 60px; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .area-card.region { grid-column: 1 / -1; min-height: 260px; }
  .area-card.region h3 { margin-top: 50px; }
}

@media (max-width: 860px) {
  .topline a { display: none; }
  .topline-inner { justify-content: center; text-align: center; }
  .nav-inner { height: 70px; }
  .nav-toggle {
    display: grid;
    gap: 4px;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle > span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--blue-900); }
  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    z-index: 20;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 16px 24px rgba(23,53,47,.1);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 11px 5px; font-size: .9rem; }
  .nav-call { margin-left: 0; }
  .proof-grid { grid-template-columns: 1fr; padding-top: 8px; padding-bottom: 8px; }
  .proof-grid div { padding: 14px 0; }
  .proof-grid div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .home-section,
  .areas-section,
  .faq-section,
  .cost-section { padding: 78px 0; }
  .split-heading,
  .framework-grid,
  .plan-grid,
  .cost-grid,
  .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .need-grid { grid-template-columns: repeat(2, 1fr); }
  .framework-visual { min-height: 520px; max-width: 520px; width: 100%; margin: 0 auto; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 55px 0; }
  .process-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { padding-bottom: 58px; }
  .topline { font-size: .65rem; }
  .nav-call { display: none; }
  .hero { padding-top: 50px; }
  .hero-grid { gap: 42px; }
  .hero-visual { border-radius: 90px 8px 8px 8px; }
  .hero-note { left: 14px; right: 14px; bottom: 14px; }
  .section-heading h2,
  .plan-copy h2,
  .cost-grid h2,
  .faq-grid h2,
  .framework-copy h2 { font-size: 2.25rem; }
  .need-grid,
  .area-grid,
  .resource-grid,
  .footer-inner { grid-template-columns: 1fr; }
  .need-card { min-height: 250px; }
  .area-card.region { grid-column: auto; }
  .framework-section { padding: 78px 0; }
  .framework-visual { min-height: 420px; }
  .window-demo { inset: 28px 20px 48px 0; border-width: 9px; padding: 10px; gap: 5px; }
  .spec-card { min-width: 205px; }
  .form-row.two { grid-template-columns: 1fr; gap: 0; }
  .compact-form { padding: 24px 18px; }
  .process-grid { grid-template-columns: 1fr; gap: 56px; }
  .process-grid > div,
  .process-grid > div + div { padding-left: 0; border-left: 0; }
  .area-card { min-height: 310px; padding: 26px; }
  .area-card h3 { margin-top: 65px; }
  .legal { flex-direction: column; gap: 10px; }
  .prose { padding: 48px 18px 70px; }
  .prose .cards { grid-template-columns: 1fr; }
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 58px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.16);
  }
  .mobile-cta a { display: grid; place-items: center; background: #fff; color: var(--blue-900); font-size: .78rem; font-weight: 900; text-decoration: none; }
  .mobile-cta a:last-child { background: var(--copper); color: #fff; }
}

/* ---------- quote experience ---------- */
.quote-hero { padding-bottom: 82px; }
.quote-section { padding: 92px 0 110px; background: var(--cream); }
.quote-grid { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(520px, 1fr); gap: clamp(55px, 8vw, 110px); align-items: start; }
.quote-aside { position: sticky; top: 132px; }
.quote-aside h2 {
  margin: 0;
  color: var(--blue-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.08;
}
.check-list { list-style: none; margin: 28px 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li { position: relative; padding: 16px 0 16px 29px; border-bottom: 1px solid var(--line); color: var(--ink-600); font-size: .88rem; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-600); font-weight: 900; }
.aside-note { padding: 20px; border-left: 3px solid var(--copper); background: rgba(255,255,255,.56); }
.aside-note strong { color: var(--blue-900); }
.aside-note p { margin: 7px 0 0; color: var(--ink-600); font-size: .82rem; }
.privacy-promise { margin-top: 24px; color: var(--ink-600); font-size: .79rem; }
.quote-form { max-width: none; margin: 0; padding: 38px; border: 0; border-radius: 8px; box-shadow: 0 30px 75px rgba(23,53,47,.13); }
.form-progress { height: 4px; margin-bottom: 10px; overflow: hidden; background: #e1e5de; }
.form-progress > div { height: 100%; width: 33.333%; background: var(--copper); transition: width .2s ease; }
.form-progress-label { margin-bottom: 30px; color: var(--ink-400); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.form-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-step[hidden] { display: none; }
.form-step legend { width: 100%; margin: 0; padding: 0; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 600; line-height: 1.15; }
.step-help { margin: 7px 0 26px; color: var(--ink-400); font-size: .82rem; }
.choice-group { margin: 8px 0 24px; }
.choice-label { display: block; margin-bottom: 10px; color: var(--ink); font-size: .78rem; font-weight: 700; }
.choice-label small,
.optional { color: var(--ink-400); font-weight: 500; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span { display: block; padding: 11px 13px; border: 1px solid #ced3ca; border-radius: 3px; color: var(--ink-600); font-size: .79rem; background: #fdfdfb; }
.choice-grid input:checked + span { border-color: var(--blue-600); color: var(--blue-900); background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue-600); }
.choice-grid input:focus-visible + span { outline: 3px solid #d88b56; outline-offset: 2px; }
.form-actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 24px; }
.form-actions.end { justify-content: flex-end; }
.btn-back { color: var(--blue-900); border: 1px solid var(--line); background: transparent; }
.after-submit-section { padding: 88px 0; background: #fff; }
.after-submit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.after-submit-grid > div { padding: 30px 30px 0 0; }
.after-submit-grid > div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.after-submit-grid span { color: var(--copper); font-size: .68rem; font-weight: 900; }
.after-submit-grid h2 { margin: 35px 0 10px; color: var(--blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.after-submit-grid p { margin: 0; color: var(--ink-600); font-size: .85rem; }
.still-researching { padding: 90px 0; background: #e8eee9; }
.still-researching .section-heading { margin-bottom: 0; }
.research-links { border-top: 1px solid #c7d0ca; }
.research-links a { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid #c7d0ca; color: var(--blue-900); font-size: .83rem; font-weight: 800; text-decoration: none; }
.research-links span { color: var(--copper); }

@media (max-width: 860px) {
  .quote-grid { grid-template-columns: 1fr; }
  .quote-aside { position: static; }
}

@media (max-width: 620px) {
  .quote-section { padding: 60px 0 76px; }
  .quote-form { padding: 26px 18px; }
  .choice-grid { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions.end { flex-direction: column; }
  .form-actions .btn { width: 100%; text-align: center; }
  .after-submit-grid { grid-template-columns: 1fr; gap: 44px; }
  .after-submit-grid > div,
  .after-submit-grid > div + div { padding-left: 0; border-left: 0; }
}