/* IQON site-CSS: basis + header + footer (gegenereerd uit de vroegere inline styles) */
html{scroll-behavior:smooth}
        body{margin:0;padding:0;background:#F7F4F0;font-family:'Jost',sans-serif;color:#1A1A1A;-webkit-font-smoothing:antialiased}
        input,select,textarea,button{font-family:'Jost',sans-serif}
        img{max-width:100%}
        h1,h2,h3,h4{font-weight:400}
        
        body:not(.has-dark-hero) main{padding-top:88px}
        @media(max-width:999px){body:not(.has-dark-hero) main{padding-top:72px}}

/* ---- header ---- */
.site-hdr{font-family:'Jost',sans-serif;position:fixed;top:0;left:0;right:0;z-index:1000}
  .site-hdr a{text-decoration:none}

  /* ---------- Desktop ---------- */
  .hdr-desktop{display:none}
  @media(min-width:1000px){.hdr-desktop{display:block}.hdr-mobile{display:none}}
  .hdr-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;
    background:rgba(247,244,240,.94);backdrop-filter:blur(14px);color:#1A1A1A;
    box-shadow:0 1px 0 rgba(26,26,26,.06),0 10px 34px rgba(26,26,26,.10);
    transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;padding:0 48px}
  .hdr-nav{display:flex;align-items:center;gap:34px;flex:1}
  .hdr-nav.right{justify-content:flex-end}
  .hdr-nav>a,.hdr-dd-trigger{font-size:14px;letter-spacing:.06em;color:inherit;opacity:.92;transition:opacity .25s,color .4s}
  .hdr-nav>a:hover,.hdr-dd-trigger:hover{opacity:1}
  .hdr-brand{flex:0 0 auto;display:block;transition:transform .3s ease}
  .hdr-brand:hover{transform:scale(1.04)}
  .hdr-brand img{height:36px;display:block}
  .hdr-brand .logo-white{display:none}
  .hdr-cta{padding:12px 24px;border:1px solid rgba(26,26,26,.4);font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:inherit;transition:all .3s}
  .hdr-cta:hover{background:#B9AA97;border-color:#B9AA97;color:#fff;transform:translateY(-2px)}
  .hdr-dd{position:relative;height:88px;display:flex;align-items:center}
  .hdr-dd-trigger{display:inline-flex;align-items:center;gap:7px}
  .hdr-dd .chev{font-size:9px;transition:transform .3s ease}
  .hdr-dd:hover .chev{transform:rotate(180deg)}
  .hdr-dd-menu{position:absolute;top:88px;left:-14px;background:#fff;box-shadow:0 24px 60px rgba(26,26,26,.18);
    padding:14px 0;min-width:260px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .28s}
  .hdr-dd:hover .hdr-dd-menu{opacity:1;visibility:visible;transform:none}
  .hdr-dd-menu>a{display:flex;align-items:center;padding:12px 26px;transition:background .25s}
  .hdr-dd-menu>a:hover{background:#F7F4F0}
  .hdr-dd-menu>a img{height:24px;display:block}
  .hdr-dd-menu .logo-lava{filter:brightness(0) saturate(100%) invert(53%) sepia(40%) saturate(512%) hue-rotate(349deg) brightness(98%) contrast(131%)}
  .hdr-dd-all{border-top:1px solid #EFEBE4;margin:10px 26px 0;padding-top:12px}
  .hdr-dd-all a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8A8178;transition:color .25s}
  .hdr-dd-all a:hover{color:#1A1A1A}

  /* Transparant over donkere hero (tot je scrollt of de dropdown opent) */
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-bar{
    background:linear-gradient(rgba(20,18,16,.55),rgba(20,18,16,0));backdrop-filter:none;box-shadow:none;color:#fff}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-brand .logo-black{display:none}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-brand .logo-white{display:block}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-cta{border-color:rgba(255,255,255,.65)}
  /* ...maar bij open dropdown tóch crème (zoals het origineel) */
  body.has-dark-hero .site-hdr:not(.is-scrolled):has(.hdr-dd:hover) .hdr-bar{
    background:rgba(247,244,240,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(26,26,26,.06),0 10px 34px rgba(26,26,26,.10);color:#1A1A1A}
  body.has-dark-hero .site-hdr:not(.is-scrolled):has(.hdr-dd:hover) .hdr-brand .logo-black{display:block}
  body.has-dark-hero .site-hdr:not(.is-scrolled):has(.hdr-dd:hover) .hdr-brand .logo-white{display:none}
  body.has-dark-hero .site-hdr:not(.is-scrolled):has(.hdr-dd:hover) .hdr-cta{border-color:rgba(26,26,26,.4)}

  /* ---------- Mobiel ---------- */
  @media(max-width:999px){.hdr-mobile{display:block}}
  .hdr-mbar{position:relative;z-index:1300;display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;height:72px;background:rgba(247,244,240,.94);backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(26,26,26,.06),0 10px 34px rgba(26,26,26,.10);transition:background .4s ease,box-shadow .4s ease}
  .hdr-mbrand img{height:30px;display:block}
  .hdr-mbrand .logo-white{display:none}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-mbar{background:linear-gradient(rgba(20,18,16,.55),rgba(20,18,16,0));backdrop-filter:none;box-shadow:none}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-mbrand .logo-black{display:none}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-mbrand .logo-white{display:block}
  /* open menu → transparante bar zodat de X op de donkere overlay leesbaar is */
  .site-hdr.is-open .hdr-mbar{background:none;box-shadow:none;backdrop-filter:none}
  .hdr-burger{width:44px;height:44px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
  .hdr-burger span{display:block;width:26px;height:2px;background:#1A1A1A;transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease,background .3s ease}
  body.has-dark-hero .site-hdr:not(.is-scrolled) .hdr-burger span{background:#F7F4F0}
  .site-hdr.is-open .hdr-burger span{background:#F7F4F0}
  .site-hdr.is-open .hdr-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .site-hdr.is-open .hdr-burger span:nth-child(2){transform:scaleX(0);opacity:0}
  .site-hdr.is-open .hdr-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .hdr-overlay{position:fixed;inset:0;background:#232120;color:#F7F4F0;z-index:1200;
    clip-path:circle(0% at calc(100% - 42px) 36px);transition:clip-path .65s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:120px 34px 44px;overflow:auto}
  .site-hdr.is-open .hdr-overlay{clip-path:circle(165% at calc(100% - 42px) 36px);pointer-events:auto}
  .hdr-overlay nav{display:flex;flex-direction:column;gap:22px}
  .hdr-overlay nav>a,.hdr-overlay .hdr-sub-head{font-family:'Marcellus',serif;font-size:34px;color:#F7F4F0}
  .hdr-overlay nav>a:active,.hdr-overlay .hdr-sub a:active{color:#B9AA97}
  .hdr-overlay .hdr-sub{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px}
  .hdr-overlay .hdr-sub a{font-size:15px;letter-spacing:.08em;color:rgba(247,244,240,.7)}
  .hdr-overlay .hdr-sub a.lava{color:#D98A3C}
  .hdr-overlay-foot{display:flex;flex-direction:column;gap:18px}
  .hdr-cta-m{display:block;text-align:center;padding:16px;background:#B9AA97;color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
  .hdr-overlay-foot p{margin:0;font-size:14px;color:rgba(247,244,240,.55);text-align:center}

/* ---- footer ---- */
footer.site{background:#232120;color:#F7F4F0;font-family:'Jost',sans-serif}
  footer.site a{color:rgba(247,244,240,.75);text-decoration:none;transition:color .25s ease,transform .25s ease}
  footer.site a:hover{color:#B9AA97}
  footer.site .ft-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
  footer.site .ft-logos{border-bottom:1px solid rgba(247,244,240,.1)}
  footer.site .ft-logos .ft-wrap{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap;padding-top:36px;padding-bottom:36px}
  footer.site .ft-logos a{display:block;opacity:.65;transition:opacity .3s ease}
  footer.site .ft-logos a:hover{opacity:1}
  footer.site .ft-logos img{height:26px;display:block;filter:brightness(0) invert(1)}
  footer.site .ft-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:56px;padding:88px 48px 64px;max-width:1240px;margin:0 auto}
  footer.site .ft-col{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  footer.site h3{margin:0 0 6px;font-family:'Marcellus',serif;font-size:19px;font-weight:400;color:#F7F4F0}
  footer.site .ft-col a{font-size:15px}
  footer.site .ft-col a:hover{transform:translateX(4px)}
  footer.site .ft-bottom{border-top:1px solid rgba(247,244,240,.1)}
  footer.site .ft-bottom .ft-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
  footer.site .ft-bottom span,footer.site .ft-bottom a{font-size:13px;color:rgba(247,244,240,.45)}
  footer.site .ft-bottom a:hover{color:#B9AA97}
  @media(max-width:820px){footer.site .ft-cols{grid-template-columns:1fr 1fr;gap:36px;padding:56px 22px 40px}footer.site .ft-logos .ft-wrap{gap:26px}footer.site .ft-wrap{padding-left:22px;padding-right:22px}}

/* ---- responsive: alle blok-grids stapelen op mobiel ---- */
@media(max-width:900px){
  section[data-screen-label]{padding-left:22px !important;padding-right:22px !important}
  section[data-screen-label] div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:36px !important}
  section[data-screen-label="Kaarten"] div[style*="repeat(3"]{grid-template-columns:1fr !important}
  section[data-screen-label] h1{font-size:40px !important}
  section[data-screen-label] h2{font-size:32px !important}
  section[data-screen-label="Product hero"]{padding-top:150px !important;padding-bottom:70px !important}
  section[data-screen-label="Paginakop"]{padding-top:150px !important;padding-bottom:60px !important}
  section[data-screen-label="Hero"] h1{font-size:38px !important}
  section[data-screen-label="Hero"] > div > div[style*="display:flex"]{flex-direction:column;align-items:center}
  /* afspraakformulier: niet sticky + volle breedte; kalender blijft netjes */
  section[data-screen-label="Afspraak"] form{position:static !important;padding:32px 22px !important}
  section[data-screen-label="Conversie"] form{padding:32px 22px !important}
  /* checklists in 2 kolommen -> 1 kolom */
  section[data-screen-label] div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  /* foto-hoogtes beperken op mobiel */
  section[data-screen-label] div[style*="height:560px"],
  section[data-screen-label] div[style*="height:540px"],
  section[data-screen-label] div[style*="height:520px"]{height:340px !important}
  /* kleurenpalet: 2 rijen van 4 i.p.v. 8 naast elkaar */
  section[data-screen-label="Kleurenpalet"] div[style*="display:flex"][style*="height:"]{flex-wrap:wrap;height:auto !important}
  section[data-screen-label="Kleurenpalet"] div[style*="display:flex"][style*="height:"] > div{flex:1 1 25% !important;min-height:110px}
}

/* uitzondering: het kalender-rooster (7 kolommen) nooit stapelen */
@media(max-width:900px){
  #iqon-cal div[style*="grid-template-columns"]{grid-template-columns:repeat(7,1fr) !important;gap:3px !important}
}