/* ===========================================================================
   ONE LINE IN  ::  the sector-page grammar.  Namespace: oli-
   Restored 2026-09-16 from the 2026-09-15 pre-deck build, on the deck's copy.

   The sector photo fills the first screen. Below it ONE cobalt lane threads the
   left gutter from the proof line to the closing panel, filling as you scroll,
   with a lone dot that walks the pipeline and lights each station as it arrives.
   Colours and fonts come only from the :root tokens in styles.css.
   This file loads after deck.css, so it may quiet a deck rule for this page.
   =========================================================================== */

.oli-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 680; letter-spacing: -0.024em; line-height: 1.06;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.oli-h2--center { text-align: center; }
.oli-h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); margin: 0; }
.oli-p { font-size: 16px; line-height: 1.62; color: var(--body); max-width: 62ch; margin: 0; }
.oli-sec { padding: clamp(74px, 9vh, 104px) 0; position: relative; }
.oli-sec .eb { display: block; margin-bottom: 14px; }

/* ===========================================================================
   1. HERO  ::  full-bleed sector photo, one viewport, directional scrim
   =========================================================================== */
.oli-hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; }
/* Mark, 2026-09-16: the frames were reshot in the house grade with the person in the right third,
   so the hero turned round: type on the left, photograph on the right. The wash is navy and only
   on the LEFT, where the type sits; the photograph keeps its own colour on the right. The version
   that washed the whole frame navy was throwing the grade away, and the one that washed the left
   to paper went too white. A flat 10% over the frame takes the overall brightness down. */
.oli-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--paper);
  background-size: cover; background-position: 68% center;
}
.oli-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(92deg, rgba(11,20,64,0.95) 0%, rgba(11,20,64,0.92) 24%, rgba(13,25,72,0.66) 41%, rgba(13,25,72,0.22) 55%, rgba(13,25,72,0) 68%),
    linear-gradient(180deg, rgba(11,20,64,0.80) 0%, rgba(11,20,64,0.58) 7%, rgba(11,20,64,0.26) 13%, rgba(11,20,64,0) 20%),
    linear-gradient(0deg, rgba(11,20,64,0.10), rgba(11,20,64,0.10));
}
.oli-hero__wrap {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--hero-top) - 20px); padding-bottom: clamp(30px, 6vh, 60px);
}
.oli-hero__block { align-self: flex-start; width: min(620px, 52%); text-align: left; }
.oli-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.9vw, 68px); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1.04; color: #fff; margin: 0;
  text-shadow: 0 2px 26px rgba(11,20,64,0.45);
  text-wrap: balance;
}
/* the old hero set its two clauses on their own lines; the deck marks the first one <b> */
.oli-hero h1 b { font-weight: 900; display: block; }
.oli-hero__sub { margin: 22px 0 0; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.55; color: rgba(255,255,255,0.90); max-width: 42rem; }
.oli-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.oli-hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: rgba(255,255,255,0.70);
}
.oli-hero__scroll .icon { width: 22px; height: 22px; animation: oli-bob 1.9s var(--ease) infinite; }
@keyframes oli-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ===========================================================================
   THE THREAD  ::  one cobalt lane in the left gutter, proof line to close
   =========================================================================== */
.oli-thread { position: relative; --oli-gut: 26px; }
.oli-lane {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2; pointer-events: none;
  left: calc(max(24px, (100% - 1240px) / 2) - var(--oli-gut));
  background: rgba(47,107,235,0.18);
}
.oli-lane__fill { position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--cobalt); box-shadow: 0 0 10px rgba(47,107,235,0.35); }
.oli-lane__dot {
  position: absolute; top: 0; left: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--cobalt); box-shadow: 0 0 0 5px rgba(47,107,235,0.18), 0 4px 12px rgba(30,58,186,0.45);
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s var(--ease);
}
.oli-lane__end {
  position: absolute; bottom: 0; left: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cobalt); transform: translate(-50%, 50%); box-shadow: 0 0 0 5px rgba(47,107,235,0.16);
}
@media (max-width: 1336px) { .oli-thread { --oli-gut: 14px; } }

/* ===========================================================================
   2. PROOF LINE  ::  the quiet paper band where the lane begins
   =========================================================================== */
.oli-thread > .proof { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ===========================================================================
   3. USE CASES  ::  the sector stage, then the ledger of numbered rows
   =========================================================================== */
.oli-cases { background: var(--paper); }
.oli-cases__head { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.oli-cases__head .oli-h2 { max-width: 16ch; }
.oli-cases__stage { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); }
.oli-cases__stage img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.oli-ledger { display: flex; flex-direction: column; margin-top: clamp(40px, 5vh, 62px); }
.oli-row {
  display: grid; grid-template-columns: minmax(140px, 0.58fr) 1.2fr 1.3fr; gap: clamp(24px, 3vw, 44px);
  align-items: start; padding: 34px 0; border-top: 1px solid var(--line);
}
.oli-ledger .oli-row:last-child { border-bottom: 1px solid var(--line); }
.oli-row__fig { position: relative; }
.oli-row__n {
  font-family: var(--font-display); font-size: clamp(52px, 6.4vw, 80px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--grad-blue); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.oli-row__wipe { margin-top: 12px; height: 2px; width: 100%; max-width: 170px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .2s; }
.oli-row.in .oli-row__wipe { transform: scaleX(1); }
.oli-row__mean { font-family: var(--font-display); font-size: 21px; font-weight: 720; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.oli-row__quote { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 40ch; }
.oli-row__facts { margin: 0; display: flex; flex-direction: column; gap: 16px; border-left: 2px solid rgba(47,107,235,0.22); padding-left: clamp(18px, 2vw, 28px); }
.oli-row__facts dt { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.oli-row__facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }

/* ===========================================================================
   4. PASSPORT  ::  the old pains grid, the card on the left, the claim right
   =========================================================================== */
.oli-pass { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade, 240px)); }
.oli-pass__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(40px, 5vw, 76px); align-items: center; }
.oli-pass__card { display: flex; justify-content: flex-start; }
.oli-pass__card .pcard { width: 100%; max-width: 560px; }
.oli-pass__head .oli-h2 { max-width: 15ch; }

/* ===========================================================================
   5. PLATFORM  ::  the spine, one station per module, lit by the walking dot
   =========================================================================== */
.oli-how { background: linear-gradient(180deg, var(--paper-2) 0, var(--paper) var(--fade, 240px)); }
.oli-how__head { text-align: center; }
.oli-how__head .eb { display: inline-block; margin-bottom: 14px; }
.oli-how .oli-h2 { margin-bottom: 0; }
.oli-how__lead { margin: 14px auto 0; max-width: 62ch; text-align: center; font-size: 17px; line-height: 1.6; color: var(--body); }
.oli-spine { margin-top: clamp(36px, 5vh, 52px); display: flex; flex-direction: column; gap: 30px; }
.oli-station { position: relative; }
.oli-node { position: absolute; left: calc(-1 * var(--oli-gut)); top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.oli-node__dotc { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 2px solid var(--cobalt-lt); transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.oli-node__arm { position: absolute; left: 0; top: 50%; width: var(--oli-gut); height: 2px; background: rgba(47,107,235,0.28); transform: translateY(-50%); transition: background .4s var(--ease); }
.oli-station__card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 18px; padding: 20px 22px 20px 10px;
  transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.oli-station__ic { position: relative; width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: rgba(47,107,235,0.10); color: var(--cobalt); transition: background .4s var(--ease), color .4s var(--ease); }
.oli-station__ic .icon { position: absolute; width: 25px; height: 25px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.oli-ic-tick { opacity: 0; transform: scale(0.6); color: var(--cobalt-dp, #1E3ABA); }
.oli-station__tx { padding-top: 3px; }
.oli-station__tx .oli-p { margin-top: 8px; }
.oli-station__go { justify-self: end; white-space: nowrap; }
.oli-station--on .oli-node__dotc { border-color: var(--cobalt); background: var(--cobalt); box-shadow: 0 0 0 5px rgba(47,107,235,0.16); }
.oli-station--on .oli-node__arm { background: var(--cobalt); }
.oli-station--on .oli-station__card { background: var(--surface); border-color: var(--line-soft); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.oli-station--on .oli-station__ic { background: rgba(47,107,235,0.12); color: var(--cobalt-dp, #1E3ABA); }
.oli-station--on .oli-ic-main { opacity: 0; transform: scale(0.6); }
.oli-station--on .oli-ic-tick { opacity: 1; transform: none; }

/* ===========================================================================
   6. FAQ  ::  deck markup, driven by site.js. It fades in from the spine band.
   =========================================================================== */
body.dk .oli-how ~ .faq, .oli-how ~ .faq { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade, 240px)); }

/* ===========================================================================
   7. CLOSING  ::  navy with the sector photo washed behind it. It carries the
   rounded top and .fend continues straight out of it, so the end of the page
   is ONE navy movement instead of two stacked navy panels.
   =========================================================================== */
.oli-close { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: 48px 48px 0 0; margin-top: 20px; }
.oli-close__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 60% center; filter: grayscale(1) brightness(0.55) contrast(0.95); opacity: 0.16; mix-blend-mode: luminosity; }
.oli-close__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 66% at 80% 26%, rgba(47,107,235,0.22), transparent 60%),
    radial-gradient(46% 54% at 92% 16%, rgba(102,182,230,0.16), transparent 62%),
    linear-gradient(180deg, rgba(11,20,64,0.72) 0%, rgba(11,20,64,0.90) 62%, #0B1440 100%);
}
.oli-close__in { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(74px, 12vh, 122px) 0 clamp(64px, 10vh, 104px); }
.oli-close__in .oli-h2 { color: #fff; max-width: 20ch; }
.oli-close__in p { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0; }
body.ind-page .fend { margin-top: 0; border-radius: 0; }

/* ===========================================================================
   RESPONSIVE  (desktop is the pass; these keep the page sane below it)
   =========================================================================== */
@media (max-width: 1000px) {
  .oli-hero__scrim { background: linear-gradient(180deg, rgba(11,20,64,0.88) 0%, rgba(11,20,64,0.74) 40%, rgba(11,20,64,0.34) 66%, rgba(11,20,64,0.12) 100%); }
  .oli-hero__block { align-self: flex-start; width: 100%; }
  .oli-hero__wrap { justify-content: flex-end; }
  .oli-cases__head { grid-template-columns: 1fr; }
  .oli-row { grid-template-columns: 1fr; gap: 16px; }
  .oli-row__wipe { max-width: 140px; }
  .oli-row__facts { border-left: 0; padding-left: 0; }
  .oli-pass__grid { grid-template-columns: 1fr; gap: 28px; }
  .oli-lane__dot { display: none; }
}
@media (max-width: 620px) {
  .oli-sec { padding: 58px 0; }
  .oli-lane, .oli-node { display: none; }
  .oli-row { padding: 24px 0; }
  .oli-row__n { font-size: 46px; }
  .oli-station__card { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 16px 12px 16px 0; }
  .oli-station__go { grid-column: 2; justify-self: start; }
  .oli-station__ic { width: 46px; height: 46px; }
  .oli-close__in { padding: 64px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .oli-hero__scroll .icon { animation: none; }
  .oli-lane__dot { display: none; }
  .oli-row__wipe { transition: none; }
}

/* on navy the outline button is white, as it is on every other dark ground on the site */
.oli-hero .btn--ghost2 { color: #fff; border-color: rgba(255,255,255,.42); }
.oli-hero .btn--ghost2:hover { background: rgba(255,255,255,.10); }
/* Mark: "decrease the brightness of the picture a bit, especially for Logistics" */
.oli-hero__photo { filter: brightness(.95); }
.oli-hero__photo[style*="logistics"], .oli-hero__photo[style*="logistiek"] { filter: brightness(.88); }
.oli-hero__photo[style*="cleaning"], .oli-hero__photo[style*="schoonmaak"] { filter: brightness(.92); }