/* Tuinontwerp Groen Genoegen (hovenier a) · "het ontwerpboek"
   N5 kop transparant over de foto · H11 tijdschrift-asymmetrie · R8 galerij
   Petrona (OFL, Ringo R. Seeber) + Rethink Sans (OFL, Hans Thiessen) */
@font-face { font-family: "GG Petrona"; font-weight: 100 900; font-display: swap; src: url("../../fonts/Petrona-Variable.woff2") format("woff2"); }
@font-face { font-family: "GG Petrona"; font-weight: 100 900; font-style: italic; font-display: swap; src: url("../../fonts/Petrona-VariableItalic.woff2") format("woff2"); }
@font-face { font-family: "GG Rethink"; font-weight: 400 800; font-display: swap; src: url("../../fonts/RethinkSans-Variable.woff2") format("woff2"); }

body.s-hovenier-a {
  --papier: #f2efe7; --papier2: #e7e2d4; --kalk: #f8f6f0;
  --taxus: #1f2b20; --taxus2: #2c3b2c; --inkt: #1f241e; --tekst2: #4b5148;
  --beuk: #8a4b28; --beuk-licht: #dcaa7f; --salie: #a9b49a; --lijn: rgba(31, 43, 32, .16);
  --a: #44573f; --a2: #b9875a; --bg2: #56614f;
  --rand: clamp(16px, 5vw, 72px);
  --serif: "GG Petrona", Georgia, serif; --sans: "GG Rethink", "Helvetica Neue", Arial, sans-serif;
  background: var(--papier); color: var(--inkt);
  font: 400 17px/1.65 var(--sans);
  overflow-x: clip;
}
body.s-hovenier-a a { color: inherit; }
body.s-hovenier-a h1, body.s-hovenier-a h2, body.s-hovenier-a h3 { font-family: var(--serif); font-weight: 300; margin: 0; letter-spacing: -.01em; }
body.s-hovenier-a h2 { font-size: clamp(36px, 4.8vw, 74px); line-height: 1; }
body.s-hovenier-a h2 em, body.s-hovenier-a h1 em { font-style: italic; color: var(--beuk); }
body.s-hovenier-a p { margin: 0 0 1em; }
body.s-hovenier-a .gg-img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
body.s-hovenier-a .ph.gg-img { border-radius: 0; display: grid; }
body.s-hovenier-a .gg-hero-foto .ph-cap, body.s-hovenier-a .gg-pk-foto .ph-cap { top: 130px; bottom: auto; }
body.s-hovenier-a .gg-lead { font-size: 20px; line-height: 1.55; color: var(--tekst2); max-width: 46ch; }
body.s-hovenier-a .gg-klein { font-size: 14px; color: var(--tekst2); }
body.s-hovenier-a .gg-sec { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--rand) 0; }

/* verticale tekst (Latijnse plantnamen langs de foto's) */
body.s-hovenier-a .gg-vert { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font: italic 400 15px/1 var(--serif); color: var(--tekst2); letter-spacing: .02em; white-space: nowrap; }

/* plantlabel zoals in een beplantingsplan */
body.s-hovenier-a .gg-label { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--taxus2); }
body.s-hovenier-a .gg-label b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid currentColor; border-radius: 999px; font: 600 11.5px/1 var(--sans); letter-spacing: .02em; }
body.s-hovenier-a .gg-label i { font: italic 400 17px/1.2 var(--serif); }
body.s-hovenier-a .gg-bij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; font-size: 14px; color: var(--tekst2); }
body.s-hovenier-a .gg-lijn { display: inline-block; width: 34px; height: 1px; background: currentColor; opacity: .7; position: relative; }
body.s-hovenier-a .gg-bij .gg-lijn::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--beuk); }
body.s-hovenier-a .gg-bij-t { flex-basis: 100%; padding-left: 46px; font-size: 13.5px; }

/* knoppen: kwekerijsteker met punt */
body.s-hovenier-a .gg-steker { display: inline-flex; align-items: center; min-height: 52px; padding: 0 44px 0 24px; background: var(--taxus); color: var(--kalk);
  font: 600 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); transition: background .25s, padding .25s; }
body.s-hovenier-a .gg-steker span { position: relative; padding-left: 16px; }
body.s-hovenier-a .gg-steker span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--beuk-licht); }
body.s-hovenier-a .gg-steker:hover { background: var(--beuk); padding-right: 52px; }
body.s-hovenier-a .gg-steker-kop, body.s-hovenier-a .gg-steker-licht { background: var(--kalk); color: var(--taxus); }
body.s-hovenier-a .gg-steker-kop span::before, body.s-hovenier-a .gg-steker-licht span::before { background: var(--beuk); }
body.s-hovenier-a .gg-steker-kop:hover, body.s-hovenier-a .gg-steker-licht:hover { background: var(--beuk-licht); }
body.s-hovenier-a .gg-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--lijn); color: var(--taxus); }
body.s-hovenier-a .gg-link:hover { border-color: var(--beuk); color: var(--beuk); }
body.s-hovenier-a .gg-link-licht { color: var(--kalk); border-color: rgba(255, 255, 255, .3); }
body.s-hovenier-a .gg-pijl { width: 26px; height: 12px; flex: none; transition: transform .25s; }
body.s-hovenier-a a:hover .gg-pijl { transform: translateX(4px); }

/* ── Kop (transparant over de foto) ─────────────────────────────── */
body.s-hovenier-a .gg-kop { position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px clamp(16px, 3.2vw, 56px); color: var(--kalk); white-space: nowrap; }
body.s-hovenier-a .gg-merk { display: flex; align-items: center; gap: 14px; text-decoration: none; }
body.s-hovenier-a .gg-kruin { width: 46px; height: 46px; flex: none; }
body.s-hovenier-a .gg-woord { display: flex; flex-direction: column; font: 400 27px/1 var(--serif); letter-spacing: -.01em; }
body.s-hovenier-a .gg-woord small { font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-top: 7px; opacity: .85; }
body.s-hovenier-a .gg-kruin-mini { width: 17px; height: 17px; flex: none; }
body.s-hovenier-a .gg-nav { display: flex; align-items: center; gap: 22px; }
body.s-hovenier-a .gg-nav-lijst { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-nav-lijst a { font-size: 15px; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
body.s-hovenier-a .gg-nav-lijst a:hover { border-color: currentColor; }
body.s-hovenier-a .gg-nav-lijst a.is-actief { font-family: var(--serif); font-style: italic; font-size: 18px; font-weight: 400; border-color: currentColor; }
body.s-hovenier-a .gg-nav-site { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; text-decoration: none; padding: 6px 0 6px 20px; border-left: 1px solid rgba(255, 255, 255, .4); }
body.s-hovenier-a .gg-nav-site:hover, body.s-hovenier-a .gg-nav-site[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
body.s-hovenier-a .gg-nav-vink { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.s-hovenier-a .gg-nav-knop, body.s-hovenier-a .gg-nav-tel { display: none; }
body.s-hovenier-a .gg-kop-vel { position: relative; color: var(--taxus); background: var(--papier); border-bottom: 1px solid var(--lijn); }
body.s-hovenier-a .gg-kop-vel .gg-nav-site { border-color: var(--lijn); }
body.s-hovenier-a .gg-kop-vel .gg-steker-kop { background: var(--taxus); color: var(--kalk); }
body.s-hovenier-a .gg-kop-vel .gg-steker-kop span::before { background: var(--beuk-licht); }

/* scherm over foto's zodat lichte tekst leesbaar blijft */
body.s-hovenier-a .gg-pk-scherm { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 20, 13, .62) 0, rgba(14, 20, 13, 0) 32%), linear-gradient(to top, rgba(14, 20, 13, .5) 0, rgba(14, 20, 13, 0) 38%); }

/* ── Home: opening ─────────────────────────────────────────────── */
body.s-hovenier-a .gg-hero { --hh: max(560px, min(92vh, 980px)); position: relative; }
body.s-hovenier-a .gg-hero-foto { position: relative; height: var(--hh); }
body.s-hovenier-a .gg-hero-kop { position: relative; z-index: 3; margin: -0.97em 0 0; padding: 0 var(--rand); font: 300 clamp(50px, 8.2vw, 132px)/.94 var(--serif); letter-spacing: -.025em; pointer-events: none; }
body.s-hovenier-a .gg-hero-kop span { display: block; }
body.s-hovenier-a .gg-hero-r1 { color: var(--kalk); }
body.s-hovenier-a .gg-hero-r2 { color: var(--taxus); padding-left: 1.15em; }
body.s-hovenier-a .gg-hero-r2 em { display: block; padding-left: 1.6em; }
body.s-hovenier-a .gg-hero-inzet { position: absolute; z-index: 2; right: clamp(16px, 6vw, 100px); top: calc(var(--hh) - 250px); width: clamp(230px, 23vw, 350px); margin: 0; }
body.s-hovenier-a .gg-hero-inzet > .gg-img { aspect-ratio: 3 / 4; height: auto; box-shadow: 0 40px 70px -40px rgba(10, 16, 9, .55); }
body.s-hovenier-a .gg-hero-vert { position: absolute; z-index: 2; right: calc(var(--rand) / 2 - 6px); top: 170px; color: var(--kalk); font: 500 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; opacity: .9; }
body.s-hovenier-a .gg-hero-intro { position: relative; max-width: 500px; margin: 46px 0 0 calc(var(--rand) + 24%); font-size: 19px; color: var(--tekst2); }
body.s-hovenier-a .gg-hero-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 26px; }

/* ── Home: galerij van tuinen ──────────────────────────────────── */
body.s-hovenier-a .gg-tuinen { padding-top: clamp(110px, 13vw, 200px); }
body.s-hovenier-a .gg-tuinen-kop { display: grid; grid-template-columns: 7fr 4fr; gap: 24px 8%; align-items: end; margin-bottom: clamp(48px, 6vw, 90px); }
body.s-hovenier-a .gg-tuinen-kop p { color: var(--tekst2); margin: 0; max-width: 40ch; }
body.s-hovenier-a .gg-galerij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
body.s-hovenier-a .gg-gal { position: relative; margin: 0; }
body.s-hovenier-a .gg-gal-foto { display: block; overflow: hidden; }
body.s-hovenier-a .gg-gal-foto .gg-img { transition: transform .8s ease; }
body.s-hovenier-a .gg-gal-foto:hover .gg-img { transform: scale(1.025); }
body.s-hovenier-a .gg-g-a { grid-column: 1 / 8; }
body.s-hovenier-a .gg-g-a .gg-gal-foto { aspect-ratio: 4 / 3; }
body.s-hovenier-a .gg-g-b { grid-column: 9 / 13; margin-top: 200px; }
body.s-hovenier-a .gg-g-b .gg-gal-foto { aspect-ratio: 3 / 4; }
body.s-hovenier-a .gg-g-c { grid-column: 2 / 9; margin-top: -40px; }
body.s-hovenier-a .gg-g-c .gg-gal-foto { aspect-ratio: 16 / 9; }
body.s-hovenier-a .gg-gal figcaption { display: grid; gap: 6px; margin-top: 20px; max-width: 520px; }
body.s-hovenier-a .gg-gal-nr { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--beuk); }
body.s-hovenier-a .gg-gal-titel { font: 300 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); text-decoration: none; }
body.s-hovenier-a .gg-gal-titel:hover { color: var(--beuk); }
body.s-hovenier-a .gg-gal-c { color: var(--tekst2); font-size: 15.5px; margin-bottom: 8px; }
body.s-hovenier-a .gg-gal .gg-vert { position: absolute; top: 0; left: -34px; }
body.s-hovenier-a .gg-g-b .gg-vert { left: auto; right: -34px; }
body.s-hovenier-a .gg-tuinen-meer { margin: 70px 0 0; text-align: right; }

/* ── Home: diensten als index ──────────────────────────────────── */
body.s-hovenier-a .gg-diensten-home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-dh-tekst { grid-column: 1 / 8; }
body.s-hovenier-a .gg-dh-tekst .gg-lead { margin: 30px 0 46px; }
body.s-hovenier-a .gg-dh-foto { grid-column: 9 / 13; margin: 150px 0 0; }
body.s-hovenier-a .gg-dh-foto > .gg-img { aspect-ratio: 3 / 4; height: auto; }
body.s-hovenier-a .gg-dienstlijst { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lijn); }
body.s-hovenier-a .gg-dienstlijst li { border-top: 1px solid var(--lijn); }
body.s-hovenier-a .gg-dienstlijst a { display: grid; grid-template-columns: 54px 1fr auto 30px; column-gap: 18px; align-items: center; padding: 26px 10px 24px 0; text-decoration: none; transition: background .3s, padding .3s; }
body.s-hovenier-a .gg-dienstlijst a:hover { background: var(--papier2); padding-left: 14px; }
body.s-hovenier-a .gg-d-nr { font: italic 400 22px/1 var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-dienstlijst .gg-d-nr { grid-row: 1 / 3; align-self: start; padding-top: 8px; }
body.s-hovenier-a .gg-d-naam { font: 300 clamp(28px, 2.7vw, 40px)/1.05 var(--serif); }
body.s-hovenier-a .gg-d-kort { grid-column: 2; color: var(--tekst2); font-size: 15.5px; margin-top: 6px; }
body.s-hovenier-a .gg-d-prijs { grid-column: 3; grid-row: 1 / 3; text-align: right; font: 400 22px/1.1 var(--serif); white-space: nowrap; }
body.s-hovenier-a .gg-d-prijs small { display: block; font: 400 12px/1.3 var(--sans); color: var(--tekst2); white-space: normal; max-width: 170px; margin-left: auto; margin-top: 4px; }
body.s-hovenier-a .gg-dienstlijst .gg-pijl { grid-column: 4; grid-row: 1 / 3; color: var(--beuk); }

/* ── Ontwerptekening ───────────────────────────────────────────── */
body.s-hovenier-a .gg-plan-home-kop { display: grid; grid-template-columns: 5fr 6fr; gap: 24px 8%; align-items: end; margin-bottom: 60px; }
body.s-hovenier-a .gg-plan-home-kop p { color: var(--tekst2); margin: 0; max-width: 48ch; }
body.s-hovenier-a .gg-planblok { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: start; }
body.s-hovenier-a .gg-plan-vel { position: relative; background: var(--kalk); padding: clamp(10px, 1.6vw, 24px); box-shadow: 0 44px 80px -50px rgba(20, 30, 18, .55), 0 0 0 1px var(--lijn); transform: rotate(-.6deg); }
body.s-hovenier-a .gg-plan { display: block; width: 100%; height: auto; }
body.s-hovenier-a .gg-plan .pl-code { font: italic 400 23px var(--serif); fill: #1f2b1c; text-anchor: middle; }
body.s-hovenier-a .gg-plan .pl-nr circle { fill: var(--taxus); stroke: var(--kalk); stroke-width: 3; }
body.s-hovenier-a .gg-plan .pl-nr text { font: 600 20px var(--sans); fill: var(--kalk); text-anchor: middle; }
body.s-hovenier-a .gg-noord { position: absolute; right: -14px; top: -28px; display: grid; justify-items: center; gap: 2px; font: 600 12px/1 var(--sans); color: var(--taxus); background: var(--papier); padding: 8px 9px; border-radius: 999px; box-shadow: 0 0 0 1px var(--lijn); }
body.s-hovenier-a .gg-noord svg { width: 12px; height: 20px; }
body.s-hovenier-a .gg-plan-tekst h3 { font-size: 32px; line-height: 1.1; margin-bottom: 12px; }
body.s-hovenier-a .gg-plan-tekst p { color: var(--tekst2); }
body.s-hovenier-a .gg-legenda { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
body.s-hovenier-a .gg-legenda li { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; }
body.s-hovenier-a .gg-legenda b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--taxus); color: var(--kalk); font-size: 11px; transform: translateY(-1px); }

/* ── Bloeikalender (band) ──────────────────────────────────────── */
body.s-hovenier-a .gg-band { background: var(--taxus); color: #e7e4da; margin-top: clamp(90px, 11vw, 160px); }
body.s-hovenier-a .gg-band h2 em { color: var(--beuk-licht); }
body.s-hovenier-a .gg-band-in { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 9vw, 130px) var(--rand); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 6%; align-items: start; }
body.s-hovenier-a .gg-bloei-kop p { color: #c9cbbd; margin: 26px 0 30px; max-width: 40ch; }
body.s-hovenier-a .gg-bloei { --lijnb: rgba(255, 255, 255, .12); font-size: 14px; }
body.s-hovenier-a .gg-bloei-rij { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--lijnb); }
body.s-hovenier-a .gg-bloei-kop.gg-bloei-rij, body.s-hovenier-a .gg-bloei-rij.gg-bloei-kop { border-top: 0; padding-bottom: 6px; }
body.s-hovenier-a .gg-bloei-naam i { font: italic 400 17px/1.2 var(--serif); display: block; }
body.s-hovenier-a .gg-bloei-naam small { display: block; font-size: 12.5px; opacity: .72; margin-top: 2px; }
body.s-hovenier-a .gg-bloei-maanden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
body.s-hovenier-a .gg-bloei-kop .gg-bloei-maanden span { text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
body.s-hovenier-a .gg-bloei-baan { height: 24px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--lijnb) calc(100% / 12 - 1px), var(--lijnb) calc(100% / 12)); }
body.s-hovenier-a .gg-bloei-bar, body.s-hovenier-a .gg-bloei-winter { grid-row: 1; height: 14px; border-radius: 7px; margin: 0 2px; }
body.s-hovenier-a .gg-bloei-bar { background: var(--k); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
body.s-hovenier-a .gg-bloei-winter { background: repeating-linear-gradient(135deg, rgba(220, 200, 150, .8) 0 2px, transparent 2px 6px); border: 1px solid rgba(220, 200, 150, .45); }
body.s-hovenier-a .gg-bloei-sleutel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; font-size: 13px; opacity: .8; }
body.s-hovenier-a .gg-bloei-sleutel span { display: inline-block; width: 34px; height: 10px; border-radius: 5px; }
body.s-hovenier-a .k-bloei { background: linear-gradient(90deg, #6f7fc4, #c4677f, #b9a46a); }
body.s-hovenier-a .k-winter { background: repeating-linear-gradient(135deg, rgba(220, 200, 150, .8) 0 2px, transparent 2px 6px); border: 1px solid rgba(220, 200, 150, .45); margin-left: 12px; }
body.s-hovenier-a .gg-planner { --lijnb: var(--lijn); }
body.s-hovenier-a .gg-planner .gg-bloei-naam { font-weight: 600; }
body.s-hovenier-a .gg-planner .gg-bloei-naam small { font-weight: 400; font-style: italic; font-family: var(--serif); font-size: 14px; }
body.s-hovenier-a .gg-planner .gg-bloei-bar { box-shadow: none; }

/* ── Materialen ────────────────────────────────────────────────── */
body.s-hovenier-a .gg-mat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-mat-foto { grid-column: 1 / 7; margin: 0; }
body.s-hovenier-a .gg-mat-foto > .gg-img { aspect-ratio: 4 / 5; height: auto; }
body.s-hovenier-a .gg-mat-tekst { grid-column: 8 / 13; padding-top: 110px; }
body.s-hovenier-a .gg-mat-tekst > p { color: var(--tekst2); margin: 28px 0 36px; }
body.s-hovenier-a .gg-matlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
body.s-hovenier-a .gg-matlijst li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; }
body.s-hovenier-a .gg-matlijst .gg-arcering { grid-row: 1 / 3; width: 52px; height: 52px; }
body.s-hovenier-a .gg-matlijst b { font: 400 22px/1.2 var(--serif); }
body.s-hovenier-a .gg-matlijst span:last-child { color: var(--tekst2); font-size: 15px; }
body.s-hovenier-a .gg-arcering { display: block; box-shadow: inset 0 0 0 1px rgba(31, 43, 32, .25); }
body.s-hovenier-a .a-terras { background-color: #d9d6cd; background-image: linear-gradient(#a49d8d 1.5px, transparent 1.5px), linear-gradient(90deg, #a49d8d 1.5px, transparent 1.5px); background-size: 26px 26px; }
body.s-hovenier-a .a-hout { background-color: #c49a6c; background-image: repeating-linear-gradient(0deg, #94693f 0 1.5px, transparent 1.5px 9px); }
body.s-hovenier-a .a-grind { background-color: #e6dfcf; background-image: radial-gradient(#ab9c80 1.6px, transparent 1.8px), radial-gradient(#c3b597 1.2px, transparent 1.4px); background-size: 11px 11px, 7px 7px; background-position: 0 0, 4px 5px; }
body.s-hovenier-a .a-gazon { background-color: #d3dab9; background-image: linear-gradient(90deg, transparent 4px, #a3b184 4px 5.5px, transparent 5.5px), linear-gradient(90deg, transparent 12px, #a3b184 12px 13.5px, transparent 13.5px); background-size: 18px 9px, 18px 9px; background-position: 0 0, 0 5px; background-repeat: repeat; }

/* ── Stappen (home) ────────────────────────────────────────────── */
body.s-hovenier-a .gg-stappenrij { list-style: none; margin: 48px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
body.s-hovenier-a .gg-stappenrij li { border-top: 1px solid var(--taxus); padding-top: 18px; display: grid; gap: 6px; align-content: start; }
body.s-hovenier-a .gg-stappenrij b { font: italic 300 46px/1 var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-stappenrij span { font-weight: 600; }
body.s-hovenier-a .gg-stappenrij small { font: italic 400 15px/1.35 var(--serif); color: var(--tekst2); }

/* ── Slotband ──────────────────────────────────────────────────── */
body.s-hovenier-a .gg-slot { max-width: 1440px; margin: clamp(100px, 12vw, 170px) auto 0; padding: 0 var(--rand) clamp(110px, 12vw, 170px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
body.s-hovenier-a .gg-slot-foto { aspect-ratio: 4 / 5; max-height: 760px; width: 100%; }
body.s-hovenier-a .gg-slot-tekst { position: relative; z-index: 1; margin-left: -16%; background: var(--kalk); padding: clamp(32px, 4.5vw, 70px); box-shadow: 0 0 0 1px var(--lijn); }
body.s-hovenier-a .gg-slot-tekst h2 { font-size: clamp(34px, 3.8vw, 58px); margin-bottom: 24px; }
body.s-hovenier-a .gg-slot-tekst h2 em { display: block; }
body.s-hovenier-a .gg-slot-tekst p { color: var(--tekst2); max-width: 46ch; }
body.s-hovenier-a .gg-slot-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }

/* ── Paginakop subpagina's ─────────────────────────────────────── */
body.s-hovenier-a .gg-pk { position: relative; }
body.s-hovenier-a .gg-pk-foto { position: relative; height: max(470px, min(76vh, 840px)); }
body.s-hovenier-a .gg-pk-vert { position: absolute; z-index: 2; right: calc(var(--rand) / 2 - 4px); top: 180px; color: var(--kalk); font-size: 19px; }
body.s-hovenier-a .gg-pk-tekst { position: relative; z-index: 2; margin: -190px 0 0 clamp(0px, 8vw, 132px); width: min(900px, 100%); background: var(--papier); padding: 46px var(--rand) 0 clamp(16px, 4vw, 60px); }
body.s-hovenier-a .gg-pk-project .gg-pk-tekst { margin-left: auto; margin-right: clamp(0px, 6vw, 100px); }
body.s-hovenier-a .gg-pk-kicker { display: inline-flex; align-items: center; gap: 12px; font: italic 400 19px/1 var(--serif); color: var(--beuk); margin-bottom: 22px; }
body.s-hovenier-a .gg-pk-kicker::before { content: ""; width: 40px; height: 1px; background: currentColor; }
body.s-hovenier-a .gg-pk h1 { font-size: clamp(44px, 6.4vw, 100px); line-height: .96; letter-spacing: -.025em; }
body.s-hovenier-a .gg-pk h1 em { display: inline-block; padding-left: .9em; }
body.s-hovenier-a .gg-pk-intro { font-size: 19px; line-height: 1.6; color: var(--tekst2); max-width: 54ch; margin: 30px 0 0 18%; }

/* ── Diensten-overzicht ────────────────────────────────────────── */
body.s-hovenier-a .gg-dspread { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; margin-bottom: clamp(90px, 10vw, 150px); }
body.s-hovenier-a .gg-dspread-foto { grid-column: 1 / 8; display: block; aspect-ratio: 5 / 4; overflow: hidden; }
body.s-hovenier-a .gg-dspread-tekst { grid-column: 9 / 13; }
body.s-hovenier-a .gg-dspread > .gg-vert { position: absolute; left: -34px; top: 0; }
body.s-hovenier-a .gg-dspread-om .gg-dspread-foto { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 4 / 5; }
body.s-hovenier-a .gg-dspread-om .gg-dspread-tekst { grid-column: 1 / 5; grid-row: 1; }
body.s-hovenier-a .gg-dspread-om > .gg-vert { left: auto; right: -34px; }
body.s-hovenier-a .gg-dspread h2 { font-size: clamp(36px, 3.6vw, 56px); margin: 10px 0 16px; }
body.s-hovenier-a .gg-dspread h2 a { text-decoration: none; }
body.s-hovenier-a .gg-dspread .gg-lead { font-size: 18px; color: var(--inkt); }
body.s-hovenier-a .gg-dspread p { color: var(--tekst2); }
body.s-hovenier-a .gg-streep { list-style: none; margin: 18px 0 22px; padding: 0; }
body.s-hovenier-a .gg-streep li { position: relative; padding: 7px 0 7px 30px; border-top: 1px solid var(--lijn); font-size: 15.5px; }
body.s-hovenier-a .gg-streep li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: var(--beuk); }
body.s-hovenier-a .gg-dspread-prijs { font-size: 15px; }
body.s-hovenier-a .gg-dspread-prijs b { font: 400 21px var(--serif); color: var(--inkt); }
body.s-hovenier-a .gg-prijzen .gg-lead { margin: 24px 0 50px; }
body.s-hovenier-a .gg-prijsraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; }
body.s-hovenier-a .gg-prijsblok h3 { font-size: 30px; margin-bottom: 12px; }
body.s-hovenier-a .gg-prijsblok h3 a { text-decoration: none; }
body.s-hovenier-a .gg-prijslijst { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-prijslijst li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: 15.5px; }
body.s-hovenier-a .gg-prijslijst i { flex: 1; border-bottom: 1px dotted rgba(31, 43, 32, .35); transform: translateY(-4px); min-width: 16px; }
body.s-hovenier-a .gg-prijslijst b { font: 400 19px var(--serif); white-space: nowrap; }

/* ── Dienstpagina ──────────────────────────────────────────────── */
body.s-hovenier-a .gg-dienst-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-kolommen { grid-column: 1 / 8; }
body.s-hovenier-a .gg-kolommen .gg-lead { margin-top: 28px; max-width: 52ch; }
body.s-hovenier-a .gg-krijg { grid-column: 9 / 13; background: var(--papier2); padding: 36px 34px 30px; margin-top: 10px; }
body.s-hovenier-a .gg-krijg h3 { font: italic 400 24px/1 var(--serif); color: var(--beuk); margin-bottom: 16px; }
body.s-hovenier-a .gg-krijglijst { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-krijglijst li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--lijn); }
body.s-hovenier-a .gg-krijglijst .gg-lijn { width: 20px; color: var(--beuk); flex: none; }
body.s-hovenier-a .gg-fasen { list-style: none; margin: 48px 0 80px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
body.s-hovenier-a .gg-fasen li { border-top: 1px solid var(--taxus); padding-top: 20px; }
body.s-hovenier-a .gg-fasen b { font: italic 300 52px/1 var(--serif); color: var(--beuk); display: block; margin-bottom: 10px; }
body.s-hovenier-a .gg-fasen h3 { font-size: 27px; margin-bottom: 10px; }
body.s-hovenier-a .gg-fasen p { color: var(--tekst2); font-size: 16px; }
body.s-hovenier-a .gg-dicht { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 8%; align-items: start; }
body.s-hovenier-a .gg-dicht .gg-lead { margin-top: 24px; }
body.s-hovenier-a .gg-dichtlijst { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-dichtlijst li { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; padding: 18px 0; border-top: 1px solid var(--lijn); }
body.s-hovenier-a .gg-dichtlijst span { font: 300 26px/1.1 var(--serif); }
body.s-hovenier-a .gg-dichtlijst b { font-weight: 600; align-self: center; }
body.s-hovenier-a .gg-dichtlijst small { grid-column: 1 / 3; font: italic 400 15px var(--serif); color: var(--tekst2); }
body.s-hovenier-a .gg-matraster { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.s-hovenier-a .gg-matraster .gg-arcering { height: 150px; margin-bottom: 20px; }
body.s-hovenier-a .gg-matraster h3 { font-size: 27px; margin-bottom: 8px; }
body.s-hovenier-a .gg-matraster p { color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-matraster b { font: 400 18px var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-weeklijst { list-style: none; margin: 48px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.s-hovenier-a .gg-weeklijst li { border-top: 3px solid var(--taxus); padding: 18px 22px 0 0; position: relative; }
body.s-hovenier-a .gg-weeklijst li::before { content: ""; position: absolute; left: 0; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: var(--papier); border: 3px solid var(--taxus); }
body.s-hovenier-a .gg-weeklijst span { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--beuk); }
body.s-hovenier-a .gg-weeklijst h3 { font-size: 27px; margin: 6px 0 8px; }
body.s-hovenier-a .gg-weeklijst p { color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-seizoenen .gg-lead { margin-top: 24px; }
body.s-hovenier-a .gg-seizoenlijst { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.s-hovenier-a .gg-seizoenlijst li { border-top: 1px solid var(--taxus); padding-top: 18px; }
body.s-hovenier-a .gg-seizoen { display: block; font: italic 300 40px/1 var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-seizoenlijst h3 { font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 12px 0 10px; }
body.s-hovenier-a .gg-seizoenlijst p { color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-dienst-prijs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-dp-tekst { grid-column: 1 / 5; }
body.s-hovenier-a .gg-dp-tekst p { color: var(--tekst2); margin: 20px 0 28px; }
body.s-hovenier-a .gg-prijslijst-groot { grid-column: 6 / 13; }
body.s-hovenier-a .gg-prijslijst-groot li { font-size: 17px; padding: 16px 0; }
body.s-hovenier-a .gg-prijslijst-groot b { font-size: 22px; }
body.s-hovenier-a .gg-mini-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
body.s-hovenier-a .gg-mini { display: block; text-decoration: none; }
body.s-hovenier-a .gg-mini > .gg-img { aspect-ratio: 4 / 3; height: auto; }
body.s-hovenier-a .gg-mini:nth-child(2) { margin-top: 60px; }
body.s-hovenier-a .gg-mini > span { display: block; margin-top: 14px; font: 300 23px/1.2 var(--serif); }
body.s-hovenier-a .gg-mini:hover > span { color: var(--beuk); }
body.s-hovenier-a .gg-andere { padding-bottom: 20px; }
body.s-hovenier-a .gg-andere h2 { font-size: clamp(30px, 3vw, 44px); }
body.s-hovenier-a .gg-andere ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.s-hovenier-a .gg-andere a { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--taxus); font: 300 28px/1.1 var(--serif); text-decoration: none; }
body.s-hovenier-a .gg-andere a .gg-pijl { margin-left: auto; color: var(--beuk); }

/* ── Projecten ─────────────────────────────────────────────────── */
body.s-hovenier-a .gg-pt { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: clamp(100px, 11vw, 170px); }
body.s-hovenier-a .gg-pt-foto { display: block; overflow: hidden; }
body.s-hovenier-a .gg-pt-1 .gg-pt-foto { grid-column: 1 / 9; aspect-ratio: 3 / 2; }
body.s-hovenier-a .gg-pt-1 .gg-pt-tekst { grid-column: 9 / 13; }
body.s-hovenier-a .gg-pt-2 { align-items: center; }
body.s-hovenier-a .gg-pt-2 .gg-pt-foto { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 4 / 5; }
body.s-hovenier-a .gg-pt-2 .gg-pt-tekst { grid-column: 1 / 5; grid-row: 1; }
body.s-hovenier-a .gg-pt-3 .gg-pt-foto { grid-column: 1 / 13; aspect-ratio: 21 / 9; }
body.s-hovenier-a .gg-pt-3 .gg-pt-tekst { grid-column: 2 / 9; margin-top: -110px; position: relative; background: var(--papier); padding: 40px 48px 0 40px; }
body.s-hovenier-a .gg-pt h2 { font-size: clamp(32px, 3.4vw, 52px); margin: 10px 0 14px; }
body.s-hovenier-a .gg-pt h2 a { text-decoration: none; }
body.s-hovenier-a .gg-pt-tekst > p:not(.gg-gal-nr) { color: var(--tekst2); }
body.s-hovenier-a .gg-feiten { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 20px 0 22px; }
body.s-hovenier-a .gg-feiten dt { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); }
body.s-hovenier-a .gg-feiten dd { margin: 4px 0 0; font: 400 23px/1.1 var(--serif); }
body.s-hovenier-a .gg-labels { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 26px; }
body.s-hovenier-a .gg-strook { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 20px; }
body.s-hovenier-a .gg-strook figure { margin: 0; }
body.s-hovenier-a .gg-strook > figure > .gg-img { height: auto; }
body.s-hovenier-a .gg-strook-a { grid-column: 1 / 6; }
body.s-hovenier-a .gg-strook-a > .gg-img { aspect-ratio: 4 / 5; }
body.s-hovenier-a .gg-strook-b { grid-column: 7 / 13; margin-top: 160px !important; }
body.s-hovenier-a .gg-strook-b > .gg-img { aspect-ratio: 16 / 10; }
body.s-hovenier-a .gg-strook-c { grid-column: 3 / 9; margin-top: 70px !important; }
body.s-hovenier-a .gg-strook-c > .gg-img { aspect-ratio: 3 / 2; }

/* ── Projectpagina ─────────────────────────────────────────────── */
body.s-hovenier-a .gg-feiten-groot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--taxus); border-bottom: 1px solid var(--lijn); }
body.s-hovenier-a .gg-feiten-groot div { padding: 22px 20px 22px 0; }
body.s-hovenier-a .gg-feiten-groot div + div { padding-left: 20px; border-left: 1px solid var(--lijn); }
body.s-hovenier-a .gg-proj-feiten { padding-top: 80px; }
body.s-hovenier-a .gg-verhaal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: start; }
body.s-hovenier-a .gg-verhaal h2 { font-size: 34px; margin-bottom: 16px; font-style: italic; color: var(--beuk); }
body.s-hovenier-a .gg-verhaal p { color: var(--tekst2); font-size: 18px; }
body.s-hovenier-a .gg-verhaal-kol:nth-of-type(1) { grid-column: 1 / 6; grid-row: 1; }
body.s-hovenier-a .gg-verhaal-foto { grid-column: 7 / 13; grid-row: 1 / 3; margin: 0; }
body.s-hovenier-a .gg-verhaal-foto > .gg-img { aspect-ratio: 4 / 5; height: auto; }
body.s-hovenier-a .gg-verhaal-kol:nth-of-type(2) { grid-column: 2 / 7; grid-row: 2; }
body.s-hovenier-a .gg-verhaal-kol:nth-of-type(3) { grid-column: 1 / 6; grid-row: 3; }
body.s-hovenier-a .gg-pull { margin: 34px 0 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--beuk); font: italic 300 30px/1.25 var(--serif); color: var(--taxus2); }
body.s-hovenier-a .gg-proj-lijsten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-plantlijst { grid-column: 1 / 8; }
body.s-hovenier-a .gg-matstaat { grid-column: 9 / 13; }
body.s-hovenier-a .gg-proj-lijsten h2 { font-size: 40px; margin-bottom: 24px; }
body.s-hovenier-a .gg-plantlijst table { width: 100%; border-collapse: collapse; font-size: 15px; }
body.s-hovenier-a .gg-plantlijst th { text-align: left; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); font-weight: 600; padding: 0 10px 10px 0; border-bottom: 1px solid var(--taxus); }
body.s-hovenier-a .gg-plantlijst td { padding: 13px 10px 13px 0; border-bottom: 1px solid var(--lijn); vertical-align: baseline; }
body.s-hovenier-a .gg-plantlijst td:first-child { font: 400 20px var(--serif); color: var(--beuk); width: 64px; }
body.s-hovenier-a .gg-plantlijst td i { font: italic 400 18px var(--serif); }
body.s-hovenier-a .gg-matstaat ul { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-matstaat li { padding: 14px 0; border-top: 1px solid var(--lijn); color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-matstaat li span { display: block; font: 400 21px/1.2 var(--serif); color: var(--inkt); margin-bottom: 2px; }
body.s-hovenier-a .gg-proj-gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
body.s-hovenier-a .gg-proj-gal figure { margin: 0; }
body.s-hovenier-a .gg-proj-gal .gg-img { height: auto; }
body.s-hovenier-a .gg-pg-a { grid-column: 1 / 8; }
body.s-hovenier-a .gg-pg-a .gg-img { aspect-ratio: 4 / 3; }
body.s-hovenier-a .gg-pg-b { grid-column: 9 / 13; margin-top: 150px !important; }
body.s-hovenier-a .gg-pg-b .gg-img { aspect-ratio: 3 / 4; }
body.s-hovenier-a .gg-volgende { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
body.s-hovenier-a .gg-volgende a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding: 30px 0; border-top: 1px solid var(--taxus); text-decoration: none; }
body.s-hovenier-a .gg-volgende span { grid-column: 1; font: italic 400 18px var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-volgende b { grid-column: 1; font: 300 clamp(28px, 3vw, 44px)/1.05 var(--serif); }
body.s-hovenier-a .gg-volgende .gg-pijl { grid-column: 2; grid-row: 1 / 3; width: 40px; color: var(--beuk); }

/* ── Werkwijze ─────────────────────────────────────────────────── */
body.s-hovenier-a .gg-ww-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 70px; }
body.s-hovenier-a .gg-ww-stap { display: flex; gap: 28px; align-items: flex-start; grid-column: 1 / 7; }
body.s-hovenier-a .gg-ww-stap:nth-of-type(even) { grid-column: 6 / 12; }
body.s-hovenier-a .gg-ww-nr { font: 200 clamp(80px, 9vw, 130px)/.78 var(--serif); color: var(--beuk); flex: none; min-width: .7em; }
body.s-hovenier-a .gg-ww-stap h2 { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 12px; }
body.s-hovenier-a .gg-ww-stap p { color: var(--tekst2); font-size: 17.5px; margin-bottom: 10px; }
body.s-hovenier-a .gg-ww-stap small { font: italic 400 17px var(--serif); color: var(--taxus2); padding-left: 30px; position: relative; }
body.s-hovenier-a .gg-ww-stap small::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--beuk); }
body.s-hovenier-a .gg-ww-foto figure { margin: 0; }
body.s-hovenier-a .gg-ww-foto .gg-img { height: auto; }
body.s-hovenier-a .gg-ww-foto figcaption { margin-top: 12px; font: italic 400 16px var(--serif); color: var(--tekst2); }
body.s-hovenier-a .gg-ww-foto-1 { grid-column: 7 / 13; }
body.s-hovenier-a .gg-ww-foto-1 .gg-img { aspect-ratio: 3 / 2; }
body.s-hovenier-a .gg-ww-foto-3 { grid-column: 1 / 6; }
body.s-hovenier-a .gg-ww-foto-3 .gg-img { aspect-ratio: 4 / 5; }
body.s-hovenier-a .gg-ww-foto-5 { grid-column: 4 / 12; }
body.s-hovenier-a .gg-ww-foto-5 .gg-img { aspect-ratio: 21 / 9; }
body.s-hovenier-a .gg-planner-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 6%; align-items: start; }
body.s-hovenier-a .gg-planner-kop .gg-lead { margin-top: 24px; font-size: 18px; }

/* ── Vragen ────────────────────────────────────────────────────── */
body.s-hovenier-a .gg-vragen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 70px; align-items: start; }
body.s-hovenier-a .gg-vr-groep { grid-column: 1 / 9; }
body.s-hovenier-a .gg-vr-groep h2 { display: flex; align-items: baseline; gap: 18px; font-size: clamp(32px, 3.4vw, 50px); margin-bottom: 18px; }
body.s-hovenier-a .gg-vr-groep h2 span { font: italic 300 .7em/1 var(--serif); color: var(--beuk); }
body.s-hovenier-a .gg-vr-items details { border-top: 1px solid var(--lijn); }
body.s-hovenier-a .gg-vr-items details:last-child { border-bottom: 1px solid var(--lijn); }
body.s-hovenier-a .gg-vr-items summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font: 400 22px/1.3 var(--serif); }
body.s-hovenier-a .gg-vr-items summary::-webkit-details-marker { display: none; }
body.s-hovenier-a .gg-vr-items summary::after { content: ""; flex: none; width: 15px; height: 15px; background: linear-gradient(var(--beuk), var(--beuk)) center / 15px 1.5px no-repeat, linear-gradient(var(--beuk), var(--beuk)) center / 1.5px 15px no-repeat; transition: transform .3s; }
body.s-hovenier-a .gg-vr-items details[open] summary::after { transform: rotate(45deg); }
body.s-hovenier-a .gg-vr-items details p { color: var(--tekst2); max-width: 62ch; padding-bottom: 14px; }
body.s-hovenier-a .gg-vr-zij { grid-column: 10 / 13; grid-row: 1 / 4; position: sticky; top: 70px; background: var(--papier2); padding: 36px 32px; }
body.s-hovenier-a .gg-vr-zin { font: 300 34px/1.1 var(--serif); }
body.s-hovenier-a .gg-vr-zin em { color: var(--beuk); }
body.s-hovenier-a .gg-vr-zij p:not(.gg-vr-zin) { color: var(--tekst2); font-size: 15.5px; }

/* ── Over ons ──────────────────────────────────────────────────── */
body.s-hovenier-a .gg-over-verhaal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center; }
body.s-hovenier-a .gg-over-kol { grid-column: 1 / 6; font-size: 18px; color: var(--tekst2); }
body.s-hovenier-a .gg-over-kol:last-child { grid-column: 7 / 12; }
body.s-hovenier-a .gg-over-kol em { font-family: var(--serif); color: var(--beuk); font-size: 1.12em; }
body.s-hovenier-a .gg-initiaal::first-letter { float: left; font: 300 5.6em/.8 var(--serif); color: var(--beuk); margin: 6px 12px 0 0; }
body.s-hovenier-a .gg-pull-groot { grid-column: 7 / 13; grid-row: 1; font-size: clamp(30px, 3.2vw, 46px); }
body.s-hovenier-a .gg-pull cite { display: block; margin-top: 14px; font: normal 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); }
body.s-hovenier-a .gg-kwekerij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
body.s-hovenier-a .gg-kw-foto { min-height: 620px; }
body.s-hovenier-a .gg-kw-tekst { padding: clamp(60px, 7vw, 110px) var(--rand) clamp(60px, 7vw, 110px) clamp(32px, 6vw, 96px); align-self: center; }
body.s-hovenier-a .gg-kw-tekst p { color: #cfd1c3; margin: 22px 0 36px; max-width: 46ch; font-size: 18px; }
body.s-hovenier-a .gg-cijfers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.s-hovenier-a .gg-cijfers li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 14px; }
body.s-hovenier-a .gg-cijfers b { display: block; white-space: nowrap; font: 300 clamp(30px, 3vw, 46px)/1 var(--serif); color: var(--beuk-licht); }
body.s-hovenier-a .gg-cijfers span { font-size: 14px; color: #cfd1c3; }
body.s-hovenier-a .gg-team .gg-lead { margin-top: 20px; }
body.s-hovenier-a .gg-teamlijst { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 36px; }
body.s-hovenier-a .gg-teamlijst li { border-top: 1px solid var(--taxus); padding-top: 20px; }
body.s-hovenier-a .gg-teamlijst li:nth-child(3n+2) { margin-top: 50px; }
body.s-hovenier-a .gg-teamlijst h3 { font-size: 30px; }
body.s-hovenier-a .gg-rol { display: block; font: italic 400 17px var(--serif); color: var(--beuk); margin: 4px 0 12px; }
body.s-hovenier-a .gg-teamlijst p { color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-fav { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst2); }
body.s-hovenier-a .gg-fav i { font: italic 400 17px var(--serif); text-transform: none; letter-spacing: 0; color: var(--taxus2); margin-left: 6px; }
body.s-hovenier-a .gg-over-gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
body.s-hovenier-a .gg-over-gal figure { margin: 0; }
body.s-hovenier-a .gg-over-gal > figure > .gg-img { height: auto; }
body.s-hovenier-a .gg-og-a { grid-column: 1 / 9; }
body.s-hovenier-a .gg-og-a > .gg-img { aspect-ratio: 16 / 10; }
body.s-hovenier-a .gg-og-b { grid-column: 9 / 13; margin-top: 220px !important; }
body.s-hovenier-a .gg-og-b > .gg-img { aspect-ratio: 3 / 4; }

/* ── Contact ───────────────────────────────────────────────────── */
body.s-hovenier-a .gg-contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-hovenier-a .gg-form { grid-column: 1 / 8; scroll-margin-top: 60px; }
body.s-hovenier-a .gg-form h2 { margin-bottom: 14px; }
body.s-hovenier-a .gg-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin: 36px 0 34px; }
body.s-hovenier-a .gg-velden label, body.s-hovenier-a .gg-velden legend { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--taxus2); }
body.s-hovenier-a .gg-velden label { display: grid; gap: 6px; }
body.s-hovenier-a .gg-vol { grid-column: 1 / 3; }
body.s-hovenier-a .gg-velden input, body.s-hovenier-a .gg-velden select, body.s-hovenier-a .gg-velden textarea { width: 100%; font: 400 17px/1.4 var(--sans); color: var(--inkt); background: transparent; border: 0; border-bottom: 1px solid var(--taxus); padding: 10px 0; border-radius: 0; }
body.s-hovenier-a .gg-velden textarea { border: 1px solid var(--taxus); padding: 14px; resize: vertical; }
body.s-hovenier-a .gg-velden input:focus, body.s-hovenier-a .gg-velden select:focus, body.s-hovenier-a .gg-velden textarea:focus { outline: 2px solid var(--beuk); outline-offset: 3px; }
body.s-hovenier-a .gg-velden fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
body.s-hovenier-a .gg-keuzes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.s-hovenier-a .gg-keuze { position: relative; display: inline-block !important; }
body.s-hovenier-a .gg-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.s-hovenier-a .gg-keuze span { display: inline-block; padding: 11px 20px; border: 1px solid var(--taxus); border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: 0; color: var(--taxus); cursor: pointer; transition: background .2s; }
body.s-hovenier-a .gg-keuze input:checked + span { background: var(--taxus); color: var(--kalk); }
body.s-hovenier-a .gg-keuze input:focus-visible + span { outline: 2px solid var(--beuk); outline-offset: 3px; }
body.s-hovenier-a .gg-noot { margin-top: 16px; font: italic 400 15px var(--serif); color: var(--tekst2); }
body.s-hovenier-a .gg-contact-zij { grid-column: 9 / 13; display: grid; gap: 34px; padding-top: 10px; }
body.s-hovenier-a .gg-cz-blok h3 { font: italic 400 22px var(--serif); color: var(--beuk); margin-bottom: 10px; }
body.s-hovenier-a .gg-cz-blok p { color: var(--tekst2); }
body.s-hovenier-a .gg-cz-blok a { text-decoration: none; }
body.s-hovenier-a .gg-groot { font: 300 36px/1.1 var(--serif); color: var(--inkt); }
body.s-hovenier-a .gg-tijdlijst { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-tijdlijst li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 15px; }
body.s-hovenier-a .gg-na { margin: 0; padding-left: 20px; color: var(--tekst2); font-size: 15.5px; }
body.s-hovenier-a .gg-na li { padding: 4px 0; }
body.s-hovenier-a .gg-contact-gal figure { margin: 0; }
body.s-hovenier-a .gg-contact-gal figure > .gg-img { aspect-ratio: 21 / 9; height: auto; }
body.s-hovenier-a .gg-contact-gal { padding-bottom: 120px; }

/* ── Voet ──────────────────────────────────────────────────────── */
body.s-hovenier-a .gg-voet { background: linear-gradient(to bottom, transparent 40px, var(--taxus) 40px); color: #e2dfd4; }
body.s-hovenier-a .gg-haag { display: block; width: 100%; height: 64px; fill: var(--taxus); stroke: #314131; stroke-width: 1; }
body.s-hovenier-a .gg-voet-in { max-width: 1440px; margin: 0 auto; padding: 70px var(--rand) 60px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
body.s-hovenier-a .gg-voet-zin { font: 300 clamp(54px, 6vw, 92px)/.92 var(--serif); letter-spacing: -.02em; margin-bottom: 26px; color: var(--kalk); }
body.s-hovenier-a .gg-voet-zin em { color: var(--beuk-licht); padding-left: .8em; }
body.s-hovenier-a .gg-voet-sub { color: #c7c9bb; max-width: 36ch; margin-bottom: 26px; }
body.s-hovenier-a .gg-voet h4 { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--salie); margin: 10px 0 18px; }
body.s-hovenier-a .gg-voet ul { list-style: none; margin: 0; padding: 0; }
body.s-hovenier-a .gg-voet-kol li { padding: 4px 0; }
body.s-hovenier-a .gg-voet-kol a { text-decoration: none; font-size: 15.5px; }
body.s-hovenier-a .gg-voet-kol a:hover { color: var(--beuk-licht); }
body.s-hovenier-a .gg-voet-adres p { font-size: 15.5px; color: #d6d4c8; }
body.s-hovenier-a .gg-tijden li { display: grid; gap: 0; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
body.s-hovenier-a .gg-tijden li span:first-child { color: #b9bcad; font-size: 13px; }
body.s-hovenier-a .gg-voet-onder { max-width: 1440px; margin: 0 auto; padding: 22px var(--rand) 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: #b9bcad; }
body.s-hovenier-a .gg-voet-onder span { display: inline-flex; align-items: center; gap: 10px; }
body.s-hovenier-a .gg-voet-onder a { color: var(--beuk-licht); }
body.s-hovenier-a .gg-voet .gg-kruin-mini { color: var(--salie); }

/* over-deze-website: geen foto bovenaan, kop staat op papier */
body.s-hovenier-a .ods-wrap { padding-bottom: 80px; }

/* ── Smallere schermen ─────────────────────────────────────────── */
@media (max-width: 1240px) {
  body.s-hovenier-a .gg-nav-knop { display: inline-flex; align-items: center; gap: 12px; position: relative; z-index: 31; cursor: pointer; font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; border: 1px solid currentColor; border-radius: 999px; }
  body.s-hovenier-a .gg-nav-streep { width: 18px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  body.s-hovenier-a .gg-nav { display: none; position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px; padding: 110px var(--rand) 40px; background: var(--taxus); color: var(--kalk); overflow-y: auto; }
  body.s-hovenier-a .gg-nav-vink:checked ~ .gg-nav { display: flex; }
  body.s-hovenier-a .gg-nav-vink:checked ~ .gg-nav-knop { color: var(--kalk); }
  body.s-hovenier-a .gg-nav-lijst { flex-direction: column; gap: 4px; }
  body.s-hovenier-a .gg-nav-lijst a { font: 300 clamp(34px, 7vw, 54px)/1.15 var(--serif); border: 0; }
  body.s-hovenier-a .gg-nav-lijst a.is-actief { font-size: clamp(34px, 7vw, 54px); color: var(--beuk-licht); }
  body.s-hovenier-a .gg-nav-site { border: 0; padding-left: 0; font-size: 16px; }
  body.s-hovenier-a .gg-nav-tel { display: block; margin: 0; color: #c9cbbd; }
  body.s-hovenier-a .gg-nav-tel a { color: var(--kalk); }
  body.s-hovenier-a .gg-kop-vel .gg-nav-vink:checked ~ .gg-nav-knop { color: var(--kalk); }
}
@media (max-width: 980px) {
  body.s-hovenier-a .gg-vert { display: none; }
  body.s-hovenier-a .gg-tuinen-kop, body.s-hovenier-a .gg-plan-home-kop, body.s-hovenier-a .gg-planblok, body.s-hovenier-a .gg-band-in,
  body.s-hovenier-a .gg-planner-sec, body.s-hovenier-a .gg-dicht, body.s-hovenier-a .gg-kwekerij { grid-template-columns: minmax(0, 1fr); }
  body.s-hovenier-a .gg-galerij, body.s-hovenier-a .gg-diensten-home, body.s-hovenier-a .gg-mat, body.s-hovenier-a .gg-dspread, body.s-hovenier-a .gg-pt,
  body.s-hovenier-a .gg-dienst-intro, body.s-hovenier-a .gg-dienst-prijs, body.s-hovenier-a .gg-verhaal, body.s-hovenier-a .gg-proj-lijsten,
  body.s-hovenier-a .gg-ww-lijst, body.s-hovenier-a .gg-vragen, body.s-hovenier-a .gg-over-verhaal, body.s-hovenier-a .gg-contact,
  body.s-hovenier-a .gg-strook, body.s-hovenier-a .gg-proj-gal, body.s-hovenier-a .gg-over-gal { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  body.s-hovenier-a .gg-galerij > *, body.s-hovenier-a .gg-diensten-home > *, body.s-hovenier-a .gg-mat > *, body.s-hovenier-a .gg-dspread > *, body.s-hovenier-a .gg-pt > *,
  body.s-hovenier-a .gg-dienst-intro > *, body.s-hovenier-a .gg-dienst-prijs > *, body.s-hovenier-a .gg-verhaal > *, body.s-hovenier-a .gg-proj-lijsten > *,
  body.s-hovenier-a .gg-ww-lijst > *, body.s-hovenier-a .gg-vragen > *, body.s-hovenier-a .gg-over-verhaal > *, body.s-hovenier-a .gg-contact > *,
  body.s-hovenier-a .gg-strook > *, body.s-hovenier-a .gg-proj-gal > *, body.s-hovenier-a .gg-over-gal > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
  body.s-hovenier-a .gg-g-b { width: 72%; margin-left: auto !important; }
  body.s-hovenier-a .gg-g-c { width: 88%; }
  body.s-hovenier-a .gg-dh-foto, body.s-hovenier-a .gg-strook-b, body.s-hovenier-a .gg-pg-b, body.s-hovenier-a .gg-og-b { width: 74%; margin-left: auto !important; }
  body.s-hovenier-a .gg-mat-tekst { padding-top: 0; }
  body.s-hovenier-a .gg-pt-3 .gg-pt-tekst { padding: 0; background: none; }
  body.s-hovenier-a .gg-stappenrij, body.s-hovenier-a .gg-fasen, body.s-hovenier-a .gg-matraster, body.s-hovenier-a .gg-weeklijst, body.s-hovenier-a .gg-seizoenlijst,
  body.s-hovenier-a .gg-teamlijst, body.s-hovenier-a .gg-mini-rij, body.s-hovenier-a .gg-andere ul, body.s-hovenier-a .gg-prijsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-hovenier-a .gg-teamlijst li:nth-child(3n+2), body.s-hovenier-a .gg-mini:nth-child(2) { margin-top: 0; }
  body.s-hovenier-a .gg-feiten-groot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.s-hovenier-a .gg-feiten-groot div:nth-child(4) { border-left: 0; padding-left: 0; }
  body.s-hovenier-a .gg-slot { grid-template-columns: minmax(0, 1fr); }
  body.s-hovenier-a .gg-slot-foto { aspect-ratio: 4 / 3; }
  body.s-hovenier-a .gg-slot-tekst { margin: -70px 0 0 6%; }
  body.s-hovenier-a .gg-vr-zij { position: static; }
  body.s-hovenier-a .gg-kw-foto { min-height: 420px; }
  body.s-hovenier-a .gg-voet-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-hovenier-a .gg-voet-groot { grid-column: 1 / -1; }
  body.s-hovenier-a .gg-plan-vel { transform: none; }
}
@media (max-width: 640px) {
  body.s-hovenier-a { font-size: 16.5px; }
  body.s-hovenier-a .gg-kop { padding-top: 18px; padding-bottom: 18px; }
  body.s-hovenier-a .gg-kruin { width: 36px; height: 36px; }
  body.s-hovenier-a .gg-woord { font-size: 21px; }
  body.s-hovenier-a .gg-woord small { font-size: 9px; letter-spacing: .14em; }
  body.s-hovenier-a .gg-nav-knop { padding: 10px 14px; }
  body.s-hovenier-a .gg-nav-tekst { font-size: 12px; }
  body.s-hovenier-a .gg-hero { --hh: max(520px, 80vh); }
  body.s-hovenier-a .gg-hero-kop { font-size: clamp(40px, 11.6vw, 60px); }
  body.s-hovenier-a .gg-hero-r2 { padding-left: .6em; }
  body.s-hovenier-a .gg-hero-r2 em { padding-left: .9em; }
  body.s-hovenier-a .gg-hero-inzet { position: relative; top: auto; right: auto; width: 58%; margin: 28px var(--rand) 0 auto; }
  body.s-hovenier-a .gg-hero-intro { margin: 30px var(--rand) 0; font-size: 17.5px; }
  body.s-hovenier-a .gg-pk-tekst { margin: -110px 0 0 0; padding: 30px var(--rand) 0; }
  body.s-hovenier-a .gg-pk-project .gg-pk-tekst { margin-right: 0; }
  body.s-hovenier-a .gg-pk h1 em { padding-left: .5em; }
  body.s-hovenier-a .gg-pk-intro { margin-left: 0; font-size: 17.5px; }
  body.s-hovenier-a .gg-lead { font-size: 18px; }
  body.s-hovenier-a .gg-dienstlijst a { grid-template-columns: 36px 1fr; row-gap: 4px; }
  body.s-hovenier-a .gg-d-prijs { grid-column: 2; grid-row: auto; text-align: left; margin-top: 10px; }
  body.s-hovenier-a .gg-d-prijs small { margin-left: 0; }
  body.s-hovenier-a .gg-dienstlijst .gg-pijl { display: none; }
  body.s-hovenier-a .gg-stappenrij, body.s-hovenier-a .gg-fasen, body.s-hovenier-a .gg-matraster, body.s-hovenier-a .gg-weeklijst, body.s-hovenier-a .gg-seizoenlijst,
  body.s-hovenier-a .gg-teamlijst, body.s-hovenier-a .gg-mini-rij, body.s-hovenier-a .gg-andere ul, body.s-hovenier-a .gg-prijsraster, body.s-hovenier-a .gg-cijfers,
  body.s-hovenier-a .gg-velden, body.s-hovenier-a .gg-volgende, body.s-hovenier-a .gg-voet-in { grid-template-columns: minmax(0, 1fr); }
  body.s-hovenier-a .gg-weeklijst { gap: 30px; }
  body.s-hovenier-a .gg-vol { grid-column: 1; }
  body.s-hovenier-a .gg-feiten-groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-hovenier-a .gg-feiten-groot div { border-left: 0 !important; padding-left: 0 !important; }
  body.s-hovenier-a .gg-bloei-rij { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  body.s-hovenier-a .gg-bloei-kop .gg-bloei-naam { display: none; }
  body.s-hovenier-a .gg-bloei-kop .gg-bloei-maanden span { font-size: 9px; letter-spacing: 0; }
  body.s-hovenier-a .gg-plantlijst th:nth-child(3), body.s-hovenier-a .gg-plantlijst td:nth-child(3) { display: none; }
  body.s-hovenier-a .gg-ww-stap { gap: 16px; }
  body.s-hovenier-a .gg-ww-nr { font-size: 70px; }
  body.s-hovenier-a .gg-slot-tekst { margin: -50px 0 0 0; }
  body.s-hovenier-a .gg-g-b, body.s-hovenier-a .gg-dh-foto, body.s-hovenier-a .gg-strook-b, body.s-hovenier-a .gg-pg-b, body.s-hovenier-a .gg-og-b { width: 82%; }
  body.s-hovenier-a .gg-noord { right: 6px; top: -22px; }
  body.s-hovenier-a .gg-voet-zin { font-size: 56px; }
  body.s-hovenier-a .gg-voet-onder { flex-direction: column; }
  body.s-hovenier-a .gg-groot { font-size: 30px; }
  body.s-hovenier-a .gg-volgende b { font-size: 28px; }
}