/* ─────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --slide-h: 100vh;
      --ctrl-size: 3rem;
      --ease: cubic-bezier(.4, 0, .2, 1);
      --dur: 700ms;
    }

    html, body {
      height: 100%;
      font-family: 'Georgia', 'Times New Roman', serif;
      background: #050505;
      overflow-x: hidden;
    }

    /* ─────────────────────────────────────────
       CAROUSEL STRUCTURE  (Bootstrap-spec)
    ───────────────────────────────────────── */
    .carousel {
      position: relative;
      width: 100%;
      height: var(--slide-h);
      /* height: auto; */
      overflow: hidden;
    }

    .carousel-inner {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .carousel-item {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateX(100%);
      transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
      will-change: transform, opacity;
      z-index: 0;
    }

    .carousel-item.active {
      opacity: 1;
      transform: translateX(0);
      z-index: 1;
    }

    .carousel-item.exit-left {
      opacity: 0;
      transform: translateX(-6%);
      z-index: 0;
    }

    .carousel-item.enter-right {
      opacity: 0;
      transform: translateX(6%);
      z-index: 2;
    }

    .carousel-item.enter-right.active {
      opacity: 1;
      transform: translateX(0);
    }

    /* ─────────────────────────────────────────
       SLIDE BACKGROUNDS
    ───────────────────────────────────────── */
    .slide-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.06);
      transition: transform 7s ease;
    }

    .carousel-item.active .slide-bg {
      transform: scale(1);
    }

    /* Slide 1 */
    .slide-1 .slide-bg {
      background-image: url('../images/slider1.png');
      background-size: cover;
      background-position: center;
    }

    /* Slide 2 */
    .slide-2 .slide-bg {
      background-image: url('../images/slider03.png');
      background-size: cover;
      background-position: center;
    }

    /* Slide 3 */
    .slide-3 .slide-bg {
      background-image: url('../images/slider04.png');
      background-size: cover;
      background-position: center;
    }

    /* ─────────────────────────────────────────
       DECORATIVE SVG LAYER
    ───────────────────────────────────────── */
    .slide-deco {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .slide-deco svg {
      width: 100%;
      height: 100%;
    }

    /* ─────────────────────────────────────────
       GRAIN OVERLAY
    ───────────────────────────────────────── */
    .grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }

    /* ─────────────────────────────────────────
       CAPTION
    ───────────────────────────────────────── */
    .carousel-caption {
      position: relative;
      z-index: 10;
      text-align: center;
      color: #fff;
      padding: 0 1.5rem;
      max-width: 860px;
    }

    .caption-tag {
      display: inline-block;
      font-family: 'Courier New', monospace;
      font-size: .72rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      margin-bottom: 1.4rem;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s;
    }

    .carousel-item.active .caption-tag {
      opacity: 1;
      transform: translateY(0);
    }

    .carousel-caption h2 {
      font-size: clamp(2.4rem, 6vw, 5.2rem);
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: -.03em;
      margin-bottom: 1.2rem;
      text-shadow: 0 4px 40px rgba(0,0,0,.6);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s var(--ease) .28s, transform .6s var(--ease) .28s;
    }

    .carousel-item.active .carousel-caption h2 {
      opacity: 1;
      transform: translateY(0);
    }

    .carousel-caption p {
      font-size: clamp(.9rem, 2vw, 1.15rem);
      line-height: 1.7;
      color: rgba(255,255,255,.7);
      max-width: 560px;
      margin: 0 auto 2rem;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .55s var(--ease) .42s, transform .55s var(--ease) .42s;
    }

    .carousel-item.active .carousel-caption p {
      opacity: 1;
      transform: translateY(0);
    }

    .btn-hero {
      display: inline-block;
      padding: .75rem 2.4rem;
      font-family: 'Courier New', monospace;
      font-size: .8rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: #fff;
      border: 1px solid rgba(255,255,255,.5);
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(6px);
      cursor: pointer;
      text-decoration: none;
      transition: background .25s, border-color .25s, transform .2s;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .5s var(--ease) .56s, transform .5s var(--ease) .56s,
                  background .25s, border-color .25s;
    }

    .carousel-item.active .btn-hero {
      opacity: 1;
      transform: translateY(0);
    }

    .btn-hero:hover {
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.9);
    }

    /* Slide accent colours on heading */
    .slide-1 h2 em { color: #5ec8f5; font-style: normal; }
    .slide-2 h2 em { color: #ff8c42; font-style: normal; }
    .slide-3 h2 em { color: #3de8b0; font-style: normal; }

    /* ─────────────────────────────────────────
       INDICATORS
    ───────────────────────────────────────── */
    .carousel-indicators {
      position: absolute;
      bottom: 2.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      gap: .55rem;
      list-style: none;
    }

    .carousel-indicators button {
      width: 28px;
      height: 2px;
      background: rgba(255,255,255,.3);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background .3s, width .3s;
      position: relative;
      overflow: hidden;
    }

    .carousel-indicators button::after {
      content: '';
      position: absolute;
      left: 0; top: 0;
      height: 100%;
      width: 0%;
      background: #fff;
    }

    .carousel-indicators button.active {
      width: 52px;
      background: rgba(255,255,255,.2);
    }

    .carousel-indicators button.active::after {
      animation: progressBar 5s linear forwards;
    }

    @keyframes progressBar {
      from { width: 0% }
      to   { width: 100% }
    }

    /* ─────────────────────────────────────────
       CONTROLS
    ───────────────────────────────────────── */
    .carousel-control-prev,
    .carousel-control-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: var(--ctrl-size);
      height: var(--ctrl-size);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, border-color .2s, transform .2s;
    }

    .carousel-control-prev { left: 2rem; }
    .carousel-control-next { right: 2rem; }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.5);
    }

    .carousel-control-prev:active { transform: translateY(-50%) translateX(-2px); }
    .carousel-control-next:active { transform: translateY(-50%) translateX(2px); }

    .carousel-control-prev svg,
    .carousel-control-next svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Slide counter */
    .slide-counter {
      position: absolute;
      bottom: 2rem;
      right: 2.5rem;
      z-index: 20;
      font-family: 'Courier New', monospace;
      font-size: .72rem;
      color: rgba(255,255,255,.45);
      letter-spacing: .1em;
    }

    /* ─────────────────────────────────────────
       SCROLL CUE
    ───────────────────────────────────────── */
    .scroll-cue {
      position: absolute;
      bottom: 2rem;
      left: 2.5rem;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      font-family: 'Courier New', monospace;
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
    }

    .scroll-cue span {
      display: block;
      width: 1px;
      height: 36px;
      background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
      animation: scrollLine 1.8s ease-in-out infinite;
    }

    @keyframes scrollLine {
      0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
      50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
      51%  { transform: scaleY(1); transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }

    /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */
    @media (max-width: 640px) {
      .carousel-control-prev { left: 1rem; }
      .carousel-control-next { right: 1rem; }
      .scroll-cue, .slide-counter { display: none; }
    }

    /* ═════════════════════════════════════════
   RESPONSIVE — mobile-first breakpoints
   xs  : < 480px   (small phones)
   sm  : 480–767px (large phones)
   md  : 768–1023px (tablets)
   lg  : 1024–1279px (small laptops)
   xl  : 1280–1535px (desktops)
   2xl : ≥ 1536px  (large screens / TV)
═════════════════════════════════════════ */

/* ── XS — Small phones (< 480px) ── */
@media (min-width: 319px) and (max-width: 449px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 320px;      
    } 
  
}
@media (min-width: 449px) and (max-width: 530px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 320px;      
    } 
  
}

@media (min-width: 530px) and (max-width: 590px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 320px;      
    } 
  
}
@media (min-width: 590px) and (max-width: 690px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 340px;      
    } 
  
}
@media ( min-width: 690px) and (max-width: 790px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 420px;      
    } 
  
}
@media (min-width: 790px) and (max-width: 900px) {   
    .slide-1 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-2 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
     .slide-3 .slide-bg{
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: center; */
    }
    .carousel {     
      width: 100%;
      height: 480px;      
    } 
  
}