/* Landing vehicle and directly addressable service descriptions. */
.vehicle-hero{padding:140px 0 66px;}
.vehicle-hero .hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;}
.vehicle-hero .hero-3d{display:none;}
.vehicle-hero h1{font-size:clamp(42px,4.7vw,66px);text-wrap:balance;}
.vehicle-hero p.lead{font-size:16px;line-height:1.65;}
.vehicle-hero .dsp-engine{min-width:0;scroll-margin-top:110px;}
.vehicle-hero .engine-frame{border:1px solid #ffffff1f;border-radius:10px;overflow:hidden;}
.vehicle-hero .engine-frame::after{display:none;}
.vehicle-hero .engine-layer{width:139%;margin-left:-39%;position:relative;transform:none;top:auto;left:auto;}
.vehicle-hero .engine-zone-label{font-size:8px;padding:5px 6px;bottom:-24px;}
.vehicle-hero .engine-caption{min-height:104px;margin:14px 0;padding:8px 12px;}
.vehicle-hero .engine-caption p{font-size:13px;}
.vehicle-hero .engine-menu{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr));}
.vehicle-hero .engine-menu-button{min-height:48px;padding:10px 8px;gap:5px;font-size:11px;text-decoration:none;box-shadow:none;background:#ffffff05;}
.vehicle-hero .engine-menu-button::before{display:none;}
.vehicle-hero .engine-menu-button::after{content:'↓';font-size:15px;}
.engine-zone{text-decoration:none;}
.engine-zone.is-open{border-color:var(--amber);}
/* ---------- MODULE CHAPTERS ------------------------------------------------
   Each module gets its own chapter instead of a single row, so the four names
   stop circling the page and start carrying something. The head is sticky: while
   you read a module's slides, its number and name stay in the margin, which is
   what makes four chapters read as four places rather than one long list. */
.module-details{background:#131a22;color:#f6f5f1;padding:8px 0 72px;}
.module-chapter{
  display:block; padding:72px 0; border-top:1px solid #ffffff1a;
  scroll-margin-top:96px; outline:none;
}
.module-chapter:first-child{border-top:none;}
/* Arriving from the vehicle should be visible, not silent. */
.module-chapter:target{border-top-color:var(--amber);}
.module-chapter:target .chapter-num{color:#131a22; background:var(--amber);}
.chapter-grid{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:40px 72px;
  align-items:start;
}
.chapter-head{position:sticky; top:104px;}
.chapter-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px;
  border:1px solid rgba(255,153,0,0.4); color:var(--amber);
  font-size:13px; font-weight:600; letter-spacing:0.04em;
  transition:background-color 300ms cubic-bezier(.2,.9,.25,1), color 300ms cubic-bezier(.2,.9,.25,1);
}
.chapter-title{
  font-size:clamp(34px,4vw,54px); line-height:1.02; color:#fff;
  margin:18px 0 10px;
}
.chapter-sub{font-size:15px; line-height:1.55; color:#A8B1BA; max-width:26ch;}
.module-return{
  display:inline-block; margin-top:26px; color:#FFB752; font-size:13px;
  text-underline-offset:5px;
}
.module-return:hover{text-decoration:underline;}
.module-return:focus-visible{outline:2px solid var(--amber); outline-offset:6px;}

/* ---------- the slides inside a chapter ---------- */
.chapter-slides{display:grid; gap:48px; min-width:0;}
/* These are <section> elements, so the global section{padding:104px 0} lands on
   them and opens a 104px hole under every slide. State the padding in full. */
.mslide{padding:26px 0 0; border-top:1px solid #ffffff14;}
.mslide:first-child{padding-top:0; border-top:none;}
.mslide-label{
  display:block; font-size:10.5px; font-weight:600; color:#7E8893; margin-bottom:16px;
}
.mslide-lead{font-size:17.5px; line-height:1.62; color:#DCE1E6; max-width:52ch; text-wrap:pretty;}
.mslide-list{list-style:none; margin:0; padding:0;}
.mslide-list li{
  position:relative; padding:12px 0 12px 22px; border-bottom:1px solid #ffffff12;
  font-size:15px; line-height:1.6; color:#DCE1E6;
}
.mslide-list li:last-child{border-bottom:none;}
.mslide-list li::before{
  content:""; position:absolute; left:0; top:21px;
  width:6px; height:1px; background:var(--amber);
}
.mslide-note{font-size:13.5px; line-height:1.6; color:#8B949E; max-width:50ch; margin-bottom:18px;}
/* The hero positions this card against the right edge of its own grid; inside a
   chapter it is just the first example, so reset that. */
.mslide .scorecard-wrap{margin:0 0 22px;}
.mslide .scorecard{margin:0; max-width:400px;}

/* ---------- examples ---------- */
.examples-toggle{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 18px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,183,82,0.34);
  border-radius:8px; color:#FFCE8A; cursor:pointer;
  font:600 13.5px 'Inter',sans-serif;
  transition:background-color 220ms cubic-bezier(.2,.9,.25,1), border-color 220ms cubic-bezier(.2,.9,.25,1), color 220ms cubic-bezier(.2,.9,.25,1), transform 160ms cubic-bezier(.2,.9,.25,1);
}
.examples-toggle:hover{background:rgba(255,153,0,0.12); border-color:var(--amber); color:#fff; transform:translateY(-1px);}
.examples-toggle:active{transform:translateY(0) scale(0.99);}
.examples-toggle:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.examples-chevron{
  font-size:17px; line-height:1;
  transition:transform 260ms cubic-bezier(.2,.9,.25,1);
}
.examples-toggle[aria-expanded="true"] .examples-chevron{transform:rotate(90deg);}

/* ---------- DOCUMENTS ------------------------------------------------------
   Each card is one PDF the visitor can actually open. The thumbnail is the
   document's first page on white, cropped to its head so the title and the
   first block stay legible at card size; the page count sits with the example
   number, because "2 Seiten" is what tells a buyer how much work this is.
   Under the cards, the fine print repeats what the documents themselves say on
   page one: the data is invented. That promise has to stay true. */
.examples-panel{display:block; margin-top:22px;}
.examples-panel[hidden]{display:none;}

.doc-grid{
  /* Quality carries five documents; the track floor is set so the band makes
     five columns of ~242px rather than four of 268px and a lone fifth below.
     Modules with one document get a card the same size, not a stretched one. */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:18px;
  justify-content:start;
}
.doc-card{min-width:0;}
.doc-link{
  display:flex; flex-direction:column; height:100%;
  background:#15222e; border:1px solid #ffffff12; border-radius:7px;
  overflow:hidden; color:inherit; text-decoration:none;
  transition:border-color 220ms ease, transform 260ms cubic-bezier(.2,.9,.25,1);
}
.doc-link:hover{border-color:rgba(255,153,0,0.55); transform:translateY(-3px);}
.doc-link:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.doc-shot{display:block; background:#fff; border-bottom:1px solid #ffffff12;}
.doc-shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; object-position:top center;
}
.doc-body{display:flex; flex-direction:column; gap:7px; padding:16px 16px 18px; flex:1;}
.doc-kicker{display:block; font-size:10px; color:var(--amber);}
.doc-title{
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  line-height:1.3; color:#fff;
}
.doc-desc{font-size:13px; line-height:1.55; color:#A8B1BA;}
.doc-cta{
  margin-top:auto; padding-top:12px;
  font:600 13px 'Inter',sans-serif; color:#FFCE8A;
  transition:color 200ms ease;
}
.doc-link:hover .doc-cta{color:var(--amber);}
.doc-fineprint{
  margin:18px 0 0; font-size:12px; line-height:1.6;
  color:#7E8994; max-width:78ch;
}

/* What has no document yet stays a line of text rather than a drawn screenshot:
   naming the deliverable is honest, faking a picture of it was not. */
.ex-more-label{
  display:block; margin:30px 0 0; padding-top:20px;
  border-top:1px solid #ffffff14;
  font-size:10px; letter-spacing:0.14em; color:#7E8994;
}
.ex-more-bare{margin-top:4px;}
.ex-more{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.ex-more li{
  padding:8px 14px; border:1px solid #ffffff1a; border-radius:999px;
  font-size:13px; line-height:1.2; color:#C2CAD2;
}

@media (max-width:720px){
  .doc-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- CHAPTER TITLE: the module render ------------------------------
   The render carries the module's name on its own signage, so it is the title
   of the chapter, not an illustration next to one. The text heading stays in
   the markup — it is what names the chapter for assistive technology and for
   the article's aria-labelledby — but it would only repeat the sign. */
.chapter-photo{
  margin:20px 0 20px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.09);
  background:#0A131C;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.9);
}
.chapter-photo img{display:block; width:100%; height:auto; aspect-ratio:4/5;}
.chapter-title{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.chapter-open{min-width:0;}
.chapter-quote{
  margin:24px 0 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--amber);
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:clamp(21px,2.2vw,29px); line-height:1.16; letter-spacing:-0.005em;
  color:#fff; max-width:40ch; text-wrap:balance;
}

/* ---------- DIAGRAMS -------------------------------------------------------
   Four modules, four different shapes: a line, a month, a time axis, a funnel.
   Four variants of one chart would repeat the sameness this page is escaping.
   All four are built from HTML so every label stays translatable. */
.dg-title{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:22px; color:#fff; margin-bottom:26px; letter-spacing:0;
}
.dg-note{margin-top:20px; font-size:13px; line-height:1.55; color:#8B949E; max-width:46ch;}
.dg{list-style:none; margin:0; padding:0;}

/* -- HR: the hiring line, with the stretch that moves off your desk lit -- */
.dg-pipeline{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  position:relative; padding-top:30px;
}
.dg-pipeline::before{
  content:""; position:absolute; left:5px; right:5px; top:7px; height:1px;
  background:#33404E;
}
.dg-step{position:relative; padding-right:10px; font-size:12px; line-height:1.35; color:#7E8893;}
.dg-step::before{
  content:""; position:absolute; top:-30px; left:0;
  width:11px; height:11px; border-radius:50%;
  background:#131A22; border:1px solid #4A5765;
}
.dg-step.is-mine{color:#fff; font-weight:500;}
.dg-step.is-mine::before{background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px rgba(255,153,0,0.16);}
/* the amber run under the steps I take */
.dg-pipeline::after{
  content:""; position:absolute; top:7px; height:1px; background:var(--amber);
  left:calc(100% / 6 * 1); right:calc(100% / 6 * 1);
}

/* -- PAYROLL: a month, with only the three days that decide it lit -- */
.dg-running{font-size:12.5px; color:#8B949E; margin-bottom:14px;}
.dg-month{display:grid; grid-template-columns:repeat(31,1fr); gap:3px; margin-bottom:22px;}
.dg-day-cell{display:block; height:26px; border-radius:2px; background:#222D39;}
.dg-day-cell.is-mark{background:var(--amber); opacity:0.45;}
/* The month itself only collects. The work happens in the five days after it
   closes, so those get their own short strip and the only colour. */
.dg-month{margin-bottom:14px;}
.dg-next{
  font-size:10px; letter-spacing:0.14em; color:#8B949E;
  margin:0 0 8px; text-transform:uppercase;
}
.dg-month-next{
  grid-template-columns:repeat(31,1fr); margin-bottom:22px;
}
.dg-month-next .dg-day-cell{grid-column:span 1;}
.dg-day-cell.is-mark.d1,.dg-day-cell.is-mark.d2{opacity:0.55;}
.dg-day-cell.is-mark.d3{opacity:0.78;}
.dg-day-cell.is-mark.d4{opacity:0.88;}
.dg-day-cell.is-mark.d5{opacity:1;}
.dg-marks{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.dg-mark{display:grid; grid-template-columns:64px 1fr; gap:10px; font-size:13.5px; color:#DCE1E6;}
.dg-mark-day{color:var(--amber); font-size:11.5px; font-variant-numeric:tabular-nums;}

/* -- OPERATIONS: the day on an axis, everything folding into one line -- */
.dg-axis{
  list-style:none; margin:0 0 26px; padding:34px 0 0; position:relative; min-height:108px;
}
.dg-axis::before{
  content:""; position:absolute; left:0; right:0; top:8px; height:1px;
  background:linear-gradient(90deg, #33404E, #33404E 82%, rgba(255,153,0,0.7));
}
.dg-pin{position:absolute; top:34px; left:var(--pos); transform:translateX(-50%); width:96px; text-align:center;}
.dg-pin::before{
  content:""; position:absolute; top:-31px; left:50%; margin-left:-3.5px;
  width:7px; height:7px; border-radius:50%; background:#5B6875;
}
.dg-pin:last-child::before{background:var(--amber); box-shadow:0 0 0 4px rgba(255,153,0,0.18);}
.dg-pin-time{display:block; font-size:11px; color:var(--amber); margin-bottom:5px; font-variant-numeric:tabular-nums;}
.dg-pin-label{display:block; font-size:12px; line-height:1.3; color:#B7BEC5;}
/* first and last pin would hang off the edges */
.dg-pin:first-child{transform:translateX(0); text-align:left;}
.dg-pin:first-child::before{left:3px; margin-left:0;}
.dg-pin:last-child{transform:translateX(-100%); text-align:right;}
.dg-pin:last-child::before{left:auto; right:3px; margin-left:0;}

/* -- QUALITY: the drill-down, each level narrower and warmer -- */
.dg-levels{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.dg-level{
  width:var(--w); min-width:210px; padding:13px 16px; border-radius:6px;
  font-size:13.5px; line-height:1.35; color:#DCE1E6;
  background:#222D39; border-left:2px solid #3A4654;
}
.dg-level:nth-child(2){background:#26313D; border-left-color:rgba(255,153,0,0.35);}
.dg-level:nth-child(3){background:#2B3542; border-left-color:rgba(255,153,0,0.6);}
.dg-level:nth-child(4){background:rgba(255,153,0,0.13); border-left-color:var(--amber); color:#fff;}

/* shared tail for the two diagrams that end in a result */
.dg-funnel-out{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  padding:9px 16px; border-radius:6px;
  background:rgba(255,153,0,0.1); border:1px solid rgba(255,153,0,0.4);
  color:#FFCE8A; font-size:13px; font-weight:600;
}
.dg-funnel-out::before{content:"→"; color:var(--amber);}

@media(max-width:820px){
  .chapter-photo{max-width:330px; margin:16px 0 18px;}
  .chapter-quote{font-size:21px; max-width:none;}
  /* A six-step line and a five-pin axis both need width they do not have here. */
  .dg-pipeline{grid-auto-flow:row; grid-auto-columns:auto; padding:0 0 0 24px;}
  .dg-pipeline::before{left:5px; right:auto; top:6px; bottom:6px; width:1px; height:auto;}
  .dg-pipeline::after{left:5px; right:auto; top:calc((100% / 6) * 1); bottom:calc((100% / 6) * 1); width:1px; height:auto;}
  .dg-step{padding:0 0 16px 20px; margin-left:-24px;}
  .dg-step:last-child{padding-bottom:0;}
  .dg-step::before{top:1px; left:0;}
  .dg-axis{padding:0; min-height:0; display:grid; gap:14px; margin-bottom:20px;}
  .dg-axis::before{display:none;}
  .dg-pin{position:static; transform:none !important; width:auto; text-align:left !important; display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:baseline;}
  .dg-pin::before{display:none;}
  .dg-pin-time{margin-bottom:0;}
  .dg-level{width:auto; min-width:0;}
  .dg-month{gap:2px;}
  .dg-day-cell{height:20px;}
}
@media(max-width:1000px){.vehicle-hero .hero-grid{grid-template-columns:1fr;gap:28px;}.vehicle-hero .dsp-engine{width:100%;max-width:720px;}.vehicle-hero{padding-top:130px;}.vehicle-hero p.lead{max-width:65ch;}}
@media(max-width:600px){.vehicle-hero{padding:120px 0 40px;}.vehicle-hero .engine-menu{grid-template-columns:repeat(2,minmax(0,1fr));}.vehicle-hero .engine-menu-button{font-size:13px;padding:12px;}.vehicle-hero .engine-caption{min-height:110px;}.module-chapter{padding:44px 0;}.chapter-slides{gap:36px;}.mslide-lead{font-size:16.5px;}}
@media(max-width:1000px){
  .chapter-grid{grid-template-columns:1fr; gap:28px;}
  /* Nothing to stick to once the head sits above the slides. */
  .chapter-head{position:static;}
  .chapter-title{margin:14px 0 8px;}
  .chapter-sub{max-width:52ch;}
  .module-return{margin-top:18px;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;}}