/* =========================================================
   MCS FONTS
========================================================= */

@font-face {

  font-family:"Field Gothic";

  src:
    url("./assets/fonts/FieldGothicTEST-No.62.otf")
    format("opentype");

  font-weight:400;

  font-style:normal;

  font-display:swap;

}
/* =========================================================
   SLIDE 03 — THE SOLUTION
========================================================= */

.slide-solution03 { background:#0b0b0b; }

.slide-solution03 .solution03-bg {
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse at 66% 43%, rgba(255,255,255,.055), transparent 38%),
    linear-gradient(90deg, #0b0b0b 0%, #101010 52%, #0a0a0a 100%);
}

.slide-solution03 .solution03-grid { opacity:.10; background-size:72px 72px; }
.slide-solution03 .slide-inner { padding-bottom:clamp(72px,6.4vw,104px); }

.slide-solution03 .solution03-top {
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex:0 0 auto;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-solution03 .solution03-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.68);
  font-size:clamp(7px,.55vw,10px);
}

.slide-solution03 .solution03-meta { color:rgba(255,255,255,.28); font-size:clamp(7px,.5vw,9px); }

.slide-solution03 .solution03-dot {
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(241,90,36,.65);
}

.slide-solution03 .solution03-header {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:end;
  gap:clamp(40px,6vw,100px);
  flex:0 0 auto;
  padding:clamp(18px,2.4vh,30px) 0 clamp(16px,2vh,24px);
}

.slide-solution03 .solution03-title {
  margin:0;
  color:#f4f4f1;
  font-size:clamp(34px,3.65vw,66px);
  line-height:.92;
  letter-spacing:-.05em;
}

.slide-solution03 .solution03-intro {
  max-width:520px;
  margin:0;
  color:rgba(255,255,255,.55);
  font-size:clamp(12px,.86vw,15px);
  line-height:1.55;
}

.slide-solution03 .solution03-stage {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);
  gap:clamp(20px,2vw,34px);
  flex:1 1 auto;
  min-height:0;
}

.slide-solution03 .solution03-media {
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#050505;
  box-shadow:0 28px 60px rgba(0,0,0,.28);
}

.slide-solution03 .solution03-media-item {
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}

.slide-solution03 .solution03-media-item.is-active { opacity:1; visibility:visible; }

.slide-solution03 .solution03-media video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.slide-solution03 .solution03-media-shade {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), transparent 27%),
    linear-gradient(0deg, rgba(0,0,0,.54), transparent 30%);
}

.slide-solution03 .solution03-media-top,
.slide-solution03 .solution03-media-bottom {
  position:absolute;
  z-index:5;
  left:clamp(14px,1.3vw,22px);
  right:clamp(14px,1.3vw,22px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  pointer-events:none;
  font-size:clamp(7px,.46vw,9px);
}

.slide-solution03 .solution03-media-top { top:clamp(13px,1.2vw,20px); color:rgba(255,255,255,.58); }
.slide-solution03 .solution03-media-bottom { bottom:clamp(13px,1.2vw,20px); color:rgba(255,255,255,.48); }
.slide-solution03 .solution03-media-bottom strong { color:#fff; font-weight:600; }

.slide-solution03 .solution03-corner {
  position:absolute;
  z-index:6;
  width:14px;
  height:14px;
  pointer-events:none;
  opacity:.42;
}

.slide-solution03 .solution03-corner-tl { top:12px; left:12px; border-top:1px solid rgba(255,255,255,.75); border-left:1px solid rgba(255,255,255,.75); }
.slide-solution03 .solution03-corner-tr { top:12px; right:12px; border-top:1px solid rgba(255,255,255,.75); border-right:1px solid rgba(255,255,255,.75); }
.slide-solution03 .solution03-corner-bl { bottom:12px; left:12px; border-bottom:1px solid rgba(255,255,255,.75); border-left:1px solid rgba(255,255,255,.75); }
.slide-solution03 .solution03-corner-br { right:12px; bottom:12px; border-right:1px solid rgba(255,255,255,.75); border-bottom:1px solid rgba(255,255,255,.75); }

.slide-solution03 .solution03-support {
  display:grid;
  grid-template-rows:minmax(0,.9fr) minmax(0,1.1fr);
  min-height:0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-solution03 .solution03-cad {
  position:relative;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
}

.slide-solution03 .solution03-cad-top {
  position:absolute;
  z-index:4;
  top:12px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.34);
  font-size:clamp(6px,.42vw,8px);
}

.slide-solution03 .solution03-cad-item {
  position:absolute;
  inset:20px 4px 0;
  width:calc(100% - 8px);
  height:calc(100% - 20px);
  object-fit:contain;
  opacity:0;
  transform:translateX(8px);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}

.slide-solution03 .solution03-cad-item.is-active { opacity:.82; transform:translateX(0); }

.slide-solution03 .solution03-copy { position:relative; min-height:0; overflow:hidden; }

.slide-solution03 .solution03-copy-item {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(16px,1.5vw,24px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}

.slide-solution03 .solution03-copy-item.is-active { opacity:1; visibility:visible; transform:translateY(0); }
.slide-solution03 .solution03-phase-label { margin-bottom:12px; color:var(--orange); font-size:clamp(7px,.48vw,9px); }

.slide-solution03 .solution03-copy h3 {
  margin:0;
  color:#f4f4f1;
  font-size:clamp(19px,1.55vw,28px);
  line-height:1;
  letter-spacing:-.035em;
}

.slide-solution03 .solution03-copy p {
  max-width:410px;
  margin:14px 0 0;
  color:rgba(255,255,255,.58);
  font-size:clamp(11px,.74vw,13px);
  line-height:1.48;
}

.slide-solution03 .solution03-detail {
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:410px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.34);
  font-size:clamp(7px,.46vw,9px);
  line-height:1.45;
}

.slide-solution03 .solution03-detail span { width:24px; height:1px; margin-top:5px; flex:0 0 auto; background:var(--orange); }

.slide-solution03 .solution03-metrics {
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  flex:0 0 auto;
  margin-top:clamp(12px,1.4vh,18px);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-solution03 .solution03-metrics > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  padding:clamp(10px,1vw,14px) clamp(12px,1.3vw,20px);
  border-right:1px solid rgba(255,255,255,.12);
}

.slide-solution03 .solution03-metrics > div:last-child { border-right:0; }
.slide-solution03 .solution03-metrics span { color:rgba(255,255,255,.36); font-size:clamp(6px,.44vw,8px); }
.slide-solution03 .solution03-metrics strong { color:#f4f4f1; font-size:clamp(17px,1.35vw,24px); font-weight:500; letter-spacing:-.02em; }
.slide-solution03 .solution03-metrics small { color:rgba(255,255,255,.44); font-size:.42em; font-weight:600; letter-spacing:.12em; }

.slide-solution03 .solution03-rail {
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:100%;
  padding:clamp(12px,1.25vw,17px) 0 0;
}

.slide-solution03 .solution03-step {
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(7px,.75vw,12px);
  padding:0;
  border:0;
  background:transparent;
  white-space:nowrap;
  cursor:pointer;
}

.slide-solution03 .solution03-step span { color:rgba(255,255,255,.23); font-size:clamp(7px,.45vw,9px); font-weight:600; letter-spacing:.14em; transition:color .3s ease; }
.slide-solution03 .solution03-step strong { color:rgba(255,255,255,.34); font-size:clamp(8px,.54vw,10px); font-weight:600; letter-spacing:.13em; transition:color .3s ease; }
.slide-solution03 .solution03-step.is-active span { color:var(--orange); }
.slide-solution03 .solution03-step.is-active strong { color:rgba(255,255,255,.9); }
.slide-solution03 .solution03-step:focus-visible { outline:1px solid var(--orange); outline-offset:6px; }

.slide-solution03 .solution03-rail > i {
  position:relative;
  flex:1;
  min-width:20px;
  height:1px;
  margin:0 clamp(12px,1.6vw,28px);
  background:rgba(255,255,255,.12);
}

.slide-solution03 .solution03-rail > i::after {
  content:"";
  position:absolute;
  top:-2px;
  right:0;
  width:5px;
  height:5px;
  border-top:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(255,255,255,.26);
  transform:rotate(45deg);
}

@media (max-height:800px) and (min-width:801px) {
  .slide-solution03 .slide-inner { padding-top:30px; padding-bottom:68px; }
  .slide-solution03 .solution03-header { padding:14px 0; }
  .slide-solution03 .solution03-title { font-size:clamp(30px,3.15vw,54px); }
  .slide-solution03 .solution03-metrics { margin-top:10px; }
  .slide-solution03 .solution03-metrics > div { padding-top:8px; padding-bottom:8px; }
  .slide-solution03 .solution03-rail { padding-top:10px; }
}

@media (max-width:800px) {
  .slide-solution03 { height:auto; min-height:100vh; overflow:visible; }
  .slide-solution03 .slide-inner { height:auto; min-height:100vh; padding-bottom:110px; }
  .slide-solution03 .solution03-meta { display:none; }
  .slide-solution03 .solution03-header { display:block; }
  .slide-solution03 .solution03-title { font-size:clamp(35px,9vw,54px); }
  .slide-solution03 .solution03-intro { margin-top:18px; }
  .slide-solution03 .solution03-stage { display:flex; flex-direction:column; min-height:620px; }
  .slide-solution03 .solution03-media { min-height:300px; }
  .slide-solution03 .solution03-support { min-height:360px; }
  .slide-solution03 .solution03-metrics { grid-template-columns:1fr; }
  .slide-solution03 .solution03-metrics > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .slide-solution03 .solution03-rail { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 24px; padding-top:22px; }
  .slide-solution03 .solution03-rail > i { display:none; }
}


@font-face {

  font-family:"Field Gothic";

  src:
    url("./assets/fonts/FieldGothicTEST-No.63.otf")
    format("opentype");

  font-weight:500;

  font-style:normal;

  font-display:swap;

}


@font-face {

  font-family:"Field Gothic";

  src:
    url("./assets/fonts/FieldGothicTEST-No.64.otf")
    format("opentype");

  font-weight:600;

  font-style:normal;

  font-display:swap;

}


@font-face {

  font-family:"Syncopate";

  src:
    url("./assets/fonts/Syncopate-Regular.ttf")
    format("truetype");

  font-weight:400;

  font-style:normal;

  font-display:swap;

}


@font-face {

  font-family:"Syncopate";

  src:
    url("./assets/fonts/Syncopate-Bold.ttf")
    format("truetype");

  font-weight:700;

  font-style:normal;

  font-display:swap;

}



/* =========================================================
   ROOT
========================================================= */

:root {

  --orange:#f15a24;

  --white:#f3f3f1;

  --black:#101010;

  --panel:#151515;

  --grey:#969696;

  --line:
    rgba(255,255,255,.14);

  --ease:
    cubic-bezier(.16,1,.3,1);

}



* {

  box-sizing:border-box;

}



html,
body {

  width:100%;

  height:100%;

  margin:0;

  padding:0;

  overflow:hidden;

  background:
    var(--black);

  color:
    var(--white);

  font-family:
    "Field Gothic",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}



button {

  font-family:
    "Field Gothic",
    Arial,
    sans-serif;

}



/* =========================================================
   DECK
========================================================= */

.deck {

  position:fixed;

  inset:0;

  overflow:hidden;

}



.deck-track {

  width:100%;

  height:100%;

  transition:
    transform .8s var(--ease);

  will-change:
    transform;

}



/* =========================================================
   SLIDE BASE
========================================================= */

.slide {

  position:relative;

  width:100vw;

  height:100vh;

  overflow:hidden;

  background:
    var(--black);

  isolation:isolate;

}



.slide-inner {

  position:relative;

  z-index:10;

  width:100%;

  height:100%;

  padding:

    clamp(30px,3.5vw,68px)

    clamp(42px,4.8vw,92px)

    clamp(38px,4vw,72px);

  display:flex;

  flex-direction:column;

}



/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

.display {

  font-family:
    "Syncopate",
    sans-serif;

  font-weight:
    700;

  text-transform:
    uppercase;

}



.mcs-label {

  font-family:
    "Field Gothic",
    sans-serif;

  font-weight:
    600;

  text-transform:
    uppercase;

  letter-spacing:
    .16em;

}



/* =========================================================
   GLOBAL GRID
========================================================= */

.mcs-grid {

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  opacity:.11;

  background-image:

    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

  background-size:
    84px 84px;

}



/* =========================================================
   SLIDE REVEALS
========================================================= */

.reveal {

  opacity:0;

  transform:
    translateY(22px);

  transition:

    opacity
    .7s
    var(--ease),

    transform
    .85s
    var(--ease);

}



.slide.is-active
.reveal {

  opacity:1;

  transform:
    translateY(0);

}



.slide.is-active .delay-1 {

  transition-delay:.08s;

}


.slide.is-active .delay-2 {

  transition-delay:.16s;

}


.slide.is-active .delay-3 {

  transition-delay:.24s;

}


.slide.is-active .delay-4 {

  transition-delay:.32s;

}


.slide.is-active .delay-5 {

  transition-delay:.40s;

}



/* =========================================================
   DECK CONTROLS
========================================================= */

.deck-controls {

  position:fixed;

  right:24px;

  bottom:20px;

  z-index:1000;

  display:flex;

  align-items:center;

  gap:7px;

}



.deck-controls button,
#deckCounter {

  min-width:40px;

  height:40px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.16);

  background:
    rgba(8,8,8,.58);

  color:
    rgba(255,255,255,.78);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

}



.deck-controls button {

  cursor:pointer;

  transition:

    color .2s ease,
    border-color .2s ease;

}



.deck-controls button:hover {

  color:
    var(--orange);

  border-color:
    var(--orange);

}



#deckCounter {

  min-width:78px;

  padding:
    0 13px;

  font-size:9px;

  font-weight:600;

  letter-spacing:.13em;

}



.deck-help {

  position:fixed;

  left:25px;

  bottom:24px;

  z-index:1000;

  color:
    rgba(255,255,255,.30);

  font-size:8px;

  font-weight:600;

  letter-spacing:.13em;

  text-transform:
    uppercase;

}



/* =========================================================
   PROGRESS
========================================================= */

.deck-progress {

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:1100;

  height:3px;

  background:
    rgba(255,255,255,.06);

}



.deck-progress span {

  display:block;

  width:0;

  height:100%;

  background:
    var(--orange);

  transition:
    width .6s var(--ease);

}



/* =========================================================
   SLIDE 01 — BOX CLEANER HERO
========================================================= */

.slide-hero {

  background:#090909;

}



/* =========================================================
   BACKGROUND IMAGE

   MATCHES ORIGINAL PRODUCT WEBSITE
========================================================= */

.hero01-media {

  position:absolute;

  inset:0;

  z-index:0;

  overflow:hidden;

}



.hero01-media img {

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  object-position:
    51% center;

  transform:
    scale(1.015);

  filter:
    brightness(1);

}



/* =========================================================
   CINEMATIC SHADING

   ORIGINAL PRODUCT HERO VALUES
========================================================= */

.hero01-shade {

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:

    linear-gradient(
      90deg,
      rgba(5,5,5,.82) 0%,
      rgba(5,5,5,.59) 25%,
      rgba(5,5,5,.16) 57%,
      rgba(5,5,5,.04) 100%
    ),

    linear-gradient(
      0deg,
      rgba(5,5,5,.92) 0%,
      rgba(5,5,5,.35) 28%,
      rgba(5,5,5,.03) 61%
    ),

    linear-gradient(
      180deg,
      rgba(5,5,5,.48) 0%,
      rgba(5,5,5,0) 24%
    );

}



/* =========================================================
   TECHNICAL GRID

   ORIGINAL PRODUCT HERO VALUES
========================================================= */

.hero01-grid {

  opacity:.14;

  background-image:

    linear-gradient(
      rgba(255,255,255,.11) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.11) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  -webkit-mask-image:

    linear-gradient(
      to right,
      black,
      rgba(0,0,0,.4) 48%,
      transparent 78%
    );

  mask-image:

    linear-gradient(
      to right,
      black,
      rgba(0,0,0,.4) 48%,
      transparent 78%
    );

}



/* =========================================================
   TOP RAIL
========================================================= */

.hero01-top {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

  padding-bottom:
    clamp(13px,1vw,17px);

  border-bottom:
    1px solid
    rgba(255,255,255,.19);

}



.hero01-top-left,
.hero01-top-right {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.80);

  font-size:
    clamp(8px,.56vw,10px);

  line-height:1;

}



.hero01-top-right {

  color:
    rgba(255,255,255,.50);

}



.hero01-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 12px
    rgba(241,90,36,.65);

}



/* =========================================================
   MAIN COPY
========================================================= */

.hero01-main {

  position:absolute;

  z-index:10;

  left:
    clamp(42px,4vw,70px);

  right:
    clamp(42px,4vw,70px);

  top:50%;

  transform:
    translateY(-44%);

}



.hero01-kicker {

  margin-bottom:
    clamp(14px,1.5vw,22px);

  color:
    var(--orange);

  font-size:
    clamp(10px,.75vw,12px);

  line-height:1;

}



/* =========================================================
   BIG TITLE
========================================================= */

.hero01-title {

  margin:0;

  padding:0;

  color:
    #f5f5f2;

  font-family:
    "Syncopate",
    sans-serif;

  font-weight:
    700;

  font-size:
    clamp(80px,10.2vw,182px);

  line-height:
    .78;

  letter-spacing:
    -.055em;

  text-transform:
    uppercase;

}



/* =========================================================
   BODY COPY
========================================================= */

.hero01-copy {

  width:
    min(390px,100%);

  margin:
    clamp(28px,3vw,45px)
    0
    0;

  color:
    rgba(255,255,255,.72);

  font-family:
    "Field Gothic",
    sans-serif;

  font-weight:
    400;

  font-size:
    clamp(13px,.95vw,16px);

  line-height:
    1.55;

}



/* =========================================================
   SPEC PANEL
========================================================= */

.hero01-specs {

  position:absolute;

  z-index:11;

  right:
    clamp(25px,4vw,70px);

  bottom:
    45px;

  display:grid;

  grid-template-columns:
    repeat(4,auto);

  border-top:
    1px solid
    rgba(255,255,255,.22);

  border-bottom:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(8,8,8,.22);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

}



.hero01-spec {

  position:relative;

  min-width:123px;

  min-height:auto;

  padding:
    13px 18px 14px;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

}



.hero01-spec
+
.hero01-spec {

  border-left:
    1px solid
    rgba(255,255,255,.16);

}



.hero01-spec-label {

  display:block;

  margin-bottom:7px;

  color:
    rgba(255,255,255,.44);

  font-family:
    "Field Gothic",
    sans-serif;

  font-weight:
    600;

  font-size:8px;

  line-height:1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}



.hero01-spec-reading {

  display:flex;

  align-items:baseline;

  gap:5px;

}



.hero01-spec-reading strong {

  color:#fff;

  font-family:
    "Field Gothic",
    sans-serif;

  font-weight:
    500;

  font-size:19px;

  line-height:1;

  letter-spacing:
    -.02em;

}



.hero01-spec-reading span {

  padding-bottom:0;

  color:
    rgba(255,255,255,.57);

  font-family:
    "Field Gothic",
    sans-serif;

  font-weight:
    400;

  font-size:8px;

  line-height:1;

  letter-spacing:
    .08em;

}



/* =========================================================
   BOTTOM RAIL

   Presentation-specific, not copied from website.
========================================================= */

.hero01-bottom {

  position:absolute;

  z-index:10;

  left:
    clamp(25px,4vw,70px);

  right:
    clamp(25px,4vw,70px);

  bottom:
    12px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  color:
    rgba(255,255,255,.25);

  font-size:
    7px;

}



/* =========================================================
   SHORT LAPTOP SCREENS
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .hero01-title {

    font-size:
      clamp(72px,9vw,150px);

  }


  .hero01-main {

    transform:
      translateY(-42%);

  }


  .hero01-copy {

    margin-top:25px;

    font-size:
      clamp(12px,.85vw,15px);

  }


  .hero01-specs {

    bottom:45px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  html,
  body {

    overflow:auto;

  }


  .deck {

    position:relative;

    overflow:visible;

  }


  .deck-track {

    transform:none !important;

  }


  .slide {

    min-height:100svh;

    height:auto;

  }


  .slide-inner {

    min-height:100svh;

  }


  .deck-controls,
  .deck-progress,
  .deck-help {

    display:none;

  }



  .hero01-media img {

    object-position:
      46% center;

  }



  .hero01-shade {

    background:

      linear-gradient(
        0deg,
        rgba(4,4,4,.96) 0%,
        rgba(4,4,4,.62) 48%,
        rgba(4,4,4,.25) 100%
      ),

      linear-gradient(
        90deg,
        rgba(4,4,4,.54),
        transparent
      );

  }



  .hero01-grid {

    background-size:
      55px 55px;

    opacity:.10;

  }



  .hero01-top-right {

    display:none;

  }



  .hero01-main {

    position:relative;

    left:auto;

    right:auto;

    top:auto;

    transform:none;

    width:100%;

    margin:auto 0;

  }



  .hero01-title {

    font-size:
      clamp(62px,18vw,105px);

    line-height:.81;

  }



  .hero01-kicker {

    font-size:9px;

  }



  .hero01-copy {

    width:
      min(340px,100%);

    margin-top:24px;

    font-size:12px;

  }



  .hero01-specs {

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;

    width:100%;

    grid-template-columns:
      repeat(2,1fr);

    margin-top:35px;

  }



  .hero01-spec {

    min-width:0;

    padding:
      10px 11px;

  }



  .hero01-spec
  +
  .hero01-spec {

    border-left:0;

  }



  .hero01-spec:nth-child(2),
  .hero01-spec:nth-child(4) {

    border-left:
      1px solid
      rgba(255,255,255,.16);

  }



  .hero01-spec:nth-child(3),
  .hero01-spec:nth-child(4) {

    border-top:
      1px solid
      rgba(255,255,255,.16);

  }



  .hero01-spec-label {

    font-size:7px;

  }



  .hero01-spec-reading strong {

    font-size:16px;

  }



  .hero01-bottom {

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;

    margin-top:30px;

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .deck-track,
  .reveal {

    transition:
      none !important;

  }

}
/* =========================================================
   SLIDE 02 — OPERATIONAL BENEFITS
========================================================= */

.slide-benefits {

  background:
    #101010;

}



/* =========================================================
   BACKGROUND
========================================================= */

.benefits02-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      circle at 76% 48%,
      rgba(255,255,255,.055),
      transparent 34%
    ),

    linear-gradient(
      90deg,
      #101010 0%,
      #111 55%,
      #0d0d0d 100%
    );

}



.benefits02-grid {

  opacity:.12;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.benefits02-top {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.16);

}



.benefits02-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.75);

  font-size:
    clamp(7px,.55vw,10px);

}



.benefits02-meta {

  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(7px,.5vw,9px);

}



.benefits02-dot {

  width:6px;

  height:6px;

  border-radius:50%;

  flex:0 0 auto;

  background:
    var(--orange);

  box-shadow:
    0 0 11px
    rgba(241,90,36,.6);

}



/* =========================================================
   HEADER
========================================================= */

.benefits02-header {

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:
    clamp(45px,7vw,130px);

  align-items:end;

  margin-top:
    clamp(35px,5vh,65px);

}



.benefits02-kicker {

  margin-bottom:
    clamp(14px,1.4vw,22px);

  color:
    var(--orange);

  font-size:
    clamp(8px,.65vw,11px);

}



.benefits02-title {

  margin:0;

  color:
    #fff;

  font-size:
    clamp(46px,5vw,92px);

  line-height:
    .91;

  letter-spacing:
    -.055em;

}



.benefits02-intro {

  max-width:500px;

  margin:0 0 4px;

  color:
    rgba(255,255,255,.58);

  font-family:
    "Field Gothic",
    sans-serif;

  font-size:
    clamp(13px,.95vw,17px);

  line-height:1.6;

}



/* =========================================================
   STAGE
========================================================= */

.benefits02-stage {

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(310px,.72fr)
    minmax(520px,1.28fr);

  margin-top:
    clamp(28px,4vh,52px);

  border-top:
    1px solid rgba(255,255,255,.16);

  border-bottom:
    1px solid rgba(255,255,255,.16);

}



/* =========================================================
   LEFT TABS
========================================================= */

.benefits02-index {

  display:grid;

  grid-template-rows:
    repeat(3,1fr);

  border-right:
    1px solid rgba(255,255,255,.16);

}



.benefits02-tab {

  width:100%;

  position:relative;

  display:grid;

  grid-template-columns:
    34px 1fr auto;

  gap:
    clamp(12px,1.2vw,22px);

  align-items:center;

  padding:
    clamp(18px,2vw,31px);

  border:0;

  border-bottom:
    1px solid rgba(255,255,255,.13);

  outline:0;

  background:
    transparent;

  color:#fff;

  text-align:left;

  cursor:pointer;

  transition:

    background .3s ease,
    padding-left .4s var(--ease);

}



.benefits02-tab:last-child {

  border-bottom:0;

}



.benefits02-tab:hover {

  background:
    rgba(255,255,255,.025);

}



.benefits02-tab.is-active {

  padding-left:
    clamp(25px,2.5vw,40px);

  background:

    linear-gradient(
      90deg,
      rgba(241,90,36,.10),
      rgba(241,90,36,.02) 55%,
      transparent
    );

}



.benefits02-tab.is-active::before {

  content:"";

  position:absolute;

  left:0;

  top:0;

  bottom:0;

  width:3px;

  background:
    var(--orange);

}



.benefits02-tab-number {

  color:
    rgba(255,255,255,.28);

  font-size:9px;

  font-weight:600;

  letter-spacing:.14em;

}



.benefits02-tab.is-active
.benefits02-tab-number {

  color:
    var(--orange);

}



.benefits02-tab-copy {

  display:flex;

  flex-direction:column;

  gap:7px;

}



.benefits02-tab-copy strong {

  font-size:
    clamp(12px,1vw,17px);

  line-height:1;

  font-weight:600;

  letter-spacing:.08em;

}



.benefits02-tab-copy small {

  color:
    rgba(255,255,255,.35);

  font-size:
    clamp(9px,.7vw,12px);

  line-height:1.35;

}



.benefits02-tab-arrow {

  color:
    rgba(255,255,255,.18);

  font-size:17px;

  transition:

    color .3s ease,
    transform .3s var(--ease);

}



.benefits02-tab.is-active
.benefits02-tab-arrow {

  color:
    var(--orange);

  transform:
    translateX(4px);

}



/* =========================================================
   RIGHT DISPLAY
========================================================= */

.benefits02-display {

  position:relative;

  overflow:hidden;

  min-height:0;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.016),
      transparent 60%
    );

}



.benefits02-display::before {

  content:"";

  position:absolute;

  inset:0;

  opacity:.28;

  pointer-events:none;

  background-image:

    linear-gradient(
      rgba(255,255,255,.026) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.026) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

}



/* =========================================================
   RETICLE
========================================================= */

.benefits02-reticle {

  position:absolute;

  right:
    clamp(24px,3vw,50px);

  top:
    clamp(22px,3vw,45px);

  width:44px;

  height:44px;

  border:
    1px solid rgba(241,90,36,.23);

  border-radius:50%;

  pointer-events:none;

}



.benefits02-reticle::before {

  content:"";

  position:absolute;

  inset:7px;

  border:
    1px dashed
    rgba(241,90,36,.34);

  border-radius:50%;

}



.benefits02-reticle span {

  position:absolute;

  left:50%;

  top:50%;

  width:5px;

  height:5px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 11px
    rgba(241,90,36,.55);

}



/* =========================================================
   BENEFIT CONTENT
========================================================= */

.benefits02-content {

  position:absolute;

  inset:0;

  z-index:3;

  display:grid;

  grid-template-columns:
    .95fr 1.05fr;

  grid-template-rows:
    auto 1fr;

  gap:
    clamp(25px,3vw,55px);

  padding:
    clamp(25px,3vw,50px);

  opacity:0;

  visibility:hidden;

  transform:
    translateY(18px);

  filter:
    blur(5px);

  transition:

    opacity .45s ease,
    transform .6s var(--ease),
    filter .45s ease,
    visibility .45s;

}



.benefits02-content.is-active {

  opacity:1;

  visibility:visible;

  transform:
    translateY(0);

  filter:
    blur(0);

}



.benefits02-content-top {

  grid-column:
    1 / -1;

  color:
    var(--orange);

  font-size:
    clamp(7px,.52vw,9px);

}



/* =========================================================
   METRIC
========================================================= */

.benefits02-metric {

  align-self:center;

}



.benefits02-metric strong {

  display:block;

  color:#fff;

  font-family:
    "Syncopate",
    sans-serif;

  font-size:
    clamp(76px,8vw,150px);

  font-weight:700;

  line-height:.78;

  letter-spacing:
    -.065em;

}



.benefits02-metric span {

  display:block;

  margin-top:
    clamp(17px,1.7vw,27px);

  color:
    rgba(255,255,255,.38);

  font-size:
    clamp(8px,.62vw,11px);

  font-weight:600;

  letter-spacing:.16em;

  text-transform:
    uppercase;

}



/* =========================================================
   DETAIL
========================================================= */

.benefits02-detail {

  align-self:center;

  max-width:450px;

}



.benefits02-detail h3 {

  margin:
    0 0
    clamp(18px,1.8vw,28px);

  color:
    #f4f4f1;

  font-size:
    clamp(21px,2vw,34px);

  font-weight:600;

  line-height:1;

  letter-spacing:
    -.02em;

}



.benefits02-detail p {

  margin:0;

  max-width:400px;

  color:
    rgba(255,255,255,.48);

  font-size:
    clamp(11px,.83vw,14px);

  line-height:1.6;

}



/* =========================================================
   PROOF BAR
========================================================= */

.benefits02-proof {

  display:grid;

  grid-template-columns:
    auto auto 1px auto auto;

  gap:
    clamp(8px,1vw,16px);

  align-items:center;

  margin-top:
    clamp(24px,3vw,42px);

  padding-top:
    clamp(17px,1.8vw,25px);

  border-top:
    1px solid rgba(255,255,255,.13);

}



.benefits02-proof span {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(6px,.45vw,8px);

  font-weight:600;

  letter-spacing:.13em;

  text-transform:
    uppercase;

}



.benefits02-proof strong {

  color:
    rgba(255,255,255,.78);

  font-size:
    clamp(9px,.7vw,12px);

  font-weight:600;

  letter-spacing:.07em;

}



.benefits02-proof i {

  width:1px;

  height:18px;

  margin:
    0 4px;

  background:
    rgba(255,255,255,.14);

}



/* =========================================================
   BOTTOM
========================================================= */

.benefits02-bottom {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-top:
    clamp(12px,1.4vw,18px);

  color:
    rgba(255,255,255,.26);

  font-size:
    clamp(6px,.43vw,8px);

}



/* =========================================================
   LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .benefits02-header {

    margin-top:30px;

  }


  .benefits02-title {

    font-size:
      clamp(40px,4.2vw,72px);

  }


  .benefits02-stage {

    margin-top:25px;

  }


  .benefits02-metric strong {

    font-size:
      clamp(65px,7vw,115px);

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .benefits02-meta {

    display:none;

  }


  .benefits02-header {

    grid-template-columns:1fr;

    gap:25px;

  }


  .benefits02-stage {

    grid-template-columns:1fr;

  }


  .benefits02-index {

    grid-template-rows:none;

    grid-template-columns:
      repeat(3,1fr);

    border-right:0;

    border-bottom:
      1px solid
      rgba(255,255,255,.16);

  }


  .benefits02-tab {

    grid-template-columns:1fr;

    padding:15px;

    border-right:
      1px solid
      rgba(255,255,255,.13);

    border-bottom:0;

  }


  .benefits02-tab-copy small,
  .benefits02-tab-arrow {

    display:none;

  }


  .benefits02-display {

    min-height:470px;

  }


  .benefits02-content {

    grid-template-columns:1fr;

  }

}
/* =========================================================
   SLIDE 03 — PRODUCT ANATOMY
========================================================= */

.slide-product03 {

  background:
    #101010;

}



/* =========================================================
   BACKGROUND
========================================================= */

.product03-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      ellipse at 57% 50%,
      rgba(255,255,255,.055),
      transparent 36%
    ),

    #101010;

}



.product03-grid {

  opacity:.18;

  background-size:
    72px 72px;

}



/* =========================================================
   AXES
========================================================= */

.product03-axis {

  position:absolute;

  z-index:3;

  pointer-events:none;

  background:
    rgba(255,255,255,.08);

}



.product03-axis-x {

  left:0;

  right:0;

  top:51%;

  height:1px;

}



.product03-axis-y {

  top:0;

  bottom:0;

  left:66%;

  width:1px;

}



/* =========================================================
   TOP RAIL
========================================================= */

.product03-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.product03-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.72);

  font-size:
    clamp(7px,.55vw,10px);

}



.product03-meta {

  color:
    rgba(255,255,255,.30);

  font-size:
    clamp(7px,.5vw,9px);

}



.product03-top-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 12px
    rgba(241,90,36,.65);

}



/* =========================================================
   STAGE
========================================================= */

.product03-stage {

  --mx:0px;
  --my:0px;

  position:absolute;

  z-index:5;

  inset:
    clamp(75px,7vh,105px)
    0
    clamp(55px,6vh,85px);

}



/* =========================================================
   SIDE ID
========================================================= */

.product03-side {

  position:absolute;

  z-index:12;

  left:
    clamp(42px,4.8vw,92px);

  top:50%;

  transform:
    translateY(-42%);

  pointer-events:none;

}



.product03-side-label {

  display:block;

  color:
    rgba(255,255,255,.35);

  font-size:
    clamp(8px,.65vw,12px);

  font-weight:600;

  line-height:1.5;

  letter-spacing:.17em;

}



.product03-side-id {

  display:block;

  margin-top:
    clamp(18px,2vw,28px);

  color:
    rgba(255,255,255,.045);

  font-size:
    clamp(72px,7vw,125px);

  font-weight:600;

  line-height:.8;

  letter-spacing:-.06em;

}



/* =========================================================
   ROBOT WRAP
========================================================= */

.product03-product-wrap {

  position:absolute;

  z-index:5;

  left:50%;

  top:51%;

  width:
    min(71vw,1190px);

  transform:

    translate(
      calc(-43% + var(--mx)),
      calc(-50% + var(--my))
    )

    scale(.94);

  opacity:0;

  filter:
    blur(6px);

  transition:

    opacity .9s ease,

    filter .9s ease,

    transform
    1.25s
    var(--ease);

}



.slide-product03.is-active
.product03-product-wrap {

  opacity:1;

  filter:
    blur(0);

  transform:

    translate(
      calc(-43% + var(--mx)),
      calc(-50% + var(--my))
    )

    scale(1);

}



/* =========================================================
   ROBOT IMAGE
========================================================= */

.product03-product {

  position:relative;

  z-index:3;

  display:block;

  width:100%;

  height:auto;

  user-select:none;

  pointer-events:none;

  filter:

    drop-shadow(
      0 35px 42px
      rgba(0,0,0,.48)
    );

}



.product03-glow {

  position:absolute;

  z-index:1;

  left:18%;

  right:7%;

  bottom:4%;

  height:21%;

  border-radius:50%;

  background:

    radial-gradient(
      ellipse,
      rgba(255,255,255,.12),
      transparent 68%
    );

  filter:
    blur(30px);

  opacity:.33;

}



/* =========================================================
   SCANNER
========================================================= */

.product03-scanner {

  position:absolute;

  z-index:6;

  top:4%;

  bottom:8%;

  left:3%;

  width:1px;

  opacity:0;

  pointer-events:none;

  background:

    linear-gradient(
      transparent,
      var(--orange),
      transparent
    );

  box-shadow:

    0 0 10px
    rgba(241,90,36,.75),

    0 0 24px
    rgba(241,90,36,.35);

}



.slide-product03.is-active
.product03-scanner {

  animation:

    product03Scan
    5.6s
    1.1s
    ease-in-out
    infinite;

}



@keyframes product03Scan {

  0% {

    left:3%;

    opacity:0;

  }


  9% {

    opacity:.58;

  }


  48% {

    opacity:.65;

  }


  55% {

    left:96%;

    opacity:0;

  }


  100% {

    left:96%;

    opacity:0;

  }

}



/* =========================================================
   CALLOUT BASE
========================================================= */

.product03-callout {

  position:absolute;

  z-index:20;

  display:flex;

  align-items:center;

  padding:0;

  border:0;

  outline:0;

  background:none;

  color:#fff;

  text-align:left;

  cursor:pointer;

  opacity:0;

  filter:
    blur(6px);

  transform:
    translateY(15px);

  transition:

    opacity .65s ease,

    filter .65s ease,

    transform
    .8s
    var(--ease);

}



/* =========================================================
   ACTIVE ENTRANCE
========================================================= */

.slide-product03.is-active
.product03-callout {

  opacity:1;

  filter:
    blur(0);

  transform:
    translateY(0);

}



.slide-product03.is-active
.product03-c1 {

  transition-delay:.32s;

}



.slide-product03.is-active
.product03-c2 {

  transition-delay:.44s;

}



.slide-product03.is-active
.product03-c3 {

  transition-delay:.56s;

}



.slide-product03.is-active
.product03-c4 {

  transition-delay:.68s;

}



/* =========================================================
   CALLOUT POSITIONS
========================================================= */

.product03-c1 {

  top:15%;

  right:5%;

}



.product03-c2 {

  top:17%;

  left:21%;

}



.product03-c3 {

  right:7%;

  bottom:17%;

}



.product03-c4 {

  left:18%;

  bottom:14%;

}



/* =========================================================
   CALLOUT DOT
========================================================= */

.product03-callout-dot {

  width:9px;

  height:9px;

  flex:0 0 auto;

  border:
    2px solid var(--orange);

  border-radius:50%;

  box-shadow:

    0 0 0 6px
    rgba(241,90,36,.08),

    0 0 12px
    rgba(241,90,36,.20);

  transition:

    transform .3s var(--ease),

    box-shadow .3s ease;

}



/* =========================================================
   CALLOUT LINE
========================================================= */

.product03-callout-line {

  display:block;

  width:
    clamp(38px,4vw,76px);

  height:1px;

  margin:
    0 15px;

  background:
    rgba(255,255,255,.28);

  transform-origin:left center;

  transition:

    background .3s ease,

    width .4s var(--ease);

}



/* =========================================================
   CALLOUT COPY
========================================================= */

.product03-callout-copy {

  display:flex;

  flex-direction:column;

  min-width:
    clamp(125px,11vw,175px);

}



.product03-callout-number {

  margin-bottom:6px;

  color:
    var(--orange);

  font-size:
    clamp(8px,.55vw,10px);

  font-weight:600;

  line-height:1;

  letter-spacing:.16em;

}



.product03-callout-copy strong {

  color:
    rgba(255,255,255,.94);

  font-size:
    clamp(11px,.85vw,15px);

  font-weight:600;

  line-height:1.05;

  letter-spacing:.08em;

}



/* =========================================================
   CALLOUT DETAILS
========================================================= */

.product03-callout-detail {

  display:block;

  max-width:205px;

  max-height:0;

  margin-top:0;

  overflow:hidden;

  color:
    rgba(255,255,255,.42);

  font-size:
    clamp(8px,.64vw,11px);

  line-height:1.45;

  opacity:0;

  transform:
    translateY(-4px);

  transition:

    opacity .25s ease,

    max-height .35s var(--ease),

    margin .35s var(--ease),

    transform .35s var(--ease);

}



.product03-callout:hover
.product03-callout-detail,

.product03-callout.is-open
.product03-callout-detail {

  max-height:70px;

  margin-top:8px;

  opacity:1;

  transform:
    translateY(0);

}



.product03-callout:hover
.product03-callout-dot,

.product03-callout.is-open
.product03-callout-dot {

  transform:
    scale(1.32);

  box-shadow:

    0 0 0 10px
    rgba(241,90,36,.09),

    0 0 19px
    rgba(241,90,36,.35);

}



.product03-callout:hover
.product03-callout-line,

.product03-callout.is-open
.product03-callout-line {

  background:
    rgba(241,90,36,.55);

}



/* =========================================================
   BOTTOM
========================================================= */

.product03-bottom {

  position:absolute;

  z-index:20;

  left:
    clamp(42px,4.8vw,92px);

  right:
    clamp(42px,4.8vw,92px);

  bottom:
    clamp(18px,2vw,30px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  color:
    rgba(255,255,255,.23);

  font-size:
    clamp(6px,.42vw,8px);

}



.product03-product-id {

  display:flex;

  gap:
    clamp(16px,2vw,30px);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .product03-product-wrap {

    width:
      min(66vw,1030px);

  }


  .product03-c1 {

    top:14%;

  }


  .product03-c2 {

    top:15%;

  }


  .product03-c3 {

    bottom:14%;

  }


  .product03-c4 {

    bottom:11%;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .product03-meta {

    display:none;

  }


  .product03-axis {

    display:none;

  }


  .product03-stage {

    position:relative;

    inset:auto;

    flex:1;

    min-height:660px;

    margin-top:20px;

  }


  .product03-side {

    display:none;

  }


  .product03-product-wrap {

    left:50%;

    top:43%;

    width:128%;

    transform:

      translate(
        calc(-50% + var(--mx)),
        calc(-50% + var(--my))
      )

      scale(.94);

  }


  .slide-product03.is-active
  .product03-product-wrap {

    transform:

      translate(
        calc(-50% + var(--mx)),
        calc(-50% + var(--my))
      )

      scale(1);

  }


  .product03-callout-line {

    width:20px;

    margin:
      0 8px;

  }


  .product03-callout-copy {

    min-width:95px;

  }


  .product03-callout-detail {

    display:none;

  }


  .product03-c1 {

    right:5px;

    top:8%;

  }


  .product03-c2 {

    left:5px;

    top:11%;

  }


  .product03-c3 {

    right:5px;

    bottom:12%;

  }


  .product03-c4 {

    left:5px;

    bottom:9%;

  }


  .product03-bottom {

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;

    padding-top:20px;

  }

}
/* =========================================================
   SLIDE 04 — CLEANING PROCESS / ENTER
========================================================= */

.slide-process04 {

  background:
    #0b0b0b;

}



/* =========================================================
   BACKGROUND
========================================================= */

.process04-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      ellipse at 73% 48%,
      rgba(255,255,255,.055),
      transparent 38%
    ),

    linear-gradient(
      90deg,
      #0b0b0b 0%,
      #101010 52%,
      #0a0a0a 100%
    );

}



.process04-grid {

  opacity:.10;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.process04-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  flex:0 0 auto;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.process04-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.68);

  font-size:
    clamp(7px,.55vw,10px);

}



.process04-meta {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(7px,.5vw,9px);

}



.process04-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 12px
    rgba(241,90,36,.65);

}



/* =========================================================
   MAIN STAGE
========================================================= */

.process04-stage {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(310px,.39fr)
    minmax(0,1fr);

  gap:
    clamp(45px,6vw,105px);

  align-items:center;

  padding:

    clamp(30px,4vh,55px)

    0

    clamp(24px,3vh,40px);

}



/* =========================================================
   COPY
========================================================= */

.process04-copy {

  position:relative;

  z-index:4;

  align-self:center;

  max-width:490px;

}



.process04-chapter-top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:
    clamp(26px,3vh,42px);

  padding-bottom:13px;

  border-bottom:
    1px solid rgba(255,255,255,.13);

}



.process04-number {

  color:
    var(--orange);

  font-size:
    clamp(8px,.62vw,11px);

  font-weight:600;

  letter-spacing:.14em;

}



.process04-pass {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(6px,.46vw,8px);

}



/* =========================================================
   TITLE
========================================================= */

.process04-title {

  margin:0;

  color:
    #f4f4f1;

  font-size:
    clamp(44px,4.65vw,86px);

  line-height:
    .89;

  letter-spacing:
    -.055em;

}



/* =========================================================
   DESCRIPTION
========================================================= */

.process04-description {

  max-width:390px;

  margin:
    clamp(24px,2.5vw,38px)
    0
    0;

  color:
    rgba(255,255,255,.48);

  font-size:
    clamp(11px,.82vw,14px);

  line-height:
    1.65;

}



/* =========================================================
   DETAIL LABEL
========================================================= */

.process04-detail {

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:
    clamp(24px,2.8vw,40px);

}



.process04-detail > span {

  width:30px;

  height:1px;

  flex:0 0 auto;

  background:
    var(--orange);

}



.process04-detail strong {

  color:
    rgba(255,255,255,.32);

  font-size:
    clamp(6px,.46vw,8px);

}



/* =========================================================
   VIDEO
========================================================= */

.process04-media {

  position:relative;

  width:100%;

  aspect-ratio:
    16 / 9;

  overflow:hidden;

  background:
    #151515;

  box-shadow:
    0 35px 65px rgba(0,0,0,.32);

}



.process04-media video {

  position:absolute;

  inset:0;

  z-index:1;

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  transform:
    scale(1.003);

  transition:
    transform
    1.2s
    var(--ease);

}



.process04-media:hover video {

  transform:
    scale(1.014);

}



/* =========================================================
   VIDEO SHADING
========================================================= */

.process04-media-shade {

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,0) 25%
    ),

    linear-gradient(
      0deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,0) 28%
    );

}



/* =========================================================
   VIDEO META
========================================================= */

.process04-media-top,
.process04-media-bottom {

  position:absolute;

  z-index:5;

  left:
    clamp(14px,1.3vw,22px);

  right:
    clamp(14px,1.3vw,22px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  pointer-events:none;

}



.process04-media-top {

  top:
    clamp(13px,1.2vw,20px);

  color:
    rgba(255,255,255,.57);

  font-size:
    clamp(6px,.42vw,8px);

}



.process04-media-bottom {

  bottom:
    clamp(13px,1.2vw,20px);

}



.process04-media-bottom > span {

  color:
    rgba(255,255,255,.46);

  font-size:
    clamp(6px,.42vw,8px);

}



.process04-media-bottom strong {

  color:#fff;

  font-size:
    clamp(7px,.52vw,9px);

}



/* =========================================================
   VIEWFINDER CORNERS
========================================================= */

.process04-corner {

  position:absolute;

  z-index:6;

  width:14px;

  height:14px;

  pointer-events:none;

  opacity:.42;

}



.process04-corner-tl {

  top:12px;

  left:12px;

  border-top:
    1px solid rgba(255,255,255,.75);

  border-left:
    1px solid rgba(255,255,255,.75);

}



.process04-corner-tr {

  top:12px;

  right:12px;

  border-top:
    1px solid rgba(255,255,255,.75);

  border-right:
    1px solid rgba(255,255,255,.75);

}



.process04-corner-bl {

  bottom:12px;

  left:12px;

  border-bottom:
    1px solid rgba(255,255,255,.75);

  border-left:
    1px solid rgba(255,255,255,.75);

}



.process04-corner-br {

  right:12px;

  bottom:12px;

  border-right:
    1px solid rgba(255,255,255,.75);

  border-bottom:
    1px solid rgba(255,255,255,.75);

}



/* =========================================================
   PROCESS RAIL
========================================================= */

.process04-rail {

  position:relative;

  z-index:20;

  flex:0 0 auto;

  display:flex;

  align-items:center;

  width:100%;

  padding:
    clamp(14px,1.5vw,20px)
    0;

  border-top:
    1px solid rgba(255,255,255,.14);

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.process04-step {

  position:relative;

  display:flex;

  align-items:center;

  gap:
    clamp(7px,.75vw,12px);

  white-space:nowrap;

}



.process04-step span {

  color:
    rgba(255,255,255,.23);

  font-size:
    clamp(6px,.42vw,8px);

  font-weight:600;

  letter-spacing:.14em;

  transition:
    color .3s ease;

}



.process04-step strong {

  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(7px,.5vw,9px);

  font-weight:600;

  letter-spacing:.13em;

  transition:
    color .3s ease;

}



.process04-step.is-active span {

  color:
    var(--orange);

}



.process04-step.is-active strong {

  color:
    rgba(255,255,255,.88);

}



.process04-step.is-active::after {

  content:"";

  position:absolute;

  left:0;

  right:0;

  bottom:
    calc(
      -1 *
      clamp(15px,1.5vw,21px)
    );

  height:2px;

  background:
    var(--orange);

  box-shadow:
    0 0 10px
    rgba(241,90,36,.45);

}



/* =========================================================
   RAIL CONNECTORS
========================================================= */

.process04-rail > i {

  position:relative;

  flex:1;

  min-width:25px;

  height:1px;

  margin:
    0
    clamp(14px,2vw,36px);

  background:
    rgba(255,255,255,.12);

}



.process04-rail > i::after {

  content:"";

  position:absolute;

  top:-2px;

  right:0;

  width:5px;

  height:5px;

  border-top:
    1px solid rgba(255,255,255,.26);

  border-right:
    1px solid rgba(255,255,255,.26);

  transform:
    rotate(45deg);

}



/* =========================================================
   BOTTOM
========================================================= */

.process04-bottom {

  position:relative;

  z-index:20;

  flex:0 0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-top:
    clamp(12px,1.3vw,18px);

  color:
    rgba(255,255,255,.24);

  font-size:
    clamp(6px,.42vw,8px);

}



.process04-bottom-status {

  display:flex;

  align-items:center;

  gap:10px;

}



.process04-bottom-status > span {

  width:5px;

  height:5px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

}



.process04-bottom-meta {

  color:
    rgba(255,255,255,.22);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .process04-stage {

    padding:
      23px 0 18px;

  }


  .process04-title {

    font-size:
      clamp(38px,4vw,68px);

  }


  .process04-description {

    margin-top:20px;

    font-size:
      clamp(10px,.72vw,12px);

  }


  .process04-detail {

    margin-top:22px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .process04-meta {

    display:none;

  }


  .process04-stage {

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:35px;

    padding:
      35px 0;

  }


  .process04-copy {

    max-width:100%;

  }


  .process04-title {

    font-size:
      clamp(42px,11vw,67px);

  }


  .process04-description {

    max-width:340px;

  }


  .process04-media {

    aspect-ratio:
      16 / 10;

  }


  .process04-rail {

    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    gap:16px 25px;

  }


  .process04-rail > i {

    display:none;

  }


  .process04-step.is-active::after {

    display:none;

  }


  .process04-bottom {

    flex-wrap:wrap;

  }

}
/* =========================================================
   SLIDE 04 — TITLE / VIDEO SPACING FIX
========================================================= */

@media (min-width:801px) {

  .process04-stage {

    grid-template-columns:
      minmax(360px,.42fr)
      minmax(0,1fr);

    gap:
      clamp(70px,7vw,125px);

  }


  .process04-title {

    font-size:
      clamp(42px,3.9vw,72px);

    max-width:
      520px;

  }

}
.process04-description-secondary {

  margin-top:16px;

  padding-top:16px;

  border-top:
    1px solid rgba(255,255,255,.09);

  color:
    rgba(255,255,255,.36);

}
/* =========================================================
   SLIDE 08 — SOFTWARE / DOCUMENTED CLEANING
========================================================= */

.slide-software08 {

  background:
    #101010;

}



/* =========================================================
   BACKGROUND
========================================================= */

.software08-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      circle at 72% 47%,
      rgba(241,90,36,.035),
      transparent 33%
    ),

    linear-gradient(
      90deg,
      #101010,
      #111 58%,
      #0c0c0c
    );

}



.software08-grid {

  opacity:.10;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.software08-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.15);

}



.software08-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.70);

  font-size:
    clamp(7px,.55vw,10px);

}



.software08-dot {

  width:6px;

  height:6px;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 11px rgba(241,90,36,.65);

}



.software08-meta {

  color:
    rgba(255,255,255,.30);

  font-size:
    clamp(7px,.5vw,9px);

}



/* =========================================================
   HEADER
========================================================= */

.software08-header {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:
    clamp(60px,8vw,145px);

  align-items:end;

  padding:
    clamp(30px,4vh,52px)
    0
    clamp(25px,3vh,42px);

}



.software08-kicker {

  margin-bottom:
    clamp(11px,1vw,16px);

  color:
    var(--orange);

  font-size:
    clamp(7px,.55vw,10px);

}



.software08-title {

  margin:0;

  color:#fff;

  font-size:
    clamp(42px,4.25vw,78px);

  line-height:.88;

  letter-spacing:-.055em;

}



.software08-intro {

  max-width:490px;

  margin:0 0 3px;

  color:
    rgba(255,255,255,.50);

  font-size:
    clamp(11px,.8vw,14px);

  line-height:1.6;

}



/* =========================================================
   MAIN STAGE
========================================================= */

.software08-stage {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1.17fr)
    minmax(390px,.83fr);

  border-top:
    1px solid rgba(255,255,255,.15);

  border-bottom:
    1px solid rgba(255,255,255,.15);

}



/* =========================================================
   VISION PANEL
========================================================= */

.software08-vision {

  position:relative;

  min-width:0;

  overflow:hidden;

  background:#080808;

  border-right:
    1px solid rgba(255,255,255,.15);

}



.software08-video {

  position:absolute;

  inset:-1%;

  width:102%;

  height:102%;

  object-fit:cover;

  filter:
    saturate(.78)
    contrast(1.04)
    brightness(.74);

}



.software08-video-shade {

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.30),
      transparent 28%
    ),

    linear-gradient(
      0deg,
      rgba(0,0,0,.55),
      transparent 28%
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.18),
      transparent 25%,
      transparent 75%,
      rgba(0,0,0,.18)
    );

}



/* =========================================================
   VIDEO HUD
========================================================= */

.software08-hud-top,
.software08-hud-bottom {

  position:absolute;

  z-index:8;

  left:
    clamp(16px,1.4vw,24px);

  right:
    clamp(16px,1.4vw,24px);

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:
    rgba(255,255,255,.65);

  font-size:
    clamp(6px,.43vw,8px);

}



.software08-hud-top {

  top:
    clamp(15px,1.3vw,22px);

}



.software08-hud-bottom {

  bottom:
    clamp(15px,1.3vw,22px);

}



.software08-live {

  display:flex;

  align-items:center;

  gap:8px;

}



.software08-live i {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 9px rgba(241,90,36,.8);

}



/* =========================================================
   CAPTURE STATUS
========================================================= */

.software08-capture-status {

  position:absolute;

  z-index:8;

  left:
    clamp(16px,1.4vw,24px);

  top:
    clamp(52px,4vw,70px);

  display:flex;

  flex-direction:column;

  gap:5px;

}



.software08-capture-status small {

  color:
    rgba(255,255,255,.38);

  font-size:7px;

}



.software08-capture-status strong {

  color:
    var(--orange);

  font-size:
    clamp(9px,.7vw,12px);

  font-weight:600;

  letter-spacing:.11em;

}



/* =========================================================
   SCAN
========================================================= */

.software08-scan {

  position:absolute;

  z-index:6;

  left:0;

  right:0;

  top:5%;

  height:1px;

  opacity:0;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--orange),
      transparent
    );

  box-shadow:
    0 0 15px rgba(241,90,36,.5);

  animation:
    software08Scan
    5s
    linear
    infinite;

}



@keyframes software08Scan {

  0% {

    top:5%;

    opacity:0;

  }


  8% {

    opacity:.60;

  }


  72% {

    opacity:.42;

  }


  85% {

    top:94%;

    opacity:0;

  }


  100% {

    top:94%;

    opacity:0;

  }

}



/* =========================================================
   VIEWFINDER
========================================================= */

.software08-corner {

  position:absolute;

  z-index:7;

  width:23px;

  height:23px;

  opacity:.7;

}



.software08-tl {

  left:14px;

  top:14px;

  border-left:
    1px solid var(--orange);

  border-top:
    1px solid var(--orange);

}



.software08-tr {

  right:14px;

  top:14px;

  border-right:
    1px solid var(--orange);

  border-top:
    1px solid var(--orange);

}



.software08-bl {

  left:14px;

  bottom:14px;

  border-left:
    1px solid var(--orange);

  border-bottom:
    1px solid var(--orange);

}



.software08-br {

  right:14px;

  bottom:14px;

  border-right:
    1px solid var(--orange);

  border-bottom:
    1px solid var(--orange);

}



/* =========================================================
   CLEANING RECORD
========================================================= */

.software08-record {

  min-width:0;

  display:flex;

  flex-direction:column;

  padding:
    clamp(22px,2.5vw,42px);

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.022),
      transparent 60%
    );

}



/* =========================================================
   RECORD TOP
========================================================= */

.software08-record-top {

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:20px;

  padding-bottom:
    clamp(18px,1.8vw,26px);

  border-bottom:
    1px solid rgba(255,255,255,.13);

}



.software08-record-top > div:first-child {

  display:flex;

  flex-direction:column;

  gap:9px;

}



.software08-record-label {

  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(6px,.43vw,8px);

}



.software08-record-top strong {

  max-width:270px;

  color:#fff;

  font-size:
    clamp(16px,1.35vw,23px);

  font-weight:600;

  line-height:1.02;

  letter-spacing:-.01em;

}



.software08-dev {

  padding:
    7px 9px;

  border:
    1px solid rgba(241,90,36,.38);

  color:
    var(--orange);

  font-size:
    clamp(5px,.38vw,7px);

  white-space:nowrap;

}



/* =========================================================
   META
========================================================= */

.software08-record-meta {

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  border-bottom:
    1px solid rgba(255,255,255,.13);

}



.software08-record-meta > div {

  padding:
    clamp(15px,1.5vw,22px)
    14px
    clamp(15px,1.5vw,22px)
    0;

}



.software08-record-meta > div:nth-child(even) {

  padding-left:14px;

  border-left:
    1px solid rgba(255,255,255,.11);

}



.software08-record-meta > div:nth-child(n+3) {

  border-top:
    1px solid rgba(255,255,255,.11);

}



.software08-record-meta span {

  display:block;

  margin-bottom:6px;

  color:
    rgba(255,255,255,.27);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.13em;

}



.software08-record-meta strong {

  color:
    rgba(255,255,255,.78);

  font-size:
    clamp(8px,.64vw,11px);

  font-weight:600;

  letter-spacing:.06em;

}



.software08-record-meta
.software08-orange {

  color:
    var(--orange);

}



/* =========================================================
   VISUAL EVIDENCE
========================================================= */

.software08-image-title {

  display:flex;

  justify-content:space-between;

  gap:20px;

  padding:
    clamp(15px,1.4vw,21px)
    0
    11px;

  color:
    rgba(255,255,255,.27);

  font-size:
    clamp(5px,.4vw,7px);

}



.software08-images {

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:6px;

}



.software08-image {

  position:relative;

  aspect-ratio:
    1 / .78;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:9px;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.11);

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    );

}



.software08-image::before {

  content:"";

  position:absolute;

  left:8px;

  top:8px;

  width:4px;

  height:4px;

  border-radius:50%;

  background:
    var(--orange);

  opacity:.65;

}



.software08-image span {

  position:absolute;

  top:7px;

  right:7px;

  color:
    rgba(255,255,255,.22);

  font-size:6px;

}



.software08-image strong {

  color:
    rgba(255,255,255,.63);

  font-size:
    clamp(6px,.46vw,8px);

  letter-spacing:.08em;

}



.software08-image small {

  margin-top:3px;

  color:
    rgba(255,255,255,.22);

  font-size:5px;

  letter-spacing:.12em;

}



/* =========================================================
   OUTPUT
========================================================= */

.software08-output {

  margin-top:auto;

  padding-top:
    clamp(18px,1.8vw,27px);

}



.software08-output > span {

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.software08-output > div {

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  margin-top:8px;

  padding:
    clamp(13px,1.2vw,18px)
    0;

  border-top:
    1px solid rgba(255,255,255,.13);

  border-bottom:
    1px solid rgba(255,255,255,.13);

}



.software08-output strong {

  color:
    rgba(255,255,255,.78);

  font-size:
    clamp(8px,.66vw,11px);

  font-weight:600;

  letter-spacing:.08em;

}



.software08-output div span {

  color:
    var(--orange);

  font-size:20px;

}



/* =========================================================
   VALUE STRIP
========================================================= */

.software08-value {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

}



.software08-value > div {

  min-width:0;

  padding:
    clamp(14px,1.5vw,21px)
    clamp(15px,1.5vw,23px);

  border-right:
    1px solid rgba(255,255,255,.13);

}



.software08-value > div:first-child {

  padding-left:0;

}



.software08-value > div:last-child {

  border-right:0;

}



.software08-value span {

  display:block;

  margin-bottom:7px;

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

  letter-spacing:.13em;

}



.software08-value strong {

  display:block;

  margin-bottom:5px;

  color:
    rgba(255,255,255,.70);

  font-size:
    clamp(7px,.55vw,9px);

  font-weight:600;

  letter-spacing:.08em;

}



.software08-value small {

  color:
    rgba(255,255,255,.29);

  font-size:
    clamp(6px,.48vw,8px);

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .software08-meta {

    display:none;

  }


  .software08-header {

    grid-template-columns:1fr;

    gap:25px;

  }


  .software08-stage {

    display:flex;

    flex-direction:column;

  }


  .software08-vision {

    aspect-ratio:
      16 / 10;

    border-right:0;

    border-bottom:
      1px solid rgba(255,255,255,.15);

  }


  .software08-record {

    min-height:520px;

  }


  .software08-value {

    grid-template-columns:
      repeat(2,1fr);

  }

}
/* =========================================================
   SLIDE 09 — COMMERCIAL MODEL
========================================================= */

.slide-commercial09 {

  background:
    #f3f3f1;

  color:
    #111;

}



/* =========================================================
   BACKGROUND
========================================================= */

.commercial09-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      circle at 75% 46%,
      rgba(241,90,36,.035),
      transparent 33%
    ),

    #f3f3f1;

}



.commercial09-grid {

  opacity:.16;

  background-image:

    linear-gradient(
      rgba(0,0,0,.055) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.055) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

}



/* =========================================================
   TOP RAIL
========================================================= */

.commercial09-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(0,0,0,.14);

}



.commercial09-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(0,0,0,.54);

  font-size:
    clamp(7px,.55vw,10px);

}



.commercial09-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

}



.commercial09-meta {

  color:
    rgba(0,0,0,.28);

  font-size:
    clamp(7px,.5vw,9px);

}



/* =========================================================
   HERO
========================================================= */

.commercial09-hero {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:
    clamp(55px,8vw,145px);

  align-items:end;

  padding:
    clamp(30px,4vh,55px)
    0
    clamp(28px,3.5vh,48px);

}



.commercial09-kicker {

  margin-bottom:
    clamp(11px,1vw,16px);

  color:
    var(--orange);

  font-size:
    clamp(7px,.55vw,10px);

}



.commercial09-title {

  margin:0;

  color:#111;

  font-size:
    clamp(55px,6vw,108px);

  line-height:.82;

  letter-spacing:-.06em;

}



.commercial09-hero-copy {

  max-width:480px;

  padding-bottom:4px;

}



.commercial09-hero-copy p {

  margin:0;

  color:
    rgba(0,0,0,.53);

  font-size:
    clamp(11px,.83vw,14px);

  line-height:1.65;

}



/* =========================================================
   RAAS
========================================================= */

.commercial09-raas {

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:
    clamp(18px,2vw,26px);

  padding-top:
    clamp(15px,1.5vw,20px);

  border-top:
    1px solid rgba(0,0,0,.13);

}



.commercial09-raas span {

  padding:
    6px 8px;

  border:
    1px solid rgba(0,0,0,.18);

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.commercial09-raas strong {

  color:
    rgba(0,0,0,.30);

  font-size:
    clamp(5px,.4vw,7px);

}



/* =========================================================
   PRINCIPLES
========================================================= */

.commercial09-principles {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid rgba(0,0,0,.14);

  border-bottom:
    1px solid rgba(0,0,0,.14);

}



.commercial09-principle {

  min-width:0;

  min-height:
    clamp(230px,25vh,320px);

  padding:
    clamp(22px,2.3vw,36px);

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  border-right:
    1px solid rgba(0,0,0,.14);

}



.commercial09-principle:last-child {

  border-right:0;

}



.commercial09-principle-active {

  background:
    #111;

  color:#fff;

}



/* =========================================================
   PRINCIPLE TOP
========================================================= */

.commercial09-principle-top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

}



.commercial09-principle-top span {

  color:
    var(--orange);

  font-size:
    clamp(6px,.45vw,8px);

  font-weight:600;

  letter-spacing:.13em;

}



.commercial09-principle-top small {

  color:
    rgba(0,0,0,.28);

  font-size:
    clamp(5px,.4vw,7px);

}



.commercial09-principle-active
.commercial09-principle-top small {

  color:
    rgba(255,255,255,.34);

}



/* =========================================================
   PRINCIPLE COPY
========================================================= */

.commercial09-principle h3 {

  margin:
    clamp(25px,2.5vw,38px)
    0
    0;

  color:#111;

  font-size:
    clamp(22px,2.1vw,36px);

  font-weight:600;

  line-height:.93;

  letter-spacing:-.035em;

}



.commercial09-principle-active h3 {

  color:#fff;

}



.commercial09-principle p {

  max-width:320px;

  margin:
    clamp(15px,1.5vw,22px)
    0
    0;

  color:
    rgba(0,0,0,.46);

  font-size:
    clamp(9px,.68vw,12px);

  line-height:1.55;

}



.commercial09-principle-active p {

  color:
    rgba(255,255,255,.46);

}



.commercial09-principle-bottom {

  padding-top:
    clamp(17px,1.8vw,25px);

  color:
    rgba(0,0,0,.27);

  font-size:
    clamp(5px,.4vw,7px);

}



.commercial09-principle-active
.commercial09-principle-bottom {

  color:
    var(--orange);

}



/* =========================================================
   RATE SECTION
========================================================= */

.commercial09-rate {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(220px,.40fr)
    minmax(0,1fr)
    minmax(180px,.28fr);

  gap:
    clamp(35px,5vw,80px);

  align-items:stretch;

  padding:
    clamp(25px,3vh,42px)
    0;

}



/* =========================================================
   RATE HEADING
========================================================= */

.commercial09-rate-heading > span {

  display:block;

  margin-bottom:12px;

  color:
    var(--orange);

  font-size:
    clamp(5px,.42vw,7px);

}



.commercial09-rate-heading h3 {

  margin:0;

  color:#111;

  font-size:
    clamp(25px,2.5vw,42px);

  font-weight:600;

  line-height:.93;

  letter-spacing:-.04em;

}



/* =========================================================
   FACTORS
========================================================= */

.commercial09-factors {

  border-top:
    1px solid rgba(0,0,0,.13);

}



.commercial09-factors > div {

  display:grid;

  grid-template-columns:
    34px 1fr;

  gap:12px;

  align-items:center;

  min-height:
    clamp(30px,3.5vh,43px);

  border-bottom:
    1px solid rgba(0,0,0,.13);

}



.commercial09-factors span {

  color:
    var(--orange);

  font-size:
    clamp(5px,.38vw,7px);

  font-weight:600;

}



.commercial09-factors strong {

  color:
    rgba(0,0,0,.48);

  font-size:
    clamp(5px,.42vw,7px);

}



/* =========================================================
   OUTPUT
========================================================= */

.commercial09-output {

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  min-height:
    clamp(175px,20vh,240px);

  padding:
    clamp(17px,1.8vw,25px);

  background:
    var(--orange);

  color:#fff;

}



.commercial09-output > span {

  color:
    rgba(255,255,255,.63);

  font-size:
    clamp(5px,.4vw,7px);

}



.commercial09-output > strong {

  color:#fff;

  font-size:
    clamp(28px,2.8vw,48px);

  font-weight:600;

  line-height:.83;

  letter-spacing:-.05em;

}



.commercial09-output-line {

  width:100%;

  height:1px;

  background:
    rgba(255,255,255,.28);

}



.commercial09-output small {

  color:
    rgba(255,255,255,.57);

  font-size:
    clamp(5px,.38vw,7px);

}



/* =========================================================
   BOTTOM
========================================================= */

.commercial09-bottom {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  gap:18px;

  padding-top:
    clamp(10px,1vw,15px);

  color:
    rgba(0,0,0,.28);

  font-size:
    clamp(5px,.4vw,7px);

}



.commercial09-bottom-left {

  display:flex;

  align-items:center;

  gap:9px;

}



.commercial09-bottom-left span {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);

}



.commercial09-bottom-line {

  flex:1;

  height:1px;

  background:
    rgba(0,0,0,.11);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .commercial09-hero {

    padding:
      23px 0 26px;

  }


  .commercial09-title {

    font-size:
      clamp(48px,5vw,82px);

  }


  .commercial09-principle {

    min-height:210px;

  }


  .commercial09-rate {

    padding:
      20px 0;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .commercial09-meta {

    display:none;

  }


  .commercial09-hero {

    grid-template-columns:1fr;

    gap:30px;

  }


  .commercial09-principles {

    grid-template-columns:1fr;

  }


  .commercial09-principle {

    min-height:220px;

    border-right:0;

    border-bottom:
      1px solid rgba(0,0,0,.14);

  }


  .commercial09-rate {

    grid-template-columns:1fr;

    gap:30px;

  }


  .commercial09-output {

    min-height:180px;

  }

}
/* =========================================================
   SLIDE 10 — SITE REQUIREMENTS / SETUP
========================================================= */

.slide-site10 {

  background:
    #0b0b0b;

}



/* =========================================================
   BACKGROUND
========================================================= */

.site10-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      ellipse at 23% 44%,
      rgba(255,255,255,.045),
      transparent 34%
    ),

    #0b0b0b;

}



.site10-grid {

  opacity:.10;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.site10-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.site10-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.64);

  font-size:
    clamp(7px,.55vw,10px);

}



.site10-dot {

  width:6px;

  height:6px;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 10px rgba(241,90,36,.65);

}



.site10-meta {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(7px,.5vw,9px);

}



/* =========================================================
   INTRO
========================================================= */

.site10-intro {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(300px,.60fr);

  gap:
    clamp(55px,8vw,140px);

  align-items:end;

  padding:
    clamp(26px,3vh,42px)
    0
    clamp(24px,2.8vh,36px);

}



.site10-kicker {

  margin-bottom:14px;

  color:
    var(--orange);

  font-size:
    clamp(7px,.55vw,10px);

}



.site10-title {

  margin:0;

  color:#fff;

  font-size:
    clamp(42px,4.8vw,78px);

  line-height:.87;

  letter-spacing:-.055em;

}



.site10-intro-copy {

  max-width:420px;

  margin:0;

  color:
    rgba(255,255,255,.48);

  font-size:
    clamp(11px,.82vw,14px);

  line-height:1.65;

}



/* =========================================================
   MAIN STAGE
========================================================= */

.site10-stage {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1.16fr)
    minmax(340px,.66fr);

  gap:
    clamp(34px,4vw,58px);

  align-items:stretch;

  border-top:
    1px solid rgba(255,255,255,.12);

  padding-top:
    clamp(20px,2.3vh,30px);

}



/* =========================================================
   YARD PANEL
========================================================= */

.site10-yard {

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.13);

  background:
    #0f0f0f;

}



.site10-yard-top,
.site10-yard-bottom {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:
    12px 14px;

  color:
    rgba(255,255,255,.29);

  font-size:
    clamp(5px,.4vw,7px);

}



.site10-yard-top {

  border-bottom:
    1px solid rgba(255,255,255,.12);

}



.site10-yard-bottom {

  border-top:
    1px solid rgba(255,255,255,.12);

}



.site10-yard-bottom > div {

  display:flex;

  align-items:center;

  gap:8px;

}



.site10-yard-bottom > div:first-child > span {

  width:4px;

  height:4px;

  border-radius:50%;

  background:
    var(--orange);

}



.site10-yard-bottom > i {

  flex:1;

  height:1px;

  background:
    rgba(255,255,255,.10);

}



/* =========================================================
   CANVAS
========================================================= */

.site10-canvas {

  position:relative;

  width:100%;

  aspect-ratio:
    1000 / 630;

  overflow:hidden;

  background:

    linear-gradient(
      rgba(255,255,255,.04) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.04) 1px,
      transparent 1px
    ),

    #0e0e0e;

  background-size:
    56px 56px,
    56px 56px,
    auto;

}



/* =========================================================
   ZONE
========================================================= */

.site10-zone {

  position:absolute;

  left:4%;

  top:8%;

  width:50%;

  height:74%;

  border:
    1px dashed rgba(241,90,36,.35);

  background:
    rgba(241,90,36,.025);

}



.site10-zone-label {

  position:absolute;

  left:14px;

  top:12px;

  display:flex;

  flex-direction:column;

  gap:5px;

}



.site10-zone-label strong {

  color:
    rgba(255,255,255,.84);

  font-size:
    clamp(8px,.6vw,10px);

  font-weight:600;

  letter-spacing:.08em;

}



.site10-zone-label span {

  color:
    rgba(255,255,255,.30);

  font-size:
    clamp(5px,.42vw,7px);

  font-weight:600;

  letter-spacing:.12em;

}



.site10-operator-zone {

  position:absolute;

  left:14px;

  bottom:18px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  width:76px;

  height:60px;

  padding:8px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.025);

}



.site10-operator-zone span {

  color:
    rgba(255,255,255,.34);

  font-size:6px;

  font-weight:600;

  letter-spacing:.12em;

}



.site10-operator-zone strong {

  color:
    rgba(255,255,255,.82);

  font-size:11px;

  font-weight:600;

  letter-spacing:.07em;

}



.site10-control-point {

  position:absolute;

  left:108px;

  bottom:34px;

  width:10px;

  height:10px;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 14px rgba(241,90,36,.55);

}



/* =========================================================
   EQUIPMENT / PUMP
========================================================= */

.site10-equipment {

  position:absolute;

  left:5%;

  top:12%;

  width:18%;

}



.site10-equipment-label {

  margin-bottom:9px;

  display:flex;

  flex-direction:column;

  gap:4px;

}



.site10-equipment-label strong {

  color:
    rgba(255,255,255,.76);

  font-size:
    clamp(7px,.55vw,9px);

  font-weight:600;

}



.site10-equipment-label span {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.12em;

}



.site10-equipment-box {

  display:flex;

  align-items:flex-end;

  justify-content:flex-start;

  width:100%;

  height:96px;

  padding:10px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

}



.site10-equipment-box small {

  color:
    rgba(255,255,255,.33);

  font-size:
    clamp(5px,.38vw,6px);

  font-weight:600;

  letter-spacing:.12em;

}



.site10-pump {

  position:absolute;

  left:23%;

  top:30%;

  width:62px;

  height:62px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:7px;

}



.site10-pump-body {

  width:62px;

  height:62px;

  border:
    1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  box-shadow:
    0 8px 20px rgba(0,0,0,.22);

}



.site10-pump-label {

  color:
    rgba(255,255,255,.38);

  font-size:
    clamp(5px,.4vw,7px);

}



/* =========================================================
   LINES
========================================================= */

.site10-service-line {

  position:absolute;

  left:18.5%;

  top:25%;

  width:9%;

  height:12%;

  border-left:
    2px solid rgba(243,243,241,.22);

  border-bottom:
    2px solid rgba(243,243,241,.22);

  border-bottom-left-radius:18px;

}



.site10-robot-line {

  position:absolute;

  left:28.9%;

  top:39.4%;

  width:18.8%;

  height:11%;

  border-left:
    2px solid rgba(243,243,241,.28);

  border-bottom:
    2px solid rgba(243,243,241,.28);

  border-bottom-left-radius:18px;

}



/* =========================================================
   ROBOT
========================================================= */

.site10-robot {

  position:absolute;

  left:28.5%;

  top:39%;

  width:82px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:7px;

  transform:
    translate(0,0);

}



.site10-robot-body {

  width:82px;

  height:52px;

  border:
    1px solid rgba(255,255,255,.20);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 12px 24px rgba(0,0,0,.26);

}



.site10-robot-label {

  color:
    rgba(255,255,255,.40);

  font-size:
    clamp(5px,.4vw,7px);

}



/* one-time-ish simple movement */
.slide-site10.is-active .site10-robot {

  animation:
    site10RobotMove 2.1s cubic-bezier(.16,1,.3,1) .45s 1 both;

}



@keyframes site10RobotMove {

  0% {

    transform:
      translate(0,0);

  }

  60% {

    transform:
      translate(140px,0);

  }

  100% {

    transform:
      translate(140px,0);

  }

}



/* =========================================================
   STAGING / CONTAINERS
========================================================= */

.site10-staging {

  position:absolute;

  right:5%;

  top:11%;

  width:42%;

  height:78%;

}



.site10-staging-head {

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:10px;

}



.site10-staging-head strong {

  color:
    rgba(255,255,255,.82);

  font-size:
    clamp(8px,.6vw,10px);

  font-weight:600;

}



.site10-staging-head span {

  color:
    rgba(255,255,255,.27);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.12em;

}



.site10-container {

  position:absolute;

  left:0;

  width:100%;

  height:26%;

  border:
    1px solid rgba(255,255,255,.15);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.018)
    );

}



.site10-container-1 { top:0; }
.site10-container-2 { top:35%; }
.site10-container-3 { bottom:0; }

.site10-entry {

  position:absolute;

  left:0;

  top:0;

  bottom:0;

  width:18px;

  border-right:
    1px solid rgba(241,90,36,.26);

  background:
    rgba(241,90,36,.03);

}



.site10-entry span {

  position:absolute;

  left:4px;

  top:50%;

  width:10px;

  height:1px;

  background:
    var(--orange);

}



.site10-container-ribs {

  position:absolute;

  inset:0 0 0 22px;

  display:grid;

  grid-template-columns:
    repeat(8,1fr);

}



.site10-container-ribs i {

  border-right:
    1px solid rgba(255,255,255,.055);

}



.site10-container-meta {

  position:absolute;

  right:12px;

  bottom:10px;

  display:flex;

  align-items:center;

  gap:8px;

}



.site10-container-meta span {

  color:
    var(--orange);

  font-size:
    clamp(6px,.44vw,8px);

  font-weight:600;

}



.site10-container-meta strong {

  color:
    rgba(255,255,255,.50);

  font-size:
    clamp(6px,.44vw,8px);

  font-weight:600;

  letter-spacing:.09em;

}



/* =========================================================
   ROUTE / STATUS
========================================================= */

.site10-route {

  position:absolute;

  left:4%;

  bottom:8px;

  display:flex;

  align-items:center;

  gap:8px;

}



.site10-route span {

  color:
    rgba(255,255,255,.26);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

}



.site10-route strong {

  color:
    rgba(255,255,255,.58);

  font-size:
    clamp(6px,.44vw,8px);

  font-weight:600;

}



.site10-route i {

  width:110px;

  height:1px;

  background:
    rgba(255,255,255,.12);

  position:relative;

}



.site10-route i::after {

  content:"";

  position:absolute;

  right:0;

  top:-2px;

  width:5px;

  height:5px;

  border-top:
    1px solid rgba(255,255,255,.22);

  border-right:
    1px solid rgba(255,255,255,.22);

  transform:
    rotate(45deg);

}



.site10-status {

  position:absolute;

  right:14px;

  bottom:12px;

  display:flex;

  gap:6px;

  color:
    rgba(255,255,255,.30);

  font-size:
    clamp(5px,.4vw,7px);

}



.site10-status strong {

  color:
    var(--orange);

  font-size:inherit;

  font-weight:600;

}



/* =========================================================
   SIDE PANEL
========================================================= */

.site10-side {

  display:flex;

  flex-direction:column;

  gap:
    clamp(18px,2vw,28px);

}



.site10-side-top {

  display:flex;

  flex-direction:column;

  gap:8px;

  padding-bottom:14px;

  border-bottom:
    1px solid rgba(255,255,255,.13);

}



.site10-side-top span {

  color:
    var(--orange);

  font-size:
    clamp(6px,.44vw,8px);

}



.site10-side-top strong {

  color:#fff;

  font-size:
    clamp(20px,1.8vw,32px);

  font-weight:600;

  line-height:.94;

  letter-spacing:-.03em;

}



/* =========================================================
   REQUIREMENTS
========================================================= */

.site10-requirements {

  display:grid;

  gap:10px;

}



.site10-req {

  display:grid;

  grid-template-columns:
    34px 1fr;

  gap:14px;

  align-items:center;

  min-height:62px;

  padding:
    14px 14px 14px 16px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.02);

}



.site10-req-highlight {

  border-color:
    rgba(241,90,36,.28);

  background:
    rgba(241,90,36,.055);

}



.site10-req > span {

  color:
    var(--orange);

  font-size:
    clamp(8px,.62vw,11px);

  font-weight:600;

  letter-spacing:.10em;

}



.site10-req strong {

  display:block;

  color:
    rgba(255,255,255,.88);

  font-size:
    clamp(10px,.78vw,14px);

  font-weight:600;

  line-height:1.05;

  letter-spacing:.04em;

}



.site10-req small {

  display:block;

  margin-top:6px;

  color:
    rgba(255,255,255,.46);

  font-size:
    clamp(7px,.56vw,10px);

  font-weight:600;

  letter-spacing:.09em;

}



/* =========================================================
   ROLES
========================================================= */

.site10-roles {

  display:grid;

  gap:12px;

  margin-top:auto;

}



.site10-role {

  padding:
    15px 16px;

  border-top:
    1px solid rgba(255,255,255,.12);

  border-bottom:
    1px solid rgba(255,255,255,.12);

}



.site10-role-head {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:10px;

}



.site10-role-head strong {

  color:#fff;

  font-size:
    clamp(9px,.7vw,12px);

  font-weight:600;

  letter-spacing:.08em;

}



.site10-role-head span {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(5px,.4vw,7px);

}



.site10-role p {

  margin:0;

  color:
    rgba(255,255,255,.42);

  font-size:
    clamp(8px,.62vw,11px);

  line-height:1.55;

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .site10-intro {

    padding:
      22px 0 20px;

  }


  .site10-stage {

    gap:28px;

  }


  .site10-side-top strong {

    font-size:
      clamp(18px,1.5vw,26px);

  }


  .site10-req {

    min-height:56px;

    padding:12px 12px 12px 14px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .site10-meta {

    display:none;

  }


  .site10-intro {

    grid-template-columns:1fr;

    gap:24px;

  }


  .site10-stage {

    grid-template-columns:1fr;

  }


  .site10-canvas {

    aspect-ratio:
      1000 / 760;

  }


  .site10-side {

    gap:16px;

  }

}
/* =========================================================
   SLIDE 11 — IMPLEMENTATION / PILOT
========================================================= */

.slide-implementation11 {

  background:
    #f3f3f1;

  color:
    #111;

}



/* =========================================================
   BACKGROUND
========================================================= */

.implementation11-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      circle at 74% 47%,
      rgba(241,90,36,.035),
      transparent 33%
    ),

    #f3f3f1;

}



.implementation11-grid {

  opacity:.14;

  background-image:

    linear-gradient(
      rgba(0,0,0,.055) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.055) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.implementation11-top {

  position:relative;

  z-index:20;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(0,0,0,.14);

}



.implementation11-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(0,0,0,.53);

  font-size:
    clamp(7px,.55vw,10px);

}



.implementation11-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

}



.implementation11-meta {

  color:
    rgba(0,0,0,.27);

  font-size:
    clamp(7px,.5vw,9px);

}



/* =========================================================
   HEADER
========================================================= */

.implementation11-header {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    clamp(60px,8vw,145px);

  align-items:end;

  padding:
    clamp(27px,3.2vh,44px)
    0
    clamp(25px,3vh,40px);

}



.implementation11-kicker {

  margin-bottom:14px;

  color:
    var(--orange);

  font-size:
    clamp(7px,.55vw,10px);

}



.implementation11-title {

  margin:0;

  color:#111;

  font-size:
    clamp(42px,4.6vw,82px);

  line-height:.87;

  letter-spacing:-.055em;

}



.implementation11-header-copy {

  max-width:500px;

}



.implementation11-header-copy > p {

  margin:0;

  color:
    rgba(0,0,0,.52);

  font-size:
    clamp(11px,.82vw,14px);

  line-height:1.65;

}



/* =========================================================
   DURATION
========================================================= */

.implementation11-duration {

  display:grid;

  grid-template-columns:
    auto auto 1fr;

  gap:12px;

  align-items:baseline;

  margin-top:
    clamp(18px,2vw,27px);

  padding-top:
    clamp(14px,1.5vw,20px);

  border-top:
    1px solid rgba(0,0,0,.13);

}



.implementation11-duration > span {

  color:
    rgba(0,0,0,.34);

  font-size:
    clamp(5px,.4vw,7px);

}



.implementation11-duration strong {

  color:
    var(--orange);

  font-size:
    clamp(18px,1.6vw,27px);

  font-weight:600;

}



.implementation11-duration small {

  color:
    rgba(0,0,0,.30);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.12em;

}



/* =========================================================
   TIMELINE
========================================================= */

.implementation11-timeline {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  border-top:
    1px solid rgba(0,0,0,.14);

  border-bottom:
    1px solid rgba(0,0,0,.14);

}



.implementation11-line {

  position:absolute;

  z-index:0;

  left:4%;

  right:4%;

  top:39px;

  height:1px;

  background:

    linear-gradient(
      90deg,
      rgba(241,90,36,.75),
      rgba(241,90,36,.22)
    );

}



/* =========================================================
   PHASE
========================================================= */

.implementation11-phase {

  position:relative;

  z-index:2;

  min-width:0;

  min-height:
    clamp(310px,34vh,405px);

  display:flex;

  flex-direction:column;

  padding:
    19px
    clamp(14px,1.5vw,24px)
    22px;

  border-right:
    1px solid rgba(0,0,0,.11);

  background:
    rgba(243,243,241,.95);

}



.implementation11-phase:last-child {

  border-right:0;

}



.implementation11-phase-active {

  background:
    #111;

  color:#fff;

}



.implementation11-final {

  background:
    #e8e8e5;

}



/* =========================================================
   NODE
========================================================= */

.implementation11-node {

  position:relative;

  z-index:3;

  width:40px;

  height:40px;

  display:grid;

  place-items:center;

  margin-bottom:
    clamp(20px,2.2vw,30px);

  border:
    1px solid rgba(0,0,0,.20);

  border-radius:50%;

  background:
    #f3f3f1;

  color:
    var(--orange);

  font-size:
    clamp(6px,.44vw,8px);

  font-weight:600;

}



.implementation11-phase-active
.implementation11-node {

  border-color:
    var(--orange);

  background:
    var(--orange);

  color:#fff;

}



.implementation11-final
.implementation11-node {

  border-color:
    var(--orange);

  background:
    var(--orange);

  color:#fff;

}



/* =========================================================
   TOP LABEL
========================================================= */

.implementation11-phase-top {

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  padding-bottom:10px;

  margin-bottom:
    clamp(16px,1.7vw,24px);

  border-bottom:
    1px solid rgba(0,0,0,.10);

}



.implementation11-phase-top span {

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.implementation11-phase-top strong {

  color:
    rgba(0,0,0,.36);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.10em;

}



.implementation11-phase-active
.implementation11-phase-top {

  border-color:
    rgba(255,255,255,.13);

}



.implementation11-phase-active
.implementation11-phase-top strong {

  color:
    rgba(255,255,255,.37);

}



/* =========================================================
   COPY
========================================================= */

.implementation11-phase h3 {

  margin:0;

  color:#111;

  font-size:
    clamp(20px,1.75vw,30px);

  font-weight:600;

  line-height:.92;

  letter-spacing:-.035em;

}



.implementation11-phase-active h3 {

  color:#fff;

}



.implementation11-phase > p {

  margin:
    clamp(14px,1.4vw,20px)
    0
    0;

  color:
    rgba(0,0,0,.47);

  font-size:
    clamp(8px,.62vw,10.5px);

  line-height:1.55;

}



.implementation11-phase-active > p {

  color:
    rgba(255,255,255,.46);

}



/* =========================================================
   ITEMS
========================================================= */

.implementation11-items {

  margin-top:
    clamp(17px,1.8vw,25px);

}



.implementation11-items span {

  position:relative;

  display:block;

  padding:
    8px 0
    8px 15px;

  border-top:
    1px solid rgba(0,0,0,.08);

  color:
    rgba(0,0,0,.40);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  line-height:1.25;

  letter-spacing:.08em;

}



.implementation11-items span::before {

  content:"";

  position:absolute;

  left:0;

  top:50%;

  width:6px;

  height:1px;

  background:
    var(--orange);

}



.implementation11-phase-active
.implementation11-items span {

  border-color:
    rgba(255,255,255,.10);

  color:
    rgba(255,255,255,.46);

}



/* =========================================================
   OUTPUT
========================================================= */

.implementation11-output {

  margin-top:auto;

  padding-top:
    clamp(16px,1.7vw,24px);

  display:flex;

  flex-direction:column;

  gap:6px;

}



.implementation11-output small {

  color:
    rgba(0,0,0,.26);

  font-size:
    clamp(5px,.38vw,6px);

}



.implementation11-output strong {

  color:
    rgba(0,0,0,.67);

  font-size:
    clamp(6px,.48vw,8px);

  font-weight:600;

  line-height:1.25;

  letter-spacing:.08em;

}



.implementation11-phase-active
.implementation11-output small {

  color:
    rgba(255,255,255,.28);

}



.implementation11-phase-active
.implementation11-output strong {

  color:
    var(--orange);

}



/* =========================================================
   KPI STRIP
========================================================= */

.implementation11-kpis {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    minmax(180px,1.2fr)
    repeat(5,1fr);

  border-bottom:
    1px solid rgba(0,0,0,.14);

}



.implementation11-kpis > div {

  min-width:0;

  padding:
    clamp(13px,1.4vw,20px);

  border-right:
    1px solid rgba(0,0,0,.11);

}



.implementation11-kpis > div:last-child {

  border-right:0;

}



.implementation11-kpi-title {

  display:flex;

  flex-direction:column;

  gap:6px;

  padding-left:0 !important;

}



.implementation11-kpi-title span {

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.implementation11-kpi-title strong {

  color:
    rgba(0,0,0,.62);

  font-size:
    clamp(7px,.53vw,9px);

  font-weight:600;

}



.implementation11-kpis > div:not(.implementation11-kpi-title)
span {

  display:block;

  margin-bottom:6px;

  color:
    var(--orange);

  font-size:
    clamp(5px,.38vw,6px);

  font-weight:600;

}



.implementation11-kpis > div:not(.implementation11-kpi-title)
strong {

  color:
    rgba(0,0,0,.46);

  font-size:
    clamp(5px,.42vw,7px);

  font-weight:600;

  letter-spacing:.08em;

}



/* =========================================================
   BOTTOM
========================================================= */

.implementation11-bottom {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  gap:18px;

  padding-top:
    clamp(11px,1.2vw,17px);

  color:
    rgba(0,0,0,.27);

  font-size:
    clamp(5px,.38vw,7px);

}



.implementation11-bottom-line {

  flex:1;

  height:1px;

  background:
    rgba(0,0,0,.11);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .implementation11-header {

    padding:
      20px 0 22px;

  }


  .implementation11-title {

    font-size:
      clamp(38px,4vw,66px);

  }


  .implementation11-phase {

    min-height:285px;

  }


  .implementation11-phase > p {

    font-size:
      clamp(7px,.54vw,9px);

  }


  .implementation11-items span {

    padding:
      6px 0 6px 14px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .implementation11-meta {

    display:none;

  }


  .implementation11-header {

    grid-template-columns:1fr;

    gap:25px;

  }


  .implementation11-timeline {

    grid-template-columns:1fr;

  }


  .implementation11-line {

    display:none;

  }


  .implementation11-phase {

    min-height:300px;

    border-right:0;

    border-bottom:
      1px solid rgba(0,0,0,.12);

  }


  .implementation11-kpis {

    grid-template-columns:
      repeat(2,1fr);

  }


  .implementation11-kpi-title {

    grid-column:
      1 / -1;

  }

}
/* =========================================================
   SLIDE 12 — PILOT KPIs
========================================================= */

.slide-kpi12 {

  background:
    #0d0d0d;

}



/* =========================================================
   BACKGROUND
========================================================= */

.kpi12-bg {

  position:absolute;

  inset:0;

  z-index:0;

  background:

    radial-gradient(
      circle at 51% 48%,
      rgba(241,90,36,.035),
      transparent 36%
    ),

    #0d0d0d;

}



.kpi12-grid {

  opacity:.10;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP
========================================================= */

.kpi12-top {

  position:relative;

  z-index:20;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.kpi12-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.65);

  font-size:
    clamp(7px,.55vw,10px);

}



.kpi12-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 10px rgba(241,90,36,.65);

}



.kpi12-meta {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(7px,.5vw,9px);

}



/* =========================================================
   HEADER
========================================================= */

.kpi12-header {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:
    clamp(60px,8vw,145px);

  align-items:end;

  padding:
    clamp(25px,3vh,40px)
    0
    clamp(22px,2.6vh,34px);

}



.kpi12-kicker {

  margin-bottom:14px;

  color:
    var(--orange);

  font-size:
    clamp(7px,.55vw,10px);

}



.kpi12-title {

  margin:0;

  color:#fff;

  font-size:
    clamp(42px,4.7vw,82px);

  line-height:.86;

  letter-spacing:-.055em;

}



.kpi12-header-copy {

  max-width:510px;

}



.kpi12-header-copy > p {

  margin:0;

  color:
    rgba(255,255,255,.49);

  font-size:
    clamp(11px,.82vw,14px);

  line-height:1.65;

}



/* =========================================================
   CONTEXT
========================================================= */

.kpi12-context {

  margin-top:
    clamp(18px,2vw,27px);

  padding-top:
    clamp(14px,1.5vw,20px);

  border-top:
    1px solid rgba(255,255,255,.12);

}



.kpi12-context > span {

  display:block;

  margin-bottom:9px;

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.kpi12-context > div {

  display:flex;

  align-items:center;

  gap:10px;

}



.kpi12-context strong {

  color:
    rgba(255,255,255,.70);

  font-size:
    clamp(7px,.55vw,9px);

  font-weight:600;

  letter-spacing:.08em;

}



.kpi12-context i {

  width:1px;

  height:13px;

  background:
    rgba(255,255,255,.16);

}



.kpi12-context small {

  display:block;

  margin-top:8px;

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(7px,.52vw,9px);

}



/* =========================================================
   KPI GRID
========================================================= */

.kpi12-stage {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid rgba(255,255,255,.14);

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



/* =========================================================
   CARD
========================================================= */

.kpi12-card {

  min-width:0;

  display:flex;

  flex-direction:column;

  padding:
    clamp(18px,1.9vw,29px);

  border-right:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.012);

}



.kpi12-card:last-child {

  border-right:0;

}



.kpi12-card-active {

  background:

    linear-gradient(
      145deg,
      rgba(241,90,36,.12),
      rgba(241,90,36,.025)
    );

}



/* =========================================================
   CARD TOP
========================================================= */

.kpi12-card-top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding-bottom:12px;

  border-bottom:
    1px solid rgba(255,255,255,.10);

}



.kpi12-card-top > span {

  color:
    var(--orange);

  font-size:
    clamp(6px,.45vw,8px);

  font-weight:600;

}



.kpi12-card-top small {

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(5px,.4vw,7px);

}



/* =========================================================
   CARD TITLE
========================================================= */

.kpi12-card h3 {

  margin:
    clamp(19px,2vw,29px)
    0
    0;

  color:#fff;

  font-size:
    clamp(20px,1.8vw,31px);

  font-weight:600;

  line-height:.93;

  letter-spacing:-.035em;

}



/* =========================================================
   MEASURES
========================================================= */

.kpi12-measures {

  margin-top:
    clamp(18px,1.8vw,26px);

}



.kpi12-measures > div {

  display:flex;

  flex-direction:column;

  gap:5px;

  padding:
    clamp(9px,1vw,14px)
    0;

  border-top:
    1px solid rgba(255,255,255,.09);

}



.kpi12-measures span {

  color:
    rgba(255,255,255,.32);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

  letter-spacing:.09em;

}



.kpi12-measures strong {

  color:
    rgba(255,255,255,.74);

  font-size:
    clamp(7px,.56vw,10px);

  font-weight:600;

  letter-spacing:.06em;

}



.kpi12-card-active
.kpi12-measures strong {

  color:#fff;

}



/* =========================================================
   CARD BOTTOM
========================================================= */

.kpi12-card-bottom {

  margin-top:auto;

  padding-top:
    clamp(14px,1.5vw,21px);

  color:
    rgba(255,255,255,.22);

  font-size:
    clamp(5px,.38vw,6px);

}



/* =========================================================
   CAMERA STRIP
========================================================= */

.kpi12-camera {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    minmax(225px,.75fr)
    1.25fr;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.kpi12-camera-title {

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:8px;

  padding:
    clamp(14px,1.5vw,21px)
    clamp(17px,1.8vw,27px)
    clamp(14px,1.5vw,21px)
    0;

  border-right:
    1px solid rgba(255,255,255,.12);

}



.kpi12-camera-title span {

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

}



.kpi12-camera-title strong {

  color:
    rgba(255,255,255,.70);

  font-size:
    clamp(11px,.9vw,15px);

  font-weight:600;

  line-height:1.1;

}



/* =========================================================
   CAMERA METRICS
========================================================= */

.kpi12-camera-metrics {

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

}



.kpi12-camera-metrics > div {

  padding:
    clamp(14px,1.5vw,21px);

  border-right:
    1px solid rgba(255,255,255,.10);

}



.kpi12-camera-metrics > div:last-child {

  border-right:0;

}



.kpi12-camera-metrics span {

  display:block;

  margin-bottom:8px;

  color:
    var(--orange);

  font-size:
    clamp(5px,.4vw,7px);

  font-weight:600;

}



.kpi12-camera-metrics strong {

  color:
    rgba(255,255,255,.45);

  font-size:
    clamp(6px,.48vw,8px);

  font-weight:600;

  line-height:1.35;

  letter-spacing:.07em;

}



/* =========================================================
   BOTTOM
========================================================= */

.kpi12-bottom {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  gap:18px;

  padding-top:
    clamp(11px,1.2vw,17px);

  color:
    rgba(255,255,255,.24);

  font-size:
    clamp(5px,.38vw,7px);

}



.kpi12-bottom-left {

  display:flex;

  align-items:center;

  gap:9px;

}



.kpi12-bottom-left span {

  width:5px;

  height:5px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

}



.kpi12-bottom-line {

  flex:1;

  height:1px;

  background:
    rgba(255,255,255,.10);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .kpi12-header {

    padding:
      20px 0 21px;

  }


  .kpi12-title {

    font-size:
      clamp(38px,4vw,66px);

  }


  .kpi12-card {

    padding:
      16px 20px;

  }


  .kpi12-card h3 {

    margin-top:16px;

  }


  .kpi12-measures {

    margin-top:14px;

  }


  .kpi12-measures > div {

    padding:
      7px 0;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .kpi12-meta {

    display:none;

  }


  .kpi12-header {

    grid-template-columns:1fr;

    gap:25px;

  }


  .kpi12-stage {

    grid-template-columns:
      repeat(2,1fr);

  }


  .kpi12-camera {

    grid-template-columns:1fr;

  }


  .kpi12-camera-title {

    border-right:0;

    border-bottom:
      1px solid rgba(255,255,255,.12);

  }


  .kpi12-camera-metrics {

    grid-template-columns:
      repeat(2,1fr);

  }

}
/* =========================================================
   KPI 12 — CLEANER OPTIONAL CAMERA SECTION
========================================================= */

.kpi12-camera {

  display:block;

  padding:
    clamp(18px,2vw,28px)
    0;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}



.kpi12-camera-title {

  display:flex;

  flex-direction:row;

  justify-content:space-between;

  align-items:baseline;

  gap:30px;

  padding:
    0 0
    clamp(14px,1.5vw,20px);

  border-right:0;

  border-bottom:
    1px solid rgba(255,255,255,.11);

}



.kpi12-camera-title span {

  font-size:
    clamp(8px,.52vw,10px);

}



.kpi12-camera-title strong {

  font-size:
    clamp(14px,1vw,18px);

}



.kpi12-camera-metrics {

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    clamp(8px,.8vw,14px);

  padding-top:
    clamp(14px,1.4vw,20px);

}



.kpi12-camera-metrics > div {

  min-height:
    clamp(74px,7vh,94px);

  padding:
    clamp(13px,1.3vw,18px);

  border:
    1px solid rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.018);

}



.kpi12-camera-metrics > div:last-child {

  border-right:
    1px solid rgba(255,255,255,.10);

}



.kpi12-camera-metrics span {

  margin-bottom:9px;

  font-size:
    clamp(7px,.46vw,9px);

}



.kpi12-camera-metrics strong {

  font-size:
    clamp(8px,.58vw,11px);

  line-height:1.35;

}
/* =========================================================
   GLOBAL PRESENTATION READABILITY PASS
========================================================= */

/*
   Small technical labels throughout the deck.
   These were previously often 5–8px.
*/

.slide .mcs-label {

  font-size:
    clamp(8px,.56vw,11px) !important;

  line-height:
    1.15;

}



/*
   General body copy.
*/

.slide p {

  font-size:
    clamp(12px,.84vw,15px);

  line-height:
    1.6;

}



/*
   Generic small text should still be readable
   when the deck is projected.
*/

.slide small {

  font-size:
    clamp(8px,.52vw,10px);

  line-height:
    1.35;

}



/*
   Small numbered/index text.
*/

.slide
:is(
  .kpi12-card-top > span,
  .implementation11-node,
  .commercial09-principle-top span,
  .process04-number,
  .product03-callout-number,
  .benefits02-tab-number
) {

  font-size:
    clamp(9px,.6vw,12px);

}



/*
   KPI values and other compact informational text.
*/

.kpi12-measures span {

  font-size:
    clamp(7px,.48vw,9px);

}



.kpi12-measures strong {

  font-size:
    clamp(10px,.67vw,13px);

}



/*
   KPI card headings.
*/

.kpi12-card h3 {

  font-size:
    clamp(24px,2vw,36px);

}



/*
   KPI category labels.
*/

.kpi12-card-top small {

  font-size:
    clamp(7px,.48vw,9px);

}



/*
   KPI source / footer text.
*/

.kpi12-card-bottom {

  font-size:
    clamp(7px,.46vw,9px);

}
/* =========================================================
   KPI 12 — SIMPLIFIED / LESS LINE NOISE
========================================================= */

/* tone down the background grid on this slide */
.kpi12-grid {
  opacity: .06;
}

/* header context a bit cleaner */
.kpi12-context {
  border-top: 0;
  padding-top: 12px;
}

/* main KPI area: cards separated by gap instead of lots of lines */
.kpi12-stage {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

/* card container */
.kpi12-card {
  border: 1px solid rgba(255,255,255,.10);
  border-right: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.015);
  padding: 20px;
}

.kpi12-card-active {
  background: linear-gradient(
    145deg,
    rgba(241,90,36,.14),
    rgba(241,90,36,.04)
  );
}

/* remove small header divider */
.kpi12-card-top {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}

/* slightly larger title */
.kpi12-card h3 {
  font-size: clamp(24px, 2vw, 36px);
  margin: 0 0 18px 0;
}

/* remove all the little measure row lines */
.kpi12-measures {
  margin-top: 0;
}

.kpi12-measures > div {
  border-top: 0;
  padding: 8px 0;
}

.kpi12-measures span {
  font-size: clamp(8px, .52vw, 10px);
  color: rgba(255,255,255,.34);
}

.kpi12-measures strong {
  font-size: clamp(11px, .72vw, 14px);
  color: rgba(255,255,255,.82);
}

/* bottom source text */
.kpi12-card-bottom {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 0;
  font-size: clamp(8px, .52vw, 10px);
  color: rgba(255,255,255,.24);
}

/* OPTIONAL CAMERA SECTION — make it a single clean band */
.kpi12-camera {
  display: block;
  padding: 18px 0 0;
  border-bottom: 0;
}

.kpi12-camera-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 0 0 12px;
  border-right: 0;
  border-bottom: 0;
}

.kpi12-camera-title span {
  font-size: clamp(8px, .52vw, 10px);
}

.kpi12-camera-title strong {
  font-size: clamp(16px, 1.05vw, 20px);
  color: rgba(255,255,255,.78);
}

/* optional metrics as simple pills/cards, no inner ruling */
.kpi12-camera-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 0;
}

.kpi12-camera-metrics > div {
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.018);
}

.kpi12-camera-metrics > div:last-child {
  border-right: 1px solid rgba(255,255,255,.09);
}

.kpi12-camera-metrics span {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(8px, .5vw, 10px);
}

.kpi12-camera-metrics strong {
  font-size: clamp(9px, .62vw, 12px);
  line-height: 1.35;
  color: rgba(255,255,255,.64);
}

/* keep just one clean footer line */
.kpi12-bottom {
  padding-top: 14px;
}

.kpi12-bottom-line {
  background: rgba(255,255,255,.12);
}
/* =========================================================
   KPI 12 — SIMPLIFIED CONTENT VERSION
========================================================= */

.kpi12-grid {
  opacity: .05;
}

.kpi12-stage {
  gap: 16px;
  border-top: 0;
  border-bottom: 0;
}

.kpi12-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.015);
  padding: 22px;
}

.kpi12-card-top {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}

.kpi12-card h3 {
  margin: 0 0 22px 0;
  font-size: clamp(24px,2vw,36px);
}

.kpi12-measures {
  margin-top: 0;
}

.kpi12-measures > div {
  border-top: 0;
  padding: 10px 0;
}

.kpi12-measures span {
  font-size: clamp(8px,.52vw,10px);
  color: rgba(255,255,255,.34);
}

.kpi12-measures strong {
  font-size: clamp(11px,.72vw,14px);
  color: rgba(255,255,255,.82);
}

.kpi12-card-bottom,
.kpi12-camera {
  display: none;
}
/* =========================================================
   GLOBAL DECK — BODY COPY READABILITY
   Increase only explanatory / narrative text.
========================================================= */


/* =========================================================
   DARK SLIDES
========================================================= */

:is(
  .hero01-copy,
  .benefits02-intro,
  .benefits02-detail p,
  .process04-description,
  .software08-intro,
  .site10-intro-copy,
  .site10-role p,
  .kpi12-header-copy > p
) {

  color:
    rgba(255,255,255,.68) !important;

  font-size:
    clamp(13px,.92vw,17px) !important;

  line-height:
    1.58 !important;

}



/* =========================================================
   LIGHT SLIDES
========================================================= */

:is(
  .commercial09-hero-copy p,
  .commercial09-principle p,
  .implementation11-header-copy > p,
  .implementation11-phase > p
) {

  color:
    rgba(0,0,0,.64) !important;

  font-size:
    clamp(13px,.92vw,17px) !important;

  line-height:
    1.58 !important;

}
/* =========================================================
   SLIDE 13 — CLOSING / NEXT STEP
========================================================= */

.slide-closing13 {

  background:
    #090909;

}



/* =========================================================
   BACKGROUND
========================================================= */

.closing13-background {

  position:absolute;

  inset:0;

  z-index:0;

  overflow:hidden;

}



.closing13-background img {

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  transform:
    scale(1.01);

  filter:
    saturate(.80)
    contrast(1.04)
    brightness(.88);

}



/* =========================================================
   OVERLAY
========================================================= */

.closing13-overlay {

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:

    linear-gradient(
      90deg,
      rgba(5,5,5,.91) 0%,
      rgba(5,5,5,.79) 28%,
      rgba(5,5,5,.39) 53%,
      rgba(5,5,5,.25) 72%,
      rgba(5,5,5,.42) 100%
    ),

    linear-gradient(
      0deg,
      rgba(5,5,5,.94) 0%,
      rgba(5,5,5,.58) 22%,
      rgba(5,5,5,.10) 52%,
      rgba(5,5,5,.07) 74%
    ),

    linear-gradient(
      180deg,
      rgba(5,5,5,.47) 0%,
      transparent 30%
    );

}



/* =========================================================
   INNER ABOVE IMAGE
========================================================= */

.slide-closing13 .slide-inner {

  z-index:2;

}



/* =========================================================
   TOP
========================================================= */

.closing13-top {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.24);

}



.closing13-eyebrow {

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.76);

}



.closing13-dot {

  width:6px;

  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:
    var(--orange);

  box-shadow:
    0 0 12px rgba(241,90,36,.7);

}



.closing13-availability {

  color:
    rgba(255,255,255,.52);

}



/* =========================================================
   MAIN
========================================================= */

.closing13-main {

  position:relative;

  z-index:10;

  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1.18fr)
    minmax(350px,.58fr);

  gap:
    clamp(60px,8vw,150px);

  align-items:center;

  padding:
    clamp(35px,4vh,65px)
    0;

}



/* =========================================================
   HEADLINE
========================================================= */

.closing13-kicker {

  margin-bottom:16px;

  color:
    var(--orange);

}



.closing13-title {

  margin:0;

  max-width:800px;

  color:
    #f3f3f1;

  font-size:
    clamp(54px,5.7vw,100px);

  line-height:
    .83;

  letter-spacing:
    -.058em;

}



/* =========================================================
   ACTION PANEL
========================================================= */

.closing13-action {

  align-self:center;

  max-width:470px;

  padding:
    clamp(24px,2.4vw,36px);

  border:
    1px solid rgba(255,255,255,.18);

  background:
    rgba(5,5,5,.34);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

}



.closing13-action-top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding-bottom:15px;

  margin-bottom:
    clamp(20px,2vw,28px);

  border-bottom:
    1px solid rgba(255,255,255,.18);

}



.closing13-action-top > span {

  color:
    rgba(255,255,255,.75);

}



.closing13-action-top small {

  color:
    var(--orange);

}



/* =========================================================
   BODY COPY — deliberately readable
========================================================= */

.closing13-action > p {

  margin:0;

  color:
    rgba(255,255,255,.76);

  font-size:
    clamp(14px,1vw,18px);

  line-height:
    1.62;

}



/* =========================================================
   BUTTON
========================================================= */

.closing13-button {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  margin-top:
    clamp(25px,2.5vw,34px);

  padding:
    20px 22px;

  border:
    1px solid var(--orange);

  background:
    var(--orange);

  color:#fff;

  text-decoration:none;

  transition:
    transform .3s var(--ease),
    background .25s ease;

}



.closing13-button:hover {

  transform:
    translateY(-3px);

  background:
    #ff642c;

}



.closing13-button span {

  font-size:
    clamp(9px,.62vw,12px);

  font-weight:600;

  letter-spacing:
    .11em;

}



.closing13-button strong {

  font-size:20px;

  font-weight:400;

}



/* =========================================================
   PATH
========================================================= */

.closing13-path {

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-top:18px;

  color:
    rgba(255,255,255,.44);

}



.closing13-path > span {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);

}



.closing13-path i {

  width:14px;

  height:1px;

  background:
    rgba(255,255,255,.22);

}



/* =========================================================
   FINAL STRIP
========================================================= */

.closing13-strip {

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid rgba(255,255,255,.22);

  border-bottom:
    1px solid rgba(255,255,255,.22);

  background:
    rgba(5,5,5,.32);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

}



.closing13-strip > div {

  min-width:0;

  min-height:
    clamp(75px,8vh,95px);

  display:flex;

  align-items:center;

  gap:16px;

  padding:
    0
    clamp(16px,2vw,28px);

  border-right:
    1px solid rgba(255,255,255,.16);

}



.closing13-strip > div:last-child {

  border-right:0;

}



.closing13-strip > div > span {

  color:
    var(--orange);

  font-size:
    clamp(8px,.52vw,10px);

  font-weight:600;

}



.closing13-strip > div > div {

  display:flex;

  flex-direction:column;

  gap:6px;

}



.closing13-strip small {

  color:
    rgba(255,255,255,.36);

}



.closing13-strip strong {

  color:
    rgba(255,255,255,.84);

  font-size:
    clamp(10px,.72vw,14px);

  font-weight:600;

  line-height:1.2;

  letter-spacing:.07em;

}



/* =========================================================
   BOTTOM
========================================================= */

.closing13-bottom {

  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  gap:15px;

  padding-top:
    clamp(15px,1.5vw,21px);

  color:
    rgba(255,255,255,.40);

}



.closing13-bottom-left {

  display:flex;

  align-items:center;

  gap:8px;

}



.closing13-bottom-left > span {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);

}



.closing13-bottom-line {

  flex:1;

  height:1px;

  background:
    rgba(255,255,255,.17);

}



/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .closing13-main {

    padding:
      25px 0;

  }


  .closing13-title {

    font-size:
      clamp(48px,5vw,82px);

  }


  .closing13-action {

    padding:
      22px 26px;

  }


  .closing13-strip > div {

    min-height:70px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .closing13-availability {

    display:none;

  }


  .closing13-main {

    grid-template-columns:1fr;

    gap:38px;

  }


  .closing13-title {

    font-size:
      clamp(48px,12vw,68px);

  }


  .closing13-action {

    max-width:100%;

  }


  .closing13-strip {

    grid-template-columns:
      repeat(2,1fr);

  }


  .closing13-strip > div {

    border-bottom:
      1px solid rgba(255,255,255,.16);

  }

}
/* =========================================================
   COMMERCIAL 09 — REMOVE BOTTOM FOOTER
========================================================= */

.commercial09-bottom {
  display: none !important;
}


/* =========================================================
   INVESTOR DECK — PLACEHOLDERS
========================================================= */

.investor-placeholder .slide-inner {

  justify-content:center;

}


.investor-placeholder-number {

  margin-bottom:
    clamp(18px,2vw,30px);

  color:
    var(--orange);

}


.investor-placeholder-title {

  max-width:
    1100px;

  margin:0;

  font-size:
    clamp(48px,7.5vw,132px);

  line-height:.94;

}


/* =========================================================
   PERSISTENT BRAND MARK
========================================================= */

.deck-brand-mark {

  position:fixed;

  z-index:100;

  top:
    clamp(30px,3.5vw,68px);

  right:
    clamp(42px,4.8vw,92px);

  width:
    clamp(108px,9vw,150px);

  pointer-events:none;

  transition:
    opacity .35s var(--ease);

}


.deck-brand-mark img {

  display:block;

  width:100%;

  height:auto;

}


.deck-brand-mark.is-hidden {

  opacity:0;

  visibility:hidden;

}


@media (max-width:800px) {

  .deck-brand-mark {

    width:104px;

  }

}
/* =========================================================
   GLOBAL INVESTOR DECK CHROME
   LOGO + CLICKABLE SLIDE NAV
========================================================= */


/* =========================================================
   BRAND / LOGO
========================================================= */

.mcs-deck-brand {

  position: fixed;

  z-index: 1000;

  top: 20px;

  left: clamp(34px, 4vw, 68px);

  display: block;

  width: clamp(125px, 9vw, 160px);

  line-height: 0;

  opacity: .94;

  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.16,1,.3,1);
}


.mcs-deck-brand img {

  display: block;

  width: 100%;

  height: auto;
}


@media (hover: hover) and (pointer: fine) {

  .mcs-deck-brand:hover {

    opacity: 1;

    transform: translateY(-1px);
  }

}






/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .mcs-deck-nav-link:hover {

    color:
      #fff !important;

    background:
      rgba(255,255,255,.05);
  }


  .mcs-deck-nav-link::after {

    content:
      attr(data-title);

    position: absolute;

    left: 50%;

    bottom: calc(100% + 11px);

    transform:
      translateX(-50%)
      translateY(4px);

    white-space:
      nowrap;

    padding:
      7px 9px;

    color:
      rgba(255,255,255,.82);

    background:
      rgba(5,5,5,.88);

    border:
      1px solid rgba(255,255,255,.12);

    font-size:
      7px;

    font-weight:
      600;

    letter-spacing:
      .13em;

    pointer-events:
      none;

    opacity: 0;

    transition:
      opacity .2s ease,
      transform .25s cubic-bezier(.16,1,.3,1);
  }


  .mcs-deck-nav-link:hover::after {

    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0);
  }

}



/* =========================================================
   OLD KEYBOARD HELP
========================================================= */

.deck-help {

  display: none !important;
}



/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 1100px) {

  .mcs-deck-nav {

    gap: 0;

    padding:
      4px 5px;
  }


  .mcs-deck-nav-link {

    width: 23px;

    font-size:
      6px !important;
  }

}


@media (max-width: 800px) {

  .mcs-deck-brand {

    top: 16px;

    left: 20px;

    width: 120px;
  }


  .mcs-deck-nav {

    display: none;
  }

}/* =========================================================
   INVESTOR NAV — REFINED
========================================================= */


/* ---------------------------------------------------------
   NAV DOCK
--------------------------------------------------------- */

.mcs-deck-nav {

  left: 50%;
  bottom: 20px;

  transform: translateX(-50%);

  gap: 3px;

  padding: 7px 10px;

  border:
    1px solid rgba(255,255,255,.14);

  background:
    rgba(5,5,5,.60);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);

  opacity: .58;

  transition:
    opacity .25s ease,
    padding .35s cubic-bezier(.16,1,.3,1),
    background .25s ease,
    border-color .25s ease;
}


/* Make the whole dock clearer when approached */

.mcs-deck-nav:hover {

  opacity: 1;

  padding:
    9px 13px;

  border-color:
    rgba(255,255,255,.28);

  background:
    rgba(5,5,5,.82);
}



/* ---------------------------------------------------------
   NUMBERS
--------------------------------------------------------- */

.mcs-deck-nav-link {

  width: 31px;
  height: 30px;

  color:
    rgba(255,255,255,.42) !important;

  font-size:
    8px !important;

  border:
    1px solid transparent;

  transition:
    width .3s cubic-bezier(.16,1,.3,1),
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.mcs-deck-nav:hover
.mcs-deck-nav-link {

  width: 36px;

  color:
    rgba(255,255,255,.58) !important;
}



/* ACTIVE SLIDE */

.mcs-deck-nav-link.is-active {

  color:
    #fff !important;

  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.20);
}


.mcs-deck-nav-link.is-active::before {

  left: 7px;
  right: 7px;

  bottom: 3px;

  height: 2px;

  background:
    #f15a24;
}



/* ---------------------------------------------------------
   HOVERED DESTINATION
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .mcs-deck-nav-link:hover {

    color:
      #fff !important;

    background:
      rgba(255,255,255,.10);

    border-color:
      rgba(255,255,255,.18);
  }


  .mcs-deck-nav-link::after {

    bottom:
      calc(100% + 13px);

    padding:
      9px 11px;

    background:
      rgba(5,5,5,.94);

    border:
      1px solid rgba(255,255,255,.18);

    color:
      #fff;

    font-size:
      8px;

    letter-spacing:
      .14em;
  }

}/* =========================================================
   COVER — LOGO / TOP RAIL SPACING
========================================================= */

.slide-hero .hero01-top {

  left:
    clamp(250px, 15vw, 290px);
}/* =========================================================
   COVER — CLEAN TOP RAIL
========================================================= */

/* Remove the existing rail line from the displaced hero rail */

.slide-hero .hero01-top {
  border-bottom: none !important;
}


/* New full-width rail underneath the logo */

.slide-hero::after {
  content: "";

  position: absolute;

  z-index: 4;

  top: 82px;

  left: clamp(34px, 4vw, 68px);
  right: clamp(34px, 4vw, 68px);

  height: 1px;

  background:
    rgba(255,255,255,.18);

  pointer-events: none;
}


/* Keep SWEDEN / 2026 where it belongs */

.slide-hero .hero01-top-right {
  margin-left: auto;
}



/* =========================================================
   DECK NAV — HIDDEN UNTIL HOVER
========================================================= */

.mcs-deck-nav {

  position: fixed;

  left: 50%;
  bottom: 16px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 2px;

  padding:
    10px 14px;

  border:
    1px solid transparent;

  background:
    transparent;

  -webkit-backdrop-filter:
    none;

  backdrop-filter:
    none;

  transition:
    background .25s ease,
    border-color .25s ease,
    backdrop-filter .25s ease;
}


/* Tiny navigation cue */

.mcs-deck-nav::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 26px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    #f15a24;

  opacity: .65;

  transition:
    opacity .2s ease;
}


/* Hide numbers normally */

.mcs-deck-nav-link {

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease;
}


/* Reveal full nav when cursor enters bottom-center */

.mcs-deck-nav:hover {

  border-color:
    rgba(255,255,255,.15);

  background:
    rgba(5,5,5,.82);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}


.mcs-deck-nav:hover::after {
  opacity: 0;
}


.mcs-deck-nav:hover
.mcs-deck-nav-link {

  opacity: 1;

  pointer-events: auto;
}/* =========================================================
   SLIDE 02 — THE PROBLEM
========================================================= */

.slide-problem02 {

  background:
    #101010;

}



/* =========================================================
   BACKGROUND
========================================================= */

.problem02-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background:

    radial-gradient(
      circle at 80% 45%,
      rgba(255,255,255,.045),
      transparent 32%
    ),

    linear-gradient(
      90deg,
      #101010 0%,
      #111 55%,
      #0d0d0d 100%
    );

}


.problem02-grid {

  opacity: .12;

  background-size:
    72px 72px;

}



/* =========================================================
   TOP RAIL
========================================================= */

.problem02-top {

  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(255,255,255,.16);

}


.problem02-eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  color:
    rgba(255,255,255,.75);

  font-size:
    clamp(7px,.55vw,10px);

}


.problem02-meta {

  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(7px,.5vw,9px);

}


.problem02-dot {

  width: 6px;

  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 11px
    rgba(241,90,36,.6);

}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.problem02-layout {

  position: relative;

  z-index: 3;

  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    clamp(340px, 27vw, 455px);

  gap:
    clamp(45px, 5vw, 90px);

  margin-top:
    clamp(34px, 4.5vh, 58px);

  padding-bottom:
    clamp(35px, 4vh, 55px);

}



/* =========================================================
   LEFT CONTENT
========================================================= */

.problem02-left {

  min-width: 0;

  display: flex;

  flex-direction: column;

}


.problem02-kicker {

  margin-bottom:
    clamp(14px,1.4vw,22px);

  color:
    var(--orange);

  font-size:
    clamp(8px,.65vw,11px);

}



/* =========================================================
   HEADLINE

   Same scale as established benefits title.
========================================================= */

.problem02-title {

  margin: 0;

  max-width: 950px;

  color:
    #fff;

  font-size:
    clamp(46px,5vw,92px);

  line-height:
    .91;

  letter-spacing:
    -.055em;

}


.problem02-title span {

  color:
    var(--orange);

}



/* =========================================================
   INTRO

   Same Field Gothic scale as established deck copy.
========================================================= */

.problem02-intro {

  max-width: 520px;

  margin:
    clamp(22px,2.5vh,34px)
    0
    0;

  color:
    rgba(255,255,255,.58);

  font-family:
    "Field Gothic",
    sans-serif;

  font-size:
    clamp(13px,.95vw,17px);

  line-height:
    1.6;

}



/* =========================================================
   PROBLEM GRID
========================================================= */

.problem02-problems {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  margin-top:
    clamp(32px,4vh,52px);

  border-top:
    1px solid rgba(255,255,255,.16);

  border-left:
    1px solid rgba(255,255,255,.16);

}


.problem02-problem {

  min-width: 0;

  display: grid;

  grid-template-columns:
    30px 1fr;

  gap:
    clamp(10px,1vw,16px);

  padding:
    clamp(18px,1.7vw,26px);

  border-right:
    1px solid rgba(255,255,255,.16);

  border-bottom:
    1px solid rgba(255,255,255,.16);

  background:
    rgba(255,255,255,.012);

}


.problem02-number {

  color:
    var(--orange);

  font-family:
    "Field Gothic",
    sans-serif;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.25;

  letter-spacing:
    .14em;

}


.problem02-problem div {

  min-width: 0;

}


.problem02-problem strong {

  display: block;

  color:
    rgba(255,255,255,.88);

  font-family:
    "Field Gothic",
    sans-serif;

  font-size:
    clamp(11px,.78vw,14px);

  font-weight:
    600;

  line-height:
    1.15;

  letter-spacing:
    .07em;

}


.problem02-problem p {

  max-width:
    285px;

  margin:
    9px 0 0;

  color:
    rgba(255,255,255,.42);

  font-family:
    "Field Gothic",
    sans-serif;

  font-size:
    clamp(10px,.68vw,12px);

  line-height:
    1.45;

}



/* =========================================================
   PORTRAIT VIDEO
========================================================= */

.problem02-video-wrap {

  position: relative;

  align-self: stretch;

  min-height: 0;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.16);

  background:
    #050505;

}


.problem02-video {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

}


.problem02-video-shade {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.04) 28%,
      rgba(0,0,0,.02) 60%,
      rgba(0,0,0,.72) 100%
    );

}



/* =========================================================
   VIDEO META
========================================================= */

.problem02-video-top {

  position: absolute;

  z-index: 2;

  top: 18px;

  left: 18px;
  right: 18px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 12px;

  border-bottom:
    1px solid rgba(255,255,255,.18);

  color:
    rgba(255,255,255,.62);

}


.problem02-video-bottom {

  position: absolute;

  z-index: 2;

  left: 18px;

  bottom: 18px;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    rgba(255,255,255,.68);

}


.problem02-video-dot {

  width: 5px;

  height: 5px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--orange);

}



/* =========================================================
   LAPTOP
========================================================= */

@media
(max-height:800px)
and
(min-width:801px) {

  .problem02-layout {

    margin-top:
      28px;

    gap:
      42px;

  }


  .problem02-title {

    font-size:
      clamp(40px,4.2vw,72px);

  }


  .problem02-intro {

    margin-top:
      18px;

  }


  .problem02-problems {

    margin-top:
      24px;

  }


  .problem02-problem {

    padding:
      15px 17px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:800px) {

  .problem02-meta {

    display: none;

  }


  .problem02-layout {

    display: flex;

    flex-direction: column;

    gap: 30px;

  }


  .problem02-video-wrap {

    width: 100%;

    min-height: 650px;

  }


  .problem02-problems {

    grid-template-columns: 1fr;

  }

}


/* =========================================================
   SLIDE 04 — THE PRODUCT
   ROBOT + INVESTOR METRICS
========================================================= */


/* =========================================================
   HEADING
========================================================= */

.slide-product04 .product04-heading {
  position: absolute;

  z-index: 24;

  top: clamp(86px,9vh,126px);

  left: clamp(42px,4.8vw,92px);

  max-width: 410px;

  pointer-events: none;
}


.slide-product04 .product04-heading h2 {
  margin: 0;

  color: #f4f4f1;

  font-size: clamp(36px,3.6vw,68px);

  line-height: .80;

  letter-spacing: -.055em;
}


.slide-product04 .product04-heading p {
  max-width: 330px;

  margin:
    clamp(15px,1.35vw,21px)
    0
    0;

  color:
    rgba(255,255,255,.48);

  font-size:
    clamp(11px,.78vw,14px);

  line-height: 1.55;
}


/* =========================================================
   BX SIDE ID
========================================================= */

.slide-product04 .product04-side {
  top: 56%;

  left: 10.5%;

  z-index: 16;
}


.slide-product04 .product03-side-label {
  color:
    rgba(255,255,255,.30);
}


.slide-product04 .product03-side-id {
  color:
    rgba(255,255,255,.04);
}


/* =========================================================
   ROBOT STAGE
   SAME SCALE / COMPRESSED LEFT
========================================================= */

.slide-product04 .product04-stage {
  inset:
    clamp(104px,10vh,142px)
    32%
    clamp(112px,11vh,150px)
    0;

  overflow: visible;
}


.slide-product04 .product03-product-wrap {
  top: 55%;

  left: 43%;

  width:
    min(67vw,1120px);
}


/* =========================================================
   CALLOUTS
========================================================= */

.slide-product04 .product03-callout-copy {
  min-width:
    clamp(160px,12.5vw,215px);
}


.slide-product04 .product04-callout-descriptor {
  display: block;

  margin-top: 7px;

  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(6px,.43vw,8px);

  line-height: 1.3;

  letter-spacing: .12em;
}


.slide-product04 .product03-callout-detail {
  max-width: 240px;

  font-size:
    clamp(9px,.65vw,11px);

  line-height: 1.45;
}


.slide-product04 .product03-callout-detail b {
  display: inline-block;

  margin-left: 5px;

  color:
    rgba(255,255,255,.74);

  font-size: .82em;

  letter-spacing: .1em;
}


.slide-product04
.product03-callout:hover
.product03-callout-detail,

.slide-product04
.product03-callout.is-open
.product03-callout-detail {
  max-height: 110px;
}


/* =========================================================
   CALLOUT POSITIONS
========================================================= */

.slide-product04 .product03-c1 {
  top: 12%;

  right: 2%;
}


.slide-product04 .product03-c2 {
  top: auto;

  right: 2%;

  bottom: 13%;

  left: auto;
}


.slide-product04 .product03-c3 {
  top: 23%;

  right: auto;

  bottom: auto;

  left: 19%;
}


.slide-product04 .product03-c4 {
  left: 17%;

  bottom: 8%;
}


/* =========================================================
   RIGHT IMPACT COLUMN
========================================================= */

.slide-product04 .product04-impact {
  position: absolute;

  z-index: 30;

  top: clamp(118px,12vh,154px);

  right: clamp(42px,4.8vw,92px);

  bottom: clamp(78px,7.8vh,108px);

  width:
    min(31vw,540px);

  display: grid;

  grid-template-rows:
    repeat(3,1fr);

  overflow: hidden;

  background:
    #151515;

  border:
    1px solid #292929;

  box-shadow: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;
}


/* =========================================================
   IMPACT ITEM
========================================================= */

.slide-product04 .product04-impact-item {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 0;

  padding:
    22px
    26px;

  box-sizing: border-box;

  background:
    #151515;

  border-bottom:
    1px solid #292929;
}


.slide-product04 .product04-impact-item:last-child {
  border-bottom: 0;
}


/* =========================================================
   NUMBER / CATEGORY
========================================================= */

.slide-product04 .product04-impact-number {
  color:
    var(--orange);

  font-size:
    clamp(7px,.48vw,9px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .15em;
}


.slide-product04 .product04-impact-label {
  margin-top: 6px;

  color:
    rgba(255,255,255,.42);

  font-size:
    clamp(6px,.43vw,8px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .15em;

  text-transform: uppercase;
}


/* =========================================================
   MAIN IMPACT VALUE
========================================================= */

.slide-product04 .product04-impact-main {
  display: flex;

  align-items: flex-end;

  gap: 18px;

  margin-top: 18px;
}


.slide-product04 .product04-impact-main strong {
  flex: 0 0 auto;

  color:
    #f4f4f1;

  font-size:
    clamp(52px,4.5vw,82px);

  font-weight: 500;

  line-height: .72;

  letter-spacing: -.07em;

  white-space: nowrap;
}


.slide-product04 .product04-impact-main > span {
  padding-bottom: 2px;

  color:
    #f4f4f1;

  font-size:
    clamp(17px,1.3vw,24px);

  font-weight: 600;

  line-height: .91;

  letter-spacing: -.03em;

  text-transform: uppercase;
}


/* =========================================================
   SAFETY / ORANGE NO
========================================================= */

.slide-product04
.product04-impact-main-safety
strong {
  color:
    var(--orange);
}


/* =========================================================
   EFFICIENCY COMPARISON
========================================================= */

.slide-product04 .product04-impact-compare {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: end;

  gap: 14px;

  margin-top: 20px;

  padding-top: 15px;

  border-top:
    1px solid #292929;
}


.slide-product04
.product04-impact-compare
> div:not(.product04-impact-vs) {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


.slide-product04
.product04-impact-compare
span {
  color:
    rgba(255,255,255,.39);

  font-size:
    clamp(6px,.41vw,8px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.slide-product04
.product04-impact-compare
strong {
  color:
    rgba(255,255,255,.92);

  font-size:
    clamp(15px,1.08vw,20px);

  font-weight: 500;

  line-height: 1;
}


.slide-product04 .product04-impact-vs {
  padding-bottom: 1px;

  color:
    rgba(255,255,255,.25);

  font-size: 7px;

  font-weight: 600;

  letter-spacing: .12em;
}


/* =========================================================
   IMPACT DESCRIPTION
========================================================= */

.slide-product04 .product04-impact-item > p {
  max-width: 390px;

  margin:
    17px
    0
    0 !important;

  color:
    rgba(255,255,255,.48);

  font-size:
    clamp(9px,.67vw,12px);

  line-height: 1.48;
}


/* =========================================================
   BOTTOM TECH RAIL
   LEFT SIDE ONLY
========================================================= */

.slide-product04 .product04-bottom {
  position: absolute;

  z-index: 22;

  left:
    clamp(42px,4.8vw,92px);

  right:
    35%;

  bottom:
    clamp(58px,5.2vw,82px);

  display: grid;

  grid-template-columns:
    minmax(130px,.30fr)
    minmax(0,1fr);

  align-items: stretch;

  border-top:
    1px solid rgba(255,255,255,.14);

  border-bottom:
    1px solid rgba(255,255,255,.14);
}


/* =========================================================
   PROMPT
========================================================= */

.slide-product04 .product04-prompt {
  display: flex;

  align-items: center;

  padding:
    12px
    16px
    12px
    0;

  color:
    rgba(255,255,255,.28);

  font-size:
    clamp(6px,.43vw,8px);
}


/* =========================================================
   SPECS
========================================================= */

.slide-product04 .product04-specs {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  border-left:
    1px solid rgba(255,255,255,.12);
}


.slide-product04 .product04-spec {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  padding:
    10px
    clamp(9px,.85vw,15px);

  border-right:
    1px solid rgba(255,255,255,.12);
}


.slide-product04 .product04-spec:last-child {
  border-right: 0;
}


.slide-product04 .product04-spec > span {
  color:
    rgba(255,255,255,.34);

  font-size:
    clamp(5px,.37vw,7px);
}


.slide-product04 .product04-spec strong {
  color:
    #f4f4f1;

  font-size:
    clamp(13px,1vw,19px);

  font-weight: 500;

  line-height: 1;

  white-space: nowrap;
}


.slide-product04 .product04-spec small {
  color:
    rgba(255,255,255,.42);

  font-size: .45em;

  font-weight: 600;

  letter-spacing: .1em;
}


/* =========================================================
   SHORT VIEWPORT
========================================================= */

@media (max-height:800px) and (min-width:801px) {

  .slide-product04 .product04-heading {
    top: 78px;
  }


  .slide-product04 .product04-heading h2 {
    font-size:
      clamp(32px,3.2vw,54px);
  }


  .slide-product04 .product04-stage {
    inset:
      92px
      32%
      118px
      0;
  }


  .slide-product04 .product03-product-wrap {
    width:
      min(67vw,1020px);
  }


  .slide-product04 .product04-impact {
    top: 96px;

    bottom: 70px;
  }


  .slide-product04 .product04-impact-item {
    padding:
      16px
      22px;
  }


  .slide-product04 .product04-bottom {
    bottom: 52px;
  }

}


/* =========================================================
   MOBILE LEGACY
========================================================= */

@media (max-width:800px) {

  .slide-product04 .product04-heading {
    position: relative;

    top: auto;

    left: auto;

    margin-top: 28px;
  }


  .slide-product04 .product04-heading h2 {
    font-size:
      clamp(40px,11vw,66px);
  }


  .slide-product04 .product04-stage {
    inset: auto;

    min-height: 720px;
  }


  .slide-product04 .product03-product-wrap {
    top: 46%;

    left: 50%;

    width: 130%;
  }


  .slide-product04 .product04-impact {
    position: relative;

    top: auto;

    right: auto;

    bottom: auto;

    width: 100%;

    margin-top: 20px;
  }


  .slide-product04 .product04-bottom {
    position: relative;

    left: auto;

    right: auto;

    bottom: auto;

    grid-template-columns: 1fr;

    margin-top: 20px;
  }


  .slide-product04 .product04-prompt {
    display: none;
  }


  .slide-product04 .product04-specs {
    grid-template-columns:
      repeat(2,1fr);

    border-left: 0;
  }

}

/* =========================================================
   SLIDE 05 — TRACTION
   FULL-BLEED TERMINAL / INTERACTIVE CUSTOMER PROOF
========================================================= */

.slide-traction05 {
  --t05-orange: #f15a24;
  --t05-black: #0b0c0d;
  --t05-white: #ffffff;

  --t05-grey-01: #f5f6f7;
  --t05-grey-02: #eef1f3;
  --t05-grey-03: #e7eaed;

  --t05-line-dark: rgba(17,17,17,.14);
  --t05-line-light: rgba(255,255,255,.18);

  position: relative;

  overflow: hidden;

  background: #111;

  color: #fff;
}


/* =========================================================
   FULL-BLEED BACKGROUND
========================================================= */

.slide-traction05 .traction05-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: #111;
}


.slide-traction05 .traction05-bg img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 46%;

  filter: none;

  opacity: 1;

  transform: none;
}


/* =========================================================
   DARK IMAGE GRADE
   KEEP PHOTO CLEAR / NO BLUR / NO WHITE WASH
========================================================= */

.slide-traction05 .traction05-bg-wash {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(4,8,11,.62) 0%,
      rgba(4,8,11,.38) 24%,
      rgba(4,8,11,.17) 48%,
      rgba(4,8,11,.22) 66%,
      rgba(4,8,11,.52) 100%
    ),

    linear-gradient(
      90deg,
      rgba(4,8,11,.42) 0%,
      rgba(4,8,11,.16) 42%,
      rgba(4,8,11,.08) 72%,
      rgba(4,8,11,.17) 100%
    );
}


/* =========================================================
   SUBTLE TECHNICAL GRID
========================================================= */

.slide-traction05 .traction05-grid {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: .07;

  background-image:

    linear-gradient(
      rgba(255,255,255,.05) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.05) 1px,
      transparent 1px
    );

  background-size:
    180px
    180px;
}


/* =========================================================
   INNER
========================================================= */

.slide-traction05 .traction05-inner {
  position: relative;

  z-index: 3;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  padding:
    34px
    68px
    26px;
}


/* =========================================================
   TOP RAIL
========================================================= */

.slide-traction05 .traction05-toprail {
  display: flex;

  align-items: center;

  justify-content: space-between;

  flex: 0 0 auto;

  height: 30px;

  padding-bottom: 11px;

  box-sizing: border-box;

  border-bottom:
    1px solid var(--t05-line-light);
}


.slide-traction05 .traction05-top-left,
.slide-traction05 .traction05-top-right {
  color:
    rgba(255,255,255,.64);

  font-size: 8px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.slide-traction05 .traction05-top-left {
  display: flex;

  align-items: center;
}


.slide-traction05 .traction05-dot {
  width: 7px;

  height: 7px;

  flex: 0 0 auto;

  margin-right: 11px;

  border-radius: 50%;

  background:
    var(--t05-orange);
}


/* =========================================================
   HEADER
========================================================= */

.slide-traction05 .traction05-header {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    520px;

  gap: 80px;

  align-items: end;

  flex: 0 0 auto;

  margin-top: 32px;
}


/* =========================================================
   HEADER / TRACTION
========================================================= */

.slide-traction05 .traction05-header-main {
  min-width: 0;
}


.slide-traction05 .traction05-eyebrow {
  display: none;
}


.slide-traction05 .traction05-header h1 {
  margin: 0 !important;

  padding: 0 !important;

  color:
    #fff !important;

  font-size:
    94px !important;

  font-weight:
    600 !important;

  line-height:
    .80 !important;

  letter-spacing:
    -.062em !important;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-header h1 span {
  color:
    var(--t05-orange);
}


/* =========================================================
   HEADER COPY
========================================================= */

.slide-traction05 .traction05-header-copy {
  padding:
    0
    0
    4px
    22px;

  border-left:
    3px solid var(--t05-orange);
}


.slide-traction05 .traction05-header-copy strong {
  display: block;

  color:
    #fff;

  font-size: 17px;

  font-weight: 600;

  line-height: 1.18;

  letter-spacing:
    -.015em;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-header-copy p {
  max-width: 500px;

  margin:
    11px
    0
    0 !important;

  color:
    rgba(255,255,255,.74);

  font-size: 13px;

  line-height: 1.5;
}


/* =========================================================
   MAIN
   PUSHED LOWER TO SHOW MORE TERMINAL PHOTO
========================================================= */

.slide-traction05 .traction05-main {
  display: grid;

  grid-template-rows:
    minmax(0,1fr)
    156px;

  gap: 14px;

  flex: 1 1 auto;

  min-height: 0;

  margin-top: 58px;
}


/* =========================================================
   ACTIVE CUSTOMER CONTAINER
========================================================= */

.slide-traction05 .traction05-focus {
  position: relative;

  min-height: 0;

  overflow: hidden;

  background:
    #fff;

  border:
    1px solid rgba(255,255,255,.40);

  box-shadow:
    0 18px 55px rgba(0,0,0,.22);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   ACTIVE CUSTOMER PANEL
========================================================= */

.slide-traction05 .traction05-panel {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns:
    330px
    minmax(0,1fr)
    690px;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(8px);

  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.16,1,.3,1);
}


.slide-traction05 .traction05-panel.is-active {
  opacity: 1;

  pointer-events: auto;

  transform:
    translateY(0);
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.slide-traction05 .traction05-panel-brand {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  padding:
    24px;

  box-sizing: border-box;

  background:
    #fff;

  border-right:
    1px solid var(--t05-line-dark);
}


.slide-traction05 .traction05-panel-index {
  position: absolute;

  top: 20px;

  left: 20px;

  color:
    var(--t05-orange);

  font-size: 10px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .14em;
}


/* =========================================================
   ACTIVE LOGO
========================================================= */

.slide-traction05 .traction05-panel-logo {
  width: 100%;

  height: 250px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}


.slide-traction05 .traction05-panel-logo img {
  display: block;

  width: 95%;

  height: 95%;

  max-width: none;

  max-height: none;

  object-fit: contain;

  object-position: center center;

  filter: none;

  transform: none;
}


/* =========================================================
   CUSTOMER CONTENT
========================================================= */

.slide-traction05 .traction05-panel-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  padding:
    32px
    46px;

  box-sizing: border-box;

  background:
    #fff;
}


.slide-traction05 .traction05-panel-status {
  color:
    var(--t05-orange);

  font-size: 9px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-panel-content h2 {
  max-width: 700px;

  margin:
    14px
    0
    0 !important;

  color:
    #111 !important;

  font-size:
    42px !important;

  font-weight:
    600 !important;

  line-height:
    .94 !important;

  letter-spacing:
    -.04em !important;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-panel-content p {
  max-width: 700px;

  margin:
    19px
    0
    0 !important;

  color:
    rgba(17,17,17,.64);

  font-size: 15px;

  line-height: 1.5;
}


.slide-traction05 .traction05-panel-location {
  width: fit-content;

  margin-top: 25px;

  padding-top: 11px;

  color:
    rgba(17,17,17,.49);

  font-size: 8px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

  border-top:
    2px solid var(--t05-orange);
}


/* =========================================================
   METRICS AREA
========================================================= */

.slide-traction05 .traction05-metrics {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  align-items: stretch;

  min-width: 0;

  background:
    var(--t05-grey-01);

  border-left:
    1px solid var(--t05-line-dark);
}


/* =========================================================
   METRIC BLOCK
========================================================= */

.slide-traction05 .traction05-metric {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  padding:
    30px
    27px;

  box-sizing: border-box;

  border-right:
    1px solid var(--t05-line-dark);
}


.slide-traction05 .traction05-metric:last-child {
  border-right: 0;
}


/* =========================================================
   PRIMARY METRIC
========================================================= */

.slide-traction05 .traction05-metric-primary {
  background:
    var(--t05-grey-02);
}


/* =========================================================
   METRIC TOP LABEL
========================================================= */

.slide-traction05 .traction05-metric-label {
  color:
    rgba(17,17,17,.52);

  font-size: 9px;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


/* =========================================================
   METRIC VALUE
========================================================= */

.slide-traction05 .traction05-metric strong {
  display: block;

  margin-top: 20px;

  color:
    #111;

  font-size: 61px;

  font-weight: 500;

  line-height: .82;

  letter-spacing:
    -.06em;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-metric-primary strong {
  color:
    var(--t05-orange);
}


/* =========================================================
   METRIC EXPLANATION
========================================================= */

.slide-traction05 .traction05-metric small {
  display: block;

  margin-top: 16px;

  color:
    rgba(17,17,17,.60);

  font-size: 9px;

  font-weight: 600;

  line-height: 1.35;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


/* =========================================================
   CUSTOMER SELECTOR
========================================================= */

.slide-traction05 .traction05-selector {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  min-height: 0;

  overflow: hidden;

  background:
    #fff;

  border:
    1px solid rgba(255,255,255,.45);

  box-shadow:
    0 12px 36px rgba(0,0,0,.18);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   SELECTOR BUTTON
========================================================= */

.slide-traction05 .traction05-customer {
  position: relative;

  display: grid;

  grid-template-rows:
    19px
    minmax(0,1fr)
    38px;

  min-width: 0;

  margin: 0;

  padding:
    10px
    17px
    12px;

  box-sizing: border-box;

  appearance: none;

  -webkit-appearance: none;

  background:
    #fff;

  border: 0;

  border-right:
    1px solid rgba(17,17,17,.11);

  color:
    #111;

  font-family:
    inherit;

  text-align:
    left;

  cursor: pointer;

  transition:
    background .18s ease;
}


.slide-traction05 .traction05-customer:last-child {
  border-right: 0;
}


.slide-traction05 .traction05-customer::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background:
    transparent;
}


.slide-traction05 .traction05-customer:hover {
  background:
    #f5f6f7;
}


.slide-traction05 .traction05-customer.is-active {
  background:
    var(--t05-grey-02);
}


.slide-traction05 .traction05-customer.is-active::before {
  background:
    var(--t05-orange);
}


/* =========================================================
   SELECTOR NUMBER
========================================================= */

.slide-traction05 .traction05-customer-number {
  color:
    rgba(17,17,17,.33);

  font-size: 7px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .14em;
}


.slide-traction05
.traction05-customer.is-active
.traction05-customer-number {
  color:
    var(--t05-orange);
}


/* =========================================================
   SELECTOR LOGO
========================================================= */

.slide-traction05 .traction05-customer-logo {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  min-width: 0;

  min-height: 0;

  overflow: hidden;
}


.slide-traction05 .traction05-customer-logo img {
  display: block;

  width: 90%;

  height: 78px;

  max-width: none;

  max-height: none;

  object-fit: contain;

  object-position:
    left center;

  filter: none;

  transform: none;
}


/* =========================================================
   SELECTOR FOOTER
========================================================= */

.slide-traction05 .traction05-customer-footer {
  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  min-width: 0;
}


.slide-traction05 .traction05-customer-footer strong {
  overflow: hidden;

  color:
    rgba(17,17,17,.87);

  font-size: 9px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .035em;

  white-space: nowrap;

  text-overflow: ellipsis;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-customer-footer span {
  margin-top: 5px;

  color:
    rgba(17,17,17,.43);

  font-size: 7px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.slide-traction05
.traction05-customer.is-active
.traction05-customer-footer span {
  color:
    var(--t05-orange);
}


/* =========================================================
   BOTTOM RAIL
========================================================= */

.slide-traction05 .traction05-bottom {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 16px;

  align-items: center;

  flex: 0 0 auto;

  padding-top: 13px;

  color:
    rgba(255,255,255,.55);

  font-size: 7px;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.slide-traction05 .traction05-bottom > div {
  height: 1px;

  background:
    rgba(255,255,255,.24);
}


.slide-traction05 .traction05-bottom strong {
  color:
    rgba(255,255,255,.78);

  font-size: inherit;

  font-weight: 600;
}
/* =========================================================
   SLIDE 06 — BUSINESS MODEL / PAY PER WASH
========================================================= */

.slide-business06 .slide-inner {
  padding-bottom:clamp(72px,6.2vw,100px);
}

.slide-business06 .business06-hero {
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:clamp(48px,6vw,105px);
  padding:clamp(22px,2.8vh,38px) 0 clamp(20px,2.6vh,34px);
}

.slide-business06 .commercial09-title {
  font-size:clamp(43px,4.6vw,84px);
  line-height:.86;
}

.slide-business06 .business06-raas {
  margin-top:clamp(14px,1.5vw,20px);
  padding-top:clamp(12px,1.2vw,16px);
}

.slide-business06 .business06-physical-ai {
  margin-top:10px;
  color:rgba(0,0,0,.25);
  font-size:clamp(5px,.4vw,7px);
}

.slide-business06 .business06-principles {
  grid-template-columns:repeat(4,1fr);
  flex:0 0 auto;
}

.slide-business06 .commercial09-principle {
  min-height:clamp(205px,23vh,285px);
  padding:clamp(18px,1.8vw,28px);
}

.slide-business06 .commercial09-principle h3 {
  margin-top:clamp(18px,1.8vw,28px);
  font-size:clamp(19px,1.62vw,29px);
  line-height:.95;
}

.slide-business06 .commercial09-principle p {
  max-width:280px;
  margin-top:clamp(12px,1.1vw,17px);
  font-size:clamp(9px,.65vw,11px);
  line-height:1.5;
}

.slide-business06 .commercial09-principle-bottom {
  padding-top:clamp(12px,1.2vw,18px);
}

.slide-business06 .business06-lower {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(285px,.65fr);
  gap:clamp(30px,4vw,65px);
  flex:1;
  min-height:0;
  padding:clamp(18px,2.2vh,30px) 0 clamp(12px,1.5vh,20px);
}

.slide-business06 .business06-progression,
.slide-business06 .business06-expansion {
  min-width:0;
}

.slide-business06 .business06-expansion {
  padding-left:clamp(22px,2.2vw,34px);
  border-left:1px solid rgba(0,0,0,.14);
}

.slide-business06 .business06-lower-label {
  margin-bottom:clamp(14px,1.4vw,20px);
  color:rgba(0,0,0,.34);
  font-size:clamp(6px,.43vw,8px);
}

.slide-business06 .business06-rail {
  display:flex;
  align-items:center;
}

.slide-business06 .business06-rail > div {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.slide-business06 .business06-rail span {
  color:var(--orange);
  font-size:clamp(6px,.44vw,8px);
  font-weight:600;
  letter-spacing:.13em;
}

.slide-business06 .business06-rail strong {
  color:rgba(0,0,0,.58);
  font-size:clamp(6px,.45vw,8px);
}

.slide-business06 .business06-rail > i {
  position:relative;
  flex:1;
  min-width:20px;
  height:1px;
  margin:0 clamp(10px,1.2vw,20px);
  background:rgba(0,0,0,.16);
}

.slide-business06 .business06-rail > i::after {
  content:"";
  position:absolute;
  top:-2px;
  right:0;
  width:5px;
  height:5px;
  border-top:1px solid rgba(0,0,0,.32);
  border-right:1px solid rgba(0,0,0,.32);
  transform:rotate(45deg);
}

.slide-business06 .business06-services {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:32px;
}

.slide-business06 .business06-services strong {
  color:rgba(0,0,0,.58);
  font-size:clamp(6px,.47vw,9px);
}

.slide-business06 .business06-services strong:first-child {
  color:#111;
}

.slide-business06 .business06-services span {
  color:var(--orange);
  font-size:14px;
  font-weight:500;
}

.slide-business06 .business06-bottom {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.12);
  color:rgba(0,0,0,.30);
  font-size:clamp(5px,.4vw,7px);
}

.slide-business06 .business06-bottom span {
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--orange);
}

@media (max-height:800px) and (min-width:801px) {
  .slide-business06 .slide-inner {
    padding-top:30px;
    padding-bottom:68px;
  }

  .slide-business06 .business06-hero {
    padding:17px 0 18px;
  }

  .slide-business06 .commercial09-title {
    font-size:clamp(38px,3.9vw,66px);
  }

  .slide-business06 .commercial09-principle {
    min-height:185px;
    padding:16px 20px;
  }

  .slide-business06 .commercial09-principle h3 {
    margin-top:14px;
  }

  .slide-business06 .business06-lower {
    padding:14px 0 10px;
  }
}

@media (max-width:800px) {
  .slide-business06 {
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .slide-business06 .slide-inner {
    height:auto;
    min-height:100vh;
    padding-bottom:110px;
  }

  .slide-business06 .business06-hero {
    grid-template-columns:1fr;
    gap:24px;
  }

  .slide-business06 .commercial09-title {
    font-size:clamp(38px,10vw,62px);
  }

  .slide-business06 .business06-principles {
    grid-template-columns:1fr;
  }

  .slide-business06 .commercial09-principle {
    min-height:210px;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.14);
  }

  .slide-business06 .business06-lower {
    grid-template-columns:1fr;
  }

  .slide-business06 .business06-expansion {
    padding:22px 0 0;
    border-top:1px solid rgba(0,0,0,.14);
    border-left:0;
  }

  .slide-business06 .business06-rail {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .slide-business06 .business06-rail > i {
    display:none;
  }
}


/* =========================================================
   SLIDE 07 — UNIT ECONOMICS
========================================================= */

.slide-economics07 {
  background:#0b0b0b;
  color:#f3f3f1;
}

.slide-economics07 .economics07-bg {
  position:absolute;
  inset:0;
  z-index:0;
  background:#0b0b0b;
}

.slide-economics07 .economics07-grid {
  opacity:.11;
  background-size:72px 72px;
}

.slide-economics07 .slide-inner {
  padding-bottom:clamp(72px,6.2vw,100px);
}

.slide-economics07 .economics07-top {
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex:0 0 auto;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-economics07 .economics07-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.68);
  font-size:clamp(7px,.55vw,10px);
}

.slide-economics07 .economics07-meta {
  color:rgba(255,255,255,.28);
  font-size:clamp(7px,.5vw,9px);
}

.slide-economics07 .economics07-dot {
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(241,90,36,.55);
}

.slide-economics07 .economics07-header {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
  align-items:end;
  gap:clamp(40px,5vw,80px);
  flex:0 0 auto;
  padding:clamp(18px,2.4vh,30px) 0;
}

.slide-economics07 .economics07-title {
  margin:0;
  color:#f3f3f1;
  font-size:clamp(32px,3.2vw,58px);
  line-height:.91;
  letter-spacing:-.05em;
}

.slide-economics07 .economics07-title span {
  color:var(--orange);
}

.slide-economics07 .economics07-header-copy {
  max-width:490px;
  margin:0;
  color:rgba(255,255,255,.48);
  font-size:clamp(11px,.78vw,14px);
  line-height:1.55;
}

.slide-economics07 .economics07-metrics {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:.8fr .7fr 1.2fr;
  flex:0 0 auto;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}

.slide-economics07 .economics07-metric {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(14px,1.5vw,22px) clamp(16px,1.8vw,28px);
  border-right:1px solid rgba(255,255,255,.14);
}

.slide-economics07 .economics07-metric:last-child {
  border-right:0;
}

.slide-economics07 .economics07-metric > span {
  margin-bottom:8px;
  color:rgba(255,255,255,.38);
  font-size:clamp(6px,.43vw,8px);
}

.slide-economics07 .economics07-metric > strong {
  color:#fff;
  font-family:"Field Gothic", sans-serif;
  font-size:clamp(30px,3vw,54px);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.035em;
}

.slide-economics07 .economics07-metric-accent > strong {
  color:var(--orange);
}

.slide-economics07 .economics07-metric > small {
  margin-top:9px;
  color:rgba(255,255,255,.30);
  font-size:clamp(6px,.4vw,8px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.1em;
}

.slide-economics07 .economics07-scenarios {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:1;
  min-height:0;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-economics07 .economics07-scenario {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:clamp(15px,1.7vw,26px) clamp(18px,2vw,32px);
}

.slide-economics07 .economics07-scenario:first-child {
  border-right:1px solid rgba(255,255,255,.14);
}

.slide-economics07 .economics07-scenario-primary {
  background:rgba(255,255,255,.025);
}

.slide-economics07 .economics07-scenario-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:clamp(10px,1vw,15px);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.36);
  font-size:clamp(6px,.42vw,8px);
}

.slide-economics07 .economics07-scenario-top > div {
  display:flex;
  align-items:center;
  gap:10px;
}

.slide-economics07 .economics07-index {
  color:var(--orange);
  font-size:clamp(8px,.58vw,11px);
  font-weight:600;
  letter-spacing:.14em;
}

.slide-economics07 .economics07-scenario-body {
  display:grid;
  grid-template-columns:minmax(100px,.42fr) minmax(190px,.8fr) minmax(210px,1fr);
  gap:clamp(18px,2vw,32px);
  align-items:center;
  flex:1;
  min-height:0;
}

.slide-economics07 .economics07-price,
.slide-economics07 .economics07-revenue,
.slide-economics07 .economics07-equivalent {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.slide-economics07 .economics07-price > span,
.slide-economics07 .economics07-revenue > span,
.slide-economics07 .economics07-equivalent > span {
  margin-bottom:9px;
  color:rgba(255,255,255,.34);
  font-size:clamp(6px,.4vw,8px);
  line-height:1.35;
}

.slide-economics07 .economics07-price > strong {
  color:rgba(255,255,255,.82);
  font-size:clamp(26px,2.3vw,42px);
  font-weight:500;
  line-height:.9;
}

.slide-economics07 .economics07-revenue > strong {
  color:#fff;
  font-size:clamp(32px,3vw,56px);
  font-weight:500;
  line-height:.88;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.slide-economics07 .economics07-scenario-primary .economics07-revenue > strong {
  color:var(--orange);
}

.slide-economics07 .economics07-revenue small,
.slide-economics07 .economics07-equivalent small {
  color:rgba(255,255,255,.36);
  font-size:.3em;
  font-weight:600;
  letter-spacing:.09em;
}

.slide-economics07 .economics07-equivalent {
  padding-left:clamp(16px,1.6vw,24px);
  border-left:1px solid rgba(255,255,255,.12);
}

.slide-economics07 .economics07-equivalent > strong {
  color:rgba(255,255,255,.82);
  font-size:clamp(24px,2vw,37px);
  font-weight:500;
  line-height:.95;
}

.slide-economics07 .economics07-equivalent p {
  margin:9px 0 0;
  color:rgba(255,255,255,.30);
  font-size:clamp(8px,.56vw,10px);
  line-height:1.35;
}

.slide-economics07 .economics07-note {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(18px,2vw,32px);
  flex:0 0 auto;
  padding:clamp(9px,.9vw,13px) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.slide-economics07 .economics07-note strong {
  color:var(--orange);
  font-size:clamp(6px,.42vw,8px);
}

.slide-economics07 .economics07-note p {
  margin:0;
  color:rgba(255,255,255,.38);
  font-size:clamp(9px,.63vw,11px);
  line-height:1.4;
}

.slide-economics07 .economics07-rail {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  flex:0 0 auto;
}

.slide-economics07 .economics07-rail > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:clamp(10px,1vw,14px) clamp(12px,1.3vw,20px);
  border-right:1px solid rgba(255,255,255,.12);
}

.slide-economics07 .economics07-rail > div:last-child {
  border-right:0;
}

.slide-economics07 .economics07-rail span {
  color:rgba(255,255,255,.28);
  font-size:clamp(6px,.4vw,8px);
}

.slide-economics07 .economics07-rail strong {
  color:rgba(255,255,255,.72);
  font-size:clamp(8px,.56vw,10px);
  font-weight:600;
  white-space:nowrap;
}

@media (max-height:800px) and (min-width:801px) {
  .slide-economics07 .slide-inner {
    padding-top:30px;
    padding-bottom:68px;
  }

  .slide-economics07 .economics07-header {
    padding:14px 0;
  }

  .slide-economics07 .economics07-title {
    font-size:clamp(28px,2.7vw,46px);
  }

  .slide-economics07 .economics07-metric {
    padding-top:10px;
    padding-bottom:10px;
  }

  .slide-economics07 .economics07-metric > strong {
    font-size:clamp(27px,2.5vw,42px);
  }

  .slide-economics07 .economics07-scenario {
    padding-top:12px;
    padding-bottom:12px;
  }

  .slide-economics07 .economics07-revenue > strong {
    font-size:clamp(29px,2.5vw,44px);
  }
}

@media (max-width:800px) {
  .slide-economics07 {
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .slide-economics07 .slide-inner {
    height:auto;
    min-height:100vh;
    padding-bottom:110px;
  }

  .slide-economics07 .economics07-meta {
    display:none;
  }

  .slide-economics07 .economics07-header {
    grid-template-columns:1fr;
    gap:20px;
  }

  .slide-economics07 .economics07-title {
    font-size:clamp(34px,8.7vw,52px);
  }

  .slide-economics07 .economics07-metrics,
  .slide-economics07 .economics07-scenarios,
  .slide-economics07 .economics07-rail {
    grid-template-columns:1fr;
  }

  .slide-economics07 .economics07-metric,
  .slide-economics07 .economics07-scenario:first-child,
  .slide-economics07 .economics07-rail > div {
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .slide-economics07 .economics07-scenario-body {
    grid-template-columns:1fr;
    padding-top:22px;
  }

  .slide-economics07 .economics07-equivalent {
    padding:18px 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    border-left:0;
  }

  .slide-economics07 .economics07-note {
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* =========================================================
   SLIDE 06 — LOGISTICS MARKET COMPOSITION
========================================================= */

.slide-business06 .business06-hero {
  padding:clamp(16px,1.9vh,26px) 0 clamp(15px,1.7vh,23px);
}

.slide-business06 .commercial09-title {
  font-size:clamp(38px,3.9vw,70px);
}

.slide-business06 .commercial09-hero-copy p {
  line-height:1.52;
}

.slide-business06 .commercial09-principle {
  min-height:clamp(158px,18vh,215px);
  padding:clamp(14px,1.4vw,22px);
}

.slide-business06 .commercial09-principle h3 {
  margin-top:clamp(12px,1.2vw,18px);
  font-size:clamp(16px,1.35vw,24px);
}

.slide-business06 .commercial09-principle p {
  margin-top:clamp(9px,.8vw,12px);
  font-size:clamp(8px,.58vw,10px);
  line-height:1.42;
}

.slide-business06 .commercial09-principle-bottom {
  padding-top:10px;
}

.slide-business06 .business06-market {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding-top:clamp(14px,1.7vh,22px);
}

.slide-business06 .business06-market-heading {
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(420px,1.28fr);
  align-items:end;
  gap:clamp(32px,4vw,64px);
  flex:0 0 auto;
  padding-bottom:clamp(10px,1.1vw,15px);
}

.slide-business06 .business06-market-heading h3 {
  margin:0;
  color:#111;
  font-size:clamp(16px,1.45vw,26px);
  line-height:1;
  letter-spacing:-.035em;
}

.slide-business06 .business06-market-heading p {
  max-width:720px;
  margin:0;
  color:rgba(0,0,0,.47);
  font-size:clamp(9px,.64vw,11px);
  line-height:1.45;
}

.slide-business06 .business06-market-flow {
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(80px,.24fr) minmax(250px,1fr) minmax(80px,.24fr) minmax(250px,1fr);
  flex:1;
  min-height:0;
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
}

.slide-business06 .business06-market-block {
  display:grid;
  grid-template-columns:minmax(105px,.38fr) minmax(140px,.62fr);
  min-width:0;
  min-height:0;
  background:rgba(255,255,255,.26);
}

.slide-business06 .business06-market-terminal {
  background:rgba(0,0,0,.035);
}

.slide-business06 .business06-market-image {
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-right:1px solid rgba(0,0,0,.14);
  background:#d8d7d2;
}

.slide-business06 .business06-market-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(16,16,16,.10);
  pointer-events:none;
}

.slide-business06 .business06-market-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.02);
}

.slide-business06 .business06-market-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(11px,1.1vw,17px);
}

.slide-business06 .business06-market-copy > span {
  color:var(--orange);
  font-size:clamp(5px,.36vw,7px);
}

.slide-business06 .business06-market-copy > strong {
  margin-top:7px;
  color:#111;
  font-size:clamp(10px,.72vw,13px);
  font-weight:600;
  line-height:1.12;
}

.slide-business06 .business06-market-copy > p {
  margin:8px 0 0;
  color:rgba(0,0,0,.47);
  font-size:clamp(8px,.54vw,10px);
  line-height:1.4;
}

.slide-business06 .business06-market-copy > small {
  margin-top:7px;
  color:rgba(0,0,0,.28);
  font-size:clamp(6px,.4vw,8px);
  line-height:1.35;
}

.slide-business06 .business06-market-services {
  display:flex;
  flex-wrap:wrap;
  gap:5px 9px;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.12);
}

.slide-business06 .business06-market-services span {
  color:rgba(0,0,0,.34);
  font-size:clamp(5px,.34vw,6px);
}

.slide-business06 .business06-market-services span.is-active {
  color:var(--orange);
}

.slide-business06 .business06-market-arrow {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:0;
  padding:8px;
}

.slide-business06 .business06-market-arrow > span {
  color:rgba(0,0,0,.32);
  font-size:clamp(5px,.34vw,6px);
  line-height:1.35;
  text-align:center;
}

.slide-business06 .business06-market-arrow > i {
  position:relative;
  width:100%;
  height:1px;
  background:rgba(0,0,0,.18);
}

.slide-business06 .business06-market-arrow > i::after {
  content:"";
  position:absolute;
  top:-3px;
  right:0;
  width:6px;
  height:6px;
  border-top:1px solid var(--orange);
  border-right:1px solid var(--orange);
  transform:rotate(45deg);
}

.slide-business06 .business06-lower {
  flex:0 0 auto;
  padding:clamp(10px,1.2vh,15px) 0 0;
}

.slide-business06 .business06-lower-label {
  margin-bottom:10px;
}

@media (max-height:800px) and (min-width:801px) {
  .slide-business06 .business06-hero {
    padding:11px 0 12px;
  }

  .slide-business06 .commercial09-title {
    font-size:clamp(33px,3.25vw,55px);
  }

  .slide-business06 .commercial09-principle {
    min-height:138px;
    padding:11px 16px;
  }

  .slide-business06 .commercial09-principle h3 {
    margin-top:9px;
    font-size:clamp(15px,1.15vw,20px);
  }

  .slide-business06 .commercial09-principle p {
    margin-top:7px;
  }

  .slide-business06 .business06-market {
    padding-top:10px;
  }

  .slide-business06 .business06-market-heading {
    padding-bottom:8px;
  }

  .slide-business06 .business06-market-copy {
    padding:8px 11px;
  }

  .slide-business06 .business06-lower {
    padding-top:8px;
  }
}

@media (max-width:800px) {
  .slide-business06 .business06-market-heading {
    grid-template-columns:1fr;
    gap:12px;
  }

  .slide-business06 .business06-market-flow {
    grid-template-columns:1fr;
  }

  .slide-business06 .business06-market-block {
    min-height:190px;
  }

  .slide-business06 .business06-market-arrow {
    min-height:70px;
  }

  .slide-business06 .business06-market-arrow > i {
    width:1px;
    height:34px;
  }

  .slide-business06 .business06-market-arrow > i::after {
    top:auto;
    right:-3px;
    bottom:0;
    transform:rotate(135deg);
  }
}


/* =========================================================
   SLIDE 08 — HELSINGBORG CUSTOMER USE CASE
========================================================= */

.slide-usecase08 {
  background:#070b0d;
  color:#f3f3f1;
}

.slide-usecase08 .usecase08-background,
.slide-usecase08 .usecase08-shade {
  position:absolute;
  inset:0;
}

.slide-usecase08 .usecase08-background {
  z-index:0;
  background-image:url("./assets/images/topview-helsingborg.webp");
  background-position:center top;
  background-size:cover;
  filter:saturate(.78) contrast(1.08) brightness(.78);
  transform:scale(1.01);
}

.slide-usecase08 .usecase08-shade {
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,8,10,.68) 0%,rgba(5,8,10,.52) 56%,rgba(5,8,10,.42) 100%),
    linear-gradient(180deg,rgba(5,8,10,.42) 0%,rgba(5,8,10,.18) 36%,rgba(5,8,10,.68) 100%);
}

.slide-usecase08 .usecase08-grid {
  z-index:2;
  opacity:.08;
  background-size:72px 72px;
}

.slide-usecase08 .slide-inner {
  z-index:10;
  padding-bottom:clamp(72px,6.2vw,104px);
}

.slide-usecase08 .usecase08-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex:0 0 auto;
  min-height:42px;
  padding:0 0 12px clamp(176px,10.5vw,210px);
  border-bottom:1px solid rgba(255,255,255,.15);
}

.slide-usecase08 .usecase08-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.86);
  font-size:clamp(7px,.55vw,10px);
}

.slide-usecase08 .usecase08-dot {
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(241,90,36,.55);
}

.slide-usecase08 .usecase08-meta {
  color:rgba(255,255,255,.62);
  font-size:clamp(6px,.46vw,8px);
}

.slide-usecase08 .usecase08-context {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:13px 16px;
  border-left:2px solid var(--orange);
  background:rgba(5,8,10,.44);
}

.slide-usecase08 .usecase08-customer-mark {
  position:relative;
  width:clamp(176px,13.5vw,246px);
  height:39px;
  overflow:hidden;
}

.slide-usecase08 .usecase08-customer-logo {
  position:absolute;
  top:50%;
  left:50%;
  width:132%;
  height:auto;
  transform:translate(-50%,-51%);
}

.slide-usecase08 .usecase08-header {
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(300px,.58fr);
  align-items:end;
  gap:clamp(36px,5vw,86px);
  flex:0 0 auto;
  padding:clamp(18px,2.2vh,28px) 0 clamp(16px,1.8vh,22px);
}

.slide-usecase08 .usecase08-title {
  margin:0;
  color:#f4f4f1;
  font-size:clamp(34px,3.35vw,61px);
  line-height:.94;
  letter-spacing:-.05em;
  text-shadow:0 3px 24px rgba(0,0,0,.58);
}

.slide-usecase08 .usecase08-title span {
  color:var(--orange);
}

.slide-usecase08 .usecase08-intro {
  max-width:560px;
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:clamp(11px,.78vw,14px);
  line-height:1.5;
}

.slide-usecase08 .usecase08-case {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,.82fr) minmax(0,1.48fr);
  flex:1 1 auto;
  min-height:0;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  background:rgba(5,8,10,.54);
}

.slide-usecase08 .usecase08-case-item {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(16px,1.7vw,28px);
  border-right:1px solid rgba(255,255,255,.14);
}

.slide-usecase08 .usecase08-case-item:first-child {
  padding-left:0;
}

.slide-usecase08 .usecase08-case-item:last-child {
  padding-right:0;
  border-right:0;
}

.slide-usecase08 .usecase08-index {
  margin-bottom:clamp(12px,1.4vh,18px);
  color:rgba(255,255,255,.64);
  font-size:clamp(6px,.46vw,9px);
}

.slide-usecase08 .usecase08-case-item > strong,
.slide-usecase08 .usecase08-economic-main > div > strong {
  display:block;
  color:#f4f4f1;
  font-size:clamp(42px,4vw,72px);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.045em;
}

.slide-usecase08 .usecase08-case-item strong small,
.slide-usecase08 .usecase08-economic-main strong small {
  color:rgba(255,255,255,.66);
  font-size:.25em;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.slide-usecase08 .usecase08-bottleneck > strong {
  color:var(--orange);
  font-family:"Syncopate",sans-serif;
  font-size:clamp(25px,2.35vw,43px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.045em;
}

.slide-usecase08 .usecase08-case-item h3 {
  max-width:340px;
  margin:clamp(11px,1.2vh,16px) 0 0;
  color:rgba(255,255,255,.94);
  font-size:clamp(7px,.52vw,10px);
  line-height:1.4;
}

.slide-usecase08 .usecase08-case-item > p {
  max-width:330px;
  margin:9px 0 0;
  color:rgba(255,255,255,.72);
  font-size:clamp(10px,.68vw,13px);
  line-height:1.45;
}

.slide-usecase08 .usecase08-economics {
  position:relative;
}

.slide-usecase08 .usecase08-economics::before {
  content:"";
  position:absolute;
  top:-1px;
  left:clamp(16px,1.7vw,28px);
  width:54px;
  height:2px;
  background:var(--orange);
}

.slide-usecase08 .usecase08-economic-main {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);
  align-items:end;
  gap:clamp(20px,2.2vw,38px);
}

.slide-usecase08 .usecase08-economic-main > div > strong {
  font-size:clamp(48px,4.65vw,84px);
}

.slide-usecase08 .usecase08-economic-main h3 {
  max-width:470px;
}

.slide-usecase08 .usecase08-calculation {
  margin:10px 0 0;
  color:rgba(255,255,255,.62);
  font-size:clamp(6px,.44vw,8px);
}

.slide-usecase08 .usecase08-benchmark {
  padding-left:clamp(16px,1.5vw,24px);
  border-left:1px solid rgba(255,255,255,.14);
}

.slide-usecase08 .usecase08-benchmark > span {
  color:rgba(255,255,255,.62);
  font-size:clamp(6px,.42vw,8px);
}

.slide-usecase08 .usecase08-benchmark > strong {
  margin-top:9px;
  color:#f4f4f1;
  font-size:clamp(23px,2vw,36px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
}

.slide-usecase08 .usecase08-benchmark p {
  max-width:210px;
  margin:9px 0 0;
  color:rgba(255,255,255,.7);
  font-size:clamp(6px,.42vw,8px);
  line-height:1.45;
}

.slide-usecase08 .usecase08-consequences {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex:0 0 auto;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.slide-usecase08 .usecase08-consequences span {
  color:rgba(255,255,255,.58);
  font-size:clamp(6px,.43vw,8px);
}

.slide-usecase08 .usecase08-consequences strong {
  color:rgba(255,255,255,.84);
  font-size:clamp(6px,.5vw,9px);
}

.slide-usecase08 .usecase08-footer {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,520px);
  align-items:center;
  gap:clamp(30px,4vw,68px);
  flex:0 0 auto;
  padding-top:clamp(13px,1.6vh,21px);
}

.slide-usecase08 .usecase08-footer > p {
  max-width:900px;
  margin:0;
  color:#f4f4f1;
  font-size:clamp(15px,1.25vw,22px);
  font-weight:500;
  line-height:1.25;
}

.slide-usecase08 .usecase08-footer > p::before {
  content:"";
  display:inline-block;
  width:26px;
  height:2px;
  margin:0 12px 5px 0;
  background:var(--orange);
}

.slide-usecase08 .usecase08-release {
  position:relative;
  display:grid;
  grid-template-columns:clamp(130px,9.4vw,170px) minmax(0,1fr);
  min-height:clamp(88px,8.2vh,112px);
  color:#0b2941;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.78);
  border-top:3px solid var(--orange);
  background:#efefeb;
  box-shadow:0 18px 42px rgba(0,0,0,.3);
  transform:translateY(-5px);
  transition:transform .25s ease,box-shadow .25s ease;
}

.slide-usecase08 .usecase08-release:hover,
.slide-usecase08 .usecase08-release:focus-visible {
  transform:translateY(-9px);
  box-shadow:0 24px 52px rgba(0,0,0,.4);
}

.slide-usecase08 .usecase08-release:focus-visible {
  outline:1px solid var(--orange);
  outline-offset:3px;
}

.slide-usecase08 .usecase08-release-image {
  min-width:0;
  overflow:hidden;
  border-right:1px solid rgba(11,41,65,.16);
  background:#fff;
}

.slide-usecase08 .usecase08-release-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 19%;
  filter:saturate(.88) contrast(.96);
  transition:filter .25s ease;
}

.slide-usecase08 .usecase08-release:hover img {
  filter:saturate(1) contrast(1);
}

.slide-usecase08 .usecase08-release-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  padding:14px 18px;
}

.slide-usecase08 .usecase08-release-copy span {
  color:rgba(11,41,65,.6);
  font-size:clamp(6px,.44vw,8px);
  line-height:1.45;
}

.slide-usecase08 .usecase08-release-copy strong {
  color:#0b2941;
  font-size:clamp(8px,.58vw,11px);
}

@media (max-height:800px) and (min-width:801px) {
  .slide-usecase08 .slide-inner {
    padding-top:26px;
    padding-bottom:68px;
  }

  .slide-usecase08 .usecase08-header {
    padding:13px 0;
  }

  .slide-usecase08 .usecase08-title {
    font-size:clamp(31px,3vw,51px);
  }

  .slide-usecase08 .usecase08-case-item {
    padding-top:12px;
    padding-bottom:12px;
  }

  .slide-usecase08 .usecase08-index {
    margin-bottom:9px;
  }

  .slide-usecase08 .usecase08-case-item h3 {
    margin-top:8px;
  }

  .slide-usecase08 .usecase08-case-item > p {
    margin-top:6px;
  }

  .slide-usecase08 .usecase08-footer {
    padding-top:9px;
  }

  .slide-usecase08 .usecase08-release {
    grid-template-columns:112px minmax(0,1fr);
    min-height:72px;
  }

  .slide-usecase08 .usecase08-release-copy {
    gap:6px;
    padding:9px 13px;
  }
}

@media (max-width:800px) {
  .slide-usecase08 {
    overflow:auto;
  }

  .slide-usecase08 .slide-inner {
    height:auto;
    min-height:100%;
    padding-bottom:90px;
  }

  .slide-usecase08 .usecase08-customer-mark {
    width:150px;
  }

  .slide-usecase08 .usecase08-top {
    padding-left:0;
  }

  .slide-usecase08 .usecase08-header,
  .slide-usecase08 .usecase08-footer {
    grid-template-columns:1fr;
    gap:18px;
  }

  .slide-usecase08 .usecase08-title br {
    display:none;
  }

  .slide-usecase08 .usecase08-case {
    grid-template-columns:1fr;
    flex:none;
  }

  .slide-usecase08 .usecase08-case-item,
  .slide-usecase08 .usecase08-case-item:first-child,
  .slide-usecase08 .usecase08-case-item:last-child {
    min-height:210px;
    padding:24px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  .slide-usecase08 .usecase08-economic-main {
    grid-template-columns:1fr;
  }

  .slide-usecase08 .usecase08-benchmark {
    padding:18px 0 0;
    border-top:1px solid rgba(255,255,255,.14);
    border-left:0;
  }

  .slide-usecase08 .usecase08-consequences {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }

  .slide-usecase08 .usecase08-release {
    grid-template-columns:120px minmax(0,1fr);
    min-height:84px;
    transform:none;
  }
}