/* ==========================================================================
   PLUMBER LISBON — starterkit-CSS (hertokeniseerd uit de bewezen AC-starterkit)
   Merk: diep teal (#0E7C8A) + warme terracotta-CTA (#E4572E) op een teal-ink basis.
   Gegenereerd door scripts/make_style.py — pas dat script aan, niet dit bestand.
   ========================================================================== */
/* ==========================================================================
   PLUMBER LISBON — starterkit (hertokeniseerd)
   Geleerd van mhsmedia.nl / adhunt.nl: licht, strak, sans-serif, één merk-
   kleur (royal blue) + groen "resultaat"-accent, lead-magnet voorop, kaarten,
   harde metrics, dark footer. Op het Adsvantage-merk.
   ========================================================================== */
:root{
  --blue:#0E7C8A;          /* merk / primair blauw — koel, betrouwbaar */
  --blue-700:#0A5B66;
  --blue-800:#084A54;
  --blue-900:#06282F;      /* diep navy — dark secties/footer */
  --blue-300:#9AD3DC;
  --blue-050:#EAF6F8;      /* zachte tint */
  --ink:#0C2126;           /* near-black navy-ink: koppen, dark secties */
  --ink-2:#102C33;
  --slate:#47606B;         /* bodytekst */
  --muted:#7A8F98;
  --line:#E3EBEE;          /* koele hairline */
  --line-2:#EFF4F6;
  --bg:#FFFFFF;
  --bg-2:#F4F9FA;          /* alt sectie */
  --white:#FFFFFF;
  --green:#1B9C6B;         /* proof / trust — spaarzaam */
  --green-700:#147F57;
  --green-050:#E3F6EE;
  --amber:#E4572E;         /* WARM accent — CTA-pop + highlight (koelt én verwarmt) */
  --amber-700:#C7461F;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px -3px rgba(6,40,47,.10);
  --shadow:0 18px 44px -22px rgba(6,40,47,.26);
  --shadow-blue:0 22px 50px -24px rgba(14,124,138,.45);
  --shadow-amber:0 18px 40px -20px rgba(228,87,46,.5);
  --container:1180px;
  --ff-head:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-body:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-body);color:var(--slate);background:var(--bg);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--ink);line-height:1.1;margin:0 0 .5em;
  font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(2.35rem,5.4vw,3.9rem);letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.22rem;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none;transition:color .15s}
a:hover{color:var(--blue-700)}
img{max-width:100%;display:block}
strong,b{color:var(--ink);font-weight:700}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tint{background:var(--bg-2)}
.section--ink{background:var(--ink);color:#C2D6DA}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.eyebrow{display:inline-block;font-family:var(--ff-mono);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.72rem;color:var(--blue)}
.section--ink .eyebrow{color:var(--blue-300)}
.lead{font-size:1.18rem;color:var(--slate);line-height:1.58}
.section--ink .lead{color:#A8C2C8}
.center{text-align:center}
.measure{max-width:720px}
.measure-center{max-width:740px;margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:48px}
.sec-head .lead{margin-top:.6rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--ff-body);
  font-weight:700;font-size:1rem;padding:.92em 1.5em;border-radius:12px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;
  white-space:nowrap;line-height:1.15;letter-spacing:-.01em}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-blue)}
.btn--gold{background:var(--amber);color:#fff}
.btn--gold:hover{background:var(--amber-700);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-amber)}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-700);color:#fff;transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(27,156,107,.7)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--light{background:#fff;color:var(--blue)}
.btn--light:hover{color:var(--blue-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--outline-light:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{padding:1.04em 1.9em;font-size:1.04rem}
@media(max-width:520px){.btn{white-space:normal;text-align:center}}   /* lange (PT-)knoplabels breken af i.p.v. overflow */
.btn--block{display:flex;width:100%}
/* rental off-ramp (asymmetrische koppeling: 'kan-niet-installeren'-downsell naar AC Rental) */
.offramp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  background:var(--blue-050);border:1px solid var(--blue-300);border-radius:var(--radius);padding:1.4rem 1.6rem}
.offramp-i{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--blue-300);
  display:grid;place-items:center;color:var(--blue);flex:0 0 auto}
.offramp-i svg{width:24px;height:24px}
.offramp h3{font-size:1.1rem;margin:0 0 .25rem}
.offramp p{margin:0;color:var(--slate);font-size:.95rem;line-height:1.5}
.offramp .btn{white-space:nowrap}
.offramp>*{min-width:0}
@media(max-width:760px){.offramp{grid-template-columns:1fr;gap:1rem}.offramp .btn{width:100%;white-space:normal}}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-head);font-weight:800;
  color:var(--ink);font-size:1.16rem;letter-spacing:-.03em}
.brand:hover{color:var(--ink)}
.brand .brand-logo{width:34px;height:34px;border-radius:9px;object-fit:contain;flex:0 0 auto}
.brand .brand-mark{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
  background:var(--blue);color:#fff;font-family:var(--ff-head);font-weight:800;font-size:.92rem;letter-spacing:-.03em;line-height:1}
.brand .brand-mark b{font-weight:800;color:var(--blue-300)}
.footer-brand .brand .brand-mark{background:var(--blue-700)}
.brand small{display:block;font-family:var(--ff-mono);font-weight:500;font-size:.6rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--ff-body);font-weight:600;font-size:.95rem;color:var(--ink);padding:.5rem .8rem;border-radius:9px}
.nav-links a:hover{background:var(--bg-2);color:var(--blue)}
.nav-links a.active{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:.6rem .8rem;border-radius:9px;font-size:.92rem;color:var(--ink);font-weight:600}
.dropdown-menu a:hover{background:var(--bg-2)}
.dropdown-menu a small{display:block;color:var(--muted);font-weight:400;font-size:.78rem;margin-top:1px;font-family:var(--ff-body)}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s;border-radius:2px}

/* ---- hero (light, lead-magnet) ---- */
.hero{position:relative;background:
  radial-gradient(820px 460px at 12% -8%,var(--blue-050),transparent 60%),
  radial-gradient(680px 420px at 100% 0,rgba(27,156,107,.07),transparent 55%),var(--bg);
  overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.hero .container{padding-top:70px;padding-bottom:84px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.45em}
.hero h1 .hl{color:var(--amber)}
.hero .lead{max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
/* Beeld in de hero, in plaats van de weggehaalde lead-alinea en trust-regel. Vaste
   aspect-ratio zodat er geen layout shift is voordat de foto binnen is. */
.hero-photo{margin:2rem 0 0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--blue-050,#EAF6F8)}
.hero-photo img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;
  object-position:center 42%}  /* bij een smallere uitsnede blijven de gezichten in beeld */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;margin-top:1.7rem;color:var(--muted);font-size:.9rem}
.hero-trust .stars{color:var(--amber);letter-spacing:2px;font-size:1rem}
.hero-trust b{color:var(--ink)}
.hero-trust img{height:38px;width:auto;display:inline-block}
.trust-div{width:1px;height:30px;background:var(--line)}

/* lead-magnet form card in hero */
.lead-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  box-shadow:var(--shadow);position:relative}
.lead-card::before{content:"";position:absolute;top:0;right:0;width:90px;height:90px;
  background:linear-gradient(135deg,transparent 50%,var(--green) 50%);
  border-radius:0 var(--radius-lg) 0 0;opacity:.14}
.lead-card .lc-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-mono);font-weight:600;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);
  background:var(--green-050);border-radius:999px;padding:.35rem .8rem;margin-bottom:.9rem}
.lead-card h3{font-size:1.4rem;margin-bottom:.3rem}
.lead-card .lc-sub{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem}

/* ---- logo / trust strip ---- */
.logostrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 38px}
.logostrip .lg{font-family:var(--ff-head);font-weight:800;letter-spacing:-.02em;color:#95A8AD;font-size:1.18rem;
  filter:grayscale(1);transition:color .2s}
.logostrip .lg:hover{color:var(--ink)}

/* ---- generic grid / cards ---- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  transition:transform .2s,box-shadow .2s,border-color .2s;display:block}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:#D3E0E3}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--blue-050);color:var(--blue);
  display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:.4rem}
.card p{font-size:.97rem;margin-bottom:.7rem}
.card .more{font-family:var(--ff-body);font-weight:700;font-size:.92rem;color:var(--blue);display:inline-flex;align-items:center;gap:.3rem}
a.card:hover .more{gap:.55rem}
.card--feature{position:relative;overflow:hidden;background:var(--ink);color:#C2D6DA;border-color:transparent}
.card--feature::after{content:"";position:absolute;bottom:0;right:0;width:130px;height:130px;
  background:linear-gradient(135deg,transparent 50%,var(--green) 50%);opacity:.85}
.card--feature h3{color:#fff}.card--feature .ic{background:rgba(255,255,255,.08);color:#fff}
.card--feature p{color:#A8C2C8}.card--feature .more{color:#fff}

/* ---- metric / case cards ---- */
.metric{font-family:var(--ff-mono);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);color:var(--ink);
  line-height:1;letter-spacing:-.03em}
.metric .up{color:var(--green);font-size:.6em;vertical-align:.12em;margin-left:.1em}
.metric-label{color:var(--muted);font-size:.9rem;margin-top:8px;line-height:1.4}
.section--ink .metric{color:#fff}.section--ink .metric-label{color:#93B0B7}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff}
.statband .sb{padding:26px 24px;border-right:1px solid var(--line)}
.statband .sb:last-child{border-right:0}
.statband .sb .tick{width:26px;height:3px;background:var(--green);border-radius:3px;margin-bottom:14px}

.case{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.case:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:#D3E0E3}
.case .case-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.case .case-img img{width:100%;height:100%;object-fit:cover}
.case .case-body{padding:24px}
.case .case-tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.case .case-metrics{display:flex;gap:26px;margin:12px 0 6px}
.case .case-metrics .metric{font-size:1.9rem}
.case .more{font-weight:700;color:var(--blue);font-size:.92rem;display:inline-flex;gap:.3rem;align-items:center;margin-top:.5rem}

/* ---- klantbezoek proof gallery ---- */
.visits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.visit{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--bg-2);margin:0}
.visit img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.visit:hover img{transform:scale(1.05)}
.visit figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;color:#fff;font-weight:700;font-size:.92rem;
  background:linear-gradient(transparent,rgba(6,40,47,.82))}

/* ---- steps / framework ---- */
.steps{display:grid;gap:18px}
.steps-carousel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps-dots{display:none}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step .num{font-family:var(--ff-mono);font-weight:700;font-size:.95rem;color:var(--blue);
  background:var(--blue-050);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px}
.step h3{margin-bottom:.3rem;font-size:1.1rem}
.step p{font-size:.95rem;margin:0}

/* ---- USP / checks ---- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:.75rem;align-items:flex-start}
.checks li svg{flex:0 0 auto;margin-top:3px;color:var(--green);width:20px;height:20px}
.checks li b{display:block;color:var(--ink)}
.checks li span{font-size:.95rem}
.section--ink .checks li span{color:#A8C2C8}

/* ---- why split ---- */
.why-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* ---- named contact ---- */
.contact-card{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.contact-card .ava{width:96px;height:96px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--bg-2)}
.contact-card .ava img{width:100%;height:100%;object-fit:cover}
.contact-card .role{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.contact-card h3{margin:.2rem 0 .1rem}
.contact-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}

/* ---- team ---- */
.team-card{text-align:center}
.team-card .avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;overflow:hidden;background:var(--bg-2)}
.team-card .avatar img{width:100%;height:100%;object-fit:cover}
.team-card h3{margin:0 0 .1rem;font-size:1.1rem}
.team-card .role{color:var(--blue);font-family:var(--ff-mono);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}

/* ---- forms ---- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.86rem;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:.82rem .9rem;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--ff-body);font-size:16px;color:var(--ink);background:#fff;transition:.15s}
.field input::placeholder,.field textarea::placeholder{color:#A2B4B9}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,124,138,.16)}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted)}
.form-note a{text-decoration:underline}

/* ---- FAQ ---- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--ff-head);font-weight:700;
  color:var(--ink);font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--blue);font-size:1.6rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{margin:0;padding:16px 22px 20px;color:var(--slate);font-size:.97rem}

/* ---- CTA band ---- */
.cta-band{position:relative;background:var(--blue);border-radius:24px;padding:52px;color:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;box-shadow:var(--shadow-blue)}
.cta-band::after{content:"";position:absolute;bottom:0;right:0;width:200px;height:200px;
  background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.10) 50%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:#CFE6EA;margin:.5rem 0 0;max-width:46ch}

/* ---- page hero (interne pagina's) ---- */
.page-hero{position:relative;background:
  radial-gradient(700px 360px at 12% -10%,var(--blue-050),transparent 60%),var(--bg);
  padding:64px 0 56px;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:20ch}
.page-hero .lead{max-width:60ch}
.crumb{font-family:var(--ff-mono);font-size:.76rem;color:var(--muted);margin-bottom:14px;letter-spacing:.04em}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--blue)}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#93B0B7;padding:66px 0 28px;font-size:.95rem}
.site-footer h4,.site-footer .foot-h{color:#fff;font-family:var(--ff-mono);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:32px}
.site-footer a{color:#93B0B7;display:block;padding:.28rem 0}
.site-footer a:hover{color:#fff}
.footer-brand .brand{color:#fff}
.footer-brand .brand small{color:#7C989F}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#6B8991}

/* ---- floating WhatsApp + mobile CTA ---- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;border-radius:999px;padding:13px 18px 13px 15px;font-weight:700;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55);transition:transform .2s,box-shadow .2s}
.wa-float:hover{color:#fff;transform:translateY(-2px)}
.wa-float span{font-size:.92rem}
@media(max-width:560px){.wa-float span{display:none}.wa-float{padding:15px}}
.mobile-cta{display:none}
@media(max-width:760px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:61;gap:10px;padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);backdrop-filter:saturate(160%) blur(10px);border-top:1px solid var(--line);
    box-shadow:0 -10px 26px -14px rgba(6,40,47,.3);
    transform:translateY(130%);transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
  .mobile-cta.is-visible{transform:none}
  .mobile-cta .btn{flex:1;padding:.92em 1em;font-size:.98rem}
  .mobile-cta .btn--wa{flex:0 0 auto;width:52px;padding:0;background:#25D366;color:#fff;border:0}
  .mobile-cta .btn--wa svg{width:24px;height:24px}
  .wa-float{display:none}
  body{padding-bottom:74px}
}
@media (prefers-reduced-motion:reduce){.mobile-cta{transition:none}}

/* ---- scroll-reveal ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}
.reveal{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}

/* ============ MOTION LAYER — premium micro-interacties ============ */
/* Hero-entree: staggered fade+rise op de eerste render (CSS-only) */
.hero-grid > div > *{opacity:0;transform:translateY(14px);animation:heroRise .7s cubic-bezier(.22,.61,.36,1) forwards}
.hero-grid > div > *:nth-child(1){animation-delay:.05s}
.hero-grid > div > *:nth-child(2){animation-delay:.13s}
.hero-grid > div > *:nth-child(3){animation-delay:.21s}
.hero-grid > div > *:nth-child(4){animation-delay:.29s}
.hero-grid > div > *:nth-child(5){animation-delay:.37s}
.hero-grid > .lead-card{opacity:0;transform:translateY(20px) scale(.99);animation:heroRise .8s cubic-bezier(.22,.61,.36,1) .18s forwards}
@keyframes heroRise{to{opacity:1;transform:none}}

/* Header krijgt diepte zodra je scrollt */
.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.is-scrolled{box-shadow:0 6px 24px -12px rgba(12,21,38,.22);background:rgba(255,255,255,.93)}

/* Hover-lift op de resterende kaart-achtige blokken */
.step,.price-card,.mini-trust,.wc,.offramp{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.step:hover,.price-card:hover,.wc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mini-trust:hover{transform:translateY(-2px)}
.offramp:hover{box-shadow:var(--shadow)}
.area-chip{transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.area-chip:hover{transform:translateY(-3px);background:var(--blue);color:#fff;border-color:var(--blue)}
/* Statband-tick groeit subtiel bij hover over de kolom */
.statband .sb{transition:background .2s ease}
.statband .sb:hover{background:var(--bg-2)}

@media (prefers-reduced-motion:reduce){
  .hero-grid > div > *,.hero-grid > .lead-card{opacity:1!important;transform:none!important;animation:none!important}
  .step,.price-card,.mini-trust,.wc,.offramp,.area-chip,.site-header,.statband .sb{transition:none}
}
.mt-1{margin-top:1rem}.mt-2{margin-top:1.6rem}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .statband{grid-template-columns:repeat(2,1fr)}
  .statband .sb:nth-child(2){border-right:0}
  .statband .sb:nth-child(1),.statband .sb:nth-child(2){border-bottom:1px solid var(--line)}
  .visits{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  /* nav klapt al op tablet in zodat de desktop-nav nooit overloopt (>760 paste niet) */
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:block}
  .nav-mobile-open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:14px 18px;gap:.2rem;box-shadow:var(--shadow)}
  .nav-mobile-open .nav-links a{padding:.7rem .6rem;border-radius:9px}
  .nav-mobile-open .dropdown-menu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:.2rem 0 .2rem 1rem}
  .nav-mobile-open .dropdown.open .dropdown-menu{display:block}
}
@media(max-width:760px){
  .nav-mobile-open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:14px 18px;gap:.2rem;box-shadow:var(--shadow)}
  .nav-mobile-open .nav-links a{padding:.7rem .6rem;border-radius:9px}
  .nav-mobile-open .dropdown-menu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:.2rem 0 .2rem 1rem}
  .nav-mobile-open .dropdown.open .dropdown-menu{display:block}
  .section{padding:54px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .statband{grid-template-columns:1fr 1fr}
  .steps-carousel{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
  .steps-carousel::-webkit-scrollbar{display:none}
  .steps-carousel>.step{flex:0 0 82%;scroll-snap-align:center}
  .steps-dots{display:flex;justify-content:center;gap:9px;margin-top:18px}
  .steps-dots button{width:8px;height:8px;border-radius:50%;background:rgba(6,40,47,.2);border:0;padding:0;cursor:pointer;transition:.25s}
  .steps-dots button.on{background:var(--blue);width:22px;border-radius:5px}
  .cta-band{padding:34px;flex-direction:column;align-items:flex-start}
  .why-split{grid-template-columns:1fr;gap:26px}
  .contact-card{grid-template-columns:1fr;text-align:center}
  .contact-card .ava{margin:0 auto}
  .contact-actions{justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .hero .container{padding-top:46px;padding-bottom:54px}
  .hero-trust{gap:.7rem 1.1rem}.trust-div{display:none}
  .hero-cta .btn{flex:1 1 100%}
  /* Op telefoon staat het formulier onder deze kolom. Een 3:2-foto op volle breedte duwt
     dat een half scherm naar beneden, dus hier korter uitsnijden. De uitsnede schuift
     naar rechts: links op de foto zit diepe schaduw, en klein op een telefoon leest dat
     als een donkere vlek in plaats van als straat. */
  .hero-photo{margin-top:1.6rem}
  .hero-photo img{aspect-ratio:16/9;object-position:62% 45%}
}
@media(max-width:400px){
  /* op zeer smalle telefoons mogen lange CTA-labels netjes afbreken i.p.v. overlopen */
  .btn{white-space:normal}
}
@media(max-width:640px){
  /* 2-koloms check-lijsten (inline gezet op pagina's) altijd stacken op mobiel */
  .checks{grid-template-columns:1fr!important}
}
@media(max-width:380px){
  .statband{grid-template-columns:1fr}
  .statband .sb{border-right:0;border-bottom:1px solid var(--line)}
  .statband .sb:last-child{border-bottom:0}
}

/* ---- AC Installation Lisbon — extra componenten (intrinsiek responsive) ---- */
.mini-trust{padding:2px}
.mini-trust b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:3px}
.mini-trust span{color:var(--muted);font-size:.92rem;line-height:1.5}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 8px;box-shadow:var(--shadow-sm)}
.price-card h3{margin-bottom:12px}
.price-list{list-style:none;margin:0;padding:0}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--line-2)}
.price-list li:first-child{border-top:0}
.price-list li span{color:var(--slate)}
.price-list li em{color:var(--muted);font-style:normal;font-size:.85rem}
.price-list li b{color:var(--blue);white-space:nowrap;font-size:1.05rem}
.whatcost{margin-top:44px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.whatcost>h3{text-align:center}
.wc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 18px 6px}
.wc b{display:block;color:var(--ink);margin-bottom:2px}
.wc p{font-size:.92rem;color:var(--slate)}
.wc-i{display:block;width:26px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:12px}
.arealist{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:760px;margin:0 auto}
.area-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:600;color:var(--ink);font-size:1rem}
a.area-chip{text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s}
a.area-chip:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-sm)}

/* ---- hero photo band + work gallery (installatie-beelden) ---- */
.photoband{position:relative;max-width:var(--container);margin:0 auto;padding:36px 24px 0}
.photoband img,.photoband video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);display:block;background:var(--bg-2)}
.photoband-cap{position:absolute;left:44px;bottom:18px;display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(6,40,47,.82);color:#fff;font-family:var(--ff-mono);font-weight:600;font-size:.78rem;
  letter-spacing:.01em;padding:.5rem .95rem;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  max-width:calc(100% - 68px)}
.pb-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(228,87,46,.25)}
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.workshot{margin:0}
.workshot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);display:block}
.workshot figcaption{margin-top:12px;font-weight:600;color:var(--ink);font-size:.98rem;text-align:center}
.imgband-note{margin-top:22px;color:var(--muted);font-size:.85rem}
@media(max-width:760px){
  .photoband{padding-top:28px}
  .photoband-cap{left:30px;bottom:14px;font-size:.7rem;padding:.42rem .8rem}
  .workgrid{grid-template-columns:1fr;gap:16px;max-width:460px;margin-left:auto;margin-right:auto}
}

.field .opt{font-weight:400;opacity:.6;font-size:.9em}

/* ==========================================================================
   Plumber Lisbon — toevoegingen op de starterkit
   ========================================================================== */

/* ---- minimale hero (besluit Maxim 19-aug-2026) --------------------------
   Kleurvlak + EEN korte H1 + twee CTA's. Bewust geen foto van mensen: dit merk
   is een matching service, er is geen eigen ploeg om te fotograferen. Het vlak
   krijgt een subtiel leidingpatroon in CSS, zodat de hero nooit een leeg gat is
   en er ook nooit een gebroken <img> kan staan. */
.hero--minimal{
  background:linear-gradient(158deg,var(--blue-900) 0%,var(--blue-700) 58%,var(--blue) 100%);
  border-bottom:0;color:#fff}
.hero--minimal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2.4'%3E%3Cpath d='M0 30h30a30 30 0 0 1 30 30v60'/%3E%3Cpath d='M120 30H90a30 30 0 0 0-30 30'/%3E%3Ccircle cx='60' cy='60' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 130px}
.hero--minimal .container{position:relative;z-index:1;max-width:880px;text-align:center;
  padding-top:88px;padding-bottom:92px}
.hero--minimal h1{color:#fff;margin:0 auto;max-width:17ch;text-wrap:balance}
.hero--minimal .hero-cta{justify-content:center;margin-top:2rem}
.hero--minimal .btn--ghost{background:#fff;border-color:#fff;color:var(--blue-900)}
.hero--minimal .btn--ghost:hover{color:var(--blue-700);border-color:#fff}
/* hero-beeld: fullscreen, geregeld door sitekit (D8c) — geen kaart-styling hier */
@media(max-width:760px){
  .hero--minimal .container{padding-top:44px;padding-bottom:52px}
  .hero--minimal h1{max-width:100%}
  .hero--minimal .hero-cta{margin-top:1.5rem}
}
/* het offerteformulier staat als eigen sectie direct onder de hero */
#quote-section .lead-card{margin-top:-64px}
@media(max-width:760px){#quote-section .lead-card{margin-top:-34px;padding:24px}}

/* ---- note-box: prijslabels en eerlijkheidsnoten -------------------------- */
.note-box{background:var(--blue-050);border:1px solid var(--blue-300);border-radius:var(--radius);
  padding:20px 22px;color:var(--slate);font-size:.95rem;line-height:1.6}
.note-box b{color:var(--ink)}
.note-box p:last-child{margin-bottom:0}

/* ---- zichtbare breadcrumb-strook ---------------------------------------- */
.crumbbar{padding:20px 0 0}
.crumbbar .crumb{margin:0}
.crumbbar .crumb a{text-decoration:none}

/* ---- linkkaarten in de related-strook ----------------------------------- */
.linkrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.linkrow a{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-weight:600;color:var(--ink);font-size:.95rem;
  transition:border-color .15s,color .15s,box-shadow .15s}
.linkrow a:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-sm)}
@media(max-width:400px){.linkrow a{font-size:.9rem;padding:8px 14px}}