:root{
  --bone:#F6F3ED;
  --bone-deep:#EFEBE2;
  --ink:#1B1A17;
  --ink-soft:#4A473F;
  --green:#22372E;
  --green-hover:#2E483C;
  --clay:#B0603C;
  --sand:#D8D2C6;
  --maxw:1220px;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:26px 0;
  transition:background .35s ease,padding .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--bone);
  padding:16px 0;
  border-bottom-color:var(--sand);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo: de naam, een streep en het huis uit het logo van Limbrix. Het huis
   staat er twee keer, licht voor op de foto en donker voor op de lichte balk.
   Gewone afbeeldingen, zodat het ook werkt als de pagina als bestand opent. */
.logo{
  display:inline-flex;align-items:center;gap:.36em;line-height:1;
  font-size:26px;color:var(--bone);transition:color .35s ease;
}
.logo__name{font-family:var(--serif);font-size:1em;letter-spacing:.15em;margin-right:-.15em}
.logo__sep{width:1px;height:.78em;background:currentColor;opacity:.45}
.logo__mark{width:auto;height:.96em;flex-shrink:0}
.logo__mark--donker{display:none}
.scrolled .logo__mark--licht,.menu-open .logo__mark--licht{display:none}
.scrolled .logo__mark--donker,.menu-open .logo__mark--donker{display:block}
.site-header .logo{font-size:clamp(32px,3.6vw,46px)}
.site-header .logo__name{letter-spacing:.13em;margin-right:-.13em}
.scrolled .logo,.menu-open .logo{color:var(--ink)}
.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:13px;letter-spacing:.08em;color:var(--bone);opacity:.9;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;
}
.nav a:hover{border-bottom-color:currentColor}
.scrolled .nav a{color:var(--ink-soft)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--bone);margin:5px 0;transition:.3s}
.scrolled .nav-toggle span{background:var(--ink)}

/* buttons */
.btn{
  display:inline-block;font-size:14px;letter-spacing:.02em;
  padding:15px 30px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;transition:.25s;font-family:var(--sans);
}
.btn--primary{background:var(--green);color:var(--bone);border-color:var(--green)}
.btn--primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--bone);border-color:rgba(246,243,237,.5)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(246,243,237,.08)}
.btn--outline{background:transparent;color:var(--green);border-color:var(--sand)}
.btn--outline:hover{border-color:var(--green)}
.btn-note{font-size:12.5px;color:var(--ink-soft);opacity:.75;margin-top:14px}
.hero .btn-note{color:var(--bone);opacity:.72}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,26,23,.5) 0%,rgba(27,26,23,.2) 35%,rgba(27,26,23,.8) 100%);
}
/* extra schaduw vanaf links, zodat de tekst altijd leesbaar blijft */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(27,26,23,.86) 0%,rgba(27,26,23,.72) 28%,rgba(27,26,23,.38) 55%,rgba(27,26,23,0) 82%);
}
.hero__content{position:relative;z-index:2;width:100%;padding-bottom:96px;color:var(--bone)}
.hero h1,.hero p.lead,.hero .eyebrow,.hero .proof{text-shadow:0 1px 14px rgba(27,26,23,.45)}
.eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone);opacity:.75;margin-bottom:22px;
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.6vw,74px);line-height:1.08;
  max-width:22ch;margin-bottom:24px;
}
.hero h1 span{display:block}
.hero p.lead{font-size:17px;line-height:1.75;max-width:52ch;color:rgba(246,243,237,.88);margin-bottom:34px}

/* dienstenregel onder de kop */
.hero p.services{
  font-size:15px;letter-spacing:.015em;line-height:1.7;
  color:rgba(246,243,237,.78);margin-bottom:34px;
}
.hero p.services em{font-style:italic;font-weight:500;color:#fff}
.reveal{
  display:inline-block;
  opacity:0;transform:translateY(.5em);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.is-revealed .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none}
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:2px;background:var(--sand)}
.tile{position:relative;height:440px;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,26,23,.1),rgba(27,26,23,.72))}
.tile--calm img{filter:grayscale(1) contrast(1.05)}
.tile__label{position:absolute;left:32px;right:32px;bottom:30px;z-index:2;color:var(--bone)}
.tile__label h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin-bottom:6px}
.tile__label span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* sections */
section{padding:110px 0}
.section-head{margin-bottom:52px;max-width:60ch}
.section-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin-bottom:16px;
}
.section-head p{color:var(--ink-soft);font-size:16.5px}

/* aanbod */
.aanbod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.card{background:var(--bone);border:1px solid var(--sand);border-radius:6px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.card:hover{border-color:var(--green);transform:translateY(-3px)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.04)}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--bone);color:var(--green);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:3px;
}
.badge--optie{background:var(--clay);color:var(--bone)}
.card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card__place{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:9px}
.card__title{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.25;margin-bottom:14px}
.card__meta{display:flex;gap:18px;font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.card__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--sand);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.price{font-family:var(--serif);font-size:25px}
.price small{font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.card__link{font-size:13px;color:var(--clay)}

/* bemiddeling band */
.band{background:var(--ink);color:var(--bone)}
.band .section-head h2{color:var(--bone)}
.band .section-head p{color:rgba(246,243,237,.72)}
.band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.band ul{list-style:none;display:grid;gap:2px}
.band li{padding:20px 0;border-bottom:1px solid rgba(246,243,237,.16);font-size:16px;display:flex;gap:16px}
.band li b{font-family:var(--serif);font-weight:400;font-size:20px;color:rgba(246,243,237,.45);min-width:34px}
.band .btn--outline{color:var(--bone);border-color:rgba(246,243,237,.45)}
.band .btn--outline:hover{border-color:var(--bone)}
.band .btn-note{color:rgba(246,243,237,.6)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.contact-info dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}
.contact-info dd{margin-bottom:26px;font-size:16.5px}
form{display:grid;gap:18px}
.field label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:var(--bone);border:1px solid var(--sand);border-radius:4px;
  padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.field textarea{resize:vertical;min-height:130px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-size:12.5px;color:var(--ink-soft);opacity:.8}
.form-req{margin-bottom:18px}
.req{color:var(--clay)}

/* footer */
.site-footer{background:var(--ink);color:rgba(246,243,237,.7);padding:70px 0 40px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
.site-footer .logo{color:var(--bone)}
.site-footer h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);margin-bottom:16px;font-weight:500}
.site-footer li{list-style:none;margin-bottom:9px}
.site-footer a:hover{color:var(--bone)}
.footer-bottom{border-top:1px solid rgba(246,243,237,.15);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px}


/* ervaring in de hero */
.proof{margin-bottom:30px;font-size:13px;opacity:.8}

/* bemiddeling op de homepagina, foto links en tekst rechts */
.muted{background:var(--bone-deep)}
.split{display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:center}
.split__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.split .section-head{margin-bottom:30px}
.split .section-head p+p{margin-top:14px}
.eyebrow--dark{color:var(--clay);opacity:1;margin-bottom:16px}
.steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin-bottom:34px}
.steps li{padding:14px 0;border-bottom:1px solid var(--sand);font-size:15px;color:var(--ink-soft);display:flex;gap:14px}
.steps b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--clay);min-width:26px}

/* aanbod zonder panden */
.empty{
  border:1px dashed var(--sand);border-radius:8px;background:var(--bone-deep);
  padding:56px 40px;text-align:center;
}
.empty h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin-bottom:12px}
.empty p{color:var(--ink-soft);max-width:54ch;margin:0 auto 26px}

/* formulier verstuurd of mislukt */
.form-status{font-size:14.5px;border-radius:4px;padding:14px 16px}
.form-status--ok{background:var(--green);color:var(--bone)}
.form-status--fout{background:rgba(176,96,60,.12);color:var(--clay)}

/* subpages */
.hero--sub{min-height:62svh}
.hero--sub h1{font-size:clamp(34px,4.6vw,58px);max-width:19ch}
.prose{max-width:68ch}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.2;margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft);margin-bottom:16px}
.prose ul{margin:0 0 22px 0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--clay)}
.prose ol{margin:0 0 22px 22px;color:var(--ink-soft)}
.prose ol li{padding-left:6px;margin-bottom:11px}
.prose a{color:var(--clay)}
.prose .meta{font-size:13.5px}
.facts{margin:26px 0 8px;border-top:1px solid var(--sand)}
.facts div{display:flex;gap:20px;padding:12px 0;border-bottom:1px solid var(--sand);font-size:15px}
.facts dt{color:var(--ink-soft);min-width:150px}
.cta-band{background:var(--green);color:var(--bone);text-align:center}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.cta-band p{opacity:.82;max-width:52ch;margin:0 auto 28px}
.cta-band .btn--ghost{border-color:rgba(246,243,237,.55)}
.cta-band .btn-note{color:rgba(246,243,237,.62)}

/* detail page */
.detail{padding-top:132px}
.crumbs{font-size:12.5px;color:var(--ink-soft);margin-bottom:26px}
.crumbs a{color:var(--clay)}
.detail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.detail-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,54px);line-height:1.1;max-width:20ch}
.detail-head .price{font-size:34px}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:520px;margin-bottom:70px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.gallery img:first-child{grid-row:1/3}
.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:start}
.specs{width:100%;border-collapse:collapse;margin:30px 0 40px}
.specs td{padding:14px 0;border-bottom:1px solid var(--sand);font-size:15px}
.specs td:first-child{color:var(--ink-soft);width:45%}
.detail-grid h2{font-family:var(--serif);font-weight:400;font-size:30px;margin-bottom:18px}
.detail-grid p{color:var(--ink-soft);margin-bottom:16px}
.sticky-form{position:sticky;top:110px;background:var(--bone-deep);border:1px solid var(--sand);border-radius:8px;padding:32px}
.sticky-form h3{font-family:var(--serif);font-weight:400;font-size:25px;margin-bottom:8px}
.sticky-form>p{font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.sticky-form .field input,.sticky-form .field textarea{background:var(--bone)}
.wa-inline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:13px;border:1px solid var(--sand);border-radius:4px;font-size:14px;transition:.25s}
.wa-inline:hover{border-color:#25D366}
.wa-inline svg{width:18px;height:18px;fill:#25D366}

/* de beeldtegels zijn een desktopmoment; onder deze breedte vallen ze weg */
@media(max-width:1180px){
  .tiles{display:none}
}

@media(max-width:900px){
  /* Harde ondergrens: de hero begint altijd onder de vaste balk, ook op een
     laag scherm waar de inhoud anders eronder zou schuiven. */
  .hero{padding-top:132px}
  /* .wrap zet hieronder padding als shorthand en wist de onderkant van de
     hero anders weg, vandaar dat dit de hele shorthand meeneemt. */
  .hero .hero__content{padding:0 22px 72px}
  .hero h1{margin-bottom:20px}
  .proof{gap:14px;margin-bottom:26px}

  .split{grid-template-columns:1fr;gap:36px}
  .split__photo img{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr}
  .empty{padding:40px 22px}
  .band-grid,.contact-grid,.detail-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  section{padding:76px 0}
  .wrap{padding:0 22px}
  .gallery{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .gallery img{height:240px}
  .gallery img:first-child{grid-row:auto;height:300px}
  .sticky-form{position:static}
  .nav{
    position:fixed;inset:0;background:var(--bone);flex-direction:column;
    justify-content:center;gap:26px;transform:translateX(100%);transition:transform .4s ease;
  }
  .nav.open{transform:translateX(0)}
  .nav a{color:var(--ink);font-size:22px;font-family:var(--serif);letter-spacing:0;opacity:1}
  .site-header{padding:18px 0}
  .site-header.scrolled{padding:12px 0}
  .site-header .logo{font-size:28px;position:relative;z-index:70}
  .nav a{padding:6px 0}
  .nav-toggle{display:block;position:relative;z-index:70}
  .nav-toggle.open span{background:var(--ink)}
  .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .row2{grid-template-columns:1fr}
  .menu-open .nav-toggle span{background:var(--ink)}
}

/* telefoon */
@media(max-width:600px){
  .hero{padding-top:110px}
  .hero .hero__content{padding:0 22px 56px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .hero p.services{font-size:14px;margin-bottom:22px}
  .hero p.lead{font-size:16px;margin-bottom:26px}
  .hero--sub{min-height:auto}
  .hero--sub .hero__content{padding-bottom:64px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn,.empty .btn,form .btn,.split .btn,.band .btn{display:block;width:100%;text-align:center}
  section{padding:60px 0}
  .section-head{margin-bottom:34px}
  .section-head p{font-size:16px}
  .split{gap:28px}
  .band-grid,.contact-grid{gap:34px}
  .band li{padding:16px 0;font-size:15px}
  .contact-info dd{margin-bottom:20px}
  .contact-info a{display:inline-block;padding:4px 0}
  .empty{padding:32px 20px}
  /* iOS zoomt in op velden met tekst kleiner dan 16px */
  .field input,.field select,.field textarea{font-size:16px}
  .detail{padding-top:100px}
  .facts div{flex-direction:column;gap:2px}
  .facts dt{min-width:0;font-size:13px}
  .site-footer{padding:56px 0 40px}
  .site-footer li{margin-bottom:4px}
  .site-footer li a{display:inline-block;padding:5px 0}
  .footer-bottom{flex-direction:column;gap:8px}
}