/* Zakelijke pagina (sjabloon alp-portret-zakelijk), bovenop landing.css. Alles binnen .alp-hpl--zak.
   Geen SVG-filters, blend-modes of backdrop-filter (Safari). */

/* begeleidend kaartje met logo-plek (A6 staand) */
.alp-hpl--zak .zcard{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;aspect-ratio:105/148;padding:1.1em .9em;background:#FBF9F4;border-radius:2px;box-shadow:0 1px 2px rgba(44,44,44,.14),0 12px 26px rgba(40,32,22,.2);text-align:center;font-size:clamp(.62rem,.45rem + .5vw,.8rem);transform:rotate(-5deg)}
.alp-hpl--zak .zcard__logo{display:flex;align-items:center;justify-content:center;width:4.4em;height:4.4em;border:1px dashed var(--goud-600);border-radius:50%;font-size:.85em;line-height:1.1;color:var(--goud-700)}
.alp-hpl--zak .zcard b{font-family:var(--font-display);font-weight:500;font-size:1.7em;line-height:1.05;color:var(--inkt-900)}
.alp-hpl--zak .zcard__text{max-width:14em;font-size:.9em;line-height:1.45;color:var(--text-muted)}

/* hero: lijst met kaartje ervoor */
.alp-hpl--zak .zhero{position:relative}
.alp-hpl--zak .zhero .frame{width:min(78%,400px)}
.alp-hpl--zak .zcard--hero{right:clamp(.75rem,5%,3.5rem);bottom:clamp(1rem,7%,4rem);width:clamp(118px,30%,180px)}

/* kort gezegd */
.alp-hpl--zak .zfacts{display:grid;gap:var(--space-4);margin:0}
@media (min-width:800px){.alp-hpl--zak .zfacts{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}}
.alp-hpl--zak .zfacts>div{padding:var(--space-6);background:var(--papier-50);border:1px solid var(--line-hairline);border-radius:var(--radius-md)}
.alp-hpl--zak .zfacts dt{margin:0 0 .4rem;font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--text-heading)}
.alp-hpl--zak .zfacts dd{margin:0;font-size:var(--text-sm);line-height:1.7;color:var(--text-body)}

/* waarom */
.alp-hpl--zak .zwhy{display:grid;gap:var(--space-4)}
@media (min-width:700px){.alp-hpl--zak .zwhy{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:1000px){.alp-hpl--zak .zwhy{grid-template-columns:repeat(4,minmax(0,1fr))}}
.alp-hpl--zak .zwhy li{display:grid;gap:.4rem;align-content:start;padding:var(--space-6);background:var(--papier-0);border:1px solid var(--line-hairline);border-top:2px solid var(--goud-300);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-muted)}
.alp-hpl--zak .zwhy b{font-size:var(--text-base);color:var(--inkt-900)}

/* branches */
.alp-hpl--zak .zsectors{display:grid;gap:var(--space-6)}
@media (min-width:700px){.alp-hpl--zak .zsectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.alp-hpl--zak .zsectors{grid-template-columns:repeat(6,minmax(0,1fr))}.alp-hpl--zak .zsector{grid-column:span 2}.alp-hpl--zak .zsector:nth-child(4){grid-column:2 / span 2}}
.alp-hpl--zak .zsector{display:flex;flex-direction:column;background:var(--papier-0);border:1px solid var(--line-hairline);border-radius:var(--radius-md);overflow:hidden}
.alp-hpl--zak .zsector__art{aspect-ratio:4/3;padding:1.5rem}
.alp-hpl--zak .zsector__art .frame{width:44%}
.alp-hpl--zak .zsector__art .frame--land{width:78%}
.alp-hpl--zak .zsector__text{display:grid;gap:.4rem;padding:var(--space-5) var(--space-6) var(--space-6);border-top:1px solid var(--line-hairline);font-size:var(--text-sm);color:var(--text-muted)}
.alp-hpl--zak .zsector h3{font-size:var(--text-xl);font-weight:400}
.alp-hpl--zak .zsector__moment{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-accent)}

/* logo */
.alp-hpl--zak .zlogo{position:relative;min-height:340px;border-radius:var(--radius-md)}
.alp-hpl--zak .zlogo .frame{width:min(80%,440px);margin-right:18%}
.alp-hpl--zak .zcard--logo{right:6%;bottom:9%;width:clamp(116px,28%,170px);transform:rotate(4deg)}

/* formulier */
.alp-hpl--zak .zform-wrap{display:grid;gap:var(--space-10)}
@media (min-width:900px){.alp-hpl--zak .zform-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}}
.alp-hpl--zak .zform-intro h2{margin:var(--space-2) 0 var(--space-5)}
.alp-hpl--zak .zform-intro p+p{margin-top:var(--space-4)}
.alp-hpl--zak .zform{display:grid;gap:var(--space-5);padding:clamp(1.25rem,3vw,2.25rem);background:var(--papier-50);border:1px solid var(--line-hairline);border-radius:var(--radius-md)}
.alp-hpl--zak .zform__row{display:grid;gap:var(--space-5)}
@media (min-width:600px){.alp-hpl--zak .zform__row{grid-template-columns:repeat(2,minmax(0,1fr))}.alp-hpl--zak .zform__row--wide{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.alp-hpl--zak .zform label,.alp-hpl--zak .zform legend{display:block;margin:0 0 .35rem;padding:0;font-size:var(--text-sm);font-weight:600;color:var(--inkt-900)}
.alp-hpl--zak .zform small{font-weight:400;color:var(--text-muted)}
.alp-hpl--zak .zform input[type=text],.alp-hpl--zak .zform input[type=email],.alp-hpl--zak .zform input[type=tel],.alp-hpl--zak .zform select,.alp-hpl--zak .zform textarea{display:block;width:100%;min-height:48px;margin:0;padding:.7rem .85rem;border:1px solid var(--papier-300);border-radius:var(--radius-sm);background:var(--papier-0);font:400 var(--text-base)/1.4 var(--font-body);color:var(--inkt-900);box-shadow:none}
.alp-hpl--zak .zform textarea{min-height:110px;resize:vertical}
.alp-hpl--zak .zform input:focus,.alp-hpl--zak .zform select:focus,.alp-hpl--zak .zform textarea:focus{border-color:var(--goud-600);outline:2px solid var(--goud-300);outline-offset:0}
.alp-hpl--zak .zform fieldset{margin:0;padding:0;border:0;min-width:0}
.alp-hpl--zak .zform label.zform__check{display:flex;align-items:center;gap:.6rem;margin:.35rem 0 0;font-weight:400;color:var(--text-body)}
.alp-hpl--zak .zform__check input{width:18px;height:18px;margin:0;accent-color:var(--goud-700)}
.alp-hpl--zak .zform .btn{justify-self:start}
.alp-hpl--zak .zform__note{font-size:var(--text-xs);color:var(--text-muted)}
.alp-hpl--zak .zform__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.alp-hpl--zak .zform__msg{padding:var(--space-4) var(--space-5);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600}
.alp-hpl--zak .zform__msg--ok{background:#EEF3E6;border:1px solid #B9C9A0;color:#3F5226}
.alp-hpl--zak .zform__msg--fout{background:#F8E9E6;border:1px solid #E0B4AB;color:#7A2E22}
.alp-hpl--zak #voorstel-aanvragen,.alp-hpl--zak #branches,.alp-hpl--zak #prijzen,.alp-hpl--zak #vragen{scroll-margin-top:90px}

/* link naar de makelaarspagina in de branchekaart */
.alp-hpl--zak .zsector .more{margin-top:var(--space-2)}

/* makelaarspagina (.alp-hpl--mak): drie momenten naast elkaar, vergelijkingstabel */
@media (min-width:1050px){.alp-hpl--zak .zsectors--3 .zsector:nth-child(4){grid-column:auto}}
.alp-hpl--zak .zcompare-wrap{max-width:60rem;margin:0 auto;overflow-x:auto}
.alp-hpl--zak .zcompare{width:100%;min-width:34rem;margin:0;border-collapse:collapse;border:0;font-size:var(--text-sm);color:var(--text-body);background:transparent}
.alp-hpl--zak .zcompare th,.alp-hpl--zak .zcompare td{padding:.85rem 1rem;border:0;border-bottom:1px solid var(--line-hairline);text-align:left;vertical-align:top;background:transparent}
.alp-hpl--zak .zcompare thead th{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.alp-hpl--zak .zcompare tbody th{font-weight:600;color:var(--inkt-900)}
.alp-hpl--zak .zcompare .is-ours{background:var(--goud-100);color:var(--inkt-900)}
.alp-hpl--zak .zcompare thead .is-ours{color:var(--goud-800)}
.alp-hpl--zak .zcompare tbody td.is-ours{font-weight:600}
.alp-hpl--mak #momenten{scroll-margin-top:90px}
@media (max-width:600px){
	.alp-hpl--zak .zcompare{min-width:0;font-size:var(--text-xs);line-height:1.45}
	.alp-hpl--zak .zcompare th,.alp-hpl--zak .zcompare td{padding:.65rem .4rem}
	.alp-hpl--zak .zcompare thead th{font-size:.625rem;letter-spacing:.06em}
	.alp-hpl--zak .zcompare tbody th{width:28%}
}

/* slot */
.alp-hpl--zak .final__art .frame{width:min(100%,280px)}

@media (max-width:600px){
	.alp-hpl--zak .zhero .frame{width:74%;margin-right:14%}
	.alp-hpl--zak .zlogo{min-height:260px}
}

/* Twee kaarten naast elkaar (stadsportret en hemelportret op de zakelijke pagina). */
.zsectors.zsectors--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.zsectors--duo .zsector{grid-column:auto!important}
@media (max-width:640px){.zsectors.zsectors--duo{grid-template-columns:minmax(0,1fr)}}