/* Gonzalez's navy and lime palette, with brighter section accents. */
body[data-page="home"] #roof-options {
  background:
    radial-gradient(ellipse at 85% 48%, rgba(155, 203, 54, .12), transparent 65%),
    linear-gradient(180deg, #f5f6fa 0%, #f3f5ef 22%, #edf2e3 60%, #f5f6fa 100%);
}
body[data-page="home"] #roof-options .explore-photo {
  box-shadow: 0 18px 48px rgba(17, 24, 51, .10);
  border: 1px solid rgba(17, 24, 51, .08);
}
body[data-page="home"] #roof-options .explore-photo span {
  border-left: 3px solid var(--lime);
  border-radius: 0 6px 6px 0;
}
.map-frame { position: relative; }
#service-map.community-overview {
  background-color: #edf2e7;
  background-image: linear-gradient(#c9d4c455 1px, transparent 1px), linear-gradient(90deg, #c9d4c455 1px, transparent 1px), radial-gradient(ellipse at center, #f9fbf5, #e1e9dc);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
.map-overview-note {
  position: absolute; top: 16px; left: 16px; z-index: 800;
  max-width: calc(100% - 190px); margin: 0; padding: 10px 14px;
  border: 1px solid #d1dcc8; border-radius: 8px;
  background: #ffffffed; color: #405336; font-size: 12px; line-height: 1.5;
  pointer-events: none;
}
@media(max-width:600px) {
  .map-overview-note { top: auto; bottom: 30px; max-width: calc(100% - 90px); font-size: 10px; }
}
body[data-page="home"] .family-story {
  background: linear-gradient(180deg, #fafbf8 0%, #f6f8f1 100%);
  border-block: 0;
}

/* A distinct, full-width process section with a readable four-step sequence. */
body[data-page="home"] .process-updated {
  background: #090e29;
  color: #fff;
  padding-block: clamp(56px, 7vw, 100px);
  border-block: 1px solid #30415d;
}
body[data-page="home"] .process-updated .process-heading { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 50px; }
body[data-page="home"] .process-updated .eyebrow { color: var(--lime); font-size: 11px; letter-spacing: 2px; }
body[data-page="home"] .process-updated h2 { color: #fff; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.06; margin: 20px 0 0; }
body[data-page="home"] .process-updated h2 span { color: var(--lime); }
body[data-page="home"] .process-updated .process-heading > p { color: #d0d4e2; font-size: 15px; line-height: 1.8; max-width: 370px; margin: 0 0 4px; }
body[data-page="home"] .process-updated .process-grid { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body[data-page="home"] .process-updated .step,
body[data-page="home"] .process-updated .step:nth-child(even) { background: var(--navy); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 26px; min-width: 0; border-top: 3px solid var(--lime); }
body[data-page="home"] .process-updated .step-top { display: flex; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
body[data-page="home"] .process-updated .step-number { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; background: var(--lime); border-radius: 50%; color: var(--navy); font-size: 20px; font-weight: 800; }
body[data-page="home"] .process-updated .step-label { color: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
body[data-page="home"] .process-updated .step h3 { color: #fff; font-size: 21px; line-height: 1.3; font-weight: 600; min-height: 2.6em; margin: 24px 0 12px; }
body[data-page="home"] .process-updated .step p { color: #d0d4e2; font-size: 14px; line-height: 1.75; margin: 0; }
body[data-page="home"] .process-updated .process-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 30px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.16); }
body[data-page="home"] .process-updated .process-next p { color: #e2e8f1; font-size: 16px; margin: 0; }
body[data-page="home"] .process-updated .button { background: var(--lime); color: var(--navy); }
body[data-page="home"] .process-updated .button:hover { background: #afd751; }
body[data-page="home"] .process-updated .button:focus-visible { outline: 3px solid white; outline-offset: 5px; }
@media (max-width: 1050px) {
  body[data-page="home"] .process-updated .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body[data-page="home"] .process-updated .process-heading { grid-template-columns: 1fr; gap: 22px; }
  body[data-page="home"] .process-updated .process-grid { grid-template-columns: 1fr; margin-top: 30px; }
  body[data-page="home"] .process-updated .step h3 { min-height: 0; margin-top: 18px; }
  body[data-page="home"] .process-updated .process-next { flex-direction: column; align-items: stretch; }
  body[data-page="home"] .process-updated .button { text-align: center; font-size: 11px; }
}
body[data-page="home"] .family-story h2 > span { color: #526c19; }




body[data-page="home"] .home-areas {
  border-top: 5px solid #a4be4e;
  background: linear-gradient(180deg, #f0f5e5, #fff 70%);
  padding-inline: clamp(18px, 3vw, 44px);
}
.inner-page .page-hero {
  background: radial-gradient(ellipse at 90% 0, #304783 0, transparent 65%), #101c35;
  border-bottom: 5px solid #a4be4e;
}
.faq-page { background: #eef3e5; }
.faq-page #faq {
  padding: 220px 0 90px;
  background: linear-gradient(135deg, #edf3df, #f5f7f0 55%, #e6edf7);
}
.faq-page .breadcrumb { display: inline-block; margin-bottom: 30px; color: #334965; }
.faq-page .eyebrow { color: #435b16; }
.faq-page h1 { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.05; margin: 24px 0; color: #142035; }
.faq-page .faq-intro { color: #40516a; font-size: 17px; line-height: 1.7; max-width: 360px; }
.faq-page #faq-list { display: grid; gap: 14px; align-content: start; }
.faq-page #faq-list details { background: #fff; border: 1px solid #d4dec6; border-radius: 12px; padding: 0 22px; box-shadow: 0 5px 18px #101c3506; }
.faq-page #faq-list details[open] { border-color: #809b35; background: #f9fcee; }
.faq-page #faq-list summary { color: #142035; cursor: pointer; }
.faq-page #faq-list summary::after { color: #526c19; }
.faq-page #faq-list details p { color: #40516a; }
.faq-page a:focus-visible,.faq-page summary:focus-visible { outline: 3px solid #526c19; outline-offset: 5px; }
.faq-page .inner-cta { background: #101c35; color: white; border-top: 5px solid #a4be4e; }
@media(max-width: 760px) {
  .faq-page #faq { padding: 160px 0 50px; }
  .faq-page .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-page #faq-list details { padding-inline: 18px; }
  .faq-page #faq-list summary { padding-right: 28px; }
  
}

/* Homepage community directory. */
body[data-page="home"] .areas-refined {
  background: linear-gradient(180deg, #f6f8f1 0%, #fafbf8 80%);
  border-top: 0;
  padding: clamp(44px, 6vw, 80px) clamp(20px, 4vw, 55px);
  gap: clamp(30px, 5vw, 65px);
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
.areas-refined .areas-intro h2 {font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-1.4px;}
.areas-refined .areas-intro h2 span {color:#3042a3;}
.areas-refined .areas-intro > p {font-size:15px;max-width:440px;}
.areas-refined .areas-map-button {margin-top:20px;}
.areas-refined .areas-intro .areas-help {font-size:12px;margin-top:20px;}
.areas-refined .areas-help a {color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.areas-refined .areas-panel {background:var(--navy);color:white;padding:30px;border-radius:20px;box-shadow:0 14px 36px #11183312;}
.areas-refined .areas-panel-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.areas-refined .areas-panel-heading .eyebrow {font-size:10px;letter-spacing:1.5px;color:var(--lime);}
.areas-refined .areas-location-mark {font-size:28px;color:var(--lime);}
.areas-refined .home-city-links {gap:10px;}
.areas-refined .home-city-links a {min-height:64px;align-items:center;padding:16px;background:#ffffff08;border:1px solid #ffffff26;color:white;border-radius:8px;font-size:14px;transition:background .2s,border-color .2s;}
.areas-refined .home-city-links a span {color:var(--lime);}
.areas-refined .home-city-links a:hover {background:#ffffff15;border-color:var(--lime);}
.areas-refined .home-city-links .all-areas-link {background:var(--lime);color:var(--navy);font-weight:700;border-color:var(--lime);}
.areas-refined .home-city-links .all-areas-link span {color:var(--navy);}
.areas-refined .home-city-links .all-areas-link:hover {background:#afd751;}
.areas-refined a:focus-visible {outline:3px solid var(--lime);outline-offset:4px;}
.areas-refined .areas-panel-note {font-size:11px;color:#cbd0df;margin:20px 0 0;line-height:1.6;}
@media(max-width:900px){body[data-page="home"] .areas-refined{grid-template-columns:1fr;}.areas-refined .home-city-links{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.areas-refined .areas-panel{padding:22px;}.areas-refined .areas-panel .home-city-links{display:grid;grid-template-columns:1fr 1fr;}.areas-refined .home-city-links a{padding:12px;font-size:12px;}.areas-refined .mobile-city-picker{display:none;}.areas-refined .areas-map-button{width:100%;}.areas-refined .areas-intro h2{font-size:36px;}}
@media(max-width:600px){#service-areas.areas-refined .areas-panel .home-city-links{display:grid;}#service-areas.areas-refined .mobile-city-picker{display:none;}}

/* Full-width background; keep the directory content constrained inside it. */
body[data-page="home"] .areas-background {
  width: 100%;
  background: linear-gradient(180deg, #f6f8f1 0%, #fafbf8 80%);
}
body[data-page="home"] .areas-background .areas-refined {
  background: transparent;
  margin-inline: auto;
}