/* =========================================================
   Paarl Plumbing Co. — placeholder site
   Layout adapted from client-supplied roofing reference,
   recoloured red -> professional blue.
   ========================================================= */

:root{
  /* Brand palette - The Paarl Plumbers */
  --blue:      #3e64a7;   /* primary accent */
  --blue-dark: #2c4a82;   /* hover / deeper */
  --blue-soft: #eceff8;   /* light tint */
  --light-blue:#5f8cc0;   /* accents on dark */
  --navy:      #1f376c;   /* dark sections, footer, hero */
  --navy-2:    #24407c;
  --navy-3:    #2c4c85;
  --ink:       #16233b;
  --muted:     #4c5c74;
  --muted-2:   #8a97a6;
  --paper:     #f3f6fb;
  --line:      #e2e8f1;
  --white:     #ffffff;
  --gold:      #f5a623;

  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 10px 30px -18px rgba(15,30,50,.16);
  --shadow-sm: 0 4px 14px -10px rgba(15,30,50,.13);
  --container: 1340px;
  --font:      "Barlow", system-ui, -apple-system, sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-display: "Bebas Neue", "Barlow Semi Condensed", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,.hero__title,.section__title,.quotecard__title,.ctaband__text h2,.stat strong{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
}
h3,h4,h5,h6{ font-family:var(--font-head); }
input,select,textarea{ font-weight:500; color:var(--ink); }
::placeholder{ color:#8794a5; opacity:1; font-weight:500; }
.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* icons that are filled shapes */
.topbar .ic, .rating__logo svg, .floater svg, .footer__social .ic, .topbar__social .ic{ fill:currentColor; stroke:none; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:.95rem; line-height:1;
  padding:.95em 1.5em; border-radius:12px; border:2px solid transparent;
  cursor:pointer; transition:.25s ease; white-space:nowrap;
}
.btn .ic{ width:1.1em; height:1.1em; }
.btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--primary:hover{ background:#16233b; border-color:#16233b; }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.3); }
.btn--ghost:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5); }
.btn--dark{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--dark:hover{ background:#081321; }
.btn--sm{ padding:.7em 1.15em; font-size:.85rem; border-radius:10px; }
.btn--lg{ padding:1.05em 1.75em; font-size:1rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--navy); color:#c7d2de; font-size:.82rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; }
.topbar__tag{ color:#9fb0c0; }
.topbar__right{ display:flex; align-items:center; gap:22px; }
.topbar__link{ display:inline-flex; align-items:center; gap:7px; color:#dbe4ee; transition:.2s; }
.topbar__link:hover{ color:#fff; }
.topbar__link .ic{ width:15px; height:15px; color:var(--blue); }
.topbar__social{ display:flex; align-items:center; gap:12px; }
.topbar__social span{ color:#7e8ea0; }
.topbar__social a{ color:#c7d2de; display:inline-flex; transition:.2s; }
.topbar__social a:hover{ color:#fff; }
.topbar__social .ic{ width:16px; height:16px; }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--line); transition:.3s; }
.header.is-stuck{ box-shadow:0 10px 30px -18px rgba(11,27,46,.45); }
.header__inner{ display:flex; align-items:center; gap:24px; min-height:76px; }

.logo{ display:inline-flex; align-items:center; gap:12px; }
.logo__badge{ height:52px; width:auto; display:block; }
.logo__name{ display:flex; flex-direction:column; line-height:1; }
.logo__name strong{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.03em; font-weight:400; color:var(--navy); }
.logo__name em{ font-size:.6rem; letter-spacing:.2em; font-style:normal; font-weight:600; color:var(--blue); text-transform:uppercase; margin-top:3px; }

.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav__link{ position:relative; display:inline-flex; align-items:center; gap:5px; padding:.6em .95em; font-weight:600; font-size:.94rem; color:var(--ink); border-radius:8px; transition:.2s; }
.nav__link:hover, .nav__link.is-active{ color:var(--blue); }
.nav__link .caret{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.nav__item--drop{ position:relative; }
.nav__drop{
  position:absolute; top:calc(100% + 14px); left:-12px; min-width:284px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 48px -22px rgba(15,30,50,.35); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.24s cubic-bezier(.2,.7,.2,1);
}
.nav__item--drop:hover .nav__drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__drop::before{ content:""; position:absolute; left:26px; top:-6px; width:12px; height:12px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
.nav__drop::after{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav__drop a{ display:flex; align-items:center; gap:12px; padding:.62em .7em; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--ink); transition:.15s; }
.nav__drop a:hover{ background:var(--navy); color:#fff; }
.ndi{ width:20px; height:20px; flex:none; background:var(--muted-2); transition:.15s; }
.nav__drop a:hover .ndi{ background:#fff; }
.ndsvg{ width:20px; height:20px; flex:none; fill:var(--muted-2); transition:.15s; }
.nav__drop a:hover .ndsvg{ fill:#fff; }

.header__actions{ display:flex; align-items:center; gap:14px; margin-left:6px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:40px; background:transparent; border:none; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ width:20px; height:2px; background:var(--blue); border-radius:2px; transition:.3s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,30,60,.95) 0%, rgba(18,30,60,.82) 30%, rgba(22,38,74,.5) 56%, rgba(22,38,74,.15) 100%),
    url("../assets/images/hero-bg.jpg") center right / cover no-repeat;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,24,48,.4) 0%, transparent 20%, transparent 66%, rgba(14,24,48,.55) 100%);
}
.hero__inner{ position:relative; display:flex; align-items:center; min-height:620px; padding:100px 24px 160px; }
.hero__content{ max-width:720px; }
/* Hero content animates in on load via CSS (never relies on JS reveal, so it
   is never blank on first paint / with JS disabled) */
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero__content, .hero__media{ animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero__media{ animation-delay:.14s; }
@media (prefers-reduced-motion:reduce){ .hero__content, .hero__media{ animation:none; } }

.hero__customers{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; }
.avatars{ display:flex; }
.avatars img{ width:38px; height:38px; border-radius:50%; border:2px solid var(--navy); object-fit:cover; margin-left:-10px; }
.avatars img:first-child{ margin-left:0; }
.hero__proof{ display:inline-flex; align-items:center; gap:16px; margin-bottom:26px; }
.hero__proof .avatars img{ border-color:rgba(255,255,255,.8); }
.hero__rating{ display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:1px solid rgba(255,255,255,.28); }
.hero__rating .stars{ color:var(--gold); font-size:1.05rem; letter-spacing:2px; line-height:1; }
.hero__rating-txt{ font-size:.85rem; color:#c7d2de; }
.hero__rating-txt strong{ color:#fff; font-weight:700; }
.avatars--sm img{ width:34px; height:34px; }
.hero__customers span{ font-size:.9rem; color:#c7d2de; }
.hero__customers strong{ color:#fff; }

.hero__title{ font-size:clamp(3rem,6.5vw,5.3rem); font-weight:400; line-height:.94; letter-spacing:.015em; }
.hero__sub{ margin:20px 0 26px; max-width:520px; color:#b9c6d4; font-size:1.05rem; }

.hero__ratings{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.rating{ display:inline-flex; align-items:center; gap:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:9px 16px; border-radius:8px; }
.rating__logo{ display:grid; place-items:center; }
.rating__logo svg{ width:22px; height:22px; }
.rating__meta{ display:flex; flex-direction:column; line-height:1.15; }
.rating__meta strong{ font-size:.95rem; }
.rating__meta .stars{ color:var(--gold); font-size:.72rem; letter-spacing:1px; }
.rating__meta em{ font-style:normal; font-size:.7rem; color:#9fb0c0; }

.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__media{ position:relative; }
.hero__media img{ width:100%; border-radius:var(--radius-lg); object-fit:cover; aspect-ratio:82/96; box-shadow:0 20px 44px -30px rgba(0,0,0,.5); }
.hero__media::before{ content:""; position:absolute; inset:-12px -12px 18px 18px; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); }
.hero__media-note{ position:absolute; bottom:14px; left:14px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(11,27,46,.72); color:#c7d2de; padding:5px 10px; border-radius:6px; }

/* ---------- Quote card (overlap) ---------- */
.quotecard{ position:relative; margin-top:-80px; z-index:5; }
.quotecard__box{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:38px clamp(24px,4vw,54px); border:1px solid var(--line); }
.quotecard__title{ text-align:center; font-size:clamp(1.6rem,3vw,2.15rem); font-weight:800; }
.quotecard__title span{ color:var(--blue); }
.quotecard__lead{ text-align:center; color:var(--muted); margin:8px 0 26px; }
.qform{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.field label{ display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.field__wrap{ position:relative; display:flex; align-items:center; }
.field__wrap .ic{ position:absolute; left:13px; width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; }
.field__wrap input, .field__wrap select{ width:100%; padding:.72em .9em .72em 40px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.93rem; background:var(--paper); transition:.2s; }
.field__wrap input:focus, .field__wrap select:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(62,100,167,.15); }
.qform__submit{ height:48px; }
.form-msg{ grid-column:1/-1; margin-top:4px; font-size:.9rem; font-weight:600; color:var(--blue); }
.form-msg--light{ color:#eaf1fc; }

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section--alt{ background:var(--paper); }
.section__head{ max-width:720px; margin:0 auto 54px; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.eyebrow i{ width:26px; height:2px; background:var(--blue); display:inline-block; border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:#7fb0f5; }
.eyebrow--light i{ background:#7fb0f5; }
.section__title{ font-size:clamp(2.2rem,4.2vw,3.4rem); font-weight:400; line-height:1; letter-spacing:.02em; }
.section__title--light{ color:#fff; }
.section__text{ color:var(--muted); margin-top:16px; font-size:1.02rem; }
.section__text--center{ text-align:center; }
.section__text--light{ color:#a9bacb; }

/* ---------- About ---------- */
.about__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; border-radius:var(--radius-lg); aspect-ratio:76/88; object-fit:cover; box-shadow:var(--shadow); }
.stats{ display:flex; gap:30px; margin:30px 0; flex-wrap:wrap; }
.stat strong{ display:block; font-size:2.4rem; font-weight:800; color:var(--ink); line-height:1; }
.stat span{ font-size:.86rem; color:var(--muted); display:block; margin-top:8px; white-space:nowrap; }
.about__cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.about__trust{ display:flex; align-items:center; gap:12px; }
.about__trust span{ font-size:.82rem; color:var(--muted); }

/* ---------- Services ---------- */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.scard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; transition:border-color .2s ease, box-shadow .2s ease; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; }
.scard:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
/* Masked plumbing icons (reusable via data-icon) */
[data-icon]{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
[data-icon="plumber"]{  -webkit-mask-image:url(../assets/images/icons/plumber.png);   mask-image:url(../assets/images/icons/plumber.png); }
[data-icon="water-tap"]{ -webkit-mask-image:url(../assets/images/icons/water-tap.png); mask-image:url(../assets/images/icons/water-tap.png); }
[data-icon="plumbing"]{ -webkit-mask-image:url(../assets/images/icons/plumbing.png); mask-image:url(../assets/images/icons/plumbing.png); }
[data-icon="leak"]{     -webkit-mask-image:url(../assets/images/icons/leak.png);      mask-image:url(../assets/images/icons/leak.png); }
[data-icon="faucet"]{   -webkit-mask-image:url(../assets/images/icons/faucet.png);    mask-image:url(../assets/images/icons/faucet.png); }
[data-icon="pipe"]{     -webkit-mask-image:url(../assets/images/icons/pipe.png);      mask-image:url(../assets/images/icons/pipe.png); }
[data-icon="plunger"]{  -webkit-mask-image:url(../assets/images/icons/plunger.png);   mask-image:url(../assets/images/icons/plunger.png); }
[data-icon="pressure"]{  -webkit-mask-image:url(../assets/images/icons/pressure.png);   mask-image:url(../assets/images/icons/pressure.png); }
[data-icon="commercial"]{-webkit-mask-image:url(../assets/images/icons/commercial.png); mask-image:url(../assets/images/icons/commercial.png); }
[data-icon="price"]{     -webkit-mask-image:url(../assets/images/icons/price.png);      mask-image:url(../assets/images/icons/price.png); }
[data-icon="borehole"]{  -webkit-mask-image:url(../assets/images/icons/borehole.png);   mask-image:url(../assets/images/icons/borehole.png); }
[data-icon="geyser"]{    -webkit-mask-image:url(../assets/images/icons/geyser.png);     mask-image:url(../assets/images/icons/geyser.png); }
[data-icon="solar"]{     -webkit-mask-image:url(../assets/images/icons/solar.png);      mask-image:url(../assets/images/icons/solar.png); }
[data-icon="valve"]{     -webkit-mask-image:url(../assets/images/icons/valve.png);      mask-image:url(../assets/images/icons/valve.png); }
[data-icon="bath"]{      -webkit-mask-image:url(../assets/images/icons/bath.png);       mask-image:url(../assets/images/icons/bath.png); }
[data-icon="toilet"]{    -webkit-mask-image:url(../assets/images/icons/toilet.png);     mask-image:url(../assets/images/icons/toilet.png); }
[data-icon="jojo"]{      -webkit-mask-image:url(../assets/images/icons/jojo.png);       mask-image:url(../assets/images/icons/jojo.png); }
[data-icon="location"]{  -webkit-mask-image:url(../assets/images/icons/location.png);   mask-image:url(../assets/images/icons/location.png); }
[data-icon="maintenance"]{ -webkit-mask-image:url(../assets/images/icons/maintenance.png); mask-image:url(../assets/images/icons/maintenance.png); }
[data-icon="callout"]{   -webkit-mask-image:url(../assets/images/icons/callout.png);    mask-image:url(../assets/images/icons/callout.png); }
[data-icon="insurance"]{ -webkit-mask-image:url(../assets/images/icons/insurance.png);  mask-image:url(../assets/images/icons/insurance.png); }
[data-icon="afterhours"]{-webkit-mask-image:url(../assets/images/icons/afterhours.png); mask-image:url(../assets/images/icons/afterhours.png); }
[data-icon="agreed"]{    -webkit-mask-image:url(../assets/images/icons/agreed.png);     mask-image:url(../assets/images/icons/agreed.png); }
[data-icon="invoice"]{   -webkit-mask-image:url(../assets/images/icons/invoice.png);    mask-image:url(../assets/images/icons/invoice.png); }
.scard__icon{ display:block; width:44px; height:44px; flex:none; background:var(--blue); }
.scard__svg{ color:var(--blue); display:flex; }
.scard__svg svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.scard h3{ font-size:1.18rem; font-weight:700; margin:0; }
.scard p{ grid-column:1 / -1; color:var(--muted); font-size:.94rem; margin:16px 0; }
.scard__link{ grid-column:1 / -1; font-weight:700; font-size:.9rem; color:var(--blue); }
.scard__link:hover{ color:var(--blue-dark); }
.services__foot{ text-align:center; margin-top:40px; color:var(--muted); font-weight:600; }
.services__foot a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------- CTA band ---------- */
.ctaband{ background:linear-gradient(120deg,var(--blue),var(--blue-dark)); color:#fff; }
.ctaband__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; padding:44px 24px; }
.ctaband__eyebrow{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.ctaband__text h2{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; margin-top:8px; line-height:1.2; }
.ctaband__text a{ text-decoration:underline; text-underline-offset:4px; }
.ctaband__form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ctaf{ position:relative; display:block; }
.ctaf .ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; pointer-events:none; z-index:1; }
.ctaband__form input, .ctaband__form select{ width:100%; padding:.72em 1em .72em 40px; border:none; border-radius:9px; font:inherit; font-size:.93rem; font-weight:500; color:var(--ink); background:#fff; }
.ctaband__form input::placeholder{ color:#6f7d90; }
.ctaband__form input:focus, .ctaband__form select:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.ctaband__form .btn--dark{ justify-content:center; }
.ctaband__form .form-msg{ grid-column:1/-1; }

/* ---------- Owner story ---------- */
.owner__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.owner__sub{ color:var(--blue); font-size:1rem; font-weight:700; margin-top:14px; }
.owner__signature{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.owner__signature strong{ display:block; font-size:1.1rem; }
.owner__signature span{ color:var(--muted); font-size:.88rem; }
.vm{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.vm__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.vm__icon{ color:var(--blue); margin-bottom:12px; }
.vm__icon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vm__card h4{ font-size:1.05rem; margin-bottom:8px; }
.vm__card p{ color:var(--muted); font-size:.9rem; }
.owner__points{ list-style:none; margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; }
.owner__points li{ position:relative; padding-left:26px; }
.owner__points li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:11px; border-radius:50%; background:var(--blue); }
.owner__points h4{ font-size:1.08rem; margin-bottom:4px; }
.owner__points p{ color:var(--muted); font-size:.95rem; }

/* Breadcrumb (service pages) */
.crumb{ font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:18px; letter-spacing:.02em; }
.crumb a{ color:rgba(255,255,255,.9); }
.crumb a:hover{ color:#fff; }
.crumb span{ margin:0 6px; opacity:.6; }
.owner__media{ position:relative; }
.owner__media img{ width:100%; border-radius:var(--radius-lg); aspect-ratio:68/82; object-fit:cover; box-shadow:var(--shadow); }
.owner__namecard{ position:absolute; left:20px; bottom:20px; background:rgba(11,27,46,.85); backdrop-filter:blur(6px); color:#fff; padding:14px 18px; border-radius:14px; }
.owner__namecard strong{ display:block; font-size:1rem; }
.owner__namecard span{ font-size:.78rem; color:#b9c6d4; }

/* ---------- Why choose us ---------- */
.why{ background:var(--navy); position:relative; overflow:hidden; }
.why .container{ position:relative; }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.wcard{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:34px 28px; text-align:center; transition:border-color .2s ease, background .2s ease; }
.wcard:hover{ background:rgba(255,255,255,.05); border-color:rgba(95,140,192,.55); }
.wcard--link{ text-decoration:none; display:block; }
.wcard__more{ display:inline-block; margin-top:12px; color:var(--light-blue); font-weight:700; font-size:.85rem; }
.wcard--link:hover .wcard__more{ color:#fff; }
.wcard__icon{ color:var(--light-blue); margin:0 auto 14px; display:flex; justify-content:center; }
.wcard__icon svg{ width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.wcard h3{ color:#fff; font-size:1.02rem; margin-bottom:8px; }
.wcard p{ color:#9fb0c0; font-size:.85rem; }

/* ---------- Areas ---------- */
.areas__list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:840px; margin:0 auto; }
.areas__list li{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.7em 1.35em; font-weight:600; font-size:.95rem; transition:border-color .2s ease, color .2s ease; }
.areas__list li:hover{ border-color:var(--blue); color:var(--blue); }
.areas__list li::before{
  content:""; width:16px; height:16px; flex:none; background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Work gallery ---------- */
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work__item{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.work__item img{ width:100%; aspect-ratio:6/5; object-fit:cover; transition:.4s; }
.work__item:hover img{ transform:scale(1.04); }
.work__item figcaption{ position:absolute; left:0; bottom:0; right:0; padding:26px 18px 16px; color:#fff; font-weight:700; font-size:.95rem; background:linear-gradient(transparent,rgba(11,27,46,.85)); }

/* ---------- Testimonials ---------- */
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); }
.tcard__stars{ color:var(--gold); letter-spacing:2px; margin-bottom:14px; }
.tcard p{ font-size:1rem; color:var(--ink); margin-bottom:22px; }
.tcard footer{ display:flex; align-items:center; gap:8px; }
.tcard footer img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.tcard__g{ display:grid; place-items:center; flex:none; }
.tcard__g svg{ width:26px; height:26px; }
.tcard footer strong{ color:var(--ink); font-size:.92rem; font-weight:700; }
.tcard__loc{ color:var(--muted); font-size:.88rem; }
.tcard__loc::before{ content:"·"; margin:0 6px 0 2px; color:var(--muted-2); }

/* ---------- Work & Reviews marquee ---------- */
.showcase .section__head{ margin-bottom:40px; }
.marquee{ overflow:hidden; padding:6px 2px;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.marquee__track{ display:flex; gap:20px; width:max-content; animation:mqscroll 55s linear infinite; will-change:transform; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes mqscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-card{ flex:none; height:290px; border-radius:var(--radius); }
.mq-photo{ position:relative; width:360px; overflow:hidden; box-shadow:var(--shadow-sm); margin:0; }
.mq-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mq-photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:28px 16px 15px; color:#fff; font-weight:700; font-size:.95rem; background:linear-gradient(transparent,rgba(15,26,52,.86)); }
.mq-review{ width:400px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); margin:0; }
.mq-review .tcard__stars{ color:var(--gold); letter-spacing:2px; }
.mq-review p{ font-size:1.02rem; color:var(--ink); margin:14px 0 auto; line-height:1.5; }
.mq-review footer{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.mq-review footer strong{ color:var(--ink); font-size:.92rem; font-weight:700; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }
@media (max-width:600px){
  .mq-card{ height:250px; }
  .mq-photo{ width:280px; }
  .mq-review{ width:320px; padding:24px; }
}

/* ---------- Service page: local content ---------- */
.local__inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start; }
.local__inner .section__title{ margin-bottom:6px; }
.local__inner .section__text{ margin-top:16px; }
.local__card{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:34px 32px; position:sticky; top:100px; }
.local__card h3{ font-size:1.3rem; color:#fff; margin-bottom:12px; }
.local__card p{ color:#c7d2de; font-size:.95rem; margin-bottom:20px; }
.ticklist{ list-style:none; display:grid; gap:11px; margin-bottom:24px; }
.ticklist li{ position:relative; padding-left:30px; font-size:.94rem; color:#e6ecf3; }
.ticklist li::before{ content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--light-blue); color:var(--navy); font-size:11px; font-weight:800; display:grid; place-items:center; }

/* ---------- Service page: related services ---------- */
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.related__card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:border-color .2s ease, box-shadow .2s ease; color:var(--ink); }
.related__card:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
.related__card .scard__icon{ margin-bottom:16px; }
.related__card h3{ font-size:1.15rem; margin-bottom:8px; }
.related__card p{ color:var(--muted); font-size:.92rem; margin-bottom:14px; }

/* ---------- Contact ---------- */
.contact__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; }
.contact__list{ list-style:none; margin-top:28px; display:grid; gap:18px; }
.contact__list li{ display:flex; align-items:center; gap:16px; }
.contact__ic{ width:40px; color:var(--blue); display:grid; place-items:center; flex:none; }
.contact__ic svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact__list strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.contact__list a, .contact__list div span{ font-weight:700; font-size:1.02rem; color:var(--ink); }
.hours{ display:grid; grid-template-columns:auto 1fr; column-gap:26px; row-gap:0; margin-top:9px; max-width:250px; }
.hours b{ font-weight:600; color:var(--ink); font-size:.85rem; letter-spacing:.02em; padding:6px 0; border-top:1px solid var(--line); }
.hours em{ font-style:normal; color:var(--muted); font-size:.85rem; text-align:right; padding:6px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.hours b:first-of-type, .hours em:first-of-type{ border-top:none; }
.hours em.closed{ color:var(--blue); font-weight:600; }
.contact__map{ margin-top:44px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; box-shadow:var(--shadow-sm); }
.contact__map iframe{ width:100%; height:360px; display:block; }
.contact__form{ background:linear-gradient(150deg,var(--blue),var(--blue-dark)); border:none; border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.contact__form .form-title{ grid-column:1 / -1; font-family:var(--font-head); font-weight:700; font-size:1.35rem; margin:0 0 6px; color:#fff; }
.contact__form .field2 > .ic{ color:var(--blue); }
.contact__form .field2 input, .contact__form .field2 select, .contact__form .field2 textarea{ background:#fff; border-color:transparent; }
.contact__form .field2 input:focus, .contact__form .field2 select:focus, .contact__form .field2 textarea:focus{ border-color:transparent; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.contact__form .btn--primary{ background:var(--navy); border-color:var(--navy); }
.contact__form .btn--primary:hover{ background:#16233b; border-color:#16233b; }
.field2{ margin:0; position:relative; }
.field2--full, .contact__form .btn, .contact__form .form-msg{ grid-column:1 / -1; }
.contact__form .form-msg{ color:#fff; }
.field2 > .ic{ position:absolute; left:13px; top:13px; width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; pointer-events:none; z-index:1; }
.field2 input, .field2 select, .field2 textarea{ width:100%; padding:.72em 1em .72em 40px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.93rem; background:var(--paper); transition:.2s; resize:vertical; }
.field2 input:focus, .field2 select:focus, .field2 textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(62,100,167,.15); }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#a9bacb; padding-top:70px; }
.footer__inner{ display:grid; grid-template-columns:1.5fr .9fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; }
.footer__logo{ display:inline-flex; align-items:center; gap:13px; background:#fff; border-radius:14px; padding:13px 18px; text-decoration:none; }
.footer__logo img{ height:54px; width:auto; display:block; }
.footer__brand p{ margin:0 0 18px; font-size:.92rem; max-width:320px; }

/* ---------- Blog ---------- */
.bloghub{ padding:74px 0 88px; }
.bloghub__title{ font-size:clamp(2.6rem,5.5vw,4rem); line-height:1; margin:14px 0 14px; }
.bloghub__lead{ color:var(--muted); font-size:1.05rem; max-width:620px; margin-bottom:42px; }
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease; }
.blog-card:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
.blog-card__tag{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--navy); padding:5px 12px; border-radius:50px; margin-bottom:16px; }
.blog-card h3{ font-size:1.18rem; margin-bottom:10px; line-height:1.25; }
.blog-card p{ color:var(--muted); font-size:.94rem; margin-bottom:0; }
.blog-card__soon{ margin-top:auto; font-size:.82rem; font-weight:700; color:var(--muted-2); }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#c7d2de; transition:.2s; }
.footer__social a:hover{ background:var(--blue); color:#fff; }
.footer__social .ic{ width:18px; height:18px; }
.footer .col-title{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:.95rem; margin-bottom:18px; letter-spacing:.03em; }
.footer__brand .col-title{ margin-top:22px; }
.footer__col a, .footer__col span{ display:block; font-size:.9rem; margin-bottom:11px; color:#a9bacb; transition:.2s; }
.footer__links2{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.09); padding:20px 0; }
.footer__bottom-inner{ display:flex; justify-content:space-between; gap:16px; font-size:.82rem; color:#7e8ea0; }
.footer__bottom em{ font-style:normal; color:#5f6f80; }

/* ---------- Floaters ---------- */
.floaters{ position:fixed; right:20px; bottom:20px; z-index:70; display:flex; flex-direction:column; gap:12px; }
.floater{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 12px 26px -8px rgba(0,0,0,.4); transition:.25s; }
.floater svg{ width:26px; height:26px; fill:currentColor; }
.floater--wa{ background:#25d366; }
.floater--call{ background:var(--blue); }
.floater:hover{ transform:scale(1.06); }
.ctaband__note{ margin-top:10px; color:rgba(255,255,255,.85); font-size:.95rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
/* Cards win the transition cascade so hover (border/shadow) stays snappy and
   isn't governed by the slower reveal transition */
.services__grid .scard{ transition:opacity .55s ease, transform .55s ease, border-color .15s ease, box-shadow .15s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; padding-bottom:120px; }
  .hero__media{ display:none; }
  .about__inner, .owner__inner, .contact__inner{ grid-template-columns:1fr; gap:40px; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .qform{ grid-template-columns:repeat(2,1fr); }
  .qform__submit{ grid-column:1/-1; }
  .ctaband__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .topbar__tag{ display:none; }
  .topbar__inner{ justify-content:center; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:#fff;
    flex-direction:column; align-items:stretch; gap:2px; padding:90px 22px 30px;
    box-shadow:-20px 0 60px -20px rgba(11,27,46,.4); transform:translateX(100%);
    transition:.32s; margin-left:0; overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ padding:.85em .6em; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__item--drop{ border-bottom:1px solid var(--line); }
  .nav__item--drop .nav__link{ border-bottom:none; }
  .nav__drop{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 8px 12px; min-width:0; display:none; }
  .nav__drop::before, .nav__drop::after{ display:none; }
  .nav__item--drop.is-open .nav__drop{ display:block; }
  .nav-toggle{ display:flex; }
  .hide-sm{ display:none; }
  .services__grid, .work__grid, .testi__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:1fr 1fr; }
  .vm{ grid-template-columns:1fr; }
  .ctaband__form{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; }
  .owner__points{ grid-template-columns:1fr; }
  .local__inner{ grid-template-columns:1fr; gap:36px; }
  .local__card{ position:static; }
  .related__grid{ grid-template-columns:1fr; }
  .blog__grid{ grid-template-columns:1fr; }
  .section{ padding:70px 0; }
  .stats{ gap:26px; }
}
@media (max-width:480px){
  .qform{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__bottom-inner{ flex-direction:column; text-align:center; }
  .why__grid{ grid-template-columns:1fr; }
  .hero__ratings{ flex-direction:column; align-items:flex-start; }
  .floater{ width:48px; height:48px; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}