/* ===========================================================================
   hsb-profiel-secties.css — de opmaak van drie blokken op de sprekerspagina

   Deze drie stukken stonden als <style>-blok middenin includes/item-hero.php,
   en twee ervan zelfs NA de sectie die ze opmaken. De browser tekende die
   blokken daardoor eerst zonder opmaak en zette ze daarna in een keer goed.
   Nu staan ze in de <head> van item-profiel.php.

   Een op een overgenomen, in dezelfde volgorde, met een uitzondering:
   --bb en --bo stonden in de opmaak als PHP-waarden ($brandBlue en
   $brandOrange). Die twee staan in item-hero.php zelf als vaste kleur
   (#103856 en #f56c20) en komen niet uit het CMS, dus ze staan hier
   uitgeschreven. Verandert de huisstijlkleur ooit, dan is dit de plek --
   samen met de drie regels in item-hero.php waar ze ook nog staan.

   LET OP de volgorde: hsb-profiel.css staat HIERVOOR in de head en zet een
   deel van het aanvraagblok opnieuw (de donkerblauwe kaart, de witte
   formulierkaart, de labels, de knop). Die regels winnen omdat ze twee
   klassen diep zijn (.hsb-lead__blok .hsb-lead__card). Dat was eerder ook
   zo en blijft zo.
   =========================================================================== */

/* --- lead-band: de donkerblauwe balk met het korte formulier ------- */
.lead-band-wrap{--bb:#103856;--bo:#f56c20}
.lead-band{background:var(--bb,#103856);border-radius:18px;padding:26px 30px;color:#fff}
.lead-band__inner{display:flex;align-items:center;gap:28px;flex-wrap:nowrap}
.lead-band__text{flex:1 1 290px;min-width:240px}
.lead-band__text h2{font-size:1.5rem;margin:0 0 .25rem;color:#fff;line-height:1.15}
.lead-band__text p{margin:0;color:rgba(255,255,255,.7);font-size:.9rem}
.lead-band__form{display:flex;gap:10px;flex:2 1 560px;flex-wrap:nowrap;align-items:center;min-width:0}
.lead-band__form input{flex:1 1 0;min-width:70px;padding:.8rem .9rem;border:1px solid rgba(255,255,255,.15);border-radius:10px;font-size:.95rem;background:#fff;color:#1d1d1f}
.lead-band__form input::placeholder{color:#9aa1ab}
.lead-band__form input:focus{outline:none;box-shadow:0 0 0 3px rgba(245,108,32,.35)}
.lead-band__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:10px;padding:.85rem 1.4rem;font-weight:700;font-size:.95rem;color:#fff;cursor:pointer;white-space:nowrap;transition:filter .2s,transform .1s}
.lead-band__btn:hover{filter:brightness(1.08)}
.lead-band__btn:active{transform:translateY(1px)}
.lead-band__badges{display:flex;gap:30px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.lead-band__badges span{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.78);font-size:.82rem}
.lead-band__badges i{color:var(--bo,#f56c20);font-size:1rem}
.lead-err{color:#ffb4a8;font-size:.85rem;margin:.6rem 0 0;min-height:0}
.lead-err:not(:empty){margin-top:.8rem}
.req{color:#f56c20}
@media (max-width:880px){
  .lead-band__inner{flex-wrap:wrap}
  .lead-band__text{flex-basis:100%}
  .lead-band__form{flex-basis:100%;flex-wrap:wrap}
  .lead-band__form input,.lead-band__btn{flex:1 1 100%}
}

/* slide-over */
.lead-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:1080}
.lead-overlay.is-open{opacity:1;visibility:visible}
.lead-panel{position:fixed;top:0;right:0;height:100dvh;width:min(480px,100%);background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1081;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.lead-panel.is-open{transform:translateX(0)}
.lead-panel__head{padding:16px 24px;border-bottom:1px solid #e6e8ec;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;background:#103856;color:#fff}
.lead-panel__head h3{margin:0;font-family:Georgia,serif;font-size:1.25rem}
.lead-panel__head p{margin:.25rem 0 0;font-size:.85rem;opacity:.85}
.lead-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;flex-shrink:0;line-height:1}
#lead-form{display:flex;flex-direction:column;flex:1;min-height:0}
.lead-panel__body{padding:16px 24px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lp-field{margin-bottom:.6rem}
.lp-field label{display:block;font-size:.78rem;font-weight:600;color:#444;margin-bottom:.2rem}
.lp-field input,.lp-field select,.lp-field textarea{width:100%;padding:.5rem .7rem;border:1px solid #e6e8ec;border-radius:9px;font-size:.9rem;background:#fbfbfd;font-family:inherit}
.lp-field input:focus,.lp-field select:focus,.lp-field textarea:focus{outline:none;border-color:#103856;background:#fff}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lp-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:#555;margin:.4rem 0 1rem}
.lead-panel__foot{padding:18px 24px;border-top:1px solid #e6e8ec;background:#fafbfc}
.lead-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:none;border-radius:10px;padding:.9rem 1.4rem;font-weight:700;font-size:.95rem;color:#fff;cursor:pointer;transition:filter .2s,transform .1s}
.lead-submit:hover{filter:brightness(1.08)}
.lead-submit:active{transform:translateY(1px)}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fw-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* --- autoriteit: het blok "autoriteit" met het verloop ------------- */
  #autoriteit .hsb-aut{--bb:#103856;--bo:#f56c20;
    position:relative;border-radius:24px;overflow:hidden;
    background:linear-gradient(125deg,#e7eef6 0%,#f3f7fb 42%,#ffffff 72%);
    display:grid;grid-template-columns:minmax(0,1fr) 340px}
  #autoriteit .hsb-aut__body{padding:44px 48px}
  #autoriteit .hsb-aut__title{color:var(--bb);font-size:2.5rem;line-height:1.12;margin:0 0 1rem;font-weight:700}
  #autoriteit .hsb-aut__intro{color:#5b6470;font-size:1.05rem;line-height:1.6;margin:0 0 2.4rem;max-width:620px}
  #autoriteit .hsb-aut__usps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  #autoriteit .hsb-aut__usp{text-align:center}
  #autoriteit .hsb-aut__ico{width:62px;height:62px;border-radius:50%;background:#dce6f1;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.5rem;margin:0 auto .8rem}
  #autoriteit .hsb-aut__usp h4{color:var(--bb);font-size:.98rem;font-weight:700;margin:0 0 .4rem}
  #autoriteit .hsb-aut__usp p{color:#6e7680;font-size:.83rem;line-height:1.45;margin:0}
  #autoriteit .hsb-aut__div{border:0;border-top:1px solid #dde3ea;margin:2.4rem 0 1.8rem}
  #autoriteit .hsb-aut__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  #autoriteit .hsb-aut__advies{display:flex;align-items:center;gap:1rem}
  #autoriteit .hsb-aut__advies-ico{width:56px;height:56px;border-radius:50%;background:#dce6f1;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.4rem;flex-shrink:0}
  #autoriteit .hsb-aut__advies strong{display:block;color:var(--bb);font-size:1.05rem}
  #autoriteit .hsb-aut__advies p{margin:.15rem 0 0;color:#6e7680;font-size:.92rem}
  #autoriteit .hsb-aut__tel{text-align:right;text-decoration:none}
  #autoriteit .hsb-aut__tel strong{display:block;color:var(--bb);font-size:1.7rem;line-height:1}
  #autoriteit .hsb-aut__tel span{display:block;margin-top:.25rem;color:#6e7680;font-size:.88rem}
 #autoriteit .hsb-aut__photo{position:relative;min-height:100%;overflow:hidden}
  #autoriteit .hsb-aut__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:blur(2px);transform:scale(1.06)}
  #autoriteit .hsb-aut__photo::after{content:"";position:absolute;inset:0;background:#16264a;opacity:.20;pointer-events:none}
  @media (max-width:992px){
    #autoriteit .hsb-aut{grid-template-columns:1fr}
    #autoriteit .hsb-aut__photo{display:none}
    #autoriteit .hsb-aut__body{padding:32px}
    #autoriteit .hsb-aut__title{font-size:2rem}
    #autoriteit .hsb-aut__tel{text-align:left}
  }
  @media (max-width:768px){
    #autoriteit .hsb-aut__usps{grid-template-columns:repeat(3,1fr);row-gap:26px}
  }
  @media (max-width:480px){
    #autoriteit .hsb-aut__usps{grid-template-columns:repeat(2,1fr)}
  }

/* --- aanvraag: het aanvraagblok onderaan (#aanvraag) --------------- */
  .hsb-lead{--bb:#103856;--bo:#f56c20;background:#fff}
  .hsb-lead .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .hsb-lead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:52px;align-items:start}

  .hsb-lead__intro h2{color:var(--bb);font-size:2.6rem;line-height:1.12;margin:0 0 1rem;font-weight:700}
  .hsb-lead__lead{color:#5b6470;font-size:1.05rem;line-height:1.6;margin:0 0 1.8rem}
  .hsb-lead__lead strong{color:var(--bb)}
  .hsb-usp{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
  .hsb-usp li{display:flex;gap:1rem;align-items:flex-start}
  .hsb-usp__ico{width:48px;height:48px;border-radius:50%;border:1px solid #e4e7ec;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.15rem;flex-shrink:0}
  .hsb-usp strong{display:block;color:var(--bb);font-size:1rem;margin-bottom:.15rem}
  .hsb-usp p{margin:0;color:#6e7680;font-size:.9rem;line-height:1.45}
  .hsb-lead__intro hr{border:0;border-top:1px solid #e9ebef;margin:1.8rem 0}
  .hsb-overleg h3{color:var(--bb);font-size:1.35rem;margin:0 0 .4rem}
  .hsb-overleg>p{color:#6e7680;font-size:.95rem;line-height:1.5;margin:0 0 1.1rem}
  .hsb-tel{display:flex;gap:1rem;align-items:center;text-decoration:none}
  .hsb-tel__ico{width:56px;height:56px;border-radius:14px;background:#f1f3f5;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.4rem;flex-shrink:0}
  .hsb-tel strong{display:block;color:var(--bb);font-size:1.5rem;line-height:1}
  .hsb-tel__sub{display:block;margin-top:.2rem;color:#6e7680;font-size:.88rem}

  .hsb-lead__card{border:1px solid #e6e8ec;border-radius:18px;padding:30px;box-shadow:0 10px 40px rgba(16,56,86,.05)}
  .hsb-lead__cardhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.3rem}
  .hsb-lead__cardhead h3{color:var(--bb);font-size:1.5rem;margin:0}
  .hsb-lead__reqnote{color:#9aa1ab;font-size:.82rem}
  .hsb-fieldset{border:0;padding:0;margin:0}
  .hsb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
  .hsb-field{display:flex;flex-direction:column;min-width:0}
  .hsb-full{margin-bottom:.9rem}
  .hsb-field input,.hsb-field select,.hsb-field textarea{width:100%;padding:.9rem 1rem;border:1px solid #e3e7ec;border-radius:12px;font-size:.95rem;background:#fff;font-family:inherit;color:#1d1d1f}
  .hsb-field input::placeholder,.hsb-field textarea::placeholder{color:#9aa1ab}
  .hsb-field select{color:#6e7680}
  .hsb-field input:focus,.hsb-field select:focus,.hsb-field textarea:focus{outline:none;border-color:var(--bb);box-shadow:0 0 0 3px rgba(16,56,86,.1)}
  .hsb-slab{font-size:.8rem;color:#8a929c;margin-bottom:.3rem}
  .hsb-info-line{display:flex;gap:.5rem;align-items:center;color:#8a929c;font-size:.85rem;margin:.4rem 0 1rem}
  .hsb-info-line i{color:var(--bb)}
  .hsb-recap{margin:1.1rem 0}
  .hsb-submit{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:none;border-radius:12px;padding:1.05rem 1.4rem;font-weight:700;font-size:1rem;color:#fff;background:var(--bo);cursor:pointer;transition:filter .2s,transform .1s}
  .hsb-submit:hover{filter:brightness(1.06)}
  .hsb-submit:active{transform:translateY(1px)}
  .hsb-akkoord{display:flex;gap:.5rem;align-items:center;justify-content:center;font-size:.88rem;color:#5b6470;margin-top:.9rem}
  .hsb-akkoord a{color:var(--bo)}
  .hsb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .fw-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

  @media (max-width:900px){
    .hsb-lead__grid{grid-template-columns:1fr;gap:36px}
    .hsb-lead__intro h2{font-size:2rem}
    .hsb-lead__card{padding:22px}
  }
  @media (max-width:520px){
    .hsb-grid2{grid-template-columns:1fr}
  }