/* ================================================================
   Safety Standards Template
   ================================================================ */

/* Shared soft drop shadow: 3 layers with ascending blur + low opacity for
   natural falloff. Use via var(--sst-shadow-panel). Replaces harsh 2-layer
   20%/12%-alpha shadows that looked blocky. */
:root {
    --sst-shadow-panel:
        0 0.2rem 0.4rem rgba(10, 37, 64, 0.04),
        0 0.6rem 1.4rem rgba(10, 37, 64, 0.05),
        0 1.4rem 3rem   rgba(10, 37, 64, 0.05);
}

/* 1. Reset / Page-template scope */
.page-template-template-safety-standards #pageHeader { display: none; }
.page-template-template-safety-standards #pageWrapper { padding-top: 0; }

/* NOTE: html root font-size is 9px on this site (style.css:855-857).
   1rem = 9px. Body is 1.8rem (16.2px), h1 = 4.8rem, h2 = 3.6rem, h3 = 3.3rem.
   All rem values below assume the 9px root - DO NOT treat 1rem as 16px.
   On this template we bump body to 2rem (18px) and small text to 1.8rem (16px). */
.page-template-template-safety-standards,
.page-template-template-safety-standards #pageWrapper,
.page-template-template-safety-standards .sst-body,
.page-template-template-safety-standards .sst-seg-inner p,
.page-template-template-safety-standards .sst-seg-inner li,
.page-template-template-safety-standards .sst-seg-inner ul,
.page-template-template-safety-standards .sst-seg-inner ol {
    font-size: 2rem;
    line-height: 1.6;
}
/* French copy is wordier on average than EN/DE/IT - drop body text by
   1 px so paragraphs / list items don't wrap as aggressively on this
   template. Selector list mirrors the rule above; .fr body-class
   targets only the French session (set by the language switcher). */
.fr.page-template-template-safety-standards,
.fr.page-template-template-safety-standards #pageWrapper,
.fr.page-template-template-safety-standards .sst-body,
.fr.page-template-template-safety-standards .sst-seg-inner p,
.fr.page-template-template-safety-standards .sst-seg-inner li,
.fr.page-template-template-safety-standards .sst-seg-inner ul,
.fr.page-template-template-safety-standards .sst-seg-inner ol {
    font-size: 1.9rem;
}

/* Theme rule `#pageWrapper ul { margin: 32px 0 }` (specificity 0,1,0,1) bleeds
   into segment lists (accordion content, body wysiwyg, callout, compare, etc.)
   and pushes them apart. Override scoped via #safetyStandardsPage so our
   selector specificity (0,1,1,1) beats the theme cleanly. Tight bottom margin,
   nested lists collapsed, last-child flush. */
#safetyStandardsPage .sst-seg-inner ul,
#safetyStandardsPage .sst-seg-inner ol,
#safetyStandardsPage .sst-accordion-content ul,
#safetyStandardsPage .sst-accordion-content ol {
    margin: 0 0 1rem;
}
#safetyStandardsPage .sst-seg-inner ul:last-child,
#safetyStandardsPage .sst-seg-inner ol:last-child,
#safetyStandardsPage .sst-accordion-content ul:last-child,
#safetyStandardsPage .sst-accordion-content ol:last-child {
    margin-bottom: 0;
}
#safetyStandardsPage li > ul,
#safetyStandardsPage li > ol {
    margin: 0;
}

/* Modern list bullets: FontAwesome 4.7 fa-angle-right (U+F105) in brand cyan,
   replaces the default disc bullet on all <ul> lists within segment content.
   Only targets <ul> (not <ol> - ordered lists keep their numerals).
   Swap the content codepoint + colour in one place to retheme all list bullets. */
#safetyStandardsPage .sst-seg-inner ul,
#safetyStandardsPage .sst-accordion-content ul {
    list-style: none;
    padding-left: 2.2em;
}
#safetyStandardsPage .sst-seg-inner ul > li,
#safetyStandardsPage .sst-accordion-content ul > li {
    position: relative;
}
#safetyStandardsPage .sst-seg-inner ul > li::before,
#safetyStandardsPage .sst-accordion-content ul > li::before {
    content: "\f105"; /* fa-angle-right. Alternatives: \f00c check, \f2dc snowflake-o */
    font-family: FontAwesome;
    font-weight: 400;
    color: #78c5db;
    position: absolute;
    left: -1.4em;
    /* line-height:1 collapses the pseudo-element's line-box to its own
       em-box; previously 'line-height: inherit' pulled the body's 1.6
       leading into the single-glyph pseudo and rendered the chevron half
       a line below the text baseline. With the tight box, top: 0.19em
       lands the chevron's optical centre on the text x-height. */
    top: 0.19em;
    line-height: 1;
    font-size: 1.1em;
    width: 1em;
    text-align: center;
}

/* When a TinyMCE-applied .text-color-* span lives inside an <li>, it only
   colours the text - the ::before bullet (UL) and native ::marker (OL)
   stay at their hardcoded defaults. :has() detects the colored span and
   propagates the colour to both pseudo-elements. Specificity wins over
   the base bullet rule via .text-color-* (class bumps :has() spec to 1,1).
   Degrades gracefully on old browsers (bullet stays default cyan). */
#safetyStandardsPage li:has(> span.text-color-white)::before,
#safetyStandardsPage li:has(> span.text-color-white)::marker       { color: #fff;    }
#safetyStandardsPage li:has(> span.text-color-sky-light)::before,
#safetyStandardsPage li:has(> span.text-color-sky-light)::marker   { color: #eaf6fb; }
#safetyStandardsPage li:has(> span.text-color-light-blue)::before,
#safetyStandardsPage li:has(> span.text-color-light-blue)::marker  { color: #66b2e8; }
#safetyStandardsPage li:has(> span.text-color-cream)::before,
#safetyStandardsPage li:has(> span.text-color-cream)::marker       { color: #f5ede0; }
#safetyStandardsPage li:has(> span.text-color-sky)::before,
#safetyStandardsPage li:has(> span.text-color-sky)::marker         { color: #78c5db; }
#safetyStandardsPage li:has(> span.text-color-chartreuse)::before,
#safetyStandardsPage li:has(> span.text-color-chartreuse)::marker  { color: #bccb00; }
#safetyStandardsPage li:has(> span.text-color-slate)::before,
#safetyStandardsPage li:has(> span.text-color-slate)::marker       { color: #45545f; }
#safetyStandardsPage li:has(> span.text-color-navy)::before,
#safetyStandardsPage li:has(> span.text-color-navy)::marker        { color: #153354; }
#safetyStandardsPage li:has(> span.text-color-dark)::before,
#safetyStandardsPage li:has(> span.text-color-dark)::marker        { color: #0a2540; }

/* 2. Hero - locked to 950 px on desktop (editor spec). Mirrors the
   Safety Experiences hero architecture: ACF Image Focus drives
   background-position on an inner .sst-hero-bg element, Parallax JS
   translates that same element inside a 15 % overscale. Top padding
   clears the fixed ~260 px site header. */
/* Hero height adapts to content. Two floors via :has():
   - No stats row: ~780 px floor with 19rem top padding (tight but
     still clears the ~260 px global header).
   - With stats row: 950 px floor with 33rem top padding so the
     stats block has breathing room.
   No max-height, so long titles / extra content naturally grow
   the hero without silent clipping. */
.sst-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    /* Hero height = padding-top + content + padding-bottom. NO
       min-height - the editor controls the total height via the Hero
       Content Padding ACF group on the page (sst_hero_padding). PHP
       emits CSS vars on this element when set; the fallbacks below
       preserve the original hard-coded design when the sliders are
       untouched. Horizontal padding stays static. */
    padding-top:    var(--hero-pt-d, 19rem);
    padding-right:  2.4rem;
    padding-bottom: var(--hero-pb-d, 9rem);
    padding-left:   2.4rem;
}
/* 15 % overscale on both axes. The horizontal buffer keeps the BG-
   element's aspect-ratio matching the hero so 'background-size: cover'
   always has some vertical overflow for the ACF Image Focus Y-point to
   move the visible image. Parallax factor 0.2 (see safety-standards.js)
   stays inside the 15 % band. */
.sst-hero-bg {
    position: absolute;
    inset: -15% -15%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}
.sst-hero-overlay {
    position: absolute; inset: 0; pointer-events: none;
    z-index: 1;
}
.sst-hero-content {
    position: relative; z-index: 2;
    /* --hero-content-width is the slider value (30-100) emitted by
       sst_hero_padding_inline_style() on the parent .sst-hero. Maps
       to a percentage of the canonical 1240 px content width. Default
       fallback 65 ~ the previous hard-coded 90rem (810 px). */
    max-width: calc(1240px * var(--hero-content-width, 65) / 100);
    width: 100%;
    text-align: center;
}
.sst-hero-eyebrow {
    font-size: 1.8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    opacity: .85;
    font-family: "Montserrat-SemiBold";
}
.sst-hero h1, .sst-hero .sst-hero-title {
    font-size: 4.8rem;
    line-height: 1.1;
    margin: 0 0 2rem;
    font-family: "Montserrat-Bold";
    color: #78c5db;
}
/* Generic per-element text color classes (used by Hero Eyebrow/Title/Subtitle +
   segment Headline group + per-column text/title/badge on Compare).
   'auto' = no override, inherits from cascade.
   Cascades to child <p>/<li>/<strong>/<em>/<span> because the segment-level
   .sst-hc-light rules (auto-applied on image-bg segments) also target those
   child elements directly (e.g. ".sst-hc-light p { color: #fff }"). Without
   descendant selectors, our override on the parent container wouldn't reach
   the child text. !important beats .sst-hc-light's specificity (0,2,0). */
.sst-text-color-auto       { /* no override */ }
.sst-text-color-sky,
.sst-text-color-sky        p, .sst-text-color-sky        li, .sst-text-color-sky        strong, .sst-text-color-sky        em, .sst-text-color-sky        span { color: #78c5db !important; }
.sst-text-color-sky-light,
.sst-text-color-sky-light  p, .sst-text-color-sky-light  li, .sst-text-color-sky-light  strong, .sst-text-color-sky-light  em, .sst-text-color-sky-light  span { color: #eaf6fb !important; }
.sst-text-color-light-blue,
.sst-text-color-light-blue p, .sst-text-color-light-blue li, .sst-text-color-light-blue strong, .sst-text-color-light-blue em, .sst-text-color-light-blue span { color: #66b2e8 !important; }
.sst-text-color-white,
.sst-text-color-white      p, .sst-text-color-white      li, .sst-text-color-white      strong, .sst-text-color-white      em, .sst-text-color-white      span { color: #fff    !important; }
.sst-text-color-cream,
.sst-text-color-cream      p, .sst-text-color-cream      li, .sst-text-color-cream      strong, .sst-text-color-cream      em, .sst-text-color-cream      span { color: #f5ede0 !important; }
.sst-text-color-dark,
.sst-text-color-dark       p, .sst-text-color-dark       li, .sst-text-color-dark       strong, .sst-text-color-dark       em, .sst-text-color-dark       span { color: #0a2540 !important; }
.sst-text-color-navy,
.sst-text-color-navy       p, .sst-text-color-navy       li, .sst-text-color-navy       strong, .sst-text-color-navy       em, .sst-text-color-navy       span { color: #153354 !important; }
.sst-text-color-slate,
.sst-text-color-slate      p, .sst-text-color-slate      li, .sst-text-color-slate      strong, .sst-text-color-slate      em, .sst-text-color-slate      span { color: #45545f !important; }
.sst-text-color-chartreuse,
.sst-text-color-chartreuse p, .sst-text-color-chartreuse li, .sst-text-color-chartreuse strong, .sst-text-color-chartreuse em, .sst-text-color-chartreuse span { color: #bccb00 !important; }
.sst-text-color-green,
.sst-text-color-green      p, .sst-text-color-green      li, .sst-text-color-green      strong, .sst-text-color-green      em, .sst-text-color-green      span { color: #2fa74a !important; }
.sst-text-color-yellow,
.sst-text-color-yellow     p, .sst-text-color-yellow     li, .sst-text-color-yellow     strong, .sst-text-color-yellow     em, .sst-text-color-yellow     span { color: #f4c430 !important; }
.sst-text-color-red,
.sst-text-color-red        p, .sst-text-color-red        li, .sst-text-color-red        strong, .sst-text-color-red        em, .sst-text-color-red        span { color: #d94a4a !important; }
.sst-text-color-black,
.sst-text-color-black      p, .sst-text-color-black      li, .sst-text-color-black      strong, .sst-text-color-black      em, .sst-text-color-black      span { color: #000    !important; }
.sst-hero-subtitle {
    font-size: 2.4rem;
    line-height: 1.35;
    margin-bottom: 2.8rem;
    opacity: .9;
    font-family: "Montserrat-Regular";
}
.sst-hero-intro {
    font-size: 2rem;
    line-height: 1.55;
    max-width: 70rem;
    margin: 0 auto 4rem;
}
.sst-hero-intro p { margin: 0 0 .5em; }
.sst-hero-stats {
    display: grid;
    gap: 3.6rem;
    max-width: 90rem;
    margin: 0 auto;
}
.sst-hero-stats-1 { grid-template-columns: 1fr; }
.sst-hero-stats-2 { grid-template-columns: repeat(2, 1fr); }
.sst-hero-stats-3 { grid-template-columns: repeat(3, 1fr); }
.sst-hero-stats-4 { grid-template-columns: repeat(4, 1fr); }
.sst-stat { text-align: center; }
.sst-stat-value {
    font-size: 4.4rem;
    font-family: "Montserrat-Bold";
    line-height: 1;
    color: #78c5db;
}
.sst-stat-suffix { font-size: .55em; margin-left: .2rem; }
.sst-stat-label {
    font-size: 1.8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 1rem;
    opacity: .9;
    font-family: "Montserrat-SemiBold";
}

/* Per-stat color overrides - applied inline via sst-stat-color-<variant> class.
   Controls BOTH value and label color within the same .sst-stat. */
.sst-stat.sst-stat-color-white      .sst-stat-value,
.sst-stat.sst-stat-color-white      .sst-stat-label,
.sst-stat.sst-stat-color-light      .sst-stat-value,
.sst-stat.sst-stat-color-light      .sst-stat-label { color: #fff; }
.sst-stat.sst-stat-color-cream      .sst-stat-value,
.sst-stat.sst-stat-color-cream      .sst-stat-label { color: #f5ede0; }
.sst-stat.sst-stat-color-dark       .sst-stat-value,
.sst-stat.sst-stat-color-dark       .sst-stat-label { color: #0a2540; }
.sst-stat.sst-stat-color-navy       .sst-stat-value,
.sst-stat.sst-stat-color-navy       .sst-stat-label { color: #153354; }
.sst-stat.sst-stat-color-sky        .sst-stat-value,
.sst-stat.sst-stat-color-sky        .sst-stat-label { color: #78c5db; }
.sst-stat.sst-stat-color-sky-light  .sst-stat-value,
.sst-stat.sst-stat-color-sky-light  .sst-stat-label { color: #eaf6fb; }
.sst-stat.sst-stat-color-light-blue .sst-stat-value,
.sst-stat.sst-stat-color-light-blue .sst-stat-label { color: #66b2e8; }
.sst-stat.sst-stat-color-chartreuse .sst-stat-value,
.sst-stat.sst-stat-color-chartreuse .sst-stat-label { color: #bccb00; }
.sst-stat.sst-stat-color-slate      .sst-stat-value,
.sst-stat.sst-stat-color-slate      .sst-stat-label { color: #45545f; }
.sst-hero-scroll-indicator {
    position: absolute; bottom: 2.4rem; left: 50%;
    transform: translateX(-50%);
    color: #fff; z-index: 2; opacity: .7;
    transition: opacity .2s ease, transform .4s ease;
    animation: sst-scroll-bob 2s ease-in-out infinite;
}
.sst-hero-scroll-indicator:hover { opacity: 1; }
@keyframes sst-scroll-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* 3. Sub-Nav
   Desktop (>=992px): Fixed vertical pill on the LEFT, appears once .is-stuck.
   Mobile  (<992px):  Fixed bottom bar with toggle that slides the list up. */
.sst-subnav-sentinel {
    position: absolute; top: 0; left: 0; width: 1px; height: 1px;
    pointer-events: none; visibility: hidden;
}
.sst-subnav {
    position: fixed;
    /* Above the fixed site header (style.css header { z-index: 100 }) so the
       sticky subnav remains visible across the header zone on tall scrolls.
       Stays below active modal overlays (9990/9999) so booking/weather modals
       still cover everything when open. */
    z-index: 110;
    color: #fff;
    font-family: "Montserrat-SemiBold";
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.sst-subnav.is-stuck {
    opacity: 1;
    pointer-events: auto;
}
.sst-subnav-heading {
    font-size: 1.5rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .55;
    margin: 0 0 1.4rem;
    padding: 0 1.6rem;
}
/* ID-scoped to beat the theme's default #pageWrapper ul { margin: 32px 0 } rule */
#sst-subnav .sst-subnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sst-subnav-link {
    display: block;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.35;
    font-family: "Montserrat-SemiBold";
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sst-subnav-link:hover { color: #fff; }

/* Suppress Bootstrap 3's default a:active/:focus color (#23527c) and any
   transient background flash. Only .is-active (sky tint + left border) and
   :hover (brighter text) should produce visible feedback. */
.sst-subnav-link:active,
.sst-subnav-link:focus {
    background-color: transparent;
    color: #fff; /* matches :hover, overrides BS3 a:active #23527c */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.sst-subnav-link.is-active:active,
.sst-subnav-link.is-active:focus {
    color: #fff;
    background: rgba(120, 197, 219, .08);
}
.sst-subnav-link:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(120, 197, 219, .45);
}

/* Nav indent levels - for pseudo sub-menu hierarchy. Margin-left shifts the
   whole <li> so the left-border indicator also indents (matches nested feel). */
#sst-subnav .sst-subnav-indent-1 { margin-left: 8px; }
#sst-subnav .sst-subnav-indent-2 { margin-left: 16px; }

/* Overflow-below indicator: fade the bottom of the inner list so users see
   there are more items below. JS toggles .has-overflow-bottom on .sst-subnav
   while the scrollable inner can still scroll down; removed at the bottom.
   The mask-image makes the inner fade out (alpha to 0); we paint the
   PARENT .sst-subnav with the same dark-navy fill so the mask fades to
   dark instead of brightening (showing the page background underneath).

   Smooth show/hide: declare a "neutral" linear-gradient on BOTH the inner
   mask-image and the parent background as the default, with the same
   number of stops at the same positions as the active variant. Browsers
   that support gradient interpolation (current Chrome/Edge/Safari) animate
   each colour stop's alpha across the transition; older browsers ignore
   the transition and snap, preserving the original behaviour. */
.sst-subnav-inner {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 5rem), #000 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 5rem), #000 100%);
    -webkit-transition: -webkit-mask-image .35s ease;
            transition: mask-image .35s ease;
}
.sst-subnav.has-overflow-bottom .sst-subnav-inner {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 5rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 5rem), transparent 100%);
}
.sst-subnav {
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(100% - 5rem),
        transparent calc(100% - 5rem),
        transparent 100%);
    /* Re-declare opacity + transform transitions alongside background so
       the original fade-in/slide reveal animation (.sst-subnav -> .is-stuck)
       still runs - this rule has the same specificity as the .sst-subnav
       block above and would otherwise replace its transition shorthand. */
    transition: opacity .35s ease, transform .35s ease, background .35s ease;
}
.sst-subnav.has-overflow-bottom {
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(100% - 5rem),
        #0a2540 calc(100% - 5rem),
        #020a14 100%);
    border-radius: 1.4rem;
}
@media (max-width: 991px) {
    .sst-subnav.has-overflow-bottom { border-radius: 0; }
}
.sst-subnav.is-bottom-bar.has-overflow-bottom { border-radius: 0; }

/* Desktop (>= 992px) - vertical left pill, viewport-center anchored.
   The subnav only fades in via .is-stuck (JS toggles past the hero sentinel),
   by which point the ~260px site header has scrolled off, so centering at 50%
   no longer needs to clear it. max-height keeps 16rem clearance top + bottom. */
@media (min-width: 992px) {
    .sst-subnav {
        top: 50%;
        left: 2.4rem;
        transform: translate(-1rem, -50%);
        /* Safety net matching the JS pill-vs-bottom-bar tolerance
           (MIN_TOP 190 + MIN_BOTTOM 20). Wide-desktop variant below uses
           MIN_TOP 245. JS flips to bottom-bar before the menu reaches
           this cap, so the pill never shows an internal scrollbar - this
           only guards the brief window before JS first runs / on resize. */
        max-height: calc(100vh - 210px);
    }
    .sst-subnav.is-stuck {
        transform: translate(0, -50%);
    }
    .sst-subnav-toggle { display: none; }
    .sst-subnav-inner {
        background: rgba(10, 37, 64, .92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 1.4rem;
        box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.45);
        padding: 1.2rem 0 0.7rem; /* tight top + bottom (~2/3 less than before) */
        width: 24rem;
        max-height: calc(100vh - 210px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .sst-subnav-heading {
        margin: 0 0 0.8rem; /* was 1.4rem */
    }
    .sst-subnav-link {
        padding: 0.5rem 1.6rem 0.5rem 2.2rem;
        border-left: 3px solid transparent;
        white-space: normal;
    }
    .sst-subnav-link.is-active {
        color: #fff;
        border-left-color: #78c5db;
        background: rgba(120, 197, 219, .08);
    }
    .sst-subnav-link:hover {
        background: rgba(255,255,255,.04);
    }
}

/* Canonical Desktop band (>1199 px from CLAUDE.md): JS reserves 245 px
   top header-clearance instead of the 190 px used in the Tablet band,
   so the CSS safety-net max-height grows to match (245 + 20 = 265). */
@media (min-width: 1200px) {
    .sst-subnav,
    .sst-subnav-inner {
        max-height: calc(100vh - 265px);
    }
}

/* Mobile bottom-bar layout
   Applies in two cases:
     1. Viewport width <= 991.98 px (the default narrow-screen behaviour), OR
     2. .is-bottom-bar class set by JS at any viewport - currently used when
        the desktop left pill cannot fit vertically into the available
        viewport height (see initSubNav() height-overflow detection in
        js/safety-standards.js).
   Both selectors share the exact same rule body via selector list. */
.sst-subnav.is-bottom-bar {
    /* Reset desktop pill positioning that may have been set by the
       (min-width: 992px) block above. */
    top: auto;
    max-height: none;
}
@media (max-width: 991px) {
    .sst-subnav { bottom: 0; left: 0; right: 0; transform: translateY(100%); }
    .sst-subnav.is-stuck { transform: translateY(0); }
}
.sst-subnav.is-bottom-bar              { bottom: 0; left: 0; right: 0; transform: translateY(100%); }
.sst-subnav.is-bottom-bar.is-stuck     { transform: translateY(0); }

@media (max-width: 991px) {
    .sst-subnav-toggle,
    .sst-subnav.is-bottom-bar .sst-subnav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: rgba(10, 37, 64, .97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        padding: 1.6rem 2rem;
        font-family: "Montserrat-SemiBold";
        font-size: 1.5rem;
        letter-spacing: .02em;
        cursor: pointer;
        text-align: left;
    }
}
.sst-subnav.is-bottom-bar .sst-subnav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(10, 37, 64, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.6rem 2rem;
    font-family: "Montserrat-SemiBold";
    font-size: 1.5rem;
    letter-spacing: .02em;
    cursor: pointer;
    text-align: left;
}
@media (max-width: 991px) {
    .sst-subnav-current { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1.6rem; }
    .sst-subnav-chevron { flex: 0 0 auto; transition: transform .25s ease; }
    .sst-subnav[aria-expanded="true"] .sst-subnav-chevron,
    .sst-subnav.is-open .sst-subnav-chevron { transform: rotate(180deg); }

    .sst-subnav-inner {
        background: rgba(10, 37, 64, .97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height .3s ease;
    }
    .sst-subnav-list > li:first-child .sst-subnav-link { border-top: 0; }
    .sst-subnav.is-open .sst-subnav-inner { max-height: 70vh; overflow-y: auto; }
    .sst-subnav-heading { display: none; }
    /* Extra left padding on the link itself so list items feel visually
       indented from the toggle label and the 3 px is-active stripe has
       breathing room before the text starts. */
    .sst-subnav-link { padding: 0.7rem 2rem 0.7rem 3rem; border-top: 1px solid rgba(255,255,255,.05); font-size: 1.5rem; }
    .sst-subnav-link.is-active { color: #fff; background: rgba(120, 197, 219, .12); box-shadow: inset 3px 0 0 #78c5db; }
}
.sst-subnav.is-bottom-bar .sst-subnav-current { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1.6rem; }
.sst-subnav.is-bottom-bar .sst-subnav-chevron { flex: 0 0 auto; transition: transform .25s ease; }
.sst-subnav.is-bottom-bar[aria-expanded="true"] .sst-subnav-chevron,
.sst-subnav.is-bottom-bar.is-open .sst-subnav-chevron { transform: rotate(180deg); }
.sst-subnav.is-bottom-bar .sst-subnav-inner {
    background: rgba(10, 37, 64, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Reset the 1px border the (min-width: 992px) pill style declared.
       That selector still matches when JS forces the bottom-bar layout
       at desktop widths, so the border was leaking through and showed
       as a thin line between the toggle and the first list item. */
    border: 0;
    border-radius: 0;
    width: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .3s ease;
    box-shadow: none;
}
.sst-subnav.is-bottom-bar .sst-subnav-list > li:first-child .sst-subnav-link { border-top: 0; }
.sst-subnav.is-bottom-bar.is-open .sst-subnav-inner { max-height: 70vh; overflow-y: auto; }
.sst-subnav.is-bottom-bar .sst-subnav-heading { display: none; }
.sst-subnav.is-bottom-bar .sst-subnav-link { padding: 0.7rem 2rem 0.7rem 3rem; border-left: 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 1.5rem; }
.sst-subnav.is-bottom-bar .sst-subnav-link.is-active { color: #fff; background: rgba(120, 197, 219, .12); box-shadow: inset 3px 0 0 #78c5db; border-left-color: transparent; }

/* Toggle text-stack: eyebrow ("PAGE SECTIONS") + current section label,
   stacked vertically. Eyebrow only renders in bottom-bar layouts (mobile
   media + JS-forced .is-bottom-bar at desktop widths); on the desktop
   left-pill it's hidden because the heading already exists in the
   expanded list. */
.sst-subnav-toggle-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 1.6rem;
    align-items: flex-start;
    gap: 0.3rem;
}
.sst-subnav-eyebrow {
    display: none;
    font-size: 1.1rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    opacity: .55;
    line-height: 1.2;
}
@media (max-width: 991px) {
    .sst-subnav-eyebrow { display: block; }
    /* The wrapper now owns flex+margin; reset the legacy props on .sst-subnav-current
       so the ellipsis still works inside the new column wrapper. */
    .sst-subnav-current { margin-right: 0; }
}
.sst-subnav.is-bottom-bar .sst-subnav-eyebrow { display: block; }
.sst-subnav.is-bottom-bar .sst-subnav-current { margin-right: 0; }

/* Attention-grabbing pulse for the bottom-bar while the user has not yet
   interacted with it. A single sonar-style ripple ring expands outward
   from the chevron position (the click-target hint), then the cycle stays
   idle for ~4 s before the next ripple. Active duration ~1 s out of a
   5 s cycle = 80 % idle.
   First trigger delayed ~1.8 s so the user can scan the hero/content first.
   Animation stops the moment JS adds .has-been-clicked on first toggle or
   link click. prefers-reduced-motion disables it. */
@keyframes sst-subnav-ripple {
    0% {
        opacity: 0;
        transform: translate(50%, -50%) scale(0.6);
        border-width: 2px;
    }
    3%   { opacity: .8; }
    20%  {
        opacity: 0;
        transform: translate(50%, -50%) scale(2.6);
        border-width: 1px;
    }
    100% {
        opacity: 0;
        transform: translate(50%, -50%) scale(2.6);
        border-width: 1px;
    }
}
/* Pseudo-element anchor. position:relative on toggle so ::before can be
   absolutely placed over the chevron's center.
   Geometry: toggle padding-right = 2rem; chevron is 18 px wide and sits
   flush at the inner right edge -> chevron center sits at right 2.9rem
   from the toggle's right border. translate(50%, -50%) centers the
   pseudo-element on that point. */
.sst-subnav-toggle { position: relative; }
.sst-subnav-toggle::before {
    content: '';
    position: absolute;
    right: 2.9rem;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(120, 197, 219, .65);
    transform: translate(50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
}
/* JS-forced bottom-bar at any viewport */
.sst-subnav.is-bottom-bar.is-stuck:not(.has-been-clicked) .sst-subnav-toggle::before {
    animation: sst-subnav-ripple 5s ease-out 1.8s infinite;
}
/* Natural mobile bottom-bar (<=991px). Same animation, separate selector
   because at those widths the .is-bottom-bar class is not always set. */
@media (max-width: 991px) {
    .sst-subnav.is-stuck:not(.has-been-clicked) .sst-subnav-toggle::before {
        animation: sst-subnav-ripple 5s ease-out 1.8s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sst-subnav .sst-subnav-toggle::before { animation: none !important; }
}

/* Desktop: reserve the left side-nav width on the .sst-main WRAPPER (not on the inner).
   This guarantees the content area can NEVER slide under the fixed nav, even when the
   viewport narrows - the content simply gets squeezed instead of overlapping.
   Reserved: 24rem nav + 2.4rem left offset + 1.6rem gap = 28rem total. Hero sits above
   .sst-main so it's unaffected. */
@media (min-width: 992px) {
    .sst-main {
        padding-left: 28rem;
    }
    .sst-main .sst-cl-image-wide-above .sst-content-media {
        /* Image-wide-above wants to bleed past the boxed container; cap it on the left
           at the nav's right edge so the image never slides under the nav. */
        width: calc(100vw - 28rem);
        max-width: none;
        margin-left: calc(-50vw + 50% + 14rem);
    }
}

/* Mobile: avoid content sitting under the fixed bottom subnav bar.
   8.5rem = ~76 px = toggle height (~58 px with eyebrow row) + safety margin. */
@media (max-width: 991px) {
    .sst-main { padding-bottom: 8.5rem; }
}

/* 4. Common Segment Wrapper */
.sst-seg {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    scroll-margin-top: 14rem; /* ~126px to match JS HEADER_OFFSET for external anchor navigation */
}
.sst-seg-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.sst-seg-inner {
    position: relative; z-index: 2;
    display: flex;
    gap: var(--sst-media-gap, 4.8rem);
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 2.4rem;
    width: 100%;
    flex-wrap: wrap;
}

/* Yellow highlight for content inserted/modified by us (not in source docx).
   Used to flag "we added this" passages so editors can review and refine. */
.sst-highlight {
    background-color: #fff3a3;
    padding: 0.05em 0.25em;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #4a3a00;
}

/* Panel treatment (bg colour + bg image sections): drop shadow + vertical
   margin. Rounding comes from the Rounded Edges dropdown via .sst-rnd-*
   (see below). Right edge always stays sharp - that side is flush with
   the viewport thanks to the fixed left side-nav, rounding there would
   leave a visible gap. Mobile stacks full-width flush to both sides, so
   no rounding there at all. */
.sst-seg.sst-bg-image,
.sst-seg.sst-bg-white,
.sst-seg.sst-bg-off-white,
.sst-seg.sst-bg-cream,
.sst-seg.sst-bg-warm-cream,
.sst-seg.sst-bg-sky-light,
.sst-seg.sst-bg-sky,
.sst-seg.sst-bg-sky-deep,
.sst-seg.sst-bg-slate,
.sst-seg.sst-bg-navy-mid,
.sst-seg.sst-bg-navy-dark {
    box-shadow: var(--sst-shadow-panel);
}
/* Outer margins are now controlled per-section via the Margin Top /
   Margin Bottom dropdowns (see .sst-mg-t-* / .sst-mg-b-* below).
   Historical panel default (2rem) = 'md' option. */

/* Rounded Edges (per-section dropdown). Order: TL TR BR BL.
   'both' = TL + BL rounded (default), 'top' = TL only, 'bot' = BL only,
   'none' = sharp. Right corners always 0. Legacy posts without the
   field get .sst-rnd-both from the render defaulter. */
.sst-seg.sst-rnd-both { border-radius: 1.4rem 0 0 1.4rem; }
.sst-seg.sst-rnd-top  { border-radius: 1.4rem 0 0 0;      }
.sst-seg.sst-rnd-bot  { border-radius: 0 0 0 1.4rem;      }
.sst-seg.sst-rnd-none { border-radius: 0;                 }
@media (max-width: 991px) {
    /* Mobile: both sides flush to viewport, always sharp */
    .sst-seg[class*="sst-rnd-"] { border-radius: 0; }
}
@media (max-width: 991px) {
    .sst-seg.sst-bg-image,
    .sst-seg.sst-bg-white,
    .sst-seg.sst-bg-off-white,
    .sst-seg.sst-bg-cream,
    .sst-seg.sst-bg-warm-cream,
    .sst-seg.sst-bg-sky-light,
    .sst-seg.sst-bg-sky,
    .sst-seg.sst-bg-sky-deep,
    .sst-seg.sst-bg-slate,
    .sst-seg.sst-bg-navy-mid,
    .sst-seg.sst-bg-navy-dark {
        border-radius: 0.8rem;
        margin: 0.8rem 0;
    }
}

/* The first segment sits flush below the global header - no top margin
   so there's no white gap between the header and the first BG-panel. */
.sst-main > .sst-seg:first-child { margin-top: 0; }

/* Scroll-reveal (progressive enhancement, mirrors the Safety Experiences
   pattern). Segments are invisible + shifted down 30px, then slide up +
   fade in when they cross the viewport threshold. JS adds .reveal-enabled
   to #safetyStandardsPage and .is-visible to each .sst-seg as it enters
   view. Without JS, nothing applies and content is visible by default. */
.reveal-enabled .sst-seg {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.reveal-enabled .sst-seg.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-enabled .sst-seg,
    .reveal-enabled .sst-seg.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Per-segment toggle (ACF Drop Shadow switch): suppress panel shadow while
   keeping rounded corners + margin. Flat, seamless look for segments that
   should read as part of a continuous visual flow. */
.sst-seg.sst-no-shadow { box-shadow: none; }

/* 5. BG Presets */
.sst-bg-white      { background-color: #fff;    color: #0a2540; }
.sst-bg-off-white  { background-color: #f8f9fb; color: #0a2540; }
.sst-bg-cream      { background-color: #f5ede0; color: #0a2540; }
.sst-bg-warm-cream { background-color: #fdf6e3; color: #0a2540; }
.sst-bg-sky-light  { background-color: #eaf6fb; color: #0a2540; }
.sst-bg-sky        { background-color: #78c5db; color: #0a2540; }
.sst-bg-sky-deep   { background-color: #56a1bf; color: #fff;    }
.sst-bg-slate      { background-color: #45545f; color: #fff;    }
.sst-bg-navy-mid   { background-color: #153354; color: #fff;    }
.sst-bg-navy-dark  { background-color: #0a2540; color: #fff;    }
.sst-bg-green      { background-color: #2fa74a; color: #fff;    }
.sst-bg-yellow     { background-color: #f4c430; color: #0a2540; }
.sst-bg-red        { background-color: #d94a4a; color: #fff;    }
.sst-bg-black      { background-color: #000;    color: #fff;    }

/* 6. Overlay Presets
   Darkening overlays (solid-black/navy, linear-*-dark, vignette-dark/navy, bottom-fade-navy)
   Brightening overlays (solid-white/cream, linear-*-light, vignette-light, top-fade-white) */
.sst-ov-solid-black        { background: #000; }
.sst-ov-solid-white        { background: #fff; }
.sst-ov-solid-navy         { background: #0a2540; }
.sst-ov-solid-sky          { background: #78c5db; }
.sst-ov-solid-cream        { background: #f5ede0; }
/* Perceptually-eased linear gradients: a two-stop 0%->100% fade drops
   below the eye's threshold surprisingly early (around ~30-40%), which
   reads as "bright band at top + hard cut to bg". Multi-stop approximation
   of an ease-out curve keeps visible brightness deeper into the section
   so the fade actually reaches the far edge. Same curve for dark + light. */
.sst-ov-linear-top-dark    { background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.12) 85%, transparent 100%); }
.sst-ov-linear-bottom-dark { background: linear-gradient(  0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.12) 85%, transparent 100%); }
.sst-ov-linear-left-dark   { background: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.12) 85%, transparent 100%); }
.sst-ov-linear-right-dark  { background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.12) 85%, transparent 100%); }
.sst-ov-linear-top-light    { background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.32) 60%, rgba(255,255,255,.12) 85%, transparent 100%); }
.sst-ov-linear-bottom-light { background: linear-gradient(  0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.32) 60%, rgba(255,255,255,.12) 85%, transparent 100%); }
.sst-ov-linear-left-light   { background: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.32) 60%, rgba(255,255,255,.12) 85%, transparent 100%); }
.sst-ov-linear-right-light  { background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.32) 60%, rgba(255,255,255,.12) 85%, transparent 100%); }
.sst-ov-linear-navy-sky    { background: linear-gradient(145deg, #0a2540 0%, #78c5db 100%); }
.sst-ov-linear-sky-navy    { background: linear-gradient(145deg, #78c5db 0%, #0a2540 100%); }
.sst-ov-vignette-dark      { background: radial-gradient(ellipse at center, transparent 40%, #000 120%); }
.sst-ov-vignette-navy      { background: radial-gradient(ellipse at center, transparent 30%, #0a2540 110%); }
.sst-ov-vignette-light     { background: radial-gradient(ellipse at center, transparent 40%, #fff 120%); }
.sst-ov-duotone-navy-sky   { background: linear-gradient(145deg, #0a2540 0%, #78c5db 100%); mix-blend-mode: multiply; }
.sst-ov-bottom-fade-navy   { background: linear-gradient(180deg, transparent 0%, rgba(10,37,64,0.8) 100%); }
.sst-ov-bottom-fade-white  { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 100%); }
.sst-ov-top-fade-white     { background: linear-gradient(0deg,   transparent 0%, rgba(255,255,255,0.85) 100%); }

/* 7. Spacing Utilities */
.sst-sp-t-none { padding-top: 0; }
.sst-sp-t-sm   { padding-top: 3.6rem; }
.sst-sp-t-md   { padding-top: 7rem; }
.sst-sp-t-lg   { padding-top: 10.5rem; }
.sst-sp-t-xl   { padding-top: 15rem; }
.sst-sp-b-none { padding-bottom: 0; }
.sst-sp-b-sm   { padding-bottom: 3.6rem; }
.sst-sp-b-md   { padding-bottom: 7rem; }
.sst-sp-b-lg   { padding-bottom: 10.5rem; }
.sst-sp-b-xl   { padding-bottom: 15rem; }

/* Outer margin (gap to neighbouring sections). Dropdown-driven, 5 steps.
   'md' is the historical 2rem default; 'none' clears the gap entirely
   so adjacent panels can sit flush. Applies to every section regardless
   of background (editor can push non-panel sections apart too). */
.sst-seg.sst-mg-t-none { margin-top:    0;       }
.sst-seg.sst-mg-t-sm   { margin-top:    1rem;    }
.sst-seg.sst-mg-t-md   { margin-top:    2rem;    }
.sst-seg.sst-mg-t-lg   { margin-top:    3.2rem;  }
.sst-seg.sst-mg-t-xl   { margin-top:    4.8rem;  }
.sst-seg.sst-mg-b-none { margin-bottom: 0;       }
.sst-seg.sst-mg-b-sm   { margin-bottom: 1rem;    }
.sst-seg.sst-mg-b-md   { margin-bottom: 2rem;    }
.sst-seg.sst-mg-b-lg   { margin-bottom: 3.2rem;  }
.sst-seg.sst-mg-b-xl   { margin-bottom: 4.8rem;  }

/* 8. Alignment */
.sst-align-h-left   .sst-seg-inner { text-align: left; }
.sst-align-h-center .sst-seg-inner { text-align: center; }
.sst-align-h-right  .sst-seg-inner { text-align: right; }
.sst-align-v-top    .sst-seg-inner { align-items: flex-start; }
.sst-align-v-center .sst-seg-inner { align-items: center; }
.sst-align-v-bottom .sst-seg-inner { align-items: flex-end; }

/* 9. Container Width */
.sst-cw-boxed .sst-seg-inner { max-width: 120rem; }
.sst-cw-wide  .sst-seg-inner { max-width: 90vw; }
.sst-cw-full  .sst-seg-inner { max-width: none; padding: 0; }

/* Desktop: Full Width segments break out of the .sst-main { padding-left: 28rem }
   reservation so the outer bg/panel extends edge-to-edge under the fixed side-nav.
   The INNER content re-reserves that space via padding-left so text doesn't slide
   under the nav. Mobile/tablet (<992px) ignore this: .sst-main has no padding-left,
   so a full-width segment naturally spans viewport already.

   The four indent variants stack ON TOP of the 28rem nav-reserve so indent-sm/md/lg
   actually differ visibly on cw-full segments (without these explicit rules,
   .sst-cw-full's hard padding-left: 28rem would override .sst-indent-* and all
   indents would look identical). */
@media (min-width: 992px) {
    .sst-main .sst-seg.sst-cw-full {
        margin-left: -28rem;
        width: calc(100% + 28rem);
    }
    .sst-main .sst-seg.sst-cw-full .sst-seg-inner {
        padding-left: 28rem;
        padding-right: 2.4rem;
        box-sizing: border-box;
    }
    /* cw-full + indent: nav-reserve PLUS the indent's own horizontal padding */
    .sst-main .sst-seg.sst-cw-full.sst-indent-sm .sst-seg-inner {
        padding-left: calc(28rem + 3.2rem);
        padding-right: 3.2rem;
    }
    .sst-main .sst-seg.sst-cw-full.sst-indent-md .sst-seg-inner {
        padding-left: calc(28rem + 6.4rem);
        padding-right: 6.4rem;
    }
    .sst-main .sst-seg.sst-cw-full.sst-indent-lg .sst-seg-inner {
        padding-left: calc(28rem + 12rem);
        padding-right: 12rem;
    }
    .sst-main .sst-seg.sst-cw-full.sst-indent-xl .sst-seg-inner {
        padding-left: calc(28rem + 18rem);
        padding-right: 18rem;
    }
}

/* Indentation - explicit horizontal padding on the segment inner content.
   Applied AFTER container-width so 'full' still gets indentation if requested.
   Applies to ALL layout types uniformly (icon-grid, accordion, etc.) - no magic. */
.sst-indent-none .sst-seg-inner { /* no extra indentation */ }
.sst-indent-sm   .sst-seg-inner { padding-left: 3.2rem;  padding-right: 3.2rem; }
.sst-indent-md   .sst-seg-inner { padding-left: 6.4rem;  padding-right: 6.4rem; }
.sst-indent-lg   .sst-seg-inner { padding-left: 12rem;   padding-right: 12rem; }
.sst-indent-xl   .sst-seg-inner { padding-left: 18rem;   padding-right: 18rem; }
@media (max-width: 768px) {
    .sst-indent-sm .sst-seg-inner,
    .sst-indent-md .sst-seg-inner,
    .sst-indent-lg .sst-seg-inner,
    .sst-indent-xl .sst-seg-inner { padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* 10. Content Layout
   --sst-media-width / --sst-text-width / --sst-media-gap / --sst-media-top
   are CSS custom properties set as inline style on the parent <section>
   by sst_render_segment_wrapper (cascade DOWN). Fallbacks keep legacy
   behaviour when no slider values are present. */
.sst-cl-text-only   .sst-content-text     { flex: 1 1 100%; }
/* Split 100% between text + media, minus HALF the gap on each side so
   total fits in 100% - gap without triggering flex-wrap. */
.sst-cl-image-right .sst-content-text     { flex: 0 0 auto; width: calc(var(--sst-text-width, 50%) - var(--sst-media-gap, 4.8rem) / 2); min-width: 0; }
.sst-cl-image-right .sst-content-media    { flex: 0 0 auto; width: calc(var(--sst-media-width, 50%) - var(--sst-media-gap, 4.8rem) / 2); min-width: 0; margin-top: var(--sst-media-top, 0); }
.sst-cl-image-left  .sst-content-text     { flex: 0 0 auto; width: calc(var(--sst-text-width, 50%) - var(--sst-media-gap, 4.8rem) / 2); min-width: 0; order: 2; }
.sst-cl-image-left  .sst-content-media    { flex: 0 0 auto; width: calc(var(--sst-media-width, 50%) - var(--sst-media-gap, 4.8rem) / 2); min-width: 0; order: 1; margin-top: var(--sst-media-top, 0); }
.sst-cl-image-top   .sst-seg-inner        { flex-direction: column; }
.sst-cl-image-top   .sst-content-media    { order: 1; width: 100%; }
.sst-cl-image-top   .sst-content-text     { order: 2; width: 100%; }
.sst-cl-image-bottom .sst-seg-inner       { flex-direction: column; }
.sst-cl-image-bottom .sst-content-media   { order: 2; width: 100%; }
.sst-cl-image-bottom .sst-content-text    { order: 1; width: 100%; }
.sst-cl-image-wide-above .sst-seg-inner   { flex-direction: column; text-align: center; }
/* Render order: media first (full-bleed above), text below. The render
   code emits text BEFORE media in source, so we flip via order. */
.sst-cl-image-wide-above .sst-content-media { order: 1; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.sst-cl-image-wide-above .sst-content-text  { order: 2; max-width: 80rem; margin: 0 auto; }
.sst-cl-image-background .sst-content-text  { flex: 1 1 100%; position: relative; z-index: 2; }
.sst-cl-image-background .sst-content-media { position: absolute; inset: 0; z-index: 0; }
.sst-cl-image-background .sst-content-media img { width: 100%; height: 100%; object-fit: cover; }

/* Media image: rounded corners always; shadow opt-in via Drop Shadow toggle.
   Skip rounding on the image-background variant (full-bleed underlay).
   Aspect ratio (when --sst-media-ratio is set by the wrapper) wins over
   natural image dimensions - img gets object-fit: cover + explicit ratio. */
.sst-content-media img { border-radius: 1.4rem; }
.sst-cl-image-background .sst-content-media img { border-radius: 0; }
.sst-content-media.sst-media-shadow img {
    box-shadow: var(--sst-shadow-panel);
}
.sst-content-media img {
    aspect-ratio: var(--sst-media-ratio, auto);
    object-fit: cover;
    width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .sst-content-media img { border-radius: 0.8rem; }
}

/* -----------------------------------------------------------------
   Accordion Shared Media Module - Gallery variant
   (Splide slider with arrows inside the image, optional PhotoSwipe
   lightbox wrapper emitted by sst_render_gallery_slider).
   ----------------------------------------------------------------- */
.sst-media-slider {
    position: relative;
    border-radius: 1.4rem;
    overflow: hidden;
}
/* Splide's own CSS has 'flex-shrink: 0' on .splide__slide but does NOT set
   an explicit width - it relies on JS to compute slide widths at mount.
   Because our slides contain lazy-loaded <img width="1024" height="768">,
   the intrinsic content width (1024px) is bigger than the track width (~420px).
   With flex-shrink: 0, the flex item refuses to shrink below content size and
   the slide bursts to 1024px wide, dragging the slider height to 768px.
   Forcing 'width: 100%' + 'min-width: 0' pins each slide to 100% of the
   track regardless of image natural size, so the image can cleanly scale
   down via its 'width: 100%' rule. */
.sst-media-slider .splide__slide {
    width: 100%;
    min-width: 0;
}
.sst-content-media .sst-media-slider img {
    display: block;
    aspect-ratio: var(--sst-media-ratio, auto);
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 0;
}
.sst-content-media.sst-media-shadow .sst-media-slider {
    box-shadow: var(--sst-shadow-panel);
}
/* "Gallery below Accordion Image" mode: single image + slider stack
   inside the media column, with the optional heading overlaid on the
   slider via an .sst-media-slider-frame wrapper. Both blocks inherit
   the shared Image Drop Shadow toggle via the .sst-media-shadow class
   on the wrapping .sst-content-media. */
/* Gap between accordion image and the gallery slider in "Gallery
   Below Accordion Image" mode. Editor-controlled via the
   sst_media_gallery_top_gap_px range field; CSS var carries the px
   value. Fallback 14 px if the var is not set (legacy ~1.6rem). */
.sst-content-media > img + .sst-media-slider,
.sst-content-media > img + .sst-media-slider-frame {
    margin-top: var(--sst-gallery-top-gap, 14px);
}
/* Frame = positioning context for the absolute-positioned heading. */
.sst-media-slider-frame {
    position: relative;
}
/* Heading sits top-left as a small pill overlay. Semi-transparent navy
   bg + backdrop-blur keeps the text readable on any image. Kept narrow
   and inline-block so it hugs its content instead of spanning the slider
   width, and elevated above the Splide arrows via z-index. */
.sst-media-slider-frame .sst-media-gallery-heading {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    display: inline-block;
    max-width: calc(100% - 1.2rem);
    margin: 0;
    padding: 0.9rem 1.8rem;
    font-size: 1.9rem;
    line-height: 1.25;
    font-family: "Montserrat-SemiBold", sans-serif;
    color: #fff;
    background: rgba(10, 37, 64, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    letter-spacing: 0.01em;
    pointer-events: none;
}

/* Forced-ratio gallery mode: when the editor picks a specific Gallery
   Aspect Ratio (not 'Autodetect'), the slider container takes that ratio
   and each slide image fills it with object-fit: cover so mixed-ratio
   galleries all render at the same size. Without this block, slide
   heights follow the first image's natural ratio (autodetect). */
.sst-media-slider.sst-media-slider--ratio {
    aspect-ratio: var(--sst-gallery-ratio);
}
.sst-media-slider.sst-media-slider--ratio .splide__track,
.sst-media-slider.sst-media-slider--ratio .splide__list,
.sst-media-slider.sst-media-slider--ratio .splide__slide,
.sst-media-slider.sst-media-slider--ratio .splide__slide > a {
    height: 100%;
}
.sst-media-slider.sst-media-slider--ratio .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
}
/* Arrows: circular, inset inside the slide, semi-transparent navy chip
   so they read on both dark photos (white SVG on dark chip) and light
   photos (dark chip provides contrast against the white background). */
.sst-media-slider .splide__arrows { pointer-events: none; }
.sst-media-slider .splide__arrow {
    pointer-events: auto;
    background: rgba(10, 37, 64, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #fff;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    opacity: .85;
    transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.sst-media-slider .splide__arrow svg {
    fill: #fff;
    width: 1.8rem; height: 1.8rem;
}
.sst-media-slider .splide__arrow:hover {
    opacity: 1;
    background: rgba(10, 37, 64, .8);
    transform: translateY(-50%) scale(1.05);
}
.sst-media-slider .splide__arrow--prev { left: 1.2rem; }
.sst-media-slider .splide__arrow--next { right: 1.2rem; }
.sst-media-slider .splide__arrow:disabled { opacity: .3; }
.sst-media-slider .splide__slide > a { display: block; line-height: 0; }
.sst-media-slider .splide__slide img { cursor: inherit; }
/* Anchor-wrapped slides (lightbox on) get a zoom cursor; span variant doesn't */
.sst-media-slider .splide__slide > a img { cursor: zoom-in; }
@media (max-width: 991px) {
    .sst-media-slider { border-radius: 0.8rem; }
    .sst-media-slider .splide__arrow { width: 3.6rem; height: 3.6rem; }
}

/* ----------------------------------------------------------------
   Shared Media Module (usable on any layout with Content Layout).
   Renderer emits `.sst-content-media` alongside `.sst-content-text`
   inside `.sst-seg-inner`. Layout class `.sst-cl-image-*` on the segment
   handles left/right/top/bottom placement. Image aspect ratio is set on
   the acf_image_focus field config (NOT here). Width / gap / top-offset
   come from --sst-media-width / --sst-media-gap / --sst-media-top
   (inline style on <section>, cascade DOWN to descendants).
   ---------------------------------------------------------------- */

/* Gap between text column and media column - inherits CSS custom
   property from <section>. Fallback 4.8rem matches legacy default. */
.sst-seg-inner { gap: var(--sst-media-gap, 4.8rem); }

/* Hide the media column below a chosen viewport width - the text
   column expands to fill. Uses :has() on .sst-seg-inner to detect the
   hidden-state and relax the sibling text-column's calc() width. */
@media (max-width: 991px) {
    .sst-content-media.sst-media-hide-below-992 { display: none; }
    .sst-seg-inner:has(.sst-media-hide-below-992) > .sst-content-text { width: 100% !important; }
}
@media (max-width: 768px) {
    .sst-content-media.sst-media-hide-below-768 { display: none; }
    .sst-seg-inner:has(.sst-media-hide-below-768) > .sst-content-text { width: 100% !important; }
}
@media (max-width: 600px) {
    .sst-content-media.sst-media-hide-below-600 { display: none; }
    .sst-seg-inner:has(.sst-media-hide-below-600) > .sst-content-text { width: 100% !important; }
}

/* Accordion needs flex-row for side-by-side image layouts (its default
   is flex-column so header stacks above items). Only override when the
   segment has image-right/left content layout. */
.sst-l-accordion.sst-cl-image-right .sst-seg-inner,
.sst-l-accordion.sst-cl-image-left  .sst-seg-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .sst-l-accordion.sst-cl-image-right .sst-seg-inner,
    .sst-l-accordion.sst-cl-image-left  .sst-seg-inner { flex-direction: column; }
}

/* Heading color classes */
/* Heading color classes - cascade to all body text too so image-bg + dark-overlay
   segments render all text (h2 + body + compare-text + accordion content) in white.
   Without this, body text inherits page default (dark) and becomes unreadable. */
.sst-hc-light,
.sst-hc-light p,
.sst-hc-light h2, .sst-hc-light h3,
.sst-hc-light .sst-body,
.sst-hc-light .sst-eyebrow,
.sst-hc-light .sst-compare-text,
.sst-hc-light .sst-timeline-text,
.sst-hc-light .sst-timeline-title,
.sst-hc-light .sst-icon-item-text,
.sst-hc-light .sst-icon-item-title,
.sst-hc-light .sst-accordion-summary,
.sst-hc-light .sst-accordion-content,
.sst-hc-light a { color: #fff; }
.sst-hc-light a { text-decoration: underline; }


/* 11. Per-Layout Styles */

/* Layout: Standard */
.sst-l-standard .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-standard h2 { font-size: 3.6rem; margin: 0 0 2rem; font-family: "Montserrat-Bold"; }
.sst-l-standard .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-l-standard .sst-body p { margin: 0 0 .85em; }
/* Button base: only template-specific properties (size/font/spacing/case).
   Radius, transition, hover (lighten+lift+shadow), focus ring come from
   the site-wide unified button system in style.css. */
.sst-btn {
    display: inline-block; padding: 1.4rem 3rem;
    font-size: 1.6rem; font-family: "Montserrat-SemiBold"; letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: 2rem;
}
.sst-btn-primary   { background: #78c5db; color: #0a2540; border: 2px solid #78c5db; }
.sst-btn-ghost     { background: transparent; color: currentColor; border: 2px solid currentColor; }
/* .sst-btn-ghost has transparent bg, so brightness() alone won't visibly change
   the background - keep the subtle rgba fill on hover for a visible state cue. */
.sst-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.sst-btn-text-link { background: transparent; color: #78c5db; border: 0; padding: 1.4rem 0; text-decoration: underline; }

/* Layout: Text + YouTube */
.sst-l-text-youtube { display: flex; gap: 4.8rem; flex-wrap: wrap; width: 100%; align-items: center; }
.sst-l-text-youtube.sst-vpos-right { flex-direction: row; }
.sst-l-text-youtube.sst-vpos-left  { flex-direction: row-reverse; }
.sst-l-text-youtube.sst-vpos-below { flex-direction: column; align-items: stretch; }
.sst-l-text-youtube.sst-vpos-above { flex-direction: column-reverse; align-items: stretch; }
.sst-l-text-youtube.sst-vpos-full-width-below { flex-direction: column; align-items: stretch; }
.sst-l-text-youtube.sst-vpos-full-width-below .sst-content-media {
    width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); flex-basis: auto;
}
.sst-l-text-youtube .sst-content-text  { flex: 1 1 45%; min-width: 28rem; }
.sst-l-text-youtube .sst-content-media { flex: 1 1 45%; min-width: 28rem; }
.sst-l-text-youtube .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-text-youtube h2 { font-size: 3.6rem; margin: 0 0 2rem; font-family: "Montserrat-Bold"; }
.sst-l-text-youtube .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-l-text-youtube .sst-body p { margin: 0 0 .85em; }
.sst-l-text-youtube .sst-content-media .yt-inline,
.sst-l-text-youtube .sst-content-media iframe { width: 100%; height: 100%; display: block; }
@media (max-width: 768px) {
    .sst-l-text-youtube { flex-direction: column !important; }
    .sst-l-text-youtube .sst-content-text,
    .sst-l-text-youtube .sst-content-media { flex: 1 1 100%; min-width: 0; }
}

/* Layout: Timeline / Stepper */
.sst-l-timeline .sst-seg-inner { flex-direction: column; }
.sst-l-timeline .sst-timeline-header { width: 100%; margin: 0 0 3.6rem; }
.sst-l-timeline .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-timeline h2 { font-size: 3.6rem; margin: 0 0 1.8rem; font-family: "Montserrat-Bold"; }
.sst-l-timeline .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-timeline { list-style: none; margin: 0; padding: 0; width: 100%; position: relative; }
.sst-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
}
.sst-timeline-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 5.2rem; height: 5.2rem;
    font-family: "Montserrat-Bold"; font-size: 2rem;
    border-radius: 50%;
    background: #0a2540; color: #fff;
    position: relative; z-index: 2;
}
.sst-timeline-nums-circle-outline .sst-timeline-num {
    background: transparent; color: #0a2540; border: 2px solid #0a2540;
}
.sst-timeline-nums-roman .sst-timeline-num {
    background: transparent; color: currentColor; border: 0; font-family: Georgia, serif; font-style: italic; font-size: 2.4rem;
    width: auto; height: auto; min-width: 4rem;
}
.sst-timeline-body { flex: 1 1 auto; padding-bottom: 1rem; }
.sst-timeline-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 2rem; color: #78c5db; }
.sst-timeline-title { font-size: 2.4rem; margin: 0 0 1rem; font-family: "Montserrat-Bold"; }
.sst-timeline-text { font-size: 1.6rem; line-height: 1.6; }
.sst-timeline-text p { margin: 0 0 .75em; }
.sst-timeline-image { margin-top: 1.8rem; max-width: 48rem; }

/* Vertical timeline: connecting line */
.sst-timeline-vertical { padding-left: 0; }
.sst-timeline-vertical .sst-timeline-step { padding-bottom: 3.6rem; }
.sst-timeline-vertical .sst-timeline-step:last-child { padding-bottom: 0; }
.sst-timeline-vertical .sst-timeline-step::before {
    content: ''; position: absolute;
    top: 5.2rem; left: 2.5rem;
    width: 2px; bottom: -.8rem;
    background: rgba(120, 197, 219, .35);
    z-index: 1;
}
.sst-timeline-vertical .sst-timeline-step:last-child::before { display: none; }
.sst-timeline-vertical.sst-timeline-nums-none .sst-timeline-step::before { display: none; }
.sst-timeline-vertical.sst-timeline-nums-roman .sst-timeline-step::before { left: 1.8rem; }

/* Horizontal timeline */
.sst-timeline-horizontal {
    display: flex; flex-direction: row; gap: 2.4rem;
    overflow-x: auto;
    counter-reset: sst-timeline-step;
    padding-bottom: 1rem;
}
.sst-timeline-horizontal .sst-timeline-step {
    flex: 1 1 24rem; min-width: 22rem;
    flex-direction: column; align-items: flex-start;
    padding-top: 7.2rem;
}
.sst-timeline-horizontal .sst-timeline-num {
    position: absolute; top: 0; left: 0;
}
.sst-timeline-horizontal .sst-timeline-step::before {
    content: ''; position: absolute;
    top: 2.6rem; left: 5.2rem; right: -2.4rem; height: 2px;
    background: rgba(120, 197, 219, .35);
    z-index: 1;
}
.sst-timeline-horizontal .sst-timeline-step:last-child::before { display: none; }
.sst-timeline-horizontal.sst-timeline-nums-none .sst-timeline-step { padding-top: 0; }
.sst-timeline-horizontal.sst-timeline-nums-none .sst-timeline-step::before { display: none; }

@media (max-width: 768px) {
    .sst-timeline-horizontal { flex-direction: column; overflow-x: visible; }
    .sst-timeline-horizontal .sst-timeline-step { padding-top: 0; flex-direction: row; }
    .sst-timeline-horizontal .sst-timeline-num { position: relative; }
    .sst-timeline-horizontal .sst-timeline-step::before { display: none; }
    .sst-timeline-num { width: 4rem; height: 4rem; font-size: 1.6rem; }
    .sst-timeline-vertical .sst-timeline-step::before { left: 1.9rem; top: 4rem; }
}

/* Layout: Icon / Checklist Grid */
.sst-l-icon_grid .sst-seg-inner { flex-direction: column; }
.sst-l-icon_grid .sst-icon-grid-header { width: 100%; margin: 0 0 3.6rem; }
.sst-l-icon_grid .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-icon_grid h2 { font-size: 3.6rem; margin: 0 0 1.8rem; font-family: "Montserrat-Bold"; }
.sst-l-icon_grid .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-icon-grid {
    display: grid;
    gap: 2.4rem;
    width: 100%;
}
.sst-icon-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sst-icon-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sst-icon-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sst-icon-item {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1.4rem;
    padding: 2.4rem;
    border-radius: 6px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sst-icon-grid-card .sst-icon-item {
    background: #fff; color: #0a2540;
    box-shadow: 0 2px 12px rgba(10, 37, 64, .08);
}
.sst-icon-grid-card .sst-icon-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(10, 37, 64, .12); }
.sst-icon-grid-bordered .sst-icon-item { border: 1px solid rgba(10, 37, 64, .18); padding: 2.2rem; }
.sst-icon-grid-minimal .sst-icon-item  { padding: 1rem 0; background: transparent; }
.sst-icon-grid-numbered-card .sst-icon-item {
    background: #fff; color: #0a2540; padding: 2.8rem 2.4rem 2.4rem;
    box-shadow: 0 2px 12px rgba(10, 37, 64, .08);
}

/* Item Box Style (variant + bg opacity + border color/width + corner
   radius + drop shadow) - ACF-driven per-grid.
   CSS custom properties --sst-icg-item-bg-rgb / -bg-alpha / -border-rgb
   / -border-alpha / -radius / -border-width are written as inline style
   on .sst-icon-grid by the render helper. The shadow preset ships as a
   class (.sst-icg-shadow-subtle etc.) so the editor cannot inject
   arbitrary box-shadow values.

   When the editor picks a variant (light/dark), the custom props above
   override the plain-card + numbered-card background + border below.
   Variant 'auto' falls back to whichever rgb is inherited from the
   segment's text-contrast cascade (see .sst-hc-light overrides below). */
.sst-icon-grid[style*="--sst-icg-item-bg-alpha"] .sst-icon-item {
    background: rgba(var(--sst-icg-item-bg-rgb, 255 255 255) / var(--sst-icg-item-bg-alpha, .9));
    /* Use OUTLINE (not border) so the frame is painted on the outside
       of the element's box. Two benefits:
       1. The content area is unchanged when the editor changes the
          border width (border would shrink the inner width).
       2. The highlight-bar ::before sits flush against the left edge
          of the box without overlapping the border paint. */
    border: 0;
    outline-style: solid;
    outline-width: var(--sst-icg-item-border-width, 1px);
    outline-color: rgba(var(--sst-icg-item-border-rgb, 10 37 64) / var(--sst-icg-item-border-alpha, .15));
    outline-offset: 0;
    border-radius: var(--sst-icg-item-radius, 6px);
}

/* Drop shadow presets (applied per .sst-icon-grid via shadow class) */
.sst-icon-grid.sst-icg-shadow-none       .sst-icon-item { box-shadow: none; }
.sst-icon-grid.sst-icg-shadow-subtle     .sst-icon-item { box-shadow: 0 2px 6px  rgba(10, 37, 64, .06); }
.sst-icon-grid.sst-icg-shadow-soft       .sst-icon-item { box-shadow: 0 4px 14px rgba(10, 37, 64, .10); }
.sst-icon-grid.sst-icg-shadow-pronounced .sst-icon-item { box-shadow: 0 8px 22px rgba(10, 37, 64, .16); }
.sst-icon-grid.sst-icg-shadow-deep       .sst-icon-item { box-shadow: 0 14px 34px rgba(10, 37, 64, .24); }

/* Dark-bg colours (sky / light-blue / slate / navy / dark / green / red
   / black) force white text + default a white border when the editor
   left the border-color on Auto. Individual title/text elements also
   get white because the .sst-icon-grid-card rule higher up forces navy. */
.sst-icon-grid.sst-icg-bg-is-dark .sst-icon-item {
    color: #fff;
}
.sst-icon-grid.sst-icg-bg-is-dark .sst-icon-item-title,
.sst-icon-grid.sst-icg-bg-is-dark .sst-icon-item-text,
.sst-icon-grid.sst-icg-bg-is-dark .sst-icon-item-text p { color: #fff; }
.sst-icon-grid.sst-icg-bg-is-dark .sst-icon-item {
    --sst-icg-item-border-rgb: 255 255 255;
}

/* Auto variant: follow the segment's text-contrast cascade. On image-
   bg or dark-preset segments (.sst-hc-light) the icon items default
   to a black base + white text; on plain light segments they stay on
   the white-base fallback from var(). */
.sst-hc-light .sst-icon-grid.sst-icg-variant-auto .sst-icon-item {
    --sst-icg-item-bg-rgb: 0 0 0;
    --sst-icg-item-border-rgb: 255 255 255;
    color: #fff;
}
.sst-hc-light .sst-icon-grid.sst-icg-variant-auto .sst-icon-item-title,
.sst-hc-light .sst-icon-grid.sst-icg-variant-auto .sst-icon-item-text,
.sst-hc-light .sst-icon-grid.sst-icg-variant-auto .sst-icon-item-text p { color: #fff; }

/* Hover lift stays regardless of variant */
.sst-icon-grid[style*="--sst-icg-item-bg-alpha"] .sst-icon-item:hover {
    transform: translateY(-3px);
}
/* White-card variants have their own explicit bg, so the segment-level
   .sst-hc-light cascade (which colours child title/text directly in #fff)
   must NOT reach inside them or the card text becomes white-on-white. Re-
   assert dark text with an equal-specificity rule that comes later in the
   cascade. */
.sst-icon-grid-card .sst-icon-item-title,
.sst-icon-grid-card .sst-icon-item-text,
.sst-icon-grid-card .sst-icon-item-text p,
.sst-icon-grid-numbered-card .sst-icon-item-title,
.sst-icon-grid-numbered-card .sst-icon-item-text,
.sst-icon-grid-numbered-card .sst-icon-item-text p { color: #0a2540; }
.sst-icon-item-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.8rem; height: 3.8rem; border-radius: 50%;
    background: #78c5db; color: #0a2540;
    font-family: "Montserrat-Bold"; font-size: 1.6rem;
    margin-bottom: .4rem;
}
.sst-icon-item-icon { font-size: 2.8rem; line-height: 1; color: #78c5db; }
.sst-icon-item-icon .sst-icon { display: inline-block; }
.sst-icon-item-icon .sst-icon-svg,
.sst-icon-item-icon .sst-icon-image img { width: 4.4rem; height: 4.4rem; }
.sst-icon-color-navy       { color: #0a2540; }
.sst-icon-color-sky        { color: #78c5db; }
.sst-icon-color-sky-light  { color: #eaf6fb; }
.sst-icon-color-light-blue { color: #66b2e8; }
.sst-icon-color-cream      { color: #f5ede0; }
.sst-icon-color-slate      { color: #45545f; }
.sst-icon-color-chartreuse { color: #bccb00; }
.sst-icon-color-white      { color: #fff; }
.sst-icon-color-dark       { color: #0a2540; }
.sst-icon-color-green      { color: #2fa74a; }
.sst-icon-color-yellow     { color: #f4c430; }
.sst-icon-color-red        { color: #d94a4a; }
.sst-icon-color-black      { color: #000; }
/* line-height 1.4 (= ~25 px on 2rem / 18 px) overrides the global h3
   'line-height: 40px' rule in style.css. .sst-icon-item-title (0,1,0)
   wins over h3 (0,0,1) on specificity - no !important needed.
   min-height = 2.8em (= 2 * line-height) reserves a 2-line slot so
   single-line and two-line titles share the same baseline and the
   <p> below them stays aligned across the row of cards. */
.sst-icon-item-title { font-size: 2rem; line-height: 1.4; margin: 0; font-family: "Montserrat-Bold"; min-height: 2.8em; }
.sst-icon-item-text { font-size: 1.6rem; line-height: 1.55; }
.sst-icon-item-text p { margin: 0 0 .5em; }
.sst-icon-item-text p:last-child { margin-bottom: 0; }

/* Highlight color accents (run-list style) */
/* Box Highlight = a 4-px vertical accent bar on the LEFT edge of the
   item, rendered as an absolutely-positioned ::before so it never
   shifts the content (a real border-left would reduce inner width).
   The bar follows the box's corner radius on its left side via
   var(--sst-icg-item-radius). 'none' hides the bar entirely (no
   selector matches -> no pseudo-element). */
/* Box with a highlight bar gets overflow:hidden so the bar's straight
   top/bottom-left corners get clipped by the BOX's border-radius
   instead of the bar itself trying to round (its 4-12 px width is
   usually smaller than the box radius, so any bar-radius > width/2
   would eat the bar's full height and make it look stumpy). */
.sst-icon-item[class*="sst-icon-hl-"] {
    position: relative;
    overflow: hidden;
}
.sst-icon-item[class*="sst-icon-hl-"]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--sst-icg-item-hl-width, 4px);
    opacity: var(--sst-icg-item-hl-alpha, 1);
    pointer-events: none;
}
.sst-icon-hl-green::before  { background: #2f9e44; }
.sst-icon-hl-yellow::before { background: #f4b400; }
.sst-icon-hl-red::before    { background: #c2362a; }
.sst-icon-hl-black::before  { background: #000; }
.sst-icon-hl-white::before  { background: #fff; }

@media (max-width: 991px) {
    .sst-icon-grid-cols-3, .sst-icon-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sst-icon-grid-cols-2, .sst-icon-grid-cols-3, .sst-icon-grid-cols-4 { grid-template-columns: 1fr; }
}

/* Layout: Accordion */
.sst-l-accordion .sst-seg-inner { flex-direction: column; }
.sst-l-accordion .sst-accordion-header { width: 100%; margin: 0 0 2.4rem; }
.sst-l-accordion .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-accordion h2 { font-size: 3.6rem; margin: 0 0 1.8rem; font-family: "Montserrat-Bold"; }
.sst-l-accordion .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-accordion { width: 100%; max-width: 90rem; margin: 0 auto; }
.sst-accordion-item { margin: 0 0 1rem; }
.sst-accordion-summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 1.4rem;
    padding: 1.8rem 2rem;
    font-family: "Montserrat-SemiBold";
    transition: background .2s ease, color .2s ease;
}
.sst-accordion-summary::-webkit-details-marker { display: none; }
.sst-accordion-icon { flex: 0 0 auto; color: #78c5db; font-size: 2rem; }
.sst-accordion-titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sst-accordion-title { font-size: 1.8rem; line-height: 1.35; }
.sst-accordion-subtitle { font-size: 1.8rem; opacity: .75; font-family: "Montserrat-Regular"; }
.sst-accordion-chevron {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .25s ease;
    color: #78c5db; /* explicit cyan so the chevron is visible regardless of
                     parent text-colour cascade. Filled type re-asserts this
                     to win against .sst-hc-light cascade specificity. */
}
.sst-accordion-item[open] > .sst-accordion-summary .sst-accordion-chevron { transform: rotate(180deg); }
.sst-accordion-content {
    padding: .4rem 2rem 2rem;
    font-size: 1.6rem; line-height: 1.65;
}
.sst-accordion-content p { margin: 0 0 .75em; }
.sst-accordion-content p:last-child { margin-bottom: 0; }

/* Accordion Width: max-width on the .sst-accordion container */
.sst-accordion-w-small  { max-width: 60rem;  }
.sst-accordion-w-medium { max-width: 90rem;  }
.sst-accordion-w-large  { max-width: 120rem; }
.sst-accordion-w-full   { max-width: none;   }

/* Accordion universal item style: rounded corners + subtle hover,
   shared across all border / bg colour combinations. */
.sst-accordion-item { border-radius: 4px; }
.sst-accordion-item .sst-accordion-summary:hover { background: rgba(120, 197, 219, .08); }

/* Accordion Border Color
   - auto = subtle default border that works against both light and image bg
     segments without colliding with the content. */
.sst-accordion-border-auto       .sst-accordion-item { border: 1px solid rgba(10, 37, 64, .18); }
.sst-accordion-border-white      .sst-accordion-item { border: 1px solid #fff;    }
.sst-accordion-border-sky-light  .sst-accordion-item { border: 1px solid #eaf6fb; }
.sst-accordion-border-light-blue .sst-accordion-item { border: 1px solid #66b2e8; }
.sst-accordion-border-cream      .sst-accordion-item { border: 1px solid #f5ede0; }
.sst-accordion-border-sky        .sst-accordion-item { border: 1px solid #78c5db; }
.sst-accordion-border-chartreuse .sst-accordion-item { border: 1px solid #bccb00; }
.sst-accordion-border-slate      .sst-accordion-item { border: 1px solid #45545f; }
.sst-accordion-border-navy       .sst-accordion-item { border: 1px solid #153354; }
.sst-accordion-border-dark       .sst-accordion-item { border: 1px solid #0a2540; }

/* Accordion Background Color
   - auto = transparent (no bg, just border + content).
   Dark backgrounds force white text + override the segment-level cascade
   so summary/content stay readable. Specificity bumped to (0,3,0) via
   `.sst-accordion.sst-accordion-bg-*` to win against
   `.sst-hc-light .sst-accordion summary` (0,2,1). */
.sst-accordion-bg-auto       .sst-accordion-item { background: transparent; }
.sst-accordion-bg-white      .sst-accordion-item { background: #fff;    }
.sst-accordion-bg-sky-light  .sst-accordion-item { background: #eaf6fb; }
.sst-accordion-bg-light-blue .sst-accordion-item { background: #66b2e8; }
.sst-accordion-bg-cream      .sst-accordion-item { background: #f5ede0; }
.sst-accordion-bg-sky        .sst-accordion-item { background: #78c5db; }
.sst-accordion-bg-chartreuse .sst-accordion-item { background: #bccb00; }
.sst-accordion-bg-slate      .sst-accordion-item { background: #45545f; }
.sst-accordion-bg-navy       .sst-accordion-item { background: #153354; }
.sst-accordion-bg-dark       .sst-accordion-item { background: #0a2540; }

/* Light backgrounds: dark text is the readable choice. Force it so the
   segment-level .sst-hc-light cascade can't paint white-on-light. */
.sst-accordion.sst-accordion-bg-white      .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-white      .sst-accordion-content,
.sst-accordion.sst-accordion-bg-sky-light  .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-sky-light  .sst-accordion-content,
.sst-accordion.sst-accordion-bg-cream      .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-cream      .sst-accordion-content,
.sst-accordion.sst-accordion-bg-sky        .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-sky        .sst-accordion-content,
.sst-accordion.sst-accordion-bg-chartreuse .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-chartreuse .sst-accordion-content {
    color: #0a2540;
}
.sst-accordion.sst-accordion-bg-white      .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-sky-light  .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-cream      .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-sky        .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-chartreuse .sst-accordion-title.sst-text-color-auto { color: #0a2540; }
.sst-accordion.sst-accordion-bg-white      .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-sky-light  .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-cream      .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-sky        .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-chartreuse .sst-accordion-subtitle.sst-text-color-auto { color: #45545f; }

/* Dark backgrounds: white text */
.sst-accordion.sst-accordion-bg-light-blue .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-light-blue .sst-accordion-content,
.sst-accordion.sst-accordion-bg-slate      .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-slate      .sst-accordion-content,
.sst-accordion.sst-accordion-bg-navy       .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-navy       .sst-accordion-content,
.sst-accordion.sst-accordion-bg-dark       .sst-accordion-summary,
.sst-accordion.sst-accordion-bg-dark       .sst-accordion-content {
    color: #fff;
}
.sst-accordion.sst-accordion-bg-light-blue .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-slate      .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-navy       .sst-accordion-title.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-dark       .sst-accordion-title.sst-text-color-auto { color: #fff; }
.sst-accordion.sst-accordion-bg-light-blue .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-slate      .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-navy       .sst-accordion-subtitle.sst-text-color-auto,
.sst-accordion.sst-accordion-bg-dark       .sst-accordion-subtitle.sst-text-color-auto { color: rgba(255, 255, 255, .85); }

@media (max-width: 768px) {
    .sst-accordion-summary { padding: 1.4rem; gap: 1rem; }
    .sst-accordion-content { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* Layout: Two-Column Compare */
.sst-l-compare .sst-seg-inner { flex-direction: column; }
.sst-l-compare .sst-eyebrow { font-size: 1.8rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; font-family: "Montserrat-SemiBold"; }
.sst-l-compare h2 { font-size: 3.6rem; margin: 0 0 1.8rem; font-family: "Montserrat-Bold"; }
.sst-l-compare .sst-body { font-size: 1.8rem; line-height: 1.65; }
.sst-compare {
    display: grid;
    grid-template-columns: repeat(var(--sst-cmp-cols, 2), minmax(0, 1fr));
    width: 100%;
    gap: 0;
}
.sst-compare-cols-2 { --sst-cmp-cols: 2; }
.sst-compare-cols-3 { --sst-cmp-cols: 3; }
.sst-compare-cols-4 { --sst-cmp-cols: 4; }
.sst-compare-col {
    padding: 2.8rem 2.4rem;
    display: flex; flex-direction: column; gap: 1.4rem;
    position: relative;
    background: rgba(255, 255, 255, .02);
    border-radius: 6px;
}
/* Grid rows auto-stretch to the tallest cell by default (align-items:
   stretch), so no explicit equal-height class is needed. */
/* Badge = H3 column heading inside a pill. Larger + slightly looser than
   a plain label because it IS the heading now (old separate <h3 class=
   "sst-compare-title"> has been merged into here). Background colour
   set via .sst-compare-badge-bg-{slug}; default sky if class omitted. */
.sst-compare-badge {
    display: inline-flex; align-self: flex-start; align-items: center;
    gap: 1rem;
    padding: .6rem 1.6rem; border-radius: 99px;
    font-size: 2rem; letter-spacing: .04em;
    background: #78c5db; color: #0a2540; font-family: "Montserrat-Bold";
    line-height: 1.25;
    margin: 0;
}
.sst-compare-badge-bg-white       { background: #fff;    }
.sst-compare-badge-bg-sky-light   { background: #eaf6fb; }
.sst-compare-badge-bg-light-blue  { background: #66b2e8; }
.sst-compare-badge-bg-cream       { background: #f5ede0; }
.sst-compare-badge-bg-sky         { background: #78c5db; }
.sst-compare-badge-bg-chartreuse  { background: #bccb00; }
.sst-compare-badge-bg-slate       { background: #45545f; }
.sst-compare-badge-bg-navy        { background: #153354; }
.sst-compare-badge-bg-dark        { background: #0a2540; }
.sst-compare-badge-bg-warning     { background: #e8a099; }
.sst-compare-badge-bg-transparent { background: transparent; padding-left: 0; padding-right: 0; }
.sst-compare-badge-icon { font-size: 2.2rem; line-height: 1; }
.sst-compare-badge-text { letter-spacing: inherit; }
.sst-compare-text { font-size: 1.6rem; line-height: 1.6; }
.sst-compare-text p { margin: 0 0 .75em; }
.sst-compare-text p:last-child { margin-bottom: 0; }

/* Top bar: coloured accent line at the top of a column. Rendered as a
   ::before pseudo-element so we can inset it horizontally (leaves a gap
   between the bar and the vertical grid dividers) and round the ends.
   Sits inside the column's text area, visually separate from the cell
   border. 'none' hides the bar. */
.sst-compare-col[class*="sst-compare-top-bar-"]:not(.sst-compare-top-bar-none)::before {
    content: '';
    position: absolute;
    top: 1.2rem;
    left: 2.4rem;       /* matches the col's horizontal padding */
    right: 2.4rem;
    height: 6px;
    border-radius: 3px;
}
.sst-compare-top-bar-white::before      { background: #fff;    }
.sst-compare-top-bar-sky-light::before  { background: #eaf6fb; }
.sst-compare-top-bar-light-blue::before { background: #66b2e8; }
.sst-compare-top-bar-cream::before      { background: #f5ede0; }
.sst-compare-top-bar-sky::before        { background: #78c5db; }
.sst-compare-top-bar-chartreuse::before { background: #bccb00; }
.sst-compare-top-bar-slate::before      { background: #45545f; }
.sst-compare-top-bar-navy::before       { background: #153354; }
.sst-compare-top-bar-dark::before       { background: #0a2540; }
.sst-compare-top-bar-warning::before    { background: #e8a099; }
/* When a bar is present, shift the cell content down so it doesn't sit
   under the bar. Extra padding-top matches the bar's top offset + height
   + a small breathing gap. */
.sst-compare-col[class*="sst-compare-top-bar-"]:not(.sst-compare-top-bar-none) {
    padding-top: 3.6rem;
}

/* Dividers: independent toggles for vertical + horizontal lines, each
   emitted as its own class. Borders painted only on interior edges;
   right-edge cells drop border-right, bottom-row cells drop border-
   bottom. Outer corners stay clean without an outer wrapper. */
.sst-compare-div-v .sst-compare-col { border-right:  1px solid rgba(10, 37, 64, .15); border-radius: 0; }
.sst-compare-div-h .sst-compare-col { border-bottom: 1px solid rgba(10, 37, 64, .15); border-radius: 0; }

/* Clear border-right on right-edge cells (last column of each row) */
.sst-compare-div-v.sst-compare-cols-2 .sst-compare-col:nth-child(2n),
.sst-compare-div-v.sst-compare-cols-3 .sst-compare-col:nth-child(3n),
.sst-compare-div-v.sst-compare-cols-4 .sst-compare-col:nth-child(4n) {
    border-right: none;
}
/* Clear border-bottom on bottom-row cells. :nth-last-child(-n+N)
   catches the final N items where N = cols-per-row. */
.sst-compare-div-h.sst-compare-cols-2 .sst-compare-col:nth-last-child(-n+2),
.sst-compare-div-h.sst-compare-cols-3 .sst-compare-col:nth-last-child(-n+3),
.sst-compare-div-h.sst-compare-cols-4 .sst-compare-col:nth-last-child(-n+4) {
    border-bottom: none;
}

@media (max-width: 991px) {
    /* 4-col layouts collapse to 2 columns on tablet */
    .sst-compare-cols-4 { --sst-cmp-cols: 2; }
}
@media (max-width: 768px) {
    /* All layouts stack to a single column on mobile */
    .sst-compare { --sst-cmp-cols: 1; }
    /* No vertical neighbours at 1-col - drop the right border everywhere */
    .sst-compare-col { border-right: none !important; }
    /* Horizontal divider between stacked cells when the H toggle is on */
    .sst-compare-div-h .sst-compare-col { border-bottom: 1px solid rgba(10, 37, 64, .15); }
    .sst-compare-div-h .sst-compare-col:last-child { border-bottom: none; }
}

/* 11.7 Parallax Spacer */
.sst-l-parallax_spacer { padding: 0 !important; }
.sst-l-parallax_spacer .sst-seg-inner { padding: 0; max-width: none; gap: 0; }
.sst-spacer {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 6rem 2.4rem;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Match image-BG segment panel styling: rounded corners + drop shadow.
       Since the spacer owns its own background-image (not via the central
       bg_image wrapper system), these need to be on .sst-spacer directly. */
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: var(--sst-shadow-panel);
    margin: 2rem 0;
}
@media (max-width: 991px) {
    .sst-spacer {
        border-radius: 0.8rem;
        margin: 0.8rem 0;
    }
}
.sst-spacer-quote {
    position: relative; z-index: 2;
    max-width: 90rem;
    margin: 0;
    padding: 2.4rem 3.2rem;
    font-family: Georgia, serif;
    color: #fff;
    text-shadow: 0 2px 16px rgba(10, 37, 64, .45);
}
.sst-spacer-quote.sst-qa-left   { text-align: left;   margin-right: auto; }
.sst-spacer-quote.sst-qa-center { text-align: center; margin: 0 auto; }
.sst-spacer-quote.sst-qa-right  { text-align: right;  margin-left: auto; }
.sst-spacer-quote-text {
    font-size: 3rem;
    line-height: 1.4;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 1.8rem;
    quotes: "\201C""\201D";
}
.sst-spacer-quote-text::before { content: open-quote; margin-right: 4px; }
.sst-spacer-quote-text::after  { content: close-quote; margin-left: 4px; }
.sst-spacer-quote-attrib {
    display: flex; flex-direction: column; gap: .4rem;
    font-size: 1.6rem;
    font-style: normal;
    opacity: .92;
}
.sst-qa-center .sst-spacer-quote-attrib { align-items: center; }
.sst-qa-right  .sst-spacer-quote-attrib { align-items: flex-end; }
.sst-spacer-quote-author { font-family: "Montserrat-SemiBold"; letter-spacing: .02em; }
.sst-spacer-quote-role {
    font-size: 1.8rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .75;
    font-family: "Montserrat-SemiBold";
}
@media (max-width: 768px) {
    .sst-spacer { padding: 4rem 1.6rem; }
    .sst-spacer-quote { padding: 1.6rem; }
}

/* 11.8 Quote / Callout */
.sst-callout {
    display: flex;
    gap: 2rem;
    padding: 2.4rem 2.8rem;
    border-radius: 1.2rem;
    background: #f6f8fa;
    border-left: 4px solid #78c5db;
    max-width: 90rem;
    margin: 0;
    box-shadow: 0 2px 18px rgba(10, 37, 64, .04);
}
.sst-callout-align-left   { margin-right: auto; }
.sst-callout-align-center { margin: 0 auto; text-align: center; flex-direction: column; align-items: center; border-left: 0; border-top: 4px solid #78c5db; }
.sst-callout-size-compact { padding: 1.8rem 2rem; font-size: 1.6rem; }
.sst-callout-size-regular { font-size: 1.8rem; }
.sst-callout-size-large   { padding: 3.2rem 4rem; font-size: 2rem; }
.sst-callout-icon {
    flex: 0 0 auto;
    width: 4.8rem; height: 4.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(120, 197, 219, .15);
    color: #2196c5;
    font-size: 2.2rem;
}
.sst-callout-size-large .sst-callout-icon { width: 6.4rem; height: 6.4rem; font-size: 2.8rem; }
.sst-callout-body { flex: 1 1 auto; }
.sst-callout-title {
    font-family: "Montserrat-Bold";
    font-size: 1.05em;
    margin-bottom: .6rem;
    color: #0a2540;
}
.sst-callout-text { line-height: 1.6; color: #2a3f55; }
.sst-callout-text p:last-child { margin-bottom: 0; }
.sst-callout-attrib {
    margin-top: 1.4rem;
    display: flex; flex-direction: column; gap: 2px;
    font-size: 1.8rem;
}
.sst-callout-align-center .sst-callout-attrib { align-items: center; }
.sst-callout-author { font-family: "Montserrat-SemiBold"; color: #0a2540; }
.sst-callout-role {
    font-size: 1.6rem; letter-spacing: .1em; text-transform: uppercase;
    color: #6c7a8a; opacity: .8;
    font-family: "Montserrat-SemiBold";
}

/* Callout variants */
.sst-callout-quote {
    background: #fafbfc;
    border-left-color: #0a2540;
    font-family: Georgia, serif;
    font-style: italic;
}
.sst-callout-quote .sst-callout-icon { color: #0a2540; background: rgba(10, 37, 64, .1); }
.sst-callout-quote .sst-callout-text { font-size: 1.1em; }

.sst-callout-warning {
    background: #fff7ed;
    border-left-color: #f59e0b;
}
.sst-callout-warning .sst-callout-icon { color: #d97706; background: rgba(245, 158, 11, .15); }
.sst-callout-warning .sst-callout-title { color: #92400e; }

.sst-callout-info {
    background: #eff6ff;
    border-left-color: #2196c5;
}
.sst-callout-info .sst-callout-icon { color: #1d4ed8; background: rgba(33, 150, 197, .15); }
.sst-callout-info .sst-callout-title { color: #1e3a8a; }

.sst-callout-highlight {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-left-color: #eab308;
}
.sst-callout-highlight .sst-callout-icon { color: #a16207; background: rgba(234, 179, 8, .2); }
.sst-callout-highlight .sst-callout-title { color: #713f12; }

.sst-callout-success {
    background: #f0fdf4;
    border-left-color: #22c55e;
}
.sst-callout-success .sst-callout-icon { color: #15803d; background: rgba(34, 197, 94, .15); }
.sst-callout-success .sst-callout-title { color: #14532d; }

@media (max-width: 768px) {
    .sst-callout { flex-direction: column; padding: 1.8rem 2rem; }
    .sst-callout-size-large { padding: 2.4rem 2.2rem; }
    .sst-callout-align-center { border-top-width: 4px; }
}

/* 11.9 Stats / Facts */
.sst-stats-header { margin-bottom: 3.6rem; }
.sst-stats-grid {
    display: grid;
    gap: 3rem;
    align-items: stretch;
    width: 100%;
}
.sst-stats-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sst-stats-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sst-stats-cols-6 { grid-template-columns: repeat(6, 1fr); }

.sst-stat-item {
    text-align: center;
    padding: 2rem 1.6rem;
    display: flex; flex-direction: column; gap: .6rem;
    align-items: center;
    justify-content: flex-start;
}
.sst-stat-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    font-family: "Montserrat-Bold";
    line-height: 1;
    color: #0a2540;
}
.sst-stat-prefix, .sst-stat-suffix {
    font-size: 0.5em;
    font-family: "Montserrat-Bold";
    opacity: .8;
}
.sst-stat-number { display: inline-block; }
.sst-stat-label {
    font-size: 1.6rem;
    font-family: "Montserrat-SemiBold";
    letter-spacing: .02em;
    color: #2a3f55;
}
.sst-stat-description {
    font-size: 1.8rem;
    color: #6c7a8a;
    line-height: 1.4;
}
.sst-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 5.4rem; height: 5.4rem;
    border-radius: 50%;
    background: rgba(120, 197, 219, .15);
    color: #2196c5;
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

/* Stat styles */
.sst-stats-style-large-number .sst-stat-value { font-size: 5.4rem; }
.sst-stats-style-large-number .sst-stat-label { text-transform: uppercase; letter-spacing: .1em; font-size: 1.8rem; margin-top: .6rem; font-family: "Montserrat-SemiBold"; }

.sst-stats-style-card .sst-stat-item {
    background: #fff;
    border: 1px solid rgba(10, 37, 64, .08);
    border-radius: 1.2rem;
    padding: 2.8rem 2rem;
    box-shadow: 0 2px 18px rgba(10, 37, 64, .04);
    transition: transform .3s ease, box-shadow .3s ease;
}
.sst-stats-style-card .sst-stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(10, 37, 64, .08);
}
.sst-stats-style-card .sst-stat-value { font-size: 4.4rem; color: #2196c5; }

.sst-stats-style-minimal .sst-stat-value { font-size: 3.6rem; }
.sst-stats-style-minimal .sst-stat-item { padding: 1.4rem 1rem; }

.sst-stats-style-with-icon .sst-stat-value { font-size: 4rem; }
.sst-stats-style-with-icon .sst-stat-item {
    background: #f6f8fa;
    border-radius: 1.2rem;
    padding: 2.8rem 1.8rem;
}

/* Dark segments: adapt colors */
.sst-bg-navy-dark .sst-stat-value, .sst-bg-navy-mid .sst-stat-value,
.sst-bg-slate .sst-stat-value { color: #fff; }
.sst-bg-navy-dark .sst-stat-label, .sst-bg-navy-mid .sst-stat-label,
.sst-bg-slate .sst-stat-label { color: rgba(255,255,255,.88); }
.sst-bg-navy-dark .sst-stat-description, .sst-bg-navy-mid .sst-stat-description,
.sst-bg-slate .sst-stat-description { color: rgba(255,255,255,.65); }

@media (max-width: 991px) {
    .sst-stats-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .sst-stats-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .sst-stats-cols-3, .sst-stats-cols-4, .sst-stats-cols-6 { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
    .sst-stats-style-large-number .sst-stat-value { font-size: 3.6rem; }
}

/* 11.10 Gallery */
.sst-gallery-header { margin-bottom: 3.6rem; }
.sst-gallery {
    display: grid;
    width: 100%;
}
.sst-gap-none { gap: 0; }
.sst-gap-sm   { gap: 1rem; }
.sst-gap-md   { gap: 1.8rem; }
.sst-gap-lg   { gap: 3.6rem; }

.sst-gallery-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sst-gallery-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sst-gallery-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Wide Focus: 1 large image + smaller thumbs */
.sst-gallery-wide-focus { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
.sst-gallery-wide-focus .sst-gallery-item:first-child { grid-row: span 2; grid-column: span 1; }

/* Masonry: JS-driven. Provide CSS fallback */
.sst-gallery-masonry {
    display: block;
    column-count: 3;
    column-gap: 1.8rem;
}
.sst-gallery-masonry .sst-gallery-item {
    display: block;
    break-inside: avoid;
    margin-bottom: 1.8rem;
}

.sst-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    background: #0a2540;
    cursor: zoom-in;
}
.sst-gallery-item img {
    width: 100%;
    display: block;
    transition: transform .5s ease;
}
.sst-gallery-item:hover img { transform: scale(1.05); }

/* Forced aspect ratios */
.sst-gallery-ar-1-1 .sst-gallery-item img  { aspect-ratio: 1 / 1;  object-fit: cover; height: 100%; }
.sst-gallery-ar-4-3 .sst-gallery-item img  { aspect-ratio: 4 / 3;  object-fit: cover; height: 100%; }
.sst-gallery-ar-16-9 .sst-gallery-item img { aspect-ratio: 16 / 9; object-fit: cover; height: 100%; }
.sst-gallery-ar-3-4 .sst-gallery-item img  { aspect-ratio: 3 / 4;  object-fit: cover; height: 100%; }

.sst-gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1rem 1.4rem;
    background: linear-gradient(to top, rgba(10, 37, 64, .85), rgba(10, 37, 64, 0));
    color: #fff;
    font-size: 1.8rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.sst-gallery-item:hover .sst-gallery-caption { opacity: 1; transform: translateY(0); }

/* Carousel variant */
.sst-gallery-carousel { display: block; }
.sst-gallery-carousel .splide__slide { overflow: hidden; border-radius: 8px; position: relative; }
.sst-gallery-carousel .splide__slide img { width: 100%; display: block; }
.sst-gallery-carousel .sst-gallery-caption {
    opacity: 1; transform: none;
    background: linear-gradient(to top, rgba(10, 37, 64, .85), rgba(10, 37, 64, 0));
}

@media (max-width: 991px) {
    .sst-gallery-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .sst-gallery-masonry { column-count: 2; }
    .sst-gallery-wide-focus { grid-template-columns: 1fr 1fr; }
    .sst-gallery-wide-focus .sst-gallery-item:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 768px) {
    .sst-gallery-grid-2,
    .sst-gallery-grid-3,
    .sst-gallery-grid-4 { grid-template-columns: 1fr; }
    .sst-gallery-masonry { column-count: 1; }
    .sst-gallery-wide-focus { grid-template-columns: 1fr; }
    .sst-gallery-caption { opacity: 1; transform: none; }
}

/* PhotoSwipe custom caption (uiRegister overlay - avoids DynamicCaption plugin) */
.pswp-custom-caption {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90rem, 90vw);
    padding: 1rem 1.8rem;
    background: rgba(10, 37, 64, 0.72);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.45;
    text-align: center;
    border-radius: 6px;
    z-index: 1600;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 12. Reveal Animations */
.sst-reveal { opacity: 0; transform: translateY(2.4rem); transition: opacity .7s ease, transform .7s ease; }
.sst-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .sst-reveal { opacity: 1; transform: none; transition: none; }
}

/* 13. Responsive Media Queries */
/* Tablet (<= 1199 px). Editor-controllable via the ACF top_tablet /
   bottom_tablet sliders; fallbacks inherit the desktop defaults so unset
   values reproduce the previous "no override at this breakpoint"
   behaviour. */
@media (max-width: 1199px) {
    .sst-hero {
        padding-top:    var(--hero-pt-t, 19rem);
        padding-bottom: var(--hero-pb-t, 9rem);
    }
    .sst-hero-stats-3, .sst-hero-stats-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet narrow (769-992 px). Default padding-top sized to clear
   the fixed site header (~140-160 px) with ~20 px breathing gap before
   the hero eyebrow. Scroll-margin-top matches so anchor links land
   below the header too. */
@media (max-width: 991px) {
    .sst-hero {
        padding-top:    var(--hero-pt-tn, 20rem);
        padding-right:  2rem;
        padding-bottom: var(--hero-pb-tn, 7rem);
        padding-left:   2rem;
    }
    .sst-seg { scroll-margin-top: 22rem; }
}
@media (max-width: 768px) {
    .sst-hero {
        padding-top:    var(--hero-pt-m, 18rem);
        padding-right:  1.6rem;
        padding-bottom: var(--hero-pb-m, 6rem);
        padding-left:   1.6rem;
    }
    .sst-hero h1, .sst-hero .sst-hero-title { font-size: 3.6rem; }
    .sst-hero-stats { grid-template-columns: 1fr !important; gap: 2rem; }
    .sst-subnav-inner { padding: 0 1.2rem; }
    .sst-subnav-list { gap: 0.6em; }
    .sst-subnav-link { padding: 0.7rem 0; font-size: 1.6rem; }
    .sst-cl-image-right .sst-content-text,
    .sst-cl-image-left  .sst-content-text,
    .sst-cl-image-right .sst-content-media,
    .sst-cl-image-left  .sst-content-media { flex: 1 1 100%; order: unset; }
    .sst-cl-image-left  .sst-content-text  { order: 2; }
    .sst-cl-image-left  .sst-content-media { order: 1; }
    .sst-seg-inner { gap: 2.4rem; padding: 0 1.6rem; }
}

/* 14. WYSIWYG Formats moved to global style.css so editors can apply
   them across the whole site (was previously only styled when this
   safety-standards.css was loaded). See `Unified Text Color System` and
   `WYSIWYG Typography` blocks at the end of style.css. */