/*
 * Scrollytelling template — layout scaffold + motion pre-states.
 * Pre-hidden states live ONLY inside @media (prefers-reduced-motion: no-preference)
 * and only when html.gw-motion is set (gw-motion.js will run), so the page renders
 * complete and static for reduced-motion users and when JS fails.
 */
.gw-scrolly.container-wrap { padding: 0 !important; overflow-x: clip; }
.gw-scrolly .container.main-content { max-width: none; width: 100%; padding: 0 !important; margin: 0; }
.gw-scrolly .container.main-content > .row { margin: 0; }
.gw-scrolly .wpb_row, .gw-scrolly .vc_row { margin-left: 0; margin-right: 0; }
.gw-scrolly .wpb_row > .col, .gw-scrolly .vc_column_container > .vc_column-inner { padding: 0 !important; }
.gw-scrolly .wpb_content_element, .gw-scrolly .wpb_column, .gw-scrolly .wpb_row { margin-bottom: 0; }
/* .gw-bleed moved to components.css (global): ordinary Salient pages need it too. */
.gw-scrolly { background: var(--gw-cream-100); color: var(--gw-text-primary); font-family: var(--gw-font-body); }

/* DS type overrides win over Salient/Redux and the starter heading scale on this template */
.gw-scrolly h1, .gw-scrolly h2, .gw-scrolly h3, .gw-scrolly h4 { font-family: var(--gw-font-display) !important; font-weight: 900 !important; line-height: 0.9 !important; letter-spacing: 0 !important; margin: 0; color: var(--gw-text-primary); }
.gw-scrolly h1.gw-display-xxl { font-size: var(--gw-fluid-display-xxl) !important; }
.gw-scrolly h1.gw-display-xl, .gw-scrolly h2.gw-display-xl { font-size: var(--gw-fluid-display-xl) !important; }
.gw-scrolly h1.gw-display-l, .gw-scrolly h2.gw-display-l, .gw-scrolly h3.gw-display-l { font-size: var(--gw-fluid-display-l) !important; }
.gw-scrolly h2.gw-display-m, .gw-scrolly h3.gw-display-m { font-size: var(--gw-fluid-display-m) !important; }
.gw-scrolly h2.gw-display-s, .gw-scrolly h3.gw-display-s { font-size: var(--gw-fluid-display-s) !important; line-height: var(--gw-lh-display-s) !important; }
.gw-scrolly h3.gw-display-xs, .gw-scrolly h4.gw-display-xs { font-size: var(--gw-fluid-display-xs) !important; }
.gw-scrolly p, .gw-scrolly .gw-body-l, .gw-scrolly .gw-body-m { font-family: var(--gw-font-body); color: inherit; }
.gw-scrolly .gw-eyebrow, .gw-scrolly .gw-label-l, .gw-scrolly .gw-label-s, .gw-scrolly .gw-label-s-wide { font-family: var(--gw-font-display) !important; font-weight: 600 !important; }

/* Partial styles (.gw-pill, .gw-intro, .gw-ring-marker, .gw-sticker) live in assets/css/components.css (gw-components), loaded wherever an element renders. */

/* ---- Motion pre-states (only when gw-motion.js will run) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* .gw-in is added by gw-motion.js once an element has revealed; the pre-hide must
     not re-apply after the tween clears its inline props (Full Tilt gotcha). */
  html.gw-motion [data-gw-reveal]:not(.gw-in) { opacity: 0; transform: translate3d(0, 40px, 0); }
  html.gw-motion [data-gw-reveal="mask"]:not(.gw-in) { transform: none; clip-path: inset(10% 6% 10% 6%); }
  html.gw-motion [data-gw-callout]:not(.gw-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
  html.gw-motion [data-gw-marker]:not(.gw-in), html.gw-motion [data-gw-reveal="marker"]:not(.gw-in) { opacity: 0; transform: scale(0.6); }
  html.gw-motion .gw-story__path-wrap { visibility: hidden; }
  /* Hero arrival, frame one. html.gw-motion is armed in <head> (inc/scrollytelling.php),
     so first paint already equals the intro's start; gw-hero-motion.js tweens from these
     exact values and adds .gw-hero-intro-done (which releases them) when it settles. */
  html.gw-motion:not(.gw-hero-intro-done) .gw-hero__title .gw-line { opacity: 0; transform: translate3d(0, 30%, 0); }
  html.gw-motion:not(.gw-hero-intro-done) .gw-hero__media > :is(video, canvas, img) { transform: scale(1.12); will-change: transform; }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Preserve authored heading lines while their contents rise through a mask.
   The mask pads .22em so ascenders/descenders survive the clip, and pulls the
   same amount back with negative margins. Sibling negative margins COLLAPSE
   in block flow (only one -.22em survives between two lines), which inflated
   the line pitch from 0.9em to ~1.12em; a flex column parent keeps every
   margin, so the pitch stays exactly the token line-height (2026-09-30). */
.gw-line-mask { display: block; overflow: clip; padding-block: .22em; margin-block: -.22em; }
.gw-scrolly :is(h1, h2, h3, h4):has(> .gw-line-mask) { display: flex; flex-direction: column; }
.gw-line-rise { display: block; transform-origin: left bottom; }
@media (prefers-reduced-motion: reduce) {
  .gw-line-rise { transform: none !important; }
}
