*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cream: #f5f0e8;
      --ink:   #1a1714;
      --rust:  #181717;
      --sand:  #978d7a;
    }

    html { scroll-behavior: smooth; }
    body {
      overflow-x: hidden;
    }

    /* ── HERO ── */
    #hero {
      position: relative;
      height: 84vh;
      overflow: hidden;
    }

    /* ── SLIDES ── */
    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity;
    }
    .slide.active { opacity: 1; }

    /* Parallax wrapper — oversized so drift never shows edges */
    .slide-bg {
      position: absolute;
      inset: -14% 0;
      will-change: transform;
    }

    /* The actual image */
    .slide-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Colour gradient overlay sits on top of img */
    .slide-overlay {
      position: absolute;
      background:#0606064f;
      inset: 0;
      z-index: 1;
    }
    /*.slide:nth-child(1) .slide-overlay { background: linear-gradient(160deg, rgba(82, 39, 19, 0.6) 0%, rgba(26, 23, 20, 0.562) 70%); }*/
    /*.slide:nth-child(2) .slide-overlay { background: linear-gradient(200deg, rgba(26, 23, 20, 0.322) 0%, rgba(94, 52, 32, 0.808) 100%); }*/
    /*.slide:nth-child(3) .slide-overlay { background: linear-gradient(130deg, rgba(212,197,169,.25) 0%, rgba(26, 23, 20, 0.658) 65%); }*/

    /* Grain noise */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 10;
      opacity: .4;
    }

    /* ── CONTENT ── */
    .slide-content {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 15vw;
    }

    .slide-eyebrow {
      font-size: clamp(0.6rem, 1vw, 0.75rem);
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: #c0dbf2;
      margin-bottom: 1.4rem;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.9s 0.3s ease, transform 0.9s 0.3s ease;
    }

    .slide-title {
      font-family: "Oswald", sans-serif;
      font-weight: 500;
      font-size: clamp(3rem, 7.5vw, 7rem);
      line-height: 1.02;
      color: var(--cream);
      max-width: 17ch;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s 0.55s ease, transform 1s 0.55s ease;
    }
    .slide-title em { font-style: italic; color: #fff3db; }

    .slide-sub {
      font-size: clamp(0.85rem, 1.5vw, 1.3rem);
      letter-spacing: 0.18em;
      color: rgb(255, 255, 255);
      margin-top: 1rem;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.9s 0.85s ease, transform 0.9s 0.85s ease;
    }

    .slide.active .slide-eyebrow,
    .slide.active .slide-title,
    .slide.active .slide-sub {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── CONTROLS ── */
    .controls {
      position: absolute;
      top: 18vh;
      right: 7vw;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 1.4rem;
    }

    .ctrl-btn {
      width: 42px; height: 42px;
      border: 1px solid rgba(245,240,232,.25);
      background: transparent;
      border-radius: 50%;
      cursor: pointer;
      color: var(--cream);
      display: grid;
      place-items: center;
      transition: border-color .3s, background .3s;
    }
    .ctrl-btn:hover { border-color: var(--rust); background: rgba(196,80,26,.15); }
    .ctrl-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

    .dots { display: flex; gap: 0.55rem; }
    .dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(245,240,232,.3);
      cursor: pointer;
      transition: background .4s, transform .4s;
    }
    .dot.active { background: var(--rust); transform: scale(1.5); }

    .progress-bar {
      position: absolute;
      bottom: 0; left: 0;
      height: 2px;
      background: var(--rust);
      width: 0%;
      z-index: 0;
    }

    .counter {
      position: absolute;
      top: 50%; right: 7vw;
      transform: translateY(-50%);
      z-index: 20;
      font-size: 0.6rem;
      letter-spacing: 0.3em;
      color: rgba(245,240,232,.35);
      writing-mode: vertical-rl;
    }

    /* ── BELOW HERO ── */
    .below-hero {
      height: 100vh;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 1rem;
      padding: 4rem;
    }
    .below-hero h2 {
      font-family: "Oswald", sans-serif;
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 300;
      color: var(--cream);
      text-align: center;
    }
    .below-hero p {
      color: rgba(245,240,232,.4);
      font-size: .75rem;
      letter-spacing: .2em;
      text-align: center;
    }
    .divider {
      width: 1px; height: 60px;
      background: linear-gradient(to bottom, var(--rust), transparent);
      margin: 0 auto 1rem;
    }