/* V3.3 — vormgevingsfeedback op het ontwerp van v3.1, toegepast op v3.2. */

/* Op groen hoort de merktypografie blauw te zijn, niet zwart. Het diepe blauw
   voor kleine tekst haalt 4.6:1 contrast; grote koppen houden het merkblauw. */
.scene-on body.version-three-three[data-scene="green"] {
  --page-ink: #203369;
  --page-line: #20336940;
}
.version-three-three .qualities,
.scene-on .version-three-three .qualities { color: #203369; }
.version-three.version-three-three .header-cta:hover,
.version-three.version-three-three .header-cta:focus-visible {
  background: var(--green);
  color: #203369;
  box-shadow: inset 0 0 0 2px #203369;
}
.version-three-three .qualities h2,
.version-three-three .qualities h3 { color: var(--blue); }
.version-three-three .quality-story-rail {
  background: color-mix(in srgb, #203369 25%, transparent);
}
.version-three-three .quality-story-visuals figcaption {
  color: #203369;
}
.version-three-three .quality-story-index { color: #203369; }

/* De gridrij nam de hoogte van de langste kaart over. Een kortere button
   centreerde daardoor zijn inhoud binnen die extra hoogte en begon lager. */
.version-three-three .homes { align-items: start; }

/* Grote koppen behouden hun krachtige formaat, maar krijgen meer lucht. */
.version-three-three h1,
.version-three-three h2,
.version-three-three h3 {
  letter-spacing: -.012em;
}
.version-three-three .hero h1 { letter-spacing: -.006em; }

/* De kleine teksten dragen meer bij aan de compositie en blijven leesbaar. */
.version-three-three .header nav,
.version-three-three .header-cta { font-size: 15px; }
.version-three-three .eyebrow { font-size: 13px; letter-spacing: .12em; }
.version-three-three .hero-scroll { font-size: 14px; }
.version-three-three .image-caption,
.version-three-three .portrait figcaption,
.version-three-three .quality-image figcaption,
.version-three-three .quality-story-visuals figcaption { font-size: 13px; }
.version-three-three .text-link,
.version-three-three .availability,
.version-three-three .gallery-count { font-size: 15px; }
.version-three-three .filters button { font-size: 14px; }
.version-three-three .card-meta { font-size: 12px; }
.version-three-three .moments-heading p,
.version-three-three .wonen-intro,
.version-three-three .quality-story-step > p,
.version-three-three .form-note { font-size: 16px; }
.version-three-three .footer-bottom { font-size: 13px; }
.version-three-three .quality-story-index { font-size: 13px; }

/* Het eigen titelfont wordt een bewust tegenwicht voor FI Prefere. */
.version-three-three .intro-quote p,
.version-three-three .moment-list > a > span,
.version-three-three .home-card h3,
.version-three-three .scroll-statement h2 {
  font-family: Titel, Georgia, serif;
  font-weight: 400;
  letter-spacing: .005em;
}
.version-three-three .intro-quote p { line-height: 1.18; }
.version-three-three .moment-list > a > span { line-height: 1.14; }
.version-three-three .scroll-statement h2 { line-height: 1.09; max-width: 1160px; }

/* Grafische patronen: geen fijne golfjes maar brede, vlak afgesneden banen. */
.version-three-three {
  --hero-band-height: clamp(110px, 11vw, 170px);
  --footer-band-height: clamp(105px, 10vw, 155px);
}
.version-three-three .landscape-hero { height: var(--hero-band-height); }
.version-three-three .hero-scroll,
.version-three-three .hero .image-caption {
  bottom: calc(var(--hero-band-height) + 28px);
}
.version-three-three .landscape-voet { height: var(--footer-band-height); }
.version-three-three .contact {
  padding-bottom: calc(var(--footer-band-height) + 65px);
}
.version-three-three footer { padding-top: clamp(72px, 7vw, 105px); }
.version-three-three .contact-ribbon {
  height: clamp(66px, 6vw, 96px);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 69% 39%, 31% 100%, 0 62%);
}
.version-three-three .scroll-statement { padding-bottom: clamp(240px, 23vw, 350px); }
.version-three-three .statement-bands {
  inset: auto 0 0;
  height: clamp(180px, 19vw, 290px);
  opacity: 1;
  transform: none;
}
.version-three-three .statement-bands i {
  left: 0;
  width: 100%;
  height: 34%;
  clip-path: polygon(0 0, 50% 22%, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.version-three-three .statement-bands i:nth-child(1) { top: 6%; }
.version-three-three .statement-bands i:nth-child(2) { top: 58%; }
.version-three-three .statement-bands i:nth-child(3) { display: none; }

@media (max-width: 760px) {
  .version-three-three {
    --hero-band-height: 92px;
    --footer-band-height: 90px;
  }
  .version-three-three .header-cta { font-size: 12px; }
  .version-three-three .hero h1 { font-size: clamp(46px, 12.5vw, 69px); }
  .version-three-three .hero-copy .eyebrow { font-size: 11px; }
  .version-three-three .hero .image-caption { font-size: 10px; }
  .version-three-three .hero-scroll { font-size: 13px; }
  .version-three-three .portrait figcaption,
  .version-three-three .quality-story-visuals figcaption { font-size: 12px; }
  .version-three-three .moment-list > a > span { font-size: clamp(29px, 8vw, 36px); }
  .version-three-three .scroll-statement h2 { font-size: clamp(40px, 9.8vw, 64px); }
  .version-three-three .scroll-statement { padding-bottom: 210px; }
  .version-three-three .statement-bands { height: 175px; }
  .version-three-three .footer-bottom { font-size: 12px; }
}