/* ============================================================
   HP Hero Marquee — structure & interactivity ONLY.
   Every rule is scoped under .hp-marquee so nothing here can
   affect any element outside the hero. All visual design
   (colors, radius, shadow, padding, type) is handled with
   Tailwind + existing site classes in the markup.

   ------------------------------------------------------------
   PART 1 below is the Pixai HP marquee stylesheet. Differences
   from the original, so it can be diffed and kept in sync:
     1. Pixai blue/cyan (#006CFF, #00e7ff, rgba(0,100,255,.1)) and
        the near-black scrim (#00000d) are now CSS variables
        (--hp-accent*, --hp-scrim-rgb), set to SPS red / ink in PART 2.
     2. `.main .hp-marquee__badge ...` selectors lose the `.main`
        ancestor (this page has no .main wrapper).
     3. The `.hp-marquee__icon--ai` mask rules are removed: they
        hot-linked a Pixai CDN icon that does not belong on SPSLink.
     4. Play/pause position reads --hp-marquee-container (default
        100rem, the Pixai container) so it lines up with this page's
        container.
     5. `height: 100svh` added after `100vh` (mobile browser chrome).
     8. (SPS, 2026-10-14) The hero's height is `100svh` minus `--hp-below` (default 0, so stand-alone it is unchanged): the page sets
        `--hp-below` to the height of the trust strip under the hero, so that strip, with its five mini-cards, sits inside the first screen.
        The phone rule keeps its original 80vh when the variable is not set.
     6. The two mobile rules for the Tailwind classes .max-w-sm /
        .max-w-xs are dropped: nothing here uses those classes.
     7. `.hp-marquee__tabs` right padding is `calc(50vw - 50%)` (mirrors the left
        inset) instead of a fixed 84px. The 84px reserved room for a play/pause
        button at the right end of the strip, but here that button is placed
        outside the strip, so it only made the strip scroll for no reason
        (a few px at ~1000-1050px wide). The phone rule that set `padding-right:
        64px` for the same reason is removed too, so phones end the strip at the
        same inset as the start.
   PART 2 is new: the SPS visual layer that stands in for the
   Tailwind utility classes the original markup relied on.
   ============================================================ */

/* ============================================================
   PART 1: structure + interactivity
   ============================================================ */

/* Container — full viewport hero */
.hp-marquee {
  position: relative;
  width: 100%;
  height: 100vh;
  height: calc(100svh - var(--hp-below, 0px));
  min-height: 560px;
  overflow: hidden;
}
/* Slides crossfade; only .is-active is shown */
.hp-marquee__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
}
.hp-marquee__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
/* Background image layer (cover) + slow zoom while active */
.hp-marquee__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 10s linear;
}
.hp-marquee__slide.is-active .hp-marquee__bg {
  transform: scale(1.12);
}
/* Slide 1 brand gradient (no photo) */
.hp-marquee__bg--hero {
  /*background: radial-gradient(120% 120% at 80% 10%, rgba(0, 231, 255, 0.18), rgba(0, 0, 13, 0) 45%), radial-gradient(90% 90% at 10% 90%, rgba(60, 123, 255, 0.18), rgba(0, 0, 13, 0) 50%), linear-gradient(160deg, #061024, #00000d 60%);*/
}
/* Wistia background video on the hero slide — fills the slide, clicks pass through */
.hp-marquee__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Slide 1 zooms slowly like the others (2026-10-15). It used to be held still ("no Ken Burns zoom on the hero slide") because the Pixai original had a background video there; it is a photo now.
   The other slides zoom with a transition when they GAIN .is-active; slide 1 already has it when the page loads, so a transition would never run on first view: a keyframe animation (same 1.05 > 1.12 over the
   slide's 10 s) does it, on load and every time the slide comes round again. */
@keyframes hp-hero-zoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }
.hp-marquee__slide--hero.is-active .hp-marquee__bg { animation: hp-hero-zoom 10s linear both; }
/* Legibility scrim over photos */
.hp-marquee__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(var(--hp-scrim-rgb, 0 0 13) / 0.1) 0%, rgb(var(--hp-scrim-rgb, 0 0 13) / 1) 100%)
}
/* Two-CTA row spacing on use-case slides */
.hp-marquee__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
/* ---------- Tab cards (bottom) ---------- */
/* Full-width bar; the inner .container (from the site) left-aligns the
   tab row with the slide content. Play/pause sits at the row's right end. */
.hp-marquee__tabsbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1vh;
  z-index: 20;
  padding-bottom: 50px;
}
.hp-marquee__tabs {
  min-width: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Full-bleed on BOTH sides: negative margins push the scroller's edges
     out to the screen, while padding-left re-insets the first card so it
     stays aligned with the slide content. Cards can scroll off either
     edge. calc() self-corrects for the container's max-width + padding. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 calc(50vw - 50%); /* both insets = content edge, so the first and last card line up with the page content (adaptation 7) */
  scroll-padding-left: calc(50vw - 50%);
}
.hp-marquee__tabs::-webkit-scrollbar {
  display: none;
}
.hp-marquee__tab {
  position: relative;
  flex: 0 0 auto;
  min-width: 280px;
  min-height: 95px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  overflow: visible;
}
.hp-marquee__tab:hover {
  /*  transform: translateY(-2px);
  overflow: visible;*/
}
.hp-marquee__tab.is-active {
  background: rgb(var(--hp-accent-rgb, 0 100 255) / 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: visible;
}
/* Icon / thumbnail badge, top-left */
.hp-marquee__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  overflow: hidden;
}
.hp-marquee__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-marquee__badge img {
  object-fit: contain;
  display: block;
  height: 25px;
  width: 22px;
}
.hp-marquee__badge svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.85);
}
.hp-marquee__tab.is-active .hp-marquee__badge svg {
  color: var(--hp-accent-light, #00e7ff);
}
.hp-marquee__tab.is-active .hp-marquee__badge {
  box-shadow: 0 0 0 1px rgb(var(--hp-accent-light-rgb, 0 231 255) / 0.5);
}
/* Per-slide progress bar, pinned to card bottom */
.hp-marquee__track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  opacity: 0;
}
.is-active .hp-marquee__track {
  opacity: 1;
}
.hp-marquee__fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(to right, var(--hp-accent, #006CFF), var(--hp-accent-light, #00e7ff));
  border-radius: 3px;
}
/* ---------- Play / pause (floats at the bottom-right of the marquee) ---------- */
.hp-marquee__playpause {
  position: absolute;
  right: max(50px, calc((100vw - var(--hp-marquee-container, 100rem)) / 2 + 24px));
  bottom: 60px;
  z-index: 30;
  width: 48px;
  height: 48px;
}
.hp-marquee__playpause .hp-ic-play {
  display: none;
}
.hp-marquee.is-paused .hp-marquee__playpause .hp-ic-play {
  display: block;
}
.hp-marquee.is-paused .hp-marquee__playpause .hp-ic-pause {
  display: none;
}
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hp-marquee.hero {
  	height: calc(100svh - var(--hp-below, 20vh)) !important;
	}
	.hp-marquee__bg {
     background-position: calc(50% + 60px) center;
   }
	.hp-marquee__tabsbar {
    padding-bottom: 20px;
  }
  .hp-marquee__tabs {
    gap: 10px;
  }
  .hp-marquee__playpause {
    right: 16px;
    bottom: 170px;
    width: 44px;
    height: 44px;
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hp-marquee__slide, .hp-marquee__bg {
    transition: none;
  }
  .hp-marquee__bg, .hp-marquee__slide.is-active .hp-marquee__bg {
    transform: none;
  }
  .hp-marquee__slide--hero.is-active .hp-marquee__bg { animation: none; }
}

/* ============================================================
   PART 2: SPS visual layer (replaces the Tailwind utilities)
   ============================================================ */
.hp-marquee {
  /* brand tokens for the marquee (Pixai blue/cyan -> SPS red) */
  --hp-accent: var(--color-primary);
  --hp-accent-rgb: 200 16 46;
  --hp-accent-light: #ff7b8f;
  --hp-accent-light-rgb: 255 123 143;
  --hp-scrim-rgb: 21 25 31;
  --hp-marquee-container: var(--container-max, 80rem);
  --hp-btn: 36px; /* play/pause and next: same size on every screen (adobe.com uses 42px) */
  --hp-btn-gap: 1.5rem; /* breathing room between those buttons and the tab cards below them (adobe.com: 24px) */
  --hp-tab-w: 9rem; /* tablets and phones (where the strip scrolls): every tab card is this wide, 144px (fits "Family and camping" at 13px: 120px of text); raise it if a longer title is added. From 1024px the tabs sit on the page's column grid instead. */
  --hp-marquee-gap: 1.5rem; /* space between whatever sits above the hero (the site header) and the hero itself */
  --hp-play-gap: 6rem; /* wide screens (> the container): distance from the last tab to the play/pause button, 96px */
  margin-top: var(--hp-marquee-gap);
  background: var(--color-secondary);
  color: #fff;
}
.hp-marquee:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* Slide background: gradient stand-in for photography / video (see index.html for the art direction).
   --ph is the placeholder modifier: remove it when a real photo is set, so Part 1's mobile focal-point shift applies again. */
.hp-marquee__bg--ph { background-image: linear-gradient(135deg, var(--from, #a00d25), var(--to, #15191f)); background-position: center; }
.hp-marquee__ph { position: absolute; right: 8%; top: 20%; width: clamp(9rem, 22vw, 20rem); height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; color: rgb(255 255 255 / 0.1); }
.hp-marquee__note { position: absolute; z-index: 1; top: 1.5rem; right: max(var(--gutter, 1.5rem), calc((100vw - var(--hp-marquee-container)) / 2 + var(--gutter, 1.5rem))); max-width: 22rem; text-align: right; font-size: 0.75rem; line-height: 1.4; color: rgb(255 255 255 / 0.7); }

/* Real photo slides (instead of the --ph gradient). Focal point is set per slide with --pos-d (desktop) and --pos-m (phones),
   so the subject stays in frame when the photo is cropped to a portrait box. */
.hp-marquee__bg--photo { background-position: var(--pos-d, center); transform-origin: var(--zoom-origin, 50% 50%); } /* --zoom-origin: where the slow zoom is anchored; use "50% 0" when something important touches the top of the picture */
@media (max-width: 720px) { .hp-marquee__bg--photo { background-position: var(--pos-m, var(--pos-d, center)); } }
/* Photo slides: the sky already carries white text, so keep the scrim light and only let it build up behind the tab cards.
   (The base scrim above runs 10% -> 100% over the full height; that was tuned for gradients and dims a photo's horizon.) */
.hp-marquee__slide--photo .hp-marquee__scrim {
  background:
    linear-gradient(90deg, rgb(var(--hp-scrim-rgb) / 0.5) 0%, rgb(var(--hp-scrim-rgb) / 0.3) 40%, rgb(var(--hp-scrim-rgb) / 0) 65%), /* copy column: keeps white text readable over pale areas (window frames, walls) */
    linear-gradient(180deg, rgb(var(--hp-scrim-rgb) / 0.2) 0%, rgb(var(--hp-scrim-rgb) / 0) 40%, rgb(var(--hp-scrim-rgb) / 0.06) 62%, rgb(var(--hp-scrim-rgb) / 1) 100%);
}
/* Phones: the copy runs full width over the subject, so it needs a firmer veil than the open space on wide screens.
   --hp-veil (0-1, default 0.5) sets its strength per slide: a bright photo wants more, one that is already dark (night scenes) wants less. */
@media (max-width: 720px) {
  .hp-marquee__slide--photo .hp-marquee__scrim {
    background: linear-gradient(180deg, rgb(var(--hp-scrim-rgb) / calc(var(--hp-veil, 0.5) * 0.6)) 0%, rgb(var(--hp-scrim-rgb) / var(--hp-veil, 0.5)) 40%, rgb(var(--hp-scrim-rgb) / calc(var(--hp-veil, 0.5) + 0.12)) 70%, rgb(var(--hp-scrim-rgb) / 1) 100%);
  }
}
/* Keep the copy in the open side of the photo (radios sit on the right), clear of the subject.
   Wide screens only: on phones the copy runs full width over the photo. */
@media (min-width: 721px) {
  /* Headlines stay on ONE line when the left half of the screen has room for them (2026-10-15; the limit was 36rem / 42vw, which broke "Kids, where are you?" in two at 1440 px). Up to half the screen's width,
     60rem at most; longer headlines still wrap, balanced. */
  .hp-marquee__slide .hp-marquee__title { max-width: min(60rem, 50vw); }
  .hp-marquee__slide--photo .hp-marquee__title { font-size: clamp(2.25rem, 1rem + 3.9vw, 4.25rem); }
  .hp-marquee__slide--photo .hp-marquee__lede { max-width: min(30rem, 40vw); }
}

/* Slide copy */
.hp-marquee__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 3rem; padding-bottom: 14rem; }
.hp-marquee__eyebrow { margin: 0 0 0.5rem; width: fit-content; max-width: 100%; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: var(--color-primary, #c8102e); } /* the section-label pill (styles.css), black translucent because it sits on a photo (2026-10-15) */
.hp-marquee__title { margin: 1rem 0 0; max-width: 18ch; font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.hp-marquee__lede { margin: 1.25rem 0 1.5rem; max-width: 36rem; text-wrap: pretty; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.5; color: rgb(255 255 255 / 0.85); }
.btn-ghost-light { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.6); color: #fff; }
.btn-ghost-light:hover { background: rgb(255 255 255 / 0.18); border-color: #fff; color: #fff; }
.hp-marquee__ph, .hp-marquee__note { pointer-events: none; }

/* Tab cards */
.hp-marquee__tab {
  /* Icon on top, title below, progress bar under the title; all cards the same width: at least --hp-tab-w, stretching equally when the strip has spare room (tablets), not Part 1's 280x95 card.
     The bar (Part 1: left/right 16px) matches this 1rem side padding, so it starts where the icon and the title start. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; flex: 1 0 var(--hp-tab-w); box-sizing: border-box; min-width: 0; min-height: 0; padding: 0.75rem 1rem 1.25rem; text-align: left;
  background: rgb(0 0 0 / 0.45); border: 1px solid rgb(255 255 255 / 0.14); border-radius: 0.75rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font: inherit; font-size: 0.8125rem; line-height: 1.3; /* the span around the title takes its line box from here */
}
.hp-marquee__tab:not(.is-active):hover { background: rgb(0 0 0 / 0.6); }
/* Active tab: solid white (overrides Part 1's red tint), so text, icon and progress track flip to dark/red. */
.hp-marquee__tab.is-active { background: #fff; border-color: #fff; color: var(--color-secondary); }
.hp-marquee__tab.is-active .hp-marquee__badge { background: rgb(0 0 0 / 0.06); box-shadow: none; }
.hp-marquee__tab.is-active .hp-marquee__badge svg { color: var(--hp-accent); }
.hp-marquee__tab.is-active .hp-marquee__track { background: rgb(0 0 0 / 0.12); }
.hp-marquee__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hp-marquee__badge { flex: none; width: 28px; height: 28px; border-radius: 6px; background: rgb(255 255 255 / 0.12); }
.hp-marquee__badge svg { width: 16px; height: 16px; }
.hp-marquee__tab-title { font-weight: 700; }

/* ---------- Controls: play/pause (+ next on phones) ----------
   The buttons are positioned against .hp-marquee__row, the container that holds the tab strip.
   Default (no JS, or the cards do not leave room): play/pause sits ABOVE the first card, left-aligned with it.
   .has-room (set by main.js when the cards and the button fit inside the container): play/pause sits at the
   right end of the row, vertically centred on the cards (adobe.com does the same). */
.hp-marquee__row { position: relative; }
.hp-marquee__playpause, .hp-marquee__next {
  display: grid; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%;
  background: rgb(255 255 255 / 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff;
  width: var(--hp-btn); height: var(--hp-btn);
  transition: background-color 0.2s, border-color 0.2s;
}
/* The circle is small, the tap target is not: an invisible 44px area around it (WCAG 2.2 target size, Apple/Google guidance) */
.hp-marquee__playpause::after, .hp-marquee__next::after { content: ""; position: absolute; inset: calc((var(--hp-btn) - 44px) / 2 - 1px); border-radius: 50%; } /* -1px: insets are measured inside the 1px border */
.hp-marquee__playpause:hover, .hp-marquee__next:hover { background: rgb(255 255 255 / 0.24); }
.hp-marquee__playpause:focus-visible, .hp-marquee__next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hp-marquee__playpause .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.hp-marquee__next .icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.hp-marquee__playpause { left: var(--gutter, 1.5rem); right: auto; top: auto; bottom: calc(100% + var(--hp-btn-gap)); }
.hp-marquee.has-room .hp-marquee__playpause { left: auto; right: var(--gutter, 1.5rem); top: 50%; bottom: auto; translate: 0 -50%; }
.hp-marquee__next { display: none; }

/* From 1024px the tab strip is the page's column grid (--sl-cols columns, --sl-col-gap apart: the same tokens as the trust strip below the hero), so every tab sits exactly
   above its trust-strip item and the tabs grow and shrink with the screen. The row is then full, so play/pause (has-room) moves into the page margin to the right of the grid. */
@media (min-width: 1024px) {
  .hp-marquee__tabs { display: grid; grid-template-columns: repeat(var(--sl-cols, 5), minmax(0, 1fr)); column-gap: var(--sl-col-gap, 1.5rem); margin-inline: 0; padding: 0; overflow: visible; scroll-padding: 0; }
  /* Centred in the page margin (14px from the last tab and from the screen edge at 1440px). On screens wider than the container there is spare margin outside it,
     so the button moves out until it is --hp-play-gap (96px) from the last tab, but never closer than the centred distance to the screen edge. */
  .hp-marquee.has-room .hp-marquee__playpause {
    right: max(
      calc(var(--gutter) - var(--hp-btn) - var(--hp-play-gap)),
      calc((var(--gutter) - var(--hp-btn)) / 2 - max(0px, (100vw - var(--hp-marquee-container)) / 2))
    );
  }
}

/* The button's icon follows .is-paused only (above): hovering the hero no longer pauses the slideshow (main.js block 4b, 2026-10-15), so there is no second state to mirror. */

@media (max-width: 720px) {
  /* Bottom padding reserves the strip above the tabs for the two buttons, so slide copy can never run into them */
  .hp-marquee__content { padding-top: 1.5rem; padding-bottom: 9.75rem; }
  .hp-marquee__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hp-marquee__note { display: none; }
  .hp-marquee__ph { right: 4%; top: 8%; width: 9rem; color: rgb(255 255 255 / 0.07); }

  /* Compact tab strip (adobe.com on phones): one line of text per tab, no icon; main.js slides the strip so the
     active tab sits at the left gutter with the next one peeking in from the right. */
  .hp-marquee__tab { flex-direction: row; align-items: center; min-width: 0; min-height: 48px; padding: 0 0.875rem; border-radius: 0.75rem; }
  .hp-marquee__badge { display: none; }
  .hp-marquee__tab-title { white-space: nowrap; }
  .hp-marquee__track { left: 0.875rem; right: 0.875rem; bottom: 6px; height: 3px; } /* same inset as the tab's side padding, so the bar starts where the title starts */

  /* Play/pause at the left (above the first tab), next at the right */
  .hp-marquee__next { display: grid; position: absolute; right: var(--gutter, 1.5rem); bottom: calc(100% + var(--hp-btn-gap)); z-index: 30; }
}
@media (max-width: 479px) { .hp-marquee__ctas .btn { width: 100%; } }

/* ---------- Dragging ----------
   Slides: drag (mouse) or swipe (touch) left/right to change slide; the copy follows the pointer a little and
   springs back if the drag is too short (main.js block 4, "dragSlides"). touch-action keeps vertical page scroll
   working on touch screens; only horizontal movement is handed to the script.
   Tab strip: mouse drag scrolls it (touch already scrolls it natively) ("dragTabs"). */
.hp-marquee__slide { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.hp-marquee__content { transition: transform 0.28s ease, opacity 0.28s ease; }
.hp-marquee.is-dragging .hp-marquee__slide.is-active .hp-marquee__content { transform: translateX(var(--drag-x, 0px)); opacity: var(--drag-o, 1); transition: none; }
@media (hover: hover) and (pointer: fine) {
  .hp-marquee__slide { cursor: grab; }
  .hp-marquee.is-dragging, .hp-marquee.is-dragging .hp-marquee__slide, .hp-marquee.is-dragging a { cursor: grabbing; }
}
.hp-marquee__tabs.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hp-marquee__tabs.is-dragging * { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .hp-marquee__content { transition: none; } }