/* Contact page — v0094 cleanup
   Scoped page layout only.
   Do not style global header/footer/buttons/cards here.
*/
.contact-page .contact-hero{
  position:relative;
  padding:118px 0 72px;
  text-align:center;
  background:var(--cream);
  overflow:hidden;
}
.contact-page .contact-hero .eyebrow{justify-content:center;}
.contact-page .contact-hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.8rem,5.4vw,4.9rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:22px auto 20px;
  max-width:12ch;
}
.contact-page .contact-hero h1 em{color:var(--terracotta);font-style:italic;}
.contact-page .contact-hero p{max-width:650px;margin:0 auto;color:var(--ink-soft);font-size:1.12rem;line-height:1.75;}

.contact-page .contact-section{padding:24px 0 150px;}
.contact-page .contact-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.25fr);gap:58px;align-items:start;}
.contact-page .contact-form-card{
  background:rgba(250,246,236,.82);
  border:1px solid rgba(44,38,32,.10);
  border-radius:24px;
  box-shadow:0 24px 60px -42px rgba(44,38,32,.45);
}
.contact-page .contact-info{
  display:grid;
  gap:24px;
  min-width:0;
}
.contact-page .contact-form-card h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.35rem);font-weight:400;line-height:1.1;margin-bottom:18px;}
.contact-page .contact-list{list-style:none;display:grid;gap:18px;margin:0;}
.contact-page .contact-list li{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start;color:var(--ink-soft);}
.contact-page .contact-list strong{display:block;color:var(--ink);font-weight:700;margin-bottom:2px;}
.contact-page .contact-list a{color:var(--ink-soft);text-decoration:none;transition:color .2s;}
.contact-page .contact-list a:hover{color:var(--terracotta);}
.contact-page .contact-icon{width:34px;height:34px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--terracotta);font-size:1rem;}
.contact-page .contact-note{color:var(--ink-soft);font-size:.95rem;line-height:1.65;border-left:1px solid rgba(181,98,62,.42);padding-left:18px;}

.contact-page .contact-visual{
  position:relative;
  margin:0;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--sand);
  box-shadow:0 24px 58px -42px rgba(44,38,32,.50);
}
.contact-page .contact-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.contact-page .contact-visual figcaption{
  position:absolute;
  left:16px;
  bottom:16px;
  background:rgba(250,246,236,.92);
  color:var(--ink);
  border-radius:999px;
  padding:8px 14px;
  font-size:.84rem;
  font-weight:700;
  backdrop-filter:blur(6px);
}

.contact-page .contact-form-card{padding:38px 38px 60px;}
.contact-page .contact-form-card > p{color:var(--ink-soft);margin-bottom:28px;}
.contact-page .contact-form{display:grid;gap:18px;}
.contact-page .contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-page .contact-form label{display:grid;gap:8px;font-size:.9rem;font-weight:700;color:var(--ink);}
.contact-page .contact-form input,
.contact-page .contact-form textarea,
.contact-page .contact-form select{
  width:100%;border:1px solid rgba(44,38,32,.16);border-radius:16px;background:#fffaf1;
  padding:14px 16px;font:inherit;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.contact-page .contact-form textarea{min-height:150px;resize:vertical;}
.contact-page .contact-form input:focus,.contact-page .contact-form textarea:focus,.contact-page .contact-form select:focus{border-color:rgba(181,98,62,.55);box-shadow:0 0 0 4px rgba(181,98,62,.12);background:#fff;}
.contact-page .contact-form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;}
.contact-page .contact-form-help{font-size:.86rem;color:var(--ink-soft);max-width:330px;}
.contact-page .contact-submit{border:none;cursor:pointer;}

@media(max-width:900px){
  .contact-page .contact-grid{grid-template-columns:1fr;}
  .contact-page .contact-section{padding-bottom:84px;}
}
@media(max-width:620px){
  .contact-page .contact-hero{padding-bottom:28px;}
  .contact-page .contact-section{padding-top:18px;}
  .contact-page .contact-grid{gap:34px;}
  .contact-page .contact-form-card{padding:28px 22px;}
  .contact-page .contact-form-row{grid-template-columns:1fr;}
  .contact-page .contact-form-actions{align-items:flex-start;flex-direction:column;}
}

/* v0096 Contact form placement only.
   Reusable form styling lives in global Form System.
*/
.contact-page .form-card{
  margin-top:4px;
}

.contact-page .form-note{
  max-width:44rem;
}

/* v0097 Contact submit mobile fallback */
@media(max-width:680px){
  .contact-page .form-actions,
  .contact-page form .form-actions{
    width:100%;
  }

  .contact-page .form-actions button,
  .contact-page .form-actions .btn,
  .contact-page .form-actions .btn-submit{
    width:100% !important;
    max-width:none;
    justify-content:center;
  }
}

/* v0098 Contact layout recovery
   Restores stable contact structure; only submit alignment is handled here.
*/
@media(max-width:680px){
  .contact-page .contact-form-actions.form-actions{
    width:100%;
    align-items:stretch;
  }

  .contact-page .contact-form-actions.form-actions .contact-submit{
    width:100% !important;
  }
}

/* v0100 Contact form contract implementation
   Only form placement refinements; global Form System owns controls/buttons/states.
*/
.contact-page .contact-form.form-card{
  width:100%;
}

.contact-page .contact-form .form-message{
  grid-column:1 / -1;
}

.contact-page .contact-form .form-note{
  margin-top:0;
}

@media(max-width:680px){
  .contact-page .contact-form{
    margin-top:4px;
  }
}

/* v0103 Contact form visual polish */
.contact-page .contact-form .form-grid{
  gap:14px 22px;
}

.contact-page .contact-form-actions.form-actions{
  margin-top:4px;
}

@media(max-width:680px){
  .contact-page .contact-form .form-required-note{
    margin-bottom:14px;
  }

  .contact-page .contact-form .form-field{
    margin-bottom:18px;
  }
}

/* v0104 Contact form label marker polish */
.contact-page .contact-form .form-required-note{
  margin-top:-2px;
}

.contact-page .contact-form .form-label{
  margin-bottom:0;
}

/* v0105 Contact form label wrapper guard */
.contact-page .contact-form .form-label .form-label-line{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.contact-page .contact-form .form-label .form-label-line span{
  display:inline-flex !important;
}

/* v0106 Contact form clean label validation */
.contact-page .contact-form .form-error{
  margin-top:2px;
}

.contact-page .contact-form .form-message{
  margin-bottom:20px;
}

.contact-page .contact-form .form-label{
  margin-bottom:0;
}

/* v0107 Contact form final visual polish */
.contact-page .contact-form{
  margin-top:2px;
}

.contact-page .contact-form .form-grid{
  gap:10px 22px;
}

.contact-page .contact-form .form-field{
  margin-bottom:16px;
}

.contact-page .contact-form textarea.form-control{
  min-height:116px;
}

.contact-page .contact-form-actions.form-actions{
  margin-top:0;
}

/* v0183 Unified page H1 size
   All main page H1 titles use the homepage H1 scale.
*/
:where(
  .home-hero h1,
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0183 Safety net for top-level page heroes */
body :is(
  #home-hero-title,
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0184 Simple fixed desktop H1 scale
   Desktop:
   - homepage H1: 85px
   - all other main H1s: 70px
   Mobile/tablet remains safe and consistent.
*/
:root{
  --ls-page-h1-size:70px;
  --ls-home-h1-size:90px;
  --ls-mobile-page-h1-size:clamp(2.55rem, 11vw, 4.35rem);
}

:where(
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size) !important;
}

:where(.home-hero h1, #home-hero-title){
  font-size:var(--ls-home-h1-size) !important;
}

body :is(
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size) !important;
}

@media(max-width:680px){
  :where(
    .home-hero h1,
    #home-hero-title,
    .rh-title,
    .podcast-hero h1,
    .podcast-title,
    .aanbod-hero h1,
    .team-title,
    .blog-hero h1,
    .blog-post-hero-copy h1,
    .contact-hero h1,
    .guestblog-hero h1,
    .privacy-hero h1
  ),
  body :is(
    #ruimte-hero-title,
    #team-title,
    .blog-post-hero-copy > h1,
    .contact-hero-title,
    .guestblog-title,
    .privacy-title
  ){
    font-size:var(--ls-mobile-page-h1-size) !important;
  }
}



/* v0263 Contact info inline layout
   Contact details and image are no longer wrapped in a visual card.
   The hero intro remains the only intro text; contact image and contact methods flow directly underneath.
*/
.contact-page .contact-info{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

@media(max-width:680px){
  .contact-page .contact-info{
    gap:22px;
  }

  .contact-page .contact-visual{
    border-radius:22px;
  }

  .contact-page .contact-list{
    gap:16px;
  }
}

/* v0265 Contact mobile hero-to-image rhythm
   Keeps the contact image closer to the hero intro on mobile, aligned with the Team page image rhythm.
*/
@media(max-width:680px){
  .contact-page .contact-section{
    padding-top:6px;
  }

  .contact-page .contact-visual{
    margin-top:0;
  }
}



/* v0267 Contact mobile hero-to-image rhythm fix
   The previous mobile gap was split between hero padding-bottom and section padding-top.
   Keep the image spacing in one place so it matches the team page image rhythm.
*/
@media(max-width:680px){
  .contact-page .contact-hero{
    padding-bottom:0 !important;
  }

  .contact-page .contact-section{
    padding-top:34px !important;
  }

  .contact-page .contact-grid{
    row-gap:34px;
  }
}