/* ================================================================
   Story Ridge Sections — frontend.css  v1.7.1
   Single coherent stylesheet. No patch layers.

   Model
   ─────
   .srs-section          Solid-colour content block, full-bleed.
   .srs-cap              Absolutely-positioned transparent strip that
                         sits *above* the section top, the same height
                         as the ridge. Contains the SVG shape + glow.
   .srs-shape            CSS-mask (or background-image) that renders
                         the ridge silhouette in the section colour.
   .srs-glow             Soft haze just above the ridge line.
   .srs-content          Centred content column inside the section.

   Cap top formula
   ───────────────
   The cap sits flush with the section's top edge:
     top = -(ridge height)
   When stacking, each section's cap drops slightly lower:
     top = -(ridge height) + (stack index × gap)
   which is expressed as:
     top = calc( var(--srs-h) * -1  +  var(--srs-stack-offset, 0px) )

   Full-bleed
   ──────────
   Both the section AND the Gutenberg block wrapper must be
   full-viewport. Nesting means we can't double-breakout, so:
     - .wp-block-story-ridge-section  → breakout, no padding
     - .srs-section inside it         → width:100%, no margin
     - standalone .srs-section        → breakout itself
   The .srs-cap also independently breaks out to 100vw so the
   SVG fills the viewport even when inside a narrow container.

   Bridge
   ──────
   The area revealed through the transparent cap should show the
   PREVIOUS section's colour, not the page body background.
   JS sets --srs-prev-color on each .srs-section after the first.
   A ::before pseudo covers only the cap-height strip above the
   section. We keep it very tight to avoid phantom spacing.
================================================================ */


/* ── 1. CSS custom property defaults ─────────────────────────── */
.srs-section,
.srs-ridge-only {
  --srs-color:          #425D42;
  --srs-text:           #FFFFFF;
  --srs-h:              150px;     /* ridge / cap height   */
  --srs-h-mobile:       90px;
  --srs-scale:          120%;      /* SVG mask scale       */
  --srs-pos-x:          50%;
  --srs-glow:           #F7E7A7;
  --srs-glow-opacity:   0;
  --srs-glow-blur:      55px;
  --srs-glow-y:         0px;
  --srs-content-width:  1100px;
  --srs-pad-top:        90px;
  --srs-pad-bottom:     110px;
  --srs-texture-opacity:0.05;

  /* stacking — set by JS / stack wrapper */
  --srs-stack-offset:   0px;
  --srs-prev-color:     transparent;
}


/* ── 2. Section block ─────────────────────────────────────────── */
.srs-section {
  position:  relative;
  background: var(--srs-color);
  color:     var(--srs-text);
  min-height: var(--srs-min-height, auto);
  padding:   var(--srs-pad-top) 0 var(--srs-pad-bottom);
  /* full-bleed when standalone (not inside wp-block wrapper) */
  width:     100vw;
  max-width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top:    0;
  margin-bottom: 0;
  overflow: visible;
  isolation: isolate;
}

/* When .srs-section lives inside a wp-block wrapper that already
   broke out, don't double-breakout — fill the wrapper instead. */
.wp-block-story-ridge-section > .srs-section,
.wp-block-story-ridge-stack  > .wp-block-story-ridge-section > .srs-section,
.srs-block-stack > .srs-section,
.srs-scroll      > .srs-section {
  width:     100%;
  max-width: 100%;
  margin-left:  0;
  margin-right: 0;
}


/* ── 3. Cap (transparent strip above the section) ──────────────  */
.srs-cap {
  position:    absolute;
  /* Flush with the section top, then pushed down by the stack offset.
     Positive stack-offset moves the cap DOWN (section starts lower). */
  top:  calc( var(--srs-h) * -1  +  var(--srs-stack-offset) );
  height:      var(--srs-h);
  /* Break out to full viewport regardless of container width */
  width:       100vw;
  left:        50%;
  transform:   translateX(-50%);
  background:  transparent;
  overflow:    visible;
  pointer-events: none;
  z-index: 3;
}

/* Inside the ridge-only standalone divider the cap sits at top:0 */
.srs-ridge-only .srs-cap {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
}


/* ── 4. Shape (SVG mask / image) ─────────────────────────────── */
.srs-shape {
  position: absolute;
  inset: 0;
  background-color:    var(--srs-color);
  background-repeat:   no-repeat;
  background-position: var(--srs-pos-x) center;
  background-size:     var(--srs-scale) 100%;
  -webkit-mask-repeat:   no-repeat;
          mask-repeat:   no-repeat;
  -webkit-mask-position: var(--srs-pos-x) center;
          mask-position: var(--srs-pos-x) center;
  -webkit-mask-size:     var(--srs-scale) 100%;
          mask-size:     var(--srs-scale) 100%;
  z-index: 2;
}

.srs-render-image .srs-shape {
  background-color: transparent;
}


/* ── 5. Glow ──────────────────────────────────────────────────── */
.srs-glow {
  position:      absolute;
  left:          8%;
  right:         8%;
  bottom:        100%;    /* sits just above the ridge line */
  height:        38px;
  border-radius: 999px;
  background:    var(--srs-glow);
  opacity:       var(--srs-glow-opacity);
  filter:        blur(var(--srs-glow-blur));
  transform:     translateY( calc( var(--srs-glow-y) * -1 ) );
  z-index: 1;
  display: none;
  pointer-events: none;
}

.srs-has-glow .srs-glow {
  display: block;
}


/* ── 6. Content column ────────────────────────────────────────── */
.srs-content {
  position: relative;
  z-index: 4;
  width:  min(calc(100% - 40px), var(--srs-content-width));
  margin: 0 auto;
  color:  inherit;
}

.srs-content a { color: inherit; }


/* ── 7. Texture ───────────────────────────────────────────────── */
.srs-texture {
  position:          absolute;
  inset:             0;
  opacity:           var(--srs-texture-opacity);
  background-repeat: repeat;
  background-size:   900px auto;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}


/* ── 8. Standalone ridge-only divider ────────────────────────── */
.srs-ridge-only {
  position: relative;
  height:   var(--srs-h);
  overflow: visible;
  /* full-bleed */
  width:     100vw;
  max-width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* ── 9. Gutenberg block wrappers ─────────────────────────────── */
/*
   wp-block-story-ridge-section and wp-block-story-ridge-stack are
   the Gutenberg wrapper divs. Make them full-bleed, zero spacing.
*/
.wp-block-story-ridge-section,
.wp-block-story-ridge-stack {
  width:     100vw;
  max-width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top:    0;
  margin-bottom: 0;
  padding:       0;
  background:    transparent;
  overflow:      visible;
}

/* Adjacent wrappers must touch — no theme spacing between them */
.wp-block-story-ridge-section + .wp-block-story-ridge-section,
.wp-block-story-ridge-section + .wp-block-story-ridge-stack,
.wp-block-story-ridge-stack   + .wp-block-story-ridge-section {
  margin-top: 0;
}

/* Kill Gutenberg default block-gap on the stack wrapper */
.wp-block-story-ridge-stack > * + *,
.srs-block-stack > * + * {
  margin-top: 0;
}


/* ── 10. Stack wrapper (shortcode + block) ───────────────────── */
.srs-scroll,
.srs-block-stack {
  position: relative;
  width:     100vw;
  max-width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top:    0;
  margin-bottom: 0;
  padding:       0;
  background:    transparent;
  overflow:      visible;
  --srs-stack-gap: 40px;
}

/* Sections that are direct stack children don't double-breakout */
.srs-scroll > .srs-section,
.srs-block-stack > .srs-section {
  width:     100%;
  max-width: 100%;
  margin-left:  0;
  margin-right: 0;
}


/* ── 11. Background bridge ────────────────────────────────────── */
/*
   The transparent cap area above each section should show the
   previous section's colour, not the page body background.
   JS sets --srs-prev-color on each .srs-section.
   The ::before pseudo covers exactly the cap strip above the section.
   It must NOT add height — top is negative by exactly the cap height.
*/
.srs-section::before {
  content:  "";
  position: absolute;
  left:     50%;
  width:    100vw;
  /* Height = cap height + stack offset so the bridge exactly fills
     the transparent region above this section. */
  height: calc( var(--srs-h) + var(--srs-stack-offset) + 2px );
  top:    calc( ( var(--srs-h) + var(--srs-stack-offset) ) * -1 );
  transform: translateX(-50%);
  background: var(--srs-prev-color, transparent);
  pointer-events: none;
  z-index: 0;   /* behind cap (z:3), texture (z:1), content (z:4) */
}

/* First section has no previous colour to bridge */
.srs-section:first-child::before,
.srs-section.srs-no-bridge::before {
  display: none;
}


/* ── 12. Sticky scroll (opt-in) ──────────────────────────────── */
.srs-scroll-sticky > .srs-section,
.srs-block-stack.srs-scroll-sticky > .srs-section {
  position:   sticky;
  top:        var(--srs-stack-offset, 0px);
  min-height: var(--srs-scroll-min-height, 100vh);
  z-index:    var(--srs-stack-z, 1);
}


/* ── 13. Shortcode/block wrapper gap killers ─────────────────── */
.wp-block-shortcode:has(.srs-section),
.wp-block-shortcode:has(.srs-ridge-only),
.wp-block-group:has(.srs-section) {
  margin-top:    0;
  margin-bottom: 0;
  padding-top:   0;
  padding-bottom:0;
}


/* ── 14. Missing/error helper ────────────────────────────────── */
.srs-missing {
  background: #fff3cd;
  border:     1px solid #ffe69c;
  padding:    12px;
  border-radius: 6px;
}


/* ── 15. Body overflow ────────────────────────────────────────── */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}


/* ── 16. Mobile ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .srs-section,
  .srs-ridge-only {
    --srs-h: var(--srs-h-mobile);
  }

  .srs-section {
    padding-top:    calc(var(--srs-pad-top)    * 0.65);
    padding-bottom: calc(var(--srs-pad-bottom) * 0.65);
  }

  .srs-glow {
    height: 26px;
  }
}


/* ================================================================
   v1.7.2 — decisive layout override
   What was still broken:
   - Blocksy/the editor was constraining .srs-section to the content column.
   - The cap then inherited that centre-column behaviour.
   - Stack bridge math was okay, but the visible block was not truly full-bleed.
   This layer uses one breakout method and marks it important so theme rules
   cannot pull the ridges back into the content width.
================================================================ */

/* 1. Any ridge section or stack wrapper must occupy the viewport. */
body .srs-section,
body .srs-ridge-only,
body .srs-scroll,
body .srs-block-stack,
body .wp-block-story-ridge-section,
body .wp-block-story-ridge-stack {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

/* 2. If a section is already inside a full-bleed stack/block wrapper, do not double-breakout it. */
body .srs-scroll > .srs-section,
body .srs-block-stack > .srs-section,
body .wp-block-story-ridge-stack .srs-section,
body .wp-block-story-ridge-section > .srs-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. The cap is always the exact width of the full-bleed section/wrapper. */
body .srs-cap {
  position: absolute !important;
  top: calc((var(--srs-h) * -1) + var(--srs-stack-offset, 0px)) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  height: var(--srs-h) !important;
  transform: none !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* 4. The actual SVG/mask fills the cap. Scale is controlled by the admin field only. */
body .srs-shape {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--srs-color) !important;
  background-repeat: no-repeat !important;
  background-size: var(--srs-scale, 150%) 100% !important;
  background-position: var(--srs-pos-x, 50%) center !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-size: var(--srs-scale, 150%) 100% !important;
          mask-size: var(--srs-scale, 150%) 100% !important;
  -webkit-mask-position: var(--srs-pos-x, 50%) center !important;
          mask-position: var(--srs-pos-x, 50%) center !important;
}

/* 5. Bridge only fills the cap-height area above each section. It does not paint the whole wrapper. */
body .srs-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: calc(var(--srs-h) + var(--srs-stack-offset, 0px) + 1px) !important;
  top: calc((var(--srs-h) + var(--srs-stack-offset, 0px)) * -1) !important;
  transform: none !important;
  background: var(--srs-prev-color, transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* First section overlaps the hero/page above and should stay transparent above. */
body .srs-section.srs-stack-first::before,
body .srs-section.srs-no-bridge::before {
  display: none !important;
}

/* 6. Kill theme/block gaps around stack children. */
body .srs-section + .srs-section,
body .wp-block-story-ridge-section + .wp-block-story-ridge-section,
body .srs-block-stack > * + *,
body .srs-scroll > * + *,
body .wp-block-story-ridge-stack > * + * {
  margin-top: 0 !important;
}

/* 7. Keep decorative layers below real content. */
body .srs-texture { z-index: 1 !important; }
body .srs-content { position: relative !important; z-index: 4 !important; }

/* 8. Keep glow off while the stack layout is being debugged. */
body .srs-glow,
body .srs-has-glow .srs-glow {
  display: none !important;
}

@media (max-width: 760px) {
  body .srs-cap {
    top: calc((var(--srs-h-mobile, var(--srs-h)) * -1) + var(--srs-stack-offset, 0px)) !important;
    height: var(--srs-h-mobile, var(--srs-h)) !important;
  }

  body .srs-section::before {
    height: calc(var(--srs-h-mobile, var(--srs-h)) + var(--srs-stack-offset, 0px) + 1px) !important;
    top: calc((var(--srs-h-mobile, var(--srs-h)) + var(--srs-stack-offset, 0px)) * -1) !important;
  }
}


/* ================================================================
   v1.7.3 — fit modes, sticky stack, controlled glow
================================================================ */

/* Fit modes. Auto cover is the default and should feel full-width without hand tuning. */
body .srs-section.srs-fit-cover .srs-shape {
  background-size: var(--srs-cover-scale, 180%) 100% !important;
  -webkit-mask-size: var(--srs-cover-scale, 180%) 100% !important;
          mask-size: var(--srs-cover-scale, 180%) 100% !important;
  background-position: center center !important;
  -webkit-mask-position: center center !important;
          mask-position: center center !important;
}

body .srs-section.srs-fit-manual .srs-shape {
  background-size: var(--srs-scale, 150%) 100% !important;
  -webkit-mask-size: var(--srs-scale, 150%) 100% !important;
          mask-size: var(--srs-scale, 150%) 100% !important;
  background-position: var(--srs-pos-x, 50%) center !important;
  -webkit-mask-position: var(--srs-pos-x, 50%) center !important;
          mask-position: var(--srs-pos-x, 50%) center !important;
}

body .srs-section.srs-fit-contain .srs-shape {
  background-size: 100% 100% !important;
  -webkit-mask-size: 100% 100% !important;
          mask-size: 100% 100% !important;
  background-position: center center !important;
  -webkit-mask-position: center center !important;
          mask-position: center center !important;
}

/* Sticky stacking. Section sticks lower each time; cap stays flush to that section. */
body .srs-scroll-sticky > .srs-section {
  position: sticky !important;
  top: calc(var(--srs-sticky-top, 0px) + var(--srs-stack-offset, 0px)) !important;
  min-height: var(--srs-scroll-min-height, 100vh) !important;
  z-index: calc(10 + var(--srs-stack-index, 0)) !important;
}

body .srs-scroll-sticky > .srs-section > .srs-cap {
  top: calc(var(--srs-h) * -1) !important;
}

body .srs-scroll-sticky > .srs-section::before {
  top: calc(var(--srs-h) * -1) !important;
  height: calc(var(--srs-h) + 1px) !important;
}

/* Glow: above-ridge only, never bleeding through the section body. */
body .srs-glow {
  display: none !important;
}

body .srs-has-glow .srs-glow {
  display: block !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: calc((var(--srs-glow-height, 38px) * -1) + var(--srs-glow-y, -8px)) !important;
  height: var(--srs-glow-height, 38px) !important;
  border-radius: 999px !important;
  background: var(--srs-glow, #F7E7A7) !important;
  opacity: var(--srs-glow-opacity, .16) !important;
  filter: blur(var(--srs-glow-blur, 45px)) !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* The ridge shape must stay above the glow. */
body .srs-shape {
  z-index: 2 !important;
}

/* Keep cap/bridge math mobile-safe. */
@media (max-width: 760px) {
  body .srs-scroll-sticky > .srs-section {
    top: calc(var(--srs-sticky-top, 0px) + var(--srs-stack-offset, 0px)) !important;
  }

  body .srs-scroll-sticky > .srs-section > .srs-cap {
    top: calc(var(--srs-h-mobile, var(--srs-h)) * -1) !important;
  }

  body .srs-scroll-sticky > .srs-section::before {
    top: calc(var(--srs-h-mobile, var(--srs-h)) * -1) !important;
    height: calc(var(--srs-h-mobile, var(--srs-h)) + 1px) !important;
  }
}


/* ================================================================
   v1.8.0 — cinematic sticky stack + ridge haze
   Vision: content/section holds while the next ridge comes up and stops
   slightly lower, creating a layered stack of ridgelines.
================================================================ */

/* Stack wrapper defaults */
body .srs-scroll,
body .srs-block-stack {
  --srs-stack-gap: 40px;
  --srs-sticky-top: 0px;
  --srs-scroll-min-height: 100vh;
  --srs-stack-haze-color: #F7E7A7;
  --srs-stack-haze-opacity: .16;
  --srs-stack-haze-blur: 54px;
  --srs-stack-haze-height: 42px;
}

/* Cinematic mode: every section sticks a little lower than the one before. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section {
  position: sticky !important;
  top: calc(var(--srs-sticky-top, 0px) + var(--srs-stack-offset, 0px)) !important;
  min-height: var(--srs-scroll-min-height, 100vh) !important;
  z-index: calc(20 + var(--srs-stack-index, 0)) !important;
}

/* In cinematic mode, the ridge cap should be flush to its own section top.
   The section itself is what lands lower. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
  top: calc(var(--srs-h) * -1) !important;
}

/* Bridge is only the cap-height strip immediately behind the cap. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section::before {
  top: calc(var(--srs-h) * -1) !important;
  height: calc(var(--srs-h) + 1px) !important;
}

/* Layer haze: sits behind the ridge shape, above the previous background. */
body .srs-stack-haze > .srs-section > .srs-cap::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -10px;
  height: var(--srs-stack-haze-height, 42px);
  border-radius: 999px;
  background: var(--srs-stack-haze-color, #F7E7A7);
  opacity: var(--srs-stack-haze-opacity, .16);
  filter: blur(var(--srs-stack-haze-blur, 54px));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Keep the actual ridge above the haze. */
body .srs-stack-haze > .srs-section > .srs-cap .srs-shape {
  position: absolute !important;
  z-index: 2 !important;
}

/* Avoid a haze on the very first cap if it looks like a glow under the hero.
   Add class srs-show-first-haze to stack wrapper if you want it visible. */
body .srs-stack-haze:not(.srs-show-first-haze) > .srs-section.srs-stack-first > .srs-cap::before {
  display: none !important;
}

/* Small optional visual softening where a stacked section overlaps the previous. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section {
  box-shadow: 0 -1px 0 rgba(255,255,255,.025);
}

@media (max-width: 760px) {
  body .srs-scroll-sticky.srs-cinematic-stack > .srs-section {
    top: calc(var(--srs-sticky-top, 0px) + min(var(--srs-stack-offset, 0px), 84px)) !important;
  }

  body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
    top: calc(var(--srs-h-mobile, var(--srs-h)) * -1) !important;
  }

  body .srs-scroll-sticky.srs-cinematic-stack > .srs-section::before {
    top: calc(var(--srs-h-mobile, var(--srs-h)) * -1) !important;
    height: calc(var(--srs-h-mobile, var(--srs-h)) + 1px) !important;
  }

  body .srs-stack-haze > .srs-section > .srs-cap::before {
    height: calc(var(--srs-stack-haze-height, 42px) * .75);
    filter: blur(calc(var(--srs-stack-haze-blur, 54px) * .75));
  }
}


/* ================================================================
   v1.8.1 — transparent-behind-ridge + corrected sticky pinning

   Changes:
   - Removes previous-section colour bridge entirely.
   - Cap bottom is always fixed to the top edge of its section.
   - In sticky/cinematic mode the SECTION stops lower, not the cap.
     That means the first ridge cap stops at the top of the viewport,
     and later caps stop 40px, 80px, 120px lower, etc.
================================================================ */

/* No previous-colour bridge. The transparent parts behind the SVG are truly transparent. */
body .srs-section::before,
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section::before,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* The cap is the strip above the section. Its bottom edge is fixed to the section top.
   Stack offset must NOT move the cap; it moves the sticky section itself. */
body .srs-cap,
body .srs-section > .srs-cap,
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
  top: calc(var(--srs-h) * -1) !important;
  height: var(--srs-h) !important;
  bottom: auto !important;
}

/* Mobile equivalent: cap bottom remains locked to section top. */
@media (max-width: 760px) {
  body .srs-cap,
  body .srs-section > .srs-cap,
  body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap,
  body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
    top: calc(var(--srs-h-mobile, var(--srs-h)) * -1) !important;
    height: var(--srs-h-mobile, var(--srs-h)) !important;
  }
}

/* Cinematic sticky pinning:
   Section top = sticky top + ridge height + stack offset.
   Therefore cap top = sticky top + stack offset.
   Result: ridge caps visibly pile up at 0px, 40px, 80px... instead of disappearing above the viewport. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section {
  position: sticky !important;
  top: calc(var(--srs-sticky-top, 0px) + var(--srs-h) + var(--srs-stack-offset, 0px)) !important;
  min-height: var(--srs-scroll-min-height, 100vh) !important;
  z-index: calc(20 + var(--srs-stack-index, 0)) !important;
}

/* If sticky mode is on but the cinematic class is missing, use the same safer model. */
body .srs-scroll-sticky > .srs-section,
body .srs-block-stack.srs-scroll-sticky > .srs-section {
  top: calc(var(--srs-sticky-top, 0px) + var(--srs-h) + var(--srs-stack-offset, 0px)) !important;
}

@media (max-width: 760px) {
  body .srs-scroll-sticky.srs-cinematic-stack > .srs-section,
  body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section,
  body .srs-scroll-sticky > .srs-section,
  body .srs-block-stack.srs-scroll-sticky > .srs-section {
    top: calc(var(--srs-sticky-top, 0px) + var(--srs-h-mobile, var(--srs-h)) + min(var(--srs-stack-offset, 0px), 84px)) !important;
  }
}

/* Haze is still allowed, but only as a layer behind the ridgeline itself.
   It does not fill the transparent cap area with a solid previous colour. */
body .srs-stack-haze > .srs-section > .srs-cap::before {
  content: "";
  position: absolute;
  left: 5% !important;
  right: 5% !important;
  bottom: -6px !important;
  height: var(--srs-stack-haze-height, 42px) !important;
  border-radius: 999px !important;
  background: var(--srs-stack-haze-color, #F7E7A7) !important;
  opacity: var(--srs-stack-haze-opacity, .14) !important;
  filter: blur(var(--srs-stack-haze-blur, 54px)) !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Show first haze too in cinematic mode; it helps establish the stack at the top.
   Users can turn Stack haze off from the Stack block if it feels too much. */
body .srs-stack-haze:not(.srs-show-first-haze) > .srs-section.srs-stack-first > .srs-cap::before {
  display: block !important;
}

/* Keep ridge above haze. */
body .srs-stack-haze > .srs-section > .srs-cap .srs-shape {
  z-index: 2 !important;
}


/* ================================================================
   v1.8.2 — section body masks haze overlap

   The haze can blur down past the ridge/cap into the section. That looked
   muddy/weird. This adds a section-body paint layer above the haze from the
   exact top of the section downward, so the haze can exist behind the ridge
   but cannot wash over the solid section body.
================================================================ */

/* The section needs its own stacking context so the body paint layer behaves. */
body .srs-section {
  isolation: isolate !important;
}

/* Solid body layer. Starts at the section top, so it does NOT cover the ridge cap above.
   It only covers any haze blur that overlaps into the section body. */
body .srs-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--srs-color) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Keep cap/ridge above the transparent area, but allow the section body layer
   to cover haze where it crosses into the section. */
body .srs-cap {
  z-index: 3 !important;
}

/* Haze stays behind ridge shape. */
body .srs-stack-haze > .srs-section > .srs-cap::before {
  z-index: 1 !important;
}

/* Ridge shape remains above haze. */
body .srs-shape {
  z-index: 2 !important;
}

/* Section content and optional texture need to sit above the body paint layer. */
body .srs-texture {
  z-index: 5 !important;
}

body .srs-content {
  position: relative !important;
  z-index: 6 !important;
}

/* If the texture is disabled/missing, the body layer still gives a clean solid join. */
body .srs-section > * {
  position: relative;
}


/* ================================================================
   v1.8.6 — bottom anchored SVGs + responsive stack tuning

   Key principle:
   - The cap is always the strip ABOVE the section.
   - The cap's bottom edge is always the section's top edge.
   - The SVG/mask is bottom-positioned inside the cap, so changing height
     should not be used as a positioning hack.
================================================================ */

/* Device ridge heights */
body .srs-section {
  --srs-h-active: var(--srs-h);
}

@media (max-width: 1024px) and (min-width: 761px) {
  body .srs-section {
    --srs-h-active: var(--srs-h-tablet, var(--srs-h));
  }
}

@media (max-width: 760px) {
  body .srs-section {
    --srs-h-active: var(--srs-h-mobile, var(--srs-h-tablet, var(--srs-h)));
  }
}

/* Cap bottom fixed to section top across all devices */
body .srs-cap,
body .srs-section > .srs-cap,
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
  top: calc(var(--srs-h-active) * -1) !important;
  height: var(--srs-h-active) !important;
  bottom: auto !important;
}

/* Bottom align the SVG/mask inside the cap. This is the "always align bottom" part. */
body .srs-shape,
body .srs-render-image .srs-shape,
body .srs-section.srs-fit-cover .srs-shape,
body .srs-section.srs-fit-manual .srs-shape,
body .srs-section.srs-fit-contain .srs-shape {
  background-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
  -webkit-mask-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
          mask-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
}

/* Responsive auto-cover scales */
body .srs-section.srs-fit-cover .srs-shape {
  background-size: var(--srs-cover-scale, 180%) 100% !important;
  -webkit-mask-size: var(--srs-cover-scale, 180%) 100% !important;
          mask-size: var(--srs-cover-scale, 180%) 100% !important;
}

@media (max-width: 1024px) and (min-width: 761px) {
  body .srs-section.srs-fit-cover .srs-shape {
    background-size: var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%)) 100% !important;
    -webkit-mask-size: var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%)) 100% !important;
            mask-size: var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%)) 100% !important;
  }
}

@media (max-width: 760px) {
  body .srs-section.srs-fit-cover .srs-shape {
    background-size: var(--srs-cover-scale-mobile, var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%))) 100% !important;
    -webkit-mask-size: var(--srs-cover-scale-mobile, var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%))) 100% !important;
            mask-size: var(--srs-cover-scale-mobile, var(--srs-cover-scale-tablet, var(--srs-cover-scale, 180%))) 100% !important;
  }
}

/* Responsive sticky stack: no mobile clamp. JS writes --srs-stack-offset from the active device gap. */
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section,
body .srs-scroll-sticky > .srs-section,
body .srs-block-stack.srs-scroll-sticky > .srs-section {
  top: calc(var(--srs-active-sticky-top, var(--srs-sticky-top, 80px)) + var(--srs-h-active) + var(--srs-stack-offset, 0px)) !important;
}

/* Haze/body paint should follow the active cap height */
body .srs-section::after {
  z-index: 4 !important;
}

body .srs-stack-haze > .srs-section > .srs-cap::before {
  bottom: -6px !important;
}

/* Keep content above body paint */
body .srs-content {
  position: relative !important;
  z-index: 6 !important;
}


/* ================================================================
   v1.8.8 — true bottom nudge + lower height minimums

   Vertical anchor alone did not visibly help because the mask was scaled to
   the full cap height. The new nudge moves the SVG/mask itself while the cap
   remains bottom-locked to the section top.

   Positive nudge = move SVG down, closing small gaps.
   Negative nudge = move SVG up.
================================================================ */

body .srs-section {
  --srs-shape-nudge-active: var(--srs-shape-nudge, 0px);
}

@media (max-width: 1024px) and (min-width: 761px) {
  body .srs-section {
    --srs-shape-nudge-active: var(--srs-shape-nudge-tablet, var(--srs-shape-nudge, 0px));
  }
}

@media (max-width: 760px) {
  body .srs-section {
    --srs-shape-nudge-active: var(--srs-shape-nudge-mobile, var(--srs-shape-nudge-tablet, var(--srs-shape-nudge, 0px)));
  }
}

/* Cap remains the strip above the section; bottom of cap is the section top. */
body .srs-cap,
body .srs-section > .srs-cap,
body .srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap,
body .srs-block-stack.srs-scroll-sticky.srs-cinematic-stack > .srs-section > .srs-cap {
  top: calc(var(--srs-h-active, var(--srs-h)) * -1) !important;
  height: var(--srs-h-active, var(--srs-h)) !important;
  bottom: auto !important;
}

/* Bottom-position the mask/image, then nudge the actual shape.
   This is independent of ridge height, so you no longer have to use height
   as a positioning control. */
body .srs-shape,
body .srs-render-image .srs-shape,
body .srs-section.srs-fit-cover .srs-shape,
body .srs-section.srs-fit-manual .srs-shape,
body .srs-section.srs-fit-contain .srs-shape {
  background-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
  -webkit-mask-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
          mask-position: var(--srs-pos-x, 50%) var(--srs-pos-y, 100%) !important;
  transform: translateY(var(--srs-shape-nudge-active, 0px)) !important;
  will-change: transform;
}

/* Let the body paint layer hide any downward nudge overlap into the solid section. */
body .srs-section::after {
  z-index: 4 !important;
}

body .srs-content {
  z-index: 6 !important;
}


/* ================================================================
   v1.9.0 — optional first-ridge backdrop
   This prevents the site/body background colour from peeking through the
   transparent area behind the first ridge cap.
================================================================ */

/* Ensure cap can layer backdrop -> haze -> ridge shape. */
body .srs-cap {
  isolation: isolate !important;
}

/* Fill behind the first ridge only. Uses that first section's own colour,
   so it blends into the section instead of showing the page background. */
body .srs-first-backdrop > .srs-section.srs-stack-first > .srs-cap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--srs-color) !important;
  opacity: var(--srs-first-backdrop-opacity, .92) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Preserve the layer order. */
body .srs-first-backdrop > .srs-section.srs-stack-first > .srs-cap::before {
  z-index: 1 !important;
}

body .srs-first-backdrop > .srs-section.srs-stack-first > .srs-cap .srs-shape {
  z-index: 2 !important;
}


/* ================================================================
   v1.9.2 — Section pattern overlay
   A proper topo / contour overlay for the solid section body.
   This is separate from the ridgeline SVG cap.
================================================================ */

body .srs-texture {
  display: none !important;
}

body .srs-has-pattern .srs-texture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  opacity: var(--srs-pattern-opacity, .08) !important;
  mix-blend-mode: var(--srs-pattern-blend, soft-light);
  background-repeat: var(--srs-pattern-repeat, repeat) !important;
  background-size: var(--srs-pattern-size, 720px) auto !important;
  background-position: var(--srs-pattern-pos-x, 50%) var(--srs-pattern-pos-y, 50%) !important;
}

body .srs-pattern-mode-tint .srs-texture {
  background-color: var(--srs-pattern-color, #F7E7A7) !important;
  background-image: none !important;
  -webkit-mask-image: var(--srs-pattern-url) !important;
          mask-image: var(--srs-pattern-url) !important;
  -webkit-mask-repeat: var(--srs-pattern-repeat, repeat) !important;
          mask-repeat: var(--srs-pattern-repeat, repeat) !important;
  -webkit-mask-size: var(--srs-pattern-size, 720px) auto !important;
          mask-size: var(--srs-pattern-size, 720px) auto !important;
  -webkit-mask-position: var(--srs-pattern-pos-x, 50%) var(--srs-pattern-pos-y, 50%) !important;
          mask-position: var(--srs-pattern-pos-x, 50%) var(--srs-pattern-pos-y, 50%) !important;
}

body .srs-pattern-mode-image .srs-texture {
  background-image: var(--srs-pattern-url) !important;
  background-color: transparent !important;
}

/* Keep content above pattern. */
body .srs-content {
  z-index: 6 !important;
}

/* Keep the section-body paint layer below the pattern but above haze overlap. */
body .srs-section::after {
  z-index: 4 !important;
}

@media (max-width: 1024px) and (min-width: 761px) {
  body .srs-has-pattern .srs-texture {
    background-size: var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px)) auto !important;
  }

  body .srs-pattern-mode-tint .srs-texture {
    -webkit-mask-size: var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px)) auto !important;
            mask-size: var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px)) auto !important;
  }
}

@media (max-width: 760px) {
  body .srs-has-pattern .srs-texture {
    background-size: var(--srs-pattern-size-mobile, var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px))) auto !important;
  }

  body .srs-pattern-mode-tint .srs-texture {
    -webkit-mask-size: var(--srs-pattern-size-mobile, var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px))) auto !important;
            mask-size: var(--srs-pattern-size-mobile, var(--srs-pattern-size-tablet, var(--srs-pattern-size, 720px))) auto !important;
  }
}