body.home-story-preview { overflow-x: clip; }
body.home-story-preview #about, body.home-story-preview #contact { scroll-margin-top: 76px; }
#pump-home-story {
  --story-top: 76px;
  scroll-margin-top: var(--story-top);
  padding: 0;
  background: linear-gradient(#55544f, #bfc0bf);
  color: #263230;
  isolation: isolate;
}
.pump-story-sticky {
  width: 100%;
  position: relative;
  height: min(960px, calc(100vh - var(--story-top)));
  height: min(960px, calc(100svh - var(--story-top)));
  min-height: 420px;
  padding: 0;
}
.pump-story-sticky::after { content: ''; position: absolute; inset: 0 0 auto; height: 100px; background: linear-gradient(#0007, transparent); pointer-events: none; z-index: 1; }
.pump-story-heading { position: absolute; top: 16px; left: 24px; right: 24px; z-index: 2; pointer-events: none; }
.pump-story-heading .pump-story-eyebrow, .pump-story-intro { display: none; }
.pump-story-eyebrow { color: #8e3616; text-transform: uppercase; font-size: 11px; letter-spacing: .16em; font-weight: 600; margin-bottom: 6px; }
.pump-story-heading h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; color: #f7f5ed; }
.pump-story-intro { font-size: 12px; line-height: 1.6; max-width: 310px; }
.pump-story-intro a { color: #78351e; font-size: 11px; text-underline-offset: 4px; display: inline-block; margin-top: 7px; }
.pump-story-view { min-height: 0; min-width: 0; position: absolute; inset: 0; outline-offset: -3px; overflow: hidden; }
.pump-story-background { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pump-story-view img, .pump-story-view .pump-story-video { position: absolute; display: block; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: fill; }
.pump-story-view [hidden], .pump-story-controls [hidden] { display: none !important; }
.pump-story-loading { position: absolute; bottom: 8px; left: 0; padding: 4px 9px; font-size: 10px; color: #263230; background: #e9e6dfed; }
.pump-story-controls { position: absolute; bottom: 14px; left: 24px; right: 24px; z-index: 2; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; }
.pump-story-control-row, .pump-story-meter, .pump-story-error { grid-column: 1 / -1; }
.pump-story-control-row { display: flex; gap: 16px; min-height: 30px; align-items: center; justify-content: space-between; }
.pump-story-steps { display: flex; gap: clamp(12px, 2vw, 32px); }
.pump-story-step { color: #34423d; padding: 6px 0; font: 500 11px 'Inter', sans-serif; white-space: nowrap; }
.pump-story-step small { font-size: 10px; padding-right: 6px; opacity: .8; }
.pump-story-step[aria-current] { color: #8e3616; }
.pump-story-hint { font-size: 10px; color: #34423d; }
.pump-story-actions { display: flex; gap: 14px; align-items: center; }
.pump-story-watch { border: 1px solid #58645c; border-radius: 3px; background: #e9e4d2cc; color: #25352f; padding: 7px 13px; font: 600 11px 'Inter', sans-serif; white-space: nowrap; cursor: pointer; }
.pump-story-meter { height: 2px; background: #89958e; margin: 5px 0 7px; }
.pump-story-meter span { display: block; height: 100%; width: var(--story-progress, 0%); background: #a84421; }
.pump-story-replay { border: 0; background: none; color: #513420; padding: 4px 0; font: 10px 'Inter', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Keep the footer's height fixed when Replay first appears. Otherwise the next
   native scroll resizes the film even though its video camera is stationary. */
#pump-story-replay[hidden] { display: block !important; visibility: hidden; }
.pump-story-links { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding-top: 0; font-size: 10px; }
.pump-story-links > p { max-width: 46%; }
.pump-story-links > div { display: flex; flex-wrap: wrap; gap: 24px; }
.pump-story-links a { color: #77351f; font-weight: 600; text-decoration: none; border-bottom: 1px solid #77351f66; padding: 5px 0; }
.pump-story-links a:hover, .pump-story-intro a:hover { color: #a84421; }
.pump-story-error { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; padding-top: 12px; color: #77351f; }
.pump-story-error button { font: inherit; background: transparent; color: inherit; border: 1px solid currentColor; padding: 5px 9px; cursor: pointer; }
.pump-story-error a { color: inherit; }
#pump-home-story button:focus-visible, #pump-home-story a:focus-visible { outline: 2px solid #8e3616; outline-offset: 4px; }
.pump-story-nojs { padding: 0 5% 20px; }
@media (max-width: 700px) {
  .pump-story-heading { top: 14px; left: 18px; right: 18px; }
  .pump-story-eyebrow { font-size: 9px; }
  .pump-story-heading h2 { font-size: clamp(24px, 5.8vw, 32px); }
  .pump-story-intro { max-width: none; margin-top: 8px; font-size: 11px; line-height: 1.5; }
  .pump-story-intro a { margin-top: 5px; font-size: 10px; }
  .pump-story-controls { bottom: 14px; left: 18px; right: 18px; column-gap: 12px; }
  .pump-story-hint { font-size: 9px; }
  .pump-story-actions { gap: 8px; }
  .pump-story-actions:has(.pump-story-watch:not([hidden])) .pump-story-hint { display: none; }
  .pump-story-watch { font-size: 10px; padding: 6px 9px; }
  .pump-story-steps { gap: 13px; }
  .pump-story-step { font-size: 10px; }
  .pump-story-step small { font-size: 8px; padding-right: 3px; }
  .pump-story-links { font-size: 9px; gap: 10px; }
  .pump-story-links > p { display: none; }
  .pump-story-links > div { gap: 12px; }
  .pump-story-loading { bottom: 100px; }
}
@media (max-height: 610px) and (min-width: 701px) {
  .pump-story-intro p { display: none; }
  .pump-story-heading h2 { font-size: 24px; }
  .pump-story-eyebrow { font-size: 9px; }
}