/* Conceptbord House of You: in hun eigen kleuren (taupe, mokka, champagne) */
:root { --taupe: #B4A493; --inkt: #211D1A; --papier: #FFFBF7; --mokka: #3D3027; --champagne: #E6DFD7; --karamel: #B5795D; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hanken Grotesk", sans-serif; color: var(--inkt); font-size: 17px; line-height: 1.6;
  background: url("../media/papier-taupe.webp") 0 0 / 1440px auto repeat, var(--taupe); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.wrap { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
h1, h2, h3 { font-family: "Marcellus", serif; font-weight: 400; letter-spacing: .06em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 10px 0 18px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: .5em; }
h3 { font-size: 1.2rem; margin-bottom: .4em; }
.top { padding: 56px 0 40px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.top svg { width: 100%; height: auto; } .top #hy, .top #tagline, .top #andmore { fill: var(--inkt); } .top #script { fill: var(--papier); }
.lede { font-size: 1.2rem; max-width: 720px; margin: 0; }
.keuze { background: var(--mokka); color: var(--champagne); padding: clamp(28px, 4vw, 50px); display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.keuze h2 { color: #fff; }
.keuze a.knop { display: inline-block; margin-top: 14px; background: var(--champagne); color: var(--inkt); text-decoration: none; padding: 13px 22px; font-weight: 600; }
.keuze img { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.diagnose { padding: 70px 0 20px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }
.diagnose ul { margin: 0; padding-left: 1.1em; }
.diagnose li { margin-bottom: .5em; }
.concept { padding: 70px 0; }
.concept + .concept { padding-top: 20px; }
.concept-kop { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 26px; }
.concept-kop p { margin: 0; font-size: 1.15rem; max-width: 820px; }
.concept-kop a { font-weight: 600; white-space: nowrap; }
.frames { display: grid; grid-template-columns: 1fr 240px; gap: 22px; align-items: start; }
.frame { position: relative; overflow: hidden; background: var(--inkt); box-shadow: 0 24px 50px -26px rgba(33,29,26,.6); }
.frame.desk { aspect-ratio: 1440 / 900; border-radius: 10px; border: 6px solid var(--inkt); }
.frame.tel { aspect-ratio: 390 / 844; border-radius: 30px; border: 8px solid var(--inkt); }
.frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.frame.desk iframe { width: 1440px; height: 900px; }
.frame.tel iframe { width: 390px; height: 844px; }
.bronnen { display: grid; grid-template-columns: 1.25fr 1fr .85fr; gap: 22px; margin-top: 22px; }
.bron { background: rgba(255,251,247,.55); padding: 14px; }
.bron img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-bottom: 10px; }
.bron p { margin: 0; font-size: .92rem; }
.bron strong { display: block; margin-bottom: 2px; }
.overname { background: rgba(255,251,247,.55); padding: 18px 22px; font-size: .95rem; }
.overname ul { margin: 6px 0 0; padding-left: 1.1em; }
.volgende { background: var(--papier); padding: clamp(28px, 4vw, 50px); margin: 50px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.volgende ul { margin: 0; padding-left: 1.1em; }
.noot { padding: 0 0 60px; font-size: .92rem; }
.let-op { display: inline-block; border: 1px dashed var(--inkt); padding: .15em .5em; background: var(--papier); font-size: .85rem; }
@media (max-width: 900px) {
  .top, .keuze, .diagnose, .volgende, .concept-kop { grid-template-columns: 1fr; }
  .top { gap: 16px; } .top > div:first-child { width: 170px; }
  .frames { grid-template-columns: 1fr 150px; }
  .bronnen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .frames { grid-template-columns: 1fr; } .frame.tel { width: 220px; justify-self: center; } }