/* BNTG responsive production overrides
   Keeps the desktop art direction intact while improving phone and tablet layouts. */

html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Tablet / iPad tuning */
@media (min-width: 768px) and (max-width: 1199px) {
  .md\:text-\[7rem\] { font-size: 5.75rem !important; }
  .md\:text-\[6rem\] { font-size: 5rem !important; }
  .md\:text-\[5\.5rem\] { font-size: 4.75rem !important; }
  .md\:text-\[5rem\] { font-size: 4.4rem !important; }
  .md\:text-\[4\.5rem\] { font-size: 4rem !important; }
  .md\:text-\[3\.5rem\] { font-size: 3.2rem !important; }

  /* Tailwind's lg breakpoint starts at 1024px; keep iPad landscape from jumping to desktop-scale type. */
  .lg\:text-\[10rem\] { font-size: 6.75rem !important; }
  .lg\:text-\[8rem\] { font-size: 6rem !important; }
  .lg\:text-\[7rem\] { font-size: 5.5rem !important; }
  .lg\:text-\[6rem\] { font-size: 4.75rem !important; }

  .py-32 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
  .gap-16 { gap: 2.75rem !important; }
  .gap-12 { gap: 2.5rem !important; }
  .p-12 { padding: 2.25rem !important; }
  .p-10 { padding: 2rem !important; }
  .p-8 { padding: 1.75rem !important; }

  /* Top navigation remains usable on narrower iPads. */
  header .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.25rem !important; }
  header nav button { font-size: .875rem; }
  header nav button:last-child { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
}

/* Phones */
@media (max-width: 767px) {
  html { font-size: 16px; }

  header > div { padding-left: 1rem !important; padding-right: 1rem !important; }
  header .h-20 { height: 4.5rem !important; }

  section { scroll-margin-top: 4.5rem; }
  .pt-20 { padding-top: 4.5rem !important; }
  .py-32 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  .py-20 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-16 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .px-6 { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  .px-8, .px-10, .px-12 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Hero and section display type */
  .text-\[4\.5rem\] { font-size: clamp(3.25rem, 15vw, 4rem) !important; }
  .text-\[4rem\] { font-size: clamp(2.8rem, 13vw, 3.5rem) !important; }
  .text-\[3\.5rem\] { font-size: clamp(2.65rem, 12vw, 3.15rem) !important; }
  .text-\[3rem\] { font-size: clamp(2.35rem, 11vw, 2.9rem) !important; }
  .text-\[2rem\] { font-size: clamp(1.85rem, 8vw, 2.25rem) !important; }
  .text-\[12rem\] { font-size: 7rem !important; }

  h1, h2, h3 { overflow-wrap: normal; word-break: normal; }
  h1, h2 { hyphens: none; }

  .text-xl { font-size: 1.05rem !important; line-height: 1.65rem !important; }
  .text-lg { font-size: 1rem !important; line-height: 1.55rem !important; }
  .text-3xl { font-size: 1.65rem !important; line-height: 2rem !important; }
  .text-4xl { font-size: 2rem !important; line-height: 2.25rem !important; }

  .mb-20 { margin-bottom: 3.5rem !important; }
  .mb-12 { margin-bottom: 2.25rem !important; }
  .mb-8 { margin-bottom: 1.75rem !important; }
  .gap-16 { gap: 2.25rem !important; }
  .gap-12 { gap: 2rem !important; }
  .gap-8 { gap: 1.5rem !important; }
  .gap-6 { gap: 1.1rem !important; }

  .p-12 { padding: 1.6rem !important; }
  .p-10 { padding: 1.5rem !important; }
  .p-8 { padding: 1.35rem !important; }
  .pl-8 { padding-left: 1.25rem !important; }
  .pl-6 { padding-left: 1.15rem !important; }

  /* Full-width CTAs are easier to use on touch screens. */
  .flex.flex-col.sm\:flex-row.gap-4 > button,
  .flex.flex-col.sm\:flex-row.gap-4 > a { width: 100%; min-height: 3.25rem; }
  button { min-height: 44px; }

  /* Keep technical labels readable without forcing horizontal scroll. */
  .tracking-\[0\.3em\] { letter-spacing: .18em !important; }
  .tracking-\[0\.2em\] { letter-spacing: .14em !important; }
  .font-mono.text-sm { font-size: .78rem !important; }
  .font-mono.text-xs { font-size: .68rem !important; }

  /* Decorative HUD corners/numbers should never dominate the content on phones. */
  .absolute.top-8.left-8,
  .absolute.top-8.right-8,
  .absolute.bottom-8.left-8,
  .absolute.bottom-8.right-8 { transform: scale(.7); transform-origin: center; }
  .absolute.top-12.left-6 { opacity: .35; }

  /* Avoid the scroll marker colliding with hero CTAs on short phones. */
  section.min-h-screen > .absolute.bottom-12 { bottom: 1.25rem !important; }
  section.min-h-screen > .absolute.bottom-12 .h-16 { height: 2.5rem !important; }
}

/* Small phones */
@media (max-width: 390px) {
  .text-\[4\.5rem\] { font-size: 3rem !important; }
  .text-\[4rem\] { font-size: 2.65rem !important; }
  .text-\[3\.5rem\] { font-size: 2.45rem !important; }
  .text-\[3rem\] { font-size: 2.2rem !important; }
  .text-\[12rem\] { font-size: 5.75rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Respect accessibility preferences and reduce motion on mobile devices that request it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Scroll-driven interaction states -------------------------------------------------
   Replaces hover-only visual feedback with states that also activate as an element
   enters the viewport. Hover remains available on desktop as an extra enhancement. */

/* group-hover equivalents */
.scroll-active.group .group-hover\:h-32 { height: 8rem; }
.scroll-active.group .group-hover\:w-3 { width: .75rem; }
.scroll-active.group .group-hover\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scroll-active.group .group-hover\:border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(0 212 255 / var(--tw-border-opacity,1));
}
.scroll-active.group .group-hover\:border-accent\/50 { border-color: rgb(0 212 255 / .5); }
.scroll-active.group .group-hover\:bg-accent\/10 { background-color: rgb(0 212 255 / .1); }
.scroll-active.group .group-hover\:text-accent {
  --tw-text-opacity: 1;
  color: rgb(0 212 255 / var(--tw-text-opacity,1));
}
.scroll-active.group .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity,1));
}

/* ordinary hover utility equivalents for scroll-selected content */
.scroll-active.hover\:border-accent\/50 { border-color: rgb(0 212 255 / .5); }
.scroll-active.hover\:bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(0 212 255 / var(--tw-bg-opacity,1));
}
.scroll-active.hover\:bg-accent-light {
  --tw-bg-opacity: 1;
  background-color: rgb(51 221 255 / var(--tw-bg-opacity,1));
}
.scroll-active.hover\:bg-gray-800\/20 { background-color: rgb(26 26 26 / .2); }
.scroll-active.hover\:bg-gray-800\/30 { background-color: rgb(26 26 26 / .3); }
.scroll-active.hover\:text-accent {
  --tw-text-opacity: 1;
  color: rgb(0 212 255 / var(--tw-text-opacity,1));
}
.scroll-active.hover\:text-accent-light {
  --tw-text-opacity: 1;
  color: rgb(51 221 255 / var(--tw-text-opacity,1));
}
.scroll-active.hover\:text-background {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity,1));
}

/* Make scroll state feel intentional on touch devices. */
@media (hover: none), (pointer: coarse) {
  .group,
  [class*="hover:"] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .scroll-active,
  .scroll-active * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* BNTG V4 — hero typography fit */
@media (max-width: 767px) {
  h1 {
    font-size: clamp(3rem, 15vw, 4.5rem) !important;
    line-height: .88 !important;
    letter-spacing: -0.055em !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  h1 {
    font-size: clamp(5rem, 10.5vw, 7rem) !important;
    line-height: .88 !important;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: clamp(7rem, 9vw, 9rem) !important;
    line-height: .86 !important;
  }
}

/* BNTG V6 — Werkwijze alignment */
#process .grid > div,
section#process .grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#process .grid > div h3,
section#process .grid > div h3 {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#process .grid > div p,
section#process .grid > div p {
  width: 100%;
  max-width: 34rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

@media (min-width: 1024px) {
  #process .grid,
  section#process .grid {
    align-items: start;
  }
  #process .grid > div,
  section#process .grid > div {
    height: 100%;
  }
}

@media (max-width: 767px) {
  #process .grid > div p,
  section#process .grid > div p {
    max-width: none;
  }
}


/* BNTG V7 — precise Werkwijze alignment */
@media (min-width: 1024px) {
  #werkwijze .space-y-0 > .group > .flex,
  #werkwijze .space-y-0 > .group > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    align-items: start !important;
    column-gap: 4rem !important;
  }

  #werkwijze .space-y-0 > .group > .flex > div:first-child,
  #werkwijze .space-y-0 > .group > .grid > div:first-child {
    width: auto !important;
    min-width: 0 !important;
  }

  #werkwijze .space-y-0 > .group > .flex > div:last-child,
  #werkwijze .space-y-0 > .group > .grid > div:last-child {
    width: auto !important;
    min-width: 0 !important;
    padding-top: 3.1rem !important;
  }

  #werkwijze .space-y-0 h3 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  #werkwijze .space-y-0 p {
    margin: 0 !important;
    max-width: 38rem;
    text-align: left !important;
  }
}

/* At widths similar to the screenshot, slightly reduce only the process headings
   so long words like INVENTARISATIE never collide with the description column. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #werkwijze .space-y-0 h3 {
    font-size: 3rem !important;
    line-height: .92 !important;
  }
}

@media (max-width: 1023px) {
  #werkwijze .space-y-0 > .group > div:last-child {
    padding-top: 0 !important;
  }
}

/* BNTG V8 — Mobile + iPad polish after copy changes */

/* Universal safeguards */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  min-width: 0;
}
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* PHONE */
@media (max-width: 767px) {
  /* Header */
  header, nav {
    max-width: 100%;
  }

  /* Hero */
  h1 {
    font-size: clamp(2.7rem, 13vw, 4.25rem) !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  h1 + * {
    max-width: 100% !important;
  }

  /* General section typography */
  section h2 {
    font-size: clamp(2.35rem, 10vw, 3.75rem) !important;
    line-height: .95 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: break-word !important;
  }

  section h3 {
    font-size: clamp(1.8rem, 8vw, 2.75rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.03em !important;
    overflow-wrap: break-word !important;
  }

  section p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Reduce horizontal padding so longer new copy fits comfortably */
  section > div,
  main > div {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  /* Werkwijze */
  #werkwijze .space-y-0 > .group > .flex,
  #werkwijze .space-y-0 > .group > .grid {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #werkwijze .space-y-0 > .group > .flex > div,
  #werkwijze .space-y-0 > .group > .grid > div {
    width: 100% !important;
    padding-top: 0 !important;
  }

  #werkwijze .space-y-0 h3 {
    font-size: clamp(2.15rem, 11vw, 3.2rem) !important;
    line-height: .9 !important;
    margin-bottom: 1.1rem !important;
    max-width: 100% !important;
  }

  #werkwijze .space-y-0 p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
  }

  #werkwijze .space-y-0 > .group {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Expertise / cards / cases: force single column where needed */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .md\:grid-cols-2,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Buttons */
  a, button {
    max-width: 100%;
  }

  /* Footer / bottom labels */
  footer * {
    overflow-wrap: anywhere;
  }
}

/* IPAD PORTRAIT + SMALL TABLETS */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: clamp(4.8rem, 10vw, 6.6rem) !important;
    line-height: .88 !important;
    letter-spacing: -0.05em !important;
  }

  section h2 {
    font-size: clamp(3.5rem, 7vw, 5.2rem) !important;
    line-height: .93 !important;
  }

  section h3 {
    font-size: clamp(2.4rem, 5.2vw, 3.7rem) !important;
    line-height: .95 !important;
  }

  section p {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }

  section > div,
  main > div {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Werkwijze becomes stacked on portrait iPad so copy never collides */
  #werkwijze .space-y-0 > .group > .flex,
  #werkwijze .space-y-0 > .group > .grid {
    display: block !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  #werkwijze .space-y-0 > .group > .flex > div,
  #werkwijze .space-y-0 > .group > .grid > div {
    width: 100% !important;
    padding-top: 0 !important;
  }

  #werkwijze .space-y-0 h3 {
    margin-bottom: 1.25rem !important;
  }

  #werkwijze .space-y-0 p {
    max-width: 42rem !important;
    margin: 0 !important;
  }

  #werkwijze .space-y-0 > .group {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Two-column content is still okay on iPad, but give it more breathing room */
  .grid {
    column-gap: 2rem;
    row-gap: 2rem;
  }
}

/* IPAD LANDSCAPE / SMALL LAPTOP */
@media (min-width: 1024px) and (max-width: 1199px) {
  h1 {
    font-size: clamp(5.5rem, 8vw, 7.2rem) !important;
    line-height: .87 !important;
  }

  #werkwijze .space-y-0 > .group > .flex,
  #werkwijze .space-y-0 > .group > .grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    column-gap: 3rem !important;
  }

  #werkwijze .space-y-0 h3 {
    font-size: clamp(2.65rem, 4.4vw, 3.5rem) !important;
  }

  #werkwijze .space-y-0 p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }
}

/* BNTG V9 — Expertise exact alignment */

/* Desktop: every expertise row uses the exact same 40/60 grid.
   The right-hand text starts level with the large heading, not the phase number. */
@media (min-width: 1024px) {
  #expertise .space-y-0 > .group > .flex {
    display: grid !important;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    align-items: start !important;
    gap: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:first-child {
    width: auto !important;
    min-width: 0 !important;
    padding-right: 3.25rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-top: 3.15rem !important;
  }

  #expertise .space-y-0 h3 {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child > p {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    max-width: 44rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child .grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 2.5rem !important;
    row-gap: .75rem !important;
    margin-bottom: 2rem !important;
  }

  #expertise .space-y-0 > .group {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child > .flex {
    align-items: center !important;
  }
}

/* Laptop / iPad landscape: preserve grid but slightly tighten type and gap. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #expertise .space-y-0 > .group > .flex {
    grid-template-columns: minmax(0, 41%) minmax(0, 59%) !important;
  }

  #expertise .space-y-0 > .group > .flex > div:first-child {
    padding-right: 2rem !important;
  }

  #expertise .space-y-0 h3 {
    font-size: clamp(2.6rem, 4.3vw, 3.5rem) !important;
    line-height: .92 !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child {
    padding-top: 3rem !important;
  }
}

/* iPad portrait: stack cleanly. Keep all descriptions, lists and tags on one common left edge. */
@media (min-width: 768px) and (max-width: 1023px) {
  #expertise .space-y-0 > .group > .flex {
    display: block !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:first-child,
  #expertise .space-y-0 > .group > .flex > div:last-child {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child {
    margin-top: 2rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child .grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap: 2rem !important;
  }
}

/* Phone: one clean vertical rhythm, no squeezed two-column lists. */
@media (max-width: 767px) {
  #expertise .space-y-0 > .group > .flex {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:first-child,
  #expertise .space-y-0 > .group > .flex > div:last-child {
    width: 100% !important;
    padding: 0 !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child {
    margin-top: 1.5rem !important;
  }

  #expertise .space-y-0 h3 {
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
    line-height: .92 !important;
    margin-bottom: 1rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child .grid {
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
    margin-bottom: 1.5rem !important;
  }

  #expertise .space-y-0 > .group {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  #expertise .space-y-0 > .group > .flex > div:last-child > .flex {
    gap: .5rem !important;
  }
}

/* BNTG V10 — definitive Expertise alignment */

/* Desktop / laptop */
@media (min-width: 1024px) {
  #expertise .space-y-0 > .group > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 36%) minmax(0, 64%) !important;
    align-items: start !important;
    gap: 3rem !important;
  }

  #expertise .space-y-0 > .group > .grid > div:first-child {
    width: auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child {
    width: auto !important;
    min-width: 0 !important;
    padding-top: 3.15rem !important;
    padding-left: 0 !important;
  }

  #expertise .space-y-0 h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 3.2rem !important;
    line-height: .90 !important;
    letter-spacing: -0.04em !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Keep the long consultancy title safely inside the left column */
  #expertise .space-y-0 > .group:nth-child(3) h3,
  #expertise .space-y-0 > .group:nth-child(4) h3 {
    font-size: 3rem !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child > p {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    max-width: 100% !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    column-gap: 2.75rem !important;
    row-gap: .75rem !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child > .flex {
    width: 100% !important;
    align-items: center !important;
  }
}

/* Large desktop can use the original stronger scale again */
@media (min-width: 1280px) {
  #expertise .space-y-0 h3 {
    font-size: 3.75rem !important;
  }
  #expertise .space-y-0 > .group:nth-child(3) h3,
  #expertise .space-y-0 > .group:nth-child(4) h3 {
    font-size: 3.55rem !important;
  }
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  #expertise .space-y-0 > .group > .grid {
    display: block !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child {
    padding-top: 0 !important;
    margin-top: 2rem !important;
  }

  #expertise .space-y-0 h3 {
    max-width: 100% !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child > .grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #expertise .space-y-0 > .group > .grid {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child {
    padding-top: 0 !important;
    margin-top: 1.5rem !important;
  }

  #expertise .space-y-0 h3 {
    font-size: clamp(2.25rem, 11vw, 3.15rem) !important;
    line-height: .92 !important;
    max-width: 100% !important;
  }

  #expertise .space-y-0 > .group > .grid > div:last-child > .grid {
    grid-template-columns: 1fr !important;
  }
}

/* BNTG V11 — Personal approach polish */
#persoonlijke-aanpak > .max-w-\[1400px\] {
  max-width: 1320px !important;
}

#persoonlijke-aanpak .mb-20 {
  margin-bottom: 4rem !important;
}

#persoonlijke-aanpak h2 {
  max-width: 1080px;
  font-size: clamp(4.75rem, 8.6vw, 7.4rem) !important;
  line-height: .84 !important;
  letter-spacing: -0.055em !important;
}

#persoonlijke-aanpak .grid.md\:grid-cols-3 {
  align-items: stretch !important;
}

#persoonlijke-aanpak .grid.md\:grid-cols-3 > .group {
  height: 100% !important;
}

#persoonlijke-aanpak .grid.md\:grid-cols-3 > .group > .border {
  height: 100% !important;
  min-height: 305px;
  display: flex !important;
  flex-direction: column !important;
}

#persoonlijke-aanpak .grid.md\:grid-cols-3 h3 {
  min-height: 4.6rem;
  display: flex;
  align-items: flex-end;
  margin-bottom: 1.25rem !important;
}

#persoonlijke-aanpak .grid.md\:grid-cols-3 p {
  margin-top: auto !important;
}

/* iPad portrait: 3 cards are too cramped; use one clean column */
@media (min-width: 768px) and (max-width: 1023px) {
  #persoonlijke-aanpak h2 {
    font-size: clamp(4.4rem, 9vw, 6rem) !important;
    max-width: 760px;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 > .group > .border {
    min-height: 0 !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 h3 {
    min-height: 0 !important;
  }
}

/* Phone */
@media (max-width: 767px) {
  #persoonlijke-aanpak {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  #persoonlijke-aanpak .mb-20 {
    margin-bottom: 2.5rem !important;
  }

  #persoonlijke-aanpak h2 {
    font-size: clamp(3rem, 14vw, 4.4rem) !important;
    line-height: .88 !important;
    max-width: 100%;
  }

  #persoonlijke-aanpak .border-l-4 {
    padding-left: 1rem !important;
  }

  #persoonlijke-aanpak .border-l-4 p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 > .group > .border {
    min-height: 0 !important;
    padding: 1.4rem !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 h3 {
    min-height: 0 !important;
    font-size: 2rem !important;
    margin-bottom: .9rem !important;
  }

  #persoonlijke-aanpak .grid.md\:grid-cols-3 p {
    margin-top: 0 !important;
  }
}


/* ============================================================
   BNTG V16 — mobile + iPad hardening
   ============================================================ */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}
main, section, header, footer,
.max-w-\[1400px\], .max-w-7xl,
.grid, .flex, .group {
  min-width: 0;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}
h1, h2, h3, p, li, span, a {
  overflow-wrap: normal;
  word-break: normal;
}
.font-mono {
  overflow-wrap: anywhere;
}

/* Read-more helper for long mobile/tablet paragraphs */
@media (max-width: 1024px) {
  .bntg-clamp {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden !important;
  }
  .bntg-clamp.bntg-expanded {
    display: block !important;
    -webkit-line-clamp: unset;
    overflow: visible !important;
  }
  .bntg-readmore {
    margin-top: .8rem;
    border: 1px solid rgba(0,212,255,.35);
    background: transparent;
    color: #00d4ff;
    padding: .65rem .9rem;
    font: 700 .72rem/1 monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* Tablet portrait + landscape */
@media (min-width: 768px) and (max-width: 1100px) {
  header .max-w-7xl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  section {
    overflow: hidden !important;
  }
  section > .max-w-\[1400px\] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  h1, section h2 {
    max-width: 100% !important;
  }
  section h2 {
    font-size: clamp(4rem, 9vw, 6.2rem) !important;
    line-height: .88 !important;
  }
  #expertise .grid,
  #werkwijze .grid {
    min-width: 0 !important;
  }
  #contact .grid.lg\:grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  #contact .lg\:col-span-3,
  #contact .lg\:col-span-2 {
    grid-column: auto !important;
    min-width: 0 !important;
  }
  #contact .sticky {
    position: static !important;
  }
}

/* Phone */
@media (max-width: 767px) {
  header {
    overflow: hidden !important;
  }
  header .max-w-7xl,
  section > .max-w-\[1400px\],
  footer .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  section {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
    overflow: hidden !important;
  }

  /* Large decorative section numbers should never enlarge the page */
  section > .absolute.text-\[12rem\] {
    font-size: 7rem !important;
    left: .5rem !important;
    max-width: calc(100vw - 1rem) !important;
    overflow: hidden !important;
  }

  h1, h2, h3 {
    max-width: 100% !important;
    hyphens: none !important;
  }

  section h2 {
    font-size: clamp(3rem, 15vw, 4.6rem) !important;
    line-height: .88 !important;
    letter-spacing: -.045em !important;
  }

  /* Prevent a single letter from wrapping to a new line on the big headings */
  section h2 br {
    display: none;
  }
  section h2 span {
    display: block;
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .grid {
    min-width: 0 !important;
  }

  /* Expertise: one clean column on phone */
  #expertise .grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  #expertise h3 {
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    line-height: .95 !important;
    max-width: 100% !important;
  }

  /* Workflow: no awkward side-by-side layout on phone */
  #werkwijze .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* About consultant */
  #over .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #over .p-12 {
    padding: 1.5rem !important;
  }
  #over .w-48.h-48 {
    width: 7rem !important;
    height: 7rem !important;
  }
  #over h3 {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
  }

  /* Contact form */
  #contact .grid.lg\:grid-cols-5,
  #contact .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  #contact .lg\:col-span-3,
  #contact .lg\:col-span-2 {
    grid-column: auto !important;
  }
  #contact .sticky {
    position: static !important;
  }
  #contact form {
    width: 100% !important;
    min-width: 0 !important;
  }
  #contact input,
  #contact textarea,
  #contact button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #contact button[type="submit"] {
    padding: 1.15rem 1rem !important;
    justify-content: center;
  }

  /* Footer simplified and centered */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  footer .pt-8.border-t {
    align-items: flex-start !important;
  }
}

@media (max-width: 390px) {
  section h2 {
    font-size: clamp(2.65rem, 14vw, 3.6rem) !important;
  }
  #expertise h3 {
    font-size: 2rem !important;
  }
}


/* BNTG V17 MOBILE OVERHAUL */
html,body{width:100%;max-width:100%;overflow-x:clip!important}
#bntg-mobile-nav{display:none}

@media(max-width:1100px){
  main,section,header,footer,.max-w-\[1400px\],.max-w-7xl,.grid,.flex,.group{min-width:0!important;max-width:100%}
  section{overflow:hidden!important}
  section>.max-w-\[1400px\]{width:100%!important;padding-left:clamp(1.1rem,4vw,2.5rem)!important;padding-right:clamp(1.1rem,4vw,2.5rem)!important}
  header{background:rgba(5,8,10,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
  header .h-20{height:4.25rem!important}
  header button.md\:hidden{display:none!important}
  section.py-32{padding-top:6rem!important;padding-bottom:6rem!important}
  section>.absolute.text-\[12rem\]{font-size:8rem!important;top:1.5rem!important;left:1rem!important;opacity:.28!important;pointer-events:none}
  #expertise .group>.grid{grid-template-columns:1fr!important;gap:1.35rem!important;padding-left:0!important;padding-right:0!important}
  #expertise .group{padding:2.2rem 0!important}
  #expertise .lg\:pt-\[3\.15rem\]{padding-top:0!important}
  #expertise h3{font-size:clamp(2.5rem,6vw,4rem)!important;line-height:.94!important;max-width:760px!important}
  #werkwijze .group{padding:2.2rem 0!important}
  #werkwijze .group>.flex,#werkwijze .group>.grid{padding-left:0!important;padding-right:0!important;gap:1rem!important}
  #werkwijze .lg\:pt-\[3\.1rem\]{padding-top:0!important}
  #werkwijze h3{font-size:clamp(2.4rem,6vw,3.7rem)!important;line-height:.95!important}
  #over h2{font-size:clamp(2.75rem,7vw,4.6rem)!important;line-height:.96!important;letter-spacing:-.035em!important}
  #over .grid{grid-template-columns:1fr!important;gap:2.5rem!important}
  #contact .grid.lg\:grid-cols-5{grid-template-columns:1fr!important;gap:3rem!important}
  #contact .lg\:col-span-3,#contact .lg\:col-span-2{grid-column:auto!important}
  #contact .sticky{position:static!important}
}

@media(max-width:767px){
  body{padding-bottom:4.8rem!important}
  header .max-w-7xl,section>.max-w-\[1400px\],footer .max-w-7xl{padding-left:1rem!important;padding-right:1rem!important}

  #bntg-mobile-nav{
    position:fixed;left:.65rem;right:.65rem;bottom:max(.65rem,env(safe-area-inset-bottom));z-index:9999;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(8,12,15,.97);
    border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);box-shadow:0 12px 38px rgba(0,0,0,.48)
  }
  #bntg-mobile-nav a{
    min-height:3.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
    color:#b7bcc0;text-decoration:none;font:700 .62rem/1.1 monospace;letter-spacing:.03em;border-right:1px solid rgba(255,255,255,.08)
  }
  #bntg-mobile-nav a:last-child{border-right:0}
  #bntg-mobile-nav a span{color:#00d4ff;font-size:.56rem}
  #bntg-mobile-nav .mobile-nav-contact{background:#00d4ff;color:#061015}
  #bntg-mobile-nav .mobile-nav-contact span{color:#061015}

  main>section:first-of-type{min-height:auto!important;padding-top:7.25rem!important;padding-bottom:4.75rem!important;align-items:flex-start!important}
  main>section:first-of-type>.max-w-\[1400px\]{padding-top:0!important;padding-bottom:0!important}
  main>section:first-of-type .transition-all.duration-1000{opacity:1!important;transform:none!important}
  main>section:first-of-type h1{font-size:clamp(3rem,14vw,4.15rem)!important;line-height:.87!important;letter-spacing:-.055em!important;margin-bottom:1.35rem!important}
  main>section:first-of-type h2{display:none!important}
  main>section:first-of-type .border-l-4{padding-left:1rem!important;margin-bottom:1.4rem!important}
  main>section:first-of-type .border-l-4 p{font-size:1rem!important;line-height:1.55!important}
  main>section:first-of-type .font-mono.text-sm{font-size:.68rem!important;gap:.7rem!important;flex-wrap:wrap!important;margin-bottom:1.4rem!important}
  main>section:first-of-type .flex.flex-col.sm\:flex-row{width:100%!important;gap:.7rem!important}
  main>section:first-of-type .flex.flex-col.sm\:flex-row button{width:100%!important;padding:1rem!important;font-size:.84rem!important}
  main>section:first-of-type>.absolute.bottom-12{display:none!important}

  section.py-32{padding-top:4.5rem!important;padding-bottom:4.5rem!important}
  section .mb-20{margin-bottom:2.35rem!important}
  section h2{font-size:clamp(2.8rem,13vw,3.9rem)!important;line-height:.9!important;letter-spacing:-.045em!important;margin-bottom:1.4rem!important;max-width:100%!important}
  section .border-l-4{padding-left:1rem!important}
  section .border-l-4 p{font-size:1rem!important;line-height:1.55!important}

  #persoonlijke-aanpak h2{font-size:clamp(2.95rem,13vw,3.9rem)!important;line-height:.88!important}
  #persoonlijke-aanpak .grid.md\:grid-cols-3{grid-template-columns:1fr!important;gap:.9rem!important}
  #persoonlijke-aanpak .grid.md\:grid-cols-3>.group>.border{padding:1.2rem!important;min-height:0!important}
  #persoonlijke-aanpak .grid.md\:grid-cols-3 h3{font-size:1.8rem!important;min-height:0!important;margin-bottom:.65rem!important}

  #expertise .group{padding:1.65rem 0!important}
  #expertise .group>.grid{gap:.75rem!important}
  #expertise h3{font-size:clamp(2.05rem,9.5vw,2.75rem)!important;line-height:.93!important;margin-bottom:.65rem!important}
  #expertise .flex.items-center.gap-3.mb-6{margin-bottom:.8rem!important}
  #expertise .lg\:pt-\[3\.15rem\]>p{margin-bottom:.9rem!important;font-size:.96rem!important}
  #expertise .grid.grid-cols-2{grid-template-columns:1fr!important;gap:.5rem!important;margin-bottom:.9rem!important}
  #expertise .grid.grid-cols-2 span{font-size:.75rem!important}
  #expertise .flex.flex-wrap.gap-2{display:none!important}

  #werkwijze .group{padding:1.65rem 0!important}
  #werkwijze .group>.flex,#werkwijze .group>.grid{gap:.6rem!important}
  #werkwijze h3{font-size:clamp(2rem,9vw,2.65rem)!important;margin-bottom:.3rem!important}
  #werkwijze .flex.items-center.gap-4.mb-6{margin-bottom:.75rem!important}
  #werkwijze p{font-size:.97rem!important;line-height:1.55!important}
  #werkwijze .mt-20.pt-12{margin-top:1.75rem!important;padding-top:1.25rem!important;overflow:hidden!important}

  #over h2{font-size:clamp(2.15rem,9.5vw,2.9rem)!important;line-height:.98!important;letter-spacing:-.035em!important}
  #over .grid{gap:1.4rem!important}
  #over .p-12{padding:1.2rem!important}
  #over .w-48.h-48{width:6rem!important;height:6rem!important;margin-bottom:1rem!important}
  #over h3.text-3xl{font-size:1.6rem!important}
  #over .mt-32.pt-20{margin-top:2.75rem!important;padding-top:1.75rem!important}
  #over blockquote{font-size:clamp(1.5rem,7vw,2rem)!important;line-height:1.05!important}

  #contact .grid.lg\:grid-cols-5,#contact .grid.md\:grid-cols-2{grid-template-columns:1fr!important;gap:1.2rem!important}
  #contact form.space-y-10>*+*{margin-top:1.35rem!important}
  #contact input,#contact textarea{width:100%!important;min-width:0!important;font-size:16px!important;padding-top:.8rem!important;padding-bottom:.8rem!important}
  #contact button[type="submit"]{width:100%!important;padding:1rem!important;font-size:.88rem!important}
  #contact .sticky>.relative.border{padding:1.2rem!important}

  footer{padding-bottom:5rem!important}
  footer .grid{grid-template-columns:1fr!important;gap:1.5rem!important}
  footer .py-12{padding-top:2.5rem!important;padding-bottom:1.25rem!important}
  footer nav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem 1rem!important}
}

@media(max-width:390px){
  main>section:first-of-type h1{font-size:2.75rem!important}
  section h2{font-size:2.6rem!important}
  #over h2{font-size:2.1rem!important}
  #bntg-mobile-nav{left:.4rem;right:.4rem;bottom:.4rem}
}

/* BNTG V18 — Over BNTG expertise + cleaner contact inputs */
@media (min-width: 1101px) {
  #over > .max-w-\[1400px\] > .grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 6rem !important;
    align-items: start !important;
  }

  #over > .max-w-\[1400px\] > .grid > div:first-child {
    padding-top: 1.25rem;
  }

  #over > .max-w-\[1400px\] > .grid > div:first-child h3 {
    font-size: clamp(3rem, 4vw, 4.5rem) !important;
    line-height: .9 !important;
    margin-bottom: 2.5rem !important;
  }

  #over > .max-w-\[1400px\] > .grid > div:first-child .space-y-5 > div {
    min-height: 2.25rem;
  }

  #over > .max-w-\[1400px\] > .grid > div:first-child .space-y-5 span {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }
}

#contact input::placeholder,
#contact textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

#contact input,
#contact textarea {
  min-height: 3.4rem;
}

#contact textarea {
  min-height: 9rem;
}

@media (max-width: 767px) {
  #over > .max-w-\[1400px\] > .grid > div:first-child h3 {
    font-size: 2.2rem !important;
    margin-bottom: 1.35rem !important;
  }

  #over > .max-w-\[1400px\] > .grid > div:first-child .space-y-5 span {
    font-size: .9rem !important;
  }

  #contact input,
  #contact textarea {
    min-height: 3rem;
  }
}