/* Branchepagina's (/ai-voor-<branche>) en de hub (/branches). Zelfde opbouw als /ai-op-de-bouw:
   navy hero met drie meldingen → licht (herken je dit) → wit (zes mogelijkheden + "en nog veel meer")
   → [webwinkels: nacht, de echte case] → licht (uitgangspunten) → wit (vragen) → licht (andere branches) → CTA. */

/* ---- hero ---- */
.pagina-branche .hero__tekst{min-width:0;}
.pagina-branche .hero h1{font-size:clamp(44px,6vw,90px);padding-bottom:.5em;}
.pagina-branche .hero__tekst .hero__lead{margin-top:22px;}
.branche-scene{position:relative;display:grid;}
.branche-scene > *{grid-area:1/1;}
.branche-paneel{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.branche-paneel .glas__kop{border-bottom-color:rgba(255,255,255,.14);}
.branche-toasts{position:relative;z-index:1;align-content:start;padding:124px 26px 26px;gap:16px;}
.branche-toasts .toast{min-width:0;}
.branche-toasts .toast:nth-child(2){justify-self:end;}
.hero__beeld .branche-toasts .toast{animation-delay:calc(480ms + var(--k,0) * 80ms);}
@media (max-width:900px){
  .pagina-branche .hero h1{font-size:clamp(44px,10vw,80px);}
  .pagina-branche .hero__beeld{max-width:440px;}
  .branche-toasts{padding-inline:16px;gap:12px;}
}

/* ---- herken je dit ---- */
.branche-herken{row-gap:0;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--tekst);}
.branche-herken li{padding-block:16px;border-bottom:1px solid var(--lijn);}
.branche-herken li:first-child{padding-top:0;}
.branche-herken li::before{top:calc(16px + .42em);}
.branche-herken li:first-child::before{top:.42em;}

/* ---- mogelijkheden ---- */
.branche-kaart{gap:10px;}
.branche-kaart h3{font:700 20px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--navy);}
.branche-kaart p{font-size:15.5px;}
.branche-kaart > p:not(.branche-nodig){margin-bottom:8px;}
.branche-kaart .branche-nodig{margin-top:auto;padding:14px 16px;border-radius:12px;background:var(--wolk);font-size:14.5px;line-height:1.5;}
.branche-nodig b{display:block;margin-bottom:2px;font:700 11.5px/1.4 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);}
.branche-opmaat{margin-top:clamp(40px,5vw,56px);}
.branche-opmaat p a{color:var(--ijs);}

/* ---- de echte case (alleen webwinkels) ---- */
.branche-case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,88px);align-items:center;}
.branche-case__tekst .lead{margin-top:20px;}
.branche-case__tekst .knop{margin-top:28px;}
.branche-case__resultaat{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:20px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.07);border-left:4px solid var(--lucht);font-size:16px;color:var(--tekst-licht-zacht);max-width:52ch;}
.branche-case__resultaat b{font:800 22px/1.1 var(--f-display);color:var(--wit);}
.branche-case__film video{display:block;height:min(600px,76vh);width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-l);background:var(--wit);box-shadow:0 40px 80px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);}
@media (max-width:820px){
  .branche-case{grid-template-columns:minmax(0,1fr);}
  .branche-case__film video{height:auto;width:min(300px,80%);margin-inline:auto;}
}

/* ---- uitgangspunten ---- */
.branche-regels{gap:0;padding:clamp(24px,3.4vw,36px);}
.branche-regel{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start;padding-block:22px;border-top:1px solid var(--lijn);}
.branche-regel:first-child{padding-top:0;border-top:0;}
.branche-regel:last-child{padding-bottom:0;}
.branche-regel .chip{margin:0;}
.branche-regel h3{font-size:19px;}
.branche-regel p{margin-top:6px;}

/* ---- andere branches: één rustige regel met links ---- */
.branche-andere{padding-block:clamp(36px,5vw,56px);}
.branche-andere__tekst{font-size:16px;line-height:1.9;color:var(--tekst-zacht);}
.branche-andere__tekst b{color:var(--navy);margin-right:6px;}
.branche-andere__tekst a{color:var(--blauw);font-weight:600;white-space:nowrap;}

/* ---- hub (/branches) ---- */
.branche-hubpaneel{max-width:460px;margin-left:auto;}
.branche-pillen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.branche-pillen .pil{padding:9px 14px;font-size:14px;background:rgba(255,255,255,.12);color:var(--wit);border:1px solid rgba(255,255,255,.2);}
.branche-pillen .pil .icoon{width:16px;height:16px;color:var(--ijs);}
.branche-hub .kaart h3{font-size:20px;}
.branche-hub .kaart p{font-size:15.5px;}
@media (max-width:900px){.branche-hubpaneel{margin-left:0;}}

/* ---- telefoon: rustig ---- */
@media (max-width:640px){
  .pagina-branche .hero h1{font-size:min(13vw,56px);}
  .branche-herken{font-size:16.5px;}
  .branche-herken li{padding-block:14px;}
  .branche-herken li::before{top:calc(14px + .42em);}
  .branche-kaarten{gap:14px;}
  .branche-kaart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:start;padding:20px;}
  .branche-kaart .chip{width:40px;height:40px;margin:0;}
  .branche-kaart .chip .icoon{width:19px;height:19px;}
  .branche-kaart h3{align-self:center;font-size:18px;}
  .branche-kaart p{grid-column:1/-1;margin:0;}
  .branche-kaart .branche-nodig{display:none;}
  .branche-regel{display:block;padding-block:18px;}
  .branche-regel .chip{display:none;}
  .branche-regel h3{font-size:18px;}
  .branche-hub .kaart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px 20px;}
  .branche-hub .chip{width:40px;height:40px;margin:0;grid-row:span 2;}
  .branche-hub .kaart__meer{display:none;}
}