/* ============================================================
       RESET & BASE (LTR)
       ============================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    :root {
      --bg: #030303;
      --amber: #f59e0b;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    html, body { background: var(--bg); }
    html { overflow-x: hidden; }

    body {
      font-family: 'Inter', 'Cormorant Garamond', -apple-system, BlinkMacSystemFont, sans-serif;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: left;
    }

    body.loading { overflow: hidden; height: 100vh; }

    ::selection { background: rgba(245, 158, 11, 0.25); color: #fff; }

    /* Lenis smooth scroll */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-smooth iframe { pointer-events: none; }

    /* ============================================================
       LOADING SCREEN
       ============================================================ */
    #loader {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.8s ease;
    }
    #loader.hidden { opacity: 0; pointer-events: none; }

.loader-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 7vw, 50px);
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.22em;
  margin-right: 0.22em;
}

@media (max-width: 480px) {
  .loader-title {
    font-size: 20px;
  }
}
    .loader-bar-track {
      width: 200px;
      height: 2px;
      margin-top: 32px;
      background: rgba(245, 158, 11, 0.15);
      border-radius: 2px;
      overflow: hidden;
    }
    .loader-bar-fill {
      width: 0%;
      height: 100%;
      background: var(--amber);
      transition: width 0.3s ease;
    }

    .loader-note {
      margin-top: 18px;
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.3);
    }

    /* ============================================================
       FIXED HEADER (LTR)
       ============================================================ */
    #site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 64px;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 34px;
      background: linear-gradient(to bottom, rgba(3, 3, 3, 0.72), rgba(3, 3, 3, 0));
    }
    .header-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 15px;
      font-weight: 500;
      color: var(--amber);
      letter-spacing: 0.25em;
      margin-right: 0.25em;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
      text-decoration: none;
    }
    .header-brand h1 {
      font: inherit;
      letter-spacing: inherit;
      font-weight: inherit;
      color: inherit;
    }
    .header-shop {
      font-size: 11px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.35s var(--ease);
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
    }

    /* ============================================================
       SCROLL PROGRESS (right edge)
       ============================================================ */
    #progress-track {
      position: fixed;
      top: 0; right: 0;
      width: 2px;
      height: 100vh;
      height: 100lvh;
      z-index: 100;
      background: rgba(245, 158, 11, 0.15);
    }
    #progress-fill {
      width: 100%;
      height: 100%;
      background: rgba(245, 158, 11, 0.8);
      transform: scaleY(0);
      transform-origin: top;
    }

    /* ============================================================
       HERO — scroll-driven video (LTR)
       ============================================================ */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100lvh;
      overflow: hidden;
      background: #000;
    }
    .hero-poster,
    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #000;
      pointer-events: none;
    }
    .hero-poster { z-index: 0; }
    #hero-canvas {
      z-index: 1;
      opacity: 0;
    }
    #hero-canvas.is-ready { opacity: 1; }

    /* hero text overlays (LTR aligned) */
    .overlay {
      position: absolute;
      z-index: 2;
      pointer-events: none;
      line-height: 1.16;
      max-width: 42%;
    }
    .ov1 {
      top: 11%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      max-width: 92%;
    }
    .ov2 { left: 8%; top: 22%; bottom: auto; text-align: left; }
    .ov3 { right: 8%; top: 50%; transform: translateY(-50%); text-align: right; }
    .ov4 { left: 8%;  top: 50%; transform: translateY(-50%); text-align: left; }
    .ov5 { left: 8%;  top: 16%; text-align: left; }

    .title-text {
      display: inline-block;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(40px, 9vw, 120px);
      letter-spacing: 0.3em;
      margin-right: 0.3em;
      white-space: nowrap;
      color: rgba(245, 158, 11, 0.9);
      text-shadow: 0 2px 50px rgba(0, 0, 0, 0.9);
      opacity: 0;
    }

    .oline {
      display: block;
      white-space: nowrap;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(24px, 4.6vw, 42px);
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 2px 30px rgba(0, 0, 0, 0.95), 0 0 70px rgba(0, 0, 0, 0.8);
    }
    .word { display: inline-block; opacity: 0; }

    /* brand mark — fades out on scroll */
    .brand-mark {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 118px;
      transform: translateX(-50%);
      text-align: center;
      pointer-events: none;
      width: min(940px, 92vw);
    }
    .brand-degree,
    .brand-ielts {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      line-height: 1.15;
      text-shadow: 0 2px 28px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.8);
    }
    .brand-degree {
      margin-bottom: 14px;
      font-size: clamp(26px, 4vw, 44px);
      color: #fff;
    }
    .brand-ielts {
      margin-top: 16px;
      font-size: clamp(22px, 3.2vw, 36px);
      color: #fff;
    }
    .brand-word {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(34px, 5.6vw, 80px);
      letter-spacing: 0.16em;
      margin-right: 0.16em;
      white-space: nowrap;
      color: rgba(245, 158, 11, 0.95);
      text-shadow: 0 2px 50px rgba(0, 0, 0, 0.9);
    }

    /* ============================================================
       COLLECTION (portfolio items)
       ============================================================ */
    .collection {
      position: relative;
      padding: 150px 34px 170px;
      background:
        radial-gradient(ellipse 62% 46% at 50% 0%, rgba(245, 158, 11, 0.06), transparent 72%),
        var(--bg);
    }
    .collection-head { text-align: center; margin-bottom: 78px; }
    .collection-eyebrow {
      display: block;
      font-size: 10px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.4em;
      margin-right: 0.4em;
      color: var(--amber);
    }
    .collection-title {
      margin-top: 16px;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(30px, 5vw, 46px);
      color: #fff;
    }
    .collection-lead {
      max-width: 640px;
      margin: 18px auto 0;
      font-size: 15px;
      line-height: 1.7;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.62);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 26px;
      max-width: 1120px;
      margin: 0 auto;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3),
                  0 24px 50px -34px rgba(0, 0, 0, 0.9);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
 .card-media {
  width: 100%;
  aspect-ratio:1 / 1;
  object-fit: cover;
  object-position: center; /* default, but explicit */
  display: block;
  transition: transform 0.5s var(--ease);
}

/* Optional: zoom effect on hover */
.card:hover .card-media {
  transform: scale(1.05);
}
    .card-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 32px 34px 34px;
      text-align: left;
      max-height:100px;
    }
    .card-dawn  { background: linear-gradient(160deg, #1a0f0a, #2a1810); }
    .card-dusk  { background: linear-gradient(160deg, #0a0a0a, #1a0a00); }
    .card-night { background: linear-gradient(160deg, #050510, #0a0a1a); }

    .card-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: clamp(20px, 3.6vw, 20px);
      /*letter-spacing: 0.16em;*/
      margin-right: 0.16em;
      text-align: center;
      color: var(--amber);
    }
    .card-night .card-name { color: #fff; }

    .card-blend {
      margin-top: 4px;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 16px;
      text-align: center;
      color: rgba(255, 255, 255, 0.5);
    }
    .card-ingredients {
      margin-top: 22px;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.6);
    }

    .card-foot { margin-top: auto; padding-top: 34px; }
    .card-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .card-price {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(26px, 3vw, 32px);
      color: #fff;
    }
    .card-btn {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--amber);
      background: transparent;
      border: 1px solid rgba(245, 158, 11, 0.45);
      border-radius: 6px;
      padding: 12px 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.35s var(--ease), color 0.35s var(--ease),
                  border-color 0.35s var(--ease);
    }
    .card-meta {
      display: block;
      margin-top: 22px;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: rgba(255, 255, 255, 0.3);
    }
    .card-badge {
      position: absolute;
      top: 20px; right: 20px;
      z-index: 3;
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--amber);
      border: 1px solid rgba(245, 158, 11, 0.4);
      border-radius: 100px;
      padding: 5px 10px;
    }

    /* ============================================================
       NEWSLETTER (contact / stay in touch)
       ============================================================ */
  .newsletter {
  position: relative;
  padding: 168px 34px;
  text-align: center;
  background-image:
    linear-gradient(to bottom,
      rgba(3, 3, 3, 0.88) 0%, rgba(3, 3, 3, 0.60) 35%,
      rgba(3, 3, 3, 0.65) 65%, rgba(3, 3, 3, 0.95) 100%),
    url('newsletter-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
    .newsletter-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(34px, 6vw, 52px);
      color: #fff;
    }
    .newsletter-sub {
      margin-top: 16px;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.45);
    }
    .newsletter-form {
      margin-top: 44px;
      display: inline-flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .newsletter-input {
      width: min(320px, 78vw);
      padding: 12px 4px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #fff;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(245, 158, 11, 0.55);
      outline: none;
      transition: border-color 0.35s var(--ease);
    }
    .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.3); }
    .newsletter-input:focus { border-bottom-color: var(--amber); }
    .newsletter-contact {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 36px;
    }
    .newsletter-btn {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(3, 3, 3, 0.4);
      border: 1px solid rgba(245, 158, 11, 0.4);
      border-radius: 999px;
      cursor: pointer;
      padding: 12px 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .newsletter-btn svg { flex-shrink: 0; }

    /* ============================================================
       FOOTER (LTR)
       ============================================================ */
    .site-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 42px 34px;
      background: var(--bg);
      border-top: 1px solid rgba(245, 158, 11, 0.15);
    }
    .footer-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.2em;
      margin-right: 0.2em;
      color: var(--amber);
    }
    .footer-center {
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.3);
    }
    .footer-links { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
    .footer-links a { color: inherit; text-decoration: none; transition: color 0.3s ease; }

    /* ============================================================
       RESPONSIVE (LTR)
       ============================================================ */
    @media (min-width: 769px) {
      .newsletter { background-attachment: fixed; }
    }
    @media (max-width: 768px) {
      html { touch-action: pan-y; }
      #site-header { padding: 0 20px; }
      .collection { padding: 88px 18px 96px; }
      .newsletter { padding: 96px 18px; }
      .overlay { max-width: 90%; }
      .brand-mark {
        bottom: max(78px, 14vh);
        width: 92vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
      }
      .brand-degree,
      .brand-ielts,
      .brand-word {
        margin: 0;
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
      }
      .brand-degree { font-size: clamp(18px, 4.8vw, 26px); }
      .brand-word {
        font-size: clamp(28px, 8vw, 42px);
        letter-spacing: 0.03em;
      }
      .brand-ielts {
        font-size: clamp(16px, 4.2vw, 22px);
        color: #fff;
      }
      .ov2 { left: 6%; top: 20%; bottom: auto; }
      .ov3 { right: 6%; }
      .ov4 { left: 6%; }
      .ov5 { left: 6%; top: 18%; }
      .title-text { font-size: clamp(28px, 9vw, 52px); }
      .oline { font-size: clamp(18px, 5vw, 28px); }
      .scroll-cue {
        width: 38px;
        height: 38px;
        bottom: max(12px, env(safe-area-inset-bottom));
      }
      .cards { gap: 18px; }
    }
    @media (max-width: 600px) {
      .title-text { letter-spacing: 0.16em; margin-right: 0.16em; white-space: normal; }
      .oline { white-space: normal; }
      .card-body { padding: 26px 24px 30px; }
      .card-price-row { flex-direction: column; align-items: stretch; }
      .card-btn { padding: 16px; }
      .newsletter-btn { padding: 12px 14px; }
      .header-brand,
      .header-shop { display: inline-flex; align-items: center; min-height: 44px; }
      .header-brand {
        font-size: 13px;
        letter-spacing: 0.06em;
        margin-right: 0;
        max-width: 62%;
        line-height: 1.25;
      }
      .header-shop { letter-spacing: 0.1em; font-size: 10px; }
    }
    @media (max-width: 680px) {
      .site-footer { flex-direction: column; text-align: center; gap: 16px; }
    }
    @media (max-width: 480px) {
      #site-header { height: 56px; }
    }
    @media (max-width: 400px) {
      .overlay { max-width: 90%; }
      .ov2, .ov4, .ov5 { left: 5%; }
      .ov3 { right: 5%; }
    }

    @media (hover: hover) {
      .card:hover {
        transform: translateY(-12px);
        box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.6),
                    0 36px 64px -28px rgba(0, 0, 0, 0.9),
                    0 0 60px -14px rgba(245, 158, 11, 0.28);
      }
      .card:hover .card-media { transform: scale(1.045); }
      .header-shop:hover { color: var(--amber); }
      .card-btn:hover {
        background: var(--amber);
        border-color: var(--amber);
        color: #1a0f0a;
      }
      .newsletter-btn:hover {
        color: var(--amber);
        border-color: var(--amber);
        background: rgba(245, 158, 11, 0.1);
        transform: translateY(-2px);
      }
      .footer-links a:hover { text-decoration: underline; color: var(--amber); }
    }

    /* ---------- SCROLL CUE (stays on screen) ---------- */
    .scroll-cue {
      position: fixed;
      left: 50%;
      bottom: max(20px, env(safe-area-inset-bottom));
      z-index: 180;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(245, 158, 11, 0.75);
      background: rgba(3, 3, 3, 0.35);
      color: var(--amber);
      cursor: pointer;
      transform: translateX(-50%);
      transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    }
    .scroll-cue::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(245, 158, 11, 0.55);
      animation: cuePulse 1.8s ease-out infinite;
      pointer-events: none;
    }
    .scroll-cue:hover,
    .scroll-cue:focus-visible {
      border-color: var(--amber);
      background: rgba(3, 3, 3, 0.62);
      outline: none;
    }
    .scroll-cue-chevron {
      width: 8px;
      height: 8px;
      border-right: 1.5px solid var(--amber);
      border-bottom: 1.5px solid var(--amber);
      animation: cueBob 1.6s ease-in-out infinite;
    }
    .scroll-cue.is-up .scroll-cue-chevron { animation-name: cueBobUp; }
    .scroll-cue.is-playing .scroll-cue-chevron {
      width: 11px;
      height: 12px;
      border: none;
      border-radius: 0;
      background:
        linear-gradient(var(--amber), var(--amber)) left center / 3px 12px no-repeat,
        linear-gradient(var(--amber), var(--amber)) right center / 3px 12px no-repeat;
      animation: none;
      transform: none;
    }
    @keyframes cueBob {
      0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
      50% { transform: rotate(45deg) translate(2px, 2px); }
    }
    @keyframes cueBobUp {
      0%, 100% { transform: rotate(225deg) translate(-2px, -2px); }
      50% { transform: rotate(225deg) translate(2px, 2px); }
    }
    @keyframes cuePulse {
      0% { transform: scale(1); opacity: 0.75; }
      100% { transform: scale(1.7); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-cue-chevron { animation: none; transform: rotate(45deg); }
      .scroll-cue.is-up .scroll-cue-chevron { transform: rotate(225deg); }
      .scroll-cue::before { animation: none; opacity: 0; }
    }