/* Conceptbord Kapper Samy: in zijn kleuren (ossenbloed deur, oud goud van de lijst, crème kozijnen). */
:root {
  --creme: #EFE7D8; --ossenbloed: #6E2226; --goud: #9C7F45; --inkt: #1C1A1B; --kozijn: #D2C0A3;
  --display: "Young Serif", Georgia, serif; --body: "Figtree", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--inkt); font: 400 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ossenbloed); outline-offset: 3px; }
.wrap { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.check { font-size: 12px; font-weight: 600; background: #F3E3B6; color: #5A4513; padding: 1px 6px; border-radius: 4px; }

.kop { padding: 56px 0 30px; }
.kop__regel { margin: 0 0 10px; color: #5B5249; }
h1 { font: 400 clamp(40px, 6vw, 76px)/1 var(--display); color: var(--ossenbloed); margin: 0 0 16px; }
.lede { font-size: 20px; max-width: 720px; margin: 0; }

.keuze { background: var(--ossenbloed); color: var(--creme); padding: 34px 38px; margin: 34px 0 70px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 30px; align-items: center; }
.keuze h2 { font: 400 clamp(28px, 3vw, 40px)/1.1 var(--display); margin: 0; }
.keuze p { margin: 0 0 10px; }
.keuze a { font-weight: 600; }

.concept { padding: 0 0 80px; }
.concept + .concept { border-top: 1px solid rgba(156, 127, 69, .5); padding-top: 60px; }
.concept__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 8px; }
.concept h2 { font: 400 clamp(30px, 3.6vw, 46px)/1.05 var(--display); color: var(--ossenbloed); margin: 0; }
.concept__zin { font-size: 21px; max-width: 820px; margin: 0 0 26px; }
.frames { display: grid; grid-template-columns: auto auto 1fr; gap: 26px; align-items: start; }
.scherm { width: 605px; height: 378px; overflow: hidden; border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(28, 26, 27, .6); background: #fff; border: 1px solid rgba(28, 26, 27, .15); }
.scherm iframe { width: 1440px; height: 900px; border: 0; transform: scale(.42); transform-origin: 0 0; }
.tel { width: 195px; height: 422px; overflow: hidden; border-radius: 22px; box-shadow: 0 18px 40px -20px rgba(28, 26, 27, .6); border: 6px solid var(--inkt); background: #fff; }
.tel iframe { width: 390px; height: 844px; border: 0; transform: scale(.5); transform-origin: 0 0; }
.bron { display: grid; gap: 16px; }
.bron figure { margin: 0; }
.bron img { border: 1px solid rgba(28, 26, 27, .15); }
.bron figcaption { font-size: 14px; margin-top: 6px; color: #3D342C; }
.bron figcaption b { color: var(--ossenbloed); }
.onder { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.onder a { font-weight: 600; }
.waarom { margin: 22px 0 0; max-width: 860px; }

.slot { background: var(--kozijn); padding: 50px 0 60px; }
.slot h2 { font: 400 32px/1.1 var(--display); color: var(--ossenbloed); margin: 0 0 12px; }
.slot ul { margin: 0; padding-left: 20px; max-width: 900px; }
.slot li { margin: 0 0 8px; }

@media (max-width: 1100px) {
  .frames { grid-template-columns: 1fr; }
  .scherm { width: 100%; max-width: 605px; }
  .bron { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .keuze { grid-template-columns: 1fr; padding: 26px 22px; }
  .scherm { height: 210px; }
  .scherm iframe { transform: scale(.233); }
  .bron { grid-template-columns: 1fr; }
}