/* Concept 8: photography and a generated dashboard impression. */
.product-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(30px,4vw,64px);align-items:center}
.product-copy .intro{margin-top:30px}
.product-copy h2{font-size:clamp(2.25rem,3.1vw,3rem)}
.product-copy>p:not(.eyebrow):not(.intro){color:var(--muted);font-size:15px;max-width:520px}
.product-preview{min-width:0;scroll-margin-top:120px}
.dashboard-image img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#F2EFE8}
.dashboard-image figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:560px}
.product-method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;border-top:1px solid var(--line);padding-top:30px;margin-top:58px}
.product-method p+p{margin-top:0}
.product-method .mono{display:block;color:var(--muted);font-size:10px;margin-bottom:10px}
.product-method strong{font-size:15px;font-weight:500}
.problem-content>p:not(.intro):not(.problem-belief){font-size:15px;color:var(--muted);max-width:560px}
.context .underlink{margin-top:14px}
.product-section .own-example{margin-top:46px}
.hero-portrait{aspect-ratio:1/1}
.hero-portrait>img{object-position:76% center}
.about-photo>img{object-position:50% 50%}
@media(max-width:1100px){.product-layout{grid-template-columns:1fr;gap:34px}.product-copy{max-width:740px}.product-copy>p:not(.eyebrow):not(.intro){max-width:740px}.product-preview{width:100%;max-width:960px;justify-self:center}}
@media(max-width:679px){.product-method{grid-template-columns:1fr;gap:25px;margin-top:40px}.product-copy h2{font-size:2.45rem}.hero-portrait{aspect-ratio:1/1;max-height:none}.hero-portrait>img{object-position:76% center}.dashboard-image figcaption{font-size:11px}.about-photo{aspect-ratio:1.15}.about-photo>img{object-position:50% 50%}}

/* Tarief gehalveerd op desktop en mobiel. */
.price{font-size:clamp(1.7rem,2.7vw,2.5rem)}
@media(max-width:679px){.price{font-size:32px}}

/* Voetnoot naamgeving in de contextsysteem-sectie. */
.context .problem-content>p.context-note{font-size:13px;font-style:italic;color:var(--muted);margin-top:10px}
.frictions .friction-text{color:inherit;font:inherit}
.frictions .friction-text strong{font-weight:500;color:var(--ink)}

/* Letter-textuur (huisstijlsignatuur) in header en footer. */
.tex-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.header-row,.mobile-menu,.reading-progress{position:relative;z-index:1}
.tex-canvas-header{opacity:.17}
:root[data-theme="dark"] .tex-canvas-header{opacity:.22}
.footer{position:relative;overflow:hidden}
.footer-top,.footer-bottom{position:relative;z-index:1}

/* Voor wie? — uitklapblok in Wat ik doe */
.audience{margin-top:28px;max-width:400px;color:var(--muted)}
.audience summary{cursor:pointer;list-style:none;padding:10px 0;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
.audience summary:hover{border-bottom-color:var(--ink)}
.audience[open] summary{margin-bottom:22px}
.audience summary>.read-more-icon{color:var(--accent);font-size:18px;line-height:1;transition:transform .2s}
.audience[open] summary>.read-more-icon{transform:rotate(90deg)}
.audience-body{padding-bottom:20px;font-size:15px;line-height:1.6}
.audience-body p{margin:0 0 14px}
.audience-body ul{margin:0 0 14px;padding-left:18px}
.audience-body li{margin:0 0 6px}
.audience-body li::marker{color:var(--accent)}
.audience-body h3{font-size:16px;font-weight:500;color:var(--ink);margin:26px 0 12px}
.audience-body strong{font-weight:500;color:var(--ink)}
@media(max-width:679px){.audience{max-width:100%}}

/* Contextsysteemschema: naast elkaar onder de kop, in één kolom onder de vier punten */
.context{grid-template-rows:auto 1fr;row-gap:0}
.context .problem-heading{grid-column:1;grid-row:1}
.context .problem-content{grid-column:2;grid-row:1/span 2}
.context .context-figure{grid-column:1;grid-row:2;align-self:start;margin-top:40px;max-width:620px}
.context .context-figure img{width:100%;height:auto}
@media(max-width:679px){.context{grid-template-rows:none;row-gap:26px}.context .problem-heading,.context .problem-content,.context .context-figure{grid-column:auto;grid-row:auto}.context .context-figure{margin-top:14px;max-width:none}}
/* Voor wie? onder de diensten, over de volle breedte van de sectie (concept 11, 2026-10-20). */
.service-layout>.audience{grid-column:1/-1;max-width:none;margin-top:0}
@media(min-width:960px){.service-layout>.audience .audience-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}.service-layout>.audience .audience-col>h3:first-child{margin-top:0}}
.service-layout{row-gap:clamp(36px,5vw,64px)}

/* Concept 12 — label /by AI op beelden die met AI gemaakt of bewerkt zijn (huisstijl: sub-merk /by AI).
   !important omdat de bestaande regels '.x>img' (volle maat, object-fit, beweging, hover-zoom) anders ook het label raken. */
img.ai-label{position:absolute!important;inset:auto!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:2!important;
  width:auto!important;height:13px!important;max-width:none!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;object-fit:fill!important;transform:none!important;transition:none!important;opacity:1!important;
  border-radius:0!important;pointer-events:none;user-select:none}
img.ai-label[src$="op-donker.svg"]{filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25))}
.hero-portrait img.ai-label,.about-photo>img.ai-label{top:15px!important;right:15px!important}
@media(max-width:760px){img.ai-label{height:12px!important}}
.footer-bottom .ai-slash{color:var(--accent)}
@media(max-width:679px){img.ai-label-hero{filter:none!important;top:15px!important;right:15px!important}}

/* Concept 12 — beelden niet afsnijden (verzoek Simon 21-10): samenwerkingsbeeld op volle breedte bovenin
   i.p.v. 'cover' op de hele kolomhoogte (smalle kolommen sneden de tweede persoon weg); onderkant vloeit in het donker over.
   Scenariobeelden in hun eigen 3:2-verhouding. */
@media(min-width:680px){.cooperation-photo>img:not(.ai-label){inset:0 0 auto 0;height:auto;object-fit:initial;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}}
@media(max-width:679px){.cooperation-photo>img:not(.ai-label){object-position:66% 22%}}
.case-photo img:not(.ai-label){aspect-ratio:3/2!important}

/* Wat het kost: trajecten als twee van/tot-tabellen (2026-10-22). */
.price-panel .test-note{margin:16px 0 30px;max-width:none}
.traject+.traject{margin-top:34px}
.traject h3{font-size:15px;font-weight:500;line-height:1.4;color:var(--chalk);margin-bottom:12px}
.traject table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.5;border-top:1px solid var(--night-line)}
.traject th,.traject td{padding:9px 10px 9px 0;border-bottom:1px solid var(--night-line);text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:auto}
.traject thead th{color:var(--bright);font-weight:500}
.traject tbody th{color:var(--quiet);font-weight:400;width:27%}
.traject tbody td{color:var(--chalk)}
.traject .traject-price td{color:var(--bright);font-size:16px;font-weight:500;letter-spacing:-.01em}
@media(max-width:679px){.traject table{font-size:12px}.traject tbody th{width:30%}.traject .traject-price td{font-size:15px}}

/* Samenwerking: foto links, tekst rechts; Wat het kost eronder over de volle breedte (2026-10-22). */
.cooperation{grid-template-columns:1fr}
.cooperation-photo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:0;align-items:center}
.cooperation-image{position:relative;align-self:stretch}
.cooperation-image>img:not(.ai-label){display:block;width:100%;height:auto}
.cooperation-photo .cooperation-copy{margin-top:0;background:none;padding:clamp(30px,4vw,64px)}
.cooperation-photo .cooperation-copy>p:last-child{max-width:520px}
.price-panel{border-top:1px solid var(--night-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:start}
.price-panel>.eyebrow,.price-panel>.test-note{grid-column:1/-1}
.price-panel .test-note{max-width:640px}
.price-panel .traject+.traject{margin-top:0}
@media(max-width:1023px){.price-panel{grid-template-columns:minmax(0,1fr)}.price-panel .traject+.traject{margin-top:34px}}
@media(max-width:679px){.cooperation-photo{grid-template-columns:1fr}.cooperation-photo .cooperation-copy{padding:27px var(--gutter) 36px}}

/* Overgang foto → Samenwerking: rechterkant van de foto vloeit over in het donker (2026-10-22); smal: onderkant. */
.cooperation-image>img:not(.ai-label){-webkit-mask-image:linear-gradient(to right,#000 84%,transparent);mask-image:linear-gradient(to right,#000 84%,transparent)}
@media(max-width:679px){.cooperation-image>img:not(.ai-label){-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}}

/* Samenwerking: foto rechts, zachte overgang over de middellijn (± 42–57 % van het blok), 50/50 (advies + akkoord Simon, 2026-10-22). */
@media(min-width:680px){
  .cooperation-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .cooperation-image{grid-column:1/-1;grid-row:1;justify-self:end;width:58%;aspect-ratio:1/1;align-self:stretch}
  .cooperation-image>img:not(.ai-label){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
    -webkit-mask-image:linear-gradient(to left,#000 74%,transparent);mask-image:linear-gradient(to left,#000 74%,transparent)}
  .cooperation-photo .cooperation-copy{grid-column:1;grid-row:1;position:relative;z-index:1;padding-right:clamp(24px,5vw,72px)}
}
/* Tekst Samenwerking blijft volledig op het donker: overgang begint op ± 84 % van de linkerkolom (2026-10-22). */
@media(min-width:680px){.cooperation-photo .cooperation-copy{padding-right:24%}}


/* Testfasemelding: waarschuwingsicoon i.p.v. "Let op:" (2026-10-22); oker alleen grafisch. */
.test-note .warn-icon{display:inline-block;vertical-align:-3px;margin-right:8px;color:var(--accent)}

/* Hoe ik werk en Wat het oplevert: tekst onder de titel i.p.v. ernaast (2026-10-22). */
.section-heading{grid-template-columns:1fr;gap:22px;align-items:start}
.section-heading>p{justify-self:start;max-width:640px}

/* Jouw eigen contextsysteem: schema + vier punten links, titel en tekst rechts (2026-10-22); smal: tekst eerst. */
.context{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;row-gap:26px;align-items:start}
.context .context-visual{grid-column:1;grid-row:1}
.context .context-copy{grid-column:2;grid-row:1}
.context .context-figure{margin-top:0;max-width:620px}
.context .context-copy .problem-content{padding-top:36px}
.context .context-visual .frictions{margin:34px 0 0;max-width:620px}
@media(max-width:679px){.context{grid-template-columns:1fr}.context .context-visual,.context .context-copy{grid-column:auto;grid-row:auto}.context .context-copy{order:-1}.context .context-copy .problem-content{padding-top:26px}.context .context-visual .frictions{margin-top:24px}}

/* Wat het oplevert: "Van eerste stap naar verder" op één lijn als de voorbeelden naast elkaar staan (2026-10-22). */
@media(min-width:960px){
  .case-grid{align-items:start}
  .case{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .case-copy{display:contents}
  .case-copy>.case-category{margin-top:23px}
  .case-copy>p:not(.case-category){margin-bottom:22px}
  .case details{margin-top:0;align-self:start}
}

/* Over mij-portret: logo rechtsboven i.p.v. /by AI (keuze Simon, 2026-10-22); zelfde letterhoogte als het /by AI-label (13 px label ≙ 14 px logo). */
.about-photo{position:relative}
.about-photo>img.photo-logo{position:absolute;inset:auto;top:15px;right:15px;left:auto;bottom:auto;z-index:2;width:auto;height:14px;max-width:none;aspect-ratio:auto;object-fit:fill;transform:none;transition:none;border-radius:0;pointer-events:none;user-select:none;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25))}
@media(max-width:760px){.about-photo>img.photo-logo{height:13px}}
/* Logo-regel huisstijl: nooit rechtstreeks op beeld → klein vlak in de donkere achtergrondkleur eronder; geen beweging/zoom. */
.about-photo>img.photo-logo{box-sizing:content-box;padding:7px 9px;background:var(--night);border-radius:4px;filter:none;transform:none!important}
/* Logo op portret als tekst, zelfde opmaak als het /by AI-label: geen vlak, lichte letters met zachte schaduw (Simon, 2026-10-22). */
.about-photo>img.photo-logo{padding:0;background:none;border-radius:0;filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25))}

/* Footer: e-mail en telefoon als links in de onderregel (2026-10-22); e-mail niet in hoofdletters. */
.footer-bottom a{color:inherit;text-decoration:none;transition:color .2s}
.footer-bottom a[href^="mailto:"]{text-transform:none;letter-spacing:.02em}
.footer-bottom a:hover,.footer-bottom a:focus-visible{color:var(--chalk)}

/* Menu bovenin: getekende oker slash vóór elk item, in de verhoudingen van de logo-slash (2026-10-22). */
.desktop-nav a,.mobile-menu a{display:inline-flex;align-items:baseline}
.desktop-nav a::before,.mobile-menu a::before{content:"";display:inline-block;flex:none;width:.44em;height:.85em;margin-right:.32em;transform:translateY(.09em);background:var(--accent);
  clip-path:polygon(0 100%,76.4% 0,100% 0,23.6% 100%)}

/* Wat het kost (2026-10-23): kop, testfase, twee tarieven (uur + contextsysteem), dan de trajecten als voorbeelden. */
.price-panel>h2,.price-panel>.price-rates,.price-panel>.traject-intro,.price-panel>.smallprint{grid-column:1/-1}
.price-panel>h2{margin-top:14px}
.price-rates{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:16px clamp(40px,6vw,96px);margin:0 0 40px}
.price-rate h3{font:400 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);margin:0}
.price-rate .price{margin:8px 0 0}
.traject-intro{border-top:1px solid var(--night-line);padding-top:30px;margin-bottom:22px}
.traject-intro h3{font-size:clamp(1.3rem,1.8vw,1.6rem);color:var(--chalk);margin-bottom:6px}
.traject-intro p{font-size:14px;color:var(--quiet)}
.traject h4{font-size:15px;font-weight:500;line-height:1.4;color:var(--chalk);margin-bottom:12px}
.traject td ul{list-style:none;margin:0;padding:0}
.traject td li+li{margin-top:4px}
.price-panel>.smallprint{max-width:none;margin-top:28px}
@media(max-width:679px){.price-rates{grid-template-columns:1fr}}
/* Eén trajecttabel (2026-10-23): over de volle breedte, kolommen niet te breed. */
.price-panel>.traject{grid-column:1/-1;max-width:900px}
.traject-intro h3{margin-bottom:0}

/* Lees meer: secties Jouw eigen contextsysteem, Jouw eigen dashboard en Wat het oplevert starten ingeklapt (alleen met JS). */
.is-collapsed .more{display:none}
.read-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.read-more[hidden]{display:none}
.read-more:hover{border-bottom-color:var(--ink)}
.read-more-icon{color:var(--accent);font-size:18px;line-height:1;transition:transform .2s}
.read-more[aria-expanded="true"] .read-more-icon{transform:rotate(90deg)}
.section-heading>.read-more{justify-self:start;margin-top:0}
.context.is-collapsed{grid-template-columns:minmax(0,1fr)}
.context.is-collapsed .context-copy{grid-column:1;max-width:760px}
.product-section.is-collapsed .product-layout{grid-template-columns:minmax(0,1fr)}
.product-section.is-collapsed .product-copy{max-width:760px}
.examples.is-collapsed .section-heading{margin-bottom:0}

/* Twee voorbeeldblokken onder elkaar: één doorlopende lijst. */
.own-example+.own-example{margin-top:0;border-top:0}

/* Voorbeeldtrajecten: ingeklapt, zelfde knop als Lees meer / Voor wie? (op donker). */
.price-panel>.traject-details{grid-column:1/-1;margin-top:30px}
.traject-details summary{cursor:pointer;list-style:none;padding:10px 0;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--chalk);border-bottom:1px solid var(--night-line);-webkit-tap-highlight-color:transparent}
.traject-details summary::-webkit-details-marker{display:none}
.traject-details summary:hover{border-bottom-color:var(--chalk)}
.traject-details summary>.read-more-icon{color:var(--accent);font-size:18px;line-height:1;transition:transform .2s}
.traject-details[open] summary>.read-more-icon{transform:rotate(90deg)}
.traject-details[open] summary{margin-bottom:22px}
.traject-details>.traject{max-width:900px}