:root{
     --exs-bg:#061b2a;
     --exs-text:#fff;
     --exs-btn:#e10600;
     --exs-btnText:#fff;
     --exs-ease:cubic-bezier(.22,.61,.36,1);
    /* layout */
     --exs-cardW: clamp(160px, 45vw, 600px);
     --exs-cardR: 16px;
     --insideFrac: .50;
    /* title sizing (responsive) */
     --exs-titleMax: var(--titleSizeStatic, 96px);
     --exs-titleMin: clamp(22px, 5vw, 40px);
     --exs-titleFluid: calc(0.25rem + 4vw);
     --exs-titleSize: clamp(var(--exs-titleMin), var(--exs-titleFluid), var(--exs-titleMax));
    /* positions / tweaks */
     --exs-edgePad: 8px;
     --exs-topTweak: -18px;
     --exs-bottomTweak: 0px;
    /* misc */
     --exs-ctaGap: clamp(16px, 2.4vw, 28px);
     --exs-expandedH: min(70vh, 720px);
    ;
    /* peeks */
     --exs-peek: clamp(20px, 6vw, 80px);
}
 @media (max-width: 900px){
     :root{
         --exs-cardW: 94vw;
        /* gentler, capped titles on mobile */
         --exs-titleMax: min(var(--titleSizeStatic, 96px), 64px);
         --exs-titleMin: clamp(18px, 6vw, 34px);
         --exs-titleFluid: calc(1rem + 4.5vw);
         --insideFrac: .50;
         --exs-edgePad: 6px;
         --exs-topTweak: 0px;
         --exs-bottomTweak: 0px;
    }
}
 .exs-experience-slider{
     background:transparent;
     color:var(--exs-text);
     overflow:hidden;
     position: relative;
}
 .exs-slider-header{
     display:flex;
    align-items:center;
    justify-content:space-between;
     max-width:1200px;
    margin:0 auto;
    padding: 12px clamp(12px, 4vw, 24px) 0;
}
 .exs-slider-title{
    font-weight:800;
    font-size:clamp(18px,2.6vw,28px)
}
 .exs-slider-nav{
    display:flex;
    gap:10px
}
.exs-experience-card img:hover {
    scale: 1.03;
}
 .exs-nav-button {
     -webkit-appearance: none;
     appearance: none;
     width: clamp(36px, 5vw, 48px);
    /* match other nav buttons */
     height: clamp(36px, 5vw, 48px);
     border: 0;
     border-radius: 999px;
     color: #fff;
     background-color: rgba(0, 22, 43, 0.4);
    /* softer transparent dark */
     backdrop-filter: blur(4px);
    /* frosted look */
     display: grid;
     place-items: center;
     cursor: pointer;
     transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, background .18s ease;
     box-shadow: none;
}
 .exs-nav-button:hover {
     transform: translateY(-1px) scale(1.03);
     filter: brightness(1.1);
     background-color: rgba(0, 22, 43, 0.9);
    /* stronger hover background */
     box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
 .exs-nav-button:active {
     transform: scale(0.95);
}
.exs-nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

 .exs-nav-button:focus-visible {
     outline: 2px solid rgba(255,255,255,0.9);
     outline-offset: 2px;
}
/* SVG icon sizing like tts */
 .exs-nav-button svg {
     width: clamp(14px, 2vw, 20px);
     height: clamp(14px, 2vw, 20px);
     display: block;
}
 .exs-nav-button svg path {
     fill: currentColor;
}
 .exs-slider-viewport{
     overflow:hidden;
     isolation: isolate;
}
 .exs-slider-track{
     display:flex;
    gap:0;
    will-change:transform;
    transition:transform .55s var(--exs-ease);
    touch-action:pan-y;
}
 .exs-experience-slide{
     flex:0 0 100vw;
     display:grid;
     place-items:center;
     min-height: var(--exs-expandedH);
     position:relative;
    /* collapsed (off view) */
  --cardScaleX: 1;
  --cardScaleY: 0;
  --cardOpacity: 0;
  --cardMaxH: 0;
  --titleOpacity: 0;
}
 .exs-experience-slide[data-inview="true"]{
  --cardScaleX: 1; /* grow to normal width */
  --cardScaleY: 1;
  --cardOpacity: 1;
  --cardMaxH: var(--exs-expandedH);
  --titleOpacity: 1;
}
 .exs-slide-stage{
     width:var(--exs-cardW);
     position:relative;
     text-align:center;
     margin-top: 1rem;
}
.exs-experience-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: var(--cardMaxH);
  overflow: visible;

  transform: scaleX(var(--cardScaleX)) scaleY(var(--cardScaleY));
  opacity: var(--cardOpacity);

  transition:
    transform 0.65s cubic-bezier(.3, .6, .4, 1) 0.15s, /* gentler easing + slight delay */
    opacity 0.55s var(--exs-ease) 0.15s,
    max-height 0.55s var(--exs-ease) 0.15s;

  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  z-index: 1;
  transform-origin: center;
}
 .exs-experience-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--exs-cardR);
}

 .exs-split-title{
     position:absolute;
     left:50%;
     margin:0;
     white-space:nowrap;
     text-align:center;
     pointer-events:none;
     font-weight:900;
     font-size:var(--exs-titleSize);
     letter-spacing:.4px;
     color:var(--exs-text);
     z-index:2;
     text-shadow:0 14px 50px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35);
     line-height:1;
     opacity:var(--titleOpacity);
     transition:opacity .45s var(--exs-ease);
     font-family: "STRIGER", Sans-serif;
     background: linear-gradient(to bottom, transparent 0%, transparent 20%, #F90000 15%, #F90000 100%);
}
 .exs-split-title--top{
     top:var(--exs-edgePad);
     transform:translate(-50%, calc(-1 * (1 - var(--insideFrac)) * 1em + var(--exs-topTweak)));
}
 .exs-split-title--bottom{
     bottom:28%;
     transform:translate(-50%, calc((1 - var(--insideFrac)) * 1em + var(--exs-bottomTweak)));
}
 .exs-slide-cta{
     display:inline-block;
     margin-top:calc(var(--exs-ctaGap) + (1 - var(--insideFrac)) * 6em);
     padding:10px 35px;
     border-radius:0.4rem;
     background:var(--exs-btn);
     color:var(--exs-btnText);
     font-weight:800;
     text-decoration:none;
     box-shadow:0 10px 30px rgba(225,6,0,.25);
     transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
     opacity:var(--titleOpacity);
     pointer-events:calc(var(--titleOpacity) * 1);
}

/* ===== Peek rails ===== */
 .exs-peek{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: var(--exs-peek);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .25rem;
     pointer-events: none;
     z-index: 5;
     color: var(--exs-text);
}
 .exs-peek--prev{
     left:0;
}
 .exs-peek--next{
     right:0;
}
 .exs-peek .exs-peek-top, .exs-peek .exs-peek-bottom{
     width: auto;
     text-align: center;
     font-family: "STRIGER", Sans-serif;
     font-weight: 800;
    /* responsive sizing for peeks */
     font-size: clamp(18px, 3.6vw, 36px);
     line-height: 1.1;
     white-space: nowrap;
}
/* optional edge fades */
 .exs-slider-viewport::before, .exs-slider-viewport::after{
     content:"";
     position:absolute;
     top:0;
     bottom:0;
     width:20px;
     pointer-events:none;
     z-index:4;
}
 .exs-slider-viewport::before{
     left:-1px;
     background:linear-gradient(to right, rgba(0,0,0,.18), transparent);
}
 .exs-slider-viewport::after {
     right:-1px;
     background:linear-gradient(to left, rgba(0,0,0,.18), transparent);
}
 @media (max-width: 900px){
    /* hide peeks on mobile for simplicity */
     .exs-peek{
         display: none !important;
    }
    /* ensure full-bleed viewport on mobile */
     .exs-slider-viewport{
         margin: 0 !important;
    }
     .exs-experience-card{
         aspect-ratio: 1 / 1;
    }
	 .exs-split-title--bottom {
    bottom: 21%;
}
}
 @media (min-width: 1200px){
     .exs-peek .exs-peek-top, .exs-peek .exs-peek-bottom{
         font-size: clamp(36px, 5vw, 90px);
    }
}
/* ✅ Smaller on tablets / Nest Hub sizes */
 @media (min-width: 600px) and (max-width: 1024px){
     .exs-peek .exs-peek-top, .exs-peek .exs-peek-bottom{
         font-size: clamp(14px, 2.8vw, 24px);
    }
}