/* =========================================================================
   Safety Experiences - Base Layout
   ========================================================================= */

/* Hide standard page hero - the cinematic per-template hero replaces it.
   The Safety Interview template adds its own matching rule in
   safety-interview.css (same file structure as its dedicated template). */
.page-template-template-safety-experiences #pageHeader {
    display: none;
}

#safetyExperiencesPage .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* -------------------------------------------------------------------------
   Cinematic Hero Block - shared base styles for all Safety templates that
   use the cinematic-hero pattern. Each template has its own outer-section
   class (.experiences-hero, .interview-hero, .waiver-hero) so editor-set
   inline styles + per-template overrides target ONE template only;
   visually shared rules use combined selectors below.
   ------------------------------------------------------------------------- */

.experiences-hero,
.interview-hero,
.waiver-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* Hero height = padding-top + content + padding-bottom only. NO
       min-height floor and NO aspect-ratio. Editor controls the total
       height via the hero_padding ACF group on the page; reducing the
       sliders genuinely shrinks the hero. Same model as .sst-hero on
       the Safety Standards template. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Shared padding fallback - sized for the Interview template where
       the hero follows the page's #pageHeader block (so hero itself sits
       below the fixed site header). The .experiences-hero variant
       overrides padding-top/bottom further down so its hero at y=0 has
       a larger top-padding. */
    padding: 206px 20px 40px;
    box-sizing: border-box;
    background-color: #0a2540;
    text-align: center;
    overflow: hidden;
}
@media (max-width: 1199px) {
    .experiences-hero,
    .interview-hero,
    .waiver-hero {
        padding: 165px 20px 40px;
    }
}
@media (max-width: 768px) {
    .experiences-hero,
    .interview-hero,
    .waiver-hero {
        padding: 145px 20px 30px;
    }
    /* Shrink the hero headline so it wraps to 3-4 lines instead of 6-7
       and fits within the narrower hero without being clipped. */
    .experiences-hero h1,
    .experiences-hero .exp-hero-title {
        font-size: clamp(26px, 6.5vw, 36px);
    }
}
/* Inner element carries the actual background-image. Overscale both
   axes by 15% (inset: -15% -15%). Balance between:
   - enough vertical buffer for the parallax translate not to expose
     the section bg at typical scroll depths (factor 0.2 gives up to
     ~20% hero-height offset, comfortably inside the 15% buffer on each
     side);
   - horizontal buffer that keeps the BG-element's aspect-ratio equal
     to the hero's, so 'background-size: cover' has vertical overflow
     for the ACF Image Focus Y-point to actually move the image;
   - minimal zoom. At 30% overscale the image was ~1.2x its natural
     size in the hero; at 15% it's ~0.97x (effectively no zoom). */
.experiences-hero-bg,
.interview-hero-bg,
.waiver-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;
}

/* Overlay opacity controlled via inline style from ACF slider */
.experiences-hero-overlay,
.interview-hero-overlay,
.waiver-hero-overlay {
    position: absolute;
    inset: 0;
    background: #0a2540;
    z-index: 1;
}

/* Shared base: position + width-100 + centering. Per-template max-width
   below uses --hero-content-width (slider 30-100) as a percentage of
   the canonical 1240 px content area; per-template fallback preserves
   each page's previous hard-coded look when the slider is unset. */
.experiences-hero-content,
.interview-hero-content,
.waiver-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
}
.experiences-hero-content { max-width: calc(1240px * var(--hero-content-width, 68) / 100); }
.interview-hero-content   { max-width: calc(1240px * var(--hero-content-width, 58) / 100); }
.waiver-hero-content      { max-width: calc(1240px * var(--hero-content-width, 61) / 100); }

/* Hero scroll-indicator arrow, anchored to the hero bottom. Click
   smooth-scrolls to the experiences section. Same visual language as
   .sst-hero-scroll-indicator on the Safety Standards template. */
.sst-hero-scroll-indicator {
    /* 'bottom: 92' keeps the arrow 60 px higher than before so the
       experiences-block overlap (-70) doesn't clip it. Arrow is 36 px
       tall, so its bottom edge sits at hero_bottom-92 and the overlap
       starts at hero_bottom-70 - ~22 px of breathing room between the
       arrow and the white card edge. */
    position: absolute; bottom: 92px; left: 50%;
    transform: translateX(-50%);
    color: #fff; z-index: 2; opacity: .7;
    transition: opacity .2s ease, transform .4s ease;
    animation: sst-exp-scroll-bob 2s ease-in-out infinite;
    text-decoration: none;
}
.sst-hero-scroll-indicator:hover { opacity: 1; }
@keyframes sst-exp-scroll-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* Editorial Experiences hero (no portrait, no interview block; just
   eyebrow + H1 + optional subtitle + intro). Reuses the cinematic-hero
   frame above for visual consistency with the Interview template; only
   the content density and the larger padding-top (hero sits at y=0 with
   no #pageHeader above it) differ.
   Padding-bottom reserves ~170 px: 40 base + 70 overlap of the following
   .experiences-block (margin-top:-70) + ~60 for the scroll-arrow zone
   (arrow is 42 px tall at bottom:92 = 134 px reserved from hero bottom).
   Keeps the flex-centred content above the arrow and overlap at every
   tablet / desktop width, including ~1000-1100 px where the intro wraps
   taller and used to collide with the arrow. */
.experiences-hero {
    /* Editorial experiences hero sits at y=0 on the page; site header
       overlays the top band. Effective header zone = 275 px at narrow-
       desktop widths. The default padding-top of 305 keeps the eyebrow
       30 px below that band.
       Hero height = padding-top + content + padding-bottom. NO
       min/max-height - the editor controls the total height via the
       page-level hero_padding ACF group; fallbacks match the original
       hard-coded design. */
    padding-top:    var(--hero-pt-d, 305px);
    padding-bottom: var(--hero-pb-d, 170px);
}
/* Tablet (<= 1199): compact header (~190 px effective). Default top 240
   so content does not float too far below the header. */
@media (max-width: 1199px) {
    .experiences-hero {
        padding-top:    var(--hero-pt-t, 240px);
        padding-bottom: var(--hero-pb-t, 170px);
    }
}
/* Tablet narrow (769-992): editor-controllable; fallback inherits the
   broader tablet values so unset sliders reproduce the previous cascade
   behaviour. */
@media (max-width: 991px) {
    .experiences-hero {
        padding-top:    var(--hero-pt-tn, 240px);
        padding-bottom: var(--hero-pb-tn, 170px);
    }
}
/* Mobile: default padding-bottom 115 keeps a tight gap to the
   overlapping .experiences-block below. */
@media (max-width: 768px) {
    .experiences-hero {
        padding-top:    var(--hero-pt-m, 240px);
        padding-bottom: var(--hero-pb-m, 115px);
    }
}
.exp-hero-eyebrow {
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 18px;
    font-weight: 600;
}
.experiences-hero h1,
.experiences-hero .exp-hero-title {
    font-size: clamp(38px, 5.2vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 16px;
}
.exp-hero-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 18px;
    font-weight: 500;
}
.exp-hero-intro {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 680px;
    margin: 0 auto;
}
.exp-hero-intro p { margin: 0 0 10px; }
.exp-hero-intro p:last-child { margin-bottom: 0; }

/* YouTube Preview - new vanilla inline-replace uses .yt-inline markup.
   Scoped here to safety-experiences container; global base styles live in style.css. */
#safetyExperiencesPage .yt-inline {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    transition: transform var(--exp-dur-micro) var(--exp-ease-soft), box-shadow var(--exp-dur-micro) var(--exp-ease-soft);
}

#safetyExperiencesPage .yt-inline img {
    display: block;
    transition: transform var(--exp-dur-card) var(--exp-ease-soft);
}

#safetyExperiencesPage .yt-inline:hover img {
    transform: scale(1.03);
    filter: none;
}

#safetyExperiencesPage .yt-inline .yt-inline-play {
    width: 90px;
    height: 64px;
}
#safetyExperiencesPage .yt-inline:hover .yt-inline-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.yt-play-btn svg {
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------------
   Experiences Section
   ------------------------------------------------------------------------- */

.experiences-block {
    position: relative;
    /* -70 overlap into the hero. Arrow was raised to bottom:92 so its
       bottom edge is ~22 px above the overlap's top - the card edge
       creeps over the hero's lower band without clipping the arrow. */
    margin-top: -70px;
    padding: 0 20px 100px;
    z-index: 2;
}

#safetyExperiencesPage .experiences-inner {
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .1);
    padding: 30px 40px 40px;
}

#safetyExperiencesPage .experiences-inner h1 {
    text-align: center;
}

/* Section header lives inside .experiences-inner as a plain <h2>. Centre
   it here so the template doesn't need a wrapper class on the tag. */
.experiences-inner h2 {
    text-align: center;
    margin: 0 0 20px;
}

.experiences-intro {
    max-width: 720px;
    margin: 0 auto 50px;
    font-size: 17px;
    line-height: 1.6;
    color: #5a6b82;
    text-align: center;
}

.exp-no-entries {
    text-align: center;
    color: #999;
    padding: 60px 0;
}

/* -------------------------------------------------------------------------
   CSS Grid (Desktop 3 cols -> Tablet 2 -> Mobile 1). Switched from
   Masonry so all cards in the same row are auto-equal-height: the
   shorter cards stretch to match the tallest, and margin-top:auto on
   the card footer pushes Read More to the bottom so the gap lands
   above the button instead of after the last text line.
   ------------------------------------------------------------------------- */

.experiences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
/* Legacy width helpers (.exp-grid-sizer, .exp-span-2) from the Masonry
   era are no-ops under grid. The sizer <div> in the markup is harmless;
   grid-column: span 2 is the new way to make a card wider. */
.exp-grid-sizer { display: none; }
.exp-card.exp-span-2 { grid-column: span 2; }

/* Shared easing token + duration for the entire Experiences template. */
:root {
    --exp-ease-soft: cubic-bezier(.22, .61, .36, 1);
    --exp-dur-card:  .55s;
    --exp-dur-micro: .5s;
    --exp-dur-modal: .4s;
}

.exp-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    min-height: 220px;
    border: 1px solid rgba(0, 0, 0, .08);
    transition: box-shadow var(--exp-dur-card) var(--exp-ease-soft),
                transform  var(--exp-dur-card) var(--exp-ease-soft);
    /* Flex column + stretched card-content child so the card body fills
       the grid row's equal height. Without this, .exp-card-content has
       intrinsic height and the flex-grow / margin-top:auto inside never
       has room to push Read More to the bottom of a taller row. */
    display: flex;
    flex-direction: column;
}
.exp-card > .exp-card-content { flex: 1 1 auto; }
.exp-card > .exp-card-bg { flex: 0 0 auto; }

.exp-card[data-dialog-target]:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .exp-card[data-dialog-target]:hover { transform: none; }
}

.exp-card[data-dialog-target] {
    cursor: pointer;
}

.exp-card[data-dialog-target]:focus {
    outline: none;
}

.exp-card[data-dialog-target]:focus-visible {
    outline: 3px solid #66b2e8;
    outline-offset: 4px;
}

@media (max-width: 991px) {
    /* ID scope matches the base rule's #safetyExperiencesPage specificity
       so these overrides actually win the cascade on tablet/mobile.
       23 px L/R visually balances the asymmetric-looking gap between
       the inner container and the slider card; anything smaller leaves
       the card feeling cramped against the right edge. */
    #safetyExperiencesPage .experiences-inner {
        padding: 40px 23px 30px;
    }

    /* <=992: single column. A 2-column layout with mixed span-1 and
       span-2 cards left ragged empty slots whenever a span-2 card
       landed in col 2; one column avoids the awkward wraps entirely. */
    .experiences-grid { grid-template-columns: 1fr; }
    .exp-card.exp-span-2 { grid-column: auto; }
}

@media (max-width: 768px) {
    /* Hide the scroll-indicator on mobile - the compact hero doesn't
       need an extra scroll cue, and there isn't room for the arrow
       between the content bottom and the short hero edge without it
       feeling cramped. */
    .sst-hero-scroll-indicator {
        display: none;
    }

    .experiences-block {
        /* Zero on mobile too, matching the desktop rule. The scroll-down
           arrow needs to clear the card edge and there isn't room for
           both arrow + overlap inside the compact mobile hero. */
        margin-top: 0;
        padding: 0 12px 60px;
    }

    /* Mobile override: only top / bottom + border-radius. L/R padding
       stays at the 23 px value from the @992 rule above so the slider
       card has the same balanced gutter on phones as on tablets. */
    #safetyExperiencesPage .experiences-inner {
        padding-top: 30px;
        padding-bottom: 20px;
        border-radius: 16px 16px 0 0;
    }

    /* Reduce teaser body text from 18 -> 16 px so longer testimonials
       don't fill the whole compact mobile card. !important is needed
       because every .exp-style-* variant carries its own
       (.exp-style-X .exp-card-teaser { font-size:18px }) rule with the
       same (0,2,0) specificity but a later source position. */
    .exp-card-teaser {
        font-size: 16px !important;
    }

    /* Grid is already 1-column from the <=992 rule above; no need to
       redeclare here. */
}

/* =========================================================================
   Splide slider (mobile + tablet, < 993 px only)

   Grid markup is wrapped in .experiences-splide > .splide__track >
   .experiences-grid.splide__list. splide.min.css is enqueued with
   media="(max-width: 991px)" so its rules don't apply on desktop.
   EVERY slider-specific rule below must be wrapped in the same
   @media query - otherwise rules like display:block on .splide__list
   leak to desktop and break the CSS grid.
   ========================================================================= */

/* When the Splide slider is mounted, KILL the scroll-reveal fade-in
   on its cards. Splide manages its own .is-visible class on slides
   (separate from our IntersectionObserver's .is-visible), and it both
   adds AND removes the class during navigation. That breaks the pure-
   additive contract our reveal CSS assumes, so after the first slide
   transition all non-active slides get their opacity forced back to 0.

   Also drop the subtle 1 px base-card border - on the desktop grid the
   same rule reads as a clean tile delimiter, but in the solo-card
   mobile slider it shows up as an unwanted frame around the card.

   Scope is the mounted slider only - desktop grid (above 993 px, where
   Splide never mounts) keeps the editorial fade-in cascade. Specificity
   .experiences-splide.is-initialized .exp-card beats .reveal-enabled
   .exp-card (3-0-0 vs 2-0-0). */
.experiences-splide.is-initialized .exp-card,
.experiences-splide.is-initialized .exp-card.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    /* Swap the per-variant drop shadows (0 10px 30px etc) for a
       clean 1-px navy-tinted border in the slider. At these
       breakpoints the wide-blur shadows pressed against the card
       edges + the .splide__track's overflow:hidden read as a smudgy
       halo; a thin border is crisper. Scoped to .is-initialized so
       the desktop grid (Splide never mounts) keeps its shadows. */
    box-shadow: none;
    border: 1px solid rgba(10, 37, 64, .15);
}

@media (max-width: 991px) {

    /* No-JS / pre-mount safety net: if Splide CSS is active but the
       slider never mounted, the default track's overflow:hidden would
       clip all slides but the first. Force a linear fallback until
       .is-initialized appears. */
    #safetyExperiencesPage .experiences-splide:not(.is-initialized) .splide__track {
        overflow: visible;
    }
    #safetyExperiencesPage .experiences-splide:not(.is-initialized) .splide__list {
        display: block;
    }

    /* Kill the 28-px CSS gap that .experiences-grid inherits from the
       desktop grid. Splide sizes + translates the list based solely on
       its own gap:'1rem' config; an ADDITIONAL 28-px CSS gap between
       slides made every slide from index 1 onward render 28 px offset
       to the right of the track edge. Splide owns the slide-to-slide
       spacing here, so zero out the container gap. */
    #safetyExperiencesPage .experiences-splide .splide__list {
        gap: 0;
    }

    /* Arrows + pagination share a control bar BELOW the card so neither
       element overlaps the testimonial text. Splide positions its
       .splide__arrow with top:50% by default - we strip that and dock
       both arrows to the bottom of the splide wrapper, flanking the
       centred pagination dots. */
    .experiences-splide {
        position: relative;
        padding-bottom: 76px;   /* 44 arrow + 16 gap + 16 safety margin */
    }

    .experiences-splide .splide__track {
        padding: 4px 0 8px;
    }

    .experiences-splide .splide__arrow {
        position: absolute;
        top: auto;
        bottom: 8px;
        width: 44px;
        height: 44px;
        margin: 0;
        background: rgba(10, 37, 64, .9);
        opacity: 1;
        border-radius: 50%;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
        transform: none;
        transition: transform var(--exp-dur-micro) var(--exp-ease-soft),
                    background var(--exp-dur-micro) var(--exp-ease-soft),
                    opacity    var(--exp-dur-micro) var(--exp-ease-soft);
    }
    .experiences-splide .splide__arrow svg {
        fill: #fff;
        width: 18px;
        height: 18px;
    }
    .experiences-splide .splide__arrow:hover:not(:disabled) {
        background: #0a2540;
        transform: scale(1.08);
    }
    .experiences-splide .splide__arrow--prev { left: 12px; }
    .experiences-splide .splide__arrow--next { right: 12px; }
    .experiences-splide .splide__arrow:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

    /* Pagination dots - same height + same bottom as the arrows so
       their centre lines align perfectly, flex-centred inside the
       44-px strip between them.

       ID-scope is REQUIRED: the theme's global
       #pageWrapper ul { margin: 32px 0 } rule (style.css) outranks a
       plain .splide__pagination selector (0,1,0 vs 1,0,1), so without
       an ID prefix the 32-px vertical margin leaked in, pushed the UL
       taller, and forced flex-wrap:wrap (Splide default) to break the
       11 dots onto two rows. nowrap + margin:0 settles both. */
    #safetyExperiencesPage .experiences-splide .splide__pagination {
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        width: auto;
        height: 44px;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 0;
    }
    .experiences-splide .splide__pagination__page {
        width: 10px;
        height: 10px;
        background: rgba(10, 37, 64, .25);
        opacity: 1;
        margin: 0;
        transition: background var(--exp-dur-micro) var(--exp-ease-soft),
                    transform  var(--exp-dur-micro) var(--exp-ease-soft);
    }
    .experiences-splide .splide__pagination__page.is-active {
        background: #0a2540;
        transform: scale(1.3);
    }

    /* Slide sizing - Splide writes width inline when mounted, but the
       card's own min-height / flex rules need to keep the text cards
       tall enough on narrow viewports without the reveal-animation
       transform interfering. */
    .experiences-splide .splide__slide {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* Slides themselves keep overflow:hidden so the hover shine pseudo
       doesn't escape the card edges. */
    .experiences-splide .splide__slide.exp-card {
        overflow: hidden;
    }
}

/* =========================================================================
   Box Content Wrapper - shared by all text cards
   ========================================================================= */

.exp-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.exp-card-overlay {
    position: absolute;
    inset: 0;
    background: #000;
}

.exp-card-content {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 280px;
}

.exp-card-quote-icon {
    width: 48px;
    height: 48px;
    opacity: .3;
}

.exp-card-quote-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.exp-card-teaser {
    font-size: 18px;
    line-height: 1.7;
    color: inherit;
    flex-grow: 1;
}

/* Footer + Read More both stick to the bottom of the (now flex-filled)
   card content. margin-top: auto on the FIRST of the two bottom-pinned
   elements collapses all remaining gap above it; the rest flow below
   naturally. Applied to .exp-card-footer when present (name/role line),
   otherwise falls through to .exp-card-more. */
.exp-card-footer {
    margin-top: auto;
    padding-top: 16px;
}
.exp-card-content > .exp-card-more:last-child { margin-top: auto; }

.exp-card-name {
    font-weight: 700;
    font-size: 18px;
}

.exp-card-role {
    font-size: 13px;
    opacity: .7;
    margin-top: 4px;
}

.exp-card-more {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 20px;
    border: 2px solid currentColor;
    border-radius: 6px;
    opacity: .8;
    transition: opacity var(--exp-dur-micro) var(--exp-ease-soft), background var(--exp-dur-micro) var(--exp-ease-soft);
}

.exp-card-more:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .1);
}

.exp-text-only .exp-card-more:hover {
    background: rgba(0, 0, 0, .05);
}

/* Image-only card mode */
.exp-card.exp-image-only {
    min-height: 380px;
}
.exp-card.exp-image-only .exp-card-bg {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 380px;
}

/* Text-over-image: ensure readable text with text shadow */
.exp-card.exp-has-image .exp-card-teaser,
.exp-card.exp-has-image .exp-card-name,
.exp-card.exp-has-image .exp-card-role,
.exp-card.exp-has-image .exp-card-more {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Text-over-image color modes */
.exp-card.exp-text-white { color: #fff; }
.exp-card.exp-text-dark  { color: #0a2540; }

/* =========================================================================
   Variant: classic
   ========================================================================= */

/* Classic: white hero-testimonial card with navy text. DESIGN LOCK -
   every token is explicit so 'Standard' vs 'Double Width' render truly
   identical (only the column span differs). Includes forced white bg
   + navy colour even when the editor set a background image, so an
   image-Classic and a text-only-Classic are visually the same style.
   If a user wants image-forward testimonials, they should pick a
   different style (Magazine / Glass / Postcard). */
.exp-style-classic {
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    color: #1e2a3d !important;
}
/* Suppress bg-image + overlay on Classic so the style is always the
   same clean white panel. text-shadow from the generic .exp-has-image
   rule would also leak in - kill that too. */
.exp-style-classic .exp-card-bg,
.exp-style-classic .exp-card-overlay { display: none; }
.exp-style-classic.exp-card.exp-has-image .exp-card-teaser,
.exp-style-classic.exp-card.exp-has-image .exp-card-name,
.exp-style-classic.exp-card.exp-has-image .exp-card-role,
.exp-style-classic.exp-card.exp-has-image .exp-card-more {
    text-shadow: none;
}
.exp-style-classic .exp-card-content {
    font-family: "Montserrat-Regular", sans-serif;
}
.exp-style-classic .exp-card-quote-icon {
    color: #0a2540;
    width: 56px;
    height: 56px;
    opacity: .15;
}
.exp-style-classic .exp-card-teaser {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #1e2a3d;
}
.exp-style-classic .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2a3d;
}
.exp-style-classic .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #1e2a3d;
    opacity: .7;
}
.exp-style-classic .exp-card-more {
    font-family: "Montserrat-SemiBold", sans-serif;
    color: #1e2a3d;
    border-color: #1e2a3d;
}

/* =========================================================================
   Shared typography token scale for ALL non-classic variants below.
   Matches Classic's 18 / 18 / 13 / 56px rhythm + explicit font-families
   so every style renders with a consistent visual weight - each
   variant's unique treatment (gradient bg, accent border, blur, etc.)
   stays but the type scale is locked. Read More pinning is handled
   centrally via .exp-card-footer { margin-top: auto } + the flex-col
   wrapper (see above) so it works on every variant without per-style
   rules.
   ========================================================================= */

/* =========================================================================
   Variant: editorial - soft gradient, italic serif teaser, top-rule footer
   ========================================================================= */
.exp-style-editorial {
    background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    color: #1e2a3d;
}
.exp-style-editorial .exp-card-quote-icon {
    align-self: flex-end;
    width: 56px; height: 56px;
    color: #0a2540;
    opacity: .2;
}
.exp-style-editorial .exp-card-teaser {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.7;
    color: #1e2a3d;
}
.exp-style-editorial .exp-card-footer {
    border-top: 2px solid #0a2540;
    padding-top: 18px;
}
.exp-style-editorial .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2a3d;
}
.exp-style-editorial .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    color: #1e2a3d;
    opacity: .7;
}

/* =========================================================================
   Variant: magazine - white card with gradient top stripe
   ========================================================================= */
.exp-style-magazine {
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    color: #1e2a3d;
    position: relative;
}
.exp-style-magazine::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(90deg, #66b2e8 0%, #0a2540 100%);
    border-radius: 12px 12px 0 0;
    z-index: 1;
}
.exp-style-magazine .exp-card-quote-icon {
    width: 56px; height: 56px;
    align-self: center;
    color: #0a2540;
    opacity: .22;
}
.exp-style-magazine .exp-card-teaser {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    color: #1e2a3d;
}
.exp-style-magazine .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2a3d;
}
.exp-style-magazine .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    color: #1e2a3d;
    opacity: .7;
}

/* =========================================================================
   Variant: bold - navy gradient, white text
   ========================================================================= */
.exp-style-bold {
    background: linear-gradient(145deg, #0a2540 0%, #153354 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(10, 37, 64, .4);
}
.exp-style-bold .exp-card-quote-icon {
    width: 56px; height: 56px;
    color: #fff;
    opacity: .1;
}
.exp-style-bold .exp-card-teaser {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
    color: #fff;
}
.exp-style-bold .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.exp-style-bold .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    color: #fff;
    opacity: .7;
}
.exp-style-bold .exp-card-more {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}
.exp-style-bold .exp-card-more:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .7);
}

/* =========================================================================
   Variant: glass - backdrop-blur over bg image, white text
   ========================================================================= */
.exp-style-glass {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.exp-style-glass .exp-card-quote-icon {
    width: 56px; height: 56px;
    align-self: center;
    color: #fff;
    opacity: .4;
}
.exp-style-glass .exp-card-teaser {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #fff;
}
.exp-style-glass .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.exp-style-glass .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    color: #fff;
    opacity: .7;
}

/* =========================================================================
   Variant: accent-left - white card with 8px left border in sky blue
   ========================================================================= */
.exp-style-accent-left {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    color: #1e2a3d;
    position: relative;
    border-left: 8px solid #66b2e8;
}
.exp-style-accent-left .exp-card-quote-icon {
    align-self: flex-end;
    width: 56px; height: 56px;
    color: #66b2e8;
    opacity: .4;
}
.exp-style-accent-left .exp-card-teaser {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #1e2a3d;
}
.exp-style-accent-left .exp-card-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2a3d;
}
.exp-style-accent-left .exp-card-role {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    color: #1e2a3d;
    opacity: .7;
}
.exp-style-accent-left .exp-card-more {
    border-color: #66b2e8;
    color: #2a6fa8;
}

/* =========================================================================
   Fancybox Experience Modal
   ========================================================================= */

/* Fancybox v2 shows inline content inside .fancybox-inner */
.exp-modal-fancybox .fancybox-skin {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.exp-modal-fancybox .fancybox-inner {
    overflow-y: auto !important;
}

.exp-modal-inner {
    padding: clamp(30px, 5vw, 60px);
    position: relative;
}

.exp-modal-quote-icon {
    width: 64px;
    height: 64px;
    color: #0a2540;
    opacity: .15;
    margin-bottom: 20px;
}
.exp-modal-quote-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.exp-modal-body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.75;
    color: #1e2a3d;
}

.exp-modal-body p {
    margin: 0 0 16px;
}

.exp-modal-body a {
    color: #0a66c2;
}

.exp-modal-footer {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.exp-modal-name {
    font-weight: 700;
    font-size: 17px;
    color: #0a2540;
}

.exp-modal-role {
    font-size: 14px;
    color: #5a6b82;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .exp-modal-fancybox .fancybox-skin {
        border-radius: 0;
    }
}

/* =========================================================================
   Animations
   ========================================================================= */

/* Cards visible by default. JS adds .reveal-enabled to activate animations,
   plus a per-card --reveal-delay so cards cascade down the grid instead of
   appearing all at once. Entrance combines a slight blur-to-sharp, a subtle
   scale-up and the existing upward lift for a more editorial first impression.
   The identical rule for .interview-video-wrapper lives in safety-interview.css. */
.reveal-enabled .exp-card {
    opacity: 0;
    transform: translateY(42px) scale(.965);
    filter: blur(6px);
    transition: opacity .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                transform .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                filter   .7s var(--exp-ease-soft) var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal-enabled .exp-card.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* Hero on first paint: fade + lift the cinematic-hero block so the page
   opens with motion instead of a static image. Animation plays once,
   not tied to IntersectionObserver. Per-element delays for interview-
   specific children live in safety-interview.css. */
@media (prefers-reduced-motion: no-preference) {
    .experiences-hero-content > *,
    .interview-hero-content > *,
    .waiver-hero-content > * {
        animation: sst-exp-hero-in 1.1s var(--exp-ease-soft) both;
    }
    .sst-hero-scroll-indicator { animation-delay: 1.2s; }
}
@keyframes sst-exp-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none;             }
}

/* Parallax container */
.exp-card-bg {
    will-change: transform;
}

/* Shine effect (only on select styles) */
@media (hover: hover) {
    .exp-style-classic,
    .exp-style-bold,
    .exp-style-magazine,
    .exp-style-accent-left {
        position: relative;
    }

    .exp-style-classic::after,
    .exp-style-bold::after,
    .exp-style-magazine::after,
    .exp-style-accent-left::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            115deg,
            transparent 30%,
            rgba(255, 255, 255, .22) 50%,
            transparent 70%
        );
        transform: translateX(-100%);
        pointer-events: none;
        z-index: 3;
    }

    .exp-card:hover {
        transition: transform var(--exp-dur-micro) var(--exp-ease-soft), box-shadow var(--exp-dur-micro) var(--exp-ease-soft);
    }

    .exp-style-classic:hover::after,
    .exp-style-bold:hover::after,
    .exp-style-magazine:hover::after,
    .exp-style-accent-left:hover::after {
        transform: translateX(100%);
        transition: transform .9s var(--exp-ease-soft);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .exp-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .exp-card-bg {
        transform: none !important;
    }
    .exp-card::after {
        display: none !important;
    }
}

/* Native <dialog> modal for experience cards. Fade + lift-in via
   @starting-style + allow-discrete on display/overlay so the modal
   animates when showModal() runs (Chrome 117+/Firefox 129+/Safari 17.5+).
   Browsers without @starting-style fall back to an instant open - no
   regression vs. the old behaviour. */
dialog.exp-modal {
    border: 0; padding: 0; background: #fff;
    max-width: min(920px, 92vw); width: 100%;
    max-height: 90vh; overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity var(--exp-dur-modal) var(--exp-ease-soft), transform var(--exp-dur-modal) var(--exp-ease-soft), overlay var(--exp-dur-modal) allow-discrete, display var(--exp-dur-modal) allow-discrete;
}
dialog.exp-modal[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@starting-style {
    dialog.exp-modal[open] {
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }
}
dialog.exp-modal::backdrop {
    background: rgba(0, 15, 30, 0.75);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--exp-dur-modal) var(--exp-ease-soft), overlay var(--exp-dur-modal) allow-discrete, display var(--exp-dur-modal) allow-discrete;
}
dialog.exp-modal[open]::backdrop { opacity: 1; }
@starting-style {
    dialog.exp-modal[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    dialog.exp-modal,
    dialog.exp-modal[open],
    dialog.exp-modal::backdrop,
    dialog.exp-modal[open]::backdrop { transition: none; transform: none; }
}
dialog.exp-modal .exp-modal-close {
    position: absolute; top: 12px; right: 16px;
    background: rgba(0,0,0,.35); color: #fff;
    border: 0; font-size: 32px; line-height: 1; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
dialog.exp-modal .exp-modal-close:hover { background: rgba(0,0,0,.55); }
dialog.exp-modal .exp-modal-content { overflow-y: auto; max-height: 90vh; }