/* AgentsLabs redesign — gedeelde basisstijlen voor de vernieuwde pagina's.
   Pagina-specifieke opmaak staat inline in de HTML (design-systeem van claude.ai/design). */

html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#000000;color:#b6b3b0;font-family:'Geist Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--acc);color:#000000}
a{color:#ddd9d4}
a:hover{color:var(--acc-bright)}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#1a2030;border-radius:0}
::-webkit-scrollbar-track{background:#07080d}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc,#ff7a2f);outline-offset:3px}

/* Formulier */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc,#ff7a2f)!important;box-shadow:0 0 0 4px var(--acc-faint)}
input::placeholder,textarea::placeholder{color:#7a7873}
select option{background:#131316;color:#f4f1ee}

/* Skip-link */
.al-skip{position:absolute;left:-9999px;top:0;z-index:400;background:#f4f1ee;color:#000000;padding:.7rem 1.1rem;border-radius:0}
.al-skip:focus{left:1rem!important;top:1rem!important}

/* Hover-varianten (inline styles vragen om !important) */
.hv-nav:hover{color:#fff!important;background:rgba(244,241,238,.05)!important}
.hv-fff:hover{color:#fff!important}
.hv-cta:hover{box-shadow:0 0 0 1px rgba(255,122,47,.55),0 16px 50px -12px rgba(255,122,47,.6)!important}
.hv-ghost:hover{border-color:var(--acc,#ff7a2f)!important;color:var(--acc-bright)!important}
.hv-link:hover{color:var(--acc-bright)!important}
.hv-white:hover{color:#f4f1ee!important}
.hv-card:hover{border-color:var(--acc-soft)!important}
.hv-card:hover .card-zoom{transform:scale(1.045)}
.hv-row:hover{background:rgba(244,241,238,.025)!important}
.hv-row:hover [data-hovtitle]{transform:translateX(8px);color:var(--acc-bright)!important}
.hv-row:hover [data-hovarrow]{transform:translateX(6px);color:var(--acc-bright)!important}

/* FAQ-accordeon */
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q::after{content:'+';flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--acc-soft);color:var(--acc,#ff7a2f);font-size:1.2rem;transition:transform .3s ease}
details[open]>summary.faq-q::after{content:'\2212'}

/* Animaties */
@keyframes al-rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes al-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes al-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes al-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.78)}}
@keyframes al-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[style*="animation:al-scrollcue"]{transform-origin:top}
@keyframes al-scrollcue{0%,100%{transform:scaleY(0)}45%,55%{transform:scaleY(1)}}

@media (max-width:959px){
  #al-links{display:none!important}
  #al-menu-btn{display:inline-flex!important}
}
@media (max-width:420px){
  [style*="minmax(280px,1fr)"],
  [style*="minmax(290px,1fr)"],
  [style*="minmax(300px,1fr)"],
  [style*="minmax(310px,1fr)"],
  [style*="minmax(320px,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .al-badge{font-size:.66rem!important; letter-spacing:.08em!important; padding:.45rem .75rem!important; gap:.45rem!important}
}
@media (max-width:639px){
  .al-metric-grid{grid-template-columns:1fr!important}
  .al-fact-list{grid-template-columns:1fr!important;gap:.25rem!important}
  .al-fact-list dd{margin:0 0 .75rem!important}
}
@media (max-width:359px){
  #al-head>div,#al-menu>div,main>section>div,footer>div{padding-left:1.25rem!important;padding-right:1.25rem!important}
  main a,main button,#al-menu a{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media (forced-colors: active){
  [data-grad]{background:none!important;-webkit-text-fill-color:CanvasText!important;color:CanvasText!important}
  a,button{forced-color-adjust:auto}
}

/* Analyticsvoorkeuren */
.consent-panel{position:fixed;z-index:500;right:1rem;bottom:1rem;left:1rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:980px;margin:0 auto;padding:1rem 1.15rem;color:#ddd9d4;background:rgba(11,16,29,.98);border:1px solid rgba(244,241,238,.22);border-radius:0;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.consent-panel[hidden],.consent-manage[hidden]{display:none!important}
.consent-panel__content{min-width:0}
.consent-panel h2{margin:0 0 .25rem;color:#f4f1ee;font-size:1rem}
.consent-panel p{margin:0;font-size:.9rem;line-height:1.5}
.consent-panel a{color:var(--acc-bright);text-decoration:underline;text-underline-offset:3px}
.consent-panel__actions{display:flex;flex:none;gap:.65rem}
.consent-button,.consent-manage{min-height:44px;padding:.65rem 1rem;border:1px solid rgba(244,241,238,.28);border-radius:999px;font:600 .88rem/1.2 'Geist Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;cursor:pointer}
.consent-button--primary{color:#000000;background:var(--acc-bright);border-color:var(--acc-bright)}
.consent-button--secondary{color:#f4f1ee;background:transparent}
.consent-manage{position:fixed;z-index:490;left:1rem;bottom:1rem;color:#f4f1ee;background:rgba(11,16,29,.96)}
.consent-button:focus-visible,.consent-manage:focus-visible{outline:2px solid var(--acc,#ff7a2f);outline-offset:3px}
@media (max-width:700px){.consent-panel{align-items:stretch;flex-direction:column;gap:.9rem}.consent-panel__actions{display:grid;grid-template-columns:1fr}}

/* Clear the sticky mobile CTA bar (.al-mcta, bottom:0, ~88px tall incl. its own
   safe-area padding). Both consent elements default to bottom:1rem, which put
   them stacked directly on top of the CTA bar's buttons on phones -- the cookie
   banner and the "Analytics-instellingen" reopen button were both unreadable
   and untappable. 799px matches .al-mcta's own breakpoint so the two rules can
   never disagree about when the bar is on screen. The added env() term tracks
   .al-mcta's own safe-area padding so the gap holds on notched devices too. */
@media (max-width:799px){
  .consent-panel{bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
  .consent-manage{bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
}

/* Long-form prose (case studies, blog articles) */
.al-prose h2{margin:2.4rem 0 0;color:#f4f1ee;font-weight:700;letter-spacing:-.03em;line-height:1.12;font-size:clamp(1.45rem,2.6vw,1.9rem)}
.al-prose h2:first-child{margin-top:0}
.al-prose h3{margin:1.9rem 0 0;color:#f4f1ee;font-weight:700;letter-spacing:-.02em;line-height:1.2;font-size:1.25rem}
.al-prose p{margin:1rem 0 0;color:#8f8b87;font-size:1.05rem;text-wrap:pretty}
.al-prose strong{color:#ddd9d4}
.al-prose em{color:#b6b3b0}
.al-prose ul,.al-prose ol{margin:1.1rem 0 0;padding-left:1.3rem;color:#8f8b87;font-size:1.05rem}
.al-prose li{margin-top:.7rem;padding-left:.3rem}
.al-prose li::marker{color:var(--acc,#ff7a2f)}
.al-prose a{color:var(--acc-bright);text-decoration:underline;text-underline-offset:3px}
.al-prose blockquote{margin:1.4rem 0 0;padding:.3rem 0 .3rem 1.2rem;border-left:3px solid var(--acc,#ff7a2f);color:#b6b3b0;font-style:italic}
.al-prose .note-box{margin:1.6rem 0 0;padding:1.2rem 1.4rem;background:var(--acc-faint);border:1px solid var(--acc-soft);border-radius:0}
.al-prose .note-box p{margin:0;color:#b6b3b0}

/* Sticky kolom in de werkwijze-sectie. De grid is repeat(auto-fit,minmax(320px,1fr));
   onder ~780px stapelt hij tot een kolom (breekpunt empirisch gemeten, de
   scrollbar scheelt ~15px t.o.v. de rekensom) en bleef het sticky blok over de stappen
   eronder hangen. Static maken zodra er nog maar een kolom is. */
.al-sticky-col{position:sticky; top:120px}
@media (max-width:799px){.al-sticky-col{position:static; top:auto}}

/* Sticky mobiele CTA. Los van .al-sticky-col hierboven: dat is een desktop-
   zijkolom die op mobiel juist static wordt. Dit is de omgekeerde beweging —
   een vaste actiebalk die alleen op telefoons verschijnt, waar de CTA's in de
   pagina zelf ver onder de vouw liggen.
   z-index blijft onder .consent-panel (500), zodat de cookiekeuze altijd
   bovenop staat en niet weggedrukt wordt door een balk die de bezoeker nog
   niet kan wegklikken. */
.al-mcta{display:none}
@media (max-width:799px){
  .al-mcta{display:flex; gap:.5rem; position:fixed; z-index:450; left:0; right:0; bottom:0;
    padding:.6rem .8rem; padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(0,0,0,.94); backdrop-filter:blur(14px) saturate(1.3);
    border-top:1px solid rgba(244,241,238,.1)}
  .al-mcta a{flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
    gap:.4rem; min-height:44px; padding:.7rem .6rem; border-radius:999px;
    font-weight:600; font-size:.95rem; text-decoration:none; text-align:center}
  .al-mcta .al-mcta-primary{background:#f4f1ee; color:#000000}
  .al-mcta .al-mcta-ghost{color:#f4f1ee; border:1px solid rgba(244,241,238,.22)}
  /* Ruimte onder de footer zodat de balk nooit de laatste regel bedekt. */
  body{padding-bottom:5rem}
}
@media print{.al-mcta{display:none}}

/* ── Horizon ──────────────────────────────────────────────────────────────────
   Sinds 25 augustus 2026 draait de hele site één ontwerp. De homepage (/ en
   /en/) rendert het in real time uit assets/css/horizon.css; deze ~400 pagina's
   houden hun eigen indeling, maar delen het palet, de typografie en de
   haarlijnen: zwart, Geist Mono, oranje accent, platte vlakken zonder ronding.

   Waarom dat niet hier staat maar in de HTML: het ontwerp van deze pagina's
   zit als ~77.000 inline style-attributen in de opmaak, niet als klassen, en
   de generator die de meeste ervan maakte (de gen/-sprintscripts) staat niet
   in de repo. Een stylesheetregel bereikt ze dus niet en opnieuw genereren kan
   niet. scripts/retheme.js schrijft daarom elk token op zijn plek om — in de
   pagina's, in dit bestand en in scripts/blocks.py, zodat opnieuw gegenereerde
   pagina's er al doorheen komen. `npm run retheme -- --check` faalt zodra er
   een pagina met het oude palet terugkomt.

   Zie docs/HOMEPAGE.md voor het ontwerp zelf.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-mono-variable.woff2') format('woff2-variations');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}

:root{
  --f-micro:'Geist Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  /* Horizons haarlijn, op dezelfde waarde als in horizon.css. */
  --hair:rgba(244,241,238,.14);
  --hair-strong:rgba(244,241,238,.24);

  /* Alles wat vroeger los van --acc een eigen accentkleur had — hover, kaart-
     randen, vlakken — wordt hier uit --acc afgeleid. Zonder deze laag levert
     een pagina met een afwijkende --acc een oranje kop met hovers in de oude
     kleur op, en dat leest onsamenhangender dan het verschil dat we net
     hebben weggewerkt. */
  --acc-bright:color-mix(in srgb, var(--acc,#ff7a2f) 62%, #ffffff);
  --acc-soft:color-mix(in srgb, var(--acc,#ff7a2f) 42%, transparent);
  --acc-faint:color-mix(in srgb, var(--acc,#ff7a2f) 12%, transparent);
}
/* color-mix is recent genoeg om een vangnet te verdienen: zonder ondersteuning
   valt de hele set terug op vaste waarden, zodat er nooit een ongedefinieerde
   custom property in een kleur terechtkomt. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  :root{--acc-bright:#ff9a5c; --acc-soft:rgba(255,122,47,.42); --acc-faint:rgba(255,122,47,.12)}
}

/* Horizons eyebrow (.eyebrow/.idx in horizon.css): mono, klein, wijd
   gespatieerd. scripts/blocks.py stuurt hem als klasse uit in plaats van als
   inline stijl, en retheme.js heeft de 1.568 labels die al op schijf stonden
   naar dezelfde opmaak omgezet — anders zou `npm run pages` 350 pagina's
   stilletjes van opmaak laten wisselen. */
.al-eyebrow{margin:0 0 clamp(20px,2.4vw,34px); display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  font-family:var(--f-micro); font-size:.66rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acc,#ff7a2f)}
.al-eyebrow .idx{font-style:normal; color:var(--acc,#ff7a2f); opacity:.75; font-variant-numeric:tabular-nums}
/* Het streepje was een verloop. Horizon kent geen verlopen in de
   microtypografie, dus hier vlak in de accentkleur. */
.al-eyebrow .rule{flex:none; width:22px; height:1px; background:currentColor; opacity:.55}

/* Haarlijn-opsomming: Horizons .specs/.proof/.ledger. Platte rijen met een
   lijn erboven en eronder, in plaats van een afgeronde kaart. */
.al-hairlist{margin:0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid var(--hair)}
.al-hairlist>li{border-bottom:1px solid var(--hair)}
.al-hairlist>li>a{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:baseline;
  padding:.7rem 0; text-decoration:none; color:#b6b3b0; transition:color .35s ease}
.al-hairlist>li>a:hover{color:var(--acc,#ff7a2f)}

/* Geist Mono zet ongeveer 8% breder dan de schreefloze die hier eerst stond, en
   dat was precies genoeg om "Over ons" en "Gratis adviesgesprek" in de balk over
   twee regels te breken. De maat gaat een stap omlaag en de items breken niet
   meer af; de inline stijl op deze links wint anders van elke gewone regel,
   vandaar !important — zelfde reden als bij de .hv-*-regels hierboven. */
#al-links .hv-nav{font-size:.82rem!important; padding:.5rem .55rem!important; white-space:nowrap}
#al-links .hv-cta{font-size:.84rem!important; padding:.6rem 1rem!important; white-space:nowrap}
#al-links .hv-fff,#al-links [role="group"] a{white-space:nowrap}

/* Het woordmerk. Horizon zet het in mono, in kapitalen en wijd gespatieerd
   ("AGENTS LABS" naast de accentstip); hier stond het nog vet en in gemengde
   kapitalen uit het vorige ontwerp. Dat was het laatste element dat de twee
   sjablonen uit elkaar liet lezen. De inline stijl op deze link wint van een
   gewone regel, dus opnieuw !important. */
#al-head a[aria-label^="AgentsLabs"]{font-size:.86rem!important; font-weight:400!important;
  letter-spacing:.2em!important; text-transform:uppercase}