:root {
      --bg-dark: #0f0714;
      --bg-darker: #09030d;
      --bg-section: #140b1c;
      --gold-primary: #d4a559;
      --gold-light: #eac586;
      --text-muted-gold: #c3b299;
      --cream-bg: #eae3d2;
      --cream-card: #f6f2ea;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--bg-dark);
      color: #ffffff;
      overflow-x: hidden;
    }

    .font-serif { font-family: 'Playfair Display', serif; }
    .font-script { font-family: 'Cormorant Garamond', serif; font-style: italic; }
    .text-gold { color: var(--gold-primary) !important; }

    /* Custom Header / Navbar */
    .custom-navbar {
      background-color: #110817;
      padding: 16px 0;
      border-bottom: 1px solid rgba(212, 165, 89, 0.15);
    }
    .navbar-nav .nav-link {
      color: #e0dcd3;
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      padding: 0.5rem 0.9rem !important;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: var(--gold-primary);
    }
    .navbar-nav .nav-link.active {
      border-bottom: 2px solid var(--gold-primary);
    }
    .cart-badge {
      font-size: 0.65rem;
      padding: 2px 5px;
      background-color: var(--gold-primary);
      color: #110817;
      border-radius: 50%;
      position: absolute;
      top: -6px;
      right: -8px;
      font-weight: 700;
    }

    /* Hero Section */
    .story-hero {
      position: relative;
      min-height: 80vh;
      background: linear-gradient(to bottom, rgba(15, 7, 20, 0.3), rgba(15, 7, 20, 0.9)), 
                  url('../images/ourbg.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      padding: 100px 0 80px;
    }
    .hero-heading {
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 1.15;
    }
    .hero-script {
      font-size: 2.8rem;
      color: var(--gold-primary);
      display: block;
    }

    /* Section Separators */
    .section-divider-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold-primary);
      margin-bottom: 30px;
    }
    .section-divider-title::before, .section-divider-title::after {
      content: "";
      width: 50px;
      height: 1px;
      background: var(--gold-primary);
    }

    /* Outlined Button */
    .btn-outline-gold {
      border: 1px solid var(--gold-primary);
      color: var(--gold-primary);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      padding: 10px 24px;
      border-radius: 2px;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
    }
    .btn-outline-gold:hover {
      background-color: var(--gold-primary);
      color: #0f0714;
    }

    /* Story Feature Box */
    .story-feature-box {
      border: 1px solid rgba(212, 165, 89, 0.3);
      border-radius: 6px;
      overflow: hidden;
    }

    /* Values Grid */
    .value-box {
      text-align: center;
      padding: 15px;
    }
    .value-box i {
      font-size: 1.8rem;
      color: var(--gold-primary);
      margin-bottom: 12px;
    }
    .value-box h6 {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #fff;
      margin-bottom: 6px;
    }
    .value-box p {
      font-size: 0.68rem;
      color: #aaa1b2;
      line-height: 1.4;
      margin: 0;
    }

    /* Cherry to Cup Process */
    .process-section {
      background-color: var(--cream-bg);
      color: #2b1d0c;
      padding: 60px 0;
    }
    .step-circle-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--gold-primary);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      margin-bottom: 12px;
    }
    .step-num {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--gold-primary);
      margin-bottom: 2px;
    }
    .step-title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .step-desc {
      font-size: 0.65rem;
      color: #665b4c;
      line-height: 1.3;
    }
    .step-arrow {
      color: var(--gold-primary);
      font-size: 1rem;
      align-self: center;
      margin-top: -35px;
    }

    /* Nature Shapes Every Cup Section */
    .nature-banner {
      background-color: #0b050f;
    }
    .stat-badge {
      text-align: center;
    }
    .stat-badge i {
      font-size: 1.4rem;
      color: var(--gold-primary);
      margin-bottom: 6px;
    }
    .stat-badge-title {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #fff;
    }
    .stat-badge-desc {
      font-size: 0.6rem;
      color: #9f96a8;
      line-height: 1.3;
    }

    /* Footer Styles */
    .main-footer {
      background-color: #08030b;
      padding: 60px 0 25px;
      border-top: 1px solid rgba(212, 165, 89, 0.15);
      font-size: 0.75rem;
    }
    .footer-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #fff;
      margin-bottom: 16px;
    }
    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-links li { margin-bottom: 8px; }
    .footer-links a {
      color: #a49caa;
      text-decoration: none;
      transition: all 0.2s;
    }
    .footer-links a:hover { color: var(--gold-primary); }
    .newsletter-input {
      background: transparent;
      border: 1px solid rgba(212, 165, 89, 0.4);
      color: #fff;
      font-size: 0.75rem;
      padding: 8px 12px;
      border-radius: 2px;
    }
    .newsletter-input:focus {
      background: transparent;
      box-shadow: none;
      border-color: var(--gold-primary);
      color: #fff;
    }
    .btn-send-gold {
      background: var(--gold-primary);
      color: #110817;
      border: none;
      padding: 8px 14px;
      border-radius: 2px;
    }