/* Brandberries portfolio-detail (pd-). Gescoped onder .pd; header en footer komen uit de site.
   Zijlijnen gelijk met logo en knop in de menubalk (zelfde berekening als #subheader .container). */
.pd{--red:#ea272a;--red-600:#c91b1e;--red-300:#f24b4e;--ink:#14100f;--ink-2:#2e2825;--n700:#514840;--n600:#6f645b;--n300:#d8d2cc;--paper:#faf8f6;--wa:#25d366;
--font:'Archivo','Poppins',sans-serif;--mono:'JetBrains Mono',monospace;--pad:clamp(16px,4vw,48px);--ease:cubic-bezier(.2,.7,.2,1)}
@media screen and (min-width:60em){.pd{--pad:calc(56px + 5vw + max(0px,(90vw - 1440px) / 2))}}
@media screen and (min-width:60em) and (max-width:67.99em){.pd{--pad:32px}}
.pd{width:calc(100vw - var(--sbw,0px));position:relative;left:50%;margin-left:calc(-50vw + var(--sbw,0px) / 2);background:var(--paper);color:var(--ink);font-family:var(--font);text-align:left}
.pd,.pd *,.pd *::before,.pd *::after{box-sizing:border-box}
.pd ul{list-style:none;margin:0;padding:0}
.pd h1,.pd h2,.pd h3{color:inherit;font-family:var(--font)}
.pd a{text-decoration:none}
.pd a:focus-visible{outline:2px solid var(--red-300);outline-offset:2px}
.pd-hero a:focus-visible,.pd-result a:focus-visible,.pd .dw-cta a:focus-visible{outline-color:var(--ink)}
body:has(.pd){overflow:visible}
.pd-wrap{padding-left:var(--pad);padding-right:var(--pad)}
.pd .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1. hero */
.pd-hero{position:relative;overflow:hidden;background:var(--red);color:var(--paper)}
.pd-hero__dots{position:absolute;inset:0;pointer-events:none;
  /* streepjespatroon uit de huisstijl (zoals achter de herobeelden op /digitaal-web), hier in wit op rood */
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2254%22%3E%3Crect%20x%3D%2212%22%20y%3D%225%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%22.6%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.5%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2232%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%22.6%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.5%22/%3E%3C/svg%3E") 0 0/56px 54px repeat;
  -webkit-mask-image:linear-gradient(105deg,transparent 18%,#000 62%);mask-image:linear-gradient(105deg,transparent 18%,#000 62%)}
.pd-hero__inner{position:relative;display:grid;gap:clamp(40px,7vw,112px);padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(56px,8vw,120px)}
.pd-crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 13px/1.4 var(--font)}
.pd-crumbs a{color:var(--ink)!important}
.pd-crumbs a:hover{text-decoration:underline}
.pd-crumbs span{color:var(--ink)}
.pd-crumbs [aria-current]{color:var(--paper)}
.pd-hero__text{display:grid;gap:clamp(20px,2.4vw,32px);justify-items:start}
.pd-pills{display:flex;flex-wrap:wrap;gap:8px}
.pd-pill{display:inline-block;padding:9px 14px;border-radius:999px;font:600 13px/1 var(--font)}
.pd-pill--ink{background:var(--ink);color:var(--paper)!important}
.pd-pill--paper{background:rgba(250,248,246,.9);color:var(--ink)}
.pd .pd-h1{margin:0;font:800 clamp(64px,11.5vw,184px)/.84 var(--font);letter-spacing:-.05em;color:var(--paper);text-transform:lowercase;max-width:11ch;text-wrap:balance;overflow-wrap:anywhere}
.pd-intro{margin:0;font:500 clamp(17px,1.5vw,21px)/1.5 var(--font);color:var(--paper);max-width:46ch}

/* gedeelde titels */
.pd-eyebrow{margin:0;font:400 14px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--red-600)}
.pd .pd-h2{margin:0;font:800 clamp(48px,7vw,112px)/.86 var(--font);letter-spacing:-.05em;text-transform:lowercase;color:var(--ink)}
.pd .pd-h2 span{color:var(--red)}
.pd .pd-h2--xl{font-size:clamp(56px,9vw,144px)}
.pd-rich{font:400 clamp(17px,1.4vw,20px)/1.65 var(--font);color:var(--ink-2);max-width:52ch}
.pd-rich>*{margin:0 0 1em}.pd-rich>*:last-child{margin-bottom:0}
.pd-rich h3,.pd-rich h4{margin:1.6em 0 .5em;font:700 1.05em/1.3 var(--font);color:var(--ink);text-transform:none;letter-spacing:0}
.pd-rich h3:first-child,.pd-rich h4:first-child{margin-top:0}
.pd-rich a{color:var(--red-600)!important;text-decoration:underline}
.pd-rich ul{list-style:disc;padding-left:1.2em}
.pd-rich img{max-width:100%;height:auto;border-radius:12px}

/* 2. de uitdaging */
.pd-challenge{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(72px,10vw,152px)}
.pd-challenge__text{display:grid;gap:clamp(16px,2vw,24px);align-content:start}
.pd-challenge__text .pd-rich{margin-top:clamp(4px,1vw,12px)}
.pd-challenge--solo{grid-template-columns:1fr}
.pd-challenge--media{justify-items:center}
.pd-media{position:relative;margin:0;justify-self:center;width:100%;border-radius:22px;overflow:hidden;background:#ece6e1}
.pd-media--reel{width:min(100%,400px);aspect-ratio:9/16}
.pd-media--web{aspect-ratio:16/10}
.pd-media--brand{aspect-ratio:4/5;max-width:560px}
.pd-media img,.pd-media video,.pd-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.pd-media video{background:#000}
.pd-chip{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:999px;background:rgba(20,16,15,.78);color:var(--paper);font:600 11px/1 var(--font);pointer-events:none}

/* 3. onze aanpak */
.pd-approach{display:grid;gap:28px;justify-items:center;text-align:center;padding-top:clamp(72px,10vw,152px);padding-bottom:clamp(72px,10vw,152px)}
.pd-approach .pd-rich{max-width:62ch;text-align:center}
.pd-approach .pd-rich ul{display:inline-block;text-align:left}
.pd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pd-tags li{padding:9px 14px;border:1.5px solid var(--n300);border-radius:999px;font:600 13px/1 var(--font);color:var(--n700)}
.pd-challenge+.pd-result,.pd-challenge+.pd-review{margin-top:clamp(72px,10vw,152px)}

/* 4. resultaat */
.pd-result{background:var(--red);padding:clamp(64px,9vw,128px) 0}
.pd-result__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:clamp(28px,4vw,48px)}
.pd-result .pd-h2{color:var(--ink)}
.pd-result__period{margin:0;font:600 13px/1.2 var(--mono);color:var(--ink)}
.pd-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:2px solid var(--ink)}
.pd-stat{display:grid;gap:10px;align-content:start;padding:28px 24px 0 0}
.pd-stat dt{font:600 13px/1.2 var(--mono);color:var(--ink)}
.pd-stat dd{margin:0}
.pd-stat__value{font:800 clamp(64px,8vw,128px)/.9 var(--font);letter-spacing:-.05em;color:var(--paper)}
.pd-stat__note{font:500 16px/1.4 var(--font);color:var(--ink)}

/* 5. review */
.pd-review{display:grid;justify-items:center;text-align:center;gap:28px;padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px)}
.pd-review__icon{width:44px;height:44px;color:var(--red)}
.pd-review figure{margin:0;display:grid;gap:28px;justify-items:center}
.pd-review blockquote{margin:0;padding:0;border:0;font:700 clamp(30px,3.6vw,52px)/1.12 var(--font);letter-spacing:-.03em;color:var(--ink);max-width:28ch;text-wrap:balance;quotes:none}
.pd-review figcaption{display:grid;gap:4px}
.pd-review__name{font:700 17px/1.3 var(--font);color:var(--ink)}
.pd-review__role{font:500 14px/1.4 var(--font);color:var(--n600)}

/* 6. call to action (gedeelde partial DigitaalWebCta, binnen de zijlijnen) */
.pd .dw-cta-wrap{padding:0 var(--pad) clamp(16px,4vw,48px)}
.pd article>:last-child:not(.pd-review):not(.pd-approach):not(.pd-result){margin-bottom:clamp(72px,10vw,152px)}
.pd article>.pd-result:last-child{margin-bottom:clamp(16px,4vw,48px)}
.pd .dw-cta{background:var(--red);color:var(--ink);border-radius:28px;padding:clamp(36px,6vw,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:32px;align-items:end}
.pd .dw-cta__title{margin:0;font:800 clamp(44px,7vw,112px)/.86 var(--font);letter-spacing:-.045em;color:var(--ink);text-transform:lowercase}
.pd .dw-cta__title span{color:var(--paper)}
.pd .dw-cta__body{display:grid;gap:20px;justify-items:start}
.pd .dw-cta__body p{margin:0;font:400 17px/1.6 var(--font);color:var(--ink);max-width:40ch}
.pd .dw-actions{display:flex;gap:10px;flex-wrap:wrap}
.pd .dw-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 26px;border-radius:999px;font:600 16px/1 var(--font);border:0;transition:background .2s,color .2s}
.pd .dw-btn--paper{background:var(--paper);color:var(--ink)!important}
.pd .dw-btn--paper:hover{background:#fff}
.pd .dw-btn--wa{background:var(--wa);color:var(--ink)!important}
.pd .dw-btn--wa:hover{background:#1fbf5b}

/* 7. navigatie */
.pd-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.pd-navbtn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;font:600 15px/1.2 var(--font);transition:background .2s,color .2s,transform .3s var(--ease)}
.pd-navbtn svg{width:18px;height:18px;flex:0 0 auto;transition:transform .3s var(--ease)}
.pd-navbtn--back{border:1.5px solid var(--ink);color:var(--ink)!important}
.pd-navbtn--back:hover{background:var(--ink);color:var(--paper)!important}
.pd-navbtn--back:hover svg{transform:translateX(-3px)}
.pd-navbtn--next{background:var(--red);color:var(--paper)!important;border:1.5px solid var(--red)}
.pd-navbtn--next:hover{background:var(--red-600);border-color:var(--red-600)}
.pd-navbtn--next:hover svg{transform:translate(2px,-2px)}

@media (max-width:640px){.pd-navbtn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pd *{transition:none!important}}

/* rode hero direct onder de vaste menubalk (site zet 140px bovenmarge op #main) */
body:has(.pd) #main{margin-top:var(--pd-header,70px)!important}
@media screen and (min-width:60em){body:has(.pd){--pd-header:82px}}
@media screen and (min-width:75em){body:has(.pd){--pd-header:88px}}
.pd-media--video{aspect-ratio:16/9}