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

:root {
  --forest: #173C32;
  --forest-light: #31594D;
  --cinnamon: #B56A32;
  --cream: #F7F3EA;
  --sage: #DCE5DC;
  --charcoal: #1B2421;
  --white: #FFFFFF;
  --muted: #6F7772;
  --border: rgba(23, 60, 50, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", sans-serif;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--cream);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 14px 5%;

  color: #fff;

  transition:
    background 0.4s ease,
    padding 0.4s ease,
    box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(23, 60, 50, 0.96);

  backdrop-filter: blur(12px);

  padding-top: 8px;
  padding-bottom: 8px;

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.nav-container {
  max-width: 1400px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;

  gap: 14px;

  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.1rem;
}


/* HEADER LOGO ONLY */

.site-header .brand .header-logo {
  width: 100px;
  height: auto;

  max-width: none;

  object-fit: contain;
}


/* fallback if header-logo class is missing */

.site-header .brand img {
  width: 150px;
  height: auto;

  max-width: none;

  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;

  gap: 32px;
}

.main-nav a {
  position: relative;

  font-size: 0.92rem;
  font-weight: 500;

  color: #fff;

  transition: 0.3s ease;
}

.main-nav a:not(.nav-quote)::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background: #F0C49C;

  transition: width 0.3s ease;
}

.main-nav a:not(.nav-quote):hover::after,
.main-nav a:not(.nav-quote).active::after {
  width: 100%;
}

.main-nav a:hover,
.main-nav a.active {
  color: #F0C49C;
}

.nav-quote {
  border: 1px solid rgba(255,255,255,0.55);

  padding: 10px 18px;

  border-radius: 30px;
}

.nav-quote:hover {
  background: var(--cinnamon);

  border-color: var(--cinnamon);

  color: #fff !important;
}

.menu-toggle {
  display: none;

  background: transparent;

  border: 0;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 26px;
  height: 2px;

  margin: 5px 0;

  background: #fff;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;

  line-height: 1.15;
}

h2 {
  font-size: clamp(2.3rem, 4vw, 4.4rem);
}

h2 em {
  color: var(--cinnamon);

  font-style: normal;
}

.eyebrow {
  display: inline-block;

  margin-bottom: 20px;

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: rgba(255,255,255,0.75);
}

.eyebrow.dark {
  color: var(--cinnamon);
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
  position: relative;

  min-height: 100vh;
  height: 100vh;

  overflow: hidden;

  color: #fff;

  display: flex;
  align-items: center;
}

.hero-slider,
.hero-slide,
.hero-overlay {
  position: absolute;

  inset: 0;
}

.hero-slide {
  background-size: cover;

  background-position: center;

  opacity: 0;

  transform: scale(1.04);

  transition:
    opacity 1.25s ease,
    transform 7s ease;
}

.hero-slide.active {
  opacity: 1;

  transform: scale(1.1);
}

.hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(8,25,20,0.86) 0%,
      rgba(8,25,20,0.55) 45%,
      rgba(8,25,20,0.18) 100%
    );
}

.hero-content {
  position: relative;

  z-index: 2;

  width: min(900px, 90%);

  margin-left: 8%;
  margin-top: 40px;
}

.hero-content h1 {
  max-width: 820px;

  font-size: clamp(3.1rem, 6vw, 6.8rem);

  margin-bottom: 28px;
}

.hero-content h1 span {
  display: block;

  color: #E8B783;
}

.hero-content p {
  max-width: 650px;

  font-size: 1.1rem;

  color: rgba(255,255,255,0.86);

  margin-bottom: 35px;
}

.hero-actions {
  display: flex;

  gap: 14px;

  flex-wrap: wrap;
}

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 14px 26px;

  border-radius: 3px;

  font-weight: 600;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.btn-primary {
  background: var(--cinnamon);

  color: #fff;
}

.btn-primary:hover {
  background: #934F22;

  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid rgba(255,255,255,0.65);

  color: #fff;
}

.btn-outline:hover {
  background: #fff;

  color: var(--forest);
}

.hero-bottom {
  position: absolute;

  z-index: 3;

  left: 8%;
  right: 8%;
  bottom: 35px;

  display: flex;

  justify-content: space-between;
  align-items: center;
}

.hero-location {
  font-size: 0.8rem;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.dot {
  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 8px;

  border-radius: 50%;

  background: #D9A36D;
}

.hero-counter {
  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 0.8rem;
}

.counter-line {
  width: 60px;
  height: 1px;

  background: rgba(255,255,255,0.6);
}


/* =========================================================
   COMMON
========================================================= */

.section {
  padding: 120px 6%;
}

.section-heading {
  max-width: 750px;

  margin-bottom: 55px;
}

.section-heading p {
  max-width: 620px;

  color: var(--muted);

  margin-top: 25px;
}


/* =========================================================
   INGREDIENTS
========================================================= */

.ingredients-section {
  background: var(--cream);
}

.ingredient-grid {
  max-width: 1400px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}

.ingredient-card {
  background: #fff;

  overflow: hidden;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.ingredient-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(23,60,50,0.12);
}

.ingredient-image {
  height: 350px;

  overflow: hidden;
}

.ingredient-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.ingredient-card:hover img {
  transform: scale(1.07);
}

.ingredient-info {
  padding: 27px;
}

.ingredient-info > span {
  color: var(--cinnamon);

  font-size: 0.75rem;

  letter-spacing: 2px;
}

.ingredient-info h3 {
  font-size: 1.7rem;

  margin: 10px 0;
}

.ingredient-info p {
  color: var(--muted);

  font-size: 0.9rem;

  margin-bottom: 15px;
}

.ingredient-info strong {
  color: var(--forest);

  font-size: 0.85rem;
}


/* =========================================================
   WHY SPIZA
========================================================= */

.why-section {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  min-height: 750px;

  background: #fff;
}

.why-image {
  overflow: hidden;
}

.why-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.why-content {
  padding: 100px 8%;

  align-self: center;
}

.why-content > p {
  max-width: 650px;

  color: var(--muted);

  margin: 25px 0 45px;
}

.why-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 35px;
}

.why-item {
  border-top: 1px solid var(--border);

  padding-top: 18px;

  transition: transform 0.3s ease;
}

.why-item:hover {
  transform: translateY(-4px);
}

.why-item span {
  color: var(--cinnamon);

  font-size: 0.75rem;
}

.why-item h3 {
  font-size: 1.35rem;

  margin: 7px 0;
}

.why-item p {
  color: var(--muted);

  font-size: 0.88rem;
}


/* =========================================================
   CINEMATIC VIDEO STORY
========================================================= */

.video-story-section {
  position: relative;

  min-height: 720px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: #fff;

  background:
    url("images/I.jpg")
    center / cover no-repeat;
}

.story-video {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  min-width: 100%;
  min-height: 100%;

  object-fit: cover;

  transform: translate(-50%, -50%);

  z-index: 0;
}

.video-fallback {
  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    url("images/I.jpg")
    center / cover no-repeat;
}

.video-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7,25,19,0.86) 0%,
      rgba(7,25,19,0.60) 48%,
      rgba(7,25,19,0.25) 100%
    );
}

.video-story-content {
  position: relative;

  z-index: 2;

  width: min(800px, 88%);

  margin-left: 8%;
}

.video-story-content h2 {
  font-size: clamp(2.7rem, 5vw, 5.3rem);
}

.video-story-content h2 em {
  color: #E8B783;

  font-style: normal;
}

.video-story-content p {
  max-width: 600px;

  margin: 28px 0;

  color: rgba(255,255,255,0.84);
}

.video-story-actions {
  display: flex;

  align-items: center;

  gap: 25px;

  flex-wrap: wrap;
}

.story-link {
  display: inline-block;

  color: #fff;

  border-bottom: 1px solid #D9A36D;

  padding-bottom: 5px;

  transition: color 0.3s ease;
}

.story-link:hover {
  color: #E8B783;
}

.video-control {
  border: 1px solid rgba(255,255,255,0.45);

  background: rgba(0,0,0,0.15);

  color: #fff;

  padding: 10px 16px;

  border-radius: 30px;

  font-family: "DM Sans", sans-serif;

  font-size: 0.78rem;

  cursor: pointer;

  transition: 0.3s ease;
}

.video-control:hover {
  background: var(--cinnamon);

  border-color: var(--cinnamon);
}


/* =========================================================
   FEATURED PRODUCTS
========================================================= */

.featured-section {
  background: #fff;
}

.split-heading {
  max-width: 1400px;

  display: flex;

  justify-content: space-between;
  align-items: end;
}

.text-link {
  color: var(--forest);

  font-weight: 600;

  padding-bottom: 10px;
}

.featured-grid {
  max-width: 1400px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}

.featured-card {
  position: relative;

  min-height: 470px;

  overflow: hidden;

  color: #fff;
}

.featured-card img {
  width: 100%;
  height: 100%;

  min-height: 470px;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.featured-card:hover img {
  transform: scale(1.06);
}

.featured-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      transparent 35%,
      rgba(5,20,15,0.88)
    );
}

.featured-info {
  position: absolute;

  z-index: 2;

  left: 28px;
  right: 28px;
  bottom: 28px;
}

.featured-info span {
  font-size: 0.7rem;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.featured-info h3 {
  font-size: 1.8rem;

  margin: 8px 0 15px;
}

.featured-info strong {
  font-size: 0.85rem;
}


/* =========================================================
   GLOBAL REACH
========================================================= */

.global-section {
  min-height: 620px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(49,89,77,0.8),
      rgba(23,60,50,1)
    );

  color: #fff;

  padding: 100px 6%;
}

.global-content {
  max-width: 850px;
}

.global-content h2 {
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.global-content h2 em {
  color: #E8B783;
}

.global-content p {
  max-width: 650px;

  margin: 25px auto;

  color: rgba(255,255,255,0.78);
}

.global-regions {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 40px;
}

.global-regions span {
  padding: 10px 18px;

  border: 1px solid rgba(255,255,255,0.22);

  border-radius: 30px;

  font-size: 0.82rem;

  transition: 0.3s ease;
}

.global-regions span:hover {
  background: rgba(255,255,255,0.08);

  border-color: rgba(255,255,255,0.5);
}


/* =========================================================
   QUOTE CTA
========================================================= */

.quote-section {
  padding: 130px 6%;

  text-align: center;

  background: var(--cream);
}

.quote-inner {
  max-width: 900px;

  margin: auto;
}

.quote-inner p {
  max-width: 650px;

  margin: 25px auto 35px;

  color: var(--muted);
}


/* =========================================================
   CONTACT STRIP
========================================================= */

.contact-strip {
  padding: 55px 7%;

  background: var(--cinnamon);

  color: #fff;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;
}

.contact-strip h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.contact-actions {
  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;
}

.contact-link,
.whatsapp-link {
  padding: 12px 18px;

  border: 1px solid rgba(255,255,255,0.6);

  border-radius: 3px;

  font-size: 0.85rem;

  transition: 0.3s ease;
}

.contact-link:hover {
  background: rgba(255,255,255,0.1);
}

.whatsapp-link {
  background: #fff;

  color: var(--forest);

  border-color: #fff;

  font-weight: 600;
}

.whatsapp-link:hover {
  transform: translateY(-2px);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  background: #101916;

  color: rgba(255,255,255,0.7);

  text-align: center;

  padding: 30px 20px;

  font-size: 0.8rem;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .main-nav {
    position: fixed;

    top: 0;
    right: -100%;

    width: min(330px, 85%);
    height: 100vh;

    background: var(--forest);

    flex-direction: column;

    justify-content: center;

    gap: 25px;

    transition: right 0.4s ease;
  }

  .main-nav.open {
    right: 0;
  }

  .menu-toggle {
    display: block;

    position: relative;

    z-index: 1001;
  }

  .ingredient-grid,
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .why-section {
    grid-template-columns: 1fr;
  }

  .why-image {
    min-height: 450px;
  }

  .split-heading {
    display: block;
  }

  .text-link {
    display: inline-block;

    margin-top: 20px;
  }

  .contact-strip {
    flex-direction: column;

    align-items: flex-start;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .site-header {
    padding: 10px 5%;
  }

  .site-header .brand .header-logo,
  .site-header .brand img {
    width: 120px;

    height: auto;
  }

  .brand span {
    font-size: 0.95rem;
  }

  .hero-section {
    min-height: 760px;

    height: 100svh;
  }

  .hero-content {
    margin-left: 6%;

    width: 88%;
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .hero-content p {
    font-size: 0.95rem;
  }

  .hero-bottom {
    left: 6%;
    right: 6%;
  }

  .section {
    padding: 85px 6%;
  }

  .ingredient-image {
    height: 300px;
  }

  .why-content {
    padding: 75px 7%;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .video-story-section {
    min-height: 650px;
  }

  .video-story-content {
    width: 88%;

    margin-left: 6%;
  }

  .video-story-actions {
    align-items: flex-start;

    flex-direction: column;
  }

  .featured-card,
  .featured-card img {
    min-height: 400px;
  }

  .quote-section {
    padding: 90px 6%;
  }

  .contact-actions {
    width: 100%;
  }

  .contact-link,
  .whatsapp-link {
    width: 100%;

    text-align: center;
  }
}

/* Hero eyebrow - keep clear of the large logo */
.hero-content > .eyebrow {
    margin-left: 95px;
}


/* =========================================================
   ABOUT PAGE
========================================================= */


/* ABOUT HERO */

.about-hero {
  position: relative;

  min-height: 720px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: #fff;
}

.about-hero-bg {
  position: absolute;
  inset: 0;

  background:
    url("images/N.jpg")
    center / cover no-repeat;

  transform: scale(1.04);

  animation: aboutHeroZoom 12s ease-out forwards;
}

@keyframes aboutHeroZoom {

  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.12);
  }

}

.about-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(8,25,20,0.88) 0%,
      rgba(8,25,20,0.62) 48%,
      rgba(8,25,20,0.20) 100%
    );
}

.about-hero-content {
  position: relative;
  z-index: 2;

  width: min(900px, 88%);

  margin-left: 8%;

  padding-top: 100px;
}

.about-hero-content h1 {
  max-width: 900px;

  font-family: "Playfair Display", serif;

  font-size: clamp(3.2rem, 6vw, 6.5rem);

  line-height: 1.05;

  margin-bottom: 28px;
}

.about-hero-content h1 span {
  display: block;

  color: #E8B783;
}

.about-hero-content p {
  max-width: 620px;

  font-size: 1.08rem;

  color: rgba(255,255,255,0.84);
}


/* =========================================================
   OUR STORY
========================================================= */

.about-story-section {
  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  background: #fff;
}

.about-story-image {
  min-height: 720px;

  overflow: hidden;
}

.about-story-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 1s ease;
}

.about-story-image:hover img {
  transform: scale(1.035);
}

.about-story-content {
  padding: 110px 9%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-story-content h2 {
  margin-bottom: 30px;
}

.about-story-content p {
  max-width: 680px;

  color: var(--muted);

  margin-bottom: 18px;
}


/* =========================================================
   STATEMENT
========================================================= */

.about-statement {
  padding: 130px 7%;

  background: var(--forest);

  color: #fff;
}

.about-statement-inner {
  max-width: 1050px;

  margin: auto;

  text-align: center;
}

.about-statement h2 {
  font-size: clamp(2.5rem, 5vw, 5rem);

  margin-bottom: 30px;
}

.about-statement h2 em {
  color: #E8B783;
}

.about-statement p {
  max-width: 720px;

  margin: auto;

  color: rgba(255,255,255,0.74);
}


/* =========================================================
   VISION + MISSION
========================================================= */

.vision-mission-section {
  padding: 120px 6%;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 25px;

  background: var(--cream);
}

.vm-card {
  padding: 65px;

  background: #fff;

  border-top: 3px solid var(--cinnamon);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.vm-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 25px 55px rgba(23,60,50,0.09);
}

.vm-number {
  color: var(--cinnamon);

  font-size: 0.75rem;
  font-weight: 600;

  letter-spacing: 3px;

  margin-bottom: 25px;
}

.vm-card h2 {
  font-size: clamp(2rem, 3vw, 3rem);

  color: var(--forest);

  margin-bottom: 25px;
}

.vm-card p {
  color: var(--muted);

  margin-bottom: 15px;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.difference-section {
  padding: 125px 6%;

  background: #fff;
}

.difference-heading {
  max-width: 700px;

  margin-bottom: 60px;
}

.difference-grid {
  max-width: 1400px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

  background: var(--border);
}

.difference-item {
  padding: 45px 30px;

  background: #fff;

  transition: background 0.3s ease;
}

.difference-item:hover {
  background: var(--cream);
}

.difference-item > span {
  color: var(--cinnamon);

  font-size: 0.75rem;

  letter-spacing: 2px;
}

.difference-item h3 {
  color: var(--forest);

  font-size: 1.4rem;

  margin: 18px 0 12px;
}

.difference-item p {
  color: var(--muted);

  font-size: 0.9rem;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey-section {
  padding: 125px 7%;

  background: #142F27;

  color: #fff;
}

.journey-heading {
  max-width: 760px;

  margin-bottom: 70px;
}

.journey-heading h2 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);

  margin-bottom: 20px;
}

.journey-heading p {
  color: rgba(255,255,255,0.68);
}

.journey-timeline {
  position: relative;

  max-width: 1050px;

  margin: auto;
}

.journey-timeline::before {
  content: "";

  position: absolute;

  left: 130px;
  top: 15px;
  bottom: 15px;

  width: 1px;

  background: rgba(255,255,255,0.18);
}

.journey-item {
  position: relative;

  display: grid;

  grid-template-columns: 100px 60px 1fr;

  align-items: start;

  margin-bottom: 60px;
}

.journey-item:last-child {
  margin-bottom: 0;
}

.journey-year {
  padding-top: 2px;

  color: #E8B783;

  font-size: 0.85rem;
  font-weight: 600;

  letter-spacing: 2px;
}

.journey-dot {
  position: relative;

  width: 13px;
  height: 13px;

  margin-top: 5px;
  margin-left: 24px;

  border: 3px solid #142F27;

  border-radius: 50%;

  background: var(--cinnamon);

  box-shadow:
    0 0 0 1px rgba(232,183,131,0.6);
}

.journey-content {
  padding-left: 15px;
}

.journey-content h3 {
  font-size: 1.6rem;

  margin-bottom: 10px;
}

.journey-content p {
  max-width: 650px;

  color: rgba(255,255,255,0.66);
}


/* =========================================================
   QUALITY JOURNEY
========================================================= */

.quality-section {
  padding: 125px 6%;

  background: var(--cream);
}

.quality-heading {
  max-width: 800px;

  margin: 0 auto 65px;

  text-align: center;
}

.quality-heading p {
  color: var(--muted);

  margin-top: 20px;
}

.quality-flow {
  max-width: 1400px;

  margin: auto;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;
}

.quality-step {
  flex: 1;

  max-width: 220px;

  text-align: center;

  padding: 30px 15px;
}

.quality-step > span {
  color: var(--cinnamon);

  font-size: 0.72rem;

  letter-spacing: 2px;
}

.quality-icon {
  width: 65px;
  height: 65px;

  margin: 20px auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(23,60,50,0.15);

  border-radius: 50%;

  background: #fff;

  font-size: 1.4rem;
}

.quality-step h3 {
  color: var(--forest);

  font-size: 1.3rem;

  margin-bottom: 8px;
}

.quality-step p {
  color: var(--muted);

  font-size: 0.85rem;
}

.quality-arrow {
  color: var(--cinnamon);

  font-size: 1.5rem;

  opacity: 0.55;
}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {
  padding: 130px 7%;

  background:
    linear-gradient(
      rgba(9,29,23,0.90),
      rgba(9,29,23,0.90)
    ),
    url("images/I.jpg")
    center / cover no-repeat;

  color: #fff;

  text-align: center;
}

.about-cta-inner {
  max-width: 900px;

  margin: auto;
}

.about-cta h2 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);

  margin-bottom: 25px;
}

.about-cta h2 em {
  color: #E8B783;
}

.about-cta p {
  max-width: 650px;

  margin: 0 auto 35px;

  color: rgba(255,255,255,0.75);
}

.about-cta-buttons {
  display: flex;

  justify-content: center;

  gap: 15px;

  flex-wrap: wrap;
}


/* =========================================================
   ABOUT RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .about-story-section {
    grid-template-columns: 1fr;
  }

  .about-story-image {
    min-height: 500px;
  }

  .vision-mission-section {
    grid-template-columns: 1fr;
  }

  .difference-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quality-flow {
    flex-wrap: wrap;
  }

  .quality-arrow {
    display: none;
  }

  .quality-step {
    min-width: 45%;
  }
}


@media (max-width: 600px) {

  .about-hero {
    min-height: 680px;
  }

  .about-hero-content {
    margin-left: 6%;

    width: 88%;

    padding-top: 120px;
  }

  .about-hero-content h1 {
    font-size: 3rem;
  }

  .about-story-image {
    min-height: 380px;
  }

  .about-story-content {
    padding: 75px 7%;
  }

  .about-statement {
    padding: 90px 7%;
  }

  .vision-mission-section {
    padding: 80px 6%;
  }

  .vm-card {
    padding: 40px 28px;
  }

  .difference-section {
    padding: 85px 6%;
  }

  .difference-grid {
    grid-template-columns: 1fr;
  }

  .journey-section {
    padding: 90px 6%;
  }

  .journey-timeline::before {
    left: 8px;
  }

  .journey-item {
    grid-template-columns: 35px 1fr;

    gap: 0;
  }

  .journey-year {
    grid-column: 2;

    margin-bottom: 8px;
  }

  .journey-dot {
    grid-column: 1;
    grid-row: 1 / span 2;

    margin: 5px 0 0 2px;
  }

  .journey-content {
    grid-column: 2;

    padding-left: 0;
  }

  .quality-section {
    padding: 90px 6%;
  }

  .quality-flow {
    display: grid;

    grid-template-columns: 1fr;
  }

  .quality-step {
    max-width: 100%;
    min-width: 100%;
  }

  .about-cta {
    padding: 90px 6%;
  }

  .about-cta-buttons {
    flex-direction: column;
  }

  .about-cta-buttons .btn {
    width: 100%;
  }

}

/* =========================================================
   STEP 13 - GLOBAL MOBILE / TABLET POLISH
   ADD AT END OF style.css
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* ---------- TABLET ---------- */

@media (max-width: 900px) {

  .site-header {
    padding: 10px 5%;
  }

  .nav-container {
    width: 100%;
  }

  .site-header .brand .header-logo,
  .site-header .brand img {
    width: 125px;
    height: auto;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 1101;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;

    width: min(340px, 86%);
    height: 100vh;

    padding: 120px 35px 40px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 10px;

    background: #173C32;

    box-shadow: -12px 0 35px rgba(0,0,0,0.15);

    transition: right 0.35s ease;
  }

  .main-nav.open {
    right: 0;
  }

  .main-nav a {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
  }

  .main-nav .nav-quote {
    margin-top: 12px;
    padding: 12px 18px;
    text-align: center;
  }


  /* HOME HERO */

  .hero-content {
    width: 86%;
    margin-left: 7%;
  }

  .hero-content h1 {
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .hero-content p {
    max-width: 560px;
  }

  .ingredient-grid,
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-section {
    grid-template-columns: 1fr;
  }

  .why-image {
    min-height: 500px;
  }

  .why-content {
    padding: 80px 7%;
  }

  .video-story-content {
    width: 82%;
  }

}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

  .site-header {
    padding: 8px 5%;
  }

  .site-header.scrolled {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .site-header .brand .header-logo,
  .site-header .brand img {
    width: 110px;
    height: auto;
  }


  /* HERO */

  .hero-section {
    min-height: 720px;
    height: 100svh;
  }

  .hero-slide {
    background-position: center center;
  }

  .hero-content {
    width: 88%;
    margin-left: 6%;
    margin-top: 45px;
  }

  .hero-content .eyebrow {
    margin-left: 0 !important;
    font-size: 0.66rem;
    letter-spacing: 2px;
  }

  .hero-content h1 {
    font-size: clamp(2.65rem, 12vw, 3.7rem);
    line-height: 1.04;
  }

  .hero-content p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-bottom {
    display: none;
  }


  /* HOME SECTIONS */

  .section {
    padding: 75px 6%;
  }

  .section-heading h2 {
    font-size: 2.45rem;
  }

  .ingredient-grid,
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .ingredient-image {
    height: 285px;
  }

  .why-image {
    min-height: 360px;
  }

  .why-content {
    padding: 70px 7%;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .video-story-section {
    min-height: 640px;
  }

  .video-story-content {
    width: 88%;
    margin-left: 6%;
  }

  .video-story-content h2 {
    font-size: 2.8rem;
  }

  .video-story-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .featured-card,
  .featured-card img {
    min-height: 390px;
  }

  .global-section {
    min-height: 560px;
    padding: 80px 6%;
  }

  .global-content h2 {
    font-size: 2.8rem;
  }

  .quote-section {
    padding: 80px 6%;
  }

  .contact-strip {
    padding: 45px 6%;
  }

}

/* =========================================================
   MOBILE MENU FINAL FIX
========================================================= */

@media (max-width: 900px) {

  .menu-toggle {
    display: flex !important;

    width: 44px;
    height: 44px;

    padding: 0;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    background: transparent;

    border: 1px solid rgba(255,255,255,0.45);

    border-radius: 4px;

    cursor: pointer;

    position: relative;

    z-index: 1200;
  }


  .menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    margin: 0;

    background: #ffffff;

    border-radius: 2px;
  }


  .main-nav {
    position: fixed !important;

    top: 0;
    right: -100%;

    width: min(340px, 86%);
    height: 100vh;

    padding: 120px 35px 40px;

    display: flex !important;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 12px;

    background: #173C32;

    visibility: hidden;
    opacity: 0;

    transition:
      right 0.35s ease,
      opacity 0.35s ease,
      visibility 0.35s ease;

    z-index: 1100;
  }


  .main-nav.open {
    right: 0;

    visibility: visible;

    opacity: 1;
  }


  .main-nav a {
    width: 100%;

    padding: 12px 0;
  }

}

/* =========================================================
   HOME MOBILE HEADER LAYER FIX
========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999 !important;
    }

    .site-header .nav-container {
        position: relative;
        z-index: 10000;
    }

    .menu-toggle {
        display: flex !important;
        position: relative;
        z-index: 10002 !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .menu-toggle span {
        display: block !important;
        width: 22px;
        height: 2px;
        background: #ffffff !important;
    }

    .main-nav {
        z-index: 10001 !important;
    }

    .hero-section,
    .hero-slider,
    .hero-slide {
        z-index: 1;
    }
}

/* =========================================================
   HOME MOBILE MENU - FINAL POSITION FIX
========================================================= */

@media (max-width: 900px) {

    /* Keep header above the hero */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        pointer-events: none;
    }

    .site-header .brand,
    .site-header .menu-toggle,
    .site-header .main-nav {
        pointer-events: auto;
    }


    /* Logo stays left */
    .site-header .brand {
        position: relative !important;
        z-index: 100001 !important;
    }


    /* Force hamburger to top-right */
    .site-header .menu-toggle {
        display: flex !important;

        position: fixed !important;
        top: 22px !important;
        right: 20px !important;

        width: 46px !important;
        height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        background: rgba(23, 60, 50, 0.88) !important;

        border: 1px solid rgba(255,255,255,0.55) !important;
        border-radius: 50% !important;

        box-shadow: 0 5px 18px rgba(0,0,0,0.18) !important;

        z-index: 100002 !important;

        cursor: pointer !important;
    }


    /* Three hamburger lines */
    .site-header .menu-toggle span {
        display: block !important;

        width: 21px !important;
        height: 2px !important;

        margin: 0 !important;

        background: #ffffff !important;

        border-radius: 3px !important;
    }


    /* Mobile menu panel */
    .site-header .main-nav {
        position: fixed !important;

        top: 0 !important;
        right: -100% !important;

        width: min(340px, 86%) !important;
        height: 100vh !important;

        padding: 105px 30px 40px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 12px !important;

        background: #173C32 !important;

        visibility: hidden !important;
        opacity: 0 !important;

        z-index: 100000 !important;

        transition:
            right 0.35s ease,
            opacity 0.35s ease,
            visibility 0.35s ease !important;
    }


    .site-header .main-nav.open {
        right: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    .site-header .main-nav a {
        display: block !important;

        width: 100% !important;

        padding: 12px 0 !important;

        color: #ffffff !important;
    }

}

/* =========================================================
   THANK YOU PAGE
========================================================= */

.thankyou-section {
  position: relative;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 220px 6% 120px;

  background:
    url("images/N.jpg")
    center center / cover no-repeat;

  color: #fff;

  text-align: center;
}

.thankyou-overlay {
  position: absolute;
  inset: 0;

  background:
    rgba(8, 25, 20, 0.88);
}

.thankyou-content {
  position: relative;
  z-index: 2;

  max-width: 850px;
}

.thankyou-eyebrow {
  display: inline-block;

  margin-bottom: 20px;

  color: #E8B783;

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.thankyou-content h1 {
  margin-bottom: 28px;

  font-family: "Playfair Display", serif;

  font-size: clamp(3rem, 6vw, 5.5rem);

  line-height: 1.05;
}

.thankyou-content h1 span {
  display: block;

  color: #E8B783;
}

.thankyou-content p {
  max-width: 650px;

  margin: 0 auto 35px;

  color: rgba(255,255,255,0.78);

  font-size: 1.05rem;
}

.thankyou-actions {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 15px;

  flex-wrap: wrap;
}

.thankyou-link {
  width: 100%;

  margin-top: 10px;

  color: #fff;

  font-size: 0.85rem;
}

@media (max-width: 600px) {

  .thankyou-section {
    padding: 140px 6% 80px;
  }

  .thankyou-content h1 {
    font-size: 3rem;
  }

  .thankyou-actions {
    flex-direction: column;
  }

  .thankyou-actions .btn {
    width: 100%;
  }

}