/* About — scroll-jacked deck (about-slideshow pattern).
   Default (no JS / reduced motion): stacked full-bleed bands.
   With JS, assets/js/about-slideshow.js adds .is-deck and intercepts each scroll
   gesture to advance the inner stage exactly one full-screen slide. */

.flm-slideshow {
  padding-inline: 0;
  background-color: var(--wp--preset--color--surface-deep);
  color: var(--wp--preset--color--text-primary);
}/* Tuck the deck under the sticky site header (z-index:100,
stays on top) so the
   opening slide fills the viewport from the very top. Scoped to .is-deck so the
   stacked-bands fallback (JS-off / reduced motion) keeps its normal top margin. */
body.page-company .flm-slideshow.is-deck,
stays on top) so the
   opening slide fills the viewport from the very top. Scoped to .is-deck so the
   stacked-bands fallback (JS-off / reduced motion) keeps its normal top margin. */
body.page-company html.flm-deck-js .flm-slideshow { margin-top: -50px; }

/* Each slide = full-bleed image + scrim + copy. */
.flm-slideshow__slide { position: relative; display: flex; overflow: hidden; }
.flm-slideshow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim variants. */
.flm-slideshow__scrim { position: absolute; inset: 0; }
.flm-slideshow__scrim--bl {
  background:
    linear-gradient(180deg, rgba(3,9,16,0.6) 0%, rgba(3,9,16,0) 14%),
    linear-gradient(90deg, rgba(3,9,16,0.86) 0%, rgba(3,9,16,0.4) 48%, rgba(3,9,16,0) 82%),
    linear-gradient(0deg, rgba(3,9,16,0.82) 0%, rgba(3,9,16,0) 55%);
}
.flm-slideshow__scrim--center {
  background: radial-gradient(120% 90% at 50% 50%, rgba(3,9,16,0.4) 0%, rgba(3,9,16,0.78) 100%);
}

/* Copy column. */
.flm-slideshow__copy {
  position: relative; z-index: 1;
  width: min(92vw, 1180px); margin-inline: auto;
}
.flm-slideshow__copy--belief,
.flm-slideshow__copy--story,
.flm-slideshow__copy--proof,
.flm-slideshow__copy--dealer,
.flm-slideshow__copy--statement,
.flm-slideshow__copy--poem,
.flm-slideshow__copy--intro { align-self: end; }
.flm-slideshow__copy--cta {
  align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center;
}

/* Opening hero / intro: Flamingo logo (or eyebrow) + accent rule + statement,
   bottom-left like the rest of the slideshow and the homepage hero. */
.flm-slideshow__logo {
  display: block;
  width: clamp(132px, 14vw, 178px);
  height: auto;
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem);
}
.flm-slideshow__rule {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--wp--preset--color--accent-pink);
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
}
/* Scroll prompt: only on the active deck, pinned centred at the bottom of the
   viewport across every slide. Centred via left/right + margin-inline:auto so the
   bounce animation's translateY doesn't fight a centring transform. */
.flm-slideshow__scrollcue { display: none; }.flm-slideshow.is-deck .flm-slideshow__scrollcue,
html.flm-deck-js .flm-slideshow .flm-slideshow__scrollcue {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  position: absolute; z-index: 5;
  left: 0; right: 0; bottom: clamp(1.5rem, 5svh, 3rem);
  margin-inline: auto; width: max-content;
  animation: flm-slidecue-bounce 1.6s ease-in-out infinite;
}
.flm-slideshow__cuecaret { display: block; width: 26px; height: auto; }
@keyframes flm-slidecue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Shared text. */
.flm-slideshow__eyebrow {
  margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--plex);
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}
.flm-slideshow__num {
  display: block; font-family: var(--wp--preset--font-family--plex);
  font-weight: 600; font-size: clamp(0.9rem, 1.2vw, 1.05rem); letter-spacing: 0.14em;
  color: var(--wp--preset--color--text-muted); margin-bottom: 0.75rem;
}
.flm-slideshow__head {
  margin: 0 0 1rem; font-family: var(--wp--preset--font-family--plex);
  font-weight: 600; font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.12; max-width: 18ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.flm-slideshow__statement {
  margin: 0; font-family: var(--wp--preset--font-family--plex);
  font-weight: 600; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.1; max-width: 20ch;
  text-shadow: 0 2px 22px rgba(0,0,0,0.5);
}
.flm-slideshow__lead {
  margin: 0; max-width: 56ch; font-weight: 300; font-size: var(--wp--preset--font-size--body);
  line-height: 1.7; text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.flm-slideshow__lead strong { font-weight: 600; }
.flm-slideshow__supp {
  margin: 0 0 1.25rem; font-weight: 300; font-size: var(--wp--preset--font-size--body);
  line-height: 1.6; max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
/* Poem cadence (Our Story Draft, BugHerd #180): big opener, short lines,
   optional emphasized closer. Sizes step down from the statement so the
   sequence reads as one voice building line by line. */
.flm-slideshow__statement--poem { margin-bottom: 1.25rem; }
.flm-slideshow__poem { display: flex; flex-direction: column; gap: 0.35rem; }
.flm-slideshow__poemline {
  margin: 0; font-family: var(--wp--preset--font-family--plex);
  font-weight: 300; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.45;
  max-width: 34ch; color: var(--wp--preset--color--text-secondary);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.flm-slideshow__poemclose {
  margin: 1.25rem 0 0; font-family: var(--wp--preset--font-family--plex);
  font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.3;
  max-width: 26ch; color: var(--wp--preset--color--text-primary);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
/* Signature screen: kicker line above "Make Time Count." + wordmark below. */
.flm-slideshow__kicker {
  margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--plex);
  font-weight: 300; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.4;
  color: var(--wp--preset--color--text-secondary); text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.flm-slideshow__copy--cta .flm-slideshow__kicker { margin-inline: auto; }
.flm-slideshow__logo--sign { margin: 1.5rem auto 0; display: block; }

.flm-slideshow__proof {
  margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.18);
  font-size: var(--wp--preset--font-size--caption); line-height: 1.5;
  color: var(--wp--preset--color--text-secondary); max-width: 46ch;
}

/* HUD + skip only show on the active deck. */
.flm-slideshow__hud, .flm-slideshow__skip { display: none; }html:not(.flm-deck-js) /* --- FALLBACK (no JS / reduced motion): stacked bands -------------------- */
.flm-slideshow:not(.is-deck) .flm-slideshow__slide { min-height: clamp(460px, 80svh, 820px); }html:not(.flm-deck-js) .flm-slideshow:not(.is-deck) .flm-slideshow__copy { padding-block: clamp(3rem, 7vw, 6rem); }

@media (max-width: 767px) {
  .flm-slideshow__head { font-size: clamp(1.6rem, 8vw, 2.25rem); }
  .flm-slideshow__statement { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .flm-slideshow__poemline { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
  .flm-slideshow__poemclose { font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
  .flm-slideshow__kicker { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }html:not(.flm-deck-js) .flm-slideshow:not(.is-deck) .flm-slideshow__slide { min-height: clamp(420px, 70svh, 640px); }
}/* ======================================================================== */
/* SCROLL-JACKED DECK (JS adds .is-deck) — GSAP Observer                     */
/* ======================================================================== */
/* The section is one viewport tall; the slides are absolutely stacked and the
   active one is composited by GSAP (opacity / clip-path). Input is handled by
   assets/js/about-slideshow.js via GSAP Observer — there is no inner scroller.
   At the last slide a downward gesture releases to normal page scroll. */
.flm-slideshow.is-deck,
/* ======================================================================== */
/* SCROLL-JACKED DECK (JS adds .is-deck) — GSAP Observer                     */
/* ======================================================================== */
/* The section is one viewport tall; the slides are absolutely stacked and the
   active one is composited by GSAP (opacity / clip-path). Input is handled by
   assets/js/about-slideshow.js via GSAP Observer — there is no inner scroller.
   At the last slide a downward gesture releases to normal page scroll. */
html.flm-deck-js .flm-slideshow { position: relative; height: 100svh; overflow: hidden; }
/* While Observer is driving the deck (JS toggles .is-engaged), stop native
   touch-scroll and rubber-banding so a swipe advances a slide instead of
   sliding the page down to the footer. Lifted on the last-slide hand-back. */
.flm-slideshow.is-deck.is-engaged { touch-action: none; overscroll-behavior: none; }.flm-slideshow.is-deck .flm-slideshow__sticky,
html.flm-deck-js .flm-slideshow .flm-slideshow__sticky { position: absolute; inset: 0; }.flm-slideshow.is-deck .flm-slideshow__stage,
html.flm-deck-js .flm-slideshow .flm-slideshow__stage { position: absolute; inset: 0; }.flm-slideshow.is-deck .flm-slideshow__slide,
html.flm-deck-js .flm-slideshow .flm-slideshow__slide {
  position: absolute; inset: 0; min-height: 0; height: 100%;
  opacity: 0;                            /* GSAP sets the live values; this prevents a stacked flash */
}.flm-slideshow.is-deck .flm-slideshow__slide.is-active,
html.flm-deck-js .flm-slideshow .flm-slideshow__slide.is-active { opacity: 1; }.flm-slideshow.is-deck .flm-slideshow__copy,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy {
  height: 100%; display: flex; flex-direction: column;
  padding-block: clamp(5rem, 12svh, 8rem) clamp(4.5rem, 12svh, 7rem);
}.flm-slideshow.is-deck .flm-slideshow__copy--belief,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--belief,
.flm-slideshow.is-deck .flm-slideshow__copy--story,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--story,
.flm-slideshow.is-deck .flm-slideshow__copy--proof,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--proof,
.flm-slideshow.is-deck .flm-slideshow__copy--dealer,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--dealer,
.flm-slideshow.is-deck .flm-slideshow__copy--statement,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--statement,
.flm-slideshow.is-deck .flm-slideshow__copy--poem,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--poem,
.flm-slideshow.is-deck .flm-slideshow__copy--intro,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--intro { justify-content: flex-end; }.flm-slideshow.is-deck .flm-slideshow__copy--cta,
html.flm-deck-js .flm-slideshow .flm-slideshow__copy--cta { justify-content: center; }/* Top safe-area var (used by the Skip button) so it clears the sticky header
   and the WP admin bar when logged in. */
.flm-slideshow.is-deck,
/* Top safe-area var (used by the Skip button) so it clears the sticky header
   and the WP admin bar when logged in. */
html.flm-deck-js .flm-slideshow { --flm-slide-top: clamp(4rem, 8svh, 5rem); }body.admin-bar .flm-slideshow.is-deck,
body.admin-bar html.flm-deck-js .flm-slideshow { --flm-slide-top: calc(clamp(4rem, 8svh, 5rem) + 40px); }/* HUD: "OUR STORY" + page count stacked to the LEFT of a VERTICAL progress bar,
pinned to the right edge and vertically centred. */
.flm-slideshow.is-deck .flm-slideshow__hud,
pinned to the right edge and vertically centred. */
html.flm-deck-js .flm-slideshow .flm-slideshow__hud {
  display: flex; align-items: center; gap: 0.9rem;
  position: absolute; z-index: 5;
  top: 50%; right: clamp(1.25rem, 4vw, 3rem); transform: translateY(-50%);
}
.flm-slideshow__hud-labels { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.flm-slideshow__deckname {
  font-family: var(--wp--preset--font-family--plex);
  font-size: clamp(0.82rem, 1vw, 0.95rem); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wp--preset--color--text-primary);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.flm-slideshow__count {
  font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 600; margin-top: 4px;
  color: var(--wp--preset--color--accent-pink);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
/* Vertical bar ~2/3 of the viewport height. */
.flm-slideshow__progress {
  width: 3px; height: 66svh;
  background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden;
}
.flm-slideshow__progress i {
  display: block; width: 100%; height: 0;
  background: var(--wp--preset--color--accent-pink); border-radius: 2px;
  transition: height 0.25s ease;
}

/* Mobile: the centred 66svh rail crossed the slide copy on phones — tuck the
   HUD into the top-right corner instead, with a short bar (BugHerd #201). */
@media (max-width: 767px) {.flm-slideshow.is-deck .flm-slideshow__hud,
html.flm-deck-js .flm-slideshow .flm-slideshow__hud {
    top: var(--flm-slide-top, 4.5rem);
    right: 1.1rem;
    transform: none;
    align-items: flex-start;
  }
  .flm-slideshow__progress { height: 72px; }
}/* Skip: top-left text button. */
.flm-slideshow.is-deck .flm-slideshow__skip,
/* Skip: top-left text button. */
html.flm-deck-js .flm-slideshow .flm-slideshow__skip {
  display: inline-flex; align-items: center; gap: 0.35rem; position: absolute; z-index: 5;
  top: var(--flm-slide-top, 4.5rem); left: clamp(1.25rem, 4vw, 3rem);
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--wp--preset--font-family--plex); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wp--preset--color--text-muted);
  transition: color 0.15s ease;
}.flm-slideshow.is-deck .flm-slideshow__skip:hover,
html.flm-deck-js .flm-slideshow .flm-slideshow__skip:hover { color: var(--wp--preset--color--text-primary); }

/* Reduced motion / JS-off: .is-deck is never added, so the :not(.is-deck) fallback
   above (stacked full-bleed bands, normal scrolling) applies — nothing to undo. */

/* Proof type: problem (muted, italic) → solution (large) → outcome. */
.flm-slideshow__problem {
  margin: 0 0 0.5rem; font-style: italic; font-weight: 300;
  font-size: var(--wp--preset--font-size--body); line-height: 1.5;
  color: var(--wp--preset--color--text-muted); max-width: 40ch;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.flm-slideshow__head--solution { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.85rem; }

/* CTA buttons. */
.flm-slideshow__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.flm-slideshow__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.6rem; border-radius: 4px; font-family: var(--wp--preset--font-family--plex);
  font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease;
}
/* Hovers go accent-pink — the sitewide action affordance (BugHerd #198). */
.flm-slideshow__btn--fill { background: #FFFFFF; color: var(--wp--preset--color--surface-deep); border: 1px solid #FFFFFF; }
.flm-slideshow__btn--fill:hover,
.flm-slideshow__btn--fill:focus-visible { background: var(--wp--preset--color--accent-pink); border-color: var(--wp--preset--color--accent-pink); color: #FFFFFF; }
.flm-slideshow__btn--out { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.6); }
.flm-slideshow__btn--out:hover,
.flm-slideshow__btn--out:focus-visible { border-color: var(--wp--preset--color--accent-pink); color: var(--wp--preset--color--accent-pink); background: transparent; }

/* ---- Pre-JS deck reservation (CLS audit 2026-08-10) ----------------------
   The deck used to render as ~5000px of stacked bands and then collapse to one
   viewport when .is-deck landed — a 0.33-0.38 shift that yanked the whole page.
   An inline <head> script sets html.flm-deck-js (skipped under reduced-motion;
   removed by about-slideshow.js if GSAP is missing), so every rule above
   applies from the first paint. Until GSAP composites, show slide 1. */
html.flm-deck-js .flm-slideshow:not(.is-deck) .flm-slideshow__slide:first-of-type { opacity: 1; }