/* Floreo 2026 design-upgrade (rule 28, level "verfijnd").
   A layer on top of content.css + site.css: same texts, structure, photos, logo, navy and taupe, arch shapes
   and the wave motif. What changes: body type (Inter; Rotis stays for headings and logo), more air,
   larger readable text, modern buttons, soft cards, rounded photos, form fields and footer. */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#003b79;--blue-d:#002a57;--ink:#1f2f4a;--muted:#5b6a82;
  --taupe:#aaa095;--taupe-d:#8f8579;--taupe-ink:#7e7468;--sand:#f6f3ef;--line:#e7e2db;
  --r-s:12px;--r:20px;--r-l:28px;
  --shadow:0 1px 2px rgba(16,35,70,.06),0 8px 28px -12px rgba(16,35,70,.22);
  --shadow-h:0 2px 4px rgba(16,35,70,.08),0 18px 40px -16px rgba(16,35,70,.32);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'RotisSemiSerifPro-Regular',Georgia,serif;
}

/* ---------- base type ---------- */
body,body.page{font:400 17px/1.7 var(--sans)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#page p,#page li,#page dd,#page dt,#page td{font-family:var(--sans);font-size:17px;line-height:1.7}
#page .content p{margin-bottom:1em}
#page h1,#page h2,#page h3{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.012em;color:var(--blue)}
#page h1{font-size:clamp(40px,4.6vw,64px)!important;line-height:1.04!important;margin-bottom:.35em}
#page h2{font-size:clamp(32px,3.2vw,46px)!important;line-height:1.1!important;margin-bottom:.45em}
#page h3{font-size:clamp(24px,2.1vw,30px)!important;line-height:1.18!important}
#page .white h1,#page .white h2,#page .white h3,#page .white p,#page .white li{color:#fff}
#page .white p{color:rgba(255,255,255,.88)}
#page a{text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:#cfe0f5;color:var(--blue-d)}

/* ---------- header ---------- */
.hdr{border-top:0!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid transparent}
.hdr-in{max-width:1280px!important}
.hdr-nav .mi>a{font:500 15.5px/22px var(--sans)!important;letter-spacing:-.005em;margin:18px 6px!important;padding:6px 10px!important;border-radius:999px;transition:background-color .2s,color .2s}
.hdr-nav .mi:not(.menubtn)>a:hover{background:#eef3f9}
.hdr-nav .mi>a>span::before{bottom:-3px!important;height:2px!important;border-radius:2px}
.hdr-nav .menubtn>a{background:var(--blue)!important;font:600 15px/22px var(--sans)!important;padding:11px 22px!important;margin-left:14px!important;box-shadow:0 6px 18px -8px rgba(0,59,121,.55);transition:background-color .2s,transform .2s,box-shadow .2s}
.hdr-nav .menubtn>a:hover{background:var(--blue-d)!important;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,59,121,.6)}
.hdr.ph{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(16,35,70,.35)!important}

/* ---------- buttons ---------- */
#page .vc_btn3{font-family:var(--sans)!important;font-weight:600!important;font-size:15.5px!important;letter-spacing:-.005em;line-height:1.2!important;
  padding:14px 26px!important;border-radius:999px!important;border-width:1.5px!important;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s!important}
#page .vc_btn3.vc_btn3-icon-left,#page .vc_btn3.vc_btn3-icon-right{display:inline-flex!important;align-items:center;gap:9px;text-align:left}
#page .vc_btn3.vc_btn3-icon-left .vc_btn3-icon,#page .vc_btn3.vc_btn3-icon-right .vc_btn3-icon{position:static!important;transform:none;display:block;flex:none;width:14px!important;height:14px!important}
#page .vc_btn3:hover{transform:translateY(-2px)}
#page .vc_btn3.vc_btn3-style-custom{box-shadow:0 8px 20px -10px rgba(0,59,121,.6)}
#page .vc_btn3-container{margin-right:8px}
#page .vc_btn3 .fa-svg.vc_btn3-icon{transition:transform .2s}
#page .vc_btn3-icon-right:hover .fa-svg.vc_btn3-icon{transform:translateX(3px)}

/* ---------- photos: rounded, soft depth ---------- */
#page .wpb_single_image:not(.icons) .vc_single_image-wrapper{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);line-height:0}
#page .wpb_single_image:not(.icons) img{border-radius:var(--r);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#page .wpb_single_image:not(.icons):hover img{transform:scale(1.02)}
/* photo gallery (Ons verhaal): build.py --upgrade turns the old mosaic into one even grid (.gallery-2026) */
#page .gallery-2026{max-width:1192px;margin:28px auto 100px}
#page .g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#page .g-item{margin:0;position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#eef1f5;box-shadow:var(--shadow);isolation:isolate}
#page .g-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#page .g-team img{object-position:50% 22%}
#page .g-item:hover img{transform:scale(1.04)}
#page .g-link{display:block;height:100%;color:#fff;text-decoration:none}
#page .g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 18px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(to top,rgba(0,26,56,.82),rgba(0,26,56,.35) 55%,rgba(0,26,56,0));color:#fff}
#page .g-name{font:400 24px/1.15 var(--serif);letter-spacing:-.01em}
#page .g-role{font:500 14px/1.4 var(--sans);opacity:.9}
#page .g-more{font:600 13.5px/1.4 var(--sans);margin-top:8px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
#page .g-link:hover .g-more,#page .g-link:focus-visible .g-more{opacity:1;transform:none}
#page .g-link:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (max-width:900px){#page .g-grid{gap:14px}#page .g-name{font-size:21px}#page .g-item figcaption{padding:44px 16px 14px}}
@media (max-width:640px){#page .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#page .gallery-2026{margin:20px 0 64px}
  #page .g-item{border-radius:var(--r-s)}#page .g-item:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2/1}
  #page .g-name{font-size:18px}#page .g-role{font-size:12.5px}#page .g-more{display:none}#page .g-item figcaption{padding:36px 12px 10px}}
@media (prefers-reduced-motion:reduce){#page .g-item img,#page .g-more{transition:none}}

/* ---------- sections: more air ---------- */
#page .whiterow-3{padding-top:110px!important;padding-bottom:80px!important}
#page .whiterow-2{padding-bottom:110px!important}
#page .bluerow,#page .bluerow-2{padding-top:110px!important;padding-bottom:110px!important;margin-top:0!important}
#page .greyrow{padding-top:100px!important;padding-bottom:100px!important}
#page .whiterow-8{padding-bottom:120px!important}

/* hero */
#page .hero h1{font-size:clamp(44px,5vw,70px)!important;line-height:1.02!important}
#page .hero .headertxt p{font-size:19px;line-height:1.65;color:var(--ink)}

/* blue bands: lighter body text, rounded photo */
#page .bluerow p,#page .bluerow-2 p{font-size:17.5px}
#page .bluerow .wpb_single_image .vc_single_image-wrapper,#page .bluerow-2 .wpb_single_image .vc_single_image-wrapper{box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}

/* taupe band: each service becomes a soft card */
#page .greyrow > .wpb_column > .vc_column-inner{background:var(--taupe-ink);border:0;border-radius:var(--r-l);box-shadow:0 20px 40px -24px rgba(40,30,20,.55);
  margin:0;padding:44px 30px 34px!important;transition:transform .3s;display:flex;flex-direction:column}
#page .greyrow > .wpb_column{padding:10px 12px;box-sizing:border-box}
#page .greyrow > .wpb_column > .vc_column-inner > .wpb_wrapper{display:flex;flex-direction:column;flex:1}
#page .greyrow > .wpb_column .vc_btn3-container{margin-top:auto;padding-top:8px}
#page .greyrow > .wpb_column:hover > .vc_column-inner{transform:translateY(-4px)}
#page .greyrow .icons img{width:84px!important}
#page .greyrow h3{font-size:30px!important;margin-top:14px}
#page .greyrow p{font-size:16px;line-height:1.65;color:#fff}

/* testimonials */
#page .quote h3{font-size:clamp(22px,1.9vw,27px)!important;line-height:1.3!important;color:var(--taupe-d)!important}
#page .whiterow-3 .wpb_single_image .vc_single_image-wrapper{border-radius:var(--r)}
#page .grey p,#page .grey a{color:var(--taupe-ink)!important}

/* client logos: clean cards */
#page .logos{border:0!important;background-color:#fff!important;border-radius:var(--r);box-shadow:var(--shadow);transition:box-shadow .3s,transform .3s;background-size:56%!important}
#page .vc_grid-item-mini:hover .logos{box-shadow:var(--shadow-h);transform:translateY(-3px)}
#page .vc_grid-item-mini .vc_gitem-zone-b{border-radius:var(--r)}

/* training facts: tidy definition list */
#page .trainingspunten{display:grid;grid-template-columns:max-content 1fr;column-gap:22px;row-gap:10px;margin:6px 0 22px;padding:20px 22px;background:var(--sand);border-radius:var(--r)}
#page .trainingspunten dt,#page .trainingspunten dd{width:auto!important;display:block!important;margin:0!important}
#page .trainingspunten dt{font:600 14px/1.7 var(--sans);color:var(--blue);text-transform:none}
#page .trainingspunten dd{font-size:16px;line-height:1.6;color:var(--ink)}
@media (max-width:560px){#page .trainingspunten{grid-template-columns:1fr;row-gap:2px}#page .trainingspunten dd{margin-bottom:10px!important}}

/* open training list: let each block grow with its (now larger) text instead of centring it over the photo height */
#page .opentrainingen-block .vc_gitem-row-position-middle{position:static!important;transform:none!important;display:flex;flex-wrap:wrap;align-items:center}
#page .opentrainingen-block{padding:18px 0}
#page .opentrainingen-block .vc_gitem-col img,#page .opentrainingen-block .vc_gitem-zone-c{border-radius:var(--r)}
#page .opentrainingen-block h3,#page .opentrainingen-block h4{margin-bottom:.4em}

/* team member tiles (name/role over photo) */
#page .teamnaam h3{font-size:26px!important}

/* ---------- contact form ---------- */
#page .cform .quform-field{font:400 16px/1.5 var(--sans)!important;color:var(--ink)!important;background:#fff!important;border:1.5px solid var(--line)!important;
  border-radius:var(--r-s)!important;padding:14px 16px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
#page .cform .quform-field::placeholder{color:var(--muted)!important}
#page .cform .quform-field:focus{border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(0,59,121,.12)!important;outline:0}
#page .cform .quform-field-textarea{min-height:170px}
#page .cform .quform-submit{font:600 15.5px/1.2 var(--sans)!important;border-radius:999px!important;padding:15px 30px!important;box-shadow:0 8px 20px -10px rgba(0,59,121,.6);transition:transform .2s,background-color .2s}
#page .cform .quform-submit:hover{transform:translateY(-2px)}
#page .cform .form-msg{font-family:var(--sans)!important;font-weight:600}

/* ---------- quickview popup ---------- */
.qv-box{border-radius:var(--r-l)!important;box-shadow:0 40px 80px -30px rgba(10,25,50,.5)!important}
.qv::backdrop{background:rgba(10,25,50,.45);backdrop-filter:blur(3px)}

/* ---------- footer ---------- */
.ftr,.resite-credit{background:var(--taupe-ink)!important}
.ftr-in{padding-top:90px!important;padding-bottom:40px!important}
.ftr,.ftr p,.ftr a,.ftr li{font-family:var(--sans)!important;font-size:15px!important;line-height:1.8!important}
.ftr strong{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:.01em}
.ftr a{text-decoration:none;opacity:.92;transition:opacity .2s}
.ftr a:hover{opacity:1;text-decoration:underline}
.resite-credit{font-family:var(--sans);font-size:12.5px!important;padding:6px 16px 22px!important}

/* ---------- small screens ---------- */
@media (max-width:767px){
  body,body.page,#page p,#page li{font-size:16.5px!important}
  #page .whiterow-3,#page .bluerow,#page .bluerow-2,#page .greyrow{padding:72px 0!important}
  #page .greyrow > .wpb_column{padding:8px 16px}
  #page .greyrow > .wpb_column > .vc_column-inner{padding:36px 24px 28px!important}
  #page .hero .headertxt p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){#page .wpb_single_image img,#page .vc_btn3,#page .logos,#page .greyrow .vc_column-inner{transition:none!important}}