@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/bdba243e0f.woff2) format("woff2");}
  @font-face{font-family:"Zilla Slab";font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/f11dc3b4df.woff2) format("woff2");}

  :root{
    --blue:#102E82; --blue-deep:#0B2168; --blue-body:#213D79; --blue-line:#304FA4;
    --orange:#FF7033; --orange-2:#FF8A55;
    --white:#FFFFFF; --ice:#EDF5FC; --line:#C3CAD5; --muted:#5C6B8A; --on-blue-mut:#B9C7EA;
    --f-disp:"Outfit","Helvetica Neue","Segoe UI",system-ui,Arial,sans-serif;
    --f-body:"Zilla Slab",Georgia,"Times New Roman",serif;
    --pad:clamp(20px, 8.33vw, 126px); --lift:clamp(24px,4vw,40px); --piece:url("../assets/img/c345ede36e.svg");
    --img-a:url("../assets/img/b21f52e7f5.jpg"); --img-b:url("../assets/img/9133cb213e.jpg"); --img-c:url("../assets/img/255f719207.jpg");
  }
  /* Blue-first in every OS theme. No OS dark-mode flip.
     Sizes are clamp(min, px/14.4 vw, max): each lands on its Figma size at a 1440
     viewport and grows from there, so nothing stays fixed on a wide screen. */

  *{box-sizing:border-box;}
  body{margin:0;background:var(--blue);color:var(--blue-body);font-family:var(--f-body);font-weight:300;font-size:clamp(16px, 1.18vw, 18px);line-height:1.8;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1512px;margin:0 auto;padding:0 var(--pad);}
  h1,h2,h3,h4{font-family:var(--f-disp);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.005em;}
  p{margin:0;} a{color:inherit;text-decoration:none;} img{max-width:100%;}
  .hl{color:var(--orange);}

  /* Panels: every surface change is a rounded panel sliding over the one above */
  .panel{position:relative;padding:clamp(72px,8.33vw,126px) 0;}
  [id]{scroll-margin-top:88px;} /* clear the sticky nav on anchor jumps */
  .lift{border-radius:var(--lift) var(--lift) 0 0;margin-top:calc(var(--lift) * -1);}
  .p-blue{background:var(--blue);color:#fff;}
  .p-white{background:var(--white);}
  .p-ice{background:var(--ice);}
  .p-blue h1,.p-blue h2,.p-blue h3,.p-blue h4{color:#fff;}
  .p-white h2,.p-white h3,.p-white h4,.p-ice h2,.p-ice h3,.p-ice h4{color:var(--blue);}

  /* Type scale */
  h1{font-size:clamp(38px, 4.4vw, 67px);line-height:.9;max-width:15ch;}
  h2{font-size:clamp(28px, 3.2vw, 48px);line-height:1.08;max-width:20ch;}
  h3{font-size:clamp(22px, 1.67vw, 25px);font-weight:500;line-height:1.1;}
  .eyebrow{font-family:var(--f-body);font-size:clamp(16px, 1.25vw, 19px);line-height:1.2;color:var(--on-blue-mut);}
  .p-white .eyebrow,.p-ice .eyebrow{color:var(--muted);}
  .lede{font-size:clamp(17px, 1.25vw, 19px);max-width:62ch;}
  .meta{font-family:var(--f-disp);font-size:clamp(13px,.97vw,18px);color:var(--muted);}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:clamp(52px, 3.9vw, 59px);padding:0 clamp(20px, 1.67vw, 25px);
    border-radius:130px;border:0;cursor:pointer;font-family:var(--f-disp);font-weight:500;font-size:clamp(17px, 1.25vw, 19px);
    line-height:1;transition:background .2s,border-color .2s,color .2s,transform .2s;}
  .btn:hover{transform:translateY(-2px);}
  .btn-p{background:var(--orange);color:var(--blue);}
  .btn-p:hover{background:var(--orange-2);}
  .btn-o{background:transparent;border:1px solid var(--line);color:var(--blue);}
  .btn-o:hover{border-color:var(--orange);color:var(--orange);}
  .p-blue .btn-o{border-color:var(--blue-line);color:#fff;}
  .p-blue .btn-o:hover{border-color:var(--orange);color:var(--orange);}
  .btn-sm{height:46px;font-size:16px;padding:0 20px;}
  .row{display:flex;flex-wrap:wrap;gap:8px;}

  /* Nav */
  .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px var(--pad);background:transparent;transition:background .3s,backdrop-filter .3s;}
  .nav.stuck{background:color-mix(in srgb,var(--blue) 88%,transparent);backdrop-filter:blur(14px);}
  .brand{display:flex;align-items:center;gap:10px;cursor:pointer;}
  .logo{height:44px;width:auto;color:#fff;flex:none;}
  .logo-lg{height:56px;}
  @media(max-width:520px){.logo{height:38px;} .logo-lg{height:44px;}}
  @media(min-width:1081px){.logo{height:60px;}}
  .navpill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:999px;padding:6px;}
  .navpill .navitem>a{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);font-size:15px;color:#fff;
    padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s;}
  .navpill .navitem>a:hover{background:rgba(255,255,255,.14);}
  .navpill .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:4px solid currentColor;opacity:.65;margin-top:2px;}
  .arw{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;flex:none;}
  .navcta{font-family:var(--f-disp);font-size:15px;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;
    padding:9px 18px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
  .navcta:hover{border-color:var(--orange);color:var(--orange);}
  @media(max-width:1080px){.navpill{display:none;}}
  @media(max-width:640px){.navcta{display:none;}}
  /* Utility bar (Trainingen | Artikelen | Contact) */
  .utilbar{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:10px var(--pad) 0;}
  .utilbar a{font-family:var(--f-disp);font-size:14px;color:#fff;opacity:.82;cursor:pointer;transition:opacity .2s,color .2s;}
  .utilbar a:hover{opacity:1;color:var(--orange);}
  .utilbar .sep{color:#fff;opacity:.35;}
  @media(max-width:640px){.utilbar{display:none;}}
  /* Nav dropdowns */
  .navitem{position:relative;display:flex;}
  .dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease;z-index:60;}
  .navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto;}
  .dropcard{display:flex;gap:32px;background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:24px 28px;box-shadow:0 40px 70px -34px rgba(11,33,104,.55);}
  .dropcard.single{display:block;}
  .dropcol{min-width:148px;}
  .dropcol b{display:block;font-family:var(--f-disp);font-weight:500;font-size:12px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
  .dropcol a{display:block;font-family:var(--f-body);font-size:15px;line-height:1.3;color:var(--blue);
    padding:7px 0;cursor:pointer;white-space:nowrap;transition:color .2s;}
  .dropcol a:hover{color:var(--orange);}

  /* Mobile menu */
  .burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;flex:none;}
  .burger span{position:absolute;left:10px;right:10px;height:1.5px;background:#fff;transition:transform .25s;}
  .burger span:nth-child(1){top:18px;} .burger span:nth-child(2){top:25px;}
  body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
  body.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}
  @media(max-width:1080px){.burger{display:block;}}
  .sheet{position:fixed;inset:0;z-index:45;background:var(--blue);padding:88px var(--pad) 40px;
    display:none;flex-direction:column;overflow-y:auto;}
  body.menu-open .sheet{display:flex;}
  .sheet a{font-family:var(--f-disp);font-size:clamp(22px,6vw,28px);color:#fff;padding:16px 0;
    border-bottom:1px solid var(--blue-line);cursor:pointer;}
  .sheet a:last-of-type{border-bottom:0;}
  .sheet .btn{margin-top:24px;align-self:flex-start;}

  /* Views + page transition */
  .view{display:none;} .view.active{display:block;}
  @media(prefers-reduced-motion:no-preference){
    ::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both;}
    ::view-transition-new(root){animation:vtIn .44s cubic-bezier(.16,1,.3,1) both;}
    @keyframes vtOut{to{opacity:0;transform:translateY(-10px);}}
    @keyframes vtIn{from{opacity:0;transform:translateY(16px);}}
  }

  /* Hero */
  .hero{position:relative;overflow:hidden;padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(60px,8vw,120px);}
  .hero .squig{position:absolute;right:-4%;top:-6%;width:min(920px,70vw);opacity:.5;pointer-events:none;}
  .hero .squig path{fill:none;stroke:var(--blue-line);stroke-width:1.5;}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;position:relative;}
  .hero .pay{margin-top:18px;color:#fff;font-size:clamp(17px, 1.25vw, 19px);line-height:1.4;max-width:46ch;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}

  /* Photo collage */
  .collage{position:relative;width:100%;}
  .ph{position:absolute;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 30px 60px -34px rgba(0,0,0,.55);}
  .ph-a{background-image:var(--img-a);background-position:36% center;}
  .ph-b{background-image:var(--img-b);background-position:58% center;}
  .ph-c{background-image:var(--img-c);background-position:62% center;}
  /* offsets mirror the Figma collage (2018:6423–6425) */
  .cl-hero{aspect-ratio:586/522;max-width:820px;margin-left:auto;}
  .cl-hero .ph1{left:0;top:13.4%;width:56.8%;aspect-ratio:333/406;z-index:2;}
  .cl-hero .ph2{left:48%;top:0;width:35%;aspect-ratio:205/249;}
  .cl-hero .ph3{left:65%;top:52.3%;width:35%;aspect-ratio:205/249;}
  /* Compact sub-page hero (Figma 2041:6221): breadcrumb + page name + puzzle motif */
  .hero-head{position:relative;overflow:hidden;padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(60px,7.6vw,115px);}
  .hero-head>.wrap{position:relative;z-index:1;}
  .hero-head .page-title{font-size:clamp(32px,3.47vw,52px);line-height:.95;color:#fff;max-width:22ch;margin-top:clamp(10px,1vw,16px);}
  .hero-pz{position:absolute;right:clamp(16px,3vw,64px);top:50%;transform:translateY(-46%) rotate(9deg);width:clamp(180px,20vw,293px);aspect-ratio:293/292;background:var(--piece) center/contain no-repeat;pointer-events:none;z-index:0;opacity:.85;}
  @media(max-width:700px){.hero-pz{right:-6%;opacity:.22;}}
  /* Intro panel: value content relocated from the old blue hero onto white */
  .pintro .pay{margin-top:18px;font-size:clamp(17px, 1.25vw, 19px);line-height:1.6;max-width:52ch;}
  .pintro .quote{color:var(--blue);}
  .pintro{padding-bottom:clamp(32px,4vw,64px);}
  .cl-state{aspect-ratio:584/449;max-width:780px;}
  .cl-state .ph1{left:0;bottom:0;width:52%;aspect-ratio:290/353;box-shadow:0 30px 60px -38px rgba(16,46,130,.5);}
  .cl-state .ph2{left:45%;top:0;width:36%;aspect-ratio:205/249;box-shadow:0 30px 60px -38px rgba(16,46,130,.5);}
  @media(prefers-reduced-motion:no-preference){
    .float{animation:float 7s ease-in-out infinite;}
    .float2{animation:float 7s ease-in-out infinite;animation-delay:-3.5s;}
    @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  }

  /* Conversational search */
  .search{position:relative;margin-top:26px;max-width:520px;}
  .search input{width:100%;height:56px;border-radius:130px;border:1px solid var(--blue-line);
    background:rgba(255,255,255,.08);color:#fff;font-family:var(--f-disp);font-size:clamp(16px, 1.18vw, 18px);padding:0 56px 0 24px;outline:none;}
  .search input::placeholder{color:var(--on-blue-mut);}
  .search input:focus{border-color:var(--orange);background:rgba(255,255,255,.14);}
  .search .go{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--orange);
    color:var(--blue);cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;}
  .sugg{position:absolute;left:0;right:0;top:64px;z-index:20;background:#fff;border-radius:16px;padding:8px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.5);display:none;}
  .sugg.open{display:block;}
  .sugg button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
    font-family:var(--f-disp);font-size:16px;color:var(--blue);padding:11px 14px;border-radius:10px;}
  .sugg button:hover{background:var(--ice);}
  .sugg .none{padding:11px 14px;color:var(--muted);font-family:var(--f-disp);font-size:15px;}

  /* Vraagstuk rows */
  /* fill column one top-to-bottom, then column two (as in the Figma layout) */
  .vg{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--vg-rows,3),auto);
    grid-auto-flow:column;gap:0 80px;}
  @media(max-width:820px){.vg{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:0;}}
  /* arrow sits right after the label, as in Figma, not flushed to the far edge */
  .vgrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
    border-bottom:1px solid var(--line);padding:26px 0;cursor:pointer;font-family:var(--f-disp);font-size:clamp(16px, 1.18vw, 18px);
    color:var(--blue);transition:color .2s;}
  .vgrow:hover{color:var(--orange);}
  .vgrow .arw{transition:transform .2s;font-size:20px;line-height:1;}
  .vgrow:hover .arw{transform:translateX(5px);}
  .vgrow small{display:block;font-family:var(--f-body);font-size:clamp(14px, 1.04vw, 16px);color:var(--muted);margin-top:2px;}

  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:clamp(36px,5vw,56px);}
  @media(max-width:700px){.stats{grid-template-columns:1fr;gap:22px;}}
  .stats .n{font-family:var(--f-disp);font-weight:500;font-size:clamp(40px, 4.44vw, 67px);line-height:1;color:var(--orange);}
  .stats .l{font-family:var(--f-disp);font-size:clamp(14px, 1.04vw, 16px);color:var(--muted);margin-top:10px;}
  .p-blue .stats .l{color:var(--on-blue-mut);}

  /* Trust bar */
  .trust{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);padding-top:26px;overflow:hidden;}
  .trust .lbl{font-family:var(--f-disp);font-size:clamp(13px,.97vw,18px);color:var(--muted);margin-bottom:16px;}
  .trust .track{display:flex;gap:52px;width:max-content;align-items:center;}
  @media(prefers-reduced-motion:no-preference){.trust .track{animation:marq 30s linear infinite;}}
  @keyframes marq{to{transform:translateX(-50%);}}
  .trust .lg{font-family:var(--f-disp);font-weight:500;font-size:clamp(17px, 1.25vw, 19px);color:var(--blue);opacity:.42;white-space:nowrap;}

  /* Two-column split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 5vw, 76px);align-items:center;}
  .split.top{align-items:start;}
  @media(max-width:900px){.split{grid-template-columns:1fr;}}
  .intro-center{max-width:680px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;}
  .intro-center .lede{max-width:100%;}

  /* Numbered accordion */
  .steps{margin-top:clamp(28px,4vw,40px);}
  .step{border-bottom:1px solid var(--blue-line);}
  .p-white .step,.p-ice .step{border-color:var(--line);}
  .step summary{display:flex;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;}
  .step summary::-webkit-details-marker{display:none;}
  .step .num{font-family:var(--f-disp);font-weight:500;font-size:clamp(38px, 3.9vw, 59px);line-height:1;
    color:var(--orange);width:clamp(60px, 5vw, 76px);flex:none;}
  .step .t{flex:1;min-width:0;}
  .step .t b{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(22px, 1.67vw, 25px);line-height:1.1;color:inherit;}
  .step .t span{display:block;font-size:clamp(16px, 1.18vw, 18px);line-height:1.3;margin-top:8px;opacity:.85;}
  .pm{width:24px;height:24px;flex:none;position:relative;opacity:.8;}
  .pm::before,.pm::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:currentColor;}
  .pm::after{transform:rotate(90deg);transition:transform .42s cubic-bezier(.16,1,.3,1);}
  details[open]>summary .pm::after{transform:rotate(0);}
  .step .more{padding:0 0 24px clamp(84px, 6.7vw, 101px);max-width:60ch;font-size:clamp(16px, 1.18vw, 18px);opacity:.85;}
  @media(max-width:600px){.step .num{width:52px;font-size:34px;}.step .more{padding-left:0;}}

  /* Cards */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:980px){.grid3{grid-template-columns:1fr 1fr;}}
  @media(max-width:660px){.grid3{grid-template-columns:1fr;}}
  .card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;
    transition:transform .28s,box-shadow .28s,border-color .28s;display:flex;flex-direction:column;}
  .p-white .card{background:var(--ice);border-color:transparent;}
  .card:hover{transform:translateY(-5px);box-shadow:0 30px 50px -34px rgba(16,46,130,.45);border-color:var(--line);}
  .card .im{aspect-ratio:16/10;background-size:cover;background-position:center;margin:0;border-radius:0;}
  #profGrid .card{background:transparent;border:1px solid var(--line);}
  #profGrid .card .im{aspect-ratio:1/1;margin:0;border-radius:0;background-position:center 15%;}
  #profGrid .card .cq{font-size:clamp(14px,1.04vw,16px);color:var(--muted);font-style:italic;margin-top:8px;}
  .card .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
  .card h3{font-size:clamp(19px, 1.39vw, 21px);margin-top:10px;color:var(--blue);}
  .card p{font-size:clamp(15px, 1.11vw, 17px);line-height:1.6;margin-top:10px;color:var(--blue-body);}
  .client{font-size:clamp(13px,.97vw,15px);color:var(--muted);margin-top:12px;}
  .client b{font-family:var(--f-disp);font-weight:500;color:var(--blue);}
  .card .plink{margin-top:auto;padding-top:16px;font-family:var(--f-disp);font-size:clamp(14px, 1.04vw, 16px);color:var(--orange);
    display:inline-flex;align-items:center;gap:7px;}
  .card .plink .arw{transition:transform .2s;}
  .card:hover .plink .arw{transform:translateX(4px);}
  .tags{display:flex;flex-wrap:wrap;gap:6px;}
  .tag{font-family:var(--f-disp);font-size:clamp(12px,.83vw,16px);line-height:1;padding:6px 11px;border-radius:999px;
    border:1px solid var(--line);color:var(--muted);}
  .tag.acc{border-color:var(--orange);color:var(--orange);}
  .who{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
  .p-white .who{border-color:#dbe6f4;}
  .av{width:clamp(34px, 2.36vw, 36px);height:clamp(34px, 2.36vw, 36px);border-radius:50%;flex:none;background-size:cover;}
  .av.ph-a{background-position:38% 20%;} .av.ph-b{background-position:56% 12%;} .av.ph-c{background-position:66% 10%;}
  .who b{font-family:var(--f-disp);font-weight:500;font-size:clamp(14px, 1.04vw, 16px);color:var(--blue);}
  .who span{display:block;font-family:var(--f-disp);font-size:clamp(12px,.9vw,17px);color:var(--muted);}

  /* Scans */
  .scan{border:1px solid var(--blue-line);border-radius:16px;padding:28px;display:flex;flex-direction:column;
    transition:transform .25s,border-color .25s;}
  .scan:hover{transform:translateY(-5px);border-color:var(--orange);}
  .scan .k{font-family:var(--f-disp);font-size:clamp(13px,.97vw,18px);color:var(--orange);}
  .scan p{color:var(--on-blue-mut);font-size:clamp(16px, 1.18vw, 18px);margin-top:10px;}
  .scan .btn{margin-top:22px;align-self:flex-start;}
  .usp{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .usp span{font-family:var(--f-disp);font-size:clamp(13px,.9vw,17px);color:#fff;border:1px solid var(--blue-line);border-radius:999px;padding:6px 12px;}

  /* Contact block */
  .contact{display:grid;grid-template-columns:1fr minmax(300px,.72fr);gap:clamp(28px,5vw,64px);align-items:center;}
  @media(max-width:820px){.contact{grid-template-columns:1fr;}}
  .person{display:flex;align-items:center;gap:clamp(16px, 1.25vw, 19px);background:#fff;
    border-radius:16px;padding:clamp(16px, 1.25vw, 19px) clamp(20px, 1.67vw, 25px) clamp(16px, 1.25vw, 19px) clamp(16px, 1.25vw, 19px);}
  .person .av{width:clamp(64px, 4.44vw, 67px);height:clamp(64px, 4.44vw, 67px);}
  .person b{font-family:var(--f-disp);font-weight:500;font-size:clamp(18px, 1.39vw, 21px);color:var(--blue);display:block;}
  .person span{font-family:var(--f-disp);font-size:clamp(14px, 1.04vw, 16px);color:var(--muted);}
  .person a{display:block;font-family:var(--f-disp);font-size:clamp(15px, 1.11vw, 17px);color:var(--orange);margin-top:6px;}

  /* Vraagstuk page bits */
  .crumbs{font-family:var(--f-disp);font-size:clamp(13px,.97vw,18px);color:var(--on-blue-mut);}
  .crumbs a{cursor:pointer;} .crumbs a:hover{color:var(--orange);}
  .points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(30px,4vw,44px);}
  @media(max-width:760px){.points{grid-template-columns:1fr;}}
  .points.cols2,.stats.cols2{grid-template-columns:repeat(2,1fr);}
  @media(max-width:760px){.points.cols2,.stats.cols2{grid-template-columns:1fr;}}
  .point{border-top:2px solid var(--orange);padding-top:18px;}
  .point b{font-family:var(--f-disp);font-weight:500;font-size:clamp(19px, 1.39vw, 21px);color:var(--blue);display:block;}
  .point p{font-size:clamp(15px, 1.11vw, 17px);margin-top:8px;}
  .p-blue .point b{color:#fff;}
  /* Numbered feature grid (service pages) */
  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,36px);margin-top:clamp(30px,4vw,48px);}
  @media(max-width:900px){.feats{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.feats{grid-template-columns:1fr;}}
  .feat{border-top:1px solid var(--line);padding-top:16px;}
  .p-blue .feat{border-color:var(--blue-line);}
  .feat .fn{font-family:var(--f-disp);font-weight:500;font-size:clamp(30px,2.6vw,40px);line-height:1;color:var(--orange);}
  .feat b{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(18px,1.32vw,20px);color:var(--blue);margin-top:12px;}
  .p-blue .feat b{color:#fff;}
  .feat p{font-size:clamp(15px,1.11vw,17px);line-height:1.6;margin-top:8px;}
  /* Checklist */
  .checks{list-style:none;display:grid;gap:16px;margin-top:clamp(20px,3vw,30px);}
  .checks li{position:relative;padding-left:34px;font-size:clamp(16px,1.18vw,18px);line-height:1.55;}
  .checks li b{color:var(--blue);}
  .checks li::before{content:"";position:absolute;left:2px;top:6px;width:15px;height:8px;
    border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg);}
  /* Accent callout card */
  .callout{margin-top:clamp(26px,3vw,36px);background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
    border-radius:14px;padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,30px);max-width:780px;}
  .callout b{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(19px,1.39vw,21px);color:var(--blue);}
  .callout p{margin-top:8px;font-size:clamp(15px,1.11vw,17px);line-height:1.6;}
  /* Contact form (conversion / solution pages) */
  .cform{text-align:left;background:#fff;border-radius:20px;padding:clamp(26px,3vw,40px);max-width:600px;
    margin:clamp(30px,4vw,48px) auto 0;box-shadow:0 40px 80px -40px rgba(11,33,104,.6);}
  .cform h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(20px,1.6vw,24px);color:var(--blue);margin-bottom:6px;}
  .cfield{margin-top:18px;}
  .cfield label{display:block;font-family:var(--f-disp);font-size:clamp(14px,1.04vw,16px);color:var(--blue);margin-bottom:8px;}
  .cfield input,.cfield textarea{width:100%;font-family:var(--f-body);font-size:16px;color:var(--blue);background:#fff;
    border:1px solid var(--line);border-radius:10px;padding:13px 15px;transition:border-color .2s;}
  .cfield textarea{min-height:120px;resize:vertical;}
  .cfield input::placeholder,.cfield textarea::placeholder{color:var(--muted);opacity:.75;}
  .cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--orange);}
  .cfield.invalid input,.cfield.invalid textarea{border-color:#d64545;}
  .cerror{display:none;font-size:13px;color:#d64545;margin-top:6px;}
  .cfield.invalid .cerror{display:block;}
  .cform .cfoot{display:flex;justify-content:flex-end;margin-top:24px;}
  .cform-ok{display:none;font-size:15px;color:var(--blue);margin-top:16px;padding:12px 14px;background:var(--ice);border-radius:10px;}
  .cform.sent .cform-ok{display:block;}
  .sols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:760px){.sols{grid-template-columns:1fr;}}
  .sol{background:#fff;border-radius:16px;padding:26px;border:1px solid var(--line);}
  .sol .n{font-family:var(--f-disp);font-weight:500;font-size:clamp(14px, 1.04vw, 16px);color:var(--orange);}
  .sol b{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(21px, 1.53vw, 23px);color:var(--blue);margin-top:8px;}
  .sol p{font-size:clamp(15px, 1.11vw, 17px);margin-top:10px;}
  .gains{list-style:none;padding:0;margin:clamp(24px,3vw,32px) 0 0;display:grid;gap:14px;}
  .gains li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(16px, 1.18vw, 18px);}
  .gains li::before{content:"";width:10px;height:10px;flex:none;margin-top:11px;border-radius:2px;background:var(--orange);}
  .faq{border-bottom:1px solid var(--line);}
  .faq summary{display:flex;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;
    font-family:var(--f-disp);font-size:clamp(18px, 1.32vw, 20px);color:var(--blue);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq .pm{margin-left:auto;}
  .faq p{padding:0 0 20px;max-width:70ch;font-size:clamp(16px, 1.18vw, 18px);}
  .seo{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);
    font-size:15px;line-height:1.75;color:var(--muted);max-width:88ch;}

  /* Filter chips (professionals, inzichten) */
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px);}
  .chip{font-family:var(--f-disp);font-size:clamp(14px, 1.04vw, 16px);padding:11px 20px;border-radius:999px;
    border:1px solid var(--line);background:none;color:var(--blue);cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
  .chip:hover{border-color:var(--orange);color:var(--orange);}
  .chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}

  /* Forms */
  .form{display:grid;gap:18px;max-width:620px;}
  .field label{display:block;font-family:var(--f-disp);font-size:clamp(14px, 1.04vw, 16px);color:var(--blue);margin-bottom:8px;}
  .field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px 18px;
    font-family:var(--f-body);font-weight:300;font-size:clamp(16px, 1.18vw, 18px);color:var(--blue);background:#fff;outline:none;}
  .field input:focus,.field textarea:focus{border-color:var(--orange);}
  .field textarea{min-height:150px;resize:vertical;}
  .field .hint{font-family:var(--f-disp);font-size:clamp(12px,.9vw,17px);color:var(--muted);margin-top:6px;}
  .signup{display:flex;gap:8px;flex-wrap:wrap;max-width:600px;margin-top:26px;}
  .signup input{flex:1;min-width:240px;border:1px solid var(--line);border-radius:130px;padding:0 24px;
    height:clamp(52px, 3.9vw, 59px);font-family:var(--f-body);font-weight:300;
    font-size:clamp(16px, 1.18vw, 18px);color:var(--blue);background:#fff;outline:none;}
  .signup input:focus{border-color:var(--orange);}
  .p-blue .signup input{border-color:var(--blue-line);background:rgba(255,255,255,.08);color:#fff;}
  .p-blue .signup input::placeholder{color:var(--on-blue-mut);}

  /* Person page portrait */
  .portrait{width:100%;max-width:460px;margin-left:auto;aspect-ratio:4/5;border-radius:8px;
    background-size:cover;background-position:center 18%;}
  .quote{font-size:clamp(21px, 1.8vw, 27px);line-height:1.35;max-width:24ch;}

  /* Hub cards (over ons) */
  .hub{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:clamp(24px, 2vw, 30px);cursor:pointer;transition:transform .28s,box-shadow .28s,border-color .28s;}
  .hub:hover{transform:translateY(-5px);box-shadow:0 30px 50px -34px rgba(16,46,130,.45);border-color:var(--orange);}
  .hub b{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(21px, 1.53vw, 23px);color:var(--blue);}
  .hub p{margin-top:10px;font-size:clamp(15px, 1.11vw, 17px);}

  /* Footer */
  footer{background:var(--blue-deep);color:#fff;padding:clamp(48px,6vw,72px) 0 40px;position:relative;}
  footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;}
  footer .cols{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;}
  footer .col b{font-family:var(--f-disp);font-weight:500;font-size:clamp(14px, 1.04vw, 16px);}
  footer .col a{display:block;font-family:var(--f-disp);font-size:clamp(13px,.97vw,18px);color:var(--on-blue-mut);margin-top:10px;cursor:pointer;}
  footer .col a:hover{color:var(--orange);}
  footer .base{margin-top:44px;border-top:1px solid var(--blue-line);padding-top:18px;font-family:var(--f-disp);
    font-size:13px;color:var(--on-blue-mut);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

  /* Puzzle watermark */
  .wm-pz{position:absolute;pointer-events:none;z-index:0;aspect-ratio:293/292;background:var(--piece) center/contain no-repeat;opacity:.5;}
  .haswm{overflow:hidden;} .haswm>.wrap{position:relative;z-index:1;}

  /* Annotations */
  .anno{display:none;}
  body.anno-on .anno{display:inline-flex;align-items:center;position:absolute;z-index:30;
    font-family:var(--f-disp);font-size:12px;background:var(--orange);color:var(--blue);font-weight:500;
    padding:5px 10px;border-radius:8px;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);}
  .annohost{position:relative;}
  .annobtn{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px;
    background:#fff;color:var(--blue);border:1px solid var(--line);border-radius:999px;padding:11px 18px;cursor:pointer;
    font-family:var(--f-disp);font-size:14px;box-shadow:0 16px 34px -16px rgba(11,33,104,.5);}
  .annobtn .d{width:8px;height:8px;border-radius:50%;background:var(--line);}
  body.anno-on .annobtn .d{background:var(--orange);}
  .toast{position:fixed;left:50%;bottom:82px;transform:translateX(-50%) translateY(20px);z-index:60;
    background:#fff;color:var(--blue);border:1px solid var(--line);border-radius:14px;padding:13px 20px;
    font-family:var(--f-disp);font-size:15px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
    box-shadow:0 24px 44px -22px rgba(11,33,104,.55);}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  @media(prefers-reduced-motion:no-preference){
    .rev{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
    .rev.in{opacity:1;transform:none;}
    .d1{transition-delay:.07s;} .d2{transition-delay:.14s;} .d3{transition-delay:.21s;} .d4{transition-delay:.28s;}
  }

  /* Accordion open/close. Native <details> snaps; ::details-content is the hook
     that lets it transition without JS, and interpolate-size makes height:auto
     animatable. Browsers without either snap exactly as before. */
  @media(prefers-reduced-motion:no-preference){
    @supports selector(::details-content){
      :root{interpolate-size:allow-keywords;}
      .step::details-content,.faq::details-content{
        block-size:0;
        overflow:clip;
        opacity:0;
        transition:block-size .42s cubic-bezier(.16,1,.3,1),
                   opacity .26s ease,
                   content-visibility .42s allow-discrete;
        transition-behavior:allow-discrete;
      }
      .step[open]::details-content,.faq[open]::details-content{
        block-size:auto;
        opacity:1;
      }
    }
  }

  /* Soft words: big headings resolve word by word as they scroll into view.
     A pure opacity reveal: each word starts transparent and settles opaque,
     staggered. No blur. The timeline belongs to the heading, not to each word,
     so the whole line reveals over one comfortable stretch of scroll. */
  @media(prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .sw{view-timeline-name:--sw;}
      .sw .w{
        display:inline-block;
        animation:softWord linear both;
        animation-timeline:--sw;
        animation-range:cover calc(7% + var(--i,0) * 1.6%) cover calc(36% + var(--i,0) * 1.6%);
      }
      @keyframes softWord{
        from{opacity:.18;}
        to{opacity:1;}
      }
    }
  }

  /* Panel reveal: each panel tilts in and settles flat as it scrolls into view,
     which reinforces the stacked-panel layout. Driven by scroll position, not time.
     Progressive enhancement: without scroll-driven animation support the panels
     simply appear and the content fade above carries the reveal on its own. */
  @media(prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .lift{
        --tilt:-24deg; --tilt-scale:.88; --tilt-persp:1000px;
        transform-origin:50% 0;
        animation:tiltIn linear both;
        animation-timeline:view();
        animation-range:entry 0% entry 82%;
      }
      /* a narrow panel distorts faster, so ease off the angle on small screens */
      @media(max-width:700px){.lift{--tilt:-15deg; --tilt-scale:.93; --tilt-persp:900px;}}
      @keyframes tiltIn{
        from{transform:perspective(var(--tilt-persp)) rotateX(var(--tilt)) scale(var(--tilt-scale));
             filter:brightness(.86);}
        to{transform:perspective(var(--tilt-persp)) rotateX(0deg) scale(1);
           filter:none;}
      }
      /* the panel carries the motion, so content only fades in */
      .lift .rev{transform:none;}
    }
  }




  .navcta{display:none !important;}
  .navpill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  .sheet .btn-p{display:none !important;}
  .annobtn{display:none !important;}
  .demonote{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(8,16,50,.58);padding:24px;}
  .demonote.open{display:flex;}
  .demonote-card{position:relative;background:#fff;color:var(--blue);border-radius:16px;padding:34px 36px 30px;max-width:440px;text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);}
  .demonote-title{font-family:var(--f-disp);font-weight:800;font-size:21px;line-height:1.2;}
  .demonote-body{color:var(--blue-body);margin-top:10px;font-size:15px;line-height:1.5;}
  .demonote-link{display:inline-block;margin-top:22px;background:var(--orange);color:#12183a;font-family:var(--f-disp);font-weight:800;border-radius:999px;padding:12px 22px;cursor:pointer;}
  .demonote-link:hover{background:var(--orange-2);}
  .demonote-x{position:absolute;top:8px;right:14px;border:0;background:transparent;font-size:26px;line-height:1;color:var(--blue-body);cursor:pointer;}