/* SellYourOwnHouse — land- en regiopagina's + gedeeld kader (SYOH-LANDREGIO-20260930).
   Bouwt op syoh.css (tokens, knoppen, kop, voet, .rv). Geen eigen opacity:0 (ANIMATIE-VAL):
   verbergen gebeurt alleen via .rv in syoh.css. Amber alleen in de zon. */

/* ---------- hero met landbeeld ---------- */
.lp-hero{min-height:min(88svh,880px)}
.lp-hero .hero-img{object-position:62% 55%}
.lp-hero .hero-in{padding-top:168px;padding-bottom:132px}
.lp-hero h1{font-size:clamp(2.5rem,4.4vw,4.1rem)}
.crumbs{margin:0 0 22px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font:500 .875rem/1.4 var(--sans)}
.crumbs li{display:inline-flex;align-items:center;color:rgba(255,255,255,.92)}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 12px;border:solid rgba(255,255,255,.7);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.crumbs a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration-color:#fff}
.crumbs [aria-current]{color:rgba(255,255,255,.92)}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;max-width:640px}
.lp-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(15,23,42,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 .88rem/1.2 var(--sans);color:#fff}
.lp-chips svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--terra-lt);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lp-cards{display:none}
@media (min-width:1100px){
  .lp-hero .hero-in{display:grid;grid-template-columns:minmax(0,min(700px,52vw)) 1fr;align-items:end;gap:40px}
  .lp-cards{display:grid;gap:18px;justify-self:end;width:340px;padding-bottom:6px}
  .lp-cards .fc-docs{position:relative;right:auto;top:auto;width:auto;transform:rotate(1.5deg)}
  .lp-cards .fc-docs li{align-items:flex-start;font-size:.9rem;line-height:1.35}
  .lp-cards .fc-docs .tick{margin-top:1px}
  .lp-cards .fc-more{margin:8px 0 0;font:600 .82rem/1.3 var(--sans);color:var(--terra-ink)}
  .lp-cards .fc-towns{transform:rotate(-1.5deg);margin-left:-28px;margin-right:24px}
}
@media (max-width:1099.98px){
  .lp-hero::before{background:linear-gradient(180deg,rgba(15,23,42,.5) 0,rgba(15,23,42,.8) 150px,rgba(15,23,42,.84) 100%)}
}
@media (max-width:767.98px){
  .lp-hero{min-height:0}
  .lp-hero .hero-img{object-position:60% 62%}
  /* bovenaan een strook waar het beeld zichtbaar is (geen hero zonder beeld boven de vouw), tekst op het donkere deel */
  .lp-hero .hero-in{padding-top:228px;padding-bottom:88px}
  .lp-hero .hero-img{height:62%;min-height:340px}
  .lp-hero::before{background:linear-gradient(180deg,rgba(15,23,42,.5) 0,rgba(15,23,42,.08) 100px,rgba(15,23,42,.2) 150px,rgba(15,23,42,.86) 214px,var(--dark) 340px,var(--dark) 100%)}
  .crumbs{margin-bottom:16px}
  .lp-chips{margin-top:22px;display:grid;grid-template-columns:1fr 1fr}
  .lp-chips li{border-radius:14px;padding:10px 12px;font-size:.84rem}
}

/* ---------- hoofdraster: inhoud + plakkende formulierkaart ---------- */
.lp-body{background:var(--cream);padding:clamp(56px,7vw,104px) 0 var(--sec)}
.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(40px,5vw,80px);align-items:start}
.lp-main>section+section{margin-top:clamp(56px,6vw,88px)}
.lp-main h2{font-size:clamp(1.85rem,3vw,2.7rem);margin:0 0 18px}
.lp-main .sec-intro{margin:0 0 28px}
/* regio: aandachtspunten */
.lp-watch{background:#fff;border-radius:24px;padding:clamp(24px,3.4vw,44px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line);position:relative;overflow:hidden}
.lp-watch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--terra)}
.lp-points{counter-reset:p;display:grid;gap:0}
.lp-points li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.lp-points li:first-child{border-top:0;padding-top:4px}
.lp-points li::before{content:counter(p,decimal-leading-zero);font:500 1.5rem/1.1 var(--serif);color:var(--terra-ink)}
.lp-towns{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.lp-towns li{padding:6px 12px;border-radius:999px;background:var(--cream);font:600 .85rem/1.3 var(--sans);color:var(--navy)}
.lp-towns-l{font:600 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:24px 0 0}
.lp-watch .text-link{margin-top:22px}
/* waar we mee helpen */
.lp-help{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-help li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r-card);background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05),inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.lp-help li:hover{transform:translateY(-3px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line)}
.lp-help p{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
/* papieren */
.lp-docs{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid var(--navy)}
.lp-docs li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-2);font-size:1rem;line-height:1.5}
.lp-docs .tick{margin-top:2px}
.lp-docs .tick svg{stroke-dashoffset:0}
/* verkoop in stappen */
.lp-steps{position:relative;background:var(--navy);color:#fff;border-radius:24px;padding:clamp(28px,3.6vw,48px);overflow:hidden}
.lp-steps::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 36px rgba(255,255,255,.03)}
.lp-steps>*{position:relative}
.lp-steps h2{color:#fff}
.lp-steps p:not(.label){font:400 clamp(1.1rem,1.5vw,1.25rem)/1.65 var(--sans);color:rgba(255,255,255,.92);max-width:62ch;margin:0 0 28px}
/* plakkende formulierkaart */
.lp-side{position:relative}
.lp-form{border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -36px rgba(15,23,42,.5),inset 0 0 0 1px var(--line);scroll-margin-top:calc(var(--top-vis) + 16px)}
.lp-form-top{position:relative;background:var(--terra-form);color:#fff;padding:22px 28px 20px;overflow:hidden}
.lp-form-top .label{margin-bottom:10px}
.lp-form .f-row{gap:0 12px}
.lp-form .f label{font-size:.84rem;margin-bottom:6px}
.lp-form-top .contact-sun{left:auto;right:16px;bottom:-1px;width:96px}
.lp-form-top>*:not(svg){position:relative}
.lp-form-top h2{color:#fff;font-size:clamp(1.6rem,2.2vw,1.95rem);margin:0 0 8px;max-width:14ch}
.lp-form-top p{margin:0;color:#fff;font-size:.98rem;line-height:1.5;max-width:calc(100% - 96px)}
.lp-form-body{padding:20px 28px 22px}
.lp-form .f{margin-bottom:12px}
.lp-form .f textarea{min-height:72px;height:72px}
.lp-form .msg{margin:0 0 14px}
.lp-form .msg-ok{color:#1D5C1D}.lp-form .msg-err{color:#8A1F1F}
.lp-form .msg:focus{outline:3px solid var(--terra);outline-offset:3px}
.lp-form .note{margin-top:10px}
/* plakt alleen als de kaart met kop erbij in beeld past; met een melding erboven niet */
@media (min-width:1100px) and (min-height:860px){
  .lp-side:not(.has-msg){position:sticky;top:calc(var(--top-vis) + 20px);transition:top .4s var(--ease)}
}
@media (min-width:1100px) and (max-width:1279.98px){.lp-grid{grid-template-columns:minmax(0,1fr) 400px}}
@media (max-width:1099.98px){
  .lp-grid{grid-template-columns:1fr}
  .lp-side{max-width:640px}
}
@media (max-width:767.98px){
  .lp-help,.lp-docs{grid-template-columns:1fr}
  .lp-form-top{padding:22px 20px 20px}
  .lp-form-body{padding:18px 18px 22px}
  .lp-form-top .contact-sun{width:88px;right:10px}
  .lp-watch{border-radius:20px}
  .lp-steps{border-radius:20px}
}

/* ---------- FAQ ---------- */
.lp-faq{padding:var(--sec) 0;background:var(--white)}

/* ---------- regio's in dit land ---------- */
.lp-regions{padding:var(--sec) 0;background:var(--cream)}
.lp-regions .region-list a{grid-template-columns:56px 1.3fr 2fr 40px}
@media (max-width:1099.98px){.lp-regions .region-list a{grid-template-columns:44px 1fr 32px}.lp-regions .rg-towns{grid-column:2/3;grid-row:2;margin-top:-10px}.lp-regions .rg-go{grid-row:1/3;grid-column:3}.lp-regions .rg-n{grid-column:1;grid-row:1}.lp-regions .rg-name{grid-column:2;grid-row:1}}
@media (max-width:767.98px){.lp-regions .region-list a{grid-template-columns:56px 1fr 24px}.lp-regions .rg-towns{grid-column:2;grid-row:2;margin:0}.lp-regions .rg-go{grid-row:1/3}.lp-regions .rg-thumb{grid-row:1/3}}

/* ---------- gidsen ---------- */
.lp-guides{padding:var(--sec) 0;background:var(--sand)}
.lp-guides .guide-group{border-top:0;padding:0}
.lp-guides .gg-body h2{margin:0 0 12px}
.lp-guides .gg-body .sec-intro{margin:0 0 20px}
.lp-guides .gg-list a{padding:20px 0}
.lp-guides .gg-media{box-shadow:var(--sh-card)}
@media (max-width:767.98px){.lp-guides .gg-list a{background:#fff;padding:18px 18px 18px 14px}}

/* ---------- movingcompare-kaart ---------- */
.lp-mc-sec{padding:var(--sec) 0 0;background:var(--cream);position:relative;z-index:1}
.lp-mc{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(24px,4vw,56px);background:var(--navy);color:#fff;border-radius:28px;padding:clamp(28px,4.4vw,64px);position:relative;overflow:hidden;box-shadow:0 40px 80px -40px rgba(27,58,75,.55)}
.lp-mc h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.8rem);margin:0 0 16px}
.lp-mc p:not(.label){color:rgba(255,255,255,.9);font-size:1.06rem;max-width:52ch;margin:0 0 28px}
.lp-mc-art{width:100%;height:auto;max-width:440px;justify-self:end;overflow:visible}
.mc-route{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 10}
.mc-dot{fill:var(--terra)}
.mc-dot-2{fill:#fff}
.mc-ring{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.5}
.mc-house{fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.mc-van{transform-box:fill-box}
.js-anim .mc-van{animation:mcvan 9s var(--ease) infinite alternate}
@keyframes mcvan{0%{transform:translateX(0)}100%{transform:translateX(150px)}}
@media (max-width:899.98px){.lp-mc{grid-template-columns:1fr}.lp-mc-art{justify-self:start;max-width:320px}}

/* ---------- andere landen ---------- */
.lp-others{padding:var(--sec) 0;background:var(--cream)}
.lp-others .country-grid{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:0;gap:14px}
.lp-others .cc{aspect-ratio:3/4}
.lp-others .cc-name{left:16px;right:16px;bottom:52px;font-size:clamp(1.1rem,1.4vw,1.35rem)}
.lp-others .cc-go{left:16px;right:auto;bottom:14px;width:30px;height:30px}
.lp-disc{max-width:760px;margin:clamp(40px,5vw,64px) 0 0;font-size:.9rem;color:var(--muted);line-height:1.6;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:1099.98px){.lp-others .country-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767.98px){
  .lp-others .country-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lp-others .country-grid li:last-child:nth-child(odd){grid-column:span 2}
  .lp-others .country-grid li:last-child:nth-child(odd) .cc{aspect-ratio:2/1}
  .lp-others .cc-name{left:14px;bottom:48px}
  .lp-others .cc-go{left:14px;bottom:12px}
}

/* ---------- gedeeld kader (oude subpagina's die kader_kop nog gebruiken) ---------- */
.kader{--sage:var(--terra-ink);padding:clamp(36px,5vw,64px) 0 var(--sec)}
.kader h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;margin:0 0 18px}
.kader h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;margin:40px 0 14px}
.kader h3{margin:28px 0 10px}
.kader .prose{max-width:760px;padding:0 0 24px}
.kader .prose li{margin:6px 0}
.kader .prose ul,.kader .prose ol{padding-left:1.3em;margin:0 0 1em}
.kader .prose ul{list-style:disc}.kader .prose ol{list-style:decimal}
.kader .prose ul.check,.kader .prose ol.gg-list{list-style:none;padding-left:0}
.kader .prose a:not(.btn){color:var(--navy);text-decoration-color:var(--terra);text-underline-offset:3px}
.kader .lead{font-size:1.2rem;line-height:1.6;color:var(--muted);margin:0 0 24px}
.kader .btn{background:var(--terra);color:#fff;margin-top:6px}
.kader .btn:hover{background:var(--terra-h)}
.kader .card{background:#fff;border-radius:var(--r-card);padding:clamp(20px,3vw,32px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line)}
.kader .card h2{margin-top:0}
.kader .pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.kader .pills span{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:6px 12px;font-size:.85rem}
.kader .two{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:10px 0 34px}
.kader ul.check{list-style:none;padding:0;margin:0}
.kader ul.check li{padding:6px 0 6px 30px;position:relative}
.kader ul.check li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:11px;border:solid var(--terra);border-width:0 2px 2px 0;transform:rotate(45deg)}
.kader details{background:#fff;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:14px 18px;margin:0 0 10px}
.kader summary{cursor:pointer;font-weight:600;color:var(--navy);min-height:32px}
.kader .landen{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 30px}
.kader .landen a{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;font:600 .92rem/1.2 var(--sans);color:var(--navy);min-height:44px;display:inline-flex;align-items:center;transition:background-color .25s,color .25s}
.kader .landen a:hover{background:var(--navy);color:#fff}
.kader .gidsen{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:0 0 10px}
.kader .gidsen a{display:block;background:#fff;border-radius:16px;padding:18px 20px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.kader .gidsen a:hover{transform:translateY(-3px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line)}
.kader .gidsen a strong{display:block;font:500 1.15rem/1.3 var(--serif);color:var(--navy);margin:0 0 6px}
.kader .gidsen a span{font-size:.9rem;color:var(--muted)}
.kader .verhuis{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;text-align:left;background:var(--navy);color:#fff;border-radius:var(--r-card);padding:clamp(22px,3vw,36px);margin:32px 0 0}
.kader .verhuis h2{color:#fff;font-size:clamp(1.3rem,2vw,1.7rem);margin:0 0 6px}
.kader .verhuis p{margin:0;color:rgba(255,255,255,.88);font-size:.98rem;max-width:620px}
.kader .verhuis .btn{background:#fff;color:var(--navy)}
.kader .disc{font-size:.86rem;color:var(--muted);padding:0 0 20px}
.kader .ok{background:#E8F6E8;color:#1D5C1D;padding:12px 14px;border-radius:12px;margin-bottom:12px}
.kader .bad{background:#FDECEC;color:#8A1F1F;padding:12px 14px;border-radius:12px;margin-bottom:12px}
.kader table{border-collapse:collapse;width:100%;font-size:.95rem}
.kader th,.kader td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
@media (max-width:860px){.kader .two{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.js-anim .mc-van{animation:none}}
@media print{.lp-side,.lp-cards,.lp-mc-sec{display:none}.lp-grid{grid-template-columns:1fr}}
.lp-others .cc::after{background:linear-gradient(0deg,rgba(15,23,42,.9) 0,rgba(15,23,42,.62) 42%,rgba(15,23,42,0) 72%)}