/* ============================================================================
   Kersten deck
   Alle maten komen 1-op-1 uit het Figma-bestand en staan in het 1920x1080
   canvas. De hele stage wordt met transform: scale() naar het scherm gerekend,
   zodat de verhoudingen op elk formaat kloppen.
   ========================================================================== */

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/albert-sans-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: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/albert-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inclusive Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inclusive-sans-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: 'Inclusive Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inclusive-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --anthracite: #1c1d21;
  --teal: #0094ac;
  --orange: #e2550e;
  --logo-gray: #5c5c5b;
  --soft-grey: #efefef;
  --font-display: 'Inclusive Sans', system-ui, sans-serif;
  --font-ui: 'Albert Sans', system-ui, sans-serif;
  /* Duur van de cross-fade tussen twee cases in een carousel. Staat ook in
     deck.js als CAROUSEL_FADE_MS, want daar wordt de kopie opgeruimd. */
  --carousel-fade: 300ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Tijdens presenteren klik je voortdurend op de slide om verder te gaan. Zonder
   dit pak je bij een dubbelklik een woord, of sleep je een foto los, en dan
   blijft er een blauwe selectie of een half doorzichtig sleepbeeld in de
   presentatie staan tot je ergens anders klikt. Op een tablet zorgt de callout
   ervoor dat een lange druk geen "kopieer / delen"-menu opent.

   Alleen de presentatie, niet het dashboard: dat heeft zijn eigen stylesheet en
   daar moet je juist wel tekst kunnen selecteren. */
#viewport,
#overview {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#viewport img,
#overview img {
  -webkit-user-drag: none;
}

/* De stage is altijd 1920x1080 en wordt als geheel geschaald. Schaal en positie
   worden in JS uitgerekend vanaf de linkerbovenhoek, zodat er geen percentages
   in het spel zijn die tegen de ongeschaalde maat rekenen. */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  background: #fff;
  /* clip in plaats van hidden: de foto's lopen tot 1992px door, en een
     scrollbare container schuift de hele slide op zodra de browser een
     gefocuste knop in beeld wil brengen. Met clip bestaat die scroll niet. */
  overflow: hidden;
  overflow: clip;
  cursor: pointer;
}

.slide {
  position: absolute;
  inset: 0;
  background: #fff;
}
.slide--teal { background: var(--teal); }

/* Geen fade tussen slides. Een fade vanaf opacity 0 geeft een witte flits
   boven de stage-achtergrond, en dat valt op zodra de volgende slide teal is.
   Direct wisselen is bovendien hoe de Figma-prototype zich gedraagt.

   Binnen een marktcarousel wisselt niet de slide maar alleen de case, en daar
   staat een overgang wel goed. Het is een cross-fade en geen gewone fade: de
   nieuwe case ligt er al ondoorzichtig onder en de oude gaat er bovenop naar
   nul. Er is dus geen moment waarop de achtergrond doorschijnt, en dus ook
   geen witte flits. */
.slide--fading {
  transition: opacity var(--carousel-fade) linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .slide--fading { transition: none; }
}

/* ------------------------------------------------------------ vaste elementen */

.logo {
  position: absolute;
  left: 100px;
  top: 944.675px;
  width: 203.232px;
  height: 35.325px;
}
.logo--cover {
  left: 100px;
  top: 100px;
  width: 383.264px;
  height: 66.617px;
}
.logo img { display: block; width: 100%; height: 100%; }

.label {
  position: absolute;
  left: 97.73px;
  top: 92.23px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: var(--orange);
  white-space: nowrap;
}

/* De teal balk rechtsonder met de drie hub-links. */
.nav {
  position: absolute;
  left: 1303.76px;
  bottom: -0.31px;
  width: 648.256px;
  height: 62.311px;
}
.nav__shape {
  position: absolute;
  left: -22.56px;
  top: 0;
  width: 641.264px;
  height: 62.311px;
  display: block;
}
.nav__links {
  position: absolute;
  left: 51.86px;
  right: 0;
  top: 3.233px;
  bottom: 3.233px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 26px;
  border-top-left-radius: 39px;
}
.nav__links button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--soft-grey);
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
  white-space: nowrap;
}
.nav__links button:hover { color: #fff; }

.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 69px;
  padding: 0 25px;
  border: 0;
  border-radius: 50px;
  background: var(--orange);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }

/* Tags. Outline is een capability, gevuld is de markt zelf. */
.tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 4px;
  align-content: flex-start;
}
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 15px;
  border: 1px solid var(--teal);
  border-radius: 100px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--anthracite);
  white-space: nowrap;
}
.tag--filled {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* De handtekening van het merk: de foto rechts, gesneden door de curve.
   Het pad komt uit de alpha-mask van Figma en staat in het coordinatenstelsel
   van de container (1304.22 x 1080). */
.curve {
  position: absolute;
  left: 688.09px;
  top: 0;
  width: 1304.22px;
  height: 1080px;
  clip-path: path('M480.135 124.907L0 1080H1304.22V0H631.217C574.642 0 520.363 44.8828 480.135 124.907Z');
  overflow: hidden;
  overflow: clip;
}
.curve__track {
  display: flex;
  height: 100%;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.curve__cell {
  flex: 0 0 1304.22px;
  height: 100%;
}
.curve img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.curve__empty {
  width: 100%;
  height: 100%;
  background: var(--soft-grey);
}
@media (prefers-reduced-motion: reduce) {
  .curve__track { transition: none; }
}

/* -------------------------------------------------------------------- cover */

.cover__photo {
  position: absolute;
  left: 1050.01px;
  top: -0.22px;
  width: 870px;
  height: 1080px;
  overflow: hidden;
}
.cover__photo img {
  position: absolute;
  left: -62px;
  top: 0;
  width: 993px;
  height: 1080px;
  object-fit: cover;
}
.cover__arc {
  position: absolute;
  left: 735.36px;
  top: -85.97px;
  width: 1184.64px;
  height: 1190.49px;
  pointer-events: none;
}
.cover__title {
  position: absolute;
  left: 91.57px;
  top: 862.27px;
  transform: translateY(-50%);
  width: 868.434px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 128px;
  line-height: 0.92165;
  color: #fff;
}

/* -------------------------------------------------------------- projectpagina */

.project__text {
  position: absolute;
  left: 95.09px;
  top: 539.75px;
  transform: translateY(-50%);
  width: 845px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: flex-start;
}
.project__title {
  margin: 0;
  width: 845px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: var(--anthracite);
  white-space: pre-line;
}
.project__tags { width: 615.783px; }
.project__btn {
  left: 1669.28px;
  top: 99.58px;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------ locatiekeuze */

.locations__map {
  position: absolute;
  left: -120.5px;
  top: 0;
  width: 2160px;
  height: 1080px;
  object-fit: cover;
}
.locations__veil {
  position: absolute;
  inset: 0;
  background: var(--teal);
  opacity: 0.9;
}
.locations__title {
  position: absolute;
  left: 959.5px;
  top: 335.49px;
  transform: translateX(-50%);
  width: 1103.203px;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: #fff;
}
.location-btn {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 418px;
  height: 89px;
  padding: 12px 15px;
  border: 0;
  border-radius: 12px;
  background: var(--soft-grey);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
}
.location-btn:hover { background: #fff; }
.location-btn img { width: 58.875px; height: 47.1px; flex: none; }
.location-btn span {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 30px;
  line-height: normal;
  color: var(--anthracite);
  white-space: nowrap;
}

/* --------------------------------------------------------------- safety slide */

.safety__text {
  position: absolute;
  left: 100px;
  top: 380px;
  width: 899.256px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.safety__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: var(--teal);
}
.safety__sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--teal);
}
.safety__body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: var(--anthracite);
}
.safety__body p { margin: 0; }
.safety__body ul { margin: 0; padding-left: 1.2em; }
.safety__image {
  position: absolute;
  left: 1092.1px;
  top: 0;
  width: 827.9px;
  height: 1080px;
  overflow: hidden;
}
.safety__image img {
  position: absolute;
  left: 0;
  top: -81px;
  width: 828px;
  height: 1242px;
  object-fit: cover;
}
.safety__veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 195.676px;
  height: 1080px;
  background: var(--soft-grey);
  opacity: 0.5;
}

/* ------------------------------------------------------------ marktcarousel */

.market__text {
  position: absolute;
  left: 100px;
  top: 540.5px;
  transform: translateY(-50%);
  width: 670px;
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: flex-start;
}
.market__title {
  margin: 0;
  width: 670px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: var(--anthracite);
}
.market__subtitle {
  margin: 0;
  width: 670px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: var(--anthracite);
}
.market__tags { width: 614px; }
.market__btn { left: 1518.78px; top: 99.875px; width: 301px; }
.market__arrows {
  position: absolute;
  left: 1591.53px;
  top: 924.56px;
  width: 204px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.market__arrows button {
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.market__arrows button:disabled { opacity: 0.35; cursor: default; }
.market__arrows img { display: block; width: 55px; height: 55px; }
/* Figma exporteert voor beide knoppen dezelfde chevron naar rechts en spiegelt
   de linker met een transform. Zonder deze regel wijzen ze allebei dezelfde kant op. */
.market__arrows button[data-carousel="-1"] img { transform: scaleX(-1); }
/* -------------------------------------------------- Thank you en de afsluiter */

/* Slide 12 */
.thanks__photo {
  position: absolute;
  left: 872.06px;
  top: -261.5px;
  width: 1447.9px;
  height: 1528.2px;
  object-fit: cover;
}
.thanks__title {
  position: absolute;
  left: 248px;
  top: 480.1px;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: var(--anthracite);
}
/* De Tour-knop staat hier in Inclusive Sans, niet in Albert Sans zoals de rest. */
.btn--tour {
  left: 1662px;
  top: 903px;
  height: auto;
  padding: 24px 53px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--soft-grey);
}

/* Slide 13: groot gecentreerd logo, titel en url, met de boog rechts. */
.closing__logo {
  position: absolute;
  left: 696.58px;
  top: 448.4px;
  width: 526.84px;
  height: 91.6px;
}
.closing__logo img { display: block; width: 100%; height: 100%; }
.closing__title {
  position: absolute;
  left: 961.5px;
  top: 640.23px;
  transform: translateX(-50%);
  width: 875.443px;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: #fff;
}
.closing__url {
  position: absolute;
  left: 960px;
  top: 977.63px;
  transform: translateX(-50%);
  width: 875.443px;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: #fff;
}
.closing__arc {
  position: absolute;
  left: 1278.72px;
  top: -342.9px;
  width: 1727.8px;
  height: 1735.3px;
  transform: rotate(-3.54deg);
  pointer-events: none;
}

/* ------------------------------------------------------- tussenslides 2 t/m 7 */

/* Slide 2: teal, gecentreerde tekst in Inclusive Sans Regular, met een lege
   regel tussen de twee zinnen (in Figma twee <br> achter elkaar). */
.quote {
  position: absolute;
  left: 50%;
  top: 424.5px;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: pre;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: normal;
  color: #fff;
}

/* Slide 3: zes foto's op soft grey, in de stapelvolgorde van Figma. */
.photogrid { background: var(--soft-grey); }
.photogrid figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  overflow: clip;
}
.photogrid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slide 4: paginabrede foto, teal laag op 84 procent, boog eronder. */
.banner__photo {
  position: absolute;
  left: -41.33px;
  top: -23.25px;
  width: 2002.667px;
  height: 1126.5px;
  object-fit: cover;
}
.banner__arc {
  position: absolute;
  left: 742.08px;
  top: -31.97px;
  width: 1184.64px;
  height: 1190.49px;
}
.banner__veil {
  position: absolute;
  inset: 0;
  background: var(--teal);
  opacity: 0.84;
}
.banner__title {
  position: absolute;
  left: 50%;
  top: 482.5px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: normal;
  color: #fff;
}

/* Fotopaneel over de volle hoogte, met de halfdoorzichtige grijze band.
   Slide 5, slide 6 en alle safety-slides gebruiken dit patroon. */
.panel {
  position: absolute;
  top: 0;
  height: 1080px;
  overflow: hidden;
  overflow: clip;
}
.panel--right { left: 1092.1px; width: 827.9px; }
.panel--left { left: 0; width: 828.1px; }
.panel__veil {
  position: absolute;
  top: 0;
  width: 195.676px;
  height: 1080px;
  background: var(--soft-grey);
  opacity: 0.5;
}
.panel__veil--start { left: 0; }
.panel__veil--end { left: 633.7px; }

/* Slide 5 en 6: dezelfde koptekst, links of rechts van het fotopaneel. */
.split__text {
  position: absolute;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: var(--anthracite);
}
.split__text--left { left: 100px; top: 435.996px; width: 899.14px; }
.split__text--right { left: 907.2px; top: 482px; width: 924.7px; }

/* Slide 7: grote foto rechts, oranje regel links van het midden. */
.turn__photo {
  position: absolute;
  left: 890.01px;
  top: -125.22px;
  width: 1969px;
  height: 1359px;
  overflow: hidden;
  overflow: clip;
}
.turn__photo img {
  position: absolute;
  left: -12.91%;
  top: 8.4%;
  width: 91.98%;
  height: 83.29%;
  object-fit: cover;
}
.turn__title {
  position: absolute;
  left: 447.98px;
  top: 509.27px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: var(--orange);
}

/* --------------------------------------------------------- hub-slides 8, 9, 10 */

/* De titelkaart van een hub: grote teal kop, subregel, en een knop die de
   detailpagina's opent. */
.hub__title {
  position: absolute;
  left: 50%;
  top: 386.61px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: normal;
  color: var(--teal);
}
.hub__sub {
  position: absolute;
  left: 50%;
  top: 540px;
  transform: translateX(-50%);
  width: 854.127px;
  margin: 0;
  text-align: center;
  white-space: pre-line;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--anthracite);
}
.btn--hub {
  left: 796.5px;
  top: 777px;
  height: auto;
  padding: 24px 53px;
  font-size: 24px;
}

/* Slide 8.1: de vier vestigingen op de kaart. */
.locmap__title {
  position: absolute;
  left: 959.01px;
  top: 99.78px;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: pre;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: #fff;
}
.locmap__pins {
  position: absolute;
  left: -0.73px;
  top: 231.78px;
  width: 1198px;
  height: 450px;
  object-fit: cover;
}
/* Deze laag staat in Figma bovenop alles, ook boven de navigatiebalk. */
.locmap__union {
  position: absolute;
  left: -0.73px;
  top: 106.78px;
  width: 1920px;
  height: 974px;
  object-fit: cover;
  pointer-events: none;
}

/* Slide 8.2: kerncijfers over een foto met een grijze laag. */
.stats__photo {
  position: absolute;
  left: 0;
  top: -73.97px;
  width: 1920px;
  height: 1279.688px;
  object-fit: cover;
}
.stats__veil {
  position: absolute;
  inset: 0;
  background: var(--soft-grey);
  opacity: 0.7;
}
.stat {
  position: absolute;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: pre;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: normal;
  color: var(--teal);
}

/* Slide 8.3: certificeringen naast de gemaskeerde foto. */
.certs__title {
  position: absolute;
  left: 111.07px;
  top: 354px;
  margin: 0;
  white-space: pre;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.86705;
  color: var(--anthracite);
}
.certs__list {
  position: absolute;
  left: 100px;
  top: 510px;
  width: 652.174px;
  margin: 0;
  padding-left: 30px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--anthracite);
}
.certs__list li { margin: 0; }

/* ------------------------------------------------------------- Technologies */

/* Slide 9: tekst links met drie woorden in oranje, foto rechts. */
.hubtech__text {
  position: absolute;
  left: 100px;
  top: 425.16px;
  width: 902.266px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: var(--anthracite);
}
.hubtech__text .accent { color: var(--orange); }
.hubtech__photo {
  position: absolute;
  left: 1050.5px;
  top: 0;
  width: 870px;
  height: 1081px;
  background: #fff;
  overflow: hidden;
  overflow: clip;
}
.hubtech__photo img {
  position: absolute;
  left: -116.37px;
  top: -332.53px;
  width: 2132.657px;
  height: 1426.631px;
  object-fit: cover;
}
.hubtech__blend {
  position: absolute;
  left: 867.65px;
  top: 763.02px;
  width: 1052.9px;
  height: 316.98px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.btn--hub-left { left: 100px; top: 710px; }

/* Slide 9.1: drie diagonale banden. Elke band gebruikt dezelfde curve als mask,
   maar met een eigen mask-position, zodat er telkens een andere schuine strook
   van diezelfde vorm zichtbaar wordt. Precies zoals in Figma. */
.techband,
.chev__mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1304.219px 1080px;
  mask-size: 1304.219px 1080px;
  -webkit-mask-image: url('../assets/img/mask-curve.svg');
  mask-image: url('../assets/img/mask-curve.svg');
}
.techband {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  overflow: clip;
  cursor: pointer;
}
.techband img {
  display: block;
  position: absolute;
  max-width: none;
  object-fit: cover;
}
/* Figma exporteert deze node in één gespiegelde wrapper om zowel de mask als de
   vorm, maar in de echte render geldt de spiegeling alleen voor de vorm:
   - de mask is niet gespiegeld (nagemeten, klopt tot op drie pixels)
   - de vorm wel, want de afronding zit in de render rechtsboven terwijl die in
     het svg-pad linksboven staat
   Vandaar de spiegeling op de afbeelding en niet op de container. */
.chev {
  position: absolute;
  pointer-events: none;
}
.chev__mask { position: absolute; inset: 0; }
.chev__mask img {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

.techlabel {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--soft-grey);
  pointer-events: none;
}
.tech__title {
  position: absolute;
  left: 97px;
  top: 447.51px;
  margin: 0;
  white-space: pre;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: var(--anthracite);
}

/* De drie detailpagina's onder Technologies: kop en opsomming links,
   twee foto's rechts, de multiply-vorm rechtsonder. */
.techpage__title {
  position: absolute;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: normal;
  color: var(--anthracite);
}
.techpage__list {
  position: absolute;
  margin: 0;
  padding-left: 54px;
  list-style: disc;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  color: #000;
}
.techpage__list li { margin: 0; }
.techpage__photo {
  position: absolute;
  left: 1068.47px;
  object-fit: cover;
}
.techpage__photo--top { top: -45.54px; width: 889.518px; height: 595.039px; }
.techpage__photo--bottom { top: 536.36px; width: 851.534px; height: 543.643px; }
.techpage__blend {
  position: absolute;
  left: 867.65px;
  top: 763.45px;
  width: 1052.9px;
  height: 317.1px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.btn--return {
  left: 1730.52px;
  top: 65.02px;
  transform: translateX(-50%);
}

/* --------------------------------------------------- Our Target Markets */

/* Slide 10: dezelfde curve, maar gespiegeld zodat de foto links staat.
   De positie is nagemeten in de Figma-render: de rechterrand van de foto ligt
   op 1108,22 min de curve op die hoogte, en 1108,22 is de rechterrand van de
   mask-box op -196. De spiegeling gaat dus om het midden van de mask zelf. */
.curve--left {
  left: -196px;
  transform: scaleX(-1);
}
.hubmarkets__text {
  position: absolute;
  left: 736.51px;
  top: 288.1px;
  width: 1040px;
  margin: 0;
  text-align: right;
  white-space: pre-line;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: var(--anthracite);
}
.btn--hub-markets {
  left: 1371px;
  top: 903px;
  color: var(--soft-grey);
}

/* Slide 10.1: raster van zes marktkaarten, elk klikbaar naar zijn carousel. */
.markets__title {
  position: absolute;
  left: 655.797px;
  top: 134.459px;
  width: 611px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  color: var(--anthracite);
}
.market-card {
  position: absolute;
  width: 470px;
  height: 285px;
  padding: 0;
  border: 0;
  background: var(--anthracite);
  overflow: hidden;
  overflow: clip;
  cursor: pointer;
}
.market-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.market-card:hover { outline: 3px solid var(--orange); outline-offset: 2px; }
.market-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* --------------------------------------------------- presentatie-chrome (UI) */

#chrome {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 20;
}
#chrome.is-visible { opacity: 1; pointer-events: auto; }
#chrome button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
#chrome button:hover { background: rgba(0, 0, 0, 0.6); }
#chrome .spacer { width: 10px; }

#offline-badge {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 30;
  display: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(226, 85, 14, 0.92);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
}
#offline-badge.is-visible { display: block; }

/* Overzicht met alle slides van de huidige route. */
#overview {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  padding: 32px;
  overflow: auto;
  background: rgba(12, 12, 14, 0.96);
}
#overview.is-open { display: block; }
#overview h2 {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
/* De drie hubs bovenaan het overzicht, zodat de balk niet op elke slide hoeft. */
#overview .hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
#overview .hubs button {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}
#overview .hubs button:hover {
  background: var(--teal);
  border-color: var(--teal);
}
#overview .hubs button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

#overview .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
#overview .card {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
#overview .card.is-current { outline: 2px solid var(--orange); }
#overview .card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
#overview .card .mini {
  position: absolute;
  inset: 0;
  transform-origin: top left;
  transform: scale(0.12);
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}
#overview .card .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: left;
}