/* ============================================================
   LCI Pools & Patios — site stylesheet
   Refresh build for Netlify. Brand colors live in :root below —
   tweak these four values and the whole site follows.
   ============================================================ */

:root{
  /* Palette derived from the LCI logo: terracotta #d25945 + leaf green #5c926e */
  --navy:      #244634;   /* deep pine green — headers, footer, dark sections */
  --navy-2:    #33604a;   /* secondary dark green */
  --water:     #d25945;   /* logo terracotta — buttons, links, kickers */
  --water-lt:  #a8cdb7;   /* light leaf green — accents on dark */
  --stone:     #f7f3ee;   /* warm cream section tint */
  --ink:       #2d2b28;   /* warm charcoal body text */
  --white:     #ffffff;
  --max:       1180px;
  --radius:    6px;
  --shadow:    0 10px 30px rgba(18,38,58,.12);
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);line-height:1.65;background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--water);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--water);outline-offset:2px}

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

/* ---------- top utility bar ---------- */
.topbar{background:var(--navy);color:#e9e2d8;font-size:.9rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar .social a{margin-left:12px;font-size:1rem}

/* ---------- header / nav ---------- */
header.site{background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.07);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.logo img{height:64px;width:auto}
nav.main ul{display:flex;list-style:none;gap:26px;align-items:center}
nav.main a{color:var(--navy);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;font-weight:500}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--water)}
.has-sub{position:relative}
.has-sub > a::after{content:" ▾";font-size:.7em}
.sub{display:none;position:absolute;top:100%;left:0;background:var(--white);min-width:230px;box-shadow:var(--shadow);border-radius:var(--radius);padding:8px 0;list-style:none}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block;padding:9px 18px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.95rem}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:var(--radius);padding:6px 10px;font-size:1.2rem;color:var(--navy);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--white);display:flex;align-items:center;min-height:70vh;background:var(--navy)}
.hero.short{min-height:38vh}
.hero .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.55}
.hero .wrap{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.28em;font-size:.85rem;color:var(--water-lt);margin-bottom:10px}
.hero h1{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:1.12;max-width:760px}
.hero p{max-width:620px;margin-top:16px;font-size:1.1rem}
.crumbs{margin-top:14px;font-size:.95rem;color:#e9e2d8}
.crumbs a{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--water);color:#fff;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;padding:14px 30px;border-radius:var(--radius);border:none;font-size:1rem;cursor:pointer;margin-top:22px;transition:background .18s}
.btn:hover{background:#b0432f}
.btn.ghost{background:transparent;border:2px solid var(--white)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- sections ---------- */
section{padding:76px 0}
section.tint{background:var(--stone)}
.kicker{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.28em;color:var(--water);font-size:.85rem}
h2.title{font-family:var(--font-display);text-transform:uppercase;font-weight:600;color:var(--navy);font-size:clamp(1.6rem,3.4vw,2.4rem);margin:6px 0 18px}
.lead{max-width:720px}

/* about split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.cities{columns:3;list-style:none;margin:18px 0 6px;font-weight:600;color:var(--navy)}
.cities li{padding:3px 0}
.cities li::before{content:"▸ ";color:var(--water)}
.media video,.media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- services grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s}
.card:hover{transform:translateY(-5px)}
.card img{height:220px;object-fit:cover;width:100%}
.card .pad{padding:22px 22px 26px}
.card h3{font-family:var(--font-display);text-transform:uppercase;color:var(--navy);font-size:1.15rem;margin-bottom:8px}
.card a.more{font-weight:700}

/* ---------- financing band ---------- */
.finance{background:var(--navy);color:var(--white)}
.finance .split{align-items:center}
.finance h2{color:var(--white)}
.perks{list-style:none;margin-top:14px;font-size:1.05rem}
.perks li{padding:6px 0}
.perks li::before{content:"✓  ";color:var(--water-lt);font-weight:700}

/* ---------- gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.grid a{display:block;border-radius:var(--radius);overflow:hidden}
.grid img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .25s}
.grid a:hover img{transform:scale(1.05)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,20,30,.92);display:none;align-items:center;justify-content:center;z-index:100;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-height:88vh;max-width:92vw;border-radius:var(--radius)}
.lightbox button{position:absolute;top:18px;right:22px;font-size:2rem;background:none;border:none;color:#fff;cursor:pointer}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;margin-top:30px}
form.contact label{display:block;font-weight:700;color:var(--navy);margin:16px 0 6px}
form.contact input,form.contact textarea{width:100%;padding:13px 14px;border:1px solid #d5cec2;border-radius:var(--radius);font:inherit;background:#fff}
form.contact textarea{min-height:140px;resize:vertical}
.hidden{position:absolute;left:-9999px}
.info-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.info-card h3{font-family:var(--font-display);text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.info-card .owner{display:flex;gap:16px;align-items:center;margin-top:22px}
.info-card .owner img{width:86px;height:86px;border-radius:50%;object-fit:cover}

/* ---------- pre-footer CTA ---------- */
.cta{background:var(--water);color:#fff;text-align:center}
.cta h2{color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.4rem,3vw,2rem);max-width:860px;margin:0 auto}
.cta a.tel{color:#fff;text-decoration:underline;font-weight:700}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#cfc6b8;padding:56px 0 30px}
footer.site .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
footer.site img{height:70px;width:auto;background:#fff;padding:8px 12px;border-radius:var(--radius)}
footer.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px}
footer.site a{color:#f3ede4}
footer.site a:hover{color:var(--water-lt)}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:38px;padding-top:22px;font-size:.85rem}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .split,.contact-grid,footer.site .cols{grid-template-columns:1fr}
  .cities{columns:2}
}
@media (max-width:680px){
  .nav-toggle{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);box-shadow:var(--shadow)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:flex-start;gap:0;padding:10px 0}
  nav.main li{width:100%}
  nav.main a{display:block;padding:12px 22px}
  .sub{position:static;box-shadow:none;display:block;padding-left:16px}
  .has-sub > a::after{content:""}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .logo img{height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}

/* ---------- LCI family cross-brand ---------- */
.family{background:var(--navy);color:#eae4da}
.family .lead{color:#d8d0c2}
.fam-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.fam-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:30px}
.fam-card.current{border-color:var(--water)}
.fam-card h3{font-family:var(--font-display);text-transform:uppercase;color:var(--white);font-size:1.25rem}
.fam-card img{background:#fff;padding:8px;border-radius:var(--radius)}
.fam-tag{font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:var(--water-lt);margin:4px 0 12px}
.xbrand{background:var(--navy-2);color:#d8d0c2;font-size:.92rem}
.xbrand .wrap{padding-top:12px;padding-bottom:12px;text-align:center}
.xbrand a{color:var(--water-lt);font-weight:700}
form.contact select{width:100%;padding:13px 14px;border:1px solid #d5cec2;border-radius:var(--radius);font:inherit;background:#fff}
.route-hint{margin-top:10px;background:#faf1ee;border-left:4px solid var(--water);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;font-size:.95rem}
@media (max-width:920px){.fam-grid{grid-template-columns:1fr}}