/* ============================================================
   HOPE RESTORED HOMES  ·  Service page styles
   ------------------------------------------------------------
   Shared stylesheet for every service detail page (/services).
   Twin of location.css: same Cleancore tokens and classes, so
   the pages look native. Edit a value here and it updates every
   service page at once.
   ============================================================ */

:root {
  --white:#FFFFFF; --off:#F3FAFC; --ice:#E6F4F8; --aqua:#B8DFE8;
  --aqua2:#7CC4D4; --aqua3:#3FA8BF; --aqua-deep:#1A7A90; --abyss:#0C5E70;
  --mint:#C6EFDC; --mint2:#8AD4B8; --peri:#D5E7FF; --sky:#E3F5FB;
  --foam:#F0FBFF; --gray:#7C95A0; --gray2:#CFE2E8; --ink:#0C2A33; --ink2:#2A4A56;
  --gold:#F2B705;
  --glass:rgba(255,255,255,0.62); --glass-soft:rgba(240,251,255,0.42);
  --glass-brd:rgba(255,255,255,0.85); --glow:rgba(63,168,191,0.30);
  --grad-fresh:linear-gradient(135deg,#2F9FBA 0%,#5FC0D6 42%,#8AD4B8 100%);
  --sheen:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.0) 60%);
  --card-shadow:0 1px 0 rgba(255,255,255,0.9) inset,
                0 18px 38px -20px rgba(26,122,144,0.55),
                0 4px 14px -6px rgba(63,168,191,0.30);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family:'Inter',sans-serif;
  color:var(--ink);
  line-height:1.7;
  background:
    radial-gradient(1100px 540px at 82% -8%, rgba(138,212,184,0.20), transparent 60%),
    radial-gradient(900px 520px at -6% 6%, rgba(213,231,255,0.34), transparent 55%),
    linear-gradient(180deg,#F4FBFD 0%,#EAF6F9 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; display:block; }
a { color:var(--aqua-deep); text-decoration:none; }

.lp-wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 1.5rem; }

/* ---------- NAV ---------- */
#main-nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,0.8);
  box-shadow:0 6px 22px -18px rgba(12,42,51,0.5);
}
.nav-left { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.logo-ph { height:38px; display:flex; align-items:center; }
.logo-ph img { height:100%; width:auto; }
.nav-brand { font-family:'Fredoka',sans-serif; font-size:1rem; font-weight:600; color:var(--ink); line-height:1.15; }
.nav-brand span { display:block; font-family:'DM Mono',monospace; font-size:.56rem; font-weight:500; color:var(--aqua3); letter-spacing:.12em; text-transform:uppercase; }
.nav-links { display:flex; gap:1.8rem; list-style:none; margin-left:auto; }
.nav-links a { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); position:relative; transition:color .15s; }
.nav-links a::after { content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; border-radius:2px; background:var(--grad-fresh); transition:right .25s ease; }
.nav-links a:hover { color:var(--aqua3); }
.nav-links a:hover::after { right:0; }
.nav-cta {
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--grad-fresh); color:var(--white); border:none;
  padding:.55rem 1.4rem; border-radius:999px; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(26,122,144,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .15s, filter .15s;
}
.nav-cta:hover { transform:translateY(-1px); filter:saturate(1.1) brightness(1.04); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; margin-left:auto; }
.nav-toggle span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

/* ---------- BREADCRUMB ---------- */
.lp-crumb { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); padding:1.4rem 0 0; }
.lp-crumb a { color:var(--aqua-deep); }
.lp-crumb a:hover { text-decoration:underline; }
.lp-crumb span { margin:0 .5rem; opacity:.55; }

/* ---------- HERO ---------- */
.lp-hero { padding:2.2rem 0 1.4rem; }
.lp-hero .kicker { font-family:'DM Mono',monospace; font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--aqua-deep); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.lp-hero .kicker::before { content:''; width:26px; height:2px; background:var(--grad-fresh); border-radius:2px; }
.lp-hero h1 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.01em; color:var(--ink); max-width:18ch; }
.lp-hero h1 em { font-style:normal; color:var(--aqua-deep); }
.lp-hero .intro { font-size:1.04rem; color:var(--ink2); margin-top:1.1rem; max-width:62ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

.btn-cc {
  font-family:'Inter',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.8rem 1.6rem; border-radius:999px; cursor:pointer; border:none; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s, filter .15s, box-shadow .15s;
}
.btn-cc::before { content:''; position:absolute; inset:0 0 52% 0; background:var(--sheen); border-radius:inherit; pointer-events:none; }
.btn-cc:hover { transform:translateY(-2px); }
.btn-solid { background:linear-gradient(160deg,#143842,#0C2A33); color:var(--white); box-shadow:0 8px 20px -8px rgba(12,42,51,0.7), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-solid:hover { filter:brightness(1.12); }
.btn-outline { background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); border:1.5px solid rgba(255,255,255,0.85); box-shadow:0 6px 16px -10px rgba(26,122,144,0.5), inset 0 1px 0 rgba(255,255,255,0.8); }
.btn-outline:hover { color:var(--aqua-deep); }
.btn-grad { background:var(--grad-fresh); color:var(--white); box-shadow:0 10px 24px -10px rgba(26,122,144,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-grad:hover { filter:saturate(1.1) brightness(1.05); }

/* ---------- CONTENT SECTIONS ---------- */
.lp-section { padding:1.7rem 0; }
.lp-section h2 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(1.4rem,2.7vw,1.95rem); color:var(--ink); line-height:1.15; letter-spacing:-.01em; margin-bottom:.7rem; }
.lp-section h2 em { font-style:normal; color:var(--aqua-deep); }
.lp-section h3 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.12rem; color:var(--aqua-deep); margin:1.4rem 0 .5rem; }
.lp-section p { color:var(--ink2); margin-bottom:.9rem; max-width:68ch; }
.lp-section p:last-child { margin-bottom:0; }

/* checkmark service list */
.lp-list { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.55rem .9rem; margin:1rem 0 .4rem; }
.lp-list li { position:relative; padding-left:1.9rem; color:var(--ink2); font-size:.96rem; line-height:1.5; }
.lp-list li::before {
  content:'✓'; position:absolute; left:0; top:.05rem;
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--grad-fresh); color:#fff; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -5px rgba(26,122,144,0.7);
}
.lp-note { font-size:.85rem; color:var(--gray); font-style:italic; margin-top:.8rem; }

/* glass info card wrapper (used for grouped service blocks) */
.lp-card {
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd); border-radius:20px; padding:1.5rem 1.6rem; margin:1.1rem 0;
  box-shadow:var(--card-shadow);
}

/* ---------- TESTIMONIAL ---------- */
.lp-review {
  background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd); border-radius:22px; padding:1.8rem 1.9rem; margin:1.4rem 0;
  box-shadow:var(--card-shadow); position:relative;
}
.lp-review::before {
  content:'\201C'; position:absolute; top:.1rem; left:1.1rem;
  font-family:'Fredoka',sans-serif; font-size:3.4rem; color:var(--aqua); opacity:.55; line-height:1;
}
.lp-review .stars { color:var(--gold); font-size:.95rem; letter-spacing:.1em; margin-bottom:.5rem; }
.lp-review blockquote { font-size:1.05rem; color:var(--ink); line-height:1.6; font-weight:500; }
.lp-review .who { margin-top:.9rem; font-family:'DM Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--aqua-deep); }
.lp-review .who b { color:var(--ink); font-weight:700; }

/* ---------- NEIGHBORHOODS ---------- */
.lp-hoods { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.lp-hoods .chip {
  font-family:'DM Mono',monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,0.7); border:1px solid var(--glass-brd); color:var(--aqua-deep);
  padding:.45rem .9rem; border-radius:999px; box-shadow:0 4px 12px -8px rgba(26,122,144,0.4);
}

/* ---------- CTA BAND ---------- */
.lp-ctaband {
  position:relative; overflow:hidden; border-radius:26px; margin:2rem 0 2.6rem;
  background:linear-gradient(135deg,#0C5E70 0%,#1A7A90 48%,#2F9FBA 100%);
  padding:2.4rem clamp(1.4rem,4vw,3rem); text-align:center;
  box-shadow:0 26px 50px -26px rgba(12,42,51,0.7);
}
.lp-ctaband h2 { font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); color:#fff; margin-bottom:.6rem; }
.lp-ctaband p { color:rgba(255,255,255,0.88); max-width:54ch; margin:0 auto 1.4rem; }
.lp-ctaband .phone { display:block; margin-top:1rem; font-family:'DM Mono',monospace; font-size:.74rem; letter-spacing:.1em; color:rgba(255,255,255,0.92); }
.lp-ctaband .phone a { color:#fff; }

/* ---------- FOOTER ---------- */
.lp-footer { background:linear-gradient(180deg,#0C2A33,#081E25); color:rgba(255,255,255,0.8); margin-top:1rem; padding:2.6rem 0 1.4rem; }
.lp-footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.8rem; }
.lp-footer .flogo { height:54px; margin-bottom:.7rem; }
.lp-footer .ftag { font-family:'Fredoka',sans-serif; font-style:italic; color:var(--aqua2); font-size:.92rem; }
.lp-footer h4 { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua2); margin-bottom:.7rem; }
.lp-footer a { display:block; color:rgba(255,255,255,0.78); font-size:.86rem; margin-bottom:.4rem; }
.lp-footer a:hover { color:#fff; }
.lp-footer .socials { display:flex; gap:.6rem; margin-top:.9rem; }
.lp-footer .socials a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; margin:0; font-weight:700; }
.lp-footer .socials a:hover { background:var(--aqua3); }
.lp-footer .fbottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,0.12); font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(255,255,255,0.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:.6rem 1.4rem 1rem; border-bottom:1px solid var(--glass-brd); box-shadow:0 18px 30px -18px rgba(12,42,51,0.5); }
  .nav-links.open { display:flex; }
  .nav-links li { padding:.6rem 0; border-bottom:1px solid rgba(12,42,51,0.06); }
  .nav-cta { margin-left:auto; padding:.5rem 1rem; font-size:.66rem; }
  .nav-toggle { display:flex; margin-left:.5rem; }
  .lp-footer .cols { grid-template-columns:1fr; gap:1.4rem; }
  .lp-hero { padding:1.4rem 0 1rem; }
}

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

:focus-visible { outline:3px solid var(--aqua3); outline-offset:2px; border-radius:4px; }