/* Waarom / Por qué / Why  en  het dienstenblok op de bureaupagina.
   Dezelfde opbouw als de rest van de site: een gecentreerde kop, daaronder een
   inleiding en dan de inhoud in blokken. Er wordt bewust geen nieuwe kleur of
   nieuw lettertype geïntroduceerd; alleen de indeling verschilt van de
   homepage, zodat de pagina niet leest als een herhaling. */

/* Inleiding onder de paginakop */
.inleiding{padding:0 0 30px}
/* Zelfde maat als de foto en de tekstkolommen eronder (1000px), zodat de
   pagina van boven tot onder op dezelfde twee lijnen staat. */
.inleiding .wrap{max-width:1000px}
.inleiding p{color:var(--zacht);margin-bottom:16px}
.inleiding p:last-child{margin-bottom:0}

/* Vier redenen op de waarom-pagina, twee naast elkaar */
.blokken{display:grid;grid-template-columns:1fr 1fr;gap:56px 70px;max-width:1000px;margin:0 auto;padding:0 32px}
.blokken h2,.blokken h3{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst);margin-bottom:14px;font-weight:600}
.blokken h2::before,.blokken h3::before{content:"";display:block;width:38px;height:1px;background:var(--goud);margin-bottom:16px}
.blokken p{color:var(--zacht);font-size:.95rem}

/* Ruitpatroon uit het merk, heel licht als achtergrond op de waarom-pagina.
   De tegel is de merkkleur --goud met een alfa van 12 op 255, ongeveer vijf
   procent, zodat de tekst er ongehinderd op leest. De tegel herhaalt naadloos.
   De waarom-pagina gebruikt patroon-licht.png (alfa 7); het contactpaneel
   houdt patroon.png (alfa 12), omdat daar geen leestekst achter ligt.
   Wil je het lichter of zwaarder: alleen de alfa van dat bestand wijzigen. */
.patroon-vlak{background-repeat:repeat;background-size:420px auto;background-position:center top}
@media(max-width:860px){.patroon-vlak{background-size:300px auto}}

/* Beeldband op de waarom-pagina: de Montgo boven Javea. De foto staat op de
   eigen maat van de pagina en schaalt mee met de breedte (height:auto), zodat
   de hele opname zichtbaar blijft op elk scherm en er niets wegvalt. */
/* Gelijk uitgelijnd met de tekstkolommen eronder (.blokken), niet met de
   bredere wrap: anders steekt de foto links en rechts een stukje uit. */
.beeldband{max-width:1000px;margin:6px auto 66px;padding:0 32px}
.beeldband img{display:block;width:100%;height:auto}
@media(max-width:860px){.beeldband{margin:0 auto 46px}}

/* De vier fases op de bureaupagina, onder elkaar met het nummer ernaast */
.diensten{max-width:1000px;margin:0 auto;padding:0 32px}
.dienst{display:grid;grid-template-columns:230px 1fr;gap:50px;padding:44px 0;border-top:1px solid var(--lijn)}
.dienst:last-child{border-bottom:1px solid var(--lijn)}
.dienst .nr{display:block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:200;font-size:1.1rem;color:var(--goud);margin-bottom:12px}
.dienst h2,.dienst h3{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst);font-weight:600;margin:0}
.dienst p{color:var(--zacht);font-size:.95rem;margin-bottom:14px}
.dienst p:last-child{margin-bottom:0}

/* Afsluitend blok met de doorverwijzing naar de volgende pagina */
.verder{background:rgba(234,227,211,.5);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);text-align:center}
.verder p{color:var(--zacht);max-width:52ch;margin:0 auto}

@media(max-width:860px){
  .blokken{grid-template-columns:1fr;gap:44px}
  .dienst{grid-template-columns:1fr;gap:14px;padding:34px 0}
}