/* Theme-owned components for the launch, on top of the agency's CSS and the house style. Same
   specificity approach as huisstijl.css: the wrapper class is repeated to outrank the mockup's
   own section rules without !important. */

/* === Site header: short menu, outbound login, mobile menu (blocks/site-header) === */
.b27wf.b27wf.b27wf .hdr-nav{display:contents}
.b27wf.b27wf.b27wf .nav>li.nav-cta{display:none}
.b27wf.b27wf.b27wf .nav>li.nav-external>a::after{content:" \2197"}
.b27wf.b27wf.b27wf .nav>li>a[aria-current="page"]{color:#3C1EFA}
.b27wf.b27wf.b27wf .burger{padding:0;border:0;background:none;color:inherit;cursor:pointer}
.b27wf.b27wf.b27wf .burger:focus-visible{outline:2px solid #3C1EFA;outline-offset:2px}

@container vp (max-width:1180px){
	/* The open menu drops down as a full-width panel under the header bar. */
	.b27wf.b27wf.b27wf .hdr.is-open .nav{display:flex;position:absolute;top:100%;left:0;right:0;z-index:70;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 16px 20px;background:#fff;border-top:1px solid var(--line);box-shadow:0 16px 32px rgba(28,10,58,.12)}
	.b27wf.b27wf.b27wf .hdr.is-open .nav>li{display:block}
	.b27wf.b27wf.b27wf .hdr.is-open .nav>li>a{padding:14px 8px;font-size:18px;border-radius:6px;white-space:normal}
	.b27wf.b27wf.b27wf .hdr.is-open .nav>li.nav-cta{display:block;margin-top:12px}
	.b27wf.b27wf.b27wf .hdr.is-open .nav>li.nav-cta>a{display:flex;justify-content:center}
	/* Three bars become a cross while the panel is open. */
	.b27wf.b27wf.b27wf .hdr.is-open .burger:before{height:2px;box-shadow:none;transform:rotate(45deg)}
	.b27wf.b27wf.b27wf .hdr.is-open .burger:after{content:"";position:absolute;width:22px;height:2px;background:var(--ink);transform:rotate(-45deg)}
	.b27wf.b27wf.b27wf .hdr.is-open .burger{position:relative}
}

/* === Site footer (blocks/site-footer) === */
.b27u.b27u.b27u.b27u.b27u .s16-extern::after{content:" \2197"}

/* === Contact form on the homepage: Fluent Forms form 3 in the dark contact section ===
   Uses the section's own field variables (--u-veld, --u-veld-rand, --u-kop) so it matches the
   rest of the homepage. The form's styler sets the old button colour after the theme's CSS,
   hence !important on the button only. */
.b27u.b27u.b27u.b27u.b27u .s15-ff .fluentform{--fluentform-primary:#3C1EFA;font-family:"DM Sans",system-ui,sans-serif}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-group{margin-bottom:20px}
.b27u.b27u.b27u.b27u.b27u .s15-ff :is(.ff-el-input--label label,legend,.ff-el-input--label){color:var(--u-kop);font-family:inherit;font-size:14px;font-weight:500}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-is-required.asterisk-right label::after{color:var(--u-kop)}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-form-control{min-height:54px;padding:0 18px;border:0;border-radius:6px;background:var(--u-veld);color:var(--u-kop);font:inherit;font-size:16px;box-shadow:inset 0 0 0 1px var(--u-veld-rand)}
.b27u.b27u.b27u.b27u.b27u .s15-ff textarea.ff-el-form-control{min-height:132px;padding:14px 18px}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-form-control::placeholder{color:var(--u-txt3)}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-form-control:focus{outline:none;box-shadow:inset 0 0 0 2px var(--u-veld-focus,#A99BFF)}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-el-form-check-label{color:var(--u-txt2);font-size:15px}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-btn-submit{min-height:52px;padding:0 28px!important;border:0!important;border-radius:6px!important;background-color:#3C1EFA!important;color:#fff!important;font:600 16px/1 "DM Sans",system-ui,sans-serif!important}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-btn-submit:hover{background-color:#2E14D6!important}
.b27u.b27u.b27u.b27u.b27u .s15-ff :is(.error,.text-danger){color:#FF9DB7}
.b27u.b27u.b27u.b27u.b27u .s15-ff .ff-message-success{color:var(--u-kop);background:transparent;border:0;box-shadow:none;padding:0}

/* === Inner page heading (blocks/page-head): on white, the case page's title size === */
.b27u.b27p .b27p-kop{padding:48px 0 8px;background:#FFFFFF}
.b27u.b27p .b27p-title{margin:16px 0 20px;color:var(--u-kop);font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-size:clamp(34px,3.6vw,56px);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.b27u.b27p .u-intro{margin:0}
@media (max-width:700px){.b27u.b27p .b27p-kop{padding-top:24px}}

/* === Contact page (blocks/contact as the page, templates/page-contact.html) ===
   The shape over the section's top edge bridges two sections on the homepage; at the top of a
   page there is nothing above to bridge, and the header cut it into a shard. */
.b27u.b27u.b27u.b27u.b27u .b27-contactpagina .s15-vorm1{display:none}

/* === BooleanOne tour (blocks/demo, homepage section 07) ===
   The mockup's player frame and chapter buttons, holding four screens instead of a video. The
   frame keeps its D-corner and shadow from home.css; the slides crossfade inside it. The caption
   sits under the frame rather than on it, so no screenshot is covered, and the progress runs
   along the bottom of the active chapter button. */
.b27u.b27u .st-C .s07-beeld{position:relative;overflow:hidden;background:#F9F8F6}
.b27u.b27u .st-C .s07-dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease}
.b27u.b27u .st-C .s07-dia.is-actief{opacity:1}
.b27u.b27u .st-C .s07-dia img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.b27u.b27u .st-C .s07-dia--foto img{object-position:50% 40%}
/* The assistant is a side panel in the app: shown as one, on the soft ground, with its title
   bar (which still says Boolytics) cropped off by the frame of the panel. */
.b27u.b27u .st-C .s07-dia--paneel{display:grid;place-items:center;background:#F4F2FA}
.b27u.b27u .st-C .s07-paneel{display:block;height:78%;aspect-ratio:380/464;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 24px 60px rgba(28,10,58,.18)}
.b27u.b27u .st-C .s07-paneel img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.b27u.b27u .st-C .s07-uitleg{min-height:3.2em;max-width:720px;margin:24px auto 0;color:#CDBFE3;font-size:18px;line-height:1.6;text-align:center}
.b27u.b27u .st-C .s07-hoofdstukken{margin-top:16px}
.b27u.b27u .st-C .s07-hs{position:relative;overflow:hidden}
.b27u.b27u .st-C .s07-voortgang{position:absolute;left:0;bottom:0;height:3px;width:0;background:#9600B9}
.b27u.b27u .st-C .s07-speler[data-staat="speelt"] .s07-hs[aria-pressed="true"] .s07-voortgang{animation:b27-tour var(--duur,6s) linear forwards}
@keyframes b27-tour{from{width:0}to{width:100%}}
/* The assistant clip, cropped to its chat: the clip is 720 x 900 and the chat sits at x 44-674,
   y 228-790, so the video is scaled and shifted until only that rectangle shows. */
.b27u.b27u .st-C .s07-paneel.heeft-film{position:relative;aspect-ratio:630/562;height:auto;width:min(62%,560px)}
.b27u.b27u .st-C .s07-paneel.heeft-film > img{visibility:hidden}
.b27u.b27u .st-C .s07-film{position:absolute;inset:0;overflow:hidden}
.b27u.b27u .st-C .s07-film video{position:absolute;left:-6.98%;top:-40.57%;width:114.29%;height:auto;max-width:none}
@media (max-width:700px){
	.b27u.b27u .st-C .s07-uitleg{font-size:16px;margin-top:18px}
	.b27u.b27u .st-C .s07-paneel{height:86%}
	.b27u.b27u .st-C .s07-hs{gap:10px;min-height:56px;padding:8px 14px;font-size:14px;line-height:1.3}
	.b27u.b27u .st-C .s07-hs span{font-size:12px}
}