/* ==========================================================================
   BJO Installaties: polish layer (loaded after site.css).
   Only refinements: typography on phones/tablets/desktop and smoother animations.
   Remove this file to return to the original look.
   ========================================================================== */

/* ---------- 1. Typography: even line breaks everywhere ---------- */
/* Headings break into lines of similar length (no single word on the last line). */
section.page :is(h1, h2, h3, h4, .title-xl, .title-l, .eyebrow, .lead) { text-wrap: balance; }
/* Body text avoids a lonely last word. */
section.page :is(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
/* Buttons with long labels break evenly and stay centred. */
section.page .btn { text-wrap: balance; text-align: center; }

/* ---------- 2. Small labels: readable on every screen (min. 12px) ---------- */
section.page :is(.service-card__cat, .project-card__meta, .fx__tag) { font-size: 12px; }
section.page .compare__label { font-size: max(12px, .68rem); }

/* hub in the 'one point of contact' section: the centre label was 10–11.5px */
section.page .hub__core-label { font-size: 12px; line-height: 1.25; }
@media (max-width: 1024px) {
  section.page .hub__core-label { letter-spacing: .06em; }
}

@media (max-width: 480px) {
  /* hero keywords: tidy 3 + 2 grid instead of 4 + a single word */
  section.page .hero-meta { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 14px; row-gap: 6px; }
  section.page .hero-meta span:nth-child(3n + 1)::before { display: none; }   /* no bullet at the start of a row */
  /* long button labels use the full width on phones */
  section.page .btn-row > .btn { justify-content: center; }
}

/* Price table on tablets: the cells never wrapped, so the 3-fase column was cut off
   (its wrapper hides overflow). Let prices wrap and tighten the padding a little. */
@media (min-width: 641px) and (max-width: 1024px) {
  section.page .price-table th,
  section.page .price-table td { white-space: normal; padding-left: 14px; padding-right: 14px; }
  section.page .price-table { font-size: .94rem; }
}

/* ---------- 3. Smoother animations (same look, GPU-friendly) ---------- */
/* Hub glow: was a box-shadow animation (repainted every frame). Now two fixed glows cross-fade. */
section.page .hub__core { animation: none; box-shadow: none; isolation: isolate; }
section.page .hub__core::before,
section.page .hub__core::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; z-index: -1;
  will-change: opacity;
}
section.page .hub__core::before { box-shadow: 0 0 0 10px rgba(247,147,30,.07), 0 0 50px rgba(247,147,30,.22); animation: bjo-glow-a 2.8s ease-in-out infinite; }
section.page .hub__core::after  { box-shadow: 0 0 0 14px rgba(247,147,30,.11), 0 0 70px rgba(247,147,30,.32); opacity: 0; animation: bjo-glow-b 2.8s ease-in-out infinite; }
@keyframes bjo-glow-a { 50% { opacity: 0; } }
@keyframes bjo-glow-b { 50% { opacity: 1; } }

/* Energy dots between steps: moved with 'left' (layout every frame). Now transform, same path:
   dot = 40% of the link; from left -40% to 100% = translateX(-100%) → translateX(250%). */
section.page .flow-strip__link::after { left: 0; transform: translateX(-100%); animation-name: bjo-flow-dot; will-change: transform; }
@keyframes bjo-flow-dot { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Air lines over the climate photo: same, streak = 60% wide, from -40% to 100%
   = translateX(-66.667%) → translateX(166.667%). */
section.page .fx--air::before,
section.page .fx--air::after { left: 0; transform: translateX(-66.667%); will-change: transform, opacity; }
section.page .fx--air.is-active::before { animation: bjo-fx-air 4.5s ease-in-out infinite; }
section.page .fx--air.is-active::after  { animation: bjo-fx-air 4.5s ease-in-out 1.4s infinite; }
@keyframes bjo-fx-air {
  0%   { transform: translateX(-66.667%); opacity: 0; }
  20%  { opacity: .9; }
  80%  { opacity: .9; }
  100% { transform: translateX(166.667%); opacity: 0; }
}

/* ---------- 4. Scroll reveal: slower, softer, rising into place ---------- */
.js section.page .anim-fade-up {
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--delay, 0s);
}
.js section.page .anim-fade-up:not(.is-visible) { will-change: opacity, transform; }
.js section.page .anim-fade-up.is-visible { transform: none; }

/* ---------- 5. Hero house: builds itself part by part ---------- */
/* The layer groups stay visible; their parts appear one after another. */
.js .house.bjo-build g.house-layer { opacity: 1; transform: none; transition: none; }
.js .house.bjo-build .house-part {
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: calc(var(--i, 0) * var(--gap, 170ms));
}
.js .house.bjo-build .house-layer--drop .house-part { transform: translateY(-18px) scale(.94); transform-origin: 50% 0%; }
.js .house.bjo-build g.house-layer.is-on .house-part { opacity: 1; transform: none; }
/* parts with their own motion (sun rays, charge bar, energy flow) only fade in */
.js .house.bjo-build .house-part-keep { opacity: 0; transition: opacity .9s ease; transition-delay: calc(var(--i, 0) * var(--gap, 170ms)); }
.js .house.bjo-build g.house-layer.is-on .house-part-keep { opacity: 1; }
/* drawn lines: slower, smoother pen stroke */
.js .house.bjo-build .house-layer--draw { transition: stroke-dashoffset 1.9s cubic-bezier(.65, 0, .35, 1), opacity .4s; }
/* lights switch on one by one when the house is complete */
.house.bjo-build :is(.house-window, .house-lamp) { transition: fill .6s ease, filter .6s ease; }
.house.bjo-build.is-lit :is(.house-window, .house-lamp) { transition-delay: calc(var(--li, 0) * 160ms); }
.house.bjo-build .house-hotspot { transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.house.bjo-build.is-lit .house-hotspot { transition-delay: calc(1s + var(--hi, 0) * 220ms); }
/* captions cross-fade gently */
.js .house.bjo-build .house-step { transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); transform: translateY(10px); }
.js .house.bjo-build .house-step.is-active { transform: none; transition-delay: .15s; }
/* progress bar fills continuously during each step */
.house.bjo-build .house-progress span { position: relative; overflow: hidden; background: rgba(18, 21, 28, .12); }
.house.bjo-build .house-progress span::after {
  content: ""; position: absolute; inset: 0; background: var(--grad);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--step, 2400ms) linear;
}
.house.bjo-build .house-progress span.is-on::after { transform: scaleX(1); }
/* first frame: start state applies instantly */
.house.bjo-no-anim :is(.house-part, .house-part-keep, .house-layer, .house-step),
.house.bjo-no-anim .house-progress span::after { transition: none !important; }
/* restarting: everything clears quickly, without the stagger */
.house.bjo-build.is-resetting :is(.house-part, .house-part-keep, .house-window, .house-lamp, .house-hotspot),
.house.bjo-build.is-resetting .house-progress span::after { transition-duration: .35s; transition-delay: 0s; }

/* 2026-10-14 klantwens: rustige, kleinere typografie op alle pagina's (mobiel, tablet, desktop) */
body { font-size: .9375rem; }
@media (min-width: 1180px) { body { font-size: 1rem; } }
.eyebrow { font-size: .72rem; letter-spacing: .14em; }
.hero-headline, .project-hero__title { font-size: clamp(1.7rem, 2.6vw + .8rem, 3rem); line-height: 1.04; letter-spacing: -.03em; }
.title-xl { font-size: clamp(1.6rem, 2.2vw + .9rem, 2.9rem); line-height: 1.04; }
.title-l { font-size: clamp(1.4rem, 1.6vw + .85rem, 2.25rem); line-height: 1.08; }
.title-m { font-size: clamp(1.2rem, 1vw + .9rem, 1.6rem); line-height: 1.15; }
.title-s { font-size: 1.05rem; }
.lead, .hero-text { font-size: clamp(.95rem, .3vw + .85rem, 1.06rem); line-height: 1.65; }
.counter-number { font-size: clamp(3.4rem, 9vw, 8rem); }
.counter-label { font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.trust-item__value { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.figure__value { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.service-card__title, .project-card__title { font-size: 1.12rem; }
.icon-box__title, .house-step__title { font-size: 1.02rem; }
.price-card__price strong { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.kitchen-tagline { font-size: clamp(1rem, 1.2vw, 1.2rem); }
:where(main, .page, .entry-content) h1:not([class]) { font-size: clamp(1.7rem, 2.6vw + .8rem, 3rem); }
:where(main, .page, .entry-content) h2:not([class]) { font-size: clamp(1.3rem, 1.2vw + .95rem, 1.9rem); }
:where(main, .page, .entry-content) h3:not([class]) { font-size: clamp(1.08rem, .5vw + .95rem, 1.3rem); }
@media (max-width: 599px) {
  .hero-headline .text-grad, .project-hero__title { white-space: normal; }
  .btn { font-size: .9rem; }
}
.price-card__cap { font-size: clamp(1.9rem, 2.6vw + .7rem, 2.6rem); }
.explorer-name { font-size: clamp(1.3rem, 1.4vw + .9rem, 2rem); }
@media (max-width: 599px) {
  .explorer-tab { padding: 8px 12px; font-size: .82rem; }
}
@media (max-width: 599px) {
  .explorer-tabs { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 18px; overflow: visible; }
}
.price-card__btw { display: block; margin-top: 4px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.review-note { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.house-step__num { font-size: clamp(1.4rem, 1.4vw + .9rem, 1.9rem); }
@media (max-width: 599px) { .price-card__cap { font-size: 1.5rem; } }