/* Kennismaken – in dezelfde rustige stijl als de andere tabs */

.contact-page .contact-main{
  background:#f6efe4;
}

.contact-page .contact-hero{
  padding:18px 0 14px;
}

.contact-page .contact-hero .eyebrow,
.contact-page .contact-block .eyebrow{
  color:#a36d10;
  font-weight:700;
  letter-spacing:.12em;
  font-size:.78rem;
}

.contact-page .contact-hero h1{
  max-width:1180px;
  margin:.35rem 0 .55rem;
  color:#123f35;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.2rem,3vw,3.15rem);
  line-height:1.04;
}

.contact-page .contact-lead{
  max-width:1080px;
  margin:0;
  color:#173b34;
  font-size:1rem;
  line-height:1.45;
}

.contact-page .contact-content{
  padding:18px 0 24px;
}

.contact-page .contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.contact-page .contact-block{
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  min-height:220px;
  padding:24px 28px;
  border:1px solid rgba(18,63,53,.15);
  border-left:4px solid #c99222;
  border-radius:20px;
  background:#f8f1e7;
}

.contact-page .contact-number{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#d39517;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:1.3rem;
}

.contact-page .contact-block h2{
  margin:.25rem 0 .55rem;
  color:#123f35;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.65rem;
  line-height:1.08;
}

.contact-page .contact-block p{
  margin:0 0 .65rem;
  color:#173b34;
  font-size:.92rem;
  line-height:1.45;
}

.contact-page .contact-block .kvk{
  margin-top:.8rem;
}

.contact-page .contact-actions{
  display:flex;
  gap:.75rem;
  margin-top:.8rem;
}

.contact-page .contact-actions .btn{
  padding:.62rem 1rem;
  font-size:.85rem;
}

.contact-page .btn-outline{
  border:1px solid #0f4a3f;
  color:#0f4a3f;
  background:transparent;
}

.contact-page .contact-note{
  margin-top:.65rem !important;
  font-size:.72rem !important;
  opacity:.75;
}

@media (min-width:901px){
  .contact-page{
    min-height:100vh;
    display:grid;
    grid-template-rows:var(--header-h) minmax(0,1fr) 74px;
    overflow:hidden;
  }

  .contact-page .contact-main{
    grid-row:2;
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
  }

  .contact-page .contact-content{
    display:flex;
    align-items:center;
    padding-top:10px;
    padding-bottom:16px;
  }

  .contact-page .contact-grid{
    width:100%;
  }

  .contact-page .footer{
    grid-row:3;
  }
}

@media (max-width:900px){
  .contact-page .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-page .contact-block{
    grid-template-columns:44px 1fr;
    padding:20px;
  }
}


/* Kennismaken – compacter en typografisch gelijk aan Ervaring */
@media (min-width:901px){
  .contact-page .contact-hero{
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .contact-page .contact-hero h1{
    font-size:clamp(2.05rem,2.45vw,2.75rem) !important;
    line-height:1 !important;
    margin:.22rem 0 .4rem !important;
    max-width:1150px !important;
  }

  .contact-page .contact-lead{
    font-size:.88rem !important;
    line-height:1.32 !important;
    max-width:1080px !important;
  }

  .contact-page .contact-content{
    align-items:flex-start !important;
    padding-top:18px !important;
    padding-bottom:10px !important;
  }

  .contact-page .contact-grid{
    gap:18px !important;
  }

  .contact-page .contact-block{
    min-height:0 !important;
    height:auto !important;
    padding:16px 20px !important;
    grid-template-columns:44px 1fr !important;
    gap:14px !important;
  }

  .contact-page .contact-number{
    width:36px !important;
    height:36px !important;
    font-size:1rem !important;
  }

  .contact-page .contact-block h2{
    font-size:1.35rem !important;
    margin:.18rem 0 .36rem !important;
  }

  .contact-page .contact-block p{
    font-size:.82rem !important;
    line-height:1.32 !important;
    margin-bottom:.4rem !important;
  }

  .contact-page .contact-block .kvk{
    margin-top:.5rem !important;
    margin-bottom:.35rem !important;
  }

  .contact-page .contact-actions{
    margin-top:.3rem !important;
    gap:.55rem !important;
    justify-content:flex-start !important;
  }

  .contact-page .contact-actions .btn{
    padding:.46rem .8rem !important;
    font-size:.78rem !important;
  }

  .contact-page .contact-note{
    margin-top:.4rem !important;
    font-size:.68rem !important;
  }
}


/* Kennismaken – laatste uitlijning */
@media (min-width:901px){
  .contact-page .contact-hero h1{
    margin-bottom:.85rem !important;
  }

  .contact-page .contact-lead{
    margin-top:0 !important;
  }

  .contact-page .contact-grid{
    align-items:start !important;
  }

  .contact-page .contact-block{
    align-items:start !important;
  }

  .contact-page .contact-number{
    margin-top:2px !important;
    align-self:start !important;
  }

  .contact-page .contact-block > div{
    padding-top:0 !important;
  }

  .contact-page .contact-block .eyebrow{
    margin-top:0 !important;
    line-height:1.1 !important;
  }
}


/* Kennismaken – geschakelde opstelling onder de intro */
@media (min-width:901px){
  .contact-page .contact-content{
    display:block !important;
    padding-top:12px !important;
    padding-bottom:10px !important;
  }

  .contact-page .contact-grid{
    position:relative !important;
    display:block !important;
    min-height:300px !important;
    width:100% !important;
  }

  .contact-page .contact-block{
    position:absolute !important;
    width:46% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
  }

  /* Blok 1 begint direct onder de introductietekst, links uitgelijnd */
  .contact-page .contact-block:nth-child(1){
    left:0 !important;
    top:8px !important;
  }

  /* Blok 2 iets naar rechts en lager: geschakeld */
  .contact-page .contact-block:nth-child(2){
    right:0 !important;
    top:92px !important;
  }
}


/* Kennismaken – compacter, vierkanter, meer naar rechts en dichter geschakeld */
@media (min-width:901px){
  .contact-page .contact-grid{
    position:relative !important;
    display:block !important;
    min-height:270px !important;
    width:100% !important;
  }

  .contact-page .contact-block{
    position:absolute !important;
    width:39% !important;
    min-height:0 !important;
    border-radius:14px !important;
    padding:15px 18px !important;
  }

  /* Blok 1: start meer naar rechts, net onder intro */
  .contact-page .contact-block:nth-child(1){
    left:10% !important;
    top:8px !important;
  }

  /* Blok 2: rechts en slechts iets lager */
  .contact-page .contact-block:nth-child(2){
    right:8% !important;
    top:74px !important;
  }

  .contact-page .contact-block h2{
    font-size:1.28rem !important;
  }

  .contact-page .contact-block p{
    font-size:.8rem !important;
  }

  .contact-page .contact-number{
    width:34px !important;
    height:34px !important;
  }
}