@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* =========================================================
FUTURE ACADEMY - stylesheet
Alles staat binnen .fa-page zodat je WordPress-thema
niet wordt beinvloed.
========================================================= */
.fa-page{
--navy:#0A1633;
--navy-2:#0D1B3D;
--card:#122148;
--card-2:#152750;
--line:rgba(255,255,255,.11);
--line-2:rgba(255,255,255,.18);
--accent:#F4D641;
--accent-soft:rgba(244,214,65,.13);
--text:#FFFFFF;
--soft:#E3E9F6;
--muted:#AFBCD8;
--radius:16px;
font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
background:var(--navy);
color:var(--text);
line-height:1.65;
font-size:17px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.fa-page *,.fa-page *::before,.fa-page *::after{box-sizing:border-box;font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
.fa-page p,.fa-page h1,.fa-page h2,.fa-page h3,.fa-page h4,
.fa-page ul,.fa-page ol,.fa-page figure,.fa-page fieldset{margin:0;padding:0;}
.fa-page ul,.fa-page ol{list-style:none;}
.fa-page img{max-width:100%;display:block;}
.fa-page a{color:inherit;text-decoration:none;}
.fa-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.fa-wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
.fa-page [id]{scroll-margin-top:88px;}
.fa-sec{padding:104px 0;}
.fa-sec--tight{padding:76px 0;}
.fa-sec--alt{background:var(--navy-2);}
/* ---------- typografie ---------- */
.fa-page h1{font-size:clamp(34px,5vw,56px);font-weight:900;line-height:1.06;letter-spacing:-.03em;}
.fa-page h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;line-height:1.14;letter-spacing:-.022em;}
.fa-page h3{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.35;}
.fa-page h4{font-size:16px;font-weight:700;}
.fa-eyebrow{
display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
.fa-eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;}
.fa-lead{color:var(--muted);font-size:18px;max-width:64ch;}
.fa-head{margin-bottom:60px;max-width:780px;}
.fa-head p{margin-top:20px;}
.fa-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.fa-head--center .fa-lead{margin-left:auto;margin-right:auto;}
.fa-head--center .fa-eyebrow::before{display:none;}
/* ---------- header ---------- */
.fa-header{
position:sticky;top:0;z-index:60;
background:rgba(10,22,51,.9);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.fa-header .fa-wrap{display:flex;align-items:center;gap:28px;height:88px;position:relative;}
.fa-logo{flex:none;display:inline-block;transition:opacity .2s;}
.fa-logo:hover{opacity:.85;}
.fa-logo img{width:150px;height:auto;}
.fa-menu-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.fa-burger{
display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;
border:1px solid var(--line-2);cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.fa-burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:.25s;}
.fa-nav{display:flex;gap:30px;margin-left:auto;align-items:stretch;}
.fa-nav-item{position:relative;display:flex;align-items:center;}
.fa-nav a{
font-size:14.5px;font-weight:600;color:var(--muted);
transition:color .2s;position:relative;padding:6px 0;
display:inline-flex;align-items:center;gap:7px;
}
.fa-nav-item > a::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
background:var(--accent);border-radius:2px;transform:scaleX(0);
transform-origin:left;transition:transform .25s;
}
.fa-nav a:hover{color:#fff;}
.fa-nav-item > a:hover::after,.fa-nav a.is-active::after{transform:scaleX(1);}
.fa-nav a.is-active{color:#fff;}
.fa-page .fa-nav .fa-btn{display:none;}
/* uitklapmenu */
.fa-caret{
width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform .2s;flex:none;
}
.fa-has-drop:hover .fa-caret,.fa-has-drop:focus-within .fa-caret{transform:translateY(1px) rotate(225deg);}
.fa-drop{
position:absolute;top:100%;left:-20px;min-width:220px;z-index:70;
display:flex;flex-direction:column;padding:8px;
background:#0D1B3D;border:1px solid var(--line-2);border-radius:14px;
box-shadow:0 22px 46px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s,transform .2s,visibility .2s;
}
.fa-has-drop:hover .fa-drop,.fa-has-drop:focus-within .fa-drop{
opacity:1;visibility:visible;transform:translateY(0);
}
.fa-drop a{padding:11px 14px;border-radius:9px;font-size:14.5px;color:var(--soft);}
.fa-drop a:hover{background:rgba(244,214,65,.12);color:var(--accent);}
/* ---------- knoppen ---------- */
.fa-page .fa-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:15px 30px;border-radius:999px;font-weight:700;font-size:15px;
line-height:1.2;letter-spacing:.005em;cursor:pointer;text-align:center;
border:2px solid transparent;font-family:inherit;
transition:transform .2s,background .2s,box-shadow .2s,border-color .2s,color .2s;
}
.fa-page .fa-btn--primary{background:var(--accent);color:#0A1633;box-shadow:0 10px 30px rgba(244,214,65,.2);}
.fa-page .fa-btn--primary:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(244,214,65,.3);}
.fa-page .fa-btn--ghost{border-color:var(--line-2);color:#fff;}
.fa-page .fa-btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.fa-page .fa-btn--dark{background:#0A1633;color:#fff;}
.fa-page .fa-btn--dark:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(10,22,51,.28);}
.fa-page .fa-btn--sm{padding:11px 22px;font-size:13.5px;}
.fa-page .fa-btn--full{width:100%;}
.fa-link{
color:var(--accent);font-weight:700;font-size:15px;
display:inline-flex;align-items:center;gap:8px;
}
.fa-link span{transition:transform .2s;}
.fa-link:hover span{transform:translateX(4px);}
/* ---------- hero (home) ---------- */
.fa-hero{position:relative;padding:118px 0 110px;overflow:hidden;}
.fa-hero::before{
content:"";position:absolute;top:-280px;right:-180px;width:760px;height:760px;
background:radial-gradient(circle,rgba(244,214,65,.15),transparent 62%);pointer-events:none;
}
.fa-hero::after{
content:"";position:absolute;bottom:-340px;left:-240px;width:720px;height:720px;
background:radial-gradient(circle,rgba(46,94,198,.24),transparent 62%);pointer-events:none;
}
.fa-hero .fa-wrap{position:relative;z-index:1;}
.fa-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:70px;align-items:center;}
.fa-hero h1 em{color:var(--accent);font-style:normal;}
.fa-hero-sub{font-size:19px;color:var(--soft);font-weight:600;margin:22px 0 14px;}
.fa-hero .fa-lead{margin-bottom:36px;}
.fa-btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.fa-hero-photo{position:relative;}
.fa-hero-photo img{
width:100%;border-radius:20px;aspect-ratio:4/5;object-fit:cover;
box-shadow:0 34px 78px rgba(0,0,0,.48);
}
.fa-hero-photo::after{
content:"";position:absolute;inset:auto -16px -16px auto;width:130px;height:130px;
border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);
border-radius:0 0 22px 0;
}
/* ---------- subpagina kop ---------- */
.fa-pagehead{position:relative;padding:86px 0 78px;overflow:hidden;border-bottom:1px solid var(--line);}
.fa-pagehead::before{
content:"";position:absolute;top:-300px;right:-140px;width:680px;height:680px;
background:radial-gradient(circle,rgba(244,214,65,.13),transparent 62%);pointer-events:none;
}
.fa-pagehead .fa-wrap{position:relative;z-index:1;}
.fa-crumb{font-size:12.5px;color:#7E8DAF;margin-bottom:20px;font-weight:600;}
.fa-crumb a:hover{color:var(--accent);}
.fa-pagehead h1{max-width:16ch;}
.fa-pagehead .fa-lead{margin-top:22px;}
/* ---------- usp balk ---------- */
.fa-usps{background:var(--navy-2);border-bottom:1px solid var(--line);}
.fa-usps .fa-wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.fa-usp{padding:32px 24px;text-align:center;border-left:1px solid var(--line);min-width:0;overflow-wrap:break-word;}
.fa-usp:first-child{border-left:0;}
.fa-usp strong{display:block;font-size:27px;font-weight:800;color:var(--accent);line-height:1.2;letter-spacing:-.02em;}
.fa-usp span{font-size:13.5px;color:var(--muted);font-weight:500;}
/* ---------- kaarten ---------- */
.fa-grid{display:grid;gap:24px;}
.fa-grid--2{grid-template-columns:repeat(2,1fr);}
.fa-grid--3{grid-template-columns:repeat(3,1fr);}
.fa-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:34px 30px;transition:transform .22s,border-color .22s,background .22s;
}
.fa-card:hover{transform:translateY(-4px);border-color:rgba(244,214,65,.42);background:var(--card-2);}
.fa-card h3{margin-bottom:12px;}
.fa-card p{color:var(--muted);font-size:15.5px;}
.fa-icon{
width:46px;height:46px;border-radius:12px;background:var(--accent-soft);
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.fa-icon svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.85;
stroke-linecap:round;stroke-linejoin:round;}
/* ---------- split blok ---------- */
.fa-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.fa-split--rev .fa-split-img{order:2;}
.fa-split img{border-radius:20px;aspect-ratio:4/3;object-fit:cover;box-shadow:0 26px 62px rgba(0,0,0,.42);}
.fa-split .fa-lead{margin-top:22px;}
.fa-split .fa-lead + .fa-lead{margin-top:16px;}
/* ---------- methode stappen ---------- */
.fa-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.fa-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 22px;}
.fa-step b{display:block;font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:.16em;margin-bottom:10px;}
.fa-step span{font-size:16.5px;font-weight:700;display:block;margin-bottom:8px;}
.fa-step p{font-size:14px;color:var(--muted);line-height:1.55;}
/* ---------- checklist ---------- */
.fa-check{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 36px;}
.fa-check--one{grid-template-columns:1fr;}
.fa-check li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--soft);padding:3px 0;}
.fa-check li::before{
content:"";flex:none;width:22px;height:22px;margin-top:4px;border-radius:50%;
background:var(--accent-soft) url("data:image/svg+xml;utf8,") center/13px no-repeat;
}
/* ---------- werkwijze flow ---------- */
.fa-flow{counter-reset:s;}
.fa-flow li{
display:grid;grid-template-columns:70px 1fr;gap:26px;
padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.fa-flow li:first-child{border-top:1px solid var(--line);}
.fa-flow li::before{
counter-increment:s;content:counter(s,decimal-leading-zero);
font-size:23px;font-weight:800;color:var(--accent);line-height:1.25;letter-spacing:-.02em;
}
.fa-flow h3{margin-bottom:7px;font-size:20px;}
.fa-flow p{color:var(--muted);font-size:15.5px;}
/* ---------- prijzen ---------- */
.fa-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.fa-price{
position:relative;background:var(--card);border:1px solid var(--line);
border-radius:18px;padding:38px 32px;display:flex;flex-direction:column;
}
.fa-price--hl{border-color:var(--accent);background:linear-gradient(180deg,rgba(244,214,65,.1),transparent 58%);}
.fa-tag{
position:absolute;top:-13px;left:32px;background:var(--accent);color:#0A1633;
font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
padding:5px 14px;border-radius:999px;
}
.fa-price h3{font-size:21px;margin-bottom:14px;}
.fa-from{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;}
.fa-amount{font-size:40px;font-weight:900;color:var(--accent);letter-spacing:-.035em;line-height:1.1;margin-bottom:6px;}
.fa-price > p{color:var(--muted);font-size:15px;margin:14px 0 24px;}
.fa-price ul{margin-bottom:30px;flex:1;}
.fa-price ul li{
font-size:14.5px;color:var(--soft);padding:7px 0 7px 26px;position:relative;line-height:1.5;
}
.fa-price ul li::before{
content:"";position:absolute;left:0;top:14px;width:14px;height:2px;background:var(--accent);border-radius:2px;
}
.fa-note{
margin:36px auto 0;color:var(--muted);font-size:15.5px;
text-align:center;max-width:70ch;
}
/* ---------- accordeon ---------- */
.fa-faq{max-width:820px;margin:0 auto;}
.fa-faq details{border-bottom:1px solid var(--line);padding:4px 0;}
.fa-faq details:first-child{border-top:1px solid var(--line);}
.fa-faq summary{
cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
font-weight:700;font-size:16.5px;
}
.fa-faq summary::-webkit-details-marker{display:none;}
.fa-faq summary::after{
content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.fa-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.fa-faq p{color:var(--muted);font-size:15.5px;padding:0 20px 24px 0;}
/* ---------- galerij ---------- */
.fa-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.fa-gallery figure{overflow:hidden;border-radius:14px;}
.fa-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .55s ease;}
.fa-gallery figure:hover img{transform:scale(1.06);}
.fa-gallery .fa-wide{grid-column:span 2;}
.fa-gallery .fa-wide img{aspect-ratio:3/2;}
/* ---------- info box ---------- */
.fa-box{
background:var(--card);border:1px solid var(--line);border-radius:18px;
padding:38px 36px;display:flex;gap:32px;align-items:center;flex-wrap:wrap;
}
.fa-box > div:first-child{flex:1;min-width:250px;}
.fa-box h3{font-size:21px;margin-bottom:10px;}
.fa-box p{color:var(--muted);font-size:15.5px;}
.fa-bignum{font-size:54px;font-weight:900;color:var(--accent);letter-spacing:-.045em;line-height:1;}
.fa-bignum small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-top:8px;}
/* ---------- formulier ---------- */
.fa-form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}
.fa-formcard{
background:var(--card);border:1px solid var(--line);border-radius:20px;padding:42px 40px;
}
.fa-formcard h2{font-size:26px;margin-bottom:8px;}
.fa-formcard > p{color:var(--muted);font-size:15.5px;margin-bottom:30px;}
.fa-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.fa-field{display:flex;flex-direction:column;gap:8px;}
.fa-field--full{grid-column:1 / -1;}
.fa-page label{font-size:13.5px;font-weight:700;color:var(--soft);letter-spacing:.01em;}
.fa-page label .fa-opt{font-weight:500;color:#7E8DAF;}
.fa-page input[type=text],.fa-page input[type=email],.fa-page input[type=tel],
.fa-page input[type=date],.fa-page input[type=number],.fa-page input[type=url],
.fa-page select,.fa-page textarea{
width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);
border-radius:11px;padding:14px 16px;color:#fff;font-size:15px;
font-family:inherit;line-height:1.5;transition:border-color .2s,background .2s;
}
.fa-page textarea{min-height:132px;resize:vertical;}
.fa-page select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px;}
.fa-page select option{background:#0D1B3D;color:#fff;}
.fa-page input::placeholder,.fa-page textarea::placeholder{color:#7E8DAF;}
.fa-page input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);cursor:pointer;}
.fa-page input[type=number]{-moz-appearance:textfield;}
.fa-page input[type=number]::-webkit-outer-spin-button,
.fa-page input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fa-page input:focus,.fa-page select:focus,.fa-page textarea:focus{
outline:none;border-color:var(--accent);background:rgba(255,255,255,.07);
}
.fa-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.55;}
.fa-consent input{margin-top:4px;width:17px;height:17px;accent-color:var(--accent);flex:none;}
.fa-formcard .fa-btn{margin-top:4px;}
.fa-formnote{font-size:13px;color:#7E8DAF;margin-top:18px;}
/* zodat een Contact Form 7 / WPForms shortcode dezelfde stijl krijgt */
.fa-formcard .wpcf7 input[type=text],.fa-formcard .wpcf7 input[type=email],
.fa-formcard .wpcf7 input[type=tel],.fa-formcard .wpcf7 textarea,
.fa-formcard .wpcf7 select,.fa-formcard .wpforms-field input,
.fa-formcard .wpforms-field textarea,.fa-formcard .wpforms-field select{
width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);
border-radius:11px;padding:14px 16px;color:#fff;font-size:15px;font-family:inherit;
}
.fa-formcard .wpcf7 input[type=submit],.fa-formcard .wpforms-submit{
background:var(--accent);color:#0A1633;border:0;border-radius:999px;
padding:15px 30px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;
}
/* ---------- contact zijkolom ---------- */
.fa-aside{display:grid;gap:18px;}
.fa-contactcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 30px;}
.fa-contactcard h3{margin-bottom:18px;}
.fa-contactlist li{display:flex;gap:14px;align-items:flex-start;padding:9px 0;font-size:15.5px;color:var(--soft);}
.fa-contactlist svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px;}
.fa-contactlist a:hover{color:var(--accent);}
.fa-contactlist small{display:block;color:#7E8DAF;font-size:13px;}
.fa-nextsteps{counter-reset:n;}
.fa-nextsteps li{
display:grid;grid-template-columns:30px 1fr;gap:14px;padding:11px 0;
font-size:15px;color:var(--muted);align-items:start;
}
.fa-nextsteps li::before{
counter-increment:n;content:counter(n);
width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.fa-nextsteps b{color:var(--soft);display:block;font-size:15px;}
/* ---------- cta band ---------- */
.fa-cta{background:var(--accent);color:#0A1633;padding:84px 0;text-align:center;}
.fa-cta h2{color:#0A1633;margin-bottom:18px;}
.fa-cta p{max-width:62ch;margin:0 auto 34px;font-size:17.5px;color:#1B2A50;font-weight:500;}
.fa-cta .fa-btn-row{justify-content:center;}
.fa-page .fa-cta .fa-btn--ghost{border-color:rgba(10,22,51,.32);color:#0A1633;}
.fa-page .fa-cta .fa-btn--ghost:hover{border-color:#0A1633;color:#0A1633;}
/* ---------- footer ---------- */
.fa-footer{background:#060D20;padding:64px 0 34px;border-top:1px solid var(--line);}
.fa-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:42px;}
.fa-foot-col h4{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
.fa-foot-col li{margin-bottom:9px;font-size:15px;color:var(--muted);}
.fa-foot-col a:hover{color:var(--accent);}
.fa-foot-brand p{color:var(--muted);font-size:14.5px;margin-top:20px;max-width:32ch;}
.fa-foot-bar{
border-top:1px solid var(--line);padding-top:26px;display:flex;
justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7686A8;
}
.fa-foot-bar strong{color:var(--muted);font-weight:600;letter-spacing:.06em;}
.fa-credit{color:#7686A8;}
.fa-credit a{color:var(--muted);font-weight:600;transition:color .2s;}
.fa-credit a:hover{color:var(--accent);}
/* ---------- responsive ---------- */
@media (max-width:1024px){
.fa-nav{gap:24px;}
.fa-split,.fa-hero-grid{gap:48px;}
.fa-foot-top{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:960px){
.fa-burger{display:flex;}
.fa-nav{
position:absolute;top:100%;left:0;right:0;margin:0;
flex-direction:column;align-items:stretch;gap:0;
background:#0A1633;border-bottom:1px solid var(--line);
padding:12px 28px 26px;display:none;
box-shadow:0 24px 40px rgba(0,0,0,.35);
}
.fa-menu-toggle:checked ~ .fa-nav{display:flex;}
.fa-nav-item{display:block;}
.fa-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;display:block;}
.fa-nav a::after,.fa-nav-item > a::after{display:none;}
.fa-nav a.is-active{color:var(--accent);}
.fa-caret{display:none;}
.fa-drop{
position:static;opacity:1;visibility:visible;transform:none;
background:none;border:0;box-shadow:none;padding:0 0 0 18px;min-width:0;
}
.fa-drop a{padding:12px 0;border-bottom:1px solid var(--line);border-radius:0;font-size:14.5px;color:var(--muted);}
.fa-drop a::before{content:"- ";color:var(--accent);}
.fa-drop a:hover{background:none;}
.fa-page .fa-nav .fa-btn{display:inline-flex;margin-top:20px;}
.fa-page .fa-header-cta{display:none;}
.fa-hero-grid,.fa-split{grid-template-columns:1fr;gap:46px;}
.fa-split--rev .fa-split-img{order:0;}
.fa-hero-photo{max-width:440px;}
.fa-grid--3,.fa-prices{grid-template-columns:1fr 1fr;}
.fa-steps{grid-template-columns:repeat(2,1fr);}
.fa-usps .fa-wrap{grid-template-columns:1fr 1fr;}
.fa-usp:nth-child(odd){border-left:0;}
.fa-usp:nth-child(n+3){border-top:1px solid var(--line);}
.fa-gallery{grid-template-columns:repeat(2,1fr);}
.fa-form-grid{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:640px){
.fa-page{font-size:16px;}
.fa-wrap{padding:0 20px;}
.fa-sec{padding:66px 0;}
.fa-sec--tight{padding:54px 0;}
.fa-hero{padding:62px 0 66px;}
.fa-pagehead{padding:58px 0 54px;}
.fa-header .fa-wrap{height:72px;gap:12px;}
.fa-logo img{width:122px;}
.fa-nav{padding:12px 20px 24px;}
.fa-grid--2,.fa-grid--3,.fa-prices,.fa-check,.fa-steps,.fa-fields{grid-template-columns:1fr;}
.fa-hero .fa-btn-row .fa-btn,.fa-cta .fa-btn-row .fa-btn{width:100%;}
.fa-flow li{grid-template-columns:46px 1fr;gap:16px;padding:24px 0;}
.fa-head{margin-bottom:40px;}
.fa-formcard{padding:30px 22px;}
.fa-contactcard{padding:26px 22px;}
.fa-box{padding:28px 24px;gap:20px;}
.fa-foot-top{grid-template-columns:1fr;gap:30px;}
.fa-gallery{grid-template-columns:1fr;}
.fa-gallery .fa-wide{grid-column:span 1;}
.fa-usps .fa-wrap{grid-template-columns:1fr;}
.fa-usp{border-left:0;border-top:1px solid var(--line);padding:24px 18px;}
.fa-usp:first-child{border-top:0;}
.fa-usp strong{font-size:23px;}
}
/* ---------- uitgelichte blokken (aanbodpagina) ---------- */
.fa-features{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.fa-features--3{grid-template-columns:repeat(3,1fr);}
.fa-feature{
background:var(--card);border:1px solid var(--line);border-radius:20px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .22s,border-color .22s;
}
.fa-feature:hover{transform:translateY(-5px);border-color:rgba(244,214,65,.45);}
.fa-feature img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.fa-feature-body{padding:34px 32px 36px;display:flex;flex-direction:column;flex:1;}
.fa-feature .fa-eyebrow{margin-bottom:14px;}
.fa-feature h3{font-size:25px;margin-bottom:12px;letter-spacing:-.02em;}
.fa-feature p{color:var(--muted);font-size:15.5px;margin-bottom:22px;}
.fa-feature ul{margin-bottom:28px;flex:1;}
.fa-feature ul li{
font-size:14.5px;color:var(--soft);padding:6px 0 6px 26px;position:relative;
}
.fa-feature ul li::before{
content:"";position:absolute;left:0;top:13px;width:14px;height:2px;
background:var(--accent);border-radius:2px;
}
/* ---------- icoonlijst ---------- */
.fa-iconlist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px;}
.fa-iconlist li{
display:flex;gap:15px;align-items:center;font-size:16.5px;font-weight:600;
color:var(--soft);padding:14px 0;border-bottom:1px solid var(--line);
}
.fa-iconlist svg{
width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.fa-iconlist small{display:block;font-size:13.5px;font-weight:500;color:var(--muted);}
/* ---------- specificaties ---------- */
.fa-specs{
display:grid;grid-template-columns:repeat(5,1fr);
background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.fa-spec{padding:28px 24px;border-left:1px solid var(--line);}
.fa-spec:first-child{border-left:0;}
.fa-spec dt{
font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);margin-bottom:9px;
}
.fa-spec dd{font-size:17px;font-weight:700;line-height:1.35;}
.fa-spec dd small{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-top:4px;}
/* ---------- weken ---------- */
.fa-weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:20px;}
.fa-week{
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:28px 24px;display:flex;flex-direction:column;
}
.fa-week--opt{border-color:rgba(244,214,65,.5);background:linear-gradient(180deg,rgba(244,214,65,.09),transparent 55%);}
.fa-weeknr{
display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.fa-weeknr em{
font-style:normal;background:var(--accent);color:#0A1633;border-radius:999px;
padding:2px 9px;font-size:9.5px;letter-spacing:.1em;
}
.fa-week h3{font-size:18px;margin-bottom:12px;}
.fa-week > p{font-size:14.5px;color:var(--muted);margin-bottom:20px;}
.fa-week h4{
font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--soft);margin:0 0 9px;
}
.fa-week ul{margin-bottom:20px;}
.fa-week ul li{
font-size:14px;color:var(--muted);padding:4px 0 4px 16px;position:relative;line-height:1.5;
}
.fa-week ul li::before{
content:"";position:absolute;left:0;top:12px;width:7px;height:2px;
background:var(--accent);border-radius:2px;
}
.fa-week ul:last-of-type{margin-bottom:0;}
/* ---------- citaat ---------- */
.fa-quote{
text-align:center;max-width:820px;margin:0 auto;position:relative;padding:0 20px;
}
.fa-quote::before{
content:"\201C";display:block;font-size:86px;line-height:.8;color:var(--accent);
font-weight:900;margin-bottom:12px;
}
.fa-quote p{
font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.02em;
}
.fa-quote cite{
display:block;margin-top:22px;font-style:normal;font-size:14px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
/* ---------- flyer ---------- */
.fa-flyer{
max-width:720px;margin:0 auto;border-radius:18px;overflow:hidden;
border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.45);
}
@media (max-width:960px){
.fa-features,.fa-features--3{grid-template-columns:1fr;}
.fa-specs{grid-template-columns:repeat(2,1fr);}
.fa-spec{border-left:1px solid var(--line);border-top:1px solid var(--line);}
.fa-spec:nth-child(odd){border-left:0;}
.fa-spec:nth-child(-n+2){border-top:0;}
}
@media (max-width:640px){
.fa-iconlist{grid-template-columns:1fr;}
.fa-specs{grid-template-columns:1fr;}
.fa-spec{border-left:0;border-top:1px solid var(--line);}
.fa-spec:first-child{border-top:0;}
.fa-feature-body{padding:26px 22px 30px;}
}
/* ---------- scoutingdagen ---------- */
.fa-scouts{display:grid;gap:16px;}
.fa-scout{
display:grid;grid-template-columns:92px 1fr auto;gap:26px;align-items:center;
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:24px 28px;transition:border-color .22s,transform .22s;
}
.fa-scout:hover{border-color:rgba(244,214,65,.45);transform:translateY(-2px);}
.fa-scout-date{
background:var(--accent-soft);border-radius:12px;padding:12px 0;text-align:center;
}
.fa-scout-date strong{display:block;font-size:30px;font-weight:900;color:var(--accent);line-height:1;}
.fa-scout-date span{
display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
color:var(--accent);margin-top:5px;
}
.fa-scout-body h3{font-size:20px;margin-bottom:9px;}
.fa-scout-meta{display:flex;flex-wrap:wrap;gap:8px 20px;}
.fa-scout-meta li{font-size:14.5px;color:var(--muted);position:relative;padding-left:14px;}
.fa-scout-meta li::before{
content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
border-radius:50%;background:var(--accent);
}
.fa-scout-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.fa-scout-spots{
font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);
}
/* ---------- top 5 landen ---------- */
.fa-top5{display:grid;gap:10px;}
.fa-top5 > div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;}
.fa-top5 em{
font-style:normal;width:34px;height:34px;border-radius:50%;
background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:14px;
display:flex;align-items:center;justify-content:center;
}
.fa-hint{font-size:13.5px;color:#7E8DAF;line-height:1.5;margin-top:2px;}
@media (max-width:860px){
.fa-scout{grid-template-columns:72px 1fr;gap:18px;}
.fa-scout-cta{grid-column:1 / -1;flex-direction:row;align-items:center;
justify-content:space-between;width:100%;}
.fa-scout-date strong{font-size:25px;}
}
/* ---------- carrierelijn ---------- */
.fa-timeline{
display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;
padding-top:34px;
}
.fa-timeline::before{
content:"";position:absolute;top:14px;left:8%;right:8%;height:2px;
background:linear-gradient(90deg,rgba(244,214,65,.25),var(--accent),rgba(244,214,65,.25));
}
.fa-timeline li{position:relative;text-align:center;padding:0 10px;}
.fa-tl-dot{
position:absolute;top:-27px;left:50%;transform:translateX(-50%);
width:15px;height:15px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 5px rgba(244,214,65,.18);
}
.fa-timeline h3{font-size:16.5px;margin:24px 0 5px;}
.fa-timeline p{font-size:13.5px;color:var(--muted);}
@media (max-width:860px){
.fa-timeline{grid-template-columns:1fr;padding-top:0;padding-left:26px;}
.fa-timeline::before{top:10px;bottom:10px;left:6px;right:auto;width:2px;height:auto;
background:linear-gradient(180deg,rgba(244,214,65,.25),var(--accent),rgba(244,214,65,.25));}
.fa-timeline li{text-align:left;padding:14px 0;}
.fa-tl-dot{top:22px;left:-26px;transform:none;width:13px;height:13px;}
.fa-timeline h3{margin:0 0 3px;}
}
.fa-timeline--mini{grid-template-columns:repeat(5,1fr);padding-top:28px;}
.fa-timeline--mini::before{top:11px;left:9%;right:9%;}
.fa-timeline--mini h3{font-size:14px;margin-top:20px;}
.fa-timeline--mini p{font-size:12px;}
.fa-timeline--mini .fa-tl-dot{width:12px;height:12px;top:-23px;}
@media (max-width:860px){
.fa-timeline--mini{grid-template-columns:1fr;padding-top:0;}
.fa-timeline--mini::before{top:10px;}
.fa-timeline--mini .fa-tl-dot{top:20px;}
}
/* ---------- terugkoppeling formulier ---------- */
.fa-formmsg{
margin-top:22px;padding:16px 20px;border-radius:12px;
font-size:15px;font-weight:600;line-height:1.55;
}
.fa-formmsg--ok{
background:rgba(244,214,65,.13);border:1px solid rgba(244,214,65,.5);color:var(--accent);
}
.fa-formmsg--fout{
background:rgba(255,110,110,.12);border:1px solid rgba(255,130,130,.45);color:#FFB4B4;
}
/* ---------- clublogo's in de carrierelijn ---------- */
.fa-tl-logo{
display:flex;align-items:center;justify-content:center;position:relative;
width:56px;height:56px;margin:22px auto 10px;border-radius:12px;
background:#fff;overflow:hidden;
}
.fa-tl-logo b{
font-size:14px;font-weight:900;letter-spacing:.04em;color:#0A1633;
}
.fa-tl-logo img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
padding:7px;background:#fff;
}
.fa-timeline h3{margin:0 0 5px;}
.fa-timeline--mini .fa-tl-logo{width:44px;height:44px;margin:18px auto 8px;}
.fa-timeline--mini .fa-tl-logo b{font-size:12px;}
@media (max-width:860px){
.fa-tl-logo,.fa-timeline--mini .fa-tl-logo{margin:0 0 10px;}
}
/* ---------- logo in plaats van een foto in de hero ---------- */
.fa-hero-photo--logo{display:flex;align-items:center;justify-content:center;padding:20px 0;}
.fa-hero-photo--logo img{
width:100%;max-width:430px;height:auto;margin:0 auto;
aspect-ratio:auto;object-fit:contain;
border-radius:0;box-shadow:none;
filter:drop-shadow(0 18px 46px rgba(0,0,0,.45));
}
.fa-hero-photo--logo::after{display:none;}
@media (max-width:960px){
.fa-hero-photo--logo{padding:0;}
.fa-hero-photo--logo img{max-width:320px;}
}