/* cobby's — huisstijl "Ketting & inslag" (gekozen door Ann, aug 2026)
   Papier, inkt, terra; Instrument Serif (cursief accent) + Instrument Sans.
   Geen afgeronde hoeken. Effen kleurvlakken, geen achtergrondlijnen. */

:root{
  --papier:#FAF9F7; --wit:#FFFFFF; --zacht:#FCF0E8; --inkt:#000000; --soft:#000000;
  --terra:#B84A25; --terra-diep:#8E3618; --lijn:#E1DFDA; --ivoor:#EFE8DA;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:400; line-height:1.12; text-wrap:balance}
p{margin:0}
img,video,iframe{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.lab{font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--soft)}
.kader{max-width:1240px; margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px)}

/* knoppen & tekstlinks */
.knop{display:inline-block; padding:12px 28px; background:transparent; color:var(--inkt);
  border:1px solid var(--inkt); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; transition:background .25s, color .25s}
.knop:hover{background:var(--inkt); color:var(--papier)}
.knop-held{display:inline-block; margin-top:26px; padding:11px 26px; background:transparent;
  color:var(--ivoor); border:1px solid rgba(239,232,218,.75); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:background .25s, color .25s}
.knop-held:hover{background:var(--ivoor); color:var(--inkt)}
.pijl{display:inline-block; font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terra-diep); text-decoration:none}
.pijl::after{content:"\2192"; display:inline-block; margin-left:8px; transition:transform .25s}
.pijl:hover::after{transform:translateX(5px)}

/* onthulling bij scroll (alleen home gebruikt .rv) */
.rv{opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.aan{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ── vaste witte menubalk (ook mobiel sticky) ─────────────── */
.balk{position:sticky; top:0; z-index:50; background:var(--wit);
  border-bottom:1px solid var(--lijn)}
.balk .in{max-width:1240px; margin:0 auto; padding:15px clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.balk .logo img{height:37px; width:auto; display:block}
.balk nav ul{list-style:none; margin:0; padding:0; display:flex; gap:clamp(12px,2.2vw,34px); flex-wrap:wrap}
.balk nav a{font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--inkt); padding:4px 0; border-bottom:1px solid transparent}
.balk nav a:hover{border-bottom-color:var(--terra); color:var(--terra-diep)}
@media (max-width:720px){
  .balk .in{justify-content:center; text-align:center; padding:9px 10px 8px; gap:7px}
  .balk .logo img{height:26px}
  .balk nav ul{justify-content:center; gap:9px}
  .balk nav a{font-size:10px; letter-spacing:.07em; padding:2px 0}
}

/* ── home: held ───────────────────────────────────────────── */
.held{position:relative; height:min(86svh,860px); min-height:480px; overflow:hidden; background:#8C6B54}
.held img{width:100%; height:100%; object-fit:cover}
.held .waas{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(25,20,16,.55) 0%, rgba(25,20,16,.16) 45%, rgba(25,20,16,.05) 70%)}
.held .tekst{position:absolute; left:clamp(20px,5vw,64px); right:clamp(20px,5vw,64px);
  bottom:clamp(36px,8vh,84px); text-align:center; color:var(--ivoor)}
.held h1{margin:0 auto; color:var(--ivoor)}
.held h1 .groot{display:block; font-size:clamp(2.6rem,6vw,4.8rem); line-height:1.05}
.held h1 .stil{display:block; font-size:clamp(1.1rem,2.2vw,1.7rem); margin-top:14px; opacity:.92}

/* ── home: intro & hoofdstukken ───────────────────────────── */
.veld-wit{background:var(--papier)}
.veld-zacht{background:var(--zacht)}
section[id]{scroll-margin-top:86px}

.intro{padding:clamp(64px,9vw,120px) clamp(20px,4vw,48px); text-align:center}
.intro p{font-family:var(--serif); font-size:clamp(1.6rem,3.3vw,2.5rem); line-height:1.3;
  max-width:30ch; margin:0 auto}
.intro .lab{display:block; margin-bottom:20px}

.hoofdstuk{padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(56px,8vw,104px)}
.hoofdstuk .grid{display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){.hoofdstuk .grid{grid-template-columns:.8fr 1.2fr}}
.marge{position:static}
@media (min-width:900px){.marge{position:sticky; top:96px}}
.marge h2, .paginakop h1{font-family:var(--serif); font-style:normal; font-weight:400;
  text-transform:capitalize; color:var(--terra);
  font-size:1.95rem; letter-spacing:.02em}
.marge .mee{margin-top:16px; font-size:.98rem; color:var(--soft); max-width:30ch}
.inhoud{display:grid; gap:clamp(28px,4vw,44px)}
.inhoud > p{color:var(--soft); max-width:46ch}
figure{margin:0}
.foto img{width:100%; height:auto; object-fit:cover}
.foto.breed img{aspect-ratio:16/9}
.foto.hoog img{aspect-ratio:4/5}
.foto.hoog{max-width:520px}

.rijen{display:grid}
.rij{display:grid; grid-template-columns:clamp(150px,22vw,230px) 1fr; gap:18px;
  padding:17px 0; border-top:1px solid var(--lijn); align-items:baseline}
.rij:last-child{border-bottom:1px solid var(--lijn)}
.rij dt,.rij b{margin:0; font-family:var(--serif); font-weight:400; font-size:1.4rem;
  line-height:1.25; color:var(--inkt)}
.rij dd,.rij p{margin:0; font-size:.95rem; color:var(--soft)}
.rij a{color:var(--terra-diep)}
@media (max-width:560px){.rij{grid-template-columns:1fr; gap:4px}}

.samen{line-height:1.45}
.op-een-lijn{white-space:nowrap}

/* rood contactvlak */
.veld-terra{background:var(--terra-diep)}
.veld-terra .marge h2{color:var(--ivoor)}
.veld-terra .mee, .veld-terra .rij dt, .veld-terra .rij dd, .veld-terra .rij p{color:var(--ivoor)}
.veld-terra .rij{border-color:rgba(239,232,218,.35)}
.veld-terra .rij a{color:var(--ivoor)}
.veld-terra .knop{color:var(--ivoor); border-color:var(--ivoor)}
.veld-terra .knop:hover{background:var(--ivoor); color:var(--inkt)}

.statement{background:var(--papier); color:var(--inkt);
  padding:clamp(72px,11vw,140px) clamp(20px,4vw,48px); text-align:center}
.statement p{font-family:var(--serif); font-size:clamp(1.8rem,4vw,3.1rem); line-height:1.25;
  max-width:26ch; margin:0 auto}
.statement em{font-style:italic}
.statement .lab{display:block; margin-top:26px; color:var(--ivoor); opacity:.65}

/* ── realisaties-band op de home ──────────────────────────── */
.band{position:relative; display:block; min-height:clamp(260px,38vh,380px); overflow:hidden;
  text-decoration:none; background:var(--inkt)}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.82}
.band .waas{position:absolute; inset:0; background:rgba(25,20,16,.42); transition:background .3s}
.band:hover .waas{background:rgba(25,20,16,.55)}
.band .in{position:relative; z-index:2; min-height:inherit; display:grid; place-content:center;
  text-align:center; gap:12px; padding:40px 20px}
.band h2{font-family:var(--serif); font-style:italic; text-transform:uppercase; font-weight:400;
  color:var(--ivoor); font-size:clamp(2rem,4.4vw,3.2rem)}
.band .bandpijl{font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivoor)}
.band .bandpijl::after{content:"\2192"; margin-left:8px}

/* ── voetbalk: enkel logo + Instagram ─────────────────────── */
.voet{background:var(--zacht); border-top:1px solid var(--lijn)}
.voet .in{display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,40px);
  padding:clamp(36px,5vw,56px) clamp(20px,4vw,48px)}
.voet img{height:44px; width:auto}
.voet .insta{display:inline-flex; color:var(--inkt); transition:color .25s}
.voet .insta:hover{color:var(--terra-diep)}
.voet .insta svg{width:24px; height:24px}

/* ══ onderliggende pagina's (v1-structuur, KI-stijl) ══ */
.paginakop{padding:clamp(44px,6vw,72px) 0 clamp(8px,2vw,16px)}
.paginakop .lead, .lead{margin-top:14px; font-size:1.05rem; color:var(--soft); max-width:62ch}
.section{padding:clamp(28px,4vw,56px) 0}
.smalle-tekst{max-width:720px}
.txt-block{margin:0 0 28px}
.txt-block h2{font-size:1.5rem; margin-bottom:10px}
.txt-block p{margin:0 0 12px; color:var(--soft)}
.txt-block a{color:var(--terra-diep)}

.detail-hero{padding:8px 0 0}
.detail-img{width:100%; max-height:520px; object-fit:cover}
.detail-img-staand{max-width:520px; max-height:640px}

.cards{display:grid; gap:clamp(18px,2.5vw,28px); grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{display:block; background:var(--wit); border:1px solid var(--lijn); text-decoration:none;
  transition:border-color .25s}
.card:hover{border-color:var(--terra)}
.card-img img{width:100%; aspect-ratio:3/2; object-fit:cover}
.card-body{padding:18px 20px 22px}
.card-body h3{font-size:1.35rem; margin-bottom:6px}
.card-body p{font-size:.93rem; color:var(--soft)}
.card-more{display:inline-block; margin-top:12px; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--terra-diep)}

.detail-grid{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){.detail-grid{grid-template-columns:1.4fr .6fr}}
.visit-aside{background:var(--wit); border:1px solid var(--lijn); padding:22px 24px}
.visit-aside h3{font-size:1.3rem; margin-bottom:10px}
.prep{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.93rem; color:var(--soft)}
.prep b{color:var(--inkt); font-weight:600}
.prep a{color:var(--terra-diep)}

.prevnext{display:flex; justify-content:space-between; gap:16px; margin-top:8px;
  padding-top:18px; border-top:1px solid var(--lijn)}
.prevnext a{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--terra-diep)}
.prevnext a:hover{color:var(--inkt)}

.section-cta{background:var(--zacht)}
.cta-inner{text-align:center; display:grid; gap:14px; justify-items:center; padding:clamp(20px,3vw,32px) 0}
.cta-inner h2{font-size:1.7rem}
.cta-inner p{color:var(--soft); max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{display:inline-block; padding:12px 28px; background:transparent; color:var(--inkt);
  border:1px solid var(--inkt); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; transition:background .25s, color .25s}
.btn:hover{background:var(--inkt); color:var(--papier)}

.contact-grid{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-map iframe{width:100%; height:420px; border:1px solid var(--lijn); filter:grayscale(1)}
.verlof-klein{margin-top:16px; font-size:.85rem; color:var(--soft)}

.collectie-rooster{display:grid; gap:clamp(20px,3vw,36px); grid-template-columns:1fr}
@media (min-width:760px){.collectie-rooster{grid-template-columns:1fr 1fr}}
.collectie-blok a{display:block}
.collectie-blok img{width:100%; aspect-ratio:4/3; object-fit:cover}
.onderschrift{padding:12px 0 0}
.onderschrift a{font-family:var(--serif); font-size:1.25rem; text-decoration:none}
.onderschrift a:hover{color:var(--terra-diep)}

/* galerij: grote foto's, quotes lopen ertussen in de stijl van de homepage */
.galerij{display:grid; gap:clamp(20px,3vw,36px); grid-template-columns:1fr}
@media (min-width:700px){.galerij{grid-template-columns:repeat(2,1fr)}}
.galerij img{width:100%; aspect-ratio:4/3; object-fit:cover}
.galerij figcaption{display:none}
.galerij .quote{grid-column:1 / -1; text-align:center;
  padding:clamp(28px,5vw,64px) clamp(20px,4vw,48px)}
.galerij .quote p{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.3; max-width:28ch; margin:0 auto; color:var(--inkt)}