/* ==========================================================================
   17sites — Robin van Rheenen
   Layout gebaseerd op de conversiepatronen van 10 topconverterende
   webdesign-/developersites.
   ========================================================================== */

:root {
  color-scheme: dark;   /* formuliervelden, scrollbars en selects in donkere modus */
  --navy:        #1f2833;
  --navy-deep:   #151d25;
  --navy-soft:   #263341;
  --line:        rgba(102, 252, 241, .16);
  --line-soft:   rgba(255, 255, 255, .09);
  --cyan:        #66fcf1;
  --cyan-dim:    #45b6ae;
  --white:       #ffffff;
  --grey:        #bfbfbf;
  --grey-dim:    #8c98a4;
  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 24px 60px -20px rgba(0, 0, 0, .65);
  --wrap:        1180px;
  --ease:        cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--grey);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "League Spartan", Poppins, sans-serif;
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.15rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--white); }

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

strong { color: var(--white); font-weight: 600; }

::selection { background: var(--cyan); color: var(--navy); }

/* ---------- layout helpers ---------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }

.section-deep { background: var(--navy-deep); }

.eyebrow {
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  color: var(--cyan);
  margin: 0 0 1rem;
  display: block;
}

.lead { font-size: 1.08rem; color: var(--grey); max-width: 60ch; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .93rem;
  padding: 1.05rem 1.85rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease),
              color .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease);
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--cyan);
  color: var(--navy-deep);
  box-shadow: 0 12px 34px -12px rgba(102, 252, 241, .6);
}
.btn-primary:hover {
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: 0 16px 40px -12px rgba(102, 252, 241, .75);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .22);
  color: var(--white);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.btn-sm { padding: .78rem 1.35rem; font-size: .82rem; }

.link-arrow {
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.link-arrow span { transition: transform .22s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- utility bar ---------- */

.utility {
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--grey-dim);
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 42px;
  flex-wrap: wrap;
}
.utility-items { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.utility-items span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(31, 40, 51, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .9); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand img { width: 132px; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  color: var(--white);
  font-size: .92rem;
  font-weight: 600;
  position: relative;
  padding: .25rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--cyan);
  transition: width .25s var(--ease);
}
.nav a:hover { color: var(--cyan); }
.nav a:hover::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  width: 46px; height: 42px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--white);
  position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--white);
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 900px; height: 900px;
  right: -14%; top: -34%;
  background: radial-gradient(circle, rgba(102, 252, 241, .17) 0%, transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 78% 62% at 42% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 42% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--cyan); }

.hero-sub { font-size: 1.13rem; max-width: 46ch; margin-bottom: 2rem; }

.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.1rem; }

.hero-usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1.6rem;
  max-width: 34rem;
}
.hero-usps li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .93rem;
  color: var(--white);
}
.check {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(102, 252, 241, .14);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-top: .28rem;
}
.check svg { width: 11px; height: 11px; stroke: var(--cyan); }

/* hero visual */

.hero-visual { position: relative; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0 4%;
  background: radial-gradient(circle at 50% 62%, rgba(102, 252, 241, .3) 0%, transparent 66%);
  filter: blur(12px);
}
.hero-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .55));
}

.float-card {
  position: absolute;
  z-index: 3;
  background: rgba(21, 29, 37, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .95rem 1.15rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.float-card .fc-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--grey-dim);
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  display: block;
}
.float-card .fc-value {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.float-card .fc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(102, 252, 241, .14);
  display: grid;
  place-items: center;
  flex: none;
}
.float-card .fc-icon svg { width: 17px; height: 17px; stroke: var(--cyan); }

.float-a { left: -6%;  top: 48%; animation: bob 6s ease-in-out infinite; }
.float-b { right: -3%; bottom: 12%; animation: bob 6s ease-in-out infinite 1.6s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- trust strip ---------- */

.trust {
  background: var(--navy-deep);
  border-block: 1px solid var(--line-soft);
  padding: 2.4rem 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.trust-grid > div { padding: 0 .5rem; }
.trust-num {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
  color: var(--cyan);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.trust-label {
  font-size: .84rem;
  color: var(--grey-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
}

/* ---------- pain / gain ---------- */

.pg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.pg-card {
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--line-soft);
  background: var(--navy-soft);
}
.pg-card.gain {
  border-color: var(--line);
  background: linear-gradient(160deg, rgba(102, 252, 241, .09), rgba(102, 252, 241, .02));
}
.pg-card h3 { margin-bottom: 1.2rem; }
.pg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.pg-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .97rem; }
.pg-icon { flex: none; width: 20px; height: 20px; margin-top: .3rem; }
.pg-icon svg { width: 20px; height: 20px; }
.pain .pg-icon svg { stroke: #ff7a7a; }
.gain .pg-icon svg { stroke: var(--cyan); }

/* ---------- services ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.svc-card {
  background: var(--navy-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 2.6vw, 2.3rem);
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.svc-icon {
  /* flex: none is hier geen detail. In de rijen van het care plan, de case en
     de contactgegevens staat dit vierkant naast een tekstblok in een flexrij.
     Zonder deze regel krimpt hij mee zodra die tekst lang wordt en wordt het
     vierkant een ovaal. aspect-ratio houdt hem daarna ook echt vierkant. */
  flex: none;
  aspect-ratio: 1;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(102, 252, 241, .12);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
}
.svc-icon svg { width: 23px; height: 23px; stroke: var(--cyan); }
.svc-card p { font-size: .96rem; }
.svc-list {
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .5rem;
  font-size: .92rem;
}
.svc-list li { display: flex; gap: .6rem; align-items: flex-start; }
.svc-list li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: .62rem;
}
.svc-card .link-arrow { margin-top: auto; }

/* ---------- work / portfolio ---------- */

.work-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.work-head .section-head { margin-bottom: 0; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--navy-soft);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
  display: block;
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.work-card.is-wide { grid-column: span 2; }
/* Browserframe met de volledige pagina erin. Bij hover schuift de
   afbeelding door tot onderaan, zodat je de hele site ziet zonder hem te
   openen. --scroll en --scrolltijd staan per kaart in de HTML: hoe langer de
   pagina, hoe verder en hoe langer hij loopt. */

.work-frame {
  padding: 0;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-soft);
}
.work-chrome {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--line-soft);
}
.chrome-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  flex: none;
}
.chrome-url {
  margin-left: .5rem;
  font-size: .74rem;
  color: var(--grey-dim);
  background: rgba(0, 0, 0, .3);
  border-radius: 999px;
  padding: .18rem .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-shot {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #fff;
}
/* De previews bladeren uit zichzelf van boven naar beneden en terug. Dat liep
   eerst op hover, maar op een telefoon bestaat hover niet: daar zag je alleen
   de bovenkant. Nu draait het altijd, met een pauze aan begin en eind zodat je
   de kop en de voet van elke site rustig kunt lezen. */
.work-shot img {
  width: 100%;
  display: block;
  will-change: transform;
  animation: bladeren calc(var(--scrolltijd) * 2.6) ease-in-out infinite;
  animation-delay: var(--startvertraging, 0s);
}
@keyframes bladeren {
  0%,  10% { transform: translateY(0); }
  48%, 60% { transform: translateY(var(--scroll)); }
  98%,100% { transform: translateY(0); }
}

/* Stilzetten als je met de muis stilstaat, zodat je iets kunt bekijken. */
@media (hover: hover) {
  .work-card:hover .work-shot img { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .work-shot img { animation: none; }
}

.work-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.work-body h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.work-tag {
  font-size: .78rem;
  color: var(--grey-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
}
.work-arrow {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: background .25s var(--ease);
}
.work-arrow svg { width: 15px; height: 15px; stroke: var(--cyan); transition: stroke .25s var(--ease); }
.work-card:hover .work-arrow { background: var(--cyan); }
.work-card:hover .work-arrow svg { stroke: var(--navy-deep); }

/* live-badge op de portfoliokaarten */

.work-live {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  font-size: .84rem;
  color: var(--cyan);
  font-weight: 600;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  box-shadow: 0 0 0 0 rgba(102, 252, 241, .7);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%       { box-shadow: 0 0 0 0 rgba(102, 252, 241, .55); }
  70%,100% { box-shadow: 0 0 0 7px rgba(102, 252, 241, 0); }
}

/* ---------- uitgelichte case ---------- */

.case-panel {
  background: linear-gradient(150deg, rgba(102, 252, 241, .1), rgba(102, 252, 241, .015) 55%);
  border: 1px solid var(--line);
  border-radius: clamp(18px, 3vw, 30px);
  padding: clamp(1.9rem, 4.5vw, 3.6rem);
  box-shadow: var(--shadow);
}
.case-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center;
}
.case-list {
  list-style: none;
  margin: 1.8rem 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.case-list li { display: flex; gap: 1rem; align-items: flex-start; }
.case-list .svc-icon { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.case-list .svc-icon svg { width: 18px; height: 18px; }
.case-list strong { display: block; font-size: .97rem; line-height: 1.4; }
.case-list span { font-size: .92rem; color: var(--grey); }
.case-note {
  font-size: .9rem;
  color: var(--grey-dim);
  border-left: 2px solid var(--line);
  padding-left: 1rem;
  margin-bottom: 1.8rem;
}

/* schermafbeelding van de planner */

.shot { margin: 0; }
.shot img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.shot figcaption {
  margin-top: .8rem;
  font-size: .8rem;
  color: var(--grey-dim);
  text-align: center;
}

/* ---------- pricing ---------- */

.price-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.price-card {
  background: linear-gradient(165deg, rgba(102, 252, 241, .1), rgba(102, 252, 241, .015));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 3.4vw, 2.8rem);
  position: relative;
  box-shadow: var(--shadow);
}
.price-badge {
  position: absolute;
  top: -13px; left: clamp(1.9rem, 3.4vw, 2.8rem);
  background: var(--cyan);
  color: var(--navy-deep);
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  padding: .42rem 1rem;
  border-radius: 999px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .4rem 0 .1rem;
}
.price-amount .num {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.2rem);
  color: var(--white);
  line-height: 1;
}
.price-amount .per { font-size: 1rem; color: var(--grey-dim); }
.price-setup { font-size: .93rem; color: var(--grey-dim); margin-bottom: 1.6rem; }
.price-card .btn { width: 100%; justify-content: center; margin-top: 1.6rem; }
.price-note {
  font-size: .82rem;
  color: var(--grey-dim);
  text-align: center;
  margin-top: .9rem;
}

.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.feat-list li { display: flex; gap: 1rem; align-items: flex-start; }
.feat-list .svc-icon {
  width: 42px; height: 42px;
  margin: 0;
  border-radius: 11px;
}
.feat-list .svc-icon svg { width: 19px; height: 19px; }
.feat-list h4 {
  margin: .15rem 0 .25rem;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}
.feat-list p { font-size: .93rem; margin: 0; }

/* ---------- opstartkosten ---------- */

.setup {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
}
.setup .section-head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.setup .section-head h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); }

.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.setup-card {
  background: var(--navy-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.setup-card:hover { transform: translateY(-5px); border-color: var(--line); }
.setup-card .svc-icon { width: 44px; height: 44px; margin-bottom: 1.1rem; border-radius: 12px; }
.setup-card .svc-icon svg { width: 20px; height: 20px; }
.setup-card h4 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}
.setup-card p { font-size: .93rem; margin: 0; }

.setup-note {
  margin-top: 1.8rem;
  text-align: center;
  font-size: .93rem;
  color: var(--grey-dim);
}

/* ---------- process ---------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 2.6rem;
  border-top: 2px solid var(--line-soft);
  transition: border-color .3s var(--ease);
}
.step:hover { border-color: var(--cyan); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 1rem; left: 0;
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: var(--cyan);
  letter-spacing: .1em;
}
.step h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.step p { font-size: .93rem; }

/* ---------- about ---------- */

.about-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-photo {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(102, 252, 241, .22), rgba(102, 252, 241, .03));
  border: 1px solid var(--line);
  overflow: hidden;
}
.about-photo img { width: 100%; }
.about-sign {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1.8rem;
  font-size: 1.05rem;
}
.about-sign span {
  display: block;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey-dim);
  font-size: .9rem;
}
/* Twee vaste kolommen in plaats van laten omvallen. Met flex-wrap bepaalde de
   lengte van de teksten waar de regel brak, en met vier badges viel dat uit op
   twee, één, één. Een raster geeft altijd twee nette rijen; justify-items houdt
   de pillen op hun eigen breedte in plaats van uitgerekt tot de kolom. */
.badge-row {
  display: grid;
  /* Vaste kolommen en de pillen uitgerekt tot de kolom, zodat alle vier even
     breed zijn. Met auto-kolommen en justify-items:start kreeg elke pil zijn
     eigen breedte en stond de rij rommelig. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
  gap: .6rem;
  margin: 1.8rem 0 0;
  max-width: 30rem;
}
.badge-row .badge { text-align: center; }
@media (max-width: 560px) {
  .badge-row { grid-template-columns: 1fr; }
}
.badge {
  border: 1px solid var(--line);
  background: rgba(102, 252, 241, .07);
  border-radius: 999px;
  padding: .48rem 1.05rem;
  font-size: .85rem;
  color: var(--white);
  font-weight: 600;
}

/* ---------- faq ---------- */

.faq-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-list { display: grid; gap: .8rem; }
.faq-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-soft);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq-item[open] { border-color: var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  color: var(--white);
  font-size: 1.02rem;
  text-transform: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus {
  flex: none;
  width: 24px; height: 24px;
  position: relative;
}
.faq-plus::before, .faq-plus::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq-plus::before { top: 11px; left: 4px; width: 16px; height: 2px; }
.faq-plus::after  { left: 11px; top: 4px; width: 2px; height: 16px; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 1.4rem 1.35rem; font-size: .96rem; }

/* ---------- contact ---------- */

.contact { position: relative; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  width: 780px; height: 780px;
  left: -18%; bottom: -46%;
  background: radial-gradient(circle, rgba(102, 252, 241, .15) 0%, transparent 64%);
  pointer-events: none;
}
.contact .wrap { position: relative; z-index: 2; }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.contact-points li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-points .svc-icon { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.contact-points .svc-icon svg { width: 18px; height: 18px; }
.contact-points strong { display: block; font-size: .95rem; }
.contact-points span { font-size: .92rem; color: var(--grey); }

.form-card {
  background: var(--navy-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .45rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: .85rem 1rem;
  color: var(--white);
  font-family: inherit;
  font-size: .96rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(102, 252, 241, .13);
}
.field textarea { min-height: 118px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-card .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.form-foot { font-size: .8rem; color: var(--grey-dim); text-align: center; margin-top: .9rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--line-soft);
  padding: clamp(3.5rem, 6vw, 5rem) 0 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-top img { width: 140px; margin-bottom: 1.2rem; }
.footer-slogan {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: .6rem;
}
.footer-col h4 {
  font-size: .82rem;
  letter-spacing: .16em;
  color: var(--cyan);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a, .footer-col li { font-size: .93rem; color: var(--grey); }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--grey-dim);
}
.footer-bottom a { color: var(--grey-dim); }

/* sticky mobile call bar (patroon van Ontruiming Service / SmartSites) */
.mobile-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; }
  .float-a { left: 0; }
  .float-b { right: 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card.is-wide { grid-column: span 2; }
  .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid { grid-template-columns: 1fr; }
  .price-layout, .about-layout, .faq-layout, .contact-layout,
  .case-layout { grid-template-columns: 1fr; }
  .case-visual { max-width: 460px; }
  .about-photo { max-width: 420px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 78px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.5rem;
    transform: translateY(-130%);
    transition: transform .35s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav.is-open { transform: none; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav a::after { display: none; }
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }

  /* De utilitybalk duwt op een telefoon de hero omlaag terwijl hij niets
     toevoegt: het mailadres staat ook in de actiebalk onderaan, bij contact
     en in de footer. */
  .utility { display: none; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .pg-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card.is-wide { grid-column: span 1; }
  .hero-usps { grid-template-columns: 1fr; }
  body { padding-bottom: 68px; }
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    border-top: 1px solid var(--line);
  }
  .mobile-bar a {
    padding: 1.15rem .5rem;
    text-align: center;
    font-family: "League Spartan", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .88rem;
  }
  .mobile-bar .mb-primary { background: var(--cyan); color: var(--navy-deep); }
  .mobile-bar .mb-secondary { background: var(--navy-soft); color: var(--white); }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .step-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .work-head { align-items: flex-start; }
}

/* ---------- contactformulier ---------- */

/* Honeypot: uit beeld maar niet display:none, want sommige bots slaan
   verborgen velden over. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .88rem;
  color: var(--grey-dim);
  min-height: 1.2em;
}
.form-status.is-fout { color: #ff9b9b; }

/* ==========================================================================
   CARROUSEL VAN KAARTEN
   --------------------------------------------------------------------------
   Elke sectie is een kaart. Je schuift ze zijwaarts langs, met een randje van
   de volgende kaart in beeld: dat vertelt zonder woorden dat er meer is.
   Scroll-snap zet elke kaart netjes in het midden.

   De maten staan als variabelen, zodat de telefoon alleen die hoeft aan te
   passen en de rest van de opzet gelijk blijft.
   ========================================================================== */

:root {
  --rand:  3rem;    /* hoeveel van de buurkaart je ziet */
  --gat:   1rem;    /* ruimte tussen twee kaarten */
  --boven: 5.5rem;  /* vrij voor de zwevende bovenbalk */
  --onder: 6rem;    /* vrij voor het dock */
}

/* Alleen de pagina mét de rail mag vastgezet worden. Deze stylesheet wordt
     ook geladen door /demo/ en /bedankt/, en die zijn gewone verticaal
     scrollende pagina's; kregen die dit ook, dan viel daar niets meer te
     scrollen. */
  html:has(.rail), body:has(.rail) { height: 100%; overflow: hidden; }

body { background: #10161c; }   /* iets donkerder dan de kaarten, zodat ze loskomen */

.rail {
  display: flex;
  align-items: center;
  gap: var(--gat);
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-inline: calc(var(--rand) + var(--gat) / 2);
  scroll-padding-inline: calc(var(--rand) + var(--gat) / 2);
}
.rail::-webkit-scrollbar { display: none; }

.panel {
  flex: 0 0 calc(100vw - 2 * var(--rand) - var(--gat));
  height: calc(100dvh - var(--boven) - var(--onder));
  padding: clamp(1.5rem, 3vw, 2.75rem);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;

  border-radius: clamp(18px, 2vw, 30px);
  background: var(--navy);
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}

/* De kaartrand geeft al scheiding, dus de afwisselende achtergrond mag weg. */
.panel.section-deep { background: var(--navy); }

/* Vangnet: past de inhoud niet, dan scrollt alleen die ene kaart verticaal. */
.panel-inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.panel-inner > .wrap { width: 100%; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}

/* Compactere maatvoering, zodat een kaart op één scherm past. */
.panel .section-head { margin-bottom: 1.75rem; }
.panel h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.trust { border: 0; background: transparent; padding: 1.5rem 0 0; }
.setup { margin-top: 2rem; padding-top: 1.75rem; }
.work-grid { gap: 1rem; }
.case-panel { padding: clamp(1.5rem, 2.6vw, 2.4rem); border: 0; background: none; box-shadow: none; }

/* Voortgang: hoe ver ben je door de rail heen. */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, .07);
  z-index: 80;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width .18s linear;
}
@media (max-width: 1023px) { .progress { display: none; } }

/* ==========================================================================
   HET DOCK
   ========================================================================== */

.dock {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100vw - 1.5rem);
}

.dock-rail {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  padding: .55rem .7rem;
  border-radius: 26px;

  /* Het glas: een lichte laag over de pagina met sterke blur en wat extra
     verzadiging, plus een lichte rand bovenlangs voor de glansrand. */
  background: rgba(38, 51, 65, .55);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    0 18px 50px -12px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .16);

  overflow-x: auto;
  scrollbar-width: none;
}
.dock-rail::-webkit-scrollbar { display: none; }

.dock-item {
  position: relative;
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--grey);
  transform-origin: bottom center;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.dock-item:hover { color: var(--white); }
.dock-item.is-active { color: var(--navy-deep); }

/* Het bolletje achter het actieve icoon. */
.dock-item::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: var(--cyan);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.dock-item.is-active::before { opacity: 1; transform: scale(1); }

.dock-glyph { position: relative; display: grid; place-items: center; }
.dock-glyph svg { width: 21px; height: 21px; }

.dock-label {
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: .3rem .6rem;
  border-radius: 8px;
  background: rgba(21, 29, 37, .95);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dock-item:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .dock-rail { gap: .15rem; padding: .45rem .5rem; }
  .dock-item { width: 42px; height: 42px; }
  .dock-glyph svg { width: 19px; height: 19px; }
  body { padding-bottom: 5.5rem; }
}

/* ==========================================================================
   ANIMATIE
   --------------------------------------------------------------------------
   Eén beweging door de hele site: inhoud komt mee met de richting waarin je
   scrollt, van rechts naar binnen, met een korte vertraging per element.
   ========================================================================== */

/* Inhoud komt van onderaf omhoog in plaats van van rechts. Dat leest beter,
   want je ogen gaan door de kaart heen van boven naar beneden, en het maakt
   de volgorde van de vertraging logisch. */
.js [data-anim] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .55s var(--ease),
    transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .panel.is-current [data-anim] {
  opacity: 1;
  transform: none;
}

/* Het portret en de planner mogen iets verder van achteren komen. */
.js [data-anim="diep"] { transform: translate3d(48px, 0, 0) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; transform: none; transition: none; }
  .rail { scroll-behavior: auto; }
  .dock-item { transition: none; }
}

/* ==========================================================================
   PANELEN PASSEND MAKEN
   --------------------------------------------------------------------------
   Een paneel dat intern moet scrollen breekt het idee van één scherm per
   onderwerp, en levert twee scrollrichtingen op dezelfde plek op. Daarom
   hieronder per paneel wat strakkere maatvoering in plaats van een scrollbalk.
   ========================================================================== */

@media (min-width: 1024px) {

  /* --- werk: de projecten worden een eigen rij die je zijwaarts doorloopt.
         Dat past bij de rest van de site en haalt in één klap 700px hoogte weg. */
  .panel[data-panel="werk"] .work-grid {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .6rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;   /* niet doorschieten naar de hoofdrail */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .panel[data-panel="werk"] .work-card,
  .panel[data-panel="werk"] .work-card.is-wide {
    flex: 0 0 330px;
    grid-column: auto;
    scroll-snap-align: start;
  }
  .panel[data-panel="werk"] .work-head { margin-bottom: 1.5rem; }

  /* --- care plan: prijs links, wat je krijgt rechts in twee kolommen, en de
         opstartvarianten als compacte rij eronder. */
  .panel[data-panel="plan"] .price-layout { gap: 2rem; align-items: start; }
  .panel[data-panel="plan"] .feat-list {
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.4rem;
  }
  .panel[data-panel="plan"] .feat-list p { display: none; }        /* titels zeggen genoeg op één scherm */
  .panel[data-panel="plan"] .feat-list h4 { margin: .55rem 0 0; font-size: .95rem; }
  .panel[data-panel="plan"] .feat-list li { align-items: center; }
  .panel[data-panel="plan"] .price-card { padding: 1.6rem; }
  .panel[data-panel="plan"] .price-amount .num { font-size: 3rem; }
  .panel[data-panel="plan"] .price-card .svc-list { gap: .3rem; font-size: .88rem; }
  .panel[data-panel="plan"] .price-card .btn { margin-top: 1.1rem; }
  .panel[data-panel="plan"] .setup { margin-top: 1.5rem; padding-top: 1.25rem; }
  .panel[data-panel="plan"] .setup .section-head { margin-bottom: 1.1rem; }
  .panel[data-panel="plan"] .setup .section-head .lead { display: none; }
  .panel[data-panel="plan"] .setup-card { padding: 1.1rem 1.25rem; }
  .panel[data-panel="plan"] .setup-card .svc-icon { display: none; }
  .panel[data-panel="plan"] .setup-card h4 { margin-bottom: .3rem; }
  .panel[data-panel="plan"] .setup-card p { font-size: .88rem; }
  .panel[data-panel="plan"] .setup-note { margin-top: 1rem; }

  /* --- diensten: iets krappere kaarten. */
  .panel[data-panel="diensten"] .svc-card { padding: 1.5rem; }
  .panel[data-panel="diensten"] .svc-icon { width: 44px; height: 44px; margin-bottom: 1rem; }
  .panel[data-panel="diensten"] .svc-list { margin: .9rem 0 1.2rem; gap: .35rem; font-size: .89rem; }
  .panel[data-panel="diensten"] .svc-card p { font-size: .92rem; }

  /* --- case: de tekst mag korter op één scherm. */
  .panel[data-panel="tattoo-planner"] .case-list { margin: 1.2rem 0; gap: .8rem; }
  .panel[data-panel="tattoo-planner"] .case-list span { font-size: .88rem; }
  .panel[data-panel="tattoo-planner"] .case-note { margin-bottom: 1.2rem; font-size: .86rem; }
  .panel[data-panel="tattoo-planner"] .case-layout { align-items: center; }

  /* --- home: de cijferbalk compacter. */
  .panel[data-panel="home"] .trust { padding-top: 1rem; }
  .panel[data-panel="home"] .trust-num { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
  .panel[data-panel="home"] .hero-usps { gap: .4rem 1.6rem; }
  .panel[data-panel="home"] .hero-actions { margin-bottom: 1.5rem; }
  .panel[data-panel="home"] .hero-sub { margin-bottom: 1.5rem; }

  /* --- contact: net wat strakker. */
  .panel[data-panel="contact"] .contact-points { gap: .85rem; margin-top: 1.5rem; }
  .panel[data-panel="contact"] .field { margin-bottom: .8rem; }
  .panel[data-panel="contact"] .field textarea { min-height: 84px; }
}

/* ==========================================================================
   ZWEVENDE BOVENBALK
   --------------------------------------------------------------------------
   Dezelfde glazen taal als het dock: boven weet je waar je bent en hoe je
   contact legt, onder navigeer je. Twee pillen die samen één systeem vormen.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1.15rem 1rem 0;
  pointer-events: none;
}
.site-header > .topbar { pointer-events: auto; }

.topbar {
  width: min(100% - 1rem, 1020px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem .55rem .5rem 1.1rem;
  border-radius: 999px;

  background: rgba(38, 51, 65, .5);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    0 14px 40px -14px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}

.topbar .brand { display: flex; align-items: center; flex: none; }
.topbar .brand img { width: 96px; }

.topbar-here {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--grey-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-here span { transition: opacity .13s var(--ease); display: inline-block; }

.topbar-actions { display: flex; align-items: center; gap: .4rem; flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy-deep);
  transform: translateY(-1px);
}
.icon-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (max-width: 720px) {
  .site-header { padding: .7rem .6rem 0; }
  .topbar { padding: .45rem .45rem .45rem .8rem; gap: .5rem; }
  .topbar .brand img { width: 78px; }
  .topbar-here { display: none; }          /* geen ruimte, het dock volstaat */
  /* De knop blijft staan, maar korter: "Start" in plaats van "Plan een
     gesprek". Zonder oproep tot actie is de bovenbalk op een telefoon alleen
     een logo met twee pictogrammen. */
  .topbar-actions .btn { display: inline-flex; padding: .5rem .85rem; font-size: .7rem; }
  .icon-btn { width: 36px; height: 36px; }
}

/* Laatste bijstelling zodat ook home, diensten, case en care plan op één
   scherm passen. Gemeten op 1440x900; de clamps schalen mee naar kleiner. */
@media (min-width: 1024px) {
  .panel h1 { font-size: clamp(2rem, 3.9vw, 3.2rem); }
  .panel .lead { font-size: 1rem; }
  .panel .section-head { max-width: 56ch; }

  .panel[data-panel="home"] .hero-sub { font-size: 1rem; margin-bottom: 1.25rem; }
  .panel[data-panel="home"] .hero-usps li { font-size: .88rem; }
  .panel[data-panel="home"] .trust-label { font-size: .74rem; }
  .panel[data-panel="home"] .float-card { padding: .7rem .9rem; }

  .panel[data-panel="diensten"] .section-head { margin-bottom: 1.25rem; }
  .panel[data-panel="diensten"] .section-head .lead { display: none; }

  .panel[data-panel="tattoo-planner"] .case-panel { padding: 1.6rem 2rem; }
  .panel[data-panel="tattoo-planner"] h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
  .panel[data-panel="tattoo-planner"] .case-layout > div > p:nth-of-type(2) { display: none; }
  .panel[data-panel="tattoo-planner"] .case-list { margin: 1rem 0; gap: .65rem; }
  .panel[data-panel="tattoo-planner"] .tool-body { padding: 1rem; gap: .6rem; }
  .panel[data-panel="tattoo-planner"] .tool-foot { margin-top: .3rem; padding-top: .7rem; }

  .panel[data-panel="plan"] .section-head { margin-bottom: 1.2rem; }
  .panel[data-panel="plan"] .section-head .lead { display: none; }
}

/* De footer staat onderin het contactpaneel en mag daar niet zwaar wegen. */
.site-footer { background: transparent; border-top: 1px solid var(--line-soft); }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
  font-size: .8rem;
  color: var(--grey-dim);
}
.footer-brand { display: inline-flex; align-items: center; gap: .8rem; }
.footer-brand img { width: 88px; }
.footer-slogan {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  color: var(--white);
  margin: 0;
}
.footer-meta { flex: 1; min-width: 16rem; }
.footer-links { display: inline-flex; gap: 1rem; }
.footer-links a { color: var(--grey-dim); }
.footer-links a:hover { color: var(--cyan); }

@media (min-width: 1024px) {
  .site-footer { margin-top: 1.25rem; padding: 0; }
  .footer-row { padding-block: .9rem 0; font-size: .76rem; }
  .panel[data-panel="contact"] .contact-layout { align-items: start; }
}

@media (min-width: 1024px) {
  /* De footerregel moet nog binnen het contactpaneel passen. */
  .panel[data-panel="contact"] h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
  .panel[data-panel="contact"] .contact-points { gap: .7rem; margin-top: 1.2rem; }
  .panel[data-panel="contact"] .contact-points span { font-size: .86rem; }
  .panel[data-panel="contact"] .form-card { padding: 1.5rem; }
  .panel[data-panel="contact"] .form-foot { margin-top: .6rem; }
}

/* ==========================================================================
   SCROLL-HINT
   Zijwaarts scrollen is niet wat mensen verwachten, dus wijs de weg.
   ========================================================================== */

.scrollhint {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem .5rem 1rem;
  border-radius: 999px;
  background: rgba(38, 51, 65, .5);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--white);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.scrollhint.is-weg { opacity: 0; transform: translateY(8px); }

.scrollhint-tekst {
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  color: var(--grey);
}
.scrollhint-spoor {
  position: relative;
  width: 34px; height: 18px;
  overflow: hidden;
  display: block;
}
.scrollhint-spoor svg {
  width: 18px; height: 18px;
  stroke: var(--cyan);
  position: absolute;
  top: 0; left: 0;
  animation: hintveeg 1.9s var(--ease) infinite;
}
@keyframes hintveeg {
  0%        { transform: translateX(-4px); opacity: 0; }
  35%, 60%  { transform: translateX(4px);  opacity: 1; }
  100%      { transform: translateX(16px); opacity: 0; }
}

/* Onder 1024px scrol je naar beneden, dus dan wijst de pijl omlaag. */
@media (max-width: 1023px) {
  .scrollhint { right: 50%; transform: translateX(50%); bottom: 5.5rem; }
  .scrollhint.is-weg { transform: translateX(50%) translateY(8px); }
  .scrollhint-spoor { width: 18px; height: 26px; }
  .scrollhint-spoor svg { transform: rotate(90deg); }
  @keyframes hintveeg {
    0%        { transform: rotate(90deg) translateX(-4px); opacity: 0; }
    35%, 60%  { transform: rotate(90deg) translateX(4px);  opacity: 1; }
    100%      { transform: rotate(90deg) translateX(14px); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrollhint-spoor svg { animation: none; }
}

/* ==========================================================================
   MOBIEL
   --------------------------------------------------------------------------
   Ook hier de rail, dus veeg je van paneel naar paneel. Binnen een paneel
   scrol je verticaal als de inhoud niet past. Verder: minder lucht, kortere
   hero en liggende rijen waar dat hoogte scheelt.
   ========================================================================== */

@media (max-width: 1023px) {

  body { font-size: 16px; line-height: 1.62; }

  .section-head { margin-bottom: 1.75rem; }
  .panel h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .lead { font-size: 1rem; }

  /* Hero: kop en tekst compacter, knoppen naast elkaar als het past. */
  .panel[data-panel="home"] h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 1.4rem; max-width: none; }
  .hero-actions { gap: .6rem; margin-bottom: 1.4rem; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; padding: .9rem 1.1rem; font-size: .85rem; }
  .hero-usps { grid-template-columns: 1fr 1fr; gap: .45rem .9rem; }
  .hero-usps li { font-size: .82rem; }
  .hero-visual { margin-top: 1.5rem; max-width: 340px; }
  .trust-grid { gap: 1.5rem .75rem; }
  .trust-num { font-size: clamp(1.5rem, 7vw, 2rem); }
  .trust-label { font-size: .68rem; letter-spacing: .08em; }

  /* Projecten: liggende rij in plaats van vijf volle kaarten onder elkaar. */
  .work-grid {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: -1.25rem;
    padding: 0 1.25rem .5rem;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-card, .work-card.is-wide {
    flex: 0 0 min(78vw, 300px);
    grid-column: auto;
    scroll-snap-align: center;
  }
  .work-head { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* Care plan en opstart wat compacter. */
  .price-amount .num { font-size: 2.6rem; }
  .feat-list { gap: 1rem; }
  .setup { margin-top: 2rem; padding-top: 1.75rem; }

  /* De case leest prettiger zonder het brede paneel eromheen. */
  .case-panel { padding: 1.4rem 1.15rem; border-radius: 18px; }

  /* Formulier: iets minder hoog. */
  .field textarea { min-height: 92px; }

  /* Naar beneden scrollen wijst zichzelf; de hint is voor de liggende rail. */
  .scrollhint { display: none; }
}

/* Het dock heeft op een telefoon meer iconen dan er passen. Zonder signaal
   ziet niemand dat. Vandaar snappen plus een uitvloeiende rand aan weerszijden. */
@media (max-width: 1023px) {
  .dock { max-width: calc(100vw - 1rem); }
  .dock-rail {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .dock-item { scroll-snap-align: center; }
}

@media (max-width: 1023px) {
  /* Spring je via het dock naar een sectie, dan moet de kop onder de
     zwevende balk uitkomen in plaats van erachter te verdwijnen. */
}

/* ==========================================================================
   RAIL EN BALK OP EEN TELEFOON
   ========================================================================== */

@media (max-width: 1023px) {

  /* Ruimte voor de zwevende balken boven en onder. Binnen een paneel mag
     verticaal gescrold worden; de rail zelf blijft horizontaal. */
  .panel-inner {
    width: min(100% - 2.5rem, var(--wrap));
    max-height: calc(100dvh - 10.75rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;   /* niet doorschieten naar de rail */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panel-inner::-webkit-scrollbar { display: none; }
  .panel[data-panel="home"] .panel-inner { max-height: calc(100dvh - 10.75rem); overflow-y: auto; }

  body { padding-bottom: 0; }

  /* ---- de balk zelf ---- */
  .dock {
    left: .6rem; right: .6rem;
    transform: none;
    max-width: none;
  }
  .dock-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .45rem .45rem .95rem;
    border-radius: 999px;
    background: rgba(38, 51, 65, .62);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .7),
                inset 0 1px 0 rgba(255, 255, 255, .16);
  }
  .dock-nu { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; }
  .dock-nu-glyph { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
  .dock-nu-glyph svg { width: 19px; height: 19px; stroke: var(--cyan); }
  .dock-nu-naam {
    font-family: "League Spartan", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .82rem;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dock-menu {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem .5rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    font-family: "League Spartan", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .74rem;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .dock-menu:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .dock.is-open .dock-menu { background: var(--cyan); border-color: var(--cyan); color: var(--navy-deep); }

  .dock-menu-streepjes { width: 15px; height: 11px; position: relative; display: block; }
  .dock-menu-streepjes span,
  .dock-menu-streepjes span::before,
  .dock-menu-streepjes span::after {
    content: ""; position: absolute; left: 0;
    width: 15px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform .28s var(--ease), opacity .2s var(--ease);
  }
  .dock-menu-streepjes span { top: 4.5px; }
  .dock-menu-streepjes span::before { top: -4.5px; }
  .dock-menu-streepjes span::after  { top: 4.5px; }
  .dock.is-open .dock-menu-streepjes span { background: transparent; }
  .dock.is-open .dock-menu-streepjes span::before { transform: translateY(4.5px) rotate(45deg); }
  .dock.is-open .dock-menu-streepjes span::after  { transform: translateY(-4.5px) rotate(-45deg); }

  /* ---- uitklapbaar overzicht met alle pagina's ---- */
  .dock-rail {
    display: grid;
    /* Twee kolommen. Drie was te smal (labels als "DIENSTEN" en "CARE PLAN"
       werden afgekapt tot "DIENSTI" / "CARE PL"), maar in twee kolommen is er
       ruimte zat en staat het menu compacter dan helemaal onder elkaar. */
    grid-template-columns: 1fr 1fr;
    gap: .15rem .4rem;
    order: -1;                      /* boven de balk uitklappen */
    margin-bottom: .5rem;
    padding: 0 .5rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-color: transparent;
    box-shadow: none;
    transition: max-height .35s var(--ease), opacity .25s var(--ease),
                padding .35s var(--ease);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .dock { display: flex; flex-direction: column; }
  .dock.is-open .dock-rail {
    max-height: 62vh;
    opacity: 1;
    padding: .5rem;
    overflow-y: auto;
  }

  /* Eén regel per pagina: pictogram links, naam ernaast. Leest als een menu
     en er is ruimte zat voor de langste naam. */
  .dock-item {
    /* Het dock op een groot scherm gebruikt display:grid met place-items:
       center, want daar is het icoon het hele knopje. Hier moet het een rij
       worden; zonder deze regel blijft het grid staan, doet flex-direction
       niets en belanden icoon en label in dezelfde cel over elkaar heen. */
    display: flex;
    align-items: center;
    width: 100%; height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: .55rem;
    padding: .65rem .7rem;
    border-radius: 12px;
  }
  .dock-item::before { inset: 0; border-radius: 12px; }
  .dock-glyph { flex: none; width: 20px; }
  .dock-glyph svg { width: 18px; height: 18px; }
  .dock-label {
    position: static;
    transform: none;
    opacity: 1;
    padding: 0;
    background: none;
    border: 0;
    font-size: .78rem;
    letter-spacing: .06em;
    color: inherit;
    white-space: nowrap;
    text-align: left;
    line-height: 1.2;
  }
  .dock-item.is-active .dock-label { color: var(--navy-deep); }
}

/* Op een groot scherm blijft het dock één rij en is de balk overbodig. */
@media (min-width: 1024px) {
  .dock-bar { display: none; }
}

/* Op een telefoon smallere randen, zodat de kaart zelf zo breed mogelijk blijft. */
@media (max-width: 1023px) {
  :root {
    --rand:  1.1rem;
    --gat:   .7rem;
    --boven: 4.5rem;
    --onder: 5.25rem;
  }
  .panel { padding: 1.25rem 1.1rem; border-radius: 20px; }
  .panel-inner { width: 100%; }
  body { padding-bottom: 0; }
}

/* ---- kaarten precies passend ---- */

.float-card .fc-value { white-space: nowrap; }

@media (min-width: 1024px) {
  /* De foto bepaalde de hoogte van de homekaart. Nu volgt hij de kaart. */
  .panel[data-panel="home"] .hero-photo { max-height: 44vh; width: auto; margin-left: auto; }
  .panel[data-panel="home"] .hero-visual { display: flex; justify-content: center; }
  .panel[data-panel="home"] .float-a { left: 0; top: 42%; }
  .panel[data-panel="home"] .float-b { right: 0; bottom: 8%; }
  .panel[data-panel="home"] .trust { padding-top: .5rem; }
  .panel[data-panel="home"] .hero-usps { margin-bottom: .25rem; }

  .panel[data-panel="tattoo-planner"] .tool-body { padding: .85rem 1rem; gap: .5rem; }
  .panel[data-panel="tattoo-planner"] .case-list { margin: .85rem 0; gap: .55rem; }
  .panel[data-panel="tattoo-planner"] .case-note { margin-bottom: 1rem; }

  .panel[data-panel="contact"] .form-card { padding: 1.35rem; }
  .panel[data-panel="contact"] .field { margin-bottom: .7rem; }
  .panel[data-panel="contact"] .field textarea { min-height: 74px; }

  .panel[data-panel="werk"] .section-head { margin-bottom: 1rem; }
  .panel[data-panel="plan"] .price-card { padding: 1.4rem; }
}

@media (min-width: 1024px) {
  /* De homekaart draagt hero én cijferbalk. Die moeten samen binnen de kaart
     blijven, anders krijg je een scrollbalk in juist de eerste kaart. */
  .panel[data-panel="home"] h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
  .panel[data-panel="home"] .hero-sub {
    font-size: .96rem; line-height: 1.55; margin-bottom: 1.1rem; max-width: 42ch;
  }
  .panel[data-panel="home"] .hero-actions { margin-bottom: 1.1rem; }
  .panel[data-panel="home"] .btn { padding: .85rem 1.4rem; font-size: .85rem; }
  .panel[data-panel="home"] .eyebrow { margin-bottom: .6rem; }
  .panel[data-panel="home"] .trust { padding: .75rem 0 0; margin-top: .9rem; border-top: 1px solid var(--line-soft); }
  .panel[data-panel="home"] .trust-num { font-size: 1.5rem; margin-bottom: .15rem; }
  .panel[data-panel="home"] .trust-label { font-size: .66rem; }
  .panel[data-panel="home"] .hero-photo { max-height: 38vh; }
}

@media (max-width: 1023px) {
  /* De homekaart draagt op een telefoon de meeste inhoud. Alles een slag
     kleiner, en de cijfers in twee rijen van twee met korte labels. */
  .panel[data-panel="home"] h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .panel[data-panel="home"] .eyebrow { font-size: .68rem; margin-bottom: .5rem; }
  .panel[data-panel="home"] .hero-sub {
    font-size: .93rem; line-height: 1.55; margin-bottom: 1rem;
  }
  .panel[data-panel="home"] .hero-actions { margin-bottom: 1rem; }
  .panel[data-panel="home"] .btn { padding: .8rem 1rem; font-size: .78rem; }
  .panel[data-panel="home"] .hero-usps { gap: .35rem .75rem; margin-bottom: 0; }
  .panel[data-panel="home"] .hero-usps li { font-size: .78rem; }
  .panel[data-panel="home"] .hero-visual { display: none; }  /* portret staat bij Over mij */
  .panel[data-panel="home"] .trust {
    padding: .8rem 0 0; margin-top: .9rem; border-top: 1px solid var(--line-soft);
  }
  .panel[data-panel="home"] .trust-grid { gap: .8rem .5rem; }
  .panel[data-panel="home"] .trust-num { font-size: 1.35rem; margin-bottom: .1rem; }
  .panel[data-panel="home"] .trust-label { font-size: .6rem; letter-spacing: .06em; }

  /* Andere kaarten: koppen en tussenruimte een maat kleiner. */
  .panel h2 { font-size: clamp(1.4rem, 6vw, 1.85rem); }
  .panel .section-head { margin-bottom: 1.25rem; }
  .panel .lead { font-size: .95rem; }
  .svc-grid, .pg-grid, .step-grid, .setup-grid, .review-grid { gap: .8rem; }
  .case-layout, .price-layout, .about-layout, .faq-layout, .contact-layout { gap: 1.25rem; }
}

/* De hero was ooit een sectie met eigen padding en een gecentreerd grid. In een
   kaart met vaste hoogte duwt dat de inhoud over de cijferbalk heen. Binnen de
   kaart telt alleen de kaartpadding, en lijnt de inhoud vanaf boven uit. */
.panel .hero { padding: 0; }
.panel .hero .wrap { align-items: start; }
.panel[data-panel="home"] .hero-copy { min-width: 0; }

@media (max-width: 1023px) {
  /* Het cyaan vlak achter het actieve item is absoluut gepositioneerd en wordt
     daardoor bóven het statische label getekend. Relatief maken tilt het label
     er weer overheen. */
  .dock-label { position: relative; z-index: 1; }
}

/* ==========================================================================
   BALKEN IN DE KAART
   --------------------------------------------------------------------------
   De kop en het dock zweven niet meer over de pagina maar liggen binnen de
   kaart, zodat die echt als venster leest. De balken blijven één vast element
   in plaats van iets per kaart: elf keer dezelfde navigatie bijhouden vraagt
   om afwijkingen.
   ========================================================================== */

:root {
  --marge-y: 1.25rem;                 /* ruimte boven en onder de kaart */
  --kaartrand: calc(var(--rand) + var(--gat) / 2);
  --balk-inzet: .85rem;               /* hoever de balken binnen de kaart liggen */
  --balk-h: 3.5rem;
  --dock-h: 3.9rem;
}

.rail { align-items: center; }

.panel {
  height: calc(100dvh - 2 * var(--marge-y));
  padding: calc(var(--balk-h) + var(--balk-inzet) + 1rem)
           clamp(1.5rem, 3vw, 2.75rem)
           calc(var(--dock-h) + var(--balk-inzet) + 1rem);
}

/* Inhoud mag de volle kaartbreedte gebruiken. */
.panel-inner { max-width: none; }

.site-header {
  top: calc(var(--marge-y) + var(--balk-inzet));
  left: calc(var(--kaartrand) + var(--balk-inzet));
  right: calc(var(--kaartrand) + var(--balk-inzet));
  padding: 0;
}
.topbar { width: 100%; }

.dock {
  bottom: calc(var(--marge-y) + var(--balk-inzet));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* De hint zat rechtsonder buiten de kaart; nu netjes binnen de kaartrand. */
.scrollhint {
  right: calc(var(--kaartrand) + var(--balk-inzet));
  bottom: calc(var(--marge-y) + var(--balk-inzet) + var(--dock-h) + .6rem);
}

/* De voortgangslijn hoort bij de kaart, dus over de bovenrand ervan. */
.progress {
  top: var(--marge-y);
  left: var(--kaartrand);
  right: var(--kaartrand);
  border-radius: 999px;
  overflow: hidden;
}

@media (max-width: 1023px) {
  :root {
    --marge-y: .7rem;
    --balk-inzet: .55rem;
    --balk-h: 3.1rem;
    --dock-h: 3.5rem;
  }
  .panel {
    padding: calc(var(--balk-h) + var(--balk-inzet) + .75rem) 1.1rem
             calc(var(--dock-h) + var(--balk-inzet) + .75rem);
  }
  .dock {
    left: calc(var(--kaartrand) + var(--balk-inzet));
    right: calc(var(--kaartrand) + var(--balk-inzet));
    transform: none;
  }
}

/* ==========================================================================
   HERO: PORTRET TOT AAN DE KAARTRAND
   De foto loopt door tot de onderrand van de kaart en wordt daar netjes
   afgesneden door de ronde hoek. Tekst blijft links, ruim binnen de balken.
   ========================================================================== */

@media (min-width: 1024px) {
  .panel[data-panel="home"] { padding-right: 0; }

  .panel[data-panel="home"] .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }

  .panel[data-panel="home"] .hero-visual {
    position: absolute;
    right: 0;
    bottom: calc(-1 * (var(--dock-h) + var(--balk-inzet) + 1rem));
    width: 48%;
    height: calc(100% + var(--dock-h) + var(--balk-inzet) + 1rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    max-width: none;
  }
  .panel[data-panel="home"] .hero-photo {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0;
  }

  /* De zwevende kaartjes horen bij de foto, dus mee naar binnen. */
  .panel[data-panel="home"] .float-card { pointer-events: auto; }
  .panel[data-panel="home"] .float-a { left: 2%;  top: 30%; }
  .panel[data-panel="home"] .float-b { right: 6%; bottom: 34%; }

  /* De tekstkolom houdt zijn eigen leesbreedte binnen de bredere kaart. */
  .panel[data-panel="home"] .hero-copy { max-width: 34rem; }
  .panel[data-panel="home"] .trust { position: relative; z-index: 2; }
}

@media (min-width: 1024px) {
  /* De hero was het referentiepunt voor de foto, en die zit binnen de padding
     die ruimte vrijhoudt voor het dock. Daardoor bleef de foto halverwege
     hangen. Nu is de kaart zelf het referentiepunt, zodat de foto tot de
     onderrand doorloopt en daar door de ronde hoek wordt afgesneden. */
  .panel[data-panel="home"] .hero { position: static; }

  .panel[data-panel="home"] .hero-visual {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 52%;
    height: auto;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .panel[data-panel="home"] .hero-visual::before { display: none; }
  .panel[data-panel="home"] .hero-photo {
    height: 100%;
    width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5));
  }

  .panel[data-panel="home"] .float-a { left: 4%;  top: 34%; }
  .panel[data-panel="home"] .float-b { right: 8%; bottom: 30%; }

  /* De gloed hoort nu bij de kaart in plaats van bij de hero. */
  .panel[data-panel="home"]::before {
    content: "";
    position: absolute;
    width: 900px; height: 900px;
    right: -12%; top: -30%;
    background: radial-gradient(circle, rgba(102, 252, 241, .16) 0%, transparent 62%);
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  /* Stapelvolgorde: het portret onder de tekstlaag, zodat de knoppen en de
     cijfers erboven blijven liggen.

     Hier stond ook een indeling van twee kolommen, links uitgelijnd en
     beperkt tot 34rem. Dat kwam uit de opzet waarin het portret de hele
     rechterhelft besloeg en de cijfers ernaast moesten passen. Nu de rij de
     volle breedte onder de hero heeft, is die beperking weg en staan de vier
     cijfers weer gecentreerd in hun eigen kolom. */
  .panel[data-panel="home"] .hero-visual { z-index: 1; }
  .panel[data-panel="home"] .panel-inner { position: relative; z-index: 2; }

  /* De binnenlaag mag geen muisklikken van het portret afvangen waar hij leeg is. */
  .panel[data-panel="home"] .panel-inner { pointer-events: none; }
  .panel[data-panel="home"] .panel-inner :is(a, button, input, select, textarea, .btn) { pointer-events: auto; }
  .panel[data-panel="home"] .hero-copy, 
  .panel[data-panel="home"] .trust { pointer-events: auto; }
}

@media (min-width: 1024px) {
  /* Niet over zijn gezicht. */
  .panel[data-panel="home"] .float-a { left: -8%; top: 22%; }
  .panel[data-panel="home"] .float-b { right: 4%; bottom: 26%; }
}

@media (min-width: 1024px) {
  /* De gloed en het raster hingen aan .hero. Die zitten nu op de kaart zelf,
     dus de oude versies uit. Ze stonden bovendien deels buiten hun ouder en
     telden mee in de scrollhoogte, wat een scrollbalk gaf die nergens op sloeg. */
  .panel[data-panel="home"] .hero::before,
  .panel[data-panel="home"] .hero::after { display: none; }

  .panel[data-panel="home"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 38% 42%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 78% 62% at 38% 42%, #000 20%, transparent 78%);
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  /* Portret een stuk kleiner. Blijft wel op de onderrand staan, want dat
     afsnijden door de ronde hoek is juist het aardige.

     Gecentreerd in de rechterhelft in plaats van tegen de kaartrand geduwd:
     zo staat hij midden in zijn eigen helft en loopt hij er niet af. */
  .panel[data-panel="home"] .hero-visual {
    top: auto;
    bottom: 0;
    left: 50%;
    right: 0;
    width: auto;
    height: 74%;
    justify-content: center;
  }

  .panel[data-panel="home"] .hero-copy { max-width: 38rem; }

  /* De zwevende kaartjes schuiven mee met het portret. */
  .panel[data-panel="home"] .float-a { left: -8%; right: auto; top: 14%; }
  .panel[data-panel="home"] .float-b { right: 3%; left: auto; bottom: 38%; }
}

/* De bovenbalk liep over de volle kaartbreedte en oogde daardoor uitgerekt.
   Een compacte pil in het midden, net als het dock eronder: samen twee even
   brede elementen in plaats van één balk die de hele kaart doorsnijdt. */
@media (min-width: 1024px) {
  :root { --balk-h: 3rem; }

  .site-header { left: 0; right: 0; }
  .topbar {
    width: min(100% - 2rem, 40rem);
    margin-inline: auto;
    gap: .75rem;
    padding: .35rem .4rem .35rem .85rem;
  }
  .topbar .brand img { width: 78px; }
  .topbar-here { font-size: .68rem; letter-spacing: .13em; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 15px; height: 15px; }
  .topbar-actions { gap: .3rem; }
  .topbar .btn-sm { padding: .55rem 1rem; font-size: .72rem; }
}

/* ==========================================================================
   HOME: TEKST EN PORTRET ALS ÉÉN GECENTREERD BLOK
   --------------------------------------------------------------------------
   Het portret stond absoluut tegen de kaart gepositioneerd en de tekstkolom
   liep over de volle kaartbreedte. Op een breed scherm werd de tekst daardoor
   tegen de linkerrand geduwd en zelfs afgesneden.

   Nu weer één raster met een eigen maximumbreedte, gecentreerd in de kaart.
   Tekst links, portret rechts, samen als blok in het midden. Het portret
   steekt alleen nog aan de onderkant door, zodat de ronde hoek hem afsnijdt.
   ========================================================================== */

@media (min-width: 1024px) {
  .panel[data-panel="home"] { padding-right: clamp(1.5rem, 3vw, 2.75rem); }

  /* Volle kaartbreedte, net als de andere panelen. De eerdere begrenzing op
     76rem liet op een breed scherm brede lege randen achter waar de rest van
     de site die niet heeft. */
  .panel[data-panel="home"] .hero .wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }

  /* Terug in de rasterstroom, dus niet meer absoluut tegen de kaart. */
  .panel[data-panel="home"] .hero-visual {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Doorlopen tot de onderrand van de kaart. */
    margin-bottom: calc(-1 * (var(--dock-h) + var(--balk-inzet) + 1rem));
    align-self: end;
  }
  .panel[data-panel="home"] .hero-photo {
    width: auto;
    max-width: 100%;
    max-height: min(58vh, 30rem);
  }

  .panel[data-panel="home"] .hero-copy { max-width: none; }

  .panel[data-panel="home"] .float-a { left: -6%;  right: auto; top: 8%; }
  .panel[data-panel="home"] .float-b { right: -6%; left: auto;  bottom: 30%; }
}

@media (min-width: 1024px) {
  /* Het portret zit in het raster binnen .panel-inner, dus die laag mag niet
     klippen: anders wordt de foto halverwege afgesneden in plaats van netjes
     door de ronde hoek van de kaart. */
  .panel[data-panel="home"] .panel-inner { overflow: visible; max-height: none; }
  .panel[data-panel="home"] { overflow: hidden; }

  /* Hero en cijfers als één blok, met het portret dat onderlangs doorloopt. */
  .panel[data-panel="home"] .hero { padding-bottom: 0; }
  .panel[data-panel="home"] .hero .wrap { align-items: end; }
  .panel[data-panel="home"] .hero-copy { padding-bottom: 1.5rem; }
  .panel[data-panel="home"] .hero-photo { max-height: min(52vh, 27rem); }
  .panel[data-panel="home"] .trust { padding-top: .5rem; }
}

@media (min-width: 1024px) {
  /* Het doorlopen tot de onderrand botste met het centreren: de inhoud staat
     midden in de kaart, dus het portret eindigde daar ook en werd halverwege
     afgekapt. Dat leest als een fout, niet als een keuze. Nu staat hij
     helemaal in beeld, als rechterkolom naast de tekst. */
  .panel[data-panel="home"] .hero-visual { margin-bottom: 0; }
  .panel[data-panel="home"] .hero .wrap { align-items: center; }
  .panel[data-panel="home"] .hero-copy { padding-bottom: 0; }
  .panel[data-panel="home"] .hero-photo { max-height: min(46vh, 25rem); }
}

/* De bronfoto is op heuphoogte uitgesneden en heeft dus een kaarsrechte
   onderrand. Zolang die buiten de kaart viel zag je dat niet; nu de foto
   helemaal in beeld staat wel, en dan leest het als een fout. Onderaan laten
   uitvloeien haalt die rand weg zonder de foto te verkleinen. */
.hero-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
}

@media (min-width: 1024px) {
  /* Het tweekolomsraster geldt alleen voor de directe wrap van de hero.
     Zonder deze afbakening pakt de cijferrij, die in dezelfde laag staat,
     diezelfde kolomindeling over en propt hij zich in de linkerkolom. */
  .panel[data-panel="home"] .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  }
}

/* ==========================================================================
   CIJFERRIJ, ÉÉN PLEK
   --------------------------------------------------------------------------
   Deze rij is bij elke ronde opnieuw bijgesteld, waardoor er verspreid door
   het bestand een stuk of tien overschrijvingen op stonden die elkaar deels
   tegenspraken. Alles wat de desktopweergave bepaalt staat nu hier bij elkaar.
   ========================================================================== */

@media (min-width: 1024px) {
  .panel[data-panel="home"] .trust .wrap {
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }
  .panel[data-panel="home"] .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1.5rem;
    text-align: center;          /* elk cijfer gecentreerd in zijn eigen kolom */
  }
  .panel[data-panel="home"] .trust-grid > div { padding: 0; }
  .panel[data-panel="home"] .trust-num { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
  .panel[data-panel="home"] .trust-label { font-size: .72rem; white-space: nowrap; }
}

/* De voortgangslijn liep tot de zijkanten van de kaart en stak daardoor
   voorbij de ronde hoeken uit. Hij begint en eindigt nu waar de bovenrand
   werkelijk recht is, dus ingesprongen met de hoekstraal van de kaart. */
@media (min-width: 1024px) {
  .progress {
    left: calc(var(--kaartrand) + clamp(18px, 2vw, 30px));
    right: calc(var(--kaartrand) + clamp(18px, 2vw, 30px));
  }
}

/* De kaart is geen link meer, alleen het domein en de pijl zijn dat. Daardoor
   verdwijnt op een telefoon het probleem dat een veeg over de afbeelding als
   tik werd gelezen en je ineens op de klantsite belandde. */
.work-card { display: block; }
.work-shot { pointer-events: none; }        /* de afbeelding vangt niets af */
.work-live { text-decoration: none; }
.work-live:hover { color: var(--white); }
.work-arrow { cursor: pointer; }
.work-arrow:hover { background: var(--cyan); }
.work-arrow:hover svg { stroke: var(--navy-deep); }
.work-arrow:focus-visible,
.work-live:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Lange en korte tekst op dezelfde knop, zodat het één link blijft in plaats
   van twee die uit de pas kunnen lopen. */
.cta-kort { display: none; }
@media (max-width: 1023px) {
  .cta-lang { display: none; }
  .cta-kort { display: inline; }
}

/* ==========================================================================
   VERGROTING
   Voor beeld dat in de kaart te klein is om te lezen, zoals de planner.
   ========================================================================== */

.shot-knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}
.shot-knop img { display: block; width: 100%; }
.shot-knop:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.shot-loep {
  position: absolute;
  right: .6rem; bottom: .6rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(21, 29, 37, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .66rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.shot-loep svg { width: 14px; height: 14px; }
.shot-knop:hover .shot-loep,
.shot-knop:focus-visible .shot-loep { opacity: 1; transform: none; }
/* Zonder muis is er geen hover, dus daar staat het label gewoon aan. */
@media (hover: none) {
  .shot-loep { opacity: 1; transform: none; }
}

.vergroting {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Bewust flex en geen grid met place-items:center. Bij een raster groeit de
     rij mee met de inhoud, en dan meet de max-height van de afbeelding zich
     aan die rij in plaats van aan het venster. Gevolg: een hoge schermafdruk
     liep buiten beeld en moest je scrollen. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 15, 20, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: zoom-out;
  animation: opdoemen .22s var(--ease);
}
.vergroting[hidden] { display: none; }
@keyframes opdoemen { from { opacity: 0; } }

.vergroting img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
  cursor: default;
  animation: inzoomen .28s var(--ease);
}
@keyframes inzoomen { from { transform: scale(.97); opacity: 0; } }

.vergroting-sluit {
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(38, 51, 65, .8);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--white);
  cursor: pointer;
}
.vergroting-sluit:hover { background: var(--cyan); color: var(--navy-deep); border-color: var(--cyan); }
.vergroting-sluit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vergroting-sluit svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .vergroting, .vergroting img { animation: none; }
}

/* ==========================================================================
   CONTACTKAART OP EEN TELEFOON
   --------------------------------------------------------------------------
   Het formulier plus de contactgegevens erboven werden samen langer dan de
   kaart hoog is. Twee ingrepen: het formulier eerst zetten, want daarvoor kom
   je, en alles wat lucht is een slag terugbrengen. De gegevens blijven
   eronder staan en zijn met scrollen binnen de kaart te bereiken.
   ========================================================================== */

@media (max-width: 1023px) {
  .panel[data-panel="contact"] .contact-layout {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .panel[data-panel="contact"] .form-card { order: -1; }

  .panel[data-panel="contact"] .section-head,
  .panel[data-panel="contact"] .lead { margin-bottom: .75rem; }
  .panel[data-panel="contact"] .lead { font-size: .95rem; }

  .panel[data-panel="contact"] .form-card { padding: 1.1rem; }
  .panel[data-panel="contact"] .field { margin-bottom: .6rem; }
  .panel[data-panel="contact"] .field label { margin-bottom: .25rem; font-size: .78rem; }
  .panel[data-panel="contact"] .field :is(input, select, textarea) {
    padding: .65rem .8rem;
    font-size: 16px;        /* onder 16px zoomt iOS bij het aantikken in */
  }
  .panel[data-panel="contact"] .field textarea { min-height: 64px; }
  .panel[data-panel="contact"] .form-card .btn { padding: .85rem 1.2rem; margin-top: .2rem; }
  .panel[data-panel="contact"] .form-foot { margin-top: .5rem; font-size: .74rem; }

  .panel[data-panel="contact"] .contact-points { gap: .55rem; margin-top: .25rem; }
  .panel[data-panel="contact"] .contact-points .svc-icon { width: 32px; height: 32px; border-radius: 9px; }
  .panel[data-panel="contact"] .contact-points .svc-icon svg { width: 15px; height: 15px; }
  .panel[data-panel="contact"] .contact-points span { font-size: .82rem; }
}

/* ==========================================================================
   JURIDISCHE PAGINA'S
   Lange leesteksten. Geen rail, geen kaarten: gewoon een kolom die je van
   boven naar beneden leest, op een prettige leesbreedte.
   ========================================================================== */

.doc-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 2rem);
  background: rgba(21, 29, 37, .88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line-soft);
}
.doc-top img { width: 96px; }
.doc-top .spacer { flex: 1; }

.doc {
  width: min(100% - 2.5rem, 44rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto clamp(4rem, 8vw, 6rem);
}
.doc h1 { margin-bottom: .5rem; }
.doc .doc-datum { color: var(--grey-dim); font-size: .88rem; margin-bottom: 2.5rem; }
.doc h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 2.5rem 0 .8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin: 1.5rem 0 .5rem; }
.doc p, .doc li { font-size: 1rem; }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 1.1em; display: grid; gap: .45rem; }
.doc li::marker { color: var(--cyan); }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

.doc-tabel { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.doc-tabel th, .doc-tabel td {
  text-align: left; padding: .6rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.doc-tabel th { color: var(--white); font-weight: 600; white-space: nowrap; }
.doc-tabel-wrap { overflow-x: auto; }

.doc-kader {
  border: 1px solid var(--line);
  background: rgba(102, 252, 241, .05);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 0 0 1.4em;
}
.doc-kader p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ÉÉN DOORLOPENDE ACHTERGROND
   --------------------------------------------------------------------------
   De gloed en de rasterlijnen zaten in de hero, dus binnen één kaart. Elke
   kaart snijdt zijn eigen achtergrond af bij de rand, en omdat de volgende
   kaart weer bij nul begint zag je bij elke overgang een naad.

   Nu ligt er één vaste laag achter de hele rail. Die beweegt niet mee met het
   scrollen, dus er valt niets meer af te snijden en er is geen overgang meer
   te zien. De kaarten zijn licht doorschijnend zodat de gloed erdoorheen komt.
   ========================================================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120vmin 90vmin at 78% 12%, rgba(102, 252, 241, .13), transparent 68%),
    radial-gradient(100vmin 80vmin at 12% 88%, rgba(102, 252, 241, .07), transparent 70%),
    var(--navy-deep);
  pointer-events: none;
}

/* De kaart laat de laag erachter een beetje door. */
.panel,
.panel.section-deep { background: rgba(31, 40, 51, .82); }

/* De oude decoratie per kaart vervalt, op elk formaat. */
.hero::before,
.hero::after { display: none !important; }

/* ---------- alle sites in één oogopslag ---------- */



@media (max-width: 1023px) {
      }

/* ==========================================================================
   WERKPANEEL PASSEND MAKEN
   Vijf previews plus de rij met alle sites moeten samen binnen één kaart
   passen. Ze stonden er half buiten: de vijfde preview viel weg aan de
   rechterkant en de tweede regel pillen werd afgesneden.
   ========================================================================== */

@media (min-width: 1024px) {
  .panel[data-panel="werk"] .work-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
  }
  .panel[data-panel="werk"] .work-card.is-wide { grid-column: span 1; }

  /* Iets minder hoog beeld, zodat de pillen eronder er nog bij kunnen. */
  .panel[data-panel="werk"] .work-shot { aspect-ratio: 16 / 12; }

  .panel[data-panel="werk"] .work-body { padding: .8rem .85rem 1rem; gap: .5rem; }
  .panel[data-panel="werk"] .work-body h3 { font-size: .88rem; }
  .panel[data-panel="werk"] .work-tag { font-size: .66rem; letter-spacing: .09em; }
  .panel[data-panel="werk"] .work-live { font-size: .72rem; }
  .panel[data-panel="werk"] .work-arrow { width: 30px; height: 30px; }
  .panel[data-panel="werk"] .work-arrow svg { width: 12px; height: 12px; }
  .panel[data-panel="werk"] .work-chrome { padding: .4rem .6rem; }
  .panel[data-panel="werk"] .chrome-url { font-size: .64rem; }

  .panel[data-panel="werk"] .work-head { margin-bottom: 1.1rem; }
  .panel[data-panel="werk"] .section-head { margin-bottom: 0; }
}

@media (min-width: 1024px) {
  /* Een lang domein als ontruimingservicebrabant.nl staat op nowrap en duwde
     de kaart breder dan zijn kolom, waardoor de rij alsnog buiten beeld liep.
     Binnen de kaart mag hij afgekapt worden; de volledige naam staat in de
     titel en in de rij eronder. */
  .panel[data-panel="werk"] .work-body > div { min-width: 0; }
  .panel[data-panel="werk"] .work-tag,
  .panel[data-panel="werk"] .work-live,
  .panel[data-panel="werk"] .chrome-url {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .panel[data-panel="werk"] .work-live { display: flex; }
  .panel[data-panel="werk"] .work-live span { overflow: hidden; text-overflow: ellipsis; }
  .panel[data-panel="werk"] .work-card { min-width: 0; }
}

@media (min-width: 1024px) {
  /* .work-grid is een flexrij met een eigen horizontale scroll en kaarten van
     vast 330px. Op een breed scherm past de vijfde daardoor net niet en lijkt
     hij afgesneden. Hier mogen ze meekrimpen zodat alle vijf in beeld staan;
     de eigen scroll blijft over voor smallere schermen. */
  .panel[data-panel="werk"] .work-grid { overflow: visible; }
  .panel[data-panel="werk"] .work-card { flex: 1 1 0; min-width: 0; }
}

@media (min-width: 1024px) {
  /* De eerste kaart heeft nog de oude 'is-wide'-basisbreedte en bleef daardoor
     breder dan de rest. Alle vijf even breed. */
  .panel[data-panel="werk"] .work-card.is-wide { flex: 1 1 0; }
}

@media (max-width: 720px) {
  /* Logo links, knoppen rechts. Zonder deze duwer stonden ze tegen het logo
     aan geplakt met een gat aan de rechterkant. */
  .topbar { justify-content: space-between; }
  .topbar .brand { margin-right: auto; }
  .topbar-actions { margin-left: auto; }
}

@media (max-width: 1023px) {
  /* Label direct naast het pictogram in plaats van tegen de rechterrand. */
  .dock.is-open .dock-item { justify-content: flex-start; }
  .dock.is-open .dock-label {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
  }
  .dock.is-open .dock-glyph { margin: 0; }
}

@media (max-width: 1023px) {
  /* Twee kolommen liepen buiten de rand. Oorzaak: 1fr is kortweg
     minmax(auto, 1fr), en die auto-ondergrens is de min-content-breedte. Een
     label op nowrap duwt zijn kolom dus breder dan de helft, en dan valt
     "CARE PLAN" en "WAAROM" van het menu af. Met minmax(0, 1fr) mag een kolom
     wél smaller worden dan zijn inhoud. */
  .dock.is-open .dock-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Icoon en label naast elkaar met een raster in plaats van flex: zo staat
     het label gegarandeerd direct naast het pictogram in plaats van tegen de
     rechterrand geduwd te worden. */
  .dock.is-open .dock-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    min-width: 0;
    text-align: left;
  }
  .dock.is-open .dock-glyph { justify-self: center; }
  .dock.is-open .dock-label {
    justify-self: start;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .74rem;
    letter-spacing: .04em;
  }
}

/* ==========================================================================
   MOBIEL MENU: ÉÉN REGEL PER PAGINA
   --------------------------------------------------------------------------
   Twee kolommen is drie keer geprobeerd en past niet op 390px. Per rij blijft
   er na het pictogram zo'n 110px over, en daar valt "TATTOO-PLANNER" of
   "CARE PLAN" buiten. Het resultaat was steeds een label dat ver van zijn
   icoon af stond of half wegviel.

   Eén regel per pagina past wel, leest als een menu en laat ruimte voor de
   langste naam. Deze regels staan achteraan en overschrijven bewust alle
   eerdere pogingen, zodat er niet meer tegen elkaar in gewerkt wordt.
   ========================================================================== */

@media (max-width: 1023px) {
  .dock.is-open .dock-rail { grid-template-columns: minmax(0, 1fr); }

  .dock.is-open .dock-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: .7rem;
    width: 100%;
    padding: .6rem .8rem;
    text-align: left;
  }
  .dock.is-open .dock-glyph { justify-self: center; width: 22px; }
  .dock.is-open .dock-glyph svg { width: 19px; height: 19px; }
  .dock.is-open .dock-label {
    justify-self: start;
    text-align: left;
    font-size: .78rem;
    letter-spacing: .07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  /* Op een groot scherm is .dock-label een tooltip: position:absolute met
     bottom:100%, dus zwevend bóven het icoon. In het uitgeklapte menu bleef
     die positionering staan, waardoor elk label boven zijn eigen rij hing en
     het geheel één regel verschoven leek. Hier hoort het label gewoon in de
     tekststroom. */
  .dock.is-open .dock-label {
    position: static;
    inset: auto;
    transform: none;
    opacity: 1;
    background: none;
    border: 0;
    padding: 0;
    pointer-events: auto;
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  /* De eerste letter werd links afgeschaafd: "TATTOO" las als "ΓATTOO" en de D
     van DIENSTEN miste zijn ronding. League Spartan tekent sommige glyphs een
     fractie links van hun letterbak, en overflow:hidden knipt dat eraf.

     In één kolom is er ruimte zat, dus het afkappen is hier niet nodig. Weg
     ermee, plus een pixel lucht links voor de zekerheid. */
  .dock.is-open .dock-label {
    overflow: visible;
    text-overflow: clip;
    padding-left: 1px;
  }
}

/* Zelfde oorzaak als in het menu: League Spartan tekent sommige hoofdletters
   een fractie links van hun letterbak, en overflow:hidden schaaft dat eraf.
   Deze drie hebben datzelfde afkap-patroon, dus ook hier een pixel lucht. */
.work-tag,
.work-live,
.chrome-url { padding-left: 1px; }

/* ==========================================================================
   ZWEVENDE KAARTJES TEGEN HET PORTRET
   --------------------------------------------------------------------------
   De kaartjes staan absoluut ten opzichte van .hero-visual, maar die container
   is breder dan de foto: het portret staat erin gecentreerd met een maximale
   hoogte. Daardoor plakten ze tegen de rand van de kolom in plaats van tegen
   het portret, met een groot gat ertussen.

   Door de container om de foto heen te laten krimpen valt zijn rand samen met
   die van de foto, en hangen de kaartjes er vanzelf tegenaan. Werkt op elke
   breedte, zonder per formaat aan percentages te sleutelen.
   ========================================================================== */

.hero-visual {
  width: fit-content;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .panel[data-panel="home"] .hero-visual {
    width: fit-content;
    max-width: 100%;
  }
  /* Niet te ver naar binnen: het bovenste kaartje kwam anders over het
     gezicht te liggen. Nu net over de schouder, met het onderste kaartje
     diagonaal daartegenover. */
  .panel[data-panel="home"] .float-a { left: -30%; right: auto; top: 34%; }
  .panel[data-panel="home"] .float-b { right: -24%; left: auto; bottom: 22%; }
}

@media (max-width: 1023px) {
  .panel[data-panel="home"] .float-a { left: -8%;  right: auto; top: 6%; }
  .panel[data-panel="home"] .float-b { right: -8%; left: auto;  bottom: 22%; }
}

/* ==========================================================================
   LANDINGSPAGINA'S PER PLAATS
   --------------------------------------------------------------------------
   Gewone verticale pagina's, geen rail. Ze hergebruiken de bouwstenen van de
   homepage (svc-card, faq-item, form-card) en voegen alleen toe wat hier
   anders ligt.
   ========================================================================== */

.lp-hero { padding-top: clamp(3rem, 7vw, 5rem); }
.lp-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: .5em; }
.lp-hero .lead { margin-bottom: 2rem; max-width: 58ch; }
.lp-hero .hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.25rem; }

.lp-punten {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .7rem 2rem;
}
.lp-punten li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--white); }

/* lokaal klantverhaal */
.lp-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.lp-case .btn { margin-top: .5rem; }
.lp-shot {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #fff;
  box-shadow: var(--shadow);
  max-height: 30rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.lp-shot:hover { border-color: var(--line); transform: translateY(-4px); }
.lp-shot img { width: 100%; display: block; }

/* werkgebied plus stappen */
.lp-gebied {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.lp-stappen {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(102, 252, 241, .07), rgba(102, 252, 241, .015));
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.lp-stappen h3 { margin-bottom: 1.1rem; }
.lp-lijst { margin: 0; padding-left: 1.15rem; display: grid; gap: .85rem; }
.lp-lijst li { font-size: .95rem; }
.lp-lijst li::marker { color: var(--cyan); font-weight: 700; }

/* contact */
.lp-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .lp-case, .lp-gebied, .lp-contact { grid-template-columns: minmax(0, 1fr); }
  .lp-case .lp-shot { order: -1; }
}

/* ==========================================================================
   RIJKERE BEWEGING
   --------------------------------------------------------------------------
   Eén idee, consequent doorgevoerd: inhoud komt van onderaf omhoog, in
   leesvolgorde. Beeld komt daar iets dieper vandaan, zodat het naar voren
   lijkt te komen in plaats van mee te schuiven. Verder niets, want tien losse
   effecten door elkaar leest als een demo en niet als een visitekaartje.
   ========================================================================== */

/* Beeld en grote blokken komen van verder weg. */
.js .hero-visual[data-anim],
.js .case-visual[data-anim],
.js .tool-card[data-anim],
.js .about-photo[data-anim],
.js .price-card[data-anim] {
  transform: translate3d(0, 34px, 0) scale(.955);
}

/* Koppen en de aanloop erboven komen van opzij binnen, kort. */
.js .section-head[data-anim] { transform: translate3d(-18px, 0, 0); }

/* Kaarten in een rij mogen iets langer over hun beweging doen dan losse
   regels tekst; anders zijn ze er al voordat je ze ziet aankomen. */
.js .svc-card[data-anim],
.js .setup-card[data-anim],
.js .work-card[data-anim],
.js .step[data-anim] {
  transition-duration: .75s, .95s;
}

.js .panel.is-current [data-anim] {
  opacity: 1;
  transform: none;
}

/* ---------- diepte tijdens het scrollen ----------
   De inhoud van een kaart schuift een fractie mee met de rail. Dat geeft de
   rij diepte zonder dat er iets beweegt waar je naar kijkt: de waarde is nul
   zodra een kaart in het midden staat. */
.rail-diepte .panel-inner {
  transform: translate3d(calc(var(--verschuiving, 0) * 26px), 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .rail-diepte .panel-inner { transform: none; }
}

/* ---------- losse pagina's ----------
   De landingspagina's en de juridische pagina's hebben geen rail en dus geen
   is-current. Zonder deze regels zou data-anim daar alles onzichtbaar houden. */
.js .los [data-anim] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .6s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .los [data-anim].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .los [data-anim] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   MOBIEL: WERKPANEEL EN AANWIJZINGEN
   ========================================================================== */

/* De hint zegt wat er bij jouw invoerwijze past. Op een aanraakscherm is
   "scroll" verwarrend, daar veeg je. */
.scrollhint-veeg { display: none; }
@media (hover: none), (pointer: coarse) {
  .scrollhint-muis { display: none; }
  .scrollhint-veeg { display: inline; }
}

/* ---------- bladeren pas na een tik ---------- */

.work-shot { position: relative; }

.tik-hint {
  position: absolute;
  left: 50%; bottom: .6rem;
  transform: translateX(-50%);
  display: none;                     /* alleen op een aanraakscherm */
  padding: .32rem .7rem;
  border-radius: 999px;
  background: rgba(21, 29, 37, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--white);
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .62rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

@media (hover: none), (pointer: coarse) {
  /* Uit zichzelf bladeren is op een telefoon onrustig: er staan meerdere
     previews naast elkaar die allemaal bewegen terwijl je probeert te vegen.
     Hier staat hij stil tot je hem aantikt. */
  .work-shot img { animation-play-state: paused; }
  .work-card.is-bladeren .work-shot img { animation-play-state: running; }

  .tik-hint { display: block; }
  .work-card.is-bladeren .tik-hint { opacity: 0; }

  /* De afbeelding moet de tik kunnen opvangen. Een veeg wordt geen tik, dus
     dit zit het vegen over de rail niet in de weg. */
  .work-shot { pointer-events: auto; cursor: pointer; }
}

/* ---------- minder previews op een klein scherm ---------- */

@media (max-width: 1023px) {
  /* Vijf schermvullende previews maken van dit paneel een lange lap. Drie is
     genoeg om te laten zien wat voor werk het is; de volledige lijst met alle
     domeinen staat er direct onder. */
  .panel[data-panel="werk"] .work-card:nth-child(n + 4) { display: none; }
  .panel[data-panel="werk"] .work-grid { flex-direction: column; overflow: visible; }
  .panel[data-panel="werk"] .work-card { flex: 0 0 auto; width: 100%; }
}

/* De hero-foto zit sinds de mobiele optimalisatie in een <picture>. Met
   display:contents blijft de <img> zelf het flex-item, zodat alle bestaande
   opmaak op .hero-photo blijft werken alsof er niets tussen zit. */
.hero-visual picture { display: contents; }


/* De footer staat binnen de wrap van het contactpaneel en had er zelf nog een,
   waardoor hij dubbel werd ingesprongen en smaller uitkwam dan de inhoud
   erboven. Hier telt alleen de breedte van de omhullende kolom. */
.site-footer .wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}