/* Studio Ubique footer v2 (v1.3, 9 oktober 2026). Alleen geladen als de mu-plugin su-footer-v2.php actief is. */

.su-cta,.su-foot{--su-ink:#0E0E14;--su-ink-soft:#4A4A57;--su-line:#C9C9D3;--su-paper:var(--greybg,#EBEBF0);--su-night:#0A0A10;--su-fog:#9C9CAB;--su-white:#F4F4F7;--su-yellow:var(--yellow,#EFBD30);--su-sans:var(--primaryfont,"DM Sans",sans-serif);--su-mono:var(--secondaryfont,"IBM Plex Mono",monospace);--su-colgap:clamp(20px,2.4vw,40px)}
.su-cta *,.su-foot *{box-sizing:border-box}
.su-wrap{max-width:1760px;margin:0 auto;padding-inline:clamp(16px,3vw,48px)}
.su-lbl{display:block;font:500 12px/18px var(--su-mono);letter-spacing:.08em;text-transform:uppercase;margin:0}
.su-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1. Contactblok (vervangt de oude sectie home-contact; klasse en id blijven voor bestaande ankers en ScrollTriggers) */
section.home-contact.su-cta{background:var(--su-paper)!important;padding:clamp(72px,9vw,150px) 0 clamp(72px,8vw,130px)!important;margin:0!important;color:var(--su-ink)}
section.home-contact.su-cta::before,section.home-contact.su-cta::after{content:none!important;display:none!important}
.su-cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px)}
.su-cta__left{min-width:0}
.su-cta__left .su-lbl{color:var(--su-ink-soft);margin-bottom:28px}
.su-cta__story{max-width:48ch;margin:0 0 22px;font:300 15px/24px var(--su-sans);color:var(--su-ink-soft)}
.su-call{display:inline-flex;align-items:center;gap:14px;padding-bottom:6px;border-bottom:1px solid var(--su-ink);font:500 17px/1.3 var(--su-sans);color:var(--su-ink)!important;text-decoration:none!important;transition:gap .3s ease}
.su-call:hover{gap:20px}
.su-call svg{width:14px;height:14px;flex:none}
.su-cta__right{min-width:0;max-width:880px}
.su-cta__title{margin:0 0 22px;font:600 clamp(40px,4.4vw,84px)/1 var(--su-sans);letter-spacing:-.035em;color:var(--su-ink);text-wrap:balance}
.su-cta__lead{max-width:44ch;margin:0 0 clamp(36px,4vw,64px);font:300 clamp(17px,1.25vw,20px)/1.45 var(--su-sans);color:var(--su-ink-soft)}

/* Contact Form 7 (formulier 8843 en vertaling), alleen opmaak; velden en verwerking ongewijzigd */
.su-cta .formbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--su-colgap);row-gap:28px;align-items:center}
.su-cta .formbox .form{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px var(--su-colgap);margin:0 0 12px}
.su-cta .form .inputbox{display:flex;flex-direction:column;gap:10px;min-width:0}
.su-cta .form .inputbox.full{grid-column:auto}
.su-cta .form .inputbox label{font:400 12px/18px var(--su-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--su-ink)}
.su-cta .form .inputbox input,.su-cta .form .inputbox textarea{width:100%;min-width:0;max-width:100%;font:300 17px/1.4 var(--su-sans);color:var(--su-ink);background:transparent;border:0;border-bottom:1px solid var(--su-line);border-radius:0;padding:4px 0 12px;min-height:0;transition:border-color .25s}
.su-cta .form .inputbox textarea{resize:none;field-sizing:content;min-height:44px;max-height:220px}
.su-cta .form .inputbox input:focus,.su-cta .form .inputbox textarea:focus{outline:none;border-bottom-color:var(--su-ink)}
.su-cta .form .inputbox input:focus-visible,.su-cta .form .inputbox textarea:focus-visible{outline:none;border-bottom-color:var(--su-ink);box-shadow:0 1px 0 var(--su-ink)}
.su-cta .form .inputbox input::placeholder,.su-cta .form .inputbox textarea::placeholder{all:unset;color:#8A8A96;font:300 17px/1.4 var(--su-sans)}
.su-cta .wpcf7-form-control-wrap{display:block}
.su-cta .wpcf7-not-valid-tip{margin-top:6px;font:400 12px/1.4 var(--su-sans);color:#B42318}
.su-cta .repta{grid-column:1;grid-row:2;min-height:65px}
.su-cta .submit-row{display:contents}
.su-cta .submit-row .subhead{grid-column:2;grid-row:2}
.su-cta .submit-row .subhead p{max-width:42ch;margin:0;font:300 13px/1.55 var(--su-sans);color:var(--su-ink-soft)}
.su-cta .submit-row .submit-btn{grid-column:1;grid-row:3;justify-self:start}
.su-cta .formbox .submit-btn input{padding:13px 22px 13px 58px!important;width:auto;justify-content:center}
.su-cta .wpcf7-response-output{margin:20px 0 0!important;padding:10px 14px!important;font:400 14px/1.4 var(--su-sans);border-radius:6px}

/* 2. Footer */
footer.su-foot{position:relative;isolation:isolate;overflow:hidden;margin:0!important;padding:clamp(64px,7vw,120px) 0 28px!important;font-family:var(--su-sans)}
footer.su-foot--dark{background:var(--su-night)!important;color:var(--su-white)}
footer.su-foot--light{background:var(--su-paper)!important;color:var(--su-ink)}
.su-foot .su-wrap{max-width:none;padding-inline:clamp(16px,2.6vw,48px)}
/* Menu, adressen en onderbalk even breed als de secties (container 1670 px); het woordmerk blijft over de volle breedte */
.su-foot__top,.su-bar{max-width:1670px;margin-inline:auto}
.su-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 62%,transparent 96%)}
.su-foot__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.su-foot--dark .su-lbl{color:var(--su-fog)}
.su-foot--light .su-lbl{color:var(--su-ink-soft)}

/* Menu: zes groepen, ingeklapt; alle links staan in de HTML */
.su-menu{max-width:620px;border-top:1px solid rgba(244,244,247,.14)}
.su-menu details{border-bottom:1px solid rgba(244,244,247,.14)}
.su-foot--light .su-menu,.su-foot--light .su-menu details{border-color:rgba(14,14,20,.14)}
.su-menu summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:500 clamp(22px,1.5vw,28px)/1.29 var(--su-sans);letter-spacing:-.015em}
.su-menu summary::-webkit-details-marker{display:none}
.su-pl{position:relative;width:12px;height:12px;flex:none;opacity:.6;transition:opacity .2s}
.su-pl::before,.su-pl::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:currentColor;transition:transform .35s ease}
.su-pl::after{transform:rotate(90deg)}
.su-menu details[open] .su-pl::after{transform:rotate(0)}
.su-menu summary:hover .su-pl{opacity:1}
.su-menu summary:focus-visible{outline:1px solid var(--su-yellow);outline-offset:4px}
.su-foot--light .su-menu summary:focus-visible{outline-color:var(--su-ink)}
.su-menu ul{list-style:none;margin:0;padding:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}
.su-menu li{margin:0}
.su-menu li a{font:300 15px/1.5 var(--su-sans);text-decoration:none;transition:color .2s}
.su-foot--dark .su-menu li a{color:#C4C4CF}
.su-foot--light .su-menu li a{color:var(--su-ink-soft)}

.su-info{display:grid;grid-template-columns:repeat(3,max-content);justify-content:end;gap:32px clamp(40px,4vw,80px);font:300 15px/1.6 var(--su-sans)}
.su-info .su-lbl{margin-bottom:14px}
.su-info address{font-style:normal;margin:0}
.su-info a{color:inherit;text-decoration:none}
.su-t{display:block;margin-top:10px;font:400 12px/1.4 var(--su-mono)}
.su-foot--dark .su-t{color:var(--su-fog)}
.su-foot--light .su-t{color:var(--su-ink-soft)}
.su-t b{font-weight:500}
.su-foot--dark .su-t b{color:var(--su-yellow)}
.su-foot--light .su-t b{color:#B88A0E}

.su-foot__mark{margin-top:clamp(80px,10vw,180px);padding-bottom:clamp(28px,3.2vw,60px)}
.su-mark{margin:0;font:700 200px/.78 var(--su-sans);letter-spacing:-.055em;white-space:nowrap;display:flex;width:max-content;padding-bottom:.17em}
.su-mark span{display:inline-block;transform-origin:50% 100%;will-change:transform}
.su-mark .su-sp{width:.2em}

.su-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px;padding-top:20px;border-top:1px solid rgba(244,244,247,.14);font:400 12px/1.5 var(--su-mono);letter-spacing:.06em;text-transform:uppercase}
.su-foot--dark .su-bar{color:var(--su-fog)}
.su-foot--light .su-bar{color:var(--su-ink-soft);border-color:rgba(14,14,20,.14)}
.su-bar p{margin:0}
.su-bar nav{display:flex;flex-wrap:wrap;gap:12px clamp(20px,6vw,140px)}
.su-bar a{color:inherit;text-decoration:none}

/* Bestaande globale regels (footer a:hover, footer li:hover>a) overschrijven */
footer.su-foot li:hover>a{opacity:1;text-decoration:none!important}
footer.su-foot--dark a:hover,footer.su-foot--dark li:hover>a{color:var(--su-yellow)!important}
footer.su-foot--light a:hover,footer.su-foot--light li:hover>a{color:var(--su-ink)!important;text-decoration:underline!important;text-underline-offset:3px}

/* Responsief */
/* 901 t/m 1439 px: formulier krijgt meer ruimte */
@media (min-width:901px) and (max-width:1439px){
	.su-cta__grid{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
	.su-cta__story{max-width:34ch}
}
/* Vanaf 621 px: Turnstile in de linkerkolom, note ernaast, knop eronder even breed als de rechterkolom */
@media (min-width:621px){
	.su-cta .repta{grid-column:1;grid-row:2}
	.su-cta .repta .cf-turnstile,.su-cta .repta iframe{width:100%!important;max-width:100%}
	.su-cta .submit-row .subhead{grid-column:2;grid-row:2;align-self:center}
	.su-cta .submit-row .submit-btn{grid-column:2;grid-row:3;justify-self:stretch}
	.su-cta .formbox .submit-btn input{width:100%}
}
/* 901 t/m 1199 px: adressen onder het menu, zodat Chandigarh niet buiten beeld valt */
@media (min-width:901px) and (max-width:1199px){
	.su-foot__top{grid-template-columns:minmax(0,1fr)}
	.su-menu{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start;border-top:0}
	.su-menu__col{border-top:1px solid rgba(244,244,247,.14)}
	.su-foot--light .su-menu__col{border-color:rgba(14,14,20,.14)}
	.su-menu ul{grid-template-columns:minmax(0,1fr)}
	.su-info{justify-content:start;column-gap:64px}
}
@media (min-width:1200px) and (max-width:1439px){
	.su-info{column-gap:48px}
}
/* 901 t/m 1199 px: Turnstile past niet in de linkerkolom (minimaal 300 px), dus over de volle breedte; note links en knop rechts op één lijn */
@media (min-width:901px) and (max-width:1199px){
	.su-cta .formbox{row-gap:20px}
	.su-cta .repta{grid-column:1/-1;grid-row:2}
	.su-cta .submit-row .subhead{grid-column:1;grid-row:3;align-self:center}
	.su-cta .submit-row .submit-btn{grid-column:2;grid-row:3;align-self:center}
}
/* Ruimte onder de footer voor de Bella-widget (alle breedtes) */
footer.su-foot{padding-bottom:120px!important}
@media (max-width:1100px){
	.su-info{justify-content:start}
}
@media (max-width:900px){
	.su-cta__grid{grid-template-columns:minmax(0,1fr);row-gap:72px}
	.su-info{column-gap:64px}
	.su-cta__right{max-width:none}
	.su-foot__top{grid-template-columns:1fr}
	.su-menu{max-width:none}
}
@media (max-width:620px){
	.su-cta .formbox,.su-cta .formbox .form{grid-template-columns:minmax(0,1fr)}
	.su-cta .repta,.su-cta .submit-row .subhead,.su-cta .submit-row .submit-btn{grid-column:1;grid-row:auto}
	.su-cta__grid{row-gap:80px}
	.su-cta .submit-row .submit-btn{justify-self:stretch}
	.su-cta .formbox .submit-btn input{width:100%}
	.su-info{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
	.su-info>div:first-child{grid-column:1/-1}
	footer.su-foot{padding-bottom:150px!important}
	.su-cta .repta{overflow:hidden}
	.su-menu ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.su-call,.su-pl::before,.su-pl::after{transition:none}
}

/* iOS maakt van adressen en telefoonnummers automatisch links met een stippellijn; die opmaak uitzetten */
.su-foot a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important}

/* v1.1: zijmarge gelijk aan de rest van de site (theme .container): 30 px van 768 t/m 1023, 40 px tot 768 */
@media (min-width:768px) and (max-width:1023px){
	.su-wrap,.su-foot .su-wrap{padding-inline:30px}
}
@media (max-width:767px){
	.su-wrap,.su-foot .su-wrap{padding-inline:40px}
}