/* Sogeti-variant van de showcase. Laadt na styles.css en verandert alleen het uiterlijk; de pagina-opbouw blijft die van de basis.
   Waarden gemeten op sogeti.nl op 17-10-2026: structuur via REA inspect-web-page, CSS via computed styles.
   Bronnen en contrastparen: ../../DESIGN.md en ../../../research/sogeti/. Geen logo, mascotte of beelden van Sogeti. */

@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;src:url(assets/Ubuntu-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;src:url(assets/Ubuntu-300-latin.woff2) format('woff2');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}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;src:url(assets/Ubuntu-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;src:url(assets/Ubuntu-400-latin.woff2) format('woff2');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}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;src:url(assets/Ubuntu-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;src:url(assets/Ubuntu-500-latin.woff2) format('woff2');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{
  /* Gemeten: canvas #12151d, vlakken #21252d/#272b33, lijn #3c414a, kaartrand #888f9a, tekst #dee2e6, koppen #f8fafc,
     knop #db2443, accenttekst #ff4f66, Capgemini-blauw #0070ad, CTA-blauw #1d365a */
  --s-canvas:#12151d;--s-surface:#21252d;--s-raised:#272b33;--s-line:#3c414a;--s-frame:#888f9a;
  --s-text:#dee2e6;--s-head:#f8fafc;--s-muted:#888f9a;
  --s-red:#db2443;--s-red-hover:#c21f3b;--s-red-text:#ff4f66;--s-blue:#0070ad;--s-blue-deep:#1d365a;
  --navy:var(--s-surface);--navy-2:var(--s-raised);--yellow:var(--s-red-text);--yellow-2:var(--s-red);--gold:var(--s-red);
  --bg:var(--s-canvas);--white:var(--s-head);--h1:var(--s-head);--ink:var(--s-head);--body:var(--s-text);--muted:var(--s-muted);
  --faint:rgba(248,250,252,.72);--cta:var(--s-red);--dark:var(--s-canvas);--line:var(--s-line);
  --rail:1080px;--r-img:30px;--r-btn:30px;
}
body{font-family:Ubuntu,system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--s-text);background:var(--s-canvas)}
::selection{background:var(--s-red);color:#fff}
:focus-visible{outline:2px solid var(--s-head);outline-offset:3px}
.skip{background:var(--s-head);color:var(--s-canvas);border-radius:999px}

/* Typografie: koppen Ubuntu Light (h2 48/58, CTA 50/66, kaartkop 24/34), links 16px met .4px spatiering */
.t-h1{font-size:56px;line-height:1.18;font-weight:300;letter-spacing:-.3px}
.t-h2{font-size:48px;line-height:58px;font-weight:300;letter-spacing:-.3px}
.t-h3{font-size:28px;line-height:1.3;font-weight:300;letter-spacing:.12px}
.t-h4{font-size:22px;line-height:1.45;font-weight:300}
.t-h5{font-size:20px;line-height:1.45;font-weight:400}
.t-small{font-size:15px;line-height:1.5;font-weight:400;color:var(--s-text)}
.kicker{font-size:16px;line-height:1.5;font-weight:500;letter-spacing:.1px;color:var(--s-red-text)}
/* "Bekijk ..."-links: witte tekst met een vaste rode onderstreep en een rode pijl, zodat ze duidelijk doorverwijzen
   (verzoek Romano 18-10-2026). #ff4f66 op #12151d 5,7:1. Bij hover wordt de onderstreep wit en schuift de pijl op. */
.more{font-size:16px;font-weight:400;letter-spacing:.4px;color:var(--s-head);text-decoration-color:var(--s-red-text);text-decoration-thickness:2px}
.more::after{background-color:var(--s-red-text)}
.more:hover,.card:hover .more,.feature:hover .more{text-decoration-color:var(--s-head)}

/* Knoppen: pil, 16px 24px, rood met witte tekst; secundair met witte rand */
.btn{border-radius:999px;padding:16px 24px;font-size:16px;font-weight:400;letter-spacing:.1px;transition:background-color .2s ease,color .2s ease}
.btn-dark,.cta .btn-dark,.menu .btn,.cv-actions .btn{background:var(--s-red);color:#fff;box-shadow:none}
.btn-dark:hover,.menu .btn:hover,.cv-actions .btn:hover{background:var(--s-red-hover)}
.btn-light{background:transparent;color:var(--s-head);box-shadow:inset 0 0 0 1px var(--s-head)}
.btn-light:hover{background:rgba(248,250,252,.08)}

/* Navigatie: effen donker, geen glas */
.nav{background:var(--s-canvas);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(248,250,252,.06)}
.brand{color:var(--s-head);font-size:18px;font-weight:500;letter-spacing:.2px}
.menu{gap:36px}
.menu .link{font-size:16px;line-height:24px;letter-spacing:.4px;color:var(--s-text);padding-bottom:3px;
  background:linear-gradient(var(--s-head),var(--s-head)) left bottom/0 1px no-repeat;transition:background-size .25s ease,color .2s ease}
.menu .link:hover{color:var(--s-head);background-size:100% 1px}
.menu .link[aria-current="page"]{color:var(--s-head);text-decoration:none;background-image:linear-gradient(var(--s-red),var(--s-red));background-size:100% 2px}
.burger{color:var(--s-head)}

.panel{background:var(--s-canvas)}

/* Home: in de basis hoort de ondermarge bij het witte paneel; op het donkere canvas is dat alleen leegte */
.hero{padding-bottom:20px}
.avatar{background:var(--s-blue-deep);color:var(--s-head);font-size:34px;font-weight:300;box-shadow:inset 0 0 0 1px rgba(248,250,252,.18)}
.hero .kicker{margin:40px 0 0}
.hero .kicker+.t-h1{margin-top:14px}
.hero .t-h1{max-width:1000px}
.hero .t-p{font-size:19px;max-width:860px}
.socials a{width:40px;height:40px;color:var(--s-head);box-shadow:inset 0 0 0 1px var(--s-head)}
.socials a:hover{background:rgba(248,250,252,.08)}
.marquee>ul>li{border-radius:24px}
.sec-head .t-p{color:var(--s-text)}

/* Projectkaarten als de dienstkaarten van sogeti.nl: 30px hoeken, rand #888f9a, witte ronde pijlknop */
.media{border:1px solid var(--s-frame);border-radius:30px;background:var(--s-surface)}
.card .media::after{content:"";position:absolute;z-index:3;top:24px;right:24px;width:40px;height:40px;border-radius:50%;
  background:var(--s-head) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312151d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .2s ease}
.card:hover .media::after{transform:translateX(3px)}
.card .t-h3{margin-top:24px}
.card .t-p{color:var(--s-text)}

/* Uitgelicht project op Capgemini-blauw */
.feature{background:var(--s-blue);color:#fff}
.feature .t-h2,.feature .t-p,.feature .more{color:#fff}
.feature .more{text-decoration-color:#fff}
.feature .more::after{background-color:#fff}

/* Carrousel: ronde knoppen met witte rand */
.c-btn{width:40px;height:40px;border-radius:50%;background:transparent;color:var(--s-head);box-shadow:inset 0 0 0 1px var(--s-head)}
.c-btn:hover{background:rgba(248,250,252,.08)}

/* Kaarten zonder beeld: rand #3c414a, 30px hoeken (zoals het tabpaneel) */
.quote,.step{background:transparent;border-radius:30px;box-shadow:inset 0 0 0 1px var(--s-line)}
.quote blockquote,.step .t-p{color:var(--s-text)}
.step-n{background:var(--s-red);color:#fff}

/* Vacature naast bewijs: de rode balk van 4px uit de tabs van sogeti.nl */
.match-ask{font-size:28px;line-height:1.3;font-weight:300;letter-spacing:.12px}
.match-proof .t-p{color:var(--s-text)}

/* Contactblok zoals "Klaar voor de volgende stap?" */
.cta{background:var(--s-blue-deep);color:#fff;padding:140px 0}
.cta .t-h2{color:#fff;font-size:50px;line-height:66px;letter-spacing:.12px}
.cta .t-p{color:var(--s-text);margin-top:16px;font-size:18px}
.cta .btn{margin-top:32px}

/* Voet */
.foot{background:var(--s-raised);color:var(--s-text);padding:72px var(--nav-x) 32px}
.foot-brand{color:var(--s-head);font-weight:500}
.foot-row nav ul{font-size:16px;line-height:24px;letter-spacing:.4px}
.foot-row nav ul a{color:var(--s-head)}
.foot a:focus-visible,.feature:focus-visible{outline-color:var(--s-head)}
.foot .socials a{color:var(--s-head);box-shadow:inset 0 0 0 1px var(--s-head)}
.foot .socials a:hover{background:rgba(248,250,252,.08)}
.copy{border-top-color:var(--s-line);color:var(--s-text);text-align:left}

/* Projectdetail, cv en over mij */
.facts div{border-radius:20px;box-shadow:inset 0 0 0 1px var(--s-line)}
.facts dt{color:var(--s-muted);font-weight:500}
.facts dd{color:var(--s-head);font-weight:400}
.shot,.pair>div,.row .thumb,.about-hero .photo,.gallery .track>div{background:var(--s-surface);border:1px solid var(--s-line)}
.shot,.about-hero .photo{border-radius:30px}
.pair>div{border-radius:24px}
.row .thumb{border-radius:20px}
.bullets li{color:var(--s-text)}
.bullets li::before{color:var(--s-red-text)}
.bullets b,.role-line b{color:var(--s-head);font-weight:500}
.role-line{color:var(--s-text)}
.role-line .when{color:var(--s-muted)}
.rule{border-left:4px solid var(--s-red);padding-left:16px;color:var(--s-text)}
/* AI doet / Mens beslist / Status als rood blok, zoals de knoppen op sogeti.nl (wit op #db2443: 4,8:1) */
.rule-box{background:var(--s-red);color:#fff;border-radius:20px}
.rule-box div+div{box-shadow:inset 1px 0 0 rgba(255,255,255,.35)}
.rule-box dt{color:#fff;font-weight:500;opacity:1}
.rule-box dd{color:#fff;font-weight:400}
/* Logokaarten en portfolio op het donkere canvas */
.skill-group h3{color:var(--s-head);font-weight:500}
.chip{color:var(--s-head);background:var(--s-surface);box-shadow:inset 0 0 0 1px var(--s-line);border-radius:999px}
.chip svg{color:var(--s-head)}
.portfolio-list a{border-radius:20px;box-shadow:inset 0 0 0 1px var(--s-line)}
.portfolio-list a:hover{box-shadow:inset 0 0 0 2px var(--s-red)}
.portfolio-list b{color:var(--s-head);font-weight:500}
.portfolio-list span{color:var(--s-muted)}
.avatar-photo{box-shadow:0 0 0 1px rgba(248,250,252,.18)}
.cv-actions{color:var(--s-muted)}
.cv-actions a:not(.btn){color:var(--s-head)}
.about-col{max-width:1080px}
.steps .track,.gallery .track{padding-inline:max(var(--pad),calc((100vw - 1080px)/2));scroll-padding-inline:max(var(--pad),calc((100vw - 1080px)/2))}
.lesson{border-top-color:var(--s-line)}
.ph{color:rgba(248,250,252,.72);background:radial-gradient(90% 120% at 12% 0%,#1d365a 0%,#161b27 55%,#12151d 100%)}

/* Scènes achter de screenshots in Sogeti- en Capgemini-blauw (17-10-2026: "overal iets meer Sogeti-kleur").
   Blauwtinten gemeten op capgemini.com (zodiak-capgemini-blue 400/500/700/800/900) en sogeti.nl (#0070ad);
   scene-lean is het verloop van het blauwe kopblok op capgemini.com: 239deg #0058ab naar #1c4076. */
.scene{background:var(--s-canvas)}
.scene-flat{background:
  linear-gradient(138deg,transparent 0 30%,rgba(0,0,0,.30) 30% 52%,transparent 52%),
  linear-gradient(138deg,#0058ab 0 30%,#1c4076 30% 64%,#1d365a 64% 100%)}
.scene-flat::before{background:radial-gradient(60% 70% at 18% 10%,rgba(53,115,192,.45),transparent 70%)}
.scene-lean{background:
  linear-gradient(180deg,transparent 0 74%,#121a38 74% 100%),
  linear-gradient(239deg,#0058ab,#1c4076)}
.scene-lean::before{background:linear-gradient(112deg,transparent 0 28%,rgba(0,112,173,.50) 28% 46%,transparent 46%)}
.scene-dots{background:
  radial-gradient(circle at 50% 50%,#0b0e14 28%,transparent 31%) 0 0/3.6cqh 3.6cqh,
  radial-gradient(58% 85% at 50% 50%,#1c4076 0%,#1d365a 55%,#121a38 100%)}
.scene-dots::before{background:linear-gradient(115deg,rgba(0,0,0,.45) 0 22%,transparent 22% 70%,rgba(219,36,67,.32) 70%)}
/* Titelkaart: helder blauw rechtsboven, donker navy waar de tekst staat (wit 10:1 of meer), rode balk uit de tabs */
.scene-title{background:linear-gradient(200deg,#0058ab 0%,#1c4076 40%,#121a38 80%)}
.scene-title::before{background:none}
.tc-status{color:var(--s-head);font-weight:500}
.tc-name{font-weight:300}
.tc-line{color:var(--s-text)}

/* Rood als accent: rode labels (#ff4f66 op #12151d 5,7:1), rode onderstreep en een rode pijlknop bij hover en focus.
   Geen balkjes voor de koppen meer (verzoek Romano 18-10-2026). */
.facts dt{color:var(--s-red-text)}
/* Techniekblok: rand en hoeken zoals de feitenkaarten, laagnamen in het rode label */
.tech{border-radius:30px;box-shadow:inset 0 0 0 1px var(--s-line)}
.tech>.t-h4{font-weight:400}
.arch{color:var(--s-head)}
.arch li+li::before{background-color:var(--s-red-text)}
.stack-row dt{color:var(--s-red-text);font-weight:500}
.card .media::after{transition:transform .2s ease,background-color .2s ease}
.card:hover .media::after,.card:focus-visible .media::after{
  background:var(--s-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat}

/* Vacature naast bewijs: weer op het gewone donkere canvas (de blauwe band was niet nodig, Romano 18-10-2026),
   met de rode balk uit de tabs van sogeti.nl voor elke taak uit de vacature. */
.match-ask::before{background:var(--s-red);border-radius:0}

/* Tablet (sogeti.nl: h2 40/56) */
@media (max-width:1199px){
  .t-h1{font-size:46px}
  .t-h2{font-size:40px;line-height:56px}
  .cta .t-h2{font-size:42px;line-height:56px}
}

/* Telefoon (sogeti.nl: zijmarge 24px, h2 24 tot 28px) */
@media (max-width:809px){
  .rule-box div+div{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  :root{--pad:24px;--nav-x:24px}
  .t-h1{font-size:36px;line-height:1.2}
  .hero .t-h1{font-size:32px}
  .t-h2{font-size:28px;line-height:36px;letter-spacing:0}
  .t-h3{font-size:24px}
  .hero .t-p{font-size:17px}
  .menu{background:var(--s-canvas);box-shadow:0 1px 0 var(--s-line),0 30px 40px -30px rgba(0,0,0,.6)}
  .menu .link{font-size:20px;line-height:28px;color:var(--s-head)}
  .match-ask{font-size:22px}
  .card .media::after{top:18px;right:18px}
  .cta{padding:90px 0}
  .cta .t-h2{font-size:32px;line-height:42px}
}

@media (prefers-reduced-motion:reduce){
  .more,.more::after,.menu .link,.card .media::after,.card:hover .media::after,.socials a,.c-btn{transition:none}
  .card:hover .media::after{transform:none}
}

/* Print (cv-PDF): donker thema terug naar donkere tekst op wit, zelfde opbouw als de basis */
@media print{
  :root{--ink:#12151d;--h1:#12151d;--body:#2b2f38;--muted:#4a505c;--line:#c7ccd3;--s-text:#2b2f38;--s-head:#12151d;--s-muted:#4a505c}
  body{background:#fff;color:#2b2f38;font-size:9.5pt;line-height:1.42}
  .panel{background:#fff}
  .kicker{font-size:10pt;margin-bottom:4pt;color:#1d365a}
  .cv-hero .t-h1{font-weight:400}
  .cv-body .t-h3{font-weight:500;letter-spacing:0}
  .rule{padding-left:6pt;border-left-width:2px;border-left-color:#db2443;color:#4a505c}
  .bullets li::before{color:#db2443}
  .cv-actions a:not(.btn){color:#12151d}
  /* De langere intro duwt Projecten anders in zijn geheel naar pagina 2; secties mogen breken, functies niet */
  .cv-body section{break-inside:auto}
  .cv-body .t-h3{break-after:avoid}
}