/* Wijst Kozijn: volgens het Huisstijlhandboek Wijst Kozijn (Bas, 3 nov).
   Palet: Donker Teal #205375 (primair), Donker Antraciet #1A1D20 (tekst), Bouw Oranje #F27D0C (CTA),
   Off-white #F7F9FA. Afgeleid: Diep #143A54, Teal licht #2F6A8C, Oranje-tekst op licht #B65A00, Lijn #DCE3E9.
   Fonts: Montserrat (koppen, bold), Inter (broodtekst). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap");
:root {
  --navy: #205375; --navy-2: #2F6A8C; --navy-deep: #143A54; --ink: #1A1D20;
  --font-display: "Montserrat", system-ui, sans-serif; --font-sans: "Inter", system-ui, sans-serif;
  --gold: #F27D0C; --gold-hover: #FF9530; --gold-ink: #B65A00;
  --bg: #F7F9FA; --white: #FFFFFF; --blue-tint: #E8EEF3; --blue-line: #DCE3E9; --line: #DCE3E9;
  --muted: #4A5B68;
  --section-y: clamp(76px, 8.5vw, 130px);
}
body { background: var(--white); }

.hero {
  position: relative;
  background:
    linear-gradient(90deg, rgb(20 58 84 / .93) 0%, rgb(32 83 117 / .80) 45%, rgb(32 83 117 / .25) 100%),
    url("../klant/modern-detached-house-with-new.jpg") 60% center / cover no-repeat;
  padding-block: clamp(96px, 12vw, 180px) clamp(88px, 10vw, 150px);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-figure { display: none; }
.hero-copy { max-width: 740px; }
.hero-copy::before {
  content: "Kozijnen · Deuren · Schuifpuien · Boekel"; display: block; margin-bottom: 26px;
  font-size: .75rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  padding-left: 52px; background: linear-gradient(var(--gold), var(--gold)) left center / 38px 3px no-repeat;
}
.hero h1 { font-weight: 800; font-size: clamp(2.4rem, 1rem + 3.6vw, 4.1rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 28px; }
.hero-lead { max-width: 54ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height: 1.65; color: rgb(255 255 255 / .88); }

.btn { letter-spacing: .04em; font-weight: 700; min-height: 54px; padding-inline: 26px; border-radius: 4px; }
.btn-gold { color: #1A1D20; }
.btn-ghost-light { border-color: rgb(255 255 255 / .5); }

.facts { background: var(--white); border-bottom: 1px solid var(--line); }
.section-title { font-weight: 800; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.012em; }
.section-title::after { content: ""; display: block; width: 52px; height: 4px; background: var(--gold); margin-top: 20px; }
.eyebrow { letter-spacing: .24em; font-weight: 700; font-size: .75rem; color: var(--gold-ink); }
p { line-height: 1.7; }

.choices, .area, .faq { background: var(--bg); }
.offer, .crew { background: var(--white); }

.site-footer { background: var(--navy-deep); }
.logo-img { height: 46px; width: auto; }

@media (max-width: 860px) {
  .hero { background-position: 68% center; padding-block: 64px 56px; }
  .hero h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.7rem); }
  .hero-copy::before { letter-spacing: .16em; padding-left: 40px; background-size: 28px 3px; }
  .logo-img { height: 36px; }
}

.page-hero { padding-block: clamp(48px, 6vw, 92px) clamp(56px, 7vw, 104px); }
.page-hero h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 3.9rem); line-height: 1.05; letter-spacing: -.015em; }
.page-hero .lead { line-height: 1.65; color: rgb(255 255 255 / .88); }
.page-hero-figure { width: min(100% - 22px, 400px); }
.split figure img { aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 4px; }
.uses h3 { font-weight: 800; font-size: 1.35rem; line-height: 1.15; margin-bottom: 10px; }
.place-list a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.place-list a:hover { color: var(--gold-ink); }
.placeholder { background: #FFF4E6; border-left: 4px solid var(--gold); padding: 10px 14px; font-size: .95rem; }
@media (max-width: 860px) {
  .page-hero h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 2.6rem); }
  .place-list { columns: 2; }
}

h1, h2, h3, .section-title { font-weight: 700; }
body { color: var(--ink); }