/* ============ BELLE TEMPLATE ============
   Styled from the client's Figma (Belle-Plumbing, node 172-445).
   Monochrome system: white paper, warm off-white cards, near-black ink,
   dark charcoal bands. Pill buttons, 16-24px card radii, chip eyebrows.
   AA ratios vs #ffffff: ink #1d1d1b 16.4:1, ink-dim #4d4d49 8.0:1,
   ink-faint #6d6d68 5.2:1. On dark #2b2a28: white 14.6:1, dim 10.2:1. */
:root{
  --paper: #ffffff;
  --paper-alt: #f5f5f3;      /* section band + cards */
  --card: #fafaf9;
  --ink: #1d1d1b;
  --ink-dim: #4d4d49;
  --ink-faint: #6d6d68;
  --dark: #2b2a28;           /* charcoal bands (process, CTA wash) */
  --dark-2: #161514;         /* top bar, footer */
  --on-dark: #ffffff;
  --on-dark-dim: rgba(255,255,255,0.78);
  --border: rgba(29,29,27,0.12);
  --border-dark: rgba(255,255,255,0.16);
  --radius-card: 18px;
  --radius-img: 14px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --display: "Bricolage Grotesque", "Poppins", Arial, sans-serif;
  --body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background: var(--paper); scroll-behavior: smooth; overflow-x: clip; }
body{
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.6; font-weight: 500;
  overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

h1,h2,h3{ font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; }
.section{ padding: 84px 0; }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.center{ text-align:center; }

/* chip eyebrow (Figma: rounded pill, light grey bg / outlined on dark) */
.chip{
  display:inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
  background: #ececea; border-radius: 999px; padding: 7px 16px; margin-bottom: 18px;
}
.on-dark .chip{ background: transparent; border: 1px solid var(--border-dark); color: var(--on-dark-dim); }

.section-title{ font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; }
.section-sub{ color: var(--ink-dim); max-width: 62ch; margin: 0 auto 12px; }

/* ============ BUTTONS (pills) ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; border-radius: 999px;
  padding: 14px 28px; font-weight: 600; font-size: 15px; font-family: var(--body);
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform: translateY(-2px); }
.btn-solid{ background: var(--ink); color: #fff; }           /* dark pill */
.btn-solid:hover{ background: #000; }
.btn-outline{ background: #fff; color: var(--ink); border: 1px solid var(--border); }
.btn-outline:hover{ border-color: var(--ink); }
.on-dark .btn-solid, .hero .btn-solid{ background: #fff; color: var(--ink); }
.on-dark .btn-solid:hover, .hero .btn-solid:hover{ background: #ececea; }
.on-dark .btn-outline, .hero .btn-outline{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.4); }
.on-dark .btn-outline:hover, .hero .btn-outline:hover{ border-color:#fff; }
/* call pill with phone roundel (Figma) */
.btn-call{ padding: 8px 24px 8px 8px; }
.btn-call .call-ic{
  width: 40px; height: 40px; border-radius: 50%; background:#fff; color: var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.btn-call .call-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.btn-call .call-txt strong{ white-space:nowrap; }
.btn-call .call-txt small{ font-size: 11px; font-weight:500; opacity:.75; }
.btn-call.btn-solid .call-ic{ background:#fff; color: var(--ink); }
.btn-call.on-white{ background: var(--ink); color:#fff; }

/* ============ TOP BAR ============ */
.top-bar{
  background: var(--dark-2); color: var(--on-dark-dim); font-size: 13px;
  padding: 9px 0;
}
.top-bar-inner{ display:flex; align-items:center; justify-content:center; gap: 26px; }
.top-bar .tb-item{ display:inline-flex; align-items:center; gap:7px; }
.top-bar svg{ width: 13px; height: 13px; fill: currentColor; }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width: 1240px; margin: 0 auto; padding: 14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.wordmark img{ height: 40px; width:auto; }
.header-cta{ display:flex; align-items:center; gap:12px; }

/* ============ HERO ============ */
.hero{ position: relative; background: var(--dark-2); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.55) 46%, rgba(10,10,10,0.18) 100%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
  padding-top: 92px; padding-bottom: 96px;
}
.hero-copy{ color:#fff; }
.hero .chip{ background: transparent; border:1px solid rgba(255,255,255,0.45); color:#fff; }
.hero h1{ font-size: clamp(36px, 4.6vw, 58px); margin-bottom: 20px; color:#fff; }
.hero-sub{ color: var(--on-dark-dim); max-width: 52ch; margin-bottom: 30px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; margin-bottom: 30px; }
.hero-grating{ display:flex; align-items:center; gap: 12px; color:#fff; }
.hero-grating img{ width: 40px; height: 40px; }
.hero-grating .hg-label{ font-weight: 600; font-size: 17px; display:block; }
.hero-grating .hg-stars{ color: #f5b942; letter-spacing: 2px; }
.hero-grating .hg-score{ font-weight: 700; margin-right: 4px; }

/* form card */
.hero-form-card{
  background:#fff; border-radius: 16px; padding: 30px 32px 34px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.hero-form-card h2{ font-size: 26px; margin-bottom: 4px; }
.hero-form-card .req-note{ font-size: 12.5px; color: var(--ink-faint); margin-bottom: 6px; }
.hero-form-card iframe{ width: 100%; border: 0; display:block; }

/* ============ ABOUT (Trusted Professionals) ============ */
.about-grid{ display:grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items:center; }
.about-photos{ position:relative; }
.about-photos .ap-main{ border-radius: 22px; overflow:hidden; margin-left: 18%; }
.about-photos .ap-small{
  position:absolute; left:0; bottom:-6%; width: 38%;
  border-radius: 18px; overflow:hidden; border: 6px solid #fff;
}
.about-copy .btn{ margin-top: 26px; }
.about-copy p{ color: var(--ink-dim); }

/* ============ SERVICES GRID ============ */
.services-band{
  background: var(--paper-alt);
  border-radius: 56px 56px 0 0;
  position: relative;
}
.services-band .roundel{
  position:absolute; top: 44px; left: 44px; width: 96px; opacity: 0.9;
  animation: spin 22s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .services-band .roundel{ animation:none; } }
.svc-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px;
}
.svc-card{
  background:#fff; border-radius: var(--radius-card); padding: 10px 10px 18px;
  box-shadow: 0 6px 24px rgba(29,29,27,0.06);
  display:flex; flex-direction:column; position:relative;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.svc-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(29,29,27,0.12); }
.svc-card img{ border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; width:100%; }
.svc-card h3{ font-size: 20px; margin: 16px 8px 8px; }
.svc-card p{ font-size: 14.5px; color: var(--ink-dim); margin: 0 8px 8px; padding-right: 48px; }
.svc-card .svc-arrow{
  position:absolute; right: 14px; bottom: 14px;
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s, color .25s;
}
.svc-card:hover .svc-arrow{ background: var(--ink); color:#fff; }

/* ============ VALUES GRID ============ */
.val-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.val-card{
  background: var(--card); border: 1px solid rgba(29,29,27,0.06);
  border-radius: var(--radius-card); padding: 30px 28px; text-align:left;
}
.val-card .val-ic{
  width: 56px; height: 56px; border-radius: 50%; background:#fff;
  box-shadow: 0 4px 16px rgba(29,29,27,0.08);
  display:flex; align-items:center; justify-content:center; margin-bottom: 20px;
}
.val-card .val-ic svg{ width: 26px; height: 26px; }
.val-card h3{ font-size: 19px; margin-bottom: 8px; }
.val-card p{ font-size: 14.5px; color: var(--ink-dim); }

/* ============ REVIEWS (marquee restyled to Figma card language) ============ */
.rv-band{ background: var(--paper-alt); border-radius: 56px; }
.rv-marquee{ overflow:hidden; margin-top: 40px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rv-track{ display:flex; gap: 20px; width:max-content; animation: rvscroll 60s linear infinite; }
.rv-track:hover{ animation-play-state: paused; }
@keyframes rvscroll{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rv-track{ animation:none; flex-wrap:wrap; width:auto; } }
.rv-card{
  width: 360px; background:#fff; border-radius: var(--radius-card);
  padding: 24px 24px 22px; box-shadow: 0 6px 24px rgba(29,29,27,0.06);
}
.rv-top{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; }
.rv-avatar{
  width: 42px; height: 42px; border-radius:50%; background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size: 15px;
}
.rv-name{ font-weight: 600; font-size: 15px; }
.rv-date{ font-size: 12.5px; color: var(--ink-faint); }
.rv-stars{ color:#f5b942; letter-spacing: 2px; margin-bottom: 8px; }
.rv-text{ font-size: 14.5px; color: var(--ink-dim); }
.rv-cta{ text-align:center; margin-top: 36px; }

/* ============ MID CTA BAND (dark photo) ============ */
.cta-band{ position:relative; overflow:hidden; background: var(--dark-2); }
.cta-band .cta-bg{
  position:absolute; inset:0;
  background: url("../assets/images/real/cta.jpg") center 40%/cover no-repeat;
}
/* Desktop: window-style parallax - photo stays fixed while the page scrolls over it.
   (background-attachment: fixed is broken on iOS, so touch devices keep normal scroll.) */
@media (hover:hover) and (pointer:fine){
  .cta-band .cta-bg{ background-attachment: fixed; background-size: cover; background-position: center; }
}
.cta-band .cta-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(95deg, rgba(12,12,12,0.88) 0%, rgba(12,12,12,0.55) 55%, rgba(12,12,12,0.15) 100%);
}
.cta-inner{ position:relative; z-index:1; padding: 88px 0; color:#fff; max-width: 560px; }
.cta-inner h2{ font-size: clamp(28px,3.2vw,40px); color:#fff; margin-bottom: 14px; }
.cta-inner p{ color: var(--on-dark-dim); margin-bottom: 26px; }
.cta-inner .hero-cta-row{ margin-bottom: 0; }

/* ============ SERVICE AREAS ============ */
.areas-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.areas-list{
  display:grid; grid-template-columns: repeat(2, minmax(0,220px)); gap: 12px 28px; margin: 18px 0 26px;
}
.areas-list li{ display:flex; align-items:center; gap: 9px; font-weight: 600; font-size: 15.5px; }
.areas-list svg{ width: 15px; height: 15px; flex-shrink:0; }
.areas-photo{ border-radius: 26px; overflow:hidden; }
.areas-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1.18 / 1; }

/* ============ PROCESS (dark band) ============ */
.process-band{ background: var(--dark); color: var(--on-dark); border-radius: 56px 56px 0 0; }
.process-band .section-title{ color:#fff; }
.proc-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; max-width: 1000px;
  margin-left:auto; margin-right:auto;
}
.proc-row-2{ grid-template-columns: repeat(2,1fr); max-width: 680px; margin-top: 22px; }
.proc-card{
  background: var(--card); color: var(--ink);
  border-radius: var(--radius-card); padding: 28px 26px; position:relative; text-align:left;
}
.proc-card .pc-num{ position:absolute; top: 20px; right: 24px; color: #b9b9b4; font-weight:600; }
.proc-card .val-ic{ background:#fff; box-shadow: 0 4px 16px rgba(29,29,27,0.10); }
.proc-card h3{ font-size: 19px; margin-bottom: 6px; }
.proc-card p{ font-size: 14.5px; color: var(--ink-dim); }
.process-band .rv-cta{ margin-top: 40px; }

/* ============ FAQ ============ */
.faq-list{ max-width: 820px; margin: 40px auto 0; display:flex; flex-direction:column; gap: 14px; text-align:left; }
.faq-item{
  background:#fff; border: 1px solid var(--border); border-radius: 12px;
}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap: 18px; padding: 18px 22px; font-weight: 600; font-size: 16.5px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; width: 10px; height: 10px; flex-shrink:0;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 4px;
}
.faq-item[open] summary::after{ transform: rotate(225deg); }
.faq-item .faq-a{ padding: 0 22px 18px; color: var(--ink-dim); border-top: 1px solid var(--border); }
.faq-item .faq-a p{ padding-top: 14px; }

/* ============ FINAL CTA + FOOTER ============ */
.footer{ background: var(--dark-2); color: var(--on-dark-dim); padding: 64px 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 0.8fr 1fr; gap: 48px; }
.footer .f-logo{ height: 40px; width:auto; margin-bottom: 20px; }
.footer p{ font-size: 14px; max-width: 40ch; }
.footer h4{ color:#fff; font-size: 16px; margin-bottom: 16px; font-family: var(--display); }
.footer li{ margin-bottom: 10px; font-size: 14.5px; }
.footer a:hover{ color:#fff; }
.footer .f-contact li{ display:flex; gap: 9px; align-items:flex-start; }
.footer .f-contact svg{ width: 14px; height: 14px; margin-top: 4px; flex-shrink:0; fill: currentColor; }
.footer-bottom{
  border-top: 1px solid var(--border-dark); margin-top: 48px; padding-top: 22px;
  font-size: 13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ============ REVEAL ============ */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 72px; }
  .about-grid, .areas-grid{ grid-template-columns: 1fr; gap: 44px; }
  .svc-grid{ grid-template-columns: repeat(2,1fr); }
  .val-grid, .proc-grid{ grid-template-columns: repeat(2,1fr); }
  .proc-row-2{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .section{ padding: 60px 0; }
  .container{ padding-left: 20px; padding-right: 20px; }  /* longhand: never clobber vertical padding on shared elements */
  .top-bar-inner{ gap: 14px; font-size: 12px; }
  .top-bar .tb-social{ display:none; }
  .header-inner{ padding: 12px 20px; }
  .wordmark img{ height: 32px; }
  .header-cta .btn-call .call-txt small{ display:none; }
  .svc-grid{ grid-template-columns: 1fr; }
  .val-grid, .proc-grid, .proc-row-2{ grid-template-columns: 1fr; }
  .services-band{ border-radius: 28px 28px 0 0; }
  .rv-band{ border-radius: 28px; }
  .process-band{ border-radius: 28px 28px 0 0; }
  .services-band .roundel{ width: 64px; top: 22px; left: 22px; }
  .about-photos .ap-main{ margin-left: 10%; }
  .rv-card{ width: 300px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
}

/* ============ MAIN NAV ============ */
.main-nav{ display:flex; gap:26px; }
.main-nav a{ font-weight:600; font-size:14px; color: var(--ink); text-decoration:none; }
.main-nav a:hover{ color: var(--ink-dim); }
@media (max-width: 900px){ .main-nav{ display:none; } }

/* ============ PROCESS: size the icons (proc-card was unscoped) ============ */
.proc-card .val-ic{
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;
}
.proc-card .val-ic svg{ width: 22px; height: 22px; }

/* ============ GOOGLE-STYLE REVIEW CARDS ============ */
.rv-card{ position: relative; }
.rv-g{ position:absolute; top:16px; right:16px; width:18px; height:18px; opacity:0.9; }
.rv-card .rv-top{ padding-right: 26px; }
.rv-avatar{ color:#fff; }
.rv-stars{ color:#fbbc04 !important; letter-spacing:1px; }

/* second review row: opposite drift, slightly slower */
.rv-track-slow{ animation: rvscroll-rev 70s linear infinite; }
.rv-track-slow:hover{ animation-play-state: paused; }
@keyframes rvscroll-rev{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){ .rv-track-slow{ animation:none; flex-wrap:wrap; width:auto; } }
.rv-more{ margin-top: 20px; }

/* GHL form clamp: measured content ends at the submit button, 699px at both 500w
   and 380w; the form page pads to ~846 which was the dead whitespace. */
.ghl-form-wrap iframe, iframe[id^="inline-WmAuUKzFd2wugo9KktRo"]{ height: 712px !important; display:block; }
.ghl-form-wrap{ margin-top: 6px; }

/* ============ PROCESS v2: numbered timeline ============ */
.proc-line{
  list-style:none; margin: 52px auto 0; padding:0;
  display:grid; grid-template-columns: repeat(5,1fr); gap: 0 18px;
  max-width: 1100px; counter-reset: none; text-align:center; position:relative;
}
.proc-line li{ position:relative; padding: 0 6px; }
/* connector line between the number dots */
.proc-line li::before{
  content:""; position:absolute; top:23px; left:calc(-50% + 32px); right:calc(50% + 32px);
  height:2px; background: rgba(255,255,255,0.18);
}
.proc-line li:first-child::before{ display:none; }
.pl-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:#fff; color: var(--dark, #111); font-weight:700; font-size:18px;
  margin-bottom:16px; box-shadow: 0 0 0 6px rgba(255,255,255,0.10);
}
.proc-line h3{ font-size:16.5px; color:#fff; margin-bottom:6px; }
.proc-line p{ font-size:13.5px; color: rgba(255,255,255,0.65); line-height:1.5; margin:0; }
@media (max-width: 860px){
  .proc-line{ grid-template-columns:1fr; gap:26px; max-width:420px; text-align:left; }
  .proc-line li{ display:grid; grid-template-columns:46px 1fr; gap: 0 16px; align-items:start; }
  .pl-num{ margin-bottom:0; grid-row: 1 / span 2; }
  .proc-line h3{ grid-column:2; }
  .proc-line p{ grid-column:2; }
  .proc-line li::before{ top:-14px; left:22px; right:auto; width:2px; height:14px; }
}

/* hero rating chip: clickable, anchors to reviews */
a.hero-grating{ text-decoration:none; color:inherit; transition: transform .25s; display:inline-flex; }
a.hero-grating:hover{ transform: translateY(-2px); }
.hg-more{ margin-left:10px; font-weight:700; font-size:13px; color:#fbbc04; white-space:nowrap; }

/* ============ GALLERY ============ */
.gal-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:40px;
}
.gal-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/2.6; border-radius:16px; }
@media (max-width: 760px){ .gal-grid{ grid-template-columns: 1fr 1fr; gap:10px; } }

.areas-copy{ margin: 18px 0 26px; font-size: 15.5px; color: var(--ink-dim); max-width: 46ch; }

/* ============ VIDEOS (9:16 reels) ============ */
.vid-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; margin-top:40px;
  max-width: 1160px; margin-left:auto; margin-right:auto;
}
.vid-card{
  aspect-ratio: 9/16; border-radius:14px; overflow:hidden; background:#000;
  border:1px solid var(--border);
}
.vid-card iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width: 980px){ .vid-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ /* vid-grid mobile: snap strip below */ }

/* slow Ken Burns drift on the hero photo */
.hero-kenburns{ animation: kenburns 28s ease-in-out infinite alternate; transform-origin: 55% 45%; will-change: transform; }
@keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.10) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce){ .hero-kenburns{ animation:none; } }

/* summaries containing inline spans must stay one flex item */
.faq-item summary .fq{ flex:1; }

/* ============ NAV DROPDOWN + LINKED SERVICE CARDS ============ */
.nav-drop{ position:relative; }
.nav-drop .nav-menu{
  position:absolute; top:100%; left:-14px; padding:10px 0; min-width:200px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,0.12);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a{ display:block; padding:9px 18px; font-weight:600; font-size:14px; color:var(--ink); text-decoration:none; }
.nav-menu a:hover{ background:var(--paper-alt, #f4f4f2); }
a.svc-link{ text-decoration:none; color:inherit; display:block; }
.svc-more{ display:inline-block; margin-top:6px; font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap; }
a.svc-link:hover .svc-more{ text-decoration:underline; }

/* ============ FEATURED (clickable) SERVICE CARDS ============ */
.svc-featured-grid{ margin-bottom: 10px; }
a.svc-featured-card{
  text-decoration:none; color:inherit; position:relative;
  display:flex; flex-direction:column;
  border: 2px solid var(--ink); border-radius: 16px;
  transition: transform .25s, box-shadow .25s;
}
a.svc-featured-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.14); }
a.svc-featured-card .svc-more{
  display:inline-block; margin-top:auto; padding-top:0; align-self:center;
  padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color:#fff; font-weight:700; font-size:13.5px;
}
.svc-others-label{ text-align:center; margin: 26px 0 0; font-weight:600; color: var(--ink-dim); }
.svc-others-label + .svc-grid{ margin-top: 20px; }

a.svc-featured-card p{ margin-bottom: 16px; }

/* ============ REVIEWS HEADING GOOGLE LOGO ============ */
.rv-sub-line{ display:flex; align-items:center; justify-content:center; gap:8px; }
.rv-h-g{ width:22px; height:22px; }

/* ============ TYPES BAND (dark checklist, distinct from val-grid cards) ============ */
.types-band{ background: var(--dark); color:#fff; border-radius: 56px; }
.types-band .section-title{ color:#fff; }
.types-band .chip{ background: transparent; border:1px solid rgba(255,255,255,0.4); color:#fff; }
.type-list{
  list-style:none; margin:40px auto 0; padding:0; max-width: 900px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; text-align:left;
}
.type-list li{
  display:flex; gap:14px; align-items:flex-start; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.type-list li:nth-last-child(-n+2){ border-bottom:none; }
.type-list .tk{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f5b942; color:#1a1a1a; font-weight:700; font-size:14px;
}
.type-list strong{ display:block; font-size:16.5px; }
.type-list div span{ font-size:14px; color: rgba(255,255,255,0.65); line-height:1.5; }
@media (max-width: 760px){
  .type-list{ grid-template-columns: 1fr; gap:0; }
  .type-list li:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,255,255,0.12); }
  .type-list li:last-child{ border-bottom:none; }
  .types-band{ border-radius: 28px; }
}

/* mobile: keep the header call button on one line */
@media (max-width: 560px){
  .btn-call{ padding: 8px 14px 8px 8px; }
  .btn-call .call-ic{ width: 34px; height: 34px; }
  .btn-call .call-txt small{ display:none; }
  .btn-call .call-txt strong{ font-size: 15px; }
  .wordmark{ flex-shrink: 0; }
}

/* ============ MOBILE SERVICE QUICK-NAV ============ */
.mobile-svc-nav{
  display:none; position: sticky; top: 0; z-index: 99;
  background:#fff; border-bottom:1px solid var(--border);
  padding: 10px 16px; gap: 8px;
}
@media (max-width: 900px){ .mobile-svc-nav{ display:flex; justify-content:center; } }
.mobile-svc-nav a{
  flex:1; text-align:center; padding: 9px 6px; border-radius: 999px;
  border:1px solid var(--border); font-weight:600; font-size:13px;
  color: var(--ink); text-decoration:none; white-space:nowrap;
}
.mobile-svc-nav a.is-here{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ===== always-visible phone: mobile sticky header + ring animation (8 Sep 2026) ===== */
.site-header a[href^="tel:"]{ animation: phone-ring 5s ease-in-out infinite; position: relative; }
.site-header a[href^="tel:"]::after{
  content:""; position:absolute; inset:-3px; border-radius: inherit;
  animation: phone-pulse 5s ease-out infinite; pointer-events:none;
}
@keyframes phone-ring{
  0%, 6%, 100% { transform: rotate(0); }
  1% { transform: rotate(-3deg) scale(1.04); }
  2% { transform: rotate(3deg) scale(1.04); }
  3% { transform: rotate(-3deg) scale(1.04); }
  4% { transform: rotate(3deg) scale(1.04); }
  5% { transform: rotate(0) scale(1); }
}
@keyframes phone-pulse{
  0%   { box-shadow: 0 0 0 0 var(--blue, #2a7de1); opacity:.55; }
  8%   { box-shadow: 0 0 0 12px transparent; opacity:0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .site-header a[href^="tel:"], .site-header a[href^="tel:"]::after{ animation: none; }
}

/* ===== mobile media strips: horizontal snap-scroll, no orphan wrapping (8 Sep 2026) ===== */
@media (max-width: 700px){
  .vid-grid{
    display:flex; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-left:20px; padding-right:20px; padding-bottom:8px;
    margin-left:-20px; margin-right:-20px; scrollbar-width:none; justify-content:flex-start;
  }
  .vid-grid::-webkit-scrollbar{ display:none; }
  .vid-grid .vid-card{ flex:0 0 62vw; width:62vw; scroll-snap-align:center; }
  .gal-grid{
    display:flex; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-left:20px; padding-right:20px; padding-bottom:8px;
    margin-left:-20px; margin-right:-20px; scrollbar-width:none;
  }
  .gal-grid::-webkit-scrollbar{ display:none; }
  .gal-grid img, .gal-grid .gal-wide{ flex:0 0 76vw; width:76vw; height:58vw; scroll-snap-align:center; grid-column:auto; }
  .gal-grid img:hover{ transform:none; }
}

/* anchor targets clear the fixed mobile header + pill strip */
section[id], div[id]{ scroll-margin-top: 24px; }
@media (max-width: 900px){ section[id], div[id]{ scroll-margin-top: 128px; } }



/* ============ USP TICKER + BRAND STRIP (service pages) ============ */
.usp-ticker{ background: var(--black, #161514); color:#fff; overflow:hidden; border-top:1px solid rgba(255,255,255,0.08); }
.usp-track{ display:flex; width:max-content; animation: rvscroll 38s linear infinite; }
.usp-track span{ display:inline-block; padding-top:12px; padding-bottom:12px; padding-left:34px; padding-right:34px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; white-space:nowrap; position:relative; }
.usp-track span::after{ content:""; position:absolute; right:-3px; top:50%; width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,0.45); transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce){ .usp-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }
.brand-band{ padding-top:56px; padding-bottom:56px; }
.brand-strip{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 28px 56px; margin-top: 34px; }
.brand-strip img{ height:44px; width:auto; max-width: 200px; object-fit:contain; filter: grayscale(1); opacity:0.78; transition: filter .25s, opacity .25s; }
.brand-strip img:hover{ filter:none; opacity:1; }
@media (max-width: 640px){ .brand-strip{ gap: 20px 32px; } .brand-strip img{ height:32px; max-width: 150px; } }

/* service cards now link through to their own page, so the "Learn more"
   is its own anchor rather than a label inside a card-wide link */
.svc-card a.svc-more{ text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:1px; }
.svc-card a.svc-more:hover{ opacity:.65; }

/* service cards: pin "Learn more" to the bottom so the three links align
   regardless of how many lines the description runs to */
.svc-card a.svc-more{ margin-top: auto; padding-top: 10px; }

/* ============ FLOATING GOOGLE REVIEWS ============
   Bottom-LEFT deliberately: the GHL chat bubble owns bottom-right.
   Every colour below is explicit. This card is always dark regardless of the
   site palette, so inheriting --ink-dim (a dark grey here) would make the
   review text vanish into the card. */
.rv-float{
  position: fixed; left: 22px; bottom: 22px; z-index: 95;
  width: 330px; max-width: calc(100vw - 44px);
  border-radius: 18px; padding: 2px;
  transform: translateY(28px) scale(.96); opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s cubic-bezier(.22,1,.36,1);
}
.rv-float.is-in{ transform: translateY(0) scale(1); opacity: 1; }
.rv-float-ring{
  position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: rgba(255,255,255,0.16);
}

.rv-float-body{
  position:relative; z-index:1; border-radius:16px;
  background: rgba(22,21,20,0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 14px 16px 13px; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.rv-float-head{ display:flex; align-items:center; gap:7px; margin-bottom:11px; }
.rv-float-g{ width:18px; height:18px; }
.rv-float-score{ font-size:16px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.rv-float-stars{ position:relative; overflow:hidden; color:#f5b942; font-size:13.5px; letter-spacing:1px; }
.rv-float-stars i{ font-style:normal; }
.rv-float-stars::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.85) 50%, transparent 80%);
  transform: translateX(-130%); animation: rv-shimmer 4.5s ease-in-out infinite; animation-delay:1s;
}
@keyframes rv-shimmer{ 0%,55%{ transform:translateX(-130%);} 78%,100%{ transform:translateX(130%);} }
.rv-float-count{ font-size:12px; color:#a9a49e; margin-left:auto; }
.rv-float-count b{ color:#d8d3cd; font-weight:700; }

.rv-deck{ position:relative; height:112px; }
.rv-slip{
  position:absolute; inset:0; border-radius:11px;
  background:#211f1d; border:1px solid rgba(255,255,255,0.10);
  padding: 11px 13px; transform-origin: 50% 100%;
  transition: transform .62s cubic-bezier(.22,1,.36,1), opacity .62s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; justify-content:space-between;
}
.rv-slip p{ margin:0; font-size:13px; line-height:1.45; color:#ddd8d2; }
.rv-slip span{ font-size:11.5px; font-weight:700; color:#b5afa8; letter-spacing:.01em; }
.rv-slip p, .rv-slip span{ transition: opacity .3s ease; }
.rv-slip:not(.pos-0):not(.is-out) p, .rv-slip:not(.pos-0):not(.is-out) span{ opacity:0; }
.rv-slip.pos-0{ transform: translateY(0) scale(1) rotate(0); opacity:1; z-index:3; }
.rv-slip.pos-1{ transform: translateY(10px) scale(.965) rotate(-1deg); opacity:.8; z-index:2; }
.rv-slip.pos-2{ transform: translateY(19px) scale(.93) rotate(1.3deg); opacity:.55; z-index:1; }
.rv-slip.is-out{ transform: translateX(-118%) rotate(-11deg); opacity:0; z-index:4; }

.rv-float-cta{
  display:inline-flex; align-items:center; gap:5px; margin-top:26px;
  font-size:12.5px; font-weight:700; color:#ffffff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.28); padding-bottom:2px;
}
.rv-float-cta:hover{ border-bottom-color: rgba(255,255,255,0.7); }
.rv-float-cta span{ transition: transform .3s ease; }
.rv-float:hover .rv-float-cta span{ transform: translateX(4px); }
.rv-float-close{
  position:absolute; top:7px; right:9px; z-index:4;
  background:none; border:0; color:#a9a49e; font-size:18px; line-height:1;
  padding:3px 6px; cursor:pointer; border-radius:6px;
}
.rv-float-close:hover{ color:#fff; background: rgba(255,255,255,0.10); }

/* mobile: compact pill that taps open into the deck */
@media (max-width: 900px){
  .rv-float{ left:12px; bottom:14px; width:auto; max-width:calc(100vw - 24px); }
  .rv-float-body{ padding:8px 12px; }
  .rv-float-head{ margin-bottom:0; gap:6px; cursor:pointer; }
  .rv-float-head::after{
    content:"\203A"; margin-left:2px; color:#a9a49e; font-size:15px; line-height:1;
    transform: rotate(-90deg); transition: transform .35s ease;
  }
  .rv-float-score{ font-size:14.5px; }
  .rv-float-stars{ font-size:12px; }
  .rv-float-count{ font-size:11.5px; margin-left:4px; }
  .rv-deck, .rv-float-cta, .rv-float-close{ display:none; }
  .rv-float.is-open{ width:calc(100vw - 24px); max-width:350px; }
  .rv-float.is-open .rv-float-body{ padding:13px 15px 12px; }
  .rv-float.is-open .rv-float-head{ margin-bottom:10px; }
  .rv-float.is-open .rv-float-head::after{ transform: rotate(90deg); }
  .rv-float.is-open .rv-deck{ display:block; }
  .rv-float.is-open .rv-float-cta{ display:inline-flex; }
  .rv-float.is-open .rv-float-close{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .rv-float, .rv-slip{ transition:none; }
  .rv-float-stars::after{ animation:none; }
}

/* Services grid with a fourth card (main page only: Installation has no page
   of its own, so it lives here rather than as a service page). Four across on
   wide screens, then the shared 2-up / 1-up breakpoints take over. */
.svc-grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px){ .svc-grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .svc-grid-4{ grid-template-columns: 1fr; } }