/* Glas-in-lood Atelier Lichtspel (ambacht D). Concept: oud glas, nieuw lood. N3 zijbalk · H4 collage · R2 redactioneel.
   Lettertypes: Federo (Cyreal, SIL OFL 1.1) en Vollkorn (Friedrich Althausen, SIL OFL 1.1). */
@font-face { font-family: "LS Federo"; font-weight: 400; font-display: swap; src: url("../../fonts/Federo-Regular.woff2") format("woff2"); }
@font-face { font-family: "LS Vollkorn"; font-weight: 400 900; font-style: normal; font-display: swap; src: url("../../fonts/Vollkorn-VF.woff2") format("woff2"); }
@font-face { font-family: "LS Vollkorn"; font-weight: 400 900; font-style: italic; font-display: swap; src: url("../../fonts/Vollkorn-Italic-VF.woff2") format("woff2"); }

body.s-ambacht-d {
  --papier: #f3eee5; --papier-2: #e8e0d1; --opaal: #fbf9f4; --lood: #272a2e; --lood-2: #3b4046; --lood-3: #555c64; --tin: #b7bbb8;
  --inkt: #1d2024; --tekst: #33373c; --grijs: #5b6066; --potlood: #7a7e83;
  --kobalt: #23408e; --robijn: #9b1f30; --amber: #d8922a; --groen: #4f7a49;
  --zij: clamp(20px, 5vw, 76px); --naad: 9px;
  --g-amber: radial-gradient(130% 100% at 28% 22%, #ffe1a0 0%, #eaa84a 38%, #c27a1d 75%, #9c5b10 100%);
  --g-robijn: radial-gradient(130% 100% at 28% 22%, #f08a96 0%, #c13248 36%, #8d1828 75%, #5f0d1a 100%);
  --g-kobalt: radial-gradient(130% 100% at 28% 22%, #8fb0f0 0%, #3e64c0 36%, #23408e 72%, #142559 100%);
  --g-groen: radial-gradient(130% 100% at 28% 22%, #c6e2a6 0%, #7aa565 38%, #4f7a49 74%, #2e4a2b 100%);
  --g-helder: linear-gradient(158deg, #fbfdfc 0%, #e6eeea 45%, #d3dfda 100%);
  --g-opaal: radial-gradient(120% 120% at 40% 30%, #fffdf8 0%, #f1ebde 60%, #e2d9c8 100%);
  --hamer: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle at 70% 75%, rgba(0,0,0,.05) 0 2.2px, transparent 3.4px);
  --kathedraal: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 16%, rgba(255,255,255,0) 56%), radial-gradient(circle at 50% 50%, rgba(120,150,140,.10) 0 30%, rgba(120,150,140,0) 70%);
  --strepen: repeating-linear-gradient(104deg, rgba(255,255,255,.09) 0 2px, transparent 2px 11px, rgba(255,255,255,.05) 11px 12px, transparent 12px 23px);
  --belletjes: radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.55) 0 .8px, transparent 1.4px);
  display: grid; grid-template-columns: 288px minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  background: var(--papier); color: var(--tekst);
  font: 400 18px/1.64 "LS Vollkorn", Georgia, serif; font-feature-settings: "onum" 1, "kern" 1;
}
body.s-ambacht-d > .demo-bar { grid-column: 1 / -1; grid-row: 1; }
body.s-ambacht-d > main { grid-column: 2; grid-row: 2; min-width: 0; }
body.s-ambacht-d > .voet { grid-column: 2; grid-row: 3; min-width: 0; }
:where(body.s-ambacht-d) a { color: var(--kobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(body.s-ambacht-d) a:hover { color: var(--robijn); }
:where(body.s-ambacht-d) :where(h1, h2, h3) { font-family: "LS Federo", "LS Vollkorn", serif; font-weight: 400; color: var(--inkt); margin: 0; letter-spacing: .005em; }
:where(body.s-ambacht-d) p { margin: 0 0 1em; }
body.s-ambacht-d :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ── Glas en lood: de bouwstenen ─────────────────────────────────── */
body.s-ambacht-d .ruit { position: relative; margin: 0; background: var(--g-helder); }
body.s-ambacht-d .ruit > .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; border-radius: 0; }
body.s-ambacht-d .ruit > .ph .ph-cap { font-size: 11px; max-width: 260px; }
body.s-ambacht-d .ruit::before, body.s-ambacht-d .ruit::after { content: ""; position: absolute; z-index: 3; width: 15px; height: 12px; pointer-events: none;
  border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%;
  background: radial-gradient(circle at 34% 32%, #eef0ee 0 12%, #b9bdbb 30%, #8c918f 62%, #61666a 100%); box-shadow: 0 1px 1px rgba(0,0,0,.35); }
body.s-ambacht-d .ruit::before { left: calc(var(--naad) / -2 - 7.5px); top: calc(var(--naad) / -2 - 6px); }
body.s-ambacht-d .ruit::after { right: calc(var(--naad) / -2 - 7.5px); bottom: calc(var(--naad) / -2 - 6px); }
body.s-ambacht-d .glas { display: block; min-height: 30px; }
body.s-ambacht-d .g-A { background: var(--belletjes), var(--strepen), var(--g-amber); background-size: 31px 37px, 19px 27px, auto, auto; }
body.s-ambacht-d .g-R { background: var(--belletjes), var(--strepen), var(--g-robijn); background-size: 29px 41px, 19px 27px, auto, auto; }
body.s-ambacht-d .g-K { background: var(--belletjes), var(--strepen), var(--g-kobalt); background-size: 33px 35px, 19px 27px, auto, auto; }
body.s-ambacht-d .g-G { background: var(--belletjes), var(--strepen), var(--g-groen); background-size: 27px 39px, 19px 27px, auto, auto; }
body.s-ambacht-d .g-H { background: var(--kathedraal), var(--g-helder); background-size: 13px 13px, 13px 13px, auto; background-position: 0 0, 6.5px 6.5px, 0 0; }
body.s-ambacht-d .g-O { background: var(--g-opaal); }
body.s-ambacht-d .code { position: absolute; z-index: 2; right: 8px; top: 6px; font: 400 11px/1 "LS Federo", serif; letter-spacing: .08em; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.s-ambacht-d .ruit:not(.glas) > .code { left: 10px; right: auto; top: auto; bottom: 10px; background: rgba(29,32,36,.62); padding: 4px 6px; border-radius: 2px; }

/* zon-svg (bovenlicht met opkomende zon) */
body.s-ambacht-d svg .p { stroke: var(--lood); stroke-linejoin: round; }
body.s-ambacht-d svg .p-A { fill: #e6a645; } body.s-ambacht-d svg .p-R { fill: #ad2a40; } body.s-ambacht-d svg .p-K { fill: #3456a8; }
body.s-ambacht-d svg .p-G { fill: #6c9a5e; } body.s-ambacht-d svg .p-H { fill: #e9efec; } body.s-ambacht-d svg .p-O { fill: #f2ecdf; }
body.s-ambacht-d svg .kozijn { fill: none; stroke: var(--lood); }
body.s-ambacht-d .zon-logo { width: 58px; height: auto; flex: none; overflow: visible; }
body.s-ambacht-d .zon-logo .p { stroke: #15171a; stroke-width: 1.8; }
body.s-ambacht-d .zon-logo .kozijn { stroke: #15171a; stroke-width: 3; }
body.s-ambacht-d .zon-kroon { display: block; width: 100%; height: auto; }
body.s-ambacht-d .zon-kroon .p { stroke-width: 7; }
body.s-ambacht-d .zon-kroon .kozijn { stroke-width: 6; }

/* Knoppen: een ruitje amber in lood, met soldeerpunten op de hoeken */
body.s-ambacht-d .knop { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px 12px; cursor: pointer;
  font: 400 17px/1.2 "LS Federo", serif; letter-spacing: .03em; color: var(--inkt); text-decoration: none;
  background: var(--strepen), var(--g-amber); border: 5px solid var(--lood);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -10px 18px rgba(110,55,0,.22); transition: filter .2s, transform .2s; }
body.s-ambacht-d .knop::before, body.s-ambacht-d .knop::after { content: ""; position: absolute; width: 12px; height: 10px; border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 34% 32%, #eef0ee 0 12%, #b9bdbb 30%, #8c918f 62%, #61666a 100%); }
body.s-ambacht-d .knop::before { left: -8.5px; top: -7.5px; }
body.s-ambacht-d .knop::after { right: -8.5px; bottom: -7.5px; }
body.s-ambacht-d .knop:hover { color: var(--inkt); filter: brightness(1.1) saturate(1.1); transform: translateY(-1px); }
body.s-ambacht-d .knop.helder { background: var(--hamer), var(--g-helder); background-size: 11px 11px, 15px 15px, auto; }
body.s-ambacht-d .knop.klein { font-size: 15px; padding: 10px 18px 9px; }
body.s-ambacht-d .knoppen { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }

/* Loodlijn en rubriek */
body.s-ambacht-d .rubriek { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 400 14px/1.2 "LS Federo", serif; letter-spacing: .18em; text-transform: uppercase; color: var(--kobalt); }
body.s-ambacht-d .rubriek::before { content: ""; width: 52px; height: 6px; flex: none; background: linear-gradient(var(--lood-3), var(--lood) 45%, var(--lood-2));
  border-radius: 1px; box-shadow: 52px 0 0 -6px transparent; }
body.s-ambacht-d .rubriek::after { content: ""; width: 12px; height: 10px; margin-left: -20px; order: -1; display: none; }
body.s-ambacht-d .rubriek b { font: italic 400 15px/1 "LS Vollkorn", serif; letter-spacing: 0; color: var(--grijs); text-transform: none; }

/* ── Zijbalk: het zijlicht naast de voordeur ─────────────────────── */
body.s-ambacht-d .zb { grid-column: 1; grid-row: 2 / span 2; position: sticky; top: 0; height: 100vh; align-self: start; z-index: 20;
  background: radial-gradient(140% 60% at 100% 0%, #33373d 0%, transparent 60%), linear-gradient(180deg, #25282c, #1e2124);
  color: #ebe5da; padding: 58px 50px 22px 28px; }
body.s-ambacht-d .zb-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.s-ambacht-d .zb-binnen { display: flex; flex-direction: column; height: 100%; }
body.s-ambacht-d .logo { display: flex; align-items: center; gap: 12px; color: #f4efe6; text-decoration: none; margin-bottom: 38px; }
body.s-ambacht-d .logo:hover { color: #fff; }
body.s-ambacht-d .logo-t { display: flex; flex-direction: column; line-height: 1; }
body.s-ambacht-d .logo-t b { font: 400 31px/1 "LS Federo", serif; letter-spacing: .01em; }
body.s-ambacht-d .logo-t small { font: 400 10.5px/1.2 "LS Federo", serif; letter-spacing: .2em; text-transform: uppercase; color: #c9c0b1; margin-top: 7px; }
body.s-ambacht-d .zb-knop { display: none; }
body.s-ambacht-d .zb-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.s-ambacht-d .zb-nav ul { list-style: none; margin: 0; padding: 0; }
body.s-ambacht-d .zb-nav li { position: relative; }
body.s-ambacht-d .nav-i { display: flex; align-items: baseline; gap: 12px; padding: 10px 0 10px 4px; color: #efe9df; text-decoration: none;
  font: 400 25px/1.15 "LS Federo", serif; border-bottom: 1px solid rgba(255,255,255,.07); transition: color .2s; }
body.s-ambacht-d .nav-i b { font: italic 400 13px/1 "LS Vollkorn", serif; color: #a8a49c; min-width: 18px; }
body.s-ambacht-d .nav-i:hover { color: #f3c77f; }
body.s-ambacht-d .nav-i.actief { color: #f6cf8c; background: linear-gradient(to left, rgba(216,146,42,.20), transparent 75%); }
body.s-ambacht-d .nav-i.actief::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: -36px; width: 22px; z-index: 2;
  background: var(--belletjes), var(--strepen), var(--g-amber); background-size: 31px 37px, 19px 27px, auto, auto;
  box-shadow: 0 0 0 3px #15171a, 0 0 22px 6px rgba(255,186,84,.45); }
body.s-ambacht-d .zijlicht { position: absolute; top: 44px; bottom: 16px; right: 11px; width: 22px; border: 3px solid #15171a;
  background:
    repeating-linear-gradient(180deg, transparent 0 57px, #15171a 57px 61px),
    linear-gradient(180deg, #8c6a3a 0 12%, #6d7c78 12% 30%, #6f2a33 30% 38%, #6d7c78 38% 58%, #2f4378 58% 66%, #6d7c78 66% 84%, #4c6342 84% 100%);
  opacity: .9; }
body.s-ambacht-d .zijlicht::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(104deg, rgba(255,255,255,.08) 0 2px, transparent 2px 9px); }
body.s-ambacht-d .zb-onder { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; justify-items: start; }
body.s-ambacht-d .zb-open { margin: 0; font-size: 14.5px; line-height: 1.4; color: #d6cfc3; display: flex; gap: 9px; align-items: baseline; }
body.s-ambacht-d .zb-open i { width: 9px; height: 9px; flex: none; background: var(--g-amber); box-shadow: 0 0 10px 2px rgba(255,186,84,.6); outline: 2px solid #15171a; }
body.s-ambacht-d .zb-tel { font: 400 23px/1 "LS Federo", serif; color: #f4efe6; text-decoration: none; letter-spacing: .02em; }
body.s-ambacht-d .zb-tel:hover { color: #f3c77f; }
body.s-ambacht-d .zb .knop { border-color: #121416; }
body.s-ambacht-d .zb-site { font-size: 15px; color: #e3ddd2; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243,199,127,.6); margin-top: 4px; }
body.s-ambacht-d .zb-site:hover, body.s-ambacht-d .zb-site.actief { color: #f6cf8c; }

/* ── Opening: het raam (H4) ─────────────────────────────────────── */
body.s-ambacht-d .opening { padding: 46px var(--zij) 0; }
body.s-ambacht-d .raam { background: linear-gradient(180deg, #2c3035, #24272b); padding: 14px; box-shadow: inset 0 0 0 2px #41474e, 0 40px 60px -40px rgba(40,30,20,.55); }
body.s-ambacht-d .raam-kroon { margin-bottom: var(--naad); }
body.s-ambacht-d .ruiten { display: grid; gap: var(--naad); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto minmax(150px, auto) minmax(112px, auto); }
body.s-ambacht-d .tekstruit { grid-column: 1 / 8; grid-row: 1 / 3; padding: clamp(28px, 3.4vw, 50px); background: var(--kathedraal), var(--g-helder); background-size: 15px 15px, 15px 15px, auto; background-position: 0 0, 7.5px 7.5px, 0 0; }
body.s-ambacht-d .tekstruit .pre { font: 400 13px/1.2 "LS Federo", serif; letter-spacing: .2em; text-transform: uppercase; color: var(--kobalt); margin-bottom: 20px; }
body.s-ambacht-d .tekstruit h1 { font-size: clamp(46px, 5.6vw, 92px); line-height: .98; margin-bottom: 24px; }
body.s-ambacht-d .tekstruit h1 span { display: block; }
body.s-ambacht-d .tekstruit h1 .r2 { color: var(--kobalt); padding-left: .62em; }
body.s-ambacht-d .tekstruit .lead { font-size: 17.5px; line-height: 1.6; max-width: 34em; color: #2b2f33; margin-bottom: 26px; }
body.s-ambacht-d .r-hero { grid-column: 8 / 13; grid-row: 1 / 4; min-height: 300px; }
body.s-ambacht-d .r-p1 { grid-column: 1 / 4; grid-row: 3 / 5; min-height: 180px; }
body.s-ambacht-d .opening .ruiten > .g-A { grid-column: 4 / 5; grid-row: 3 / 4; }
body.s-ambacht-d .opening .ruiten > .g-R { grid-column: 4 / 5; grid-row: 4 / 5; }
body.s-ambacht-d .r-p3 { grid-column: 5 / 8; grid-row: 3 / 5; }
body.s-ambacht-d .opening .ruiten > .g-K { grid-column: 8 / 10; grid-row: 4 / 5; }
body.s-ambacht-d .r-over { grid-column: 10 / 13; grid-row: 4 / 5; min-height: 130px; }

/* Het lichtspel: gekleurd licht dat over het papier schuift */
body.s-ambacht-d .lichtval { position: relative; height: 118px; margin: 0 2% ; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%); }
body.s-ambacht-d .lichtval i { position: absolute; top: -10px; height: 120px; filter: blur(16px); opacity: .5; transform: skewX(-32deg); mix-blend-mode: multiply;
  animation: ls-zon 26s ease-in-out infinite alternate; }
body.s-ambacht-d .lv-a { left: 30%; width: 7%; background: #f0a93f; }
body.s-ambacht-d .lv-r { left: 37.5%; width: 6%; background: #d0465c; animation-delay: -4s; }
body.s-ambacht-d .lv-k { left: 62%; width: 12%; background: #5577cc; animation-delay: -9s; }
body.s-ambacht-d .lv-g { left: 6%; width: 18%; background: #9cc082; opacity: .36; animation-delay: -2s; }
body.s-ambacht-d .lv-a2 { left: 80%; width: 15%; background: #f4c46d; opacity: .38; animation-delay: -12s; }
@keyframes ls-zon { from { translate: -26px 0; } to { translate: 34px 0; } }
body.s-ambacht-d .onder-raam { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: -54px; padding-bottom: 20px; position: relative; }
body.s-ambacht-d .lv-bijschrift { font-style: italic; font-size: 16.5px; color: var(--grijs); max-width: 30em; padding-left: 18px; border-left: 2px solid var(--amber); }
body.s-ambacht-d .usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.s-ambacht-d .usps li { display: flex; gap: 12px; align-items: baseline; font-size: 16.5px; color: var(--inkt); }
body.s-ambacht-d .usps li::before { content: ""; width: 11px; height: 11px; flex: none; background: var(--g-amber); outline: 3px solid var(--lood); outline-offset: -1px; transform: translateY(1px); }

/* ── Redactionele secties (R2) ─────────────────────────────────── */
body.s-ambacht-d .red { padding: clamp(64px, 8vw, 112px) var(--zij); }
body.s-ambacht-d .red-kop { font-size: clamp(34px, 4.1vw, 60px); line-height: 1.04; max-width: 17ch; margin-bottom: 34px; }
body.s-ambacht-d .red-lead { font-size: 20px; max-width: 36em; color: var(--grijs); margin-top: -14px; margin-bottom: 40px; font-style: italic; }
body.s-ambacht-d .kolommen { columns: 2 300px; column-gap: 60px; column-rule: 3px solid var(--lood-2); max-width: 1040px; }
body.s-ambacht-d .kolommen p { break-inside: avoid-column; }
body.s-ambacht-d .initiaal-p::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }
body.s-ambacht-d .initiaal { float: left; font: 400 62px/1 "LS Federo", serif; color: var(--inkt); padding: 10px 14px 6px; margin: 6px 16px 4px 0;
  background: var(--strepen), var(--g-amber); border: 5px solid var(--lood); }
body.s-ambacht-d .citaat { position: relative; margin: 56px 0 0 auto; max-width: 640px; padding: 4px 0 4px 34px; }
body.s-ambacht-d .citaat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(90deg, var(--lood-3), var(--lood) 50%, var(--lood-2)); }
body.s-ambacht-d .citaat::after { content: ""; position: absolute; left: -4px; top: -6px; width: 14px; height: 12px; border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 34% 32%, #eef0ee 0 12%, #b9bdbb 30%, #8c918f 62%, #61666a 100%); }
body.s-ambacht-d .citaat p { font: italic 400 clamp(25px, 2.6vw, 36px)/1.3 "LS Vollkorn", serif; color: var(--inkt); margin: 0 0 12px; }
body.s-ambacht-d .citaat cite { font: 400 13px/1 "LS Federo", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--kobalt); font-style: normal; }
body.s-ambacht-d .citaat.klein { margin: 28px 0; }
body.s-ambacht-d .citaat.klein p { font-size: 23px; }
body.s-ambacht-d .kop-rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 40px; }
body.s-ambacht-d .kop-noot { font-size: 15.5px; color: var(--grijs); margin-bottom: 38px; }

/* Wat we doen: kolommen gescheiden door loodlijnen */
body.s-ambacht-d .red-diensten { background: var(--papier-2); }
body.s-ambacht-d .dk-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.s-ambacht-d .dk { position: relative; padding: 6px 28px 10px; border-left: 5px solid var(--lood); }
body.s-ambacht-d .dk::before { content: ""; position: absolute; left: -10px; top: -8px; width: 15px; height: 12px; border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 34% 32%, #eef0ee 0 12%, #b9bdbb 30%, #8c918f 62%, #61666a 100%); }
body.s-ambacht-d .dk:last-child { border-right: 5px solid var(--lood); }
body.s-ambacht-d .d-icoon { width: 62px; height: 62px; fill: none; stroke: var(--lood); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
body.s-ambacht-d .d-icoon .vul-a { fill: #e6a645; stroke: none; } body.s-ambacht-d .d-icoon .vul-r { fill: #ad2a40; stroke: none; } body.s-ambacht-d .d-icoon .vul-k { fill: #9fb6e0; stroke: none; }
body.s-ambacht-d .d-icoon .barst { stroke: var(--robijn); stroke-width: 1.8; }
body.s-ambacht-d .d-icoon .tin { fill: var(--tin); stroke: var(--lood); stroke-width: 1.2; }
body.s-ambacht-d .d-icoon .lucht { stroke: var(--kobalt); stroke-width: 1.8; stroke-dasharray: 2 3; }
body.s-ambacht-d .dk-nr { font: 400 13px/1 "LS Federo", serif; letter-spacing: .16em; color: var(--kobalt); margin-bottom: 8px; }
body.s-ambacht-d .dk h3 { font-size: 27px; line-height: 1.1; margin-bottom: 12px; }
body.s-ambacht-d .dk h3 a { color: var(--inkt); text-decoration: none; }
body.s-ambacht-d .dk h3 a:hover { color: var(--kobalt); }
body.s-ambacht-d .dk p { font-size: 16.5px; }
body.s-ambacht-d .dk-prijs { font-style: italic; color: var(--grijs); padding-top: 10px; border-top: 1px dotted var(--lood-3); }

/* Cartoon: half raam, half werktekening */
body.s-ambacht-d .ct-kop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(30px, 4.4vw, 70px); align-items: end; margin-bottom: 40px; }
body.s-ambacht-d .ct-kop .red-kop { margin: 0; }
body.s-ambacht-d .ct-tekst p:last-child { margin-bottom: 0; }
body.s-ambacht-d .ct-figuur { margin: 0; padding: clamp(14px, 3vw, 40px); max-width: 1180px; background: #fbf8f1; box-shadow: 0 1px 0 #d9d0bf, 0 26px 40px -30px rgba(60,40,10,.4);
  background-image: linear-gradient(rgba(35,64,142,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(35,64,142,.05) 1px, transparent 1px); background-size: 22px 22px; }
body.s-ambacht-d .zon-cartoon { width: 100%; height: auto; display: block; }
body.s-ambacht-d .zon-cartoon .raam .p { stroke-width: 6; }
body.s-ambacht-d .zon-cartoon .raam .kozijn { stroke-width: 7; }
body.s-ambacht-d .zon-cartoon .c { fill: transparent; stroke: var(--potlood); stroke-width: 1.3; transition: fill .3s; }
body.s-ambacht-d .zon-cartoon .nr { font: 400 10px "LS Federo", serif; fill: #4b4f54; text-anchor: middle; }
body.s-ambacht-d .zon-cartoon .lt { fill: var(--kobalt); font-family: "LS Vollkorn", serif; font-style: italic; font-size: 10px; }
body.s-ambacht-d .zon-cartoon .snijlijn { stroke: var(--robijn); stroke-width: 1.4; stroke-dasharray: 6 5; }
body.s-ambacht-d .ct-figuur figcaption { font-size: 14.5px; color: var(--grijs); margin-top: 14px; }
body.s-ambacht-d .ct-figuur figcaption span { font-style: italic; }
body.s-ambacht-d .legenda { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
body.s-ambacht-d .leg { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; font-size: 15px; cursor: default; background: rgba(255,255,255,.45); border: 1px solid rgba(39,42,46,.15); }
body.s-ambacht-d .leg i { width: 16px; height: 16px; outline: 3px solid var(--lood); outline-offset: -1px; }
body.s-ambacht-d .leg b { font: 400 15px/1 "LS Federo", serif; color: var(--kobalt); }
body.s-ambacht-d .leg-A i { background: var(--g-amber); } body.s-ambacht-d .leg-R i { background: var(--g-robijn); } body.s-ambacht-d .leg-K i { background: var(--g-kobalt); }
body.s-ambacht-d .leg-G i { background: var(--g-groen); } body.s-ambacht-d .leg-H i { background: var(--hamer), var(--g-helder); background-size: 6px 6px, 8px 8px, auto; } body.s-ambacht-d .leg-O i { background: var(--g-opaal); }
body.s-ambacht-d .leg:hover, body.s-ambacht-d .leg:focus { background: #fff; border-color: var(--lood); }
body.s-ambacht-d .red-cartoon:has(.leg-A:hover, .leg-A:focus) .c-A { fill: #e6a645; }
body.s-ambacht-d .red-cartoon:has(.leg-R:hover, .leg-R:focus) .c-R { fill: #ad2a40; }
body.s-ambacht-d .red-cartoon:has(.leg-K:hover, .leg-K:focus) .c-K { fill: #3456a8; }
body.s-ambacht-d .red-cartoon:has(.leg-G:hover, .leg-G:focus) .c-G { fill: #6c9a5e; }
body.s-ambacht-d .red-cartoon:has(.leg-H:hover, .leg-H:focus) .c-H { fill: #cfe0e6; }
body.s-ambacht-d .red-cartoon:has(.leg-O:hover, .leg-O:focus) .c-O { fill: #efe5cf; }

/* Werkboek op de homepage */
body.s-ambacht-d .red-werk { border-top: 1px solid rgba(39,42,46,.14); }
body.s-ambacht-d .werk-groot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 4vw, 64px); align-items: center; margin-bottom: 80px; }
body.s-ambacht-d .ruit.wg-foto, body.s-ambacht-d .ruit.wk-foto, body.s-ambacht-d .ruit.pr-foto, body.s-ambacht-d .ruit.ob-foto { border: 10px solid var(--lood); outline: 2px solid var(--lood-3); outline-offset: -12px; }
body.s-ambacht-d .ruit.wg-foto::before, body.s-ambacht-d .ruit.wk-foto::before, body.s-ambacht-d .ruit.pr-foto::before, body.s-ambacht-d .ruit.ob-foto::before { left: -12px; top: -11px; }
body.s-ambacht-d .ruit.wg-foto::after, body.s-ambacht-d .ruit.wk-foto::after, body.s-ambacht-d .ruit.pr-foto::after, body.s-ambacht-d .ruit.ob-foto::after { right: -12px; bottom: -11px; }
body.s-ambacht-d .wg-foto { aspect-ratio: 4 / 3; }
body.s-ambacht-d .wg-meta { font: 400 13px/1.3 "LS Federo", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--grijs); margin-bottom: 12px; }
body.s-ambacht-d .wg-tekst h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; margin-bottom: 18px; }
body.s-ambacht-d .wg-tekst h2 a, body.s-ambacht-d .wk h3 a { color: var(--inkt); text-decoration: none; }
body.s-ambacht-d .wg-tekst h2 a:hover, body.s-ambacht-d .wk h3 a:hover { color: var(--kobalt); }
body.s-ambacht-d .wg-citaat { font: italic 400 22px/1.35 "LS Vollkorn", serif; color: var(--kobalt); }
body.s-ambacht-d .fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 0; border-top: 3px solid var(--lood); }
body.s-ambacht-d .fiche div { padding: 12px 0; border-bottom: 1px solid rgba(39,42,46,.16); }
body.s-ambacht-d .fiche dt { font: 400 12px/1.3 "LS Federo", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--grijs); }
body.s-ambacht-d .fiche dd { margin: 4px 0 0; color: var(--inkt); font-size: 16.5px; }
body.s-ambacht-d .werk-klein { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); }
body.s-ambacht-d .wk-foto { aspect-ratio: 5 / 4; margin-bottom: 22px; }
body.s-ambacht-d .wk-1 .wk-foto { aspect-ratio: 3 / 4; }
body.s-ambacht-d .wk-2 { margin-top: 140px; }
body.s-ambacht-d .wk h3 { font-size: 30px; line-height: 1.08; margin-bottom: 10px; }

/* Workshops: de agenda ligt op de lichttafel */
body.s-ambacht-d .red-ws { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4.4vw, 72px); align-items: center;
  background: radial-gradient(80% 90% at 70% 60%, #3a3326 0%, transparent 70%), linear-gradient(180deg, #24272b, #1d2023); color: #ddd6ca; }
body.s-ambacht-d .red-ws .rubriek { color: #f3c77f; }
body.s-ambacht-d .red-ws .rubriek::before { background: linear-gradient(#6c737b, #4a5057); }
body.s-ambacht-d .red-ws .red-kop { color: #f6f1e8; }
body.s-ambacht-d .red-ws p { color: #d9d2c5; }
body.s-ambacht-d .red-ws .knop { border-color: #121416; margin-top: 8px; }
body.s-ambacht-d .ws-agenda { background: #fffdf6; color: var(--tekst); padding: 30px clamp(20px, 3vw, 38px) 22px; border: 10px solid #121416;
  box-shadow: 0 0 0 1px #4a5057, 0 0 70px 6px rgba(255,236,190,.28);
  background-image: linear-gradient(rgba(35,64,142,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(35,64,142,.06) 1px, transparent 1px); background-size: 26px 26px; }
body.s-ambacht-d .ws-agenda h3, body.s-ambacht-d .dienst-ws h3 { font-size: 24px; margin-bottom: 14px; }
body.s-ambacht-d .red-ws .ws-agenda p.noot { color: var(--grijs); font-size: 14.5px; margin: 16px 0 0; }
body.s-ambacht-d .ws-lijst { list-style: none; margin: 0; padding: 0; }
body.s-ambacht-d .ws-lijst li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(39,42,46,.16); }
body.s-ambacht-d .ws-lijst time { font: 400 18px/1.1 "LS Federo", serif; color: var(--inkt); }
body.s-ambacht-d .ws-lijst .wat { font-size: 16.5px; color: var(--inkt); line-height: 1.35; }
body.s-ambacht-d .ws-lijst .wat small { display: block; color: var(--grijs); font-size: 14px; }
body.s-ambacht-d .ws-lijst li.vol .wat, body.s-ambacht-d .ws-lijst li.vol time { color: #686c72; }
body.s-ambacht-d .plekken { display: grid; justify-items: end; gap: 4px; }
body.s-ambacht-d .vakjes { display: flex; gap: 4px; padding: 3px; background: var(--lood); }
body.s-ambacht-d .vakjes i { width: 15px; height: 15px; display: block; }
body.s-ambacht-d .vakjes .bezet { background: var(--g-amber); }
body.s-ambacht-d .vakjes .vrij { background: var(--hamer), var(--g-helder); background-size: 6px 6px, 8px 8px, auto; }
body.s-ambacht-d .plekken em { font-size: 13.5px; color: var(--grijs); white-space: nowrap; }

/* Slotband: een verlicht raam op lood */
body.s-ambacht-d .slot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 4.4vw, 70px); align-items: center;
  padding: clamp(60px, 7vw, 100px) var(--zij); background: linear-gradient(180deg, #2a2d31, #222528); color: #ddd6ca; }
body.s-ambacht-d .slot-raam { background: #15171a; padding: 10px; box-shadow: 0 0 80px 10px rgba(255,200,110,.18); }
body.s-ambacht-d .slot-kroon { margin-bottom: 8px; }
body.s-ambacht-d .slot-ruiten { display: grid; grid-template-columns: 1fr .6fr 1fr .6fr 1fr .6fr 1fr; gap: 8px; height: 120px; }
body.s-ambacht-d .slot-ruiten .glas { min-height: 0; animation: ls-gloed 7s ease-in-out infinite alternate; }
body.s-ambacht-d .slot-ruiten .glas:nth-child(2n) { animation-delay: -3s; }
@keyframes ls-gloed { from { filter: brightness(.9); } to { filter: brightness(1.12); } }
body.s-ambacht-d .slot h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; color: #f6f1e8; margin-bottom: 18px; }
body.s-ambacht-d .slot p { color: #d6cfc2; max-width: 34em; }
body.s-ambacht-d .slot .knop { border-color: #121416; }
body.s-ambacht-d .bellink { color: #f3c77f; font-family: "LS Federo", serif; font-size: 18px; letter-spacing: .02em; text-decoration: none; }
body.s-ambacht-d .bellink:hover { color: #fff; }

/* ── Subpagina's: paginakop met een klein raam ──────────────────── */
body.s-ambacht-d .paginakop { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 4vw, 64px); align-items: end; padding: 64px var(--zij) 56px; border-bottom: 1px solid rgba(39,42,46,.14); }
body.s-ambacht-d .paginakop h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; margin-bottom: 22px; max-width: 14ch; }
body.s-ambacht-d .paginakop .lead { font-size: 19px; color: var(--grijs); max-width: 34em; margin: 0; }
body.s-ambacht-d .mini-raam { background: linear-gradient(180deg, #2c3035, #24272b); padding: 10px; box-shadow: inset 0 0 0 2px #41474e, 0 30px 50px -36px rgba(40,30,20,.55); }
body.s-ambacht-d .mini-kroon { margin-bottom: var(--naad); }
body.s-ambacht-d .mini-ruiten { display: grid; gap: var(--naad); grid-template-columns: 5fr 1.6fr 4fr; grid-template-rows: 130px 130px; }
body.s-ambacht-d .mini-ruiten .mr-1 { grid-column: 1; grid-row: 1 / 3; }
body.s-ambacht-d .mini-ruiten > .glas:nth-of-type(1) { grid-column: 2; grid-row: 1; }
body.s-ambacht-d .mini-ruiten > .glas:nth-of-type(2) { grid-column: 2; grid-row: 2; }
body.s-ambacht-d .mini-ruiten .mr-2 { grid-column: 3; grid-row: 1 / 3; }
body.s-ambacht-d .inhoud { padding: 26px var(--zij); display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: baseline; background: var(--papier-2); }
body.s-ambacht-d .inhoud p { margin: 0; font: italic 400 15px/1 "LS Vollkorn", serif; color: var(--grijs); }
body.s-ambacht-d .inhoud ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; }
body.s-ambacht-d .inhoud a { font-size: 16.5px; color: var(--inkt); text-decoration: none; border-bottom: 1px dashed var(--lood-3); }
body.s-ambacht-d .inhoud a::after { content: " ↓"; color: var(--kobalt); }
body.s-ambacht-d .inhoud a b { font: 400 12px "LS Federo", serif; color: var(--kobalt); margin-right: 7px; letter-spacing: .1em; }

/* Diensten */
body.s-ambacht-d .dienst { padding: clamp(60px, 7vw, 100px) var(--zij); border-bottom: 1px solid rgba(39,42,46,.14); scroll-margin-top: 50px; }
body.s-ambacht-d .dienst:nth-child(2n) { background: #f7f3eb; }
body.s-ambacht-d .dienst-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: end; margin-bottom: 34px; max-width: 900px; }
body.s-ambacht-d .dienst-kop .d-icoon { grid-row: 1 / 3; margin: 0; width: 64px; height: 64px; }
body.s-ambacht-d .dienst-kop .dk-nr { margin: 0 0 6px; }
body.s-ambacht-d .dienst-kop h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1; grid-column: 2; }
body.s-ambacht-d .dienst-kort { grid-column: 1 / -1; font: italic 400 22px/1.4 "LS Vollkorn", serif; color: var(--kobalt); margin: 18px 0 0; }
body.s-ambacht-d .dienst-lijf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 4vw, 64px); }
body.s-ambacht-d .kol-smal { columns: 1; }
body.s-ambacht-d .punten { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
body.s-ambacht-d .punten li { display: flex; gap: 11px; align-items: baseline; font-size: 16.5px; color: var(--inkt); }
body.s-ambacht-d .punten li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--g-amber); outline: 3px solid var(--lood); outline-offset: -1px; }
body.s-ambacht-d .dienst-zij h3 { font-size: 22px; margin-bottom: 12px; }
body.s-ambacht-d .stappen { list-style: none; margin: 0; padding: 0; counter-reset: st; border-left: 5px solid var(--lood); }
body.s-ambacht-d .stappen li { counter-increment: st; position: relative; padding: 4px 0 12px 22px; font-size: 16.5px; }
body.s-ambacht-d .stappen li::before { content: counter(st); position: absolute; left: -15px; top: 4px; width: 25px; height: 25px; display: grid; place-items: center;
  font: 400 13px/1 "LS Federo", serif; color: var(--inkt); background: var(--hamer), var(--g-helder); background-size: 6px 6px, 8px 8px, auto; outline: 3px solid var(--lood); outline-offset: -1px; }
body.s-ambacht-d .prijstabel { width: 100%; max-width: 900px; margin-top: 44px; border-collapse: collapse; }
body.s-ambacht-d .prijstabel caption { text-align: left; font: 400 24px/1.2 "LS Federo", serif; color: var(--inkt); padding-bottom: 12px; border-bottom: 4px solid var(--lood); }
body.s-ambacht-d .prijstabel caption span { font: italic 400 15px "LS Vollkorn", serif; color: var(--grijs); margin-left: 10px; }
body.s-ambacht-d .prijstabel th, body.s-ambacht-d .prijstabel td { padding: 13px 0; border-bottom: 1px solid rgba(39,42,46,.16); vertical-align: baseline; }
body.s-ambacht-d .prijstabel th { text-align: left; font-weight: 400; color: var(--tekst); padding-right: 24px; font-size: 17px; }
body.s-ambacht-d .prijstabel td { text-align: right; font: 400 18px/1.3 "LS Federo", serif; color: var(--inkt); white-space: nowrap; }
body.s-ambacht-d .dienst-ws { max-width: 900px; margin-top: 40px; background: #fffdf6; padding: 24px 28px; border: 8px solid var(--lood); }
body.s-ambacht-d .dienst-act { margin: 34px 0 0; }
body.s-ambacht-d .doorsnede { margin: 40px 0 0; max-width: 720px; }
body.s-ambacht-d .doorsnede svg { width: 100%; height: auto; display: block; font-family: "LS Vollkorn", serif; }
body.s-ambacht-d .doorsnede text { font-size: 15px; fill: var(--inkt); font-family: "LS Federo", serif; }
body.s-ambacht-d .doorsnede .kl { font: italic 12px "LS Vollkorn", serif; fill: var(--grijs); }
body.s-ambacht-d .doorsnede .kz { fill: #b89466; }
body.s-ambacht-d .doorsnede .lood { stroke: var(--lood); stroke-width: 8; }
body.s-ambacht-d .doorsnede .glasl { stroke: #7fa8b6; stroke-width: 4; }
body.s-ambacht-d .doorsnede .vent { fill: none; stroke: var(--kobalt); stroke-width: 1.6; stroke-dasharray: 3 4; }
body.s-ambacht-d .doorsnede figcaption { font-size: 14.5px; color: var(--grijs); font-style: italic; margin-top: 6px; }

/* Glas uit onze rekken */
body.s-ambacht-d .red-glas { background: var(--papier-2); }
body.s-ambacht-d .glasrek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 34px; }
body.s-ambacht-d .glasrek li { display: grid; gap: 6px; font-size: 16px; }
body.s-ambacht-d .glasrek b { font: 400 23px/1.1 "LS Federo", serif; color: var(--inkt); margin-top: 12px; }
body.s-ambacht-d .staal { display: block; height: 130px; border: 7px solid var(--lood); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
body.s-ambacht-d .gs-antiek .staal { background: var(--belletjes), var(--strepen), radial-gradient(120% 100% at 30% 20%, #ffe8b8, #e7b25e 50%, #c48a35); background-size: 23px 29px, 19px 27px, auto, auto; }
body.s-ambacht-d .gs-kathedraal .staal { background: var(--hamer), linear-gradient(160deg, #eef5ef, #cfe0d4 60%, #b9cfc2); background-size: 10px 10px, 14px 14px, auto; }
body.s-ambacht-d .gs-ornament .staal { background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 12px), repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1.5px, transparent 1.5px 12px), linear-gradient(160deg, #f6f8f7, #dfe6e3); }
body.s-ambacht-d .gs-opaal .staal { background: radial-gradient(90% 90% at 40% 35%, #fffef9, #efe8da 60%, #ddd2be); }
body.s-ambacht-d .gs-overvang .staal { background: radial-gradient(circle at 50% 50%, #f7e9e9 0 22%, transparent 23%), radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255,255,255,.4) 31% 32%, transparent 33%), var(--g-robijn); }
body.s-ambacht-d .gs-glasbank .staal { background:
  linear-gradient(90deg, transparent 32%, var(--lood) 32% 34.5%, transparent 34.5% 66%, var(--lood) 66% 68.5%, transparent 68.5%),
  linear-gradient(180deg, transparent 47%, var(--lood) 47% 52%, transparent 52%),
  conic-gradient(from 90deg at 33% 50%, #c9a24a 0 25%, #6f8f5e 0 50%, #b8c9c4 0 75%, #8d2a38 0 100%); }

/* Projecten */
body.s-ambacht-d .project { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 4.4vw, 70px); align-items: start;
  padding: clamp(60px, 7vw, 100px) var(--zij); border-bottom: 1px solid rgba(39,42,46,.14); scroll-margin-top: 50px; }
body.s-ambacht-d .project.p-1 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: #f7f3eb; }
body.s-ambacht-d .project.p-1 .pr-beeld { order: 2; }
body.s-ambacht-d .pr-beeld { position: sticky; top: 50px; }
body.s-ambacht-d .pr-foto { aspect-ratio: 4 / 5; }
body.s-ambacht-d .p-0 .pr-foto { aspect-ratio: 1 / 1; }
body.s-ambacht-d .pr-nr { margin: 14px 0 0; font: italic 400 15px "LS Vollkorn", serif; color: var(--grijs); }
body.s-ambacht-d .pr-nr::before { content: "Werkboek nº "; }
body.s-ambacht-d .pr-tekst h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.03; margin-bottom: 16px; }
body.s-ambacht-d .pr-kort { font: italic 400 21px/1.4 "LS Vollkorn", serif; color: var(--kobalt); }
body.s-ambacht-d .meer { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--lood); max-width: 1000px; }
body.s-ambacht-d .meer li { display: grid; grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(39,42,46,.16); align-items: baseline; }
body.s-ambacht-d .meer time { font: 400 16px "LS Federo", serif; color: var(--kobalt); }
body.s-ambacht-d .meer b { font: 400 21px/1.2 "LS Federo", serif; color: var(--inkt); }
body.s-ambacht-d .meer span { color: var(--grijs); font-size: 16.5px; }

/* Over ons */
body.s-ambacht-d .red-verhaal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 clamp(30px, 4.4vw, 70px); align-items: start; }
body.s-ambacht-d .red-verhaal .kolommen { grid-column: 1; columns: 2 260px; }
body.s-ambacht-d .over-beeld { grid-column: 2; grid-row: 1 / 3; margin: 0; }
body.s-ambacht-d .ob-foto { aspect-ratio: 3 / 4; }
body.s-ambacht-d .over-beeld figcaption { font-style: italic; font-size: 14.5px; color: var(--grijs); margin-top: 12px; }
body.s-ambacht-d .red-verhaal .citaat { grid-column: 1; margin-left: 0; }
body.s-ambacht-d .red-team { background: var(--papier-2); }
body.s-ambacht-d .team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.s-ambacht-d .team li { padding: 4px 30px 8px; border-left: 5px solid var(--lood); position: relative; }
body.s-ambacht-d .team li:last-child { border-right: 5px solid var(--lood); }
body.s-ambacht-d .team h3 { font-size: 28px; margin-bottom: 4px; }
body.s-ambacht-d .team .rol { font: italic 400 16px "LS Vollkorn", serif; color: var(--kobalt); margin-bottom: 12px; }
body.s-ambacht-d .team p { font-size: 16.5px; }
body.s-ambacht-d .werkwijze { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; max-width: 1080px; }
body.s-ambacht-d .werkwijze li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid rgba(39,42,46,.16); }
body.s-ambacht-d .st-nr { width: 52px; height: 52px; display: grid; place-items: center; font: 400 24px/1 "LS Federo", serif; color: var(--inkt);
  background: var(--strepen), var(--g-amber); border: 5px solid var(--lood); }
body.s-ambacht-d .werkwijze li:nth-child(3n+2) .st-nr { background: var(--hamer), var(--g-helder); background-size: 8px 8px, 11px 11px, auto; }
body.s-ambacht-d .werkwijze li:nth-child(3n) .st-nr { background: var(--strepen), var(--g-kobalt); color: #fff; }
body.s-ambacht-d .werkwijze h3 { font-size: 23px; margin-bottom: 6px; }
body.s-ambacht-d .werkwijze p { font-size: 16.5px; margin: 0; }
body.s-ambacht-d .red-borg { background: #f7f3eb; }
body.s-ambacht-d .borg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; max-width: 1080px; }
body.s-ambacht-d .borg li { display: grid; gap: 6px; padding-top: 16px; border-top: 4px solid var(--lood); }
body.s-ambacht-d .borg b { font: 400 22px/1.15 "LS Federo", serif; color: var(--inkt); }
body.s-ambacht-d .borg span { font-size: 16.5px; }

/* Contact */
body.s-ambacht-d .red-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 4.4vw, 70px); align-items: start; }
body.s-ambacht-d .formulier { scroll-margin-top: 40px; }
body.s-ambacht-d .kz { border: 0; margin: 0 0 30px; padding: 0; }
body.s-ambacht-d .kz legend, body.s-ambacht-d .velden label > span { font: 400 13px/1.3 "LS Federo", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--grijs); margin-bottom: 8px; display: block; padding: 0; }
body.s-ambacht-d .kz-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; background: var(--lood); padding: 9px; }
body.s-ambacht-d .kz-ruit { position: relative; display: grid; cursor: pointer; }
body.s-ambacht-d .kz-ruit input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
body.s-ambacht-d .kz-glas { height: 74px; filter: saturate(.35) brightness(.78); transition: filter .25s; }
body.s-ambacht-d .kz-t { display: block; background: #fbf8f1; padding: 8px 10px; font: 400 16px/1.2 "LS Federo", serif; color: var(--inkt); text-align: center; }
body.s-ambacht-d .kz-ruit input:checked ~ .kz-glas { filter: none; box-shadow: 0 0 22px 2px rgba(255,200,110,.55); }
body.s-ambacht-d .kz-ruit input:checked ~ .kz-t { background: #fff; color: var(--kobalt); }
body.s-ambacht-d .kz-ruit input:focus-visible ~ .kz-t { outline: 3px solid var(--amber); }
body.s-ambacht-d .velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
body.s-ambacht-d .velden .breed { grid-column: 1 / -1; }
body.s-ambacht-d .velden input, body.s-ambacht-d .velden select, body.s-ambacht-d .velden textarea { width: 100%; font: 400 17px/1.4 "LS Vollkorn", serif; color: var(--inkt);
  background: #fbf8f1; border: 0; border-bottom: 3px solid var(--lood); padding: 11px 12px; border-radius: 0; }
body.s-ambacht-d .velden input[type=file] { border: 2px dashed var(--lood-3); padding: 18px 12px; }
body.s-ambacht-d .velden small { display: block; font-size: 14px; color: var(--grijs); margin-top: 6px; font-style: italic; }
body.s-ambacht-d .formnoot { font-size: 14.5px; color: var(--grijs); font-style: italic; margin: 24px 0 16px; }
body.s-ambacht-d .adres { background: #fbf8f1; padding: 30px; border: 9px solid var(--lood); position: relative; }
body.s-ambacht-d .adres h2 { font-size: 30px; margin-bottom: 14px; }
body.s-ambacht-d .adres h3 { font-size: 20px; margin: 24px 0 8px; }
body.s-ambacht-d .adres address { font-style: normal; font-size: 18px; line-height: 1.6; }
body.s-ambacht-d .tijden, body.s-ambacht-d .voet-tijden { list-style: none; margin: 0; padding: 0; }
body.s-ambacht-d .tijden li { display: grid; gap: 0; padding: 8px 0; border-bottom: 1px solid rgba(39,42,46,.14); font-size: 16.5px; color: var(--inkt); }
body.s-ambacht-d .tijden li span:first-child { font-size: 14px; color: var(--grijs); }
body.s-ambacht-d .route { font-size: 15.5px; color: var(--grijs); margin: 20px 0 0; }
body.s-ambacht-d .red-vragen { background: var(--papier-2); scroll-margin-top: 40px; }
body.s-ambacht-d .faq { max-width: 900px; border-top: 4px solid var(--lood); }
body.s-ambacht-d .faq details { border-bottom: 1px solid rgba(39,42,46,.18); }
body.s-ambacht-d .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 400 21px/1.3 "LS Federo", serif; color: var(--inkt); }
body.s-ambacht-d .faq summary::-webkit-details-marker { display: none; }
body.s-ambacht-d .faq summary::after { content: ""; width: 14px; height: 14px; flex: none; margin-top: 6px; background: var(--hamer), var(--g-helder); background-size: 6px 6px, 8px 8px, auto; outline: 3px solid var(--lood); outline-offset: -1px; transition: background .2s; }
body.s-ambacht-d .faq details[open] summary::after { background: var(--g-amber); box-shadow: 0 0 12px 2px rgba(255,190,90,.55); }
body.s-ambacht-d .faq details p { margin: 0 0 22px; max-width: 46em; }

/* ── Voet: het bovenlicht boven de deur ─────────────────────────── */
body.s-ambacht-d .voet { background: #1c1f22; color: #d8d1c5; }
body.s-ambacht-d .voet-kroon { padding: 44px var(--zij) 0; }
body.s-ambacht-d .voet-kroon .vk { background: #15171a; padding: 8px; box-shadow: 0 0 60px 4px rgba(255,200,110,.18); }
body.s-ambacht-d .voet-binnen { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding: 60px var(--zij) 46px; }
body.s-ambacht-d .voet-zin p { font: 400 clamp(30px, 3vw, 42px)/1.08 "LS Federo", serif; color: #f4ede1; margin: 0 0 14px; }
body.s-ambacht-d .voet-zin small { font-size: 14.5px; color: #b9b2a6; font-style: italic; }
body.s-ambacht-d .voet h2 { font: 400 13px/1.2 "LS Federo", serif; letter-spacing: .2em; text-transform: uppercase; color: #f3c77f; margin-bottom: 14px; }
body.s-ambacht-d .voet ul { list-style: none; margin: 0; padding: 0; }
body.s-ambacht-d .voet-pag li { margin-bottom: 6px; }
body.s-ambacht-d .voet a { color: #ece6db; text-decoration: none; }
body.s-ambacht-d .voet a:hover { color: #f3c77f; }
body.s-ambacht-d .voet address { font-style: normal; font-size: 16.5px; line-height: 1.7; }
body.s-ambacht-d .voet-tijden li { display: grid; gap: 0; margin-bottom: 9px; font-size: 15.5px; }
body.s-ambacht-d .voet-tijden li span:first-child { color: #b9b2a6; font-size: 14px; }
body.s-ambacht-d .voet-sgs { margin: 0; padding: 18px var(--zij) 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #a9a296; }
body.s-ambacht-d .voet-sgs a { color: #f3c77f; text-decoration: underline; }

/* ── Smaller ───────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  body.s-ambacht-d .dk-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  body.s-ambacht-d .dk:nth-child(2) { border-right: 5px solid var(--lood); }
  body.s-ambacht-d .glasrek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  body.s-ambacht-d { display: block; }
  body.s-ambacht-d .zb { position: relative; height: auto; padding: 14px 18px 20px; }
  body.s-ambacht-d .zb-binnen { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; }
  body.s-ambacht-d .logo { margin: 0; }
  body.s-ambacht-d .zon-logo { width: 46px; }
  body.s-ambacht-d .logo-t b { font-size: 25px; }
  body.s-ambacht-d .zb-knop { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border: 3px solid #121416;
    background: var(--hamer), var(--g-helder); background-size: 8px 8px, 11px 11px, auto; color: var(--inkt); font: 400 16px/1 "LS Federo", serif; letter-spacing: .06em; }
  body.s-ambacht-d .zb-streep { width: 16px; height: 2px; background: var(--inkt); box-shadow: 0 -5px 0 var(--inkt), 0 5px 0 var(--inkt); }
  body.s-ambacht-d .zb-toggle:focus-visible ~ .zb-binnen .zb-knop { outline: 3px solid var(--amber); }
  body.s-ambacht-d .zb-nav { display: none; flex-basis: 100%; padding-top: 18px; }
  body.s-ambacht-d .zb-toggle:checked ~ .zb-binnen .zb-nav { display: flex; }
  body.s-ambacht-d .zb-toggle:checked ~ .zb-binnen .zb-streep { background: transparent; box-shadow: none; position: relative; }
  body.s-ambacht-d .zb-toggle:checked ~ .zb-binnen .zb-streep::before, body.s-ambacht-d .zb-toggle:checked ~ .zb-binnen .zb-streep::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 2px; background: var(--inkt); transform: rotate(45deg); }
  body.s-ambacht-d .zb-toggle:checked ~ .zb-binnen .zb-streep::after { transform: rotate(-45deg); }
  body.s-ambacht-d .nav-i { font-size: 24px; padding: 13px 0 13px 14px; }
  body.s-ambacht-d .nav-i.actief::after { right: auto; left: -4px; width: 8px; top: 8px; bottom: 8px; box-shadow: 0 0 0 2px #15171a, 0 0 14px 3px rgba(255,186,84,.45); }
  body.s-ambacht-d .zijlicht { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 9px; border-width: 2px 0 0;
    background: repeating-linear-gradient(90deg, transparent 0 57px, #15171a 57px 60px), linear-gradient(90deg, #8c6a3a 0 12%, #6d7c78 12% 30%, #6f2a33 30% 38%, #6d7c78 38% 58%, #2f4378 58% 66%, #6d7c78 66% 84%, #4c6342 84% 100%); }
  body.s-ambacht-d .zb-onder { padding-top: 22px; }
  body.s-ambacht-d .ct-kop, body.s-ambacht-d .red-ws, body.s-ambacht-d .slot, body.s-ambacht-d .paginakop, body.s-ambacht-d .werk-groot, body.s-ambacht-d .red-contact, body.s-ambacht-d .dienst-lijf { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .project, body.s-ambacht-d .project.p-1 { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .project.p-1 .pr-beeld { order: 0; }
  body.s-ambacht-d .pr-beeld { position: static; }
  body.s-ambacht-d .red-verhaal { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .over-beeld { grid-column: 1; grid-row: auto; margin-top: 30px; max-width: 520px; }
  body.s-ambacht-d .voet-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-ambacht-d .voet-zin { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.s-ambacht-d { font-size: 17px; --naad: 7px; }
  body.s-ambacht-d .opening { padding-top: 24px; }
  body.s-ambacht-d .raam { padding: 9px; }
  body.s-ambacht-d .ruiten { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
  body.s-ambacht-d .tekstruit { grid-column: 1 / -1; grid-row: 1; padding: 26px 20px 28px; }
  body.s-ambacht-d .tekstruit h1 { font-size: clamp(42px, 13vw, 60px); }
  body.s-ambacht-d .tekstruit .lead { font-size: 16.5px; }
  body.s-ambacht-d .r-hero { grid-column: 1 / -1; grid-row: 2; min-height: 0; aspect-ratio: 4 / 3; }
  body.s-ambacht-d .r-p1 { grid-column: 1 / 4; grid-row: 3; min-height: 0; aspect-ratio: 3 / 4; }
  body.s-ambacht-d .r-p3 { grid-column: 4 / 7; grid-row: 3; aspect-ratio: 3 / 4; }
  body.s-ambacht-d .opening .ruiten > .g-A { grid-column: 1 / 3; grid-row: 4; height: 46px; }
  body.s-ambacht-d .opening .ruiten > .g-R { grid-column: 3 / 4; grid-row: 4; height: 46px; }
  body.s-ambacht-d .opening .ruiten > .g-K { grid-column: 4 / 7; grid-row: 4; height: 46px; }
  body.s-ambacht-d .r-over { grid-column: 1 / -1; grid-row: 5; min-height: 0; aspect-ratio: 16 / 9; }
  body.s-ambacht-d .ruit > .ph .ph-cap { font-size: 10px; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; }
  body.s-ambacht-d .ruit:not(.glas) > .code { display: none; }
  body.s-ambacht-d .onder-raam { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: -60px; }
  body.s-ambacht-d .dk-rij { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  body.s-ambacht-d .dk, body.s-ambacht-d .dk:nth-child(2), body.s-ambacht-d .dk:last-child { border: 0; border-top: 5px solid var(--lood); padding: 26px 0 22px; }
  body.s-ambacht-d .dk::before { left: -6px; top: -9px; }
  body.s-ambacht-d .werk-klein { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .wk-2 { margin-top: 0; }
  body.s-ambacht-d .ws-lijst li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  body.s-ambacht-d .ws-lijst time { grid-column: 1 / -1; }
  body.s-ambacht-d .mini-ruiten { grid-template-rows: 100px 100px; }
  body.s-ambacht-d .punten { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .prijstabel th, body.s-ambacht-d .prijstabel td { display: block; text-align: left; padding: 0; border: 0; }
  body.s-ambacht-d .prijstabel tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(39,42,46,.16); }
  body.s-ambacht-d .prijstabel td { white-space: normal; margin-top: 4px; color: var(--kobalt); }
  body.s-ambacht-d .glasrek { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .meer li { grid-template-columns: 56px minmax(0, 1fr); }
  body.s-ambacht-d .meer span { grid-column: 2; }
  body.s-ambacht-d .team { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .team li, body.s-ambacht-d .team li:last-child { border: 0; border-top: 5px solid var(--lood); padding: 22px 0 10px; }
  body.s-ambacht-d .werkwijze, body.s-ambacht-d .borg { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .kz-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-ambacht-d .velden { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .fiche { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .voet-binnen { grid-template-columns: minmax(0, 1fr); }
  body.s-ambacht-d .slot-ruiten { height: 80px; }
  body.s-ambacht-d .kolommen { column-rule: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.s-ambacht-d .lichtval i, body.s-ambacht-d .slot-ruiten .glas { animation: none; }
  body.s-ambacht-d .knop { transition: none; }
}