/* Contact: navy hero met één rechte glazen contactkaart (echte nummers, geen decor eromheen),
   daarna het formulier op wolk met rechts een rustige witte kaart "Wat er daarna gebeurt". */

/* ---- hero ---- */
/* "kennismaken." is lang: de kop iets kleiner zodat hij in de kolom past, en ruimte voor de diepe glimlach */
.pagina-contact .hero__tekst h1{font-size:clamp(38px,5.5vw,68px);padding-bottom:.62em;}
@media (max-width:900px){.pagina-contact .hero__tekst h1{font-size:clamp(34px,9.7vw,68px);padding-bottom:.56em;}}
.pagina-contact .contact-of{margin-top:22px;font-size:15px;color:var(--tekst-licht-zacht);animation:opdoemen .5s var(--ease) .66s both;}
.pagina-contact .contact-beeld{max-width:460px;width:100%;justify-self:end;}
.pagina-contact .contact-kaart{width:100%;padding:28px;background:linear-gradient(165deg,rgba(126,166,247,.24),rgba(37,99,235,.16) 55%,rgba(37,99,235,.10));border-color:rgba(186,209,252,.34);}
@media (min-width:901px){.pagina-contact .hero--pagina{background:var(--korrel),radial-gradient(45% 60% at 76% 58%,rgba(37,99,235,.5),transparent 70%),var(--nacht);}}
/* de echte contactkaart staat recht (uniek.css kantelt elk heroglas) */
.pagina-contact .hero__beeld .glas{transform:none;}
.pagina-contact .contact-kaart .persoon{margin-top:0;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2);}
.pagina-contact .contact-kaart .persoon__foto img{width:72px;height:72px;}
.pagina-contact .contact-kaart .persoon b{font:800 clamp(17px,1.4vw,20px)/1.15 var(--f-display);letter-spacing:-.01em;}
.pagina-contact .contact-kaart .persoon span{font-size:15px;opacity:1;color:rgba(255,255,255,.88);}
.pagina-contact .contactblok a{padding:12px 14px;gap:14px;}
.pagina-contact .contactblok .chip{display:inline-grid;}
.pagina-contact .contactblok a > span:not(.chip){flex:1;min-width:0;overflow-wrap:anywhere;font-size:16.5px;}
.pagina-contact .contactblok small{color:rgba(255,255,255,.8);}
.pagina-contact .contact-pijl{width:18px;height:18px;color:var(--ijs);opacity:.7;transition:translate var(--t-ui) var(--ease),opacity var(--t-snel);}
.pagina-contact .contactblok a:is(:hover,:focus-visible) .contact-pijl{translate:3px 0;opacity:1;}
@media (max-width:900px){
  .pagina-contact .contact-beeld{justify-self:stretch;max-width:520px;margin-inline:auto;}
}
@media (max-width:640px){
  .pagina-contact .contact-kaart{padding:22px 18px;}
  /* bellen en appen staan al als knoppen in de hero: de kaart houdt persoon en mail */
  .pagina-contact .contactblok a[href^="tel:"],.pagina-contact .contactblok a[href^="https://wa.me"]{display:none;}
  .pagina-contact .contact-kaart .persoon__foto img{width:60px;height:60px;}
  .pagina-contact .contact-kaart .persoon span{font-size:14.5px;}
  .pagina-contact .contactblok a > span:not(.chip){font-size:15.5px;}
}
/* op de smalste telefoons (320–360px) past het mailadres zo op één regel in plaats van midden in een woord
   te breken: de pijl gaat weg (de hele rij is de link, het mailicoon blijft) en maat en letter worden iets krapper.
   overflow-wrap:anywhere blijft als vangnet voor nog smallere schermen of een langer adres. */
@media (max-width:360px){
  .pagina-contact .contact-kaart{padding:20px 16px;}
  .pagina-contact .contactblok a{padding:12px;gap:12px;}
  .pagina-contact .contactblok .contact-pijl{display:none;}
  .pagina-contact .contactblok a > span:not(.chip){font-size:14.5px;}
  .pagina-contact .contactblok small{text-wrap:balance;}
}

/* ---- formulier + vervolg ---- */
@media (min-width:901px){
  .pagina-contact .contact-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .pagina-contact .contact-daarna{position:sticky;top:120px;}
}
.pagina-contact .contact-intro{margin-top:4px;font-size:15.5px;color:var(--tekst-zacht);}
.pagina-contact .formulier .noot{margin-top:18px;text-align:left;font-size:15px;}
/* zonder JavaScript kan het formulier niets versturen (Vercel geeft op een POST een 405):
   dan alleen de noscript-regel met bellen, WhatsApp en mail */
html:not(.js) .pagina-contact :is(#contactformulier,.contact-intro){display:none;}

/* versturen: eerst de keuze, dan twee rustige knoppen naast elkaar (op smalle schermen onder elkaar).
   De melding staat onder de knoppen, zodat er boven de knoppen niets verspringt. */
.pagina-contact .formulier__voet{display:grid;gap:12px;align-items:start;margin-top:8px;}
.pagina-contact .formulier__kies{font-size:14.5px;font-weight:600;color:var(--navy);}
.pagina-contact .formulier__uitleg{font-weight:400;color:var(--tekst-zacht);}
.pagina-contact .formulier__knoppen{display:flex;flex-wrap:wrap;gap:12px;}
.pagina-contact .formulier__knoppen .knop{flex:1 1 auto;}
.pagina-contact .formulier__knoppen .icoon{width:18px;height:18px;}
.pagina-contact .formulier__knoppen .knop:disabled{opacity:.6;cursor:default;translate:none;box-shadow:none;}
.pagina-contact .formulier__voet .melding--goed,.pagina-contact .formulier__voet .melding--fout{margin-top:2px;}
.pagina-contact .melding__tekst{flex:1 1 auto;min-width:0;font-size:15.5px;line-height:1.45;color:var(--navy);}
.pagina-contact .melding__tekst small{display:block;margin-top:4px;font-size:14px;color:var(--tekst-zacht);}
.pagina-contact .formulier__privacy{margin-top:2px;font-size:14px;color:var(--tekst-zacht);}
@media (max-width:640px){
  .pagina-contact .formulier__knoppen{flex-direction:column;}
  .pagina-contact .formulier__knoppen .knop{width:100%;}
}

/* vervolg: de gewone witte kaart; de stappen als stille rijen op wolk langs de lichte rail met glimlach-knopen */
.pagina-contact .contact-daarna{padding:clamp(28px,3vw,36px);border-radius:var(--r-l);}
.pagina-contact .contact-daarna__kop{font:800 26px/1.15 var(--f-display);text-transform:none;letter-spacing:-.01em;color:var(--navy);max-width:none;margin-bottom:14px;}
.pagina-contact .contact-daarna .stap{background:var(--wolk);border-color:transparent;box-shadow:none;}
@media (max-width:640px){.pagina-contact .stappen--compact::before{left:15px;}} /* rail blijft door het midden van de 32px-knopen */

/* geen CTA-band op deze pagina: de footer schuift zelf met een ronde naad over het formulier */
.pagina-contact .voet{margin-top:calc(var(--r-xl) * -1);border-radius:var(--r-xl) var(--r-xl) 0 0;}
@media (max-width:640px){.pagina-contact .voet{margin-top:-24px;border-radius:24px 24px 0 0;}}