/* Scroll story (driveway job) behind the Machinery page sections - preview. Uses the site's tokens.css. */
.story { --stage-bg: var(--color-navy-950); --accent: var(--color-forest-600); --sans: var(--font-accent); }
/* ---------- Scroll story ---------- */
.story {
  --story-h: 560;
  --fill: 0;
  container-type: inline-size;
  position: relative;
  max-width: 100%;
  overflow-x: clip;
  height: calc(var(--story-h) * 1vh);
  height: calc(var(--story-h) * 1svh);
  background: var(--stage-bg);
  color: #fff;
}
.story__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--stage-bg);
}
.story__ambient {
  position: absolute; top: -60px; left: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  filter: blur(30px) brightness(0.55);
  display: none;
}
.story__layout { position: relative; height: 100%; }
.story__col { position: absolute; inset: 0; overflow: hidden; background: #1b232b; }
.story__poster, .story__videos video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.story__poster[data-layer="b"] { opacity: 0; }
.story__videos video { opacity: 0; pointer-events: none; }
.story__videos video.is-active { opacity: 1; }
.story__videos.is-off { display: none; }

/* captions */
.story__captions { margin: 0; padding: 0; list-style: none; display: grid; pointer-events: none; }
.cap { grid-area: 1 / 1; align-self: end; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.cap__step { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9FD3B8; }
.cap__title { color: #fff; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.18; margin: 0 0 10px; text-wrap: balance; }
.cap__text { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.9); }

/* rail */
.rail { position: relative; }
.rail__list { margin: 0; padding: 0; list-style: none; display: grid; position: relative; }
.rail__btn {
  display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0;
  border: 0; background: transparent; color: rgba(255,255,255,0.72); cursor: pointer;
  font: 500 13px var(--sans); letter-spacing: 0.02em;
}
.rail__btn:hover { color: #fff; }
.rail__dot {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7); background: var(--stage-bg);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.rail__btn.is-passed .rail__dot { background: #fff; border-color: #fff; }
.rail__btn.is-current { color: #fff; font-weight: 600; }
.rail__btn.is-current .rail__dot { background: var(--accent); border-color: #fff; transform: scale(1.35); }
.rail__track { position: absolute; background: rgba(255,255,255,0.25); border-radius: 2px; }
.rail__fill { position: absolute; inset: 0; background: #fff; border-radius: 2px; }

.story__scrim { position: absolute; inset: 0; pointer-events: none; }
.story__debug {
  position: absolute; left: 8px; top: 8px; z-index: 5; padding: 6px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.7); color: #9FD3B8; font: 12px/1.4 ui-monospace, Consolas, monospace; white-space: pre;
}

/* Phone / narrow: full-screen vertical video, captions over the bottom, rail across the top */
@media (max-width: 899px) and (max-aspect-ratio: 5/4) {
  .story__scrim {
    background:
      linear-gradient(to bottom, rgba(8,14,20,0.62) 0%, rgba(8,14,20,0) 18%),
      linear-gradient(to top, rgba(8,14,20,0.92) 0%, rgba(8,14,20,0.72) 26%, rgba(8,14,20,0) 52%);
  }
  .story__side--text {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
  }
  .story__captions { max-width: 560px; }
  .cap__title { font-size: 23px; }
  .cap__text { font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  .story__side--rail {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2;
    padding: calc(8px + env(safe-area-inset-top)) calc(var(--gutter) - 6px) 0;
  }
  .rail__list { grid-template-columns: repeat(var(--stops, 6), minmax(0, 1fr)); }
  .rail__btn { flex-direction: column; justify-content: center; gap: 4px; width: 100%; padding: 6px 0 4px; font-size: calc(12px - max(0, var(--stops, 6) - 6) * 1px); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
  .rail__track { left: calc(100% / (2 * var(--stops, 6))); right: calc(100% / (2 * var(--stops, 6))); top: 11px; height: 2px; }
  .rail__fill { transform-origin: left center; transform: scaleX(var(--fill)); }
}

/* Desktop: clear 9:16 column, blurred + darkened copy on both sides, captions over the left side */
@media (min-width: 900px), (min-aspect-ratio: 5/4) {
  .story__ambient { display: block; }
  .story__layout {
    --col: min(56.25vh, calc(100cqi - 440px));
    --col: min(56.25svh, calc(100cqi - 440px));
    display: grid;
    grid-template-columns: minmax(320px, 1fr) var(--col) minmax(104px, 1fr);
  }
  .story__col { position: relative; inset: auto; height: 100%; box-shadow: 0 0 60px rgba(0,0,0,0.45); }
  .story__side { display: flex; align-items: center; min-width: 0; }
  .story__side--text { justify-content: flex-end; padding: 0 clamp(28px, 4vw, 64px); }
  .story__captions { width: 100%; max-width: 400px; }
  .cap { align-self: center; }
  .cap__text { font-size: 17px; }
  .story__side--rail { justify-content: center; padding: 0 16px; }
  .rail { height: min(440px, 64%); }
  .rail__list { height: 100%; grid-template-rows: repeat(var(--stops, 6), minmax(0, 1fr)); }
  .rail__track { left: 5px; width: 2px; top: calc(100% / (2 * var(--stops, 6))); bottom: calc(100% / (2 * var(--stops, 6))); }
  .rail__fill { transform-origin: center top; transform: scaleY(var(--fill)); }
}

/* Wide (16:9) footage: the whole frame is always shown; a blurred, darkened copy fills the rest of the screen.
   --frame-w/--frame-h live on the stage so captions and rail can sit inside the frame's corners. */
.story--wide .story__stage { --frame-top: 50%; --frame-h: calc(var(--frame-w) * 9 / 16); }
.story--wide .story__ambient { display: block; }
.story--wide .story__layout { display: block; }
.story--wide .story__col {
  position: absolute; inset: auto; left: 50%; top: var(--frame-top);
  width: var(--frame-w); height: var(--frame-h);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px rgba(0,0,0,0.45);
}
.story--wide .story__scrim { display: none; }
.story--wide .cap__title, .story--wide .cap__text { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
@media (max-width: 899px) and (max-aspect-ratio: 5/4) {
  .story--wide .story__stage { --frame-w: 100cqi; --frame-top: calc(50% - 6svh); }
  .story--wide .story__ambient { filter: blur(30px) brightness(0.42); }
}
@media (min-width: 900px), (min-aspect-ratio: 5/4) {
  .story--wide .story__stage {
    --frame-w: min(calc(100cqi - 48px), calc((100vh - 48px) * 16 / 9));
    --frame-w: min(calc(100cqi - 48px), calc((100svh - 48px) * 16 / 9));
  }
  .story--wide .story__col { border-radius: 6px; overflow: hidden; }
  /* caption card in the frame's bottom-left corner */
  .story--wide .story__side--text {
    position: absolute; z-index: 2; display: block; padding: 0;
    left: calc((100% - var(--frame-w)) / 2 + 24px);
    bottom: calc((100% - var(--frame-h)) / 2 + 24px);
    width: min(460px, calc(var(--frame-w) * 0.42));
  }
  .story--wide .story__captions { max-width: none; }
  .story--wide .cap {
    align-self: end; padding: 20px 22px; border-radius: 14px;
    background: rgba(10,22,34,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  /* rail in a pill inside the frame's right edge */
  .story--wide .story__side--rail {
    position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0;
    right: calc((100% - var(--frame-w)) / 2 + 32px);
  }
  .story--wide .rail { height: min(400px, calc(var(--frame-h) - 72px)); isolation: isolate; }
  .story--wide .rail::before {
    content: ""; position: absolute; inset: -12px -18px -12px -14px; z-index: -1; border-radius: 14px;
    background: rgba(10,22,34,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
}
/* tall desktop windows: frame higher, caption below it over the blur instead of covering the photo */
@media (min-width: 900px) and (max-aspect-ratio: 4/3) {
  .story--wide .story__stage { --frame-top: 40%; }
  .story--wide .story__side--text {
    bottom: auto; top: calc(40% + var(--frame-h) / 2 + 28px);
    left: calc((100% - var(--frame-w)) / 2); width: min(620px, var(--frame-w));
  }
  .story--wide .cap { align-self: start; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
}

/* "Keep scrolling" hint (shown by the engine after a pause or a sideways swipe) */
.story__hint {
  position: absolute; left: 50%; z-index: 3; bottom: calc(24px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 18px; border-radius: 999px;
  background: rgba(16, 39, 63, 0.82); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 14px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.story__hint svg { flex: none; color: #9FD3B8; }
.story__hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
.story__hint.is-visible svg { animation: hint-bob 1.4s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .story__hint.is-visible svg { animation: none; } .story__hint { transition: opacity 0.2s; } }
/* phone (wide footage): just under the video frame, above the caption */
@media (max-width: 899px) and (max-aspect-ratio: 5/4) {
  .story--wide .story__hint { bottom: auto; top: calc(var(--frame-top) + var(--frame-h) / 2 + 14px); }
}
/* phone (tall footage, full screen): captions own the bottom, so the hint sits just under the rail */
@media (max-width: 899px) and (max-aspect-ratio: 5/4) {
  .story:not(.story--wide) .story__hint { bottom: auto; top: calc(70px + env(safe-area-inset-top)); }
}
/* desktop (wide footage): bottom-centre inside the frame, clear of the caption card and rail */
@media (min-width: 900px), (min-aspect-ratio: 5/4) {
  .story--wide .story__hint { bottom: auto; top: calc(var(--frame-top) + var(--frame-h) / 2 - 66px); }
}


/* ===== the page's sections as caption cards: wide and short, content flows sideways ===== */
.story { --cta: 0px; }
@media (max-width: 1040px) { .story { --cta: calc(var(--sticky-cta-h, 4.5rem) + env(safe-area-inset-bottom, 0px)); } }
.story__captions { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
/* the site's base CSS spaces sibling <li>s (li + li { margin-top }) - not inside the story's rail and card stack */
.story .rail__list > li, .story .story__captions > li { margin: 0; }
@media (max-width: 420px) { .story .rail__btn { font-size: 10.5px; letter-spacing: 0; } }
.story .story-card {
  background: rgba(255,255,255,0.96); color: var(--color-ink-900); border-radius: 14px;
  padding: clamp(14px, 1.8vw, 24px) clamp(16px, 2.2vw, 28px); box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  max-height: var(--card-max, 50svh); overflow: auto; overscroll-behavior: contain; text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.story .story-card .container { max-width: none; padding: 0; margin: 0; }
.story .story-card .split, .story .story-card .split__body { display: block; }
.story .story-card .section__intro { margin: 0 0 0.6rem; max-width: none; }
.story .story-card h2 { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.2; margin: 0 0 0.5rem; color: var(--color-navy-950); }
.story .story-card p { font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.55rem; }
.story .story-card .feature-list { margin: 0 0 0.55rem; }
.story .story-card .feature-list li { font-size: 0.95rem; }
.story .story-card .btn { margin-top: 0.15rem; }
.story .story-card .faq { margin: 0; }
.story .story-card .faq__item summary { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.95rem; }
.story .story-card li, .story .story-card p, .story .story-card details { break-inside: avoid; }
.story-gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 0.75rem; }
.story-gallery-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
/* card wide enough: heading across, text in two columns; FAQ in two columns; gallery text left / photos right */
@container (min-width: 540px) {
  .story .story-card .split__body { column-count: 2; column-gap: 28px; }
  .story .story-card .split__body > h2 { column-span: all; }
  .story .story-card .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .story .story-card .btn-group { margin-top: 0.5rem; }
  .story-card--gallery .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 24px; align-items: center; }
  .story-card--gallery .section__intro { grid-column: 1; grid-row: 1; }
  .story-card--gallery .story-gallery-thumbs { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .story-card--gallery .btn { grid-column: 1; grid-row: 2; justify-self: start; }
}
/* overlay layouts (desktop, and any landscape window): card on the video, bottom-left, clear of rail and CTA bar */
@media (min-width: 900px), (min-aspect-ratio: 5/4) {
  .story--wide .story-card {
    background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .story--wide .story__side--text {
    width: min(820px, calc(var(--frame-w) - 230px));
    bottom: max(calc((100% - var(--frame-h)) / 2 + 20px), calc(var(--cta) + 12px));
  }
  .story { --card-max: min(calc(var(--frame-h) * 0.62), calc(100svh - var(--cta) - 40px)); }
}
/* portrait phones and tablets: video on top, card underneath, above the CTA bar */
@media (max-width: 899px) and (max-aspect-ratio: 5/4) {
  .story--wide .story__stage { --frame-w: 100cqi; --frame-top: calc(var(--frame-h) / 2 + 60px); }  /* vw: a % here would resolve against the stage height */
  .story--wide .story__side--text { position: absolute; left: 0; right: 0; width: auto; top: calc(var(--frame-h) + 72px); bottom: auto; padding: 0 var(--gutter); }
  .story--wide .cap { align-self: start; }
  .story { --card-max: calc(100svh - var(--frame-h) - 84px - var(--cta)); }
  .story--wide .story__hint { top: calc(var(--frame-h) + 36px); }
}
/* near-square desktop windows (about 4:3): same overlay as wide screens - cancel the template's
   'caption under the frame' rule so the card never runs past the end of the story */
@media (min-width: 900px) and (max-aspect-ratio: 4/3) {
  .story--wide .story__stage { --frame-top: 50%; }
  .story--wide .story__side--text {
    top: auto; left: calc((100% - var(--frame-w)) / 2 + 24px);
    width: min(820px, calc(var(--frame-w) - 230px));
    bottom: max(calc((100% - var(--frame-h)) / 2 + 20px), calc(var(--cta) + 12px));
  }
  .story--wide .cap { align-self: end; }
}
/* real-photo / AI-transition badge (top-left of the video frame) */
.story__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px; border-radius: 999px; color: #fff;
  font: 600 12.5px/1 var(--font-accent); letter-spacing: 0.01em; white-space: nowrap;
  background: rgba(11,31,51,0.72); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: background-color 0.35s ease; pointer-events: none;
}
.story__badge.is-ai { background: rgba(31,92,69,0.8); }
.story__badge-ic { width: 15px; height: 15px; flex: none; }
.story__badge-ic--ai { display: none; }
.story__badge.is-ai .story__badge-ic--ai { display: block; }
.story__badge.is-ai .story__badge-ic--photo { display: none; }
@media (max-width: 420px) { .story__badge { font-size: 11.5px; padding: 6px 10px 6px 8px; top: 8px; left: 8px; } }
/* disclosure line right above the story */
.story-disclosure { padding: 1.25rem 0 1.5rem; background: var(--color-sand-50); border-top: 1px solid var(--color-border); }
.story-disclosure__title { margin: 0; font-size: 0.975rem; color: var(--color-ink-600); }
.story-disclosure__title strong { color: var(--color-navy-950); }
.story-disclosure__more { margin-top: 0.35rem; font-size: 0.925rem; color: var(--color-ink-600); }
.story-disclosure__more summary { cursor: pointer; color: var(--color-forest-700); font-weight: 600; width: max-content; }
.story-disclosure__more p { margin: 0.5rem 0 0; max-width: 70ch; }
.story .story-card { overflow-x: clip; }
.story-disclosure, .story-disclosure__more summary { max-width: 100%; }
/* the site header slides away while the story is pinned (back on focus / when the menu is open) */
.site-header { transition: transform 0.3s ease; }
html.story-pinned .site-header:not(:focus-within):not(.is-open) { transform: translateY(-100%); }