/* ============ 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{ grid-template-columns: 1fr 1fr; } }

/* 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); }