/* Village Trimlight — The Villages landing page. Site tokens: #0c71c3, square corners. */

#vtl-tv { --b:#0c71c3; --ink:#1a1a1a; --mute:#6d7378; --line:#dadada; --bg:#f4f6f8; --or:#f38e31;
  font-family:inherit; color:var(--ink); }
#vtl-tv *,#vtl-tv *::before,#vtl-tv *::after { box-sizing:border-box; }

/* opening statement */
#vtl-tv .tv-lede { border-left:5px solid var(--b); background:#fff; border-top:1px solid var(--line);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 28px; margin:0 0 40px; }
#vtl-tv .tv-lede p { margin:0; font-size:17px; line-height:1.65; color:#3d444a; }
#vtl-tv .tv-lede p + p { margin-top:12px; }
#vtl-tv .tv-lede strong { color:var(--ink); font-weight:700; }

/* section heads */
#vtl-tv h2.tv-h { font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.015em;
  margin:0 0 14px; color:var(--ink); }
#vtl-tv .tv-sec { margin:0 0 44px; }
#vtl-tv .tv-sec > p { margin:0 0 14px; font-size:16px; line-height:1.7; color:#4c5257; max-width:74ch; }
#vtl-tv .tv-sec > p:last-child { margin-bottom:0; }
#vtl-tv .tv-sec a { color:var(--b); font-weight:600; }

/* reason blocks */
#vtl-tv .tv-reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0 0; }
#vtl-tv .tv-reason { background:#fff; padding:24px 24px 26px; display:flex; flex-direction:column; gap:8px; }
#vtl-tv .tv-reason h3 { margin:0; font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); }
#vtl-tv .tv-reason p { margin:0; font-size:14.5px; line-height:1.65; color:#4c5257; }
#vtl-tv .tv-reason .tv-eyebrow { font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b); }

/* local proof strip */
#vtl-tv .tv-proof { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 44px; }
#vtl-tv .tv-proof-i { background:#fff; padding:20px 22px; display:flex; flex-direction:column; gap:4px; }
#vtl-tv .tv-proof-v { font-size:19px; font-weight:700; line-height:1.25; color:var(--b); }
#vtl-tv .tv-proof-l { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); }
#vtl-tv .tv-proof-d { font-size:13.5px; line-height:1.5; color:#4c5257; }

/* towns */
#vtl-tv .tv-towns { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
#vtl-tv .tv-town { font-size:13px; font-weight:700; letter-spacing:.05em; padding:9px 15px;
  background:#fff; border:1px solid var(--line); color:#4c5257; }
#vtl-tv .tv-town.is-home { background:var(--b); border-color:var(--b); color:#fff; }

/* quiet note */
#vtl-tv .tv-note { padding:20px 22px; background:var(--bg); border-left:4px solid var(--or);
  font-size:15px; line-height:1.65; color:#42484d; margin:22px 0 0; }
#vtl-tv .tv-note strong { color:var(--ink); }

/* CTA */
#vtl-tv .tv-cta { margin:44px 0 0; padding:30px 28px; background:var(--b); color:#fff;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
#vtl-tv .tv-cta h2 { margin:0; font-size:25px; font-weight:700; line-height:1.28; color:#fff; }
#vtl-tv .tv-cta p { margin:0; font-size:16px; line-height:1.6; color:#e6f1fa; max-width:64ch; }
#vtl-tv .tv-btn { display:inline-block; margin-top:8px; padding:15px 36px; background:#fff;
  color:var(--b); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:2px solid #fff; transition:background .15s,color .15s; }
#vtl-tv .tv-btn:hover { background:transparent; color:#fff; }
#vtl-tv .tv-btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
#vtl-tv .tv-cta-phone { font-size:15px; color:#cfe4f6; margin-top:2px; }
#vtl-tv .tv-cta-phone a { color:#fff; font-weight:700; text-decoration:none; }

@media (max-width:600px) {
  #vtl-tv h2.tv-h { font-size:22px; }
  #vtl-tv .tv-lede { padding:20px; }
  #vtl-tv .tv-lede p { font-size:16px; }
  #vtl-tv .tv-cta { padding:24px 20px; }
}

/* Hero image flush under the header.
   Desktop (981px+): Divi's header is fixed and 20px taller than the space Divi
   reserves for it (header 134px, #page-container padding 114px), so the section
   needs 20px of top padding to clear it. Same value the homepage uses.
   Below 981px the header is not fixed and Divi reserves the right height, so the
   child theme's generic 30px section padding just leaves a gap. */
body.page-id-3501 #page-container .et_pb_section_0.et_pb_fullwidth_section { padding-top:20px !important; }
@media (max-width:980px) {
  body.page-id-3501 #page-container .et_pb_section_0.et_pb_fullwidth_section { padding-top:1px !important; }
}

/* Hero frame: fixed 2.4:1 (desktop, 981px+).
   Prepare hero images at 2.4:1 (e.g. 2048x853 or 2400x1000) and what you see in
   the file is what shows. The frame is also capped so the page heading stays
   visible above the fold on shorter laptop screens (e.g. 1366x768); on those the
   image is trimmed further from the bottom, never the top. */
@media (min-width:981px) {
  body.page-id-3501 .et_pb_fullwidth_image_0 img {
    width:100%; height:auto; aspect-ratio:2.4 / 1; max-height:calc(100vh - 290px);
    object-fit:cover; object-position:50% 0%;
  }
  /* Pull the text up under the image: drop the hero section's bottom padding and
     halve the gap before the first content section. */
  body.page-id-3501 #page-container .et_pb_section_0.et_pb_fullwidth_section { padding-bottom:0 !important; }
  body.page-id-3501 #page-container .et_pb_section_1 { padding-top:28px !important; }
}