/* glaszetter-plaatsing 1.0.0 · drie stappen over de volle breedte op een donkere band; de kernzin van
   elke stap wordt tijdens het scrollen woord voor woord scherp en licht op, en draait daarbij recht
   (ReactBits ScrollReveal). Gereedschap op lichte tegels. Kleuren alleen via --m-*-tokens. */
.msm-glaszetter-plaatsing {
  --gzp-ink: var(--m-ink, #10282b);
  --gzp-bg: var(--m-bg, #eff8f7);
  --gzp-primary: var(--m-primary, #087f8c);
  --gzp-light: color-mix(in srgb, var(--m-primary, #087f8c) 45%, var(--m-bg, #eff8f7));
  --gzp-line: color-mix(in srgb, var(--m-bg, #eff8f7) 18%, transparent);
  --gzp-muted: color-mix(in srgb, var(--m-bg, #eff8f7) 72%, transparent);
  position: relative;
  scroll-margin-top: 110px;
  padding: clamp(80px, 10vw, 148px) clamp(16px, 4vw, 56px) clamp(80px, 9vw, 132px);
  background:
    radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--m-primary, #087f8c) 22%, transparent), transparent 60%),
    var(--gzp-ink);
  color: var(--gzp-bg);
  font: 500 16px/1.65 var(--m-font-body, Arial, sans-serif);
  overflow-x: clip;
}
.msm-glaszetter-plaatsing *,
.msm-glaszetter-plaatsing *::before,
.msm-glaszetter-plaatsing *::after { box-sizing: border-box; }
.msm-glaszetter-plaatsing .gzp-inner { max-width: 1240px; margin: 0 auto; }

.msm-glaszetter-plaatsing .gzp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(24px, 5vw, 80px); align-items: end; }
.msm-glaszetter-plaatsing .gzp-kicker {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 22px;
  font: 600 10px/1.4 var(--m-font-body, Arial, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.msm-glaszetter-plaatsing .gzp-kicker span + span { padding-left: 14px; border-left: 1px solid var(--gzp-line); font-weight: 500; color: var(--gzp-muted); }
.msm-glaszetter-plaatsing h2 {
  margin: 0;
  font: 400 clamp(44px, 6.2vw, 92px)/.98 var(--m-font-display, Georgia, serif);
  letter-spacing: -.02em;
}
.msm-glaszetter-plaatsing .gzp-lede { margin: 0; max-width: 42ch; font-size: 17px; line-height: 1.7; color: var(--gzp-muted); }

.msm-glaszetter-plaatsing .gzp-steps { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; }
.msm-glaszetter-plaatsing .gzp-step {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(34px, 4.4vw, 60px) 0;
  border-top: 1px solid var(--gzp-line);
}
.msm-glaszetter-plaatsing .gzp-step:last-child { padding-bottom: 0; }
.msm-glaszetter-plaatsing .gzp-meta { align-self: start; }
.msm-glaszetter-plaatsing .gzp-num {
  display: block;
  margin-bottom: 14px;
  color: var(--gzp-light);
  font: 400 clamp(52px, 5.4vw, 80px)/.9 var(--m-font-display, Georgia, serif);
  letter-spacing: -.03em;
}
.msm-glaszetter-plaatsing .gzp-meta h3 { margin: 0 0 10px; font: 400 clamp(24px, 2.2vw, 30px)/1.08 var(--m-font-display, Georgia, serif); letter-spacing: -.01em; }
.msm-glaszetter-plaatsing .gzp-meta p { margin: 0; color: var(--gzp-muted); font: 600 10px/1.5 var(--m-font-body, Arial, sans-serif); letter-spacing: .14em; text-transform: uppercase; }

/* ScrollReveal-zin */
.msm-glaszetter-plaatsing .gzp-say {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  max-width: 30ch;
  font: 400 clamp(26px, 3vw, 44px)/1.2 var(--m-font-display, Georgia, serif);
  letter-spacing: -.012em;
  transform-origin: 0% 50%;
}
.msm-glaszetter-plaatsing .gzp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.msm-glaszetter-plaatsing .gzp-word { display: inline-block; }

/* Gereedschap */
.msm-glaszetter-plaatsing .gzp-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
}
.msm-glaszetter-plaatsing .gzp-tool { margin: 0; }
.msm-glaszetter-plaatsing .gzp-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--m-bg, #eff8f7) 96%, #fff), color-mix(in srgb, var(--m-bg, #eff8f7) 82%, var(--m-primary, #087f8c)));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.msm-glaszetter-plaatsing .gzp-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--m-ink, #10282b) 12%, transparent);
  pointer-events: none;
}
.msm-glaszetter-plaatsing .gzp-tile img {
  display: block;
  width: 96%;
  height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--m-ink, #10282b) 26%, transparent));
}
.msm-glaszetter-plaatsing .gzp-tool:hover .gzp-tile { transform: translateY(-4px); }
.msm-glaszetter-plaatsing figcaption { display: grid; gap: 4px; margin-top: 14px; color: var(--gzp-muted); font-size: 14px; line-height: 1.55; }
.msm-glaszetter-plaatsing figcaption b { color: var(--gzp-bg); font: 400 21px/1.15 var(--m-font-display, Georgia, serif); }

/* Kozijndoorsnede */
.msm-glaszetter-plaatsing .gzp-drawing { width: 86%; height: 86%; overflow: visible; }
.msm-glaszetter-plaatsing .gzp-d-frame { fill: color-mix(in srgb, var(--m-ink, #10282b) 10%, var(--m-bg, #eff8f7)); stroke: var(--gzp-ink); stroke-width: 1.4; stroke-linejoin: round; }
.msm-glaszetter-plaatsing .gzp-d-glass { fill: color-mix(in srgb, var(--m-primary, #087f8c) 34%, transparent); stroke: var(--gzp-primary); stroke-width: 1; }
.msm-glaszetter-plaatsing .gzp-d-spacer { fill: color-mix(in srgb, var(--m-ink, #10282b) 45%, transparent); }
.msm-glaszetter-plaatsing .gzp-d-block { fill: var(--gzp-ink); }
.msm-glaszetter-plaatsing .gzp-d-kit { fill: color-mix(in srgb, var(--m-ink, #10282b) 62%, transparent); }
.msm-glaszetter-plaatsing .gzp-d-lead { fill: none; stroke: color-mix(in srgb, var(--m-ink, #10282b) 55%, transparent); stroke-width: .9; }
.msm-glaszetter-plaatsing .gzp-d-text { fill: var(--gzp-ink); font: 700 10px var(--m-font-body, Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase; }

/* Notitie naast de tegel */
.msm-glaszetter-plaatsing .gzp-note {
  grid-column: span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--gzp-line);
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 5%, transparent);
}
.msm-glaszetter-plaatsing .gzp-note-title { margin: 0 0 14px; color: var(--gzp-light); font: 600 10px/1.4 var(--m-font-body, Arial, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.msm-glaszetter-plaatsing .gzp-note ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.msm-glaszetter-plaatsing .gzp-note-foot { margin: auto 0 0; padding-top: 18px; color: var(--gzp-muted); font-size: 14px; line-height: 1.55; }
.msm-glaszetter-plaatsing .gzp-note li { padding: 14px 0 12px; border-bottom: 1px solid var(--gzp-line); font: 400 clamp(17px, 1.5vw, 20px)/1.3 var(--m-font-display, Georgia, serif); }

@media (max-width: 900px) {
  .msm-glaszetter-plaatsing .gzp-head { grid-template-columns: 1fr; row-gap: 18px; }
  .msm-glaszetter-plaatsing .gzp-step { grid-template-columns: 1fr; }
  .msm-glaszetter-plaatsing .gzp-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; }
  .msm-glaszetter-plaatsing .gzp-num { grid-row: span 2; margin: 0; }
}
@media (max-width: 640px) {
  .msm-glaszetter-plaatsing { scroll-margin-top: 96px; }
  .msm-glaszetter-plaatsing .gzp-tools { grid-template-columns: 1fr 1fr; }
  .msm-glaszetter-plaatsing .gzp-tools--three .gzp-tool:first-child { grid-column: 1 / -1; }
  .msm-glaszetter-plaatsing .gzp-tools--three .gzp-tool:first-child .gzp-tile { aspect-ratio: 16 / 11; }
  .msm-glaszetter-plaatsing .gzp-note ul { grid-template-columns: 1fr; }
  .msm-glaszetter-plaatsing .gzp-tools:not(.gzp-tools--three) { grid-template-columns: 1fr; }
  .msm-glaszetter-plaatsing .gzp-tools:not(.gzp-tools--three) .gzp-tile { aspect-ratio: 16 / 12; }
  .msm-glaszetter-plaatsing .gzp-note { grid-column: auto; }
  .msm-glaszetter-plaatsing figcaption b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-glaszetter-plaatsing .gzp-tile { transition: none; }
  .msm-glaszetter-plaatsing .gzp-tool:hover .gzp-tile { transform: none; }
}