/* ============================================================
   VICTORIE ZEILMAKERIJ · BUISKAPPEN
   Concept: "Gemaakt op de millimeter"
   De pagina is opgebouwd als het werkstuk zelf: meetlint als
   voortgang, stiksels als verbindingen, één rits als middelpunt.
   Palet: doek (ecru) / diep water / marine / steenrood garen /
   messing (uitsluitend de offerte-actie).
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWAosBO5Xw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --doek: #f2eee6;
  --doek-diep: #e9e3d6;
  --diep: #0b2233;
  --marine: #003c75;
  --steen: #b23328;
  --messing: #d68e01;
  --inkt: #16222c;
  --inkt-60: rgba(22, 34, 44, .62);
  --lijn: rgba(22, 34, 44, .16);
  --lijn-licht: rgba(242, 238, 230, .22);
  --doek-op-diep: rgba(242, 238, 230, .92);
  --rail-w: 76px;
  --kader: min(92vw, 1360px);
  --ease-uit: cubic-bezier(.22, 1, .36, 1);
  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-tekst: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Roboto Condensed", "Arial Narrow", sans-serif;
}

.bk-scope, .bk-scope * { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* De pagina draait in de Avada-schil (sitebrede header/footer); alle eigen
   stijlen zijn gescoped op .bk-scope zodat beide werelden elkaar niet raken. */
.bk-scope {
  background: var(--doek);
  color: var(--inkt);
  font-family: var(--f-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Avada-schil-correcties: content tegen header en schermranden aan */
body { overflow-x: hidden; }
body.fusion-body { background-color: var(--doek); }
#main { padding: 0 !important; }
.fusion-tb-header .fusion-fullwidth { margin-bottom: 0 !important; }

/* Avada zet kleuren rechtstreeks op koppen/tekst; binnen de scope hoort
   alles de kleur van zijn sectie te erven (donkere en lichte vlakken). */
.bk-scope h1, .bk-scope h2, .bk-scope h3, .bk-scope h4,
.bk-scope p, .bk-scope li, .bk-scope address, .bk-scope small,
.bk-scope figcaption { color: inherit; }

.bk-scope ::selection { background: var(--marine); color: var(--doek); }

.bk-scope img, .bk-scope video { max-width: 100%; display: block; }

.bk-scope a { color: inherit; }

/* Canvas-weefsel op ecru vlakken: materiaal, geen 'grain-overlay' */
.weefsel {
  background-image:
    repeating-linear-gradient(0deg,  rgba(22,34,44,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(22,34,44,.018) 0 1px, transparent 1px 3px);
}

.bk-scope :focus-visible { outline: 2px solid var(--steen); outline-offset: 3px; }

/* ---------- labels: de werkplaats-stem ---------- */
.tag {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ============ MEETLINT (vaste rail links, desktop) ============ */
.meetlint {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
  z-index: 60;
  border-right: 1px solid var(--lijn);
  background:
    repeating-linear-gradient(180deg,
      rgba(22,34,44,.5) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(180deg,
      rgba(22,34,44,.5) 0 1.5px, transparent 1.5px 40px),
    var(--doek);
  background-size: 12px 100%, 22px 100%, auto;
  background-repeat: repeat-y;
  background-position: right top, right top, 0 0;
  display: none;
}
.meetlint-stand {
  position: absolute; left: 8px; top: 50vh; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--f-label); font-weight: 500;
  font-size: .72rem; letter-spacing: .18em;
  color: var(--inkt);
  white-space: nowrap;
}
.meetlint-naald {
  position: absolute; right: 0; top: 50vh; width: 30px; height: 2px;
  background: var(--steen);
}
@media (min-width: 1100px) {
  .meetlint { display: block; }
  .bk-scope { padding-left: var(--rail-w); }
  /* de sitebrede footer onder de pagina wijkt ook uit voor de rail */
  .fusion-tb-footer { padding-left: var(--rail-w); }
}

/* (De kopbalk komt sitebreed uit de Avada-header; de eigen kop-balk is weg.) */

/* ================= HERO ================= */
.hero {
  position: relative; min-height: max(560px, calc(100svh - 113px));
  background: var(--diep); color: var(--doek);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; overflow: hidden;
}
.hero-tekst {
  grid-column: 1; z-index: 3;
  /* de header staat nu in de flow boven de hero, dus minder toplucht nodig */
  padding: clamp(3.5rem, 8vh, 5.5rem) clamp(1.2rem, 4vw, 3.4rem) clamp(4rem, 9vh, 6rem);
  max-width: 46rem;
}
.hero .tag { color: rgba(242,238,230,.68); display: block; margin-bottom: 1.4rem; }
.hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.7rem, 7vw, 6.2rem);
  line-height: .97; letter-spacing: -.022em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--messing); }
.hero-sub {
  margin-top: 1.6rem; max-width: 34rem;
  color: rgba(242,238,230,.82); font-size: 1.1rem;
}
.hero-acties { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; align-items: center; }
.knoop {
  display: inline-block; text-decoration: none;
  background: var(--messing); color: var(--diep);
  font-family: var(--f-label); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; font-size: .82rem;
  padding: 1.02rem 1.7rem;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: filter .25s linear, transform .35s var(--ease-uit);
}
.knoop:hover { filter: brightness(1.07); transform: translateY(-2px); }
.stille-link {
  font-family: var(--f-label); font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; font-size: .78rem;
  color: rgba(242,238,230,.75); text-decoration: none;
  background: linear-gradient(var(--steen), var(--steen)) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 4px;
}
.hero-beeld {
  grid-column: 2; position: relative; z-index: 2; align-self: stretch;
  min-height: 46svh;
}
.hero-paneel {
  position: absolute; inset: 6% 4% 10% 0;
  background: var(--doek);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transform: rotate(.8deg);
  padding: 14px;
}
.hero-paneel > .tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  background: var(--diep); color: var(--doek);
  padding: .45rem .8rem;
}
.hero-paneel img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  filter: saturate(.92) contrast(1.03);
}
/* annotaties op het beeld: het toogmodel spreekt */
.anno { position: absolute; z-index: 4; }
.anno .anno-lijn {
  position: absolute; background: rgba(22,34,44,.55);
  width: 1px; height: 54px; left: 0; bottom: 100%;
}
.anno .anno-punt {
  position: absolute; left: -2.5px; bottom: calc(100% + 52px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--steen);
}
.anno span {
  display: inline-block; transform: translateX(-8%);
  color: var(--inkt); background: rgba(242,238,230,.88);
  border: 1px solid rgba(22,34,44,.3);
  padding: .34rem .6rem;
}
.hero-cue {
  position: absolute; left: clamp(1.2rem, 4vw, 3.4rem); bottom: 1.6rem; z-index: 4;
  color: rgba(242,238,230,.6);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-tekst { grid-column: 1; padding-bottom: 1rem; }
  .hero-beeld { grid-column: 1; min-height: 42svh; }
  .anno span { font-size: .62rem; }
}

/* ================= SECTIES ALGEMEEN ================= */
main { display: block; }
.sectie { position: relative; }
.kader { width: var(--kader); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

.stap-kop {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding-top: clamp(4.5rem, 11vh, 8rem);
  margin-bottom: clamp(2rem, 5vh, 3.6rem);
}
.stap-nr {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(4.4rem, 11vw, 9rem); line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--marine);
  will-change: transform;
}
.sectie-diep .stap-nr { -webkit-text-stroke-color: rgba(242,238,230,.55); }
.stap-kop .stap-titel {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.01em;
}
.stap-kop .tag { color: var(--inkt-60); margin-left: auto; text-align: right; }
.sectie-diep .stap-kop .tag { color: rgba(242,238,230,.55); }

/* pattern-panelen: gesneden hoek, haarlijn, licht gedraaid */
.paneel {
  position: relative;
  background: #fbf9f4;
  border: 1px solid var(--lijn);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.paneel-draai-l { transform: rotate(-.7deg); }
.paneel-draai-r { transform: rotate(.55deg); }

/* stiksel: rood garen dat panelen aan elkaar naait (SVG paden) */
.stiksel-vlak {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; overflow: visible;
}
.stiksel {
  fill: none; stroke: var(--steen); stroke-width: 2;
  stroke-dasharray: 7 6; stroke-linecap: round;
}

/* ---------- Stap 1: de maat ---------- */
.maat-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.maat-grid .paneel-tekst { grid-column: 1 / 8; }
.maat-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
/* snijfoto naast het verhaal: het vak in beeld */
.maat-foto { grid-column: 8 / 13; position: relative; margin: 0; align-self: stretch; }
.maat-foto img {
  width: 100%; height: 100%; min-height: 420px; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.maat-foto figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--doek); color: var(--inkt-60);
  padding: .5rem .9rem; border-top: 2px solid var(--steen);
}
.maat-tag {
  border: 1px solid var(--lijn); color: var(--inkt-60);
  padding: .5rem .85rem; background: var(--doek);
}
.maat-tag b { color: var(--steen); font-weight: 500; margin-right: .5em; }
.paneel-tekst .lead {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.32;
  margin-bottom: 1.1rem; letter-spacing: -.01em;
}
.paneel-tekst p + p { margin-top: 1rem; }
.paneel-tekst { max-width: 62ch; }
@media (max-width: 900px) {
  .maat-grid .paneel-tekst { grid-column: 1 / 13; }
  .maat-foto { grid-column: 1 / 13; min-height: 0; }
  .maat-foto img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

/* ---------- Stap 2: het frame ---------- */
.frame-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(4.5rem, 11vh, 8rem);
  align-items: center;
}
.frame-tekening { grid-column: 1 / 7; }
.frame-tekening svg { width: 100%; height: auto; overflow: visible; }
.frame-lijn {
  fill: none; stroke: var(--marine); stroke-width: 2.5; stroke-linecap: round;
}
.frame-maatlijn { fill: none; stroke: var(--inkt-60); stroke-width: 1; stroke-dasharray: 3 5; }
.frame-tekening text {
  font-family: var(--f-label); font-size: 11.5px; letter-spacing: .12em;
  fill: var(--inkt-60); text-transform: uppercase;
}
.frame-grid .paneel { grid-column: 7 / 12; }
@media (max-width: 900px) {
  .frame-tekening { grid-column: 1 / 13; }
  .frame-grid .paneel { grid-column: 1 / 13; }
}

/* ---------- Stap 3: het doek (diep) ---------- */
.sectie-diep {
  background: var(--diep); color: var(--doek-op-diep);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.doek-intro { max-width: 56ch; margin-bottom: clamp(2.4rem, 6vh, 4rem); font-size: 1.1rem; }
.doek-lijst { list-style: none; border-top: 1px solid var(--lijn-licht); }
.doek-rij {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
  gap: 1rem; align-items: center;
  padding: 1.35rem .2rem;
  border-bottom: 1px solid var(--lijn-licht);
  position: relative;
}
.doek-rij::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--steen); transition: width .6s var(--ease-uit);
}
.doek-rij:hover::before, .doek-rij:focus-within::before { width: 100%; }
.doek-naam {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -.01em;
}
.doek-naam small {
  display: block; font-family: var(--f-label); font-weight: 500;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,238,230,.5); margin-top: .3rem;
}
.doek-om { color: rgba(242,238,230,.72); font-size: .98rem; max-width: 44ch; }
.doek-stalen { display: flex; gap: .45rem; justify-content: flex-end; }
.staal {
  width: 22px; height: 30px; border-radius: 2px;
  border: 1px solid rgba(242,238,230,.25);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
/* kleurenwaaier: een greep uit het volledige palet */
.kleurwaaier { margin-top: 2.4rem; }
.kleurwaaier-kop { display: block; color: rgba(242,238,230,.55); margin-bottom: .9rem; }
.kleurwaaier-rij { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .45rem; }
.kleurwaaier-rij .staal { flex: none; }
.staal-meer {
  display: inline-flex; align-items: center; height: 30px; padding: 0 .75rem;
  margin-left: .35rem;
  border: 1px dashed rgba(242,238,230,.45); border-radius: 2px;
  color: var(--doek-op-diep);
  font-family: var(--f-label); font-weight: 500;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.doek-noot { margin-top: 1.6rem; color: rgba(242,238,230,.55); }
@media (max-width: 820px) {
  .doek-rij { grid-template-columns: 1fr; gap: .5rem; }
  .doek-stalen { justify-content: flex-start; }
}

/* ---------- De rits (signatuur, gepind) ---------- */
.rits-sectie { background: var(--diep); color: var(--doek); height: calc(100svh + 160vh); }
.rits-toneel { position: relative; height: 100svh; overflow: hidden; }
@media (max-width: 760px) { .rits-sectie { height: calc(100svh + 100vh); } }
.rits-laag { position: absolute; inset: 0; }
.rits-plan {
  background: var(--marine);
  background-image:
    repeating-linear-gradient(90deg, rgba(242,238,230,.06) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(242,238,230,.05) 0 1px, transparent 1px 90px);
}
.rits-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-lijn { fill: none; stroke: rgba(242,238,230,.65); stroke-width: 1.5; stroke-dasharray: 8 7; }
.plan-lijn-fijn { fill: none; stroke: rgba(242,238,230,.32); stroke-width: 1; stroke-dasharray: 3 6; }
.rits-plan text {
  font-family: var(--f-label); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; fill: rgba(242,238,230,.8);
}
.rits-foto { z-index: 2; }
.rits-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.94);
}
.rits-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(11,34,51,.05) 30%, rgba(11,34,51,.55) 100%);
}
.rits-baan { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.rits-lijnen {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
/* het ritswerk wordt in pixelruimte getekend (viewBox = elementmaat),
   zodat tanden en stiksels nergens vervormen */
.rits-tape { fill: none; stroke: rgba(11, 34, 51, .48); stroke-width: 10; stroke-linecap: round; }
.rits-tanden { fill: none; stroke: #ece6d6; stroke-width: 1.8; stroke-linecap: round; }
.rits-stik { fill: none; stroke: rgba(242, 238, 230, .5); stroke-width: 1.2; stroke-dasharray: 5 4; }
.rits-dicht-basis { fill: none; stroke: rgba(11, 34, 51, .9); stroke-width: 13; stroke-linecap: round; }
.rits-dicht-tanden { fill: none; stroke: #ece6d6; stroke-width: 1.7; stroke-linecap: round; }
.rits-trekker {
  position: absolute; z-index: 4;
  left: 38%; top: 12px;
  transform: translate(-50%, -8px) rotate(3.5deg);
  transform-origin: top center;
  will-change: left, top;
}
.rits-kop-tekst {
  position: absolute; z-index: 5;
  left: clamp(1.2rem, 5vw, 4rem); bottom: clamp(1.6rem, 6vh, 4rem);
  max-width: 30ch;
}
.rits-kop-tekst h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.018em;
}
.rits-kop-tekst p { margin-top: 1rem; color: rgba(242,238,230,.8); max-width: 34ch; }
.rits-status {
  position: absolute; z-index: 5; right: clamp(1.2rem, 4vw, 3rem); top: 14vh;
  color: rgba(242,238,230,.7); text-align: right;
}

/* ---------- Stap 4: de details (stille zone) ---------- */
.details-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(4.5rem, 11vh, 8rem);
}
.details-grid figure { position: relative; }
.details-grid figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.details-grid figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--doek); color: var(--inkt);
  padding: .5rem .9rem;
  font-family: var(--f-label); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  border-top: 2px solid var(--steen);
}
.detail-foto-1 { grid-column: 1 / 6; aspect-ratio: 4 / 4.6; }
.detail-lijst-wrap { grid-column: 7 / 13; align-self: center; }
.detail-foto-2 { grid-column: 2 / 6; aspect-ratio: 5 / 4; margin-top: clamp(1.5rem, 5vh, 3rem); }
.detail-slot {
  grid-column: 7 / 12; align-self: center; margin-top: clamp(1.5rem, 5vh, 3rem);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.45;
  color: var(--inkt); max-width: 26ch; letter-spacing: -.01em;
}
.detail-lijst { list-style: none; border-top: 1px solid var(--lijn); }
.detail-lijst li {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1.05rem .2rem; border-bottom: 1px solid var(--lijn);
  font-size: 1.02rem;
}
.detail-lijst .tag { color: var(--steen); min-width: 2.4rem; }
@media (max-width: 900px) {
  .detail-foto-1, .detail-lijst-wrap, .detail-foto-2, .detail-slot { grid-column: 1 / 13; }
}

/* ---------- Stap 5: het atelier ---------- */
.atelier-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(4.5rem, 11vh, 8rem);
  align-items: center;
}
.atelier-media { grid-column: 1 / 8; position: relative; }
.atelier-media video, .atelier-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  filter: saturate(.92) contrast(1.03);
}
.atelier-media .tag {
  position: absolute; left: 0; bottom: 0; background: var(--doek);
  padding: .5rem .9rem; border-top: 2px solid var(--steen);
}
.atelier-grid .paneel { grid-column: 8 / 13; }
.atelier-tijden { margin-top: 1.3rem; border-top: 1px solid var(--lijn); }
.atelier-tijden div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--lijn);
  font-size: .95rem; color: var(--inkt-60);
}
@media (max-width: 900px) {
  .atelier-media, .atelier-grid .paneel { grid-column: 1 / 13; }
}

/* ---------- Vragen ---------- */
.vragen-wrap { max-width: 56rem; padding-bottom: clamp(4.5rem, 11vh, 8rem); }
.vraag {
  border-bottom: 1px solid var(--lijn);
}
.vraag summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 1.3rem .2rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary .tag { color: var(--steen); transition: transform .4s var(--ease-uit); }
.vraag[open] summary .tag { transform: rotate(45deg); }
.vraag .antwoord { padding: 0 .2rem 1.4rem 3.4rem; color: var(--inkt-60); max-width: 60ch; }
.vraag .antwoord a { color: var(--marine); }
@media (max-width: 700px) { .vraag .antwoord { padding-left: .2rem; } }

/* ---------- Slot ---------- */
.slot-sectie {
  background: var(--diep); color: var(--doek);
  position: relative; overflow: hidden;
}
.slot-inner { padding: clamp(5rem, 13vh, 9rem) 0 clamp(2.5rem, 6vh, 4rem); }
.slot-sectie h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.02em;
  max-width: 15ch; text-wrap: balance;
}
.slot-sectie h2 em { font-style: normal; color: var(--messing); }
.slot-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem); align-items: end;
}
.slot-contact { grid-column: 1 / 7; }
.slot-contact address {
  font-style: normal; color: rgba(242,238,230,.78); line-height: 1.9;
}
.slot-contact a { color: var(--doek); text-decoration-color: var(--steen); text-underline-offset: 4px; }
.slot-acties { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.slot-acties .stille-link { color: rgba(242,238,230,.72); }
/* (De eigen slot-voet is vervallen; de sitebrede Avada-footer volgt op de pagina.) */
@media (max-width: 900px) {
  .slot-contact, .slot-acties { grid-column: 1 / 13; }
}

/* ---------- reveal-hulpklassen (richting, nooit één globale fade) ---------- */
.rv { opacity: 0; }
.rv-op { transform: translateY(34px); }
.rv-links { transform: translateX(-42px); }
.rv-rechts { transform: translateX(42px); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-op, .rv-links, .rv-rechts { opacity: 1 !important; transform: none !important; }
  .rits-toneel { height: auto; min-height: 70svh; }
}

/* ---------- mobiele verfijning ---------- */
@media (max-width: 900px) {
  .hero-beeld { margin-top: 1.4rem; }
  .hero-cue { display: none; }
  .hero-paneel { inset: 3% 4% 10% 4%; }
}
@media (max-width: 700px) {
  .stap-kop { flex-wrap: wrap; row-gap: .4rem; }
  .stap-kop .stap-titel { flex: 1; min-width: 12ch; }
  .stap-kop .tag { margin-left: 0; width: 100%; text-align: left; order: 3; }
}
@media (max-width: 560px) {
  .frame-tekening text { display: none; }
}


/* ================= RECENT WERK (galerij, donker vlak) ================= */
.werk-grid {
  list-style: none; padding: 0; margin-top: .4rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem);
}
.werk-grid figure { position: relative; margin: 0; }
.werk-grid img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.werk-grid figcaption {
  position: absolute; left: 0; bottom: 0;
  background: rgba(11, 34, 51, .88); color: var(--doek-op-diep);
  padding: .38rem .75rem;
  font-family: var(--f-label); font-weight: 500;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.werk-meer { margin-top: 1.8rem; display: flex; gap: 2.2rem; flex-wrap: wrap; }
.werk-sectie .stille-link { color: rgba(242, 238, 230, .72); }
@media (max-width: 820px) { .werk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .werk-grid { grid-template-columns: 1fr; }
  .werk-grid img { aspect-ratio: 4 / 3; }
}

/* ================= TEAMFOTO in de ateliersectie =================
   (het bronbestand is al bijgesneden tot alleen het eigen team) */
.atelier-team { position: relative; margin: clamp(1.2rem, 3vh, 2rem) 0 0; }
.atelier-team img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 26%;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.atelier-team figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--doek); color: var(--inkt-60);
  padding: .5rem .9rem; border-top: 2px solid var(--steen);
}
@media (max-width: 700px) { .atelier-team img { aspect-ratio: 4 / 3; } }

/* ================= VERWANTE DIENSTEN ================= */
.verwant-sectie { padding: clamp(2.2rem, 5vh, 3.2rem) 0; border-top: 1px solid var(--lijn); }
.verwant-kop { display: block; color: var(--inkt-60); margin-bottom: .9rem; }
.verwant-lijst { display: flex; flex-wrap: wrap; gap: .6rem; }
.verwant-lijst a {
  text-decoration: none; padding: .55rem 1.05rem;
  border: 1px solid var(--lijn); background: var(--doek); color: var(--inkt-60);
  font-family: var(--f-label); font-weight: 500;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  transition: all .2s linear;
}
.verwant-lijst a:hover, .verwant-lijst a:focus-visible {
  background: var(--marine); border-color: var(--marine); color: var(--doek);
}