/* ==========================================================================
   Cleanas — stylesheet
   ========================================================================== */

:root {
  --navy: #142c4e;
  --navy-light: #1f4270;
  --navy-dark: #011a3f; /* matches the navy background in the logo */
  --accent: #0179f6; /* matches the "SERVICES" blue in the logo */
  --accent-dark: #015ebf; /* darker shade of that same blue, for hover/text */
  --bg: #f6f7f9;
  --bg-alt: #eef1f5;
  --white: #ffffff;
  --text: #2a2f38;
  --text-light: #5c6572;
  --border: #dfe3e9;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(20, 44, 78, 0.08);
  --shadow-hover: 0 16px 40px rgba(20, 44, 78, 0.14);
  --max-width: 1140px;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

h1,
h2,
h3,
h4 {
  font-family: "Helvetica", "Helvetica", sans-serif;
  color: var(--navy-dark);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 16px;
  color: var(--text-light);
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

.section {
  padding: 72px 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--navy {
  background: var(--navy-dark);
  color: var(--white);
}

.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section--navy p {
  color: rgba(255, 255, 255, 0.78);
}

/* Cards keep their normal light-background colors even inside a navy section */
.section--navy .card h3 {
  color: var(--navy-dark);
}

.section--navy .card p {
  color: var(--text-light);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head.left {
  margin: 0 0 40px;
  text-align: left;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(61, 122, 181, 0.35);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.section--navy .btn-outline {
  color: var(--white);
}

.section--navy .btn-outline:hover {
  background: var(--white);
  color: var(--navy-dark);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy-dark);
}

/* Logo lockup (mark + "Cleanas Services" wordmark baked into the image) at
   its native ~919:696 aspect ratio. Width+height are both set (rather than
   just height) so the box is reserved up front and nothing shifts while
   the image loads. */
.brand-mark {
  width: 85px;
  height: 64px;
  flex-shrink: 0;
}

.brand small {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--accent-dark);
  border-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-phone {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--text-light);
  text-align: right;
}

.header-phone strong {
  color: var(--navy-dark);
  font-size: 1rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--navy-dark);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* ---------- Language bar (NL / FR, above the header) ---------- */

.lang-bar {
  background: var(--navy-dark);
}

.lang-bar .container {
  display: flex;
  justify-content: flex-end;
}

.lang-links {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lang-links a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s ease;
}

.lang-links a:hover {
  color: var(--white);
}

.lang-links a[aria-current="true"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.lang-links .lang-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--navy-dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.hero-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.hero-copy-col {
  display: flex;
  align-items: center;
  padding: 72px 48px 72px max(24px, calc((100vw - var(--max-width)) / 2));
}

.hero-copy {
  max-width: 560px;
}

.hero h1 {
  color: var(--white);
}

.hero p.lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
}

.hero-slogan {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero-subtitle {
  font-weight: 700;
  /* Scales with the viewport like h1 does, but always smaller than it at
     every width (h1 is clamp(2rem, 4vw, 2.9rem)) — previously this was a
     fixed 2.5rem/40px, which meant that on any screen narrower than
     ~1024px, where h1 shrinks down to its 2rem/32px floor, this subtitle
     rendered LARGER than the title above it. */
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--accent);
  margin-top: 16px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.hero-stats div strong {
  display: block;
  font-family: "Helvetica", sans-serif;
  font-size: 1.7rem;
  color: var(--accent);
}

.hero-stats div span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.hero-art {
  position: relative;
}

/* ---------- Hero checklist ---------- */

.hero-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 4px 0 4px;
  padding: 0;
}

.hero-checklist li {
  list-style: none;
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 0.92rem;
}

.hero-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="%233d7ab5" stroke-width="2"/><path d="M7.5 12.5l3 3 6-6" fill="none" stroke="%233d7ab5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---------- Hero visual: photo + floating cards ---------- */

.hero-photo-col {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy-light);
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.float-card {
  position: absolute;
  top: 32px;
  right: 32px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-hover);
  width: 226px;
  z-index: 2;
}

.float-card ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.float-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-dark);
}

.float-card svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent-dark);
  flex-shrink: 0;
}

.float-result {
  position: absolute;
  bottom: 32px;
  left: 32px;
  max-width: 320px;
  background: var(--navy-dark);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-hover);
  z-index: 2;
}

.before-after {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.ba-item {
  position: relative;
  width: 88px;
  height: 68px;
}

.ba-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-label {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.float-result .txt strong {
  display: block;
  font-size: 0.88rem;
  color: var(--white);
  line-height: 1.25;
}

.float-result .txt span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
}

.hero .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}

.hero .btn-outline:hover {
  background: var(--white);
  color: var(--navy-dark);
  border-color: var(--white);
}

.page-hero {
  background: var(--navy-dark);
  color: var(--white);
  padding: 56px 0;
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: 12px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--accent);
}

.page-hero-subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0;
}

/* ---------- Cards / Grids ---------- */

.grid {
  display: grid;
  gap: 28px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 1px solid var(--border);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.card .icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(61, 122, 181, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.card .icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent-dark);
}

.card h3 {
  margin-bottom: 10px;
}

.card p:last-child {
  margin-bottom: 0;
}

.card a.card-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  font-size: 0.9rem;
}

/* Service page detail blocks */

.service-block {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.service-block:last-child {
  border-bottom: none;
}

.service-block .icon-lg {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-block .icon-lg svg {
  width: 32px;
  height: 32px;
  stroke: var(--navy);
}

.service-block ul.check-list {
  margin-top: 14px;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  color: var(--text-light);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>') center/60% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>') center/60% no-repeat;
}

/* ---------- Steps (werkwijze) ---------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  position: relative;
  padding-bottom: 44px;
}

.step:last-child {
  padding-bottom: 0;
}

.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: -20px;
  width: 2px;
  background: var(--border);
  z-index: 1;
}

.step-content h3 {
  margin-bottom: 8px;
}

/* ---------- Testimonials ---------- */

.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.testimonial .stars {
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.testimonial p {
  font-style: italic;
  color: var(--text);
}

.testimonial .author {
  font-style: normal;
  font-weight: 700;
  color: var(--navy-dark);
  margin-top: 14px;
  display: block;
  font-size: 0.9rem;
}

/* ---------- CTA banner ---------- */

.cta-banner {
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: 6px;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.cta-banner .btn-primary {
  background: var(--navy-dark);
}

.cta-banner .btn-primary:hover {
  background: var(--navy);
}

/* ---------- Values / About ---------- */

.value-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.value-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.value-row .icon-sm {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(61, 122, 181, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.value-row .icon-sm svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-dark);
}

.value-row h3 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.value-row p {
  margin-bottom: 0;
}

.about-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 340px;
  position: relative;
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.lead-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-dark);
  margin-bottom: 18px;
}

.story-text p {
  margin-bottom: 16px;
}

.story-text p:last-child {
  margin-bottom: 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--navy-dark);
}

input,
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 122, 181, 0.15);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 10px;
}

.tip-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(61, 122, 181, 0.08);
  border: 1px solid rgba(61, 122, 181, 0.3);
  border-radius: 10px;
  padding: 16px 18px;
}

.tip-box svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-box p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.tip-box strong {
  color: var(--navy-dark);
}

.tip-whatsapp-link {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(1, 121, 246, 0.35);
  text-underline-offset: 2px;
}

.tip-whatsapp-link:hover {
  text-decoration-color: currentColor;
}

.tip-whatsapp-link strong {
  color: inherit;
}

.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #e8f6ec;
  color: #1f7a3d;
  font-weight: 600;
  font-size: 0.9rem;
}

.form-status.visible {
  display: block;
}

.field-error {
  border-color: #c0392b;
}

.field-error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* ---------- Success popup ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 28, 51, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.visible {
  display: flex;
  opacity: 1;
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(12, 28, 51, 0.35);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.modal-overlay.visible .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.modal-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--white);
}

.modal-box h3 {
  margin-bottom: 10px;
}

.modal-box p {
  margin-bottom: 26px;
}

.modal-box .btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Contact info cards ---------- */

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}

.contact-info-card .icon {
  margin: 0 auto 14px;
}

.map-placeholder {
  background: var(--bg-alt);
  border: none;
  border-radius: var(--radius);
  min-height: 320px;
  overflow: hidden;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 0 24px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  max-width: 300px;
}

.footer-brand .brand {
  color: var(--white);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 14px;
  max-width: 280px;
}

.footer-links {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col h4 {
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Badges strip ---------- */

.badge-strip {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.badge-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--navy-dark);
  font-size: 0.9rem;
}

.badge-strip svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-flex {
    grid-template-columns: 1fr;
  }
  .hero-copy-col {
    padding: 48px 24px 32px;
  }
  .hero-photo-col {
    order: -1;
    min-height: 0;
  }
  /* The photo used to be an absolutely-positioned layer filling the whole
     column while the checklist/result cards below it switched to normal
     (static) flow. Absolutely-positioned content always paints above
     static content, so on phones and tablets the photo silently covered
     the checklist card and part of the result card. Giving the photo a
     normal, fixed-height box here makes it stack cleanly above the cards
     instead of behind/over them. */
  .hero-photo-bg {
    position: relative;
    inset: auto;
    height: 280px;
  }
  .float-card {
    position: static;
    width: auto;
    margin: 16px 20px 0;
  }
  .float-result {
    position: static;
    left: auto;
    right: auto;
    max-width: none;
    margin: 16px 20px 24px;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 0.5fr);
  }
  /* A single-track grid sized with a plain "fr" value only fills 100% of
     the row when the coefficient is 1 — "0.5fr" here (a pre-existing bug)
     gave the column roughly half the available width instead of the full
     width, so text wrapped into a needlessly narrow, cramped column with
     empty space beside it. "1fr" is what "one full-width column" means. */
  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-links {
    gap: 32px;
  }
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  /* Purely decorative graphics (e.g. the abstract illustration next to the
     werkwijze steps) that add nothing but scroll length on a phone/tablet. */
  .hide-on-mobile {
    display: none;
  }

  /* ---- Header / navigation ----
     The full desktop header (logo + 5 nav links + phone number + button)
     needs roughly 800px of width. It used to switch to the mobile menu
     only below 720px, which left a broken zone from 721–900px (common
     tablet and small-laptop widths, e.g. iPad portrait) where the nav
     wrapped, overlapped and the "Gratis offerte" button got clipped.
     Switching to the mobile menu at the same 900px breakpoint as the
     rest of the layout closes that gap. */
  .site-header .container {
    height: auto;
    min-height: 80px;
    flex-wrap: nowrap;
    padding: 10px 16px;
  }
  .brand {
    font-size: 1.05rem;
    gap: 8px;
    flex-shrink: 0;
  }
  .brand-mark {
    width: 69px;
    height: 52px;
  }
  .brand small {
    display: none;
  }
  .brand-suffix {
    display: none;
  }
  .header-actions {
    gap: 10px;
  }
  .header-actions .btn-primary {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    transform: translateY(-12px);
    opacity: 0;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
    pointer-events: none;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    gap: 0;
  }
  .main-nav li {
    border-bottom: 1px solid var(--border);
  }
  .main-nav li:last-child {
    border-bottom: none;
  }
  .main-nav a {
    display: block;
    padding: 16px 24px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    border-bottom: none;
  }
  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    background: rgba(61, 122, 181, 0.1);
    color: var(--accent-dark);
    border-color: transparent;
  }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1;
  }
  .nav-toggle span:nth-child(1) {
    transform-origin: center;
  }
  .nav-toggle span:nth-child(3) {
    transform-origin: center;
  }
  .main-nav.open ~ .header-actions .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .main-nav.open ~ .header-actions .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .main-nav.open ~ .header-actions .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  body:has(.main-nav.open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(12, 28, 51, 0.35);
    z-index: 90;
  }
  .header-phone {
    display: none;
  }
}

@media (max-width: 720px) {
  .grid-3,
  .grid-4,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  /* Icon-beside-text (90px icon column + text column) left the text column
     only about 60% of the screen width, with a 56–90px empty gutter to its
     left — cramped and off-balance on a phone. Stacking the icon above the
     heading/text instead lets the text use the full width. */
  .service-block {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-block .icon-lg {
    width: 56px;
    height: 56px;
  }
  .service-block .icon-lg svg {
    width: 26px;
    height: 26px;
  }
  .cta-banner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
  .section {
    padding: 52px 0;
  }
  .footer-grid {
    flex-direction: column;
    gap: 32px;
  }
  .footer-links {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .cta-banner {
    padding: 32px 24px;
  }
  .card {
    padding: 26px 22px;
  }
  .modal-box {
    padding: 32px 24px;
  }
  .contact-info-card {
    padding: 22px 18px;
  }
}

/* ---------- Before / after showcase (diensten) ---------- */

.ba-showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}

.ba-showcase-item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ba-showcase-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.ba-showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-showcase-label {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
}

.ba-showcase-label--before {
  background: rgba(12, 28, 51, 0.75);
}

.ba-showcase-label--after {
  background: var(--accent);
}

.ba-showcase-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.ba-showcase-arrow svg {
  width: 22px;
  height: 22px;
  stroke: var(--white);
}

.ba-showcase-caption {
  text-align: center;
  max-width: 980px;
  margin: 24px auto 0;
  color: var(--text-light);
  font-size: 0.92rem;
}

/* ---------- Before / after project slider ---------- */

.ba-slider {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.ba-slider-viewport {
  overflow: hidden;
  border-radius: var(--radius);
}

.ba-slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.ba-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.ba-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.ba-slider-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.ba-slider-arrow:hover svg {
  stroke: var(--white);
}

.ba-slider-arrow svg {
  width: 20px;
  height: 20px;
  stroke: var(--navy-dark);
  transition: stroke 0.15s ease;
}

.ba-slider-arrow--prev {
  left: -22px;
}

.ba-slider-arrow--next {
  right: -22px;
}

.ba-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.ba-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ba-slider-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

@media (max-width: 640px) {
  .ba-slider-arrow--prev {
    left: 6px;
  }
  .ba-slider-arrow--next {
    right: 6px;
  }
}

@media (max-width: 720px) {
  .ba-showcase {
    grid-template-columns: 1fr;
  }
  .ba-showcase-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
}

/* ---------- Image lightbox (click a voor/na foto to enlarge) ---------- */

.ba-showcase-item {
  cursor: zoom-in;
}

.ba-showcase-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.ba-showcase-item::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(12, 28, 51, 0.55);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/><path d="M11 8v6M8 11h6"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  pointer-events: none;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.ba-showcase-item:hover::after {
  background-color: var(--accent);
  transform: scale(1.08);
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 28, 51, 0.92);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox-overlay.visible {
  display: flex;
  opacity: 1;
}

.lightbox-img {
  display: block;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.2s ease;
}

.lightbox-overlay.visible .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-close svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

@media (max-width: 480px) {
  .lightbox-close {
    top: 12px;
    right: 12px;
  }
}