/* ==========================================================================
   MOVERS LISBON — starterkit-CSS (hertokeniseerd uit de gedeelde starterkit)
   Merk: diep bosgroen (#2E7D5B) + framboos-CTA (#D6336C) op een groen-ink basis.
   Gegenereerd door scripts/make_style.py — pas dat script aan, niet dit bestand.
   ========================================================================== */
/* ==========================================================================
   MOVERS 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:#2E7D5B;          /* merk / primair blauw — koel, betrouwbaar */
  --blue-700:#1C5A40;
  --blue-800:#164A34;
  --blue-900:#10261D;      /* diep navy — dark secties/footer */
  --blue-300:#A8D8BF;
  --blue-050:#EAF7F0;      /* zachte tint */
  --ink:#12241C;           /* near-black navy-ink: koppen, dark secties */
  --ink-2:#182E24;
  --slate:#4A5F55;         /* bodytekst */
  --muted:#7E9188;
  --line:#E4EBE7;          /* koele hairline */
  --line-2:#EFF4F1;
  --bg:#FFFFFF;
  --bg-2:#F5FAF7;          /* alt sectie */
  --white:#FFFFFF;
  --green:#16A75A;         /* proof / trust — spaarzaam */
  --green-700:#128A4A;
  --green-050:#E6F7EE;
  --amber:#D6336C;         /* WARM accent — CTA-pop + highlight (koelt én verwarmt) */
  --amber-700:#B32456;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px -3px rgba(16,38,29,.10);
  --shadow:0 18px 44px -22px rgba(16,38,29,.26);
  --shadow-blue:0 22px 50px -24px rgba(46,125,91,.45);
  --shadow-amber:0 18px 40px -20px rgba(214,51,108,.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;scroll-padding-top:92px}  /* ankers (#quote) niet onder de balk */
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:#C2D6C9}
.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:#A8C2B3}
.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(22,167,90,.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(22,167,90,.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}
/* ---- video-hero: de installatievideo IS de hero, tekst en formulier liggen erop ----
   Expliciete z-index-lagen (0 video / 1 scrim / 2 inhoud) in plaats van negatieve
   waarden: .hero heeft isolation:isolate, en dan is een negatieve z-index net te
   subtiel om op te vertrouwen. */
.hero--video{background:var(--ink);border-bottom:0;display:flex;align-items:center;
  /* Het HELE eerste scherm, header incluis: die ligt als transparante overlay op de
     video (body.hdr-overlay hieronder), dus er wordt niets meer afgetrokken.
     svh en niet vh: met vh springt de hoogte op mobiel zodra de browserbalk in- of
     uitschuift. De vh-regel blijft als terugval voor browsers zonder svh. */
  min-height:100vh;
  min-height:100svh}
.hero--video .hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.94)}
.hero--video .hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(12,21,38,.90) 0%,rgba(12,21,38,.74) 40%,
  rgba(12,21,38,.34) 72%,rgba(12,21,38,.22) 100%)}
.hero--video .container{position:relative;z-index:2;width:100%;padding-top:132px;padding-bottom:80px}
.hero--video h1{color:#fff}
.hero--video .eyebrow{color:var(--blue-300)}
.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:#95AD9F;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:#D3E0D7}
.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:#C2D6C9;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:#A8C2B3}.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:#93B0A0}
.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:#D3E0D7}
.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(16,38,29,.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:#A8C2B3}

/* ---- 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:#A2B9AA}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,125,91,.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:#CFE5D8;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:#93B0A0;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:#93B0A0;display:block;padding:.28rem 0}
.site-footer a:hover{color:#fff}
.footer-brand .brand{color:#fff}
.footer-brand .brand small{color:#7C9887}
.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:#6B8977}

/* ---- 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(16,38,29,.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)}

/* ---- overlay-header: bij een videohero loopt het beeld door tot achter de balk ----
   body.hdr-overlay wordt door main.js gezet zodra er een .hero--video op de pagina staat.
   De balk wordt dan transparant en zweeft (fixed) over de video; een verloop van boven
   houdt logo en menu leesbaar zonder een witte streep over het beeld te leggen.
   Zodra je de hero uit scrollt komt de gewone witte balk terug (body.hdr-solid). */
body.hdr-overlay .site-header{position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;box-shadow:none}
body.hdr-overlay .site-header::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,21,38,.70) 0%,rgba(12,21,38,.34) 55%,rgba(12,21,38,0) 100%);
  transition:opacity .25s ease}
body.hdr-overlay .site-header .container{position:relative;z-index:1}
body.hdr-overlay .brand{color:#fff}
body.hdr-overlay .brand small{color:rgba(255,255,255,.74)}
body.hdr-overlay .nav-links a{color:#fff}
body.hdr-overlay .nav-links a:hover{background:rgba(255,255,255,.15);color:#fff}
body.hdr-overlay .nav-links a.active{color:#fff;background:rgba(255,255,255,.15)}
body.hdr-overlay .hamburger span{background:#fff}
/* uitklapmenu's blijven witte panelen, dus daar moet de tekst donker blijven */
body.hdr-overlay .nav-links .dropdown-menu a{color:var(--ink);background:transparent}
body.hdr-overlay .nav-links .dropdown-menu a:hover{background:var(--bg-2)}

body.hdr-overlay.hdr-solid .site-header{background:rgba(255,255,255,.93);
  border-bottom-color:var(--line);backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 6px 24px -12px rgba(12,21,38,.22)}
body.hdr-overlay.hdr-solid .site-header::before{opacity:0}
body.hdr-overlay.hdr-solid .brand{color:var(--ink)}
body.hdr-overlay.hdr-solid .brand small{color:var(--muted)}
body.hdr-overlay.hdr-solid .nav-links a{color:var(--ink)}
body.hdr-overlay.hdr-solid .nav-links a:hover{background:var(--bg-2);color:var(--blue)}
body.hdr-overlay.hdr-solid .nav-links a.active{color:var(--blue);background:transparent}
body.hdr-overlay.hdr-solid .hamburger span{background:var(--ink)}
body.hdr-overlay .brand,body.hdr-overlay .nav-links a,body.hdr-overlay .hamburger span{
  transition:color .25s ease,background .25s ease}

/* 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}
  body.hdr-overlay .nav-mobile-open .nav-links a{color:var(--ink);background:transparent}
  body.hdr-overlay .nav-mobile-open .nav-links a.active{color:var(--blue)}
  .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}
  body.hdr-overlay .nav-mobile-open .nav-links a{color:var(--ink);background:transparent}
  body.hdr-overlay .nav-mobile-open .nav-links a.active{color:var(--blue)}
  .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(16,38,29,.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 stapelt de hero: tekst boven het formulier, allebei op de video. De
     diagonale scrim werkt dan niet meer (die is voor de tekst-links/beeld-rechts-indeling),
     dus hier van boven naar beneden en over de hele breedte donkerder. */
  .hero--video{min-height:100vh;min-height:100svh}
  .hero--video .hero-scrim{background:
    linear-gradient(180deg,rgba(12,21,38,.82) 0%,rgba(12,21,38,.64) 42%,rgba(12,21,38,.88) 100%)}
  .hero--video .container{padding-top:112px;padding-bottom:52px}
}
@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(16,38,29,.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(214,51,108,.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}

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

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

/* ---- voldoc: tweekoloms feiten-/documentenstrook ------------------------
   Voor "wat een verhuizer je moet kunnen laten zien" en de m3-tabellen: een
   definitielijst die op mobiel netjes onder elkaar valt in plaats van te knijpen. */
.voldoc{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.voldoc .vd{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:0;
  border-top:1px solid var(--line-2)}
.voldoc .vd:first-child{border-top:0}
.voldoc .vd dt{background:var(--blue-050);color:var(--ink);font-weight:700;font-size:.95rem;
  padding:14px 18px;margin:0}
.voldoc .vd dd{margin:0;padding:14px 18px;color:var(--slate);font-size:.97rem;line-height:1.6}
.voldoc .vd dd b{color:var(--ink)}
@media(max-width:620px){
  .voldoc .vd{grid-template-columns:1fr}
  .voldoc .vd dt{padding-bottom:6px}
  .voldoc .vd dd{padding-top:6px}
}