/* =========================================================
   RK Natural Exports — styles.css
   ========================================================= */

/* ===== Theme ===== */
:root{
  --bg:#fffefb;
  --ink:#1b1f1a;
  --muted:#545a52;
  --beige:#f4efe7;
  --brown:#7a5742;
  --deep:#243a2a;
  --accent:#385a3a;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
  --header-h:62px;

  /* nav balance around logo (desktop) */
  --logo-clearance:18px;
}

/* ===== Global Overflow Fix ===== */
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

* {
  box-sizing: border-box;
}

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

/* ===== Animations ===== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes leafDrift{
  0%{transform:translateY(0) rotate(0deg) translateX(0)}
  25%{transform:translateY(-6px) rotate(3deg) translateX(3px)}
  75%{transform:translateY(4px) rotate(-2deg) translateX(-3px)}
  100%{transform:translateY(0) rotate(0deg) translateX(0)}
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes ripple{
  from{transform:scale(0);opacity:.4}
  to{transform:scale(4);opacity:0}
}
@keyframes heroZoom{
  from{transform:translateZ(0) scale(1.0)}
  to{transform:translateZ(0) scale(1.08)}
}

/* ===== Smooth scroll ===== */
html{scroll-behavior:smooth}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);width:100%;max-width:100%;overflow-x:hidden}
a{text-decoration:none}
.container{width:100%;max-width:1200px;padding:0 40px;margin:0 auto}
.section{padding:80px 0;width:100%;max-width:100%}
.section-lead{margin:.4rem 0 2rem}
.grid{display:grid;gap:32px}
.grid.two{grid-template-columns:1.2fr 1fr}
@media (max-width:960px){
  .grid.two{grid-template-columns:1fr}
  .container{padding:0 40px}
  .section{padding:60px 0}
  .nav-centered{padding:6px 40px}
  .hero__content{padding-left:40px;padding-right:40px;padding-bottom:60px}
  .about__copy{padding:24px 20px}
  .mission-full{padding:28px 24px;font-size:1rem;margin:24px auto 0;background:rgba(56,90,58,.13);border-color:rgba(56,90,58,.22)}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about__image::before{display:none}
  .about__image::after{display:none}
}

@media (max-width:640px){
  .container{padding:0 40px}
  .section{padding:60px 0}
  .nav-centered{padding:6px 40px}
  .hero__content{padding-left:40px;padding-right:40px;padding-bottom:60px}
  .about__copy{padding:40px}
  .mission-full{padding:40px;margin:40px auto 0;font-size:1rem}
  .about-points{gap:14px}
  .about-points li{padding:12px 16px;gap:12px}
  .about-points i{width:32px;height:32px;font-size:1rem}
  .about-points strong{font-size:0.95rem;margin-bottom:3px}
  .about-points p{font-size:.88rem;line-height:1.45}
  .gallery-grid{grid-template-columns:repeat(2, 1fr);gap:18px}
  .btn--view-more{padding: 14px 28px;font-size: 0.95rem}
}

h1,h2,h3,h4,h5,h6{font-family:"Playfair Display",serif;color:var(--deep);margin:0 0 .6rem}
p,li,small,span,a,button,input,textarea,label{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--muted);line-height:1.6}
small, .small{font-size:.9rem}
.muted{opacity:.85}

/* ===== Buttons ===== */
.btn{
  display:inline-block;background:var(--accent);color:#fff !important;
  padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);
  font-weight:600;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-3px);opacity:.97;box-shadow:0 16px 40px rgba(0,0,0,.16)}
.btn--ghost{background:transparent;border:2px solid var(--accent);color:var(--accent) !important}
.btn--block{width:100%}
.btn--lg{padding:14px 22px;font-size:1.05rem}

/* --- Force-hide mobile drawer/backdrop on desktop --- */
.mobile-drawer,
.drawer-backdrop{
  display:none;
}


/* ===== Header ===== */
.site-header.style-bar{
  position:absolute;top:0;left:0;right:0;z-index:60;
  background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 0 rgba(0,0,0,.12) inset;
  animation:fadeIn .8s ease-out;
  width:100%;max-width:100%;
}
.nav-centered{display:grid;align-items:center;grid-template-columns:1fr auto 1fr;gap:0;padding:6px 28px;width:100%;max-width:100%}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.nav a{
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.01em;padding:8px 8px;
  display:inline-block;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:color .2s ease,opacity .2s ease;
}
.nav a::before{
  content:'';position:absolute;bottom:3px;left:8px;right:8px;
  height:1.5px;background:rgba(255,255,255,.8);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
.nav a:hover{color:#fff;opacity:.95}
.nav a:hover::before{transform:scaleX(1)}
.nav a.active{color:#fff}
.nav a.active::before{transform:scaleX(1)}
.nav-item.dropdown{position:relative}
.nav-item .menu{
  position:absolute;top:100%;left:0;background:rgba(0,0,0,.9);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px;
  display:none;min-width:180px;animation:scaleIn .18s ease-out;
}
.nav-item .menu a{display:block;padding:8px 10px;color:#fff}
.nav-item:hover .menu{display:block}

/* Centered badge logo (desktop) */
.brand--center{
  width:96px;height:96px;background:#fff;border-radius:999px;
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.18);
  transform:translateY(22px);margin:0 auto;
  transition:transform .3s ease,box-shadow .3s ease;
  animation:scaleIn .6s ease-out .2s both;
}
.brand--center:hover{transform:translateY(22px) scale(1.07);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.brand--center img{height:60px;width:auto;animation:float 5s ease-in-out 1.5s infinite}

/* Mobile toggle base */
.hamburger{display:none;cursor:pointer}
.hamburger span,.hamburger span:before,.hamburger span:after{
  display:block;background:#fff;height:2px;width:24px;border-radius:2px;position:relative;transition:transform .2s ease,opacity .2s ease
}
.hamburger span:before,.hamburger span:after{content:"";position:absolute;left:0}
.hamburger span:before{top:-7px}.hamburger span:after{top:7px}
#nav-toggle{display:none}

/* balance left/right spacing around logo (desktop) */
.nav--left{justify-content:flex-end;padding-right:var(--logo-clearance)}
.nav--right{justify-content:flex-start;padding-left:var(--logo-clearance)}

/* ===== Hero ===== */
.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;width:100%;max-width:100%}
@supports (height: 100svh){.hero{min-height:100svh}}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;animation:heroZoom 16s ease-out both;max-width:100%;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.6) 100%),
    radial-gradient(transparent 30%, rgba(0,0,0,.28) 100%);
  width:100%;
}

.hero__content{
  position:relative;text-align:center;
  padding-top:calc(var(--header-h) + 12px);padding-bottom:64px;
  animation:fadeInUp 1s ease-out .3s both;width:100%;max-width:100%;padding-left:40px;padding-right:40px;
}

.hero h1{
  color:#F5F1E8;
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.22;
  letter-spacing:-.012em;
  background:linear-gradient(135deg,#F5F1E8 30%,#E8E4D8 55%,#F5F1E8 70%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeInUp .9s ease-out .2s both, gradientShift 6s ease-in-out 1.8s infinite;
  word-wrap:break-word;
  max-width:22ch;
  margin:0 auto .8rem;
  padding:0 10px;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,0.45));
}

.hero-sub{
  color:rgba(255,255,255,.88);
  margin:.6rem auto 1.4rem;
  max-width:52ch;
  word-wrap:break-word;
  padding:0 10px;
  text-shadow:0 2px 8px rgba(0,0,0,.38);
  font-size:1.05rem;
  line-height:1.68;
  letter-spacing:.01em;
  animation:fadeInUp .9s ease-out .75s both;
}
.hero__cta{
  animation:fadeInUp .9s ease-out 1s both;
}

.cred-badge{
  display:inline-block;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35);
  border-radius:40px;
  padding:10px 20px;
  color:#ffffff;
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.03em;
  margin:.6rem 0 1.1rem;
  animation:fadeInUp .9s ease-out .5s both;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* Hero CTA button — scoped overrides */
.hero .btn--lg{
  padding:12px 28px;
  min-width:168px;
  justify-content:center;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.07em;
  background:linear-gradient(150deg,#52b872 0%,#2e7a50 55%,#245f3e 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 4px 20px rgba(46,122,80,.5),
    0 1px 4px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.hero .btn--lg:hover{
  transform:translateY(-3px);
  background:linear-gradient(150deg,#5dc87e 0%,#33885a 55%,#286846 100%);
  box-shadow:
    0 10px 30px rgba(46,122,80,.5),
    0 3px 10px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.38);
  opacity:1;
}
.hero .btn--lg:active{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(46,122,80,.4),0 1px 4px rgba(0,0,0,.18);
}

/* =========================================================
   CAPABILITY TRUST CARDS
   ========================================================= */
.trust-caps{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:0;
}
.trust-caps__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}

.trust-cap{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:28px 28px 28px 28px;
  border-right:1px solid rgba(0,0,0,.06);
  transition:background .22s ease,transform .22s ease,box-shadow .22s ease;
  cursor:default;
}
.trust-cap:last-child{border-right:0}
.trust-cap:hover{
  background:#faf8f4;
  transform:translateY(-2px);
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}

.trust-cap__icon{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(56,90,58,.10),rgba(56,90,58,.06));
  border:1px solid rgba(56,90,58,.14);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s ease,transform .22s ease;
}
.trust-cap__icon i{
  font-size:1.1rem;
  color:var(--accent);
}
.trust-cap:hover .trust-cap__icon{
  background:linear-gradient(135deg,rgba(56,90,58,.18),rgba(56,90,58,.10));
  transform:scale(1.08) rotate(-3deg);
}

/* Stagger for IntersectionObserver reveal */
.trust-cap:nth-child(1){transition-delay:.0s}
.trust-cap:nth-child(2){transition-delay:.08s}
.trust-cap:nth-child(3){transition-delay:.16s}
.trust-cap:nth-child(4){transition-delay:.24s}

.trust-cap__body h4{
  font-family:"Inter",system-ui,sans-serif;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 5px;
  letter-spacing:-.01em;
  line-height:1.3;
}
.trust-cap__body p{
  font-size:.82rem;
  color:var(--muted);
  margin:0;
  line-height:1.55;
}

@media(max-width:980px){
  .trust-caps__grid{
    grid-template-columns:repeat(2,1fr);
  }
  .trust-cap{
    border-right:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .trust-cap:nth-child(2n){border-right:0}
  .trust-cap:nth-child(3),.trust-cap:nth-child(4){border-bottom:0}
  .trust-cap{padding:22px 20px}
}
@media(max-width:480px){
  .trust-caps__grid{
    grid-template-columns:1fr;
  }
  .trust-cap{
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .trust-cap:last-child{border-bottom:0}
  .trust-cap{padding:18px 20px;gap:14px}
  .trust-cap__icon{width:38px;height:38px;border-radius:10px}
  .trust-cap__icon i{font-size:1rem}
}

/* =========================================================
   RK Natural Exports — ABOUT SECTION ENHANCED
   ========================================================= */

/* ===== About — Section wrapper ===== */
.about{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:100%;
  background:
    linear-gradient(160deg, #fffefb 0%, #f8f3eb 45%, #f3f7f0 100%);
}

/* Warm coffee radial glow top-right */
.about::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-80px;
  width:800px;
  height:800px;
  background:radial-gradient(circle at 60% 40%,
    rgba(196,160,100,.22) 0%,
    rgba(122,87,66,.10) 38%,
    transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation:aboutOrb1 14s ease-in-out infinite alternate;
}

/* Warm coffee radial glow bottom-left */
.about::after{
  content:"";
  position:absolute;
  bottom:-100px;
  left:-60px;
  width:680px;
  height:680px;
  background:radial-gradient(circle,
    rgba(158,117,80,.18) 0%,
    rgba(196,160,100,.07) 38%,
    transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation:aboutOrb2 16s ease-in-out infinite alternate;
}

@keyframes aboutOrb1{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-30px,20px) scale(1.08)}
}

@keyframes aboutOrb2{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(20px,-25px) scale(1.06)}
}

/* Keep content above pseudo layers */
.about .container{position:relative;z-index:1}

/* ===== About — Subtitle ===== */
.about-subtitle{
  text-align:center;
  font-size:1.05rem;
  color:var(--muted);
  font-weight:400;
  line-height:1.6;
  max-width:58ch;
  margin:0 auto 36px;
  letter-spacing:.005em;
  opacity:0;
  animation:fadeIn .8s ease-out .25s both;
}

/* ===== About — Title ===== */
.about-title{
  text-align:center;
  margin-bottom:8px;
  opacity:0;
  animation:fadeInUp .8s ease-out both;
  /* Gradient text */
  background:linear-gradient(135deg, var(--deep) 10%, #5a8c5e 50%, var(--brown) 90%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:fadeInUp .8s ease-out both, aboutTitleShimmer 6s ease-in-out 1.5s infinite;
}

@keyframes aboutTitleShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Decorative leaf ornament beside title */
.about-title::before{
  content:"🌿";
  font-size:.65em;
  margin-right:10px;
  opacity:.55;
  display:inline-block;
  animation:leafSpin 8s ease-in-out infinite;
  -webkit-text-fill-color:initial;
}

.about-title::after{
  content:"🌿";
  font-size:.65em;
  margin-left:10px;
  opacity:.55;
  display:inline-block;
  animation:leafSpin 8s ease-in-out infinite reverse;
  -webkit-text-fill-color:initial;
}

@keyframes leafSpin{
  0%,100%{transform:rotate(0deg) scale(1)}
  33%{transform:rotate(12deg) scale(1.08)}
  66%{transform:rotate(-8deg) scale(.96)}
}

/* ===== About — Grid ===== */
.about-grid{
  grid-template-columns:1.25fr .9fr;
  align-items:center;
  gap:56px;
}

/* ===== About — Copy panel ===== */
.about__copy{
  opacity:0;
  animation:slideInLeft .8s ease-out .2s both;
  padding:40px 40px 36px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:22px;
  border:1px solid rgba(56,90,58,.07);
  box-shadow:0 2px 0 rgba(56,90,58,.05),
              0 8px 28px rgba(0,0,0,.05),
              0 1px 0 rgba(255,255,255,.95) inset;
  position:relative;
  overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease;
}

/* Top accent bar */
.about__copy::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent), #76c442, var(--brown), var(--accent));
  background-size:300% 100%;
  animation:accentBarShimmer 4s linear infinite;
}

@keyframes accentBarShimmer{
  from{background-position:0% center}
  to{background-position:300% center}
}

.about__copy:hover{
  box-shadow:0 3px 0 rgba(56,90,58,.08),
              0 14px 38px rgba(0,0,0,.08),
              0 1px 0 rgba(255,255,255,.95) inset;
  transform:translateY(-2px);
}

/* ===== About — Intro text ===== */
.about-intro{
  max-width:60ch;
  margin-bottom:12px;
  font-size:1.02rem;
  line-height:1.78;
  color:var(--ink);
}

/* Trust line below intro */
.about-trust-line{
  display:flex;align-items:center;gap:8px;
  font-size:.84rem;font-weight:600;
  color:var(--accent);
  letter-spacing:.02em;
  margin-bottom:20px;
  opacity:.9;
}
.about-trust-line i{font-size:.82rem;opacity:.75}

/* ===== About — Points list ===== */
.about-points{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.about-points li{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:14px;
  align-items:center;
  opacity:0;
  animation:fadeInUp .6s ease-out both;
  padding:12px 16px;
  border-radius:11px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(56,90,58,.06);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
  transition:transform .3s cubic-bezier(.25,.8,.25,1),
             background .3s ease,
             border-color .3s ease,
             box-shadow .3s ease;
}

.about-points li:hover{
  transform:translateX(6px);
  background:rgba(255,255,255,.85);
  border-color:rgba(56,90,58,.16);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.about-points li:nth-child(1){animation-delay:.4s}
.about-points li:nth-child(2){animation-delay:.52s}
.about-points li:nth-child(3){animation-delay:.64s}
.about-points li:nth-child(4){animation-delay:.76s}

/* Icon badge - refined and smaller */
.about-points i{
  color:#fff;
  background:linear-gradient(135deg, #3d7a44, #5ba865);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  font-size:0.75rem;
  box-shadow:0 2px 6px rgba(56,90,58,.16),
             0 1px 2px rgba(56,90,58,.1);
  transition:transform .3s cubic-bezier(.25,.8,.25,1),
             box-shadow .3s ease;
  flex-shrink:0;
}

.about-points li:hover i{
  transform:scale(1.08) rotate(-5deg);
  box-shadow:0 4px 12px rgba(56,90,58,.24),
             0 2px 4px rgba(56,90,58,.16);
}

.about-points strong{
  color:#1b1f1a;
  font-size:1rem;
  font-weight:600;
  display:block;
  margin-bottom:4px;
  line-height:1.3;
}

.about-points p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.5;
  font-weight:400;
}

/* ===== About — Image panel ===== */
.about__image{
  opacity:0;
  animation:slideInRight .8s ease-out .2s both;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Hover lift on the figure */
.about__image figure{
  transition:transform .3s cubic-bezier(.25,.8,.25,1);
  position:relative;z-index:1;
}
.about__image figure:hover{
  transform:translateY(-6px);
}
/* Pause the continuous imgDrift while hovered so it doesn't fight the lift */
.about__image figure:hover img{
  animation-play-state:paused;
}

/* Decorative rotating ring behind image */
.about__image::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:26px;
  background:conic-gradient(from 0deg,
    rgba(56,90,58,.18),
    rgba(122,87,66,.12),
    rgba(56,90,58,.04),
    rgba(76,162,80,.18),
    rgba(56,90,58,.18));
  animation:ringRotate 18s linear infinite;
  z-index:0;
  filter:blur(2px);
}

@keyframes ringRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Floating green blob behind image */
.about__image::after{
  content:"";
  position:absolute;
  top:12%;
  right:-14%;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(56,90,58,.14), transparent 70%);
  border-radius:50%;
  animation:blobFloat 8s ease-in-out infinite;
  z-index:0;
}

@keyframes blobFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-16px) scale(1.06)}
}

.about__image img{
  position:relative;
  z-index:1;
  max-width:520px;
  width:100%;
  border-radius:22px;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset,
             0 20px 48px rgba(0,0,0,.16),
             0 4px 12px rgba(0,0,0,.08);
  border:8px solid #fff;
  transition:transform .5s cubic-bezier(.25,.8,.25,1),
             box-shadow .5s ease;
  animation:imgDrift 9s ease-in-out 2s infinite;
}

@keyframes imgDrift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-6px) rotate(.4deg)}
  66%{transform:translateY(4px) rotate(-.3deg)}
}

.about__image img:hover{
  transform:scale(1.04) rotate(.8deg) translateY(-4px) !important;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset,
             0 28px 60px rgba(0,0,0,.22),
             0 8px 24px rgba(56,90,58,.12);
  animation-play-state:paused;
}

/* ===== About — Mission statement ===== */
.mission-full{
  max-width:82ch;
  margin:40px auto 0;
  text-align:center;
  opacity:0;
  animation:fadeIn .8s ease-out .8s both;
  font-size:1.08rem;
  line-height:1.75;
  padding:32px 40px;
  background:linear-gradient(135deg,
    rgba(56,90,58,.07) 0%,
    rgba(122,87,66,.05) 50%,
    rgba(56,90,58,.07) 100%);
  border-radius:20px;
  border:1px solid rgba(56,90,58,.12);
  position:relative;
  transition:box-shadow .3s ease, transform .3s ease;
}

.mission-full:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transform:translateY(-2px);
}

.mission-full em{
  font-style:italic;
  color:var(--deep);
  font-weight:500;
}

/* Opening decorative quote */
.mission-full::before{
  content:"\201C";
  position:absolute;
  top:8px;
  left:20px;
  font-size:4rem;
  line-height:1;
  color:rgba(56,90,58,.18);
  font-family:"Playfair Display",serif;
  pointer-events:none;
}

/* Closing decorative quote */
.mission-full::after{
  content:"\201D";
  position:absolute;
  bottom:-8px;
  right:20px;
  font-size:4rem;
  line-height:1;
  color:rgba(122,87,66,.15);
  font-family:"Playfair Display",serif;
  pointer-events:none;
}

.mission-full:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transform:translateY(-2px);
}

.mission-full em{
  font-style:italic;
  color:var(--deep);
  font-weight:500;
}

/* =========================================================
   ESTATE VIDEO SECTION
   ========================================================= */

.estate-video {
  padding: 80px 40px;
  background: linear-gradient(160deg, #f9f6f0 0%, #f7f3ed 50%, #f9f6f0 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle coffee texture overlay */
.estate-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(122, 87, 66, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(56, 90, 58, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.estate-video .container {
  position: relative;
  z-index: 1;
}

.estate-video h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: var(--deep);
  margin-bottom: 10px;
  font-weight: 700;
}

.estate-video p {
  color: #666;
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 854px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 4px 0 rgba(56, 90, 58, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.08);
  background: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 4px 0 rgba(56, 90, 58, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile responsive - 768px and below */
@media (max-width: 768px) {
  .estate-video {
    padding: 50px 0;
  }

  .estate-video .container {
    padding: 0 8px;
  }

  .estate-video h2 {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }

  .estate-video p {
    font-size: 0.95rem;
    margin-bottom: 28px;
  }

  .video-wrapper {
    width: 98%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 10px;
    margin: 0 auto;
  }
}

/* Tablet responsive */
@media (max-width: 960px) {
  .estate-video {
    padding: 60px 40px;
  }

  .estate-video h2 {
    font-size: 1.75rem;
  }

  .estate-video p {
    font-size: 1rem;
  }

  .video-wrapper {
    max-width: 100%;
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .estate-video {
    padding: 50px 0;
  }

  .estate-video .container {
    padding: 0 8px;
  }

  .estate-video h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .estate-video p {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .video-wrapper {
    width: 98%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 8px;
    box-shadow: 
      0 3px 0 rgba(56, 90, 58, 0.08),
      0 12px 32px rgba(0, 0, 0, 0.12),
      0 6px 20px rgba(0, 0, 0, 0.08);
  }
}

/* =========================================================
   PRODUCTS — Flip Cards
   ========================================================= */
.products{
  background:var(--beige);
  width:100%;max-width:100%;overflow-x:hidden;
}
.products h2{text-align:center;font-size:clamp(1.7rem,3.2vw,2.4rem);opacity:0;animation:fadeInUp .8s ease-out both}
.products .section-lead{text-align:center;opacity:0;animation:fadeIn .8s ease-out .2s both}

.product-grid{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(3,1fr);
  max-width:1040px;margin:40px auto 0;
}
@media(max-width:960px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:24px;max-width:680px}
}
@media(max-width:560px){
  .product-grid{grid-template-columns:1fr;gap:20px;max-width:400px}
}

/* --- Card wrapper (sets perspective) --- */
.card.flip{
  perspective:1400px;
  border-radius:18px;
  opacity:0;
  animation:scaleIn .6s ease-out both;
  /* height driven by front face */
}
.card.flip:nth-child(1){animation-delay:.25s}
.card.flip:nth-child(2){animation-delay:.38s}
.card.flip:nth-child(3){animation-delay:.50s}

/* --- Inner (rotates on hover / tap) --- */
.flip__inner{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  border-radius:18px;
}

/* Desktop: full card hover triggers flip */
@media(hover:hover) and (pointer:fine){
  .card.flip:hover .flip__inner{transform:rotateY(180deg)}
}

/* Mobile: JS class toggles flip */
.card.flip.is-flipped .flip__inner{transform:rotateY(180deg)}

/* --- Shared face styles --- */
.flip__face{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:18px;
  overflow:hidden;
}

/* ===== FRONT FACE ===== */
.flip__front{
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  transition:box-shadow .3s ease,transform .3s ease;
}
@media(hover:hover) and (pointer:fine){
  .card.flip:hover .flip__front{
    box-shadow:0 18px 44px rgba(0,0,0,.14),0 6px 16px rgba(0,0,0,.07);
  }
}

/* Image wrapper */
.flip__img-wrap{
  position:relative;
  overflow:hidden;
}
.flip__img-wrap img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.25,.8,.25,1),filter .4s ease;
}
@media(hover:hover) and (pointer:fine){
  .card.flip:hover .flip__img-wrap img{
    transform:scale(1.06);
    filter:brightness(1.03) saturate(1.08);
  }
}

/* "Hover for specs" hint */
.flip__hint{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(15,10,6,.72),transparent);
  color:rgba(255,255,255,.9);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-family:"Inter",system-ui,sans-serif;
  padding:18px 14px 10px;
  display:flex;align-items:center;gap:6px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
.flip__hint i{font-size:.75rem}
@media(hover:hover) and (pointer:fine){
  .card.flip:hover .flip__hint{opacity:1;transform:translateY(0)}
}

/* Front body */
.flip__front-body{
  padding:16px 18px 18px;
  border-top:1px solid rgba(0,0,0,.04);
}
.flip__front-body h3{
  font-family:"Playfair Display",serif;
  color:var(--deep);font-size:1.25rem;margin:0 0 4px;
}
.flip__front-sub{
  font-size:.82rem;color:var(--muted);margin:0 0 10px;line-height:1.4;
}
.flip__front-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  transition:gap .2s ease,color .2s ease;
}
.flip__front-link:hover{gap:8px;color:var(--deep)}

/* ===== BACK FACE ===== */
.flip__back{
  position:absolute;inset:0;
  transform:rotateY(180deg);
  background:linear-gradient(145deg, #243a2a 0%, #385a3a 55%, #2e4a30 100%);
  padding:20px 20px 18px;
  display:flex;flex-direction:column;
  overflow:hidden; /* nothing escapes the card boundary */
  box-shadow:0 10px 36px rgba(0,0,0,.22);
}

/* Back header */
.flip__back-header{
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.flip__back-icon{
  width:42px;height:42px;flex-shrink:0;
  border-radius:11px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.flip__back-icon i{font-size:1.1rem;color:rgba(255,255,255,.9)}
.flip__back-header h3{
  color:#fff;font-family:"Playfair Display",serif;
  font-size:1.15rem;margin:0 0 3px;
}
.flip__back-badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.85);
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;
  font-family:"Inter",system-ui,sans-serif;
}

/* Spec rows */
.flip__specs{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:6px;
  flex:1 1 0;   /* grow AND shrink, baseline 0 */
  min-height:0; /* critical: allows flex item to shrink below content size */
  overflow:hidden;
}
.flip__specs li{
  display:flex;align-items:baseline;gap:8px;
  font-size:.8rem;line-height:1.35;
  flex-shrink:1; /* participate in shrink if needed */
}
.spec-label{
  flex-shrink:0;
  width:78px;
  color:rgba(255,255,255,.58);
  font-weight:600;letter-spacing:.02em;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.73rem;
}
.spec-val{
  color:rgba(255,255,255,.92);
  font-weight:500;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.8rem;
}

/* Back CTA */
.flip__back-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;    /* never compress the button */
  margin-top:auto;  /* consume remaining space, pushes button to bottom */
  padding:11px 0;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  color:#fff;
  font-size:.83rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-family:"Inter",system-ui,sans-serif;
  text-decoration:none;
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.flip__back-cta i{font-size:.78rem;transition:transform .22s ease}
.flip__back-cta:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.45);
  transform:translateY(-2px);
  color:#fff;
  opacity:1;
}
.flip__back-cta:hover i{transform:translateX(4px)}

/* Hint text visibility */
.hint-mobile{display:none}
.hint-desktop{display:inline}
@media(max-width:980px){
  .hint-mobile{display:inline}
  .hint-desktop{display:none}
  /* Always show hint on touch devices */
  .flip__hint{
    opacity:1;transform:translateY(0);
    background:linear-gradient(to top,rgba(15,10,6,.65),transparent);
  }
  /* Mobile card layout tweaks */
  .flip__front-body{padding:14px 16px 16px}
  .spec-label{width:72px}
  .flip__back{padding:18px 16px 16px}
}

/* ===== PHOTO GALLERY ===== */
.gallery{
  background:#faf7f2;
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:100%;
}
.gallery::before{
  content:"";
  position:absolute;
  top:-100px;
  left:-100px;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(122,87,66,.03), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.gallery-title{
  text-align:center;
  font-size:clamp(1.8rem,4vw,2.5rem);
  margin-bottom:12px;
  opacity:0;
  animation:fadeInUp .8s ease-out both;
}
.gallery .section-lead{
  text-align:center;
  opacity:0;
  animation:fadeIn .8s ease-out .2s both;
  font-weight:500;
  color:var(--ink);
}

/* Gallery Tabs */
.gallery-tabs{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:32px 0 40px;
  flex-wrap:wrap;
}
.gallery-tab{
  background:rgba(255,255,255,.7);
  border:2px solid rgba(56,90,58,.15);
  color:var(--deep);
  padding:12px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:all .3s ease;
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0;
  animation:scaleIn .5s ease-out both;
}
.gallery-tab:nth-child(1){animation-delay:.3s}
.gallery-tab:nth-child(2){animation-delay:.4s}
.gallery-tab:nth-child(3){animation-delay:.5s}
.gallery-tab i{
  font-size:1.1rem;
  transition:transform .3s ease;
}
.gallery-tab:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  border-color:rgba(56,90,58,.3);
}
.gallery-tab:hover i{
  transform:scale(1.2) rotate(-5deg);
}
.gallery-tab.active{
  background:linear-gradient(135deg, var(--accent), #4d9b54);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 6px 18px rgba(56,90,58,.25);
}
.gallery-tab.active i{
  animation:float 2s ease-in-out infinite;
}

/* Gallery Grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  margin-top:40px;
  width:100%;
  max-width:100%;
}
@media (max-width:1200px){
  .gallery-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
}
@media (max-width:768px){
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
}
@media (max-width:640px){
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
  /* 5. Subtle zoom on tap for touch devices */
  .gallery-item:active .gallery-image img{
    transform:scale(1.04);
  }
}

/* Gallery Items - Premium Card Design */
.gallery-item{
  display:flex;
  flex-direction:column;
  opacity:0;
  animation:fadeInUp .6s ease-out both;
  transition:transform .3s ease;
}
.gallery-item:nth-child(1){animation-delay:.1s}
.gallery-item:nth-child(2){animation-delay:.2s}
.gallery-item:nth-child(3){animation-delay:.3s}
.gallery-item:nth-child(4){animation-delay:.4s}
.gallery-item:nth-child(5){animation-delay:.5s}
.gallery-item:nth-child(6){animation-delay:.6s}
.gallery-item:nth-child(7){animation-delay:.7s}
.gallery-item:nth-child(8){animation-delay:.8s}

/* Gallery Image Container */
.gallery-image{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.06),
             0 2px 4px rgba(0,0,0,.04);
  transition:transform .4s cubic-bezier(.25,.8,.25,1),
             box-shadow .4s ease;
  margin-bottom:16px;
}
.gallery-image::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.04);
  pointer-events:none;
}
.gallery-item:hover .gallery-image{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,.12),
             0 4px 8px rgba(0,0,0,.06);
}
.gallery-image img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.25,.8,.25,1),
             filter .4s ease;
}
.gallery-item:hover .gallery-image img{
  transform:scale(1.05);
  filter:brightness(1.02) saturate(1.05);
}

/* Mobile gallery-image adjustments */
@media (max-width:768px){
  .gallery-image{
    margin-bottom:12px;
    border-radius:14px;
  }
}
@media (max-width:640px){
  .gallery-grid{
    gap:18px;
  }
  .gallery-image{
    margin-bottom:10px;
    border-radius:12px;
  }
}

/* Mobile adjustments */
@media (max-width:768px){
  .gallery-tabs{
    gap:12px;
    margin:24px 0 32px;
  }
  .gallery-tab{
    padding:10px 20px;
    font-size:.95rem;
  }
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
}

/* ===== WHY CHOOSE ===== */
.why{
  position:relative;padding:70px 0;
  background:#f5efe6 url('https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Home%20Page%20Background%20Image.webp') center/cover fixed;
  isolation:isolate;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.why::before{content:"";position:absolute;inset:0;background:rgba(245,240,233,.88);z-index:-1}
.why .kicker{text-align:center;letter-spacing:.22em;font-weight:700;font-size:.8rem;color:#7a5742;margin:-6px 0 6px;opacity:0;animation:fadeIn .8s ease-out both}
.why-title{text-align:center;font-family:"Playfair Display",serif;color:#1b1f1a;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0;opacity:0;animation:fadeInUp .8s ease-out .1s both}
.why-sub{text-align:center;max-width:70ch;margin:10px auto 26px;color:#5a5f57;opacity:0;animation:fadeIn .8s ease-out .2s both}
.why-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px 42px}
.why-hero{margin:0;display:grid;place-items:center;opacity:0;animation:scaleIn .8s ease-out .3s both}
.why-hero img{
  width:min(540px,40vw);aspect-ratio:1/1;object-fit:cover;border-radius:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.18);border:6px solid rgba(255,255,255,.75);
  transition:transform .5s cubic-bezier(.25,.8,.25,1),box-shadow .5s ease;
  animation:leafDrift 7s ease-in-out 2s infinite;
}
.why-hero img:hover{transform:scale(1.04) rotate(1.2deg);box-shadow:0 26px 56px rgba(0,0,0,.24)}
.why-col{display:grid;gap:20px}
.feature{
  display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;
  opacity:0;animation:fadeInUp .6s ease-out both;
  transition:transform .3s ease;
}
.feature:hover{transform:translateX(5px)}
.why-col:first-child .feature:nth-child(1){animation-delay:.4s}
.why-col:first-child .feature:nth-child(2){animation-delay:.5s}
.why-col:first-child .feature:nth-child(3){animation-delay:.6s}
.why-col:last-child .feature:nth-child(1){animation-delay:.4s}
.why-col:last-child .feature:nth-child(2){animation-delay:.5s}
.why-col:last-child .feature:nth-child(3){animation-delay:.6s}
.feature i{
  font-size:1.25rem;color:#7a5742;background:#fff;border:1px solid #eadfce;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .35s cubic-bezier(.25,.8,.25,1),box-shadow .35s ease,background .25s ease,color .25s ease;
}
.feature:hover i{
  transform:translateY(-4px) scale(1.15) rotate(-6deg);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  background:#f5efe7;
  color:#385a3a;
}
.feature h4{margin:.1rem 0 .25rem;font-family:"Playfair Display",serif;color:#2b2f28;font-size:1.15rem}
.feature p{margin:0;color:#5a5f57}
@media (max-width:980px){
  .why-grid{grid-template-columns:1fr;gap:22px}
  .why-hero img{width:min(520px,88vw);aspect-ratio:auto}
}

/* ===== Quality & Reach ===== */
.compliance-badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.c-badge{
  display:inline-flex;align-items:center;gap:6px;background:#eef4ee;
  border:1px solid #dbe6dc;color:#21402a;padding:6px 10px;border-radius:999px;
  font-weight:600;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.c-badge:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.1);background:#daeeda}
.c-badge em{font-style:normal;opacity:.9}
.quality{
  background:
    linear-gradient(135deg, #fffefb 0%, #f5ede2 40%, #eef4ec 75%, #fffefb 100%);
}
.quality .pill-list{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 0}
.pill{
  background:#e8f0ea;border:1px solid #d5e3d9;padding:8px 12px;border-radius:999px;
  font-weight:600;color:var(--deep);
  transition:transform .2s ease,background .2s ease, box-shadow .2s ease;
}
.pill:hover{transform:translateY(-3px);background:#dae7dd;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.timeline{display:grid;gap:16px}
.t-item{
  display:flex;gap:12px;background:#fff;border-radius:14px;padding:14px;
  box-shadow:var(--shadow);opacity:0;animation:slideInLeft .6s ease-out both;
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease;
}
.t-item:nth-child(1){animation-delay:.2s}
.t-item:nth-child(2){animation-delay:.3s}
.t-item:nth-child(3){animation-delay:.4s}
.t-item:nth-child(4){animation-delay:.5s}
.t-item:hover{transform:translateX(10px);box-shadow:0 14px 36px rgba(0,0,0,.13)}
.t-item .dot{width:10px;height:10px;background:var(--accent);border-radius:50%;margin-top:8px;transition:transform .25s ease;flex-shrink:0}
.t-item:hover .dot{transform:scale(1.5)}

@media (max-width:980px){
  .t-item .dot{width:10px;height:10px}
  .t-item:hover .dot{transform:none}
}

.trusted-by{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;padding:12px 14px;
  border:1px solid #e7e1d8;background:#fbf8f1;border-radius:14px;
  opacity:0;animation:fadeInUp .8s ease-out .6s both;
  transition:box-shadow .3s ease;
}
.trusted-by:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.trusted-text{font-weight:600;color:#3a553b}
.doc-proof{display:flex;gap:12px;flex-wrap:wrap}
.doc-proof span{
  display:inline-flex;gap:8px;align-items:center;background:#fff;
  border:1px solid #e6e2da;border-radius:10px;padding:6px 10px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.doc-proof span:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08)}

/* ===== Reach dark section ===== */
.section--dark{
  position:relative;color:#f3ece6;
  background:
    linear-gradient(180deg, rgba(30,22,15,.88), rgba(15,10,6,.94)),
    url('https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Home%20Page%20Background%20Image.webp') center/cover fixed;
}
.section--dark h2{color:#fff;opacity:0;animation:fadeInUp .8s ease-out both}
.section--dark p,.section--dark li,.section--dark span{color:#e9e1db}
.section--dark .section-lead{opacity:0;animation:fadeIn .8s ease-out .2s both}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0 24px}
.chip{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;opacity:0;animation:scaleIn .5s ease-out both;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.chip:nth-child(1){animation-delay:.3s}
.chip:nth-child(2){animation-delay:.35s}
.chip:nth-child(3){animation-delay:.4s}
.chip:nth-child(4){animation-delay:.45s}
.chip:nth-child(5){animation-delay:.5s}
.chip:nth-child(6){animation-delay:.55s}
.chip:hover{transform:translateY(-4px);background:rgba(255,255,255,.18);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.features{grid-template-columns:1fr}}
.f-item{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:22px;text-align:center;
  opacity:0;animation:fadeInUp .6s ease-out both;
  transition:transform .35s cubic-bezier(.25,.8,.25,1),background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.f-item:nth-child(1){animation-delay:.6s}
.f-item:nth-child(2){animation-delay:.7s}
.f-item:nth-child(3){animation-delay:.8s}
.f-item:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.3);
}
.f-item i{
  font-size:1.6rem;margin-bottom:8px;color:#fff;
  transition:transform .35s cubic-bezier(.25,.8,.25,1);
  display:inline-block;
}
.f-item:hover i{transform:scale(1.2) rotate(-8deg)}
.f-item h4{color:#fff;margin:6px 0}

/* ===== Footer ===== */
.site-footer{background:#f7f4ef;padding-top:36px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.2fr;gap:28px}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr}}
.foot-brand img{height:40px;margin-bottom:10px}
.tagline{max-width:46ch;margin:6px 0 14px}
.foot-heading{font-family:"Inter",system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:1rem;color:var(--deep);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{margin:10px 0;font-size:.92rem;line-height:1.6}
.link-list a{transition:transform .2s ease, color .2s ease}
.link-list a:hover{transform:translateX(4px)}
.social a{
  display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;
  background:#fff;border-radius:50%;box-shadow:var(--shadow);margin-right:6px;opacity:.95;
  transition:transform .25s cubic-bezier(.25,.8,.25,1),opacity .2s ease,box-shadow .25s ease;
}
.social a:hover{opacity:1;transform:translateY(-4px) scale(1.12);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.contact-links i{color:var(--accent);margin-right:8px;transition:transform .2s ease}
.contact-links li:hover i{transform:scale(1.2) rotate(-5deg)}
.contact-links a{color:var(--ink);text-decoration:underline;transition:color .2s ease}
.contact-links a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:center;padding:14px 0}
.legal-link{color:#2a3b2a;text-decoration:underline}

/* Lead form */
.lead-form{display:grid;gap:12px}
.lead-form label{display:grid;gap:5px;font-size:.88rem}
.lead-form input,.lead-form textarea{
  border:1px solid #d7d2c9;border-radius:8px;padding:11px 13px;min-height:42px;background:#fff;outline:none;font-size:.9rem;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.lead-form input:focus,.lead-form textarea:focus{
  border-color:#99b19d;
  box-shadow:0 0 0 4px rgba(56,90,58,.12);
}

/* Accessibility */
:where(a,button,[role="button"],input,textarea):focus-visible{
  outline:3px solid rgba(56,90,58,.45);
  outline-offset:3px;border-radius:8px;
}

/* =========================
   PRODUCTS grid
   ========================= */
.product-grid{display:grid;gap:32px;grid-template-columns:1fr;justify-items:center;place-items:center}
@media (min-width:700px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (min-width:1100px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto;gap:40px;justify-content:center}}
@media (min-width:1400px){.container{max-width:1400px}}

/* =========================
   Footer background image
   ========================= */
.site-footer{position:relative;isolation:isolate;color:#f4efe7;background:#201811}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Home%20Page%20Background%20Image.webp") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05);
}
.site-footer::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,.72);
}
.footer-grid,.foot-bottom{background:transparent}
.site-footer a{color:#fff;opacity:.95}
.site-footer a:hover{opacity:1;text-decoration:underline}
.site-footer .foot-heading{color:#fff}
.site-footer .btn{background:#3d6a42;color:#fff !important;border:0}
.site-footer .btn.btn--ghost{background:transparent;border:2px solid #e8e2d8;color:#fff !important}
.site-footer .social a{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff}
.site-footer .social a:hover{background:rgba(255,255,255,.25);color:#fff}
.site-footer .lead-form input,.site-footer .lead-form textarea{background:rgba(255,255,255,.92);color:#1a1a1a;border:1px solid rgba(255,255,255,.6)}
.site-footer .lead-form input::placeholder,.site-footer .lead-form textarea::placeholder{color:#757575}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18);color:#eee}
.foot-bottom .legal-link{color:#fff}

/* =========================================================
   MOBILE-ONLY (≤980px) — all requested fixes
   ========================================================= */
@media (max-width:980px){

  /* Hamburger on right and clickable; morph to X when open */
  .hamburger{
    display:block;position:absolute;right:16px;left:auto;top:20px;z-index:140;cursor:pointer;
    width:28px;height:22px;display:grid;place-items:center;
  }
  #nav-toggle:checked + .hamburger span{transform:rotate(45deg)}
  #nav-toggle:checked + .hamburger span:before{transform:rotate(90deg);top:0}
  #nav-toggle:checked + .hamburger span:after{opacity:0}
  #nav-toggle:checked ~ .mobile-drawer{ display:flex; }

  /* Logo smaller, shifted left */
  .brand--center{
    width:74px;height:74px;transform:translateY(14px);margin-left:12px;margin-right:auto;margin-top:6px;z-index:90;
  }
  .brand--center img{height:44px}

  /* Hide desktop navs; use sliding drawer */
  .nav--left,.nav--right{display:none !important;}

  .mobile-drawer{
    position:fixed;top:var(--header-h);bottom:0;right:0;left:auto;
    width:min(86vw,360px);
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.25,.8,.25,1);
    display:flex;flex-direction:column;gap:6px;padding:16px 14px;
    background:rgba(0,0,0,.94);backdrop-filter:saturate(1.05) blur(2px);
    z-index:130;overflow:auto;
    box-shadow:-12px 0 22px rgba(0,0,0,.25);
    max-width:86vw;
  }
  #nav-toggle:checked ~ .mobile-drawer{transform:translateX(0)}
  .drawer-backdrop{
    position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.35);
    opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:120;
    width:100%;max-width:100%;
  }
  #nav-toggle:checked ~ .drawer-backdrop{opacity:1;pointer-events:auto}

  .mobile-drawer a{
    color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
    padding:12px 10px;border-radius:10px;text-decoration:none;
  }
  .mobile-drawer a:active,.mobile-drawer a:focus{outline:2px solid rgba(255,255,255,.25);outline-offset:3px}
  .mobile-drawer a.active{
    background:rgba(255,255,255,.12);
    position:relative;
  }
  .mobile-drawer a.active::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:60%;
    background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.95), rgba(255,255,255,0.7));
    border-radius:0 2px 2px 0;
  }

  .mobile-drawer .nav-item{width:100%}
  .mobile-drawer .nav-item > a{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mobile-drawer .nav-item .menu{
    position:static;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:10px;padding:6px;margin:6px 2px 4px;display:none;
  }
  .mobile-drawer .nav-item.open .menu{display:block}
  .mobile-drawer .menu a{
    font-weight:600;font-size:.95rem;text-transform:none;
    padding:10px 12px 10px 14px;border-radius:8px;display:block;
  }
  .mobile-drawer .menu a::before{content:"•";margin-right:8px;opacity:.75}
  .mobile-drawer .menu a:hover{background:rgba(255,255,255,.10)}
  .mobile-drawer .nav-item.dropdown i.fa-caret-down{transition:transform .2s ease}
  .mobile-drawer .nav-item.dropdown.open i.fa-caret-down{transform:rotate(180deg)}

  .site-header.style-bar{z-index:150}
  .hero{position:relative;z-index:1}
  .hero__video{object-position:40% 18%}

  .card.flip:hover .flip__inner{transform:none}
  .card.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
}

/* Footer: add space above social icons */
.site-footer .social{margin-top:14px}
@media (max-width:980px){
  .site-footer .social{margin-top:16px}
}

/* Footer text color tweaks */
.site-footer .foot-brand .tagline{color:#a0a09b}
.site-footer .foot-heading + .link-list,
.site-footer .foot-heading + .link-list li,
.site-footer .foot-heading + .link-list li strong{color:#a0a09b}
.site-footer .lead-form label span{color:#a0a09b}
.site-footer .footer-grid .link-list a{color:#a0a09b !important}
.site-footer .contact-links li{color:#a0a09b !important}
.site-footer .contact-links a{color:#d8d4ce !important}
.site-footer .contact-links a strong{color:#e8e4de;font-weight:600}
.site-footer .contact-links i{color:rgba(106,168,112,.9) !important}
.site-footer .muted.small{color:#a0a09b !important}


/* ===== Gallery View More Button ===== */
.gallery-view-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn--view-more {
  background: linear-gradient(135deg, var(--accent), #4d9b54);
  color: #fff !important;
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(56, 90, 58, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s ease,
              background 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn--view-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4d9b54, var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn--view-more:hover::before {
  opacity: 1;
}

.btn--view-more:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(56, 90, 58, 0.35);
}

.btn--view-more i {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 2;
}

.btn--view-more:hover i {
  transform: translateX(6px);
}

/* Remove the redundant span z-index rule since text is already above ::before */

@media (max-width: 640px) {
  .btn--view-more {
    padding: 13px 26px;
    font-size: .95rem;
    box-shadow: 0 6px 20px rgba(56,90,58,.32), 0 2px 8px rgba(0,0,0,.1);
  }
  
  .gallery-view-more {
    margin-top: 36px;
  }
}


/* =========================================================
   MOBILE OVERFLOW FIXES - Comprehensive
   ========================================================= */

@media (max-width: 980px) {
  /* Ensure all sections are contained */
  .section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Container padding adjustment */
  .container {
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
  }

  /* Hero adjustments */
  .hero__video {
    object-position: 40% 18%;
  }

  /* About section mobile */
  .about-grid {
    gap: 32px;
  }

  .about__copy {
    padding: 40px;
  }

  .about__image::before,
  .about__image::after {
    display: none;
  }

  /* Products grid mobile */
  .product-grid {
    gap: 24px;
    width: 100%;
  }

  /* Gallery mobile */
  .gallery-tabs {
    gap: 10px;
    padding: 0 20px;
  }

  .gallery-tab {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .gallery-grid {
    gap: 20px;
  }

  /* Why section mobile */
  .why {
    background-attachment: scroll;
    padding: 60px 0;
  }

  .why-grid {
    gap: 24px;
  }

  .why-hero img {
    width: min(420px, 85vw);
  }

  /* Footer mobile */
  .footer-grid {
    gap: 28px;
  }

  /* Lead form mobile */
  .lead-form input,
  .lead-form textarea {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* Extra small mobile fixes */
  .container {
    padding: 0 40px;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 0.95rem;
  }

  /* 1. Heading: stronger weight */
  .about-title {
    font-size: clamp(1.6rem, 7vw, 2rem);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--deep);
    color: var(--deep);
    font-weight: 800;
  }

  /* 6. Tighter gap between image and card */
  .about-grid {
    gap: 16px;
  }

  /* image first, copy second on mobile */
  .about__image {
    order: 1;
  }

  /* 4. Lighter padding inside card */
  .about__copy {
    order: 2;
    padding: 20px 18px;
  }

  /* 2. Better paragraph line-height */
  .about-intro {
    line-height: 1.85;
  }
  .about-points p {
    line-height: 1.55;
  }

  /* 3. Trust line: stronger green + weight */
  .about-trust-line {
    font-weight: 700;
    color: var(--accent);
    opacity: 1;
    font-size: .88rem;
  }
  .about-trust-line i {
    opacity: 1;
  }

  /* 1. Softer image border + shadow */
  .about__image img {
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  }

  /* 1. Tabs: single row, scroll if needed */
  .gallery-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px 4px;
    margin-left: 0;
    margin-right: 0;
    gap: 10px;
  }
  .gallery-tabs::-webkit-scrollbar { display: none; }

  /* 2. Lighter, more modern tab buttons */
  .gallery-tab {
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 3. Stronger active state */
  .gallery-tab.active {
    box-shadow: 0 4px 14px rgba(56,90,58,.35);
    border-color: var(--accent);
  }

  /* 4. More breathing room between images */
  .gallery-grid {
    gap: 14px;
  }

  .why-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .why {
    padding: 60px 0;
  }

  .feature h4 {
    font-size: 1rem;
  }

  .feature p {
    font-size: 0.9rem;
  }

  /* 1. Mission quote refinements */
  .mission-full em {
    color: var(--deep);
    font-weight: 600;
    line-height: 1.9;
    display: block;
  }
  .mission-full::before,
  .mission-full::after {
    color: rgba(56,90,58,.4);
  }

  /* 3. Video container: softer shadow + rounder corners */
  .video-wrapper {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 6px rgba(0,0,0,.05);
    border: 2px solid rgba(255,255,255,.12);
  }

  /* 4. Products subtitle */
  .products .section-lead {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    opacity: 1;
  }

  /* 3. Product card: softer shadow */
  .flip__front {
    box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.03);
  }

  /* 1. Badge: lighter, smaller */
  .card-badge {
    font-size: .58rem;
    padding: 3px 9px;
    letter-spacing: .06em;
    background: rgba(36,58,42,.78);
  }

  /* 2. Back CTA: lighter glass, tighter padding */
  .flip__back-cta {
    padding: 9px 0;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.2);
    font-size: .78rem;
  }

  /* 5. View full details arrow */
  .flip__front-link::after {
    content: "→";
    display: inline-block;
    transition: transform .2s ease;
  }
  .flip__front-link:hover::after {
    transform: translateX(3px);
  }

  /* 4. Export process: more gap + 7. title weight */
  .ep-title {
    font-weight: 800;
    font-size: clamp(1.55rem, 6.5vw, 1.9rem);
  }
  .process-grid {
    gap: 20px;
  }

  /* 6. Icon container: subtle depth shadow */
  .process-icon-wrap {
    box-shadow: 0 3px 10px rgba(56,90,58,.13), 0 1px 3px rgba(0,0,0,.06);
  }

  /* 7. Consistent section spacing */
  .section {
    padding: 56px 0;
  }
  .estate-video {
    padding: 48px 0;
  }

  /* ── Sourcing & Quality: mobile refinements ── */

  /* 1. Paragraph readability */
  .quality p {
    line-height: 1.75;
    font-size: .92rem;
  }

  /* 2. Badge chip spacing */
  .compliance-badges {
    gap: 8px;
    row-gap: 8px;
    margin: 12px 0 16px;
  }
  .quality .pill-list {
    gap: 8px;
    row-gap: 8px;
  }

  /* 3. Smaller icon inside chips */
  .c-badge i,
  .pill i {
    font-size: .72rem;
  }
  .c-badge {
    font-size: .78rem;
    padding: 5px 9px;
  }
  .pill {
    font-size: .78rem;
    padding: 6px 10px;
  }

  /* 5. Divider between badge area and process cards */
  .timeline {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(56,90,58,.1);
  }

  /* 2 & 5. Process cards: compact padding + soft shadow */
  .t-item {
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.03);
  }
  /* 3. Stronger card titles */
  .t-item h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 3px;
    letter-spacing: -.01em;
  }
  .t-item p {
    font-size: .82rem;
    line-height: 1.6;
    margin: 0;
  }

  /* Trust box: proper padding all around */
  .trusted-by {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
    padding: 16px 14px 14px;
    background: #fbf8f1;
    border: 1px solid rgba(56,90,58,.12);
    border-radius: 12px;
    box-shadow: none;
  }
  /* Trust statement: icon vertically aligned, spacing before buttons */
  .trusted-text {
    font-weight: 700;
    font-size: .93rem;
    display: block;
    color: #2e5230;
    margin-bottom: 12px;
  }
  .trusted-text i {
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
  .doc-proof {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .doc-proof span {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
  }
}

/* Prevent horizontal scroll globally */
@media (max-width: 980px) {
  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  * {
    max-width: 100%;
  }

  /* Fix any pseudo-elements causing overflow */
  *::before,
  *::after {
    max-width: 100%;
  }
}

/* =========================================================
   HERO: Secondary CTA + Scroll Indicator
   ========================================================= */
.hero__cta{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}

.btn--outline-hero{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  min-width:168px;
  justify-content:center;
  font-size:1.08rem;font-weight:700;letter-spacing:.05em;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.75);
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .3s ease,box-shadow .3s ease;
}
.btn--outline-hero:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.85);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  color:#fff;
  opacity:1;
}
.btn--outline-hero:active{
  transform:translateY(0);
  box-shadow:none;
}

.hero__scroll-indicator{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:rgba(255,255,255,.65);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  animation:fadeInUp .8s ease-out 2s both;
  z-index:2;
}
.hero__scroll-indicator svg{animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}
@media(max-width:980px){
  .btn--outline-hero{padding:12px 26px;font-size:1rem}
  .hero__scroll-indicator{display:none}
}

/* =========================================================
   PRODUCT CARDS: Badge
   ========================================================= */
.image-hover-area{position:relative}
.card-badge{
  position:absolute;top:14px;left:14px;z-index:3;
  background:rgba(36,58,42,.88);
  color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}

/* =========================================================
   GALLERY: Hover Overlay Captions
   ========================================================= */
.gallery-image{position:relative}
.gallery-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:40px 16px 16px;
  background:linear-gradient(to top,rgba(15,10,6,.85) 0%,rgba(15,10,6,.38) 65%,transparent 100%);
  border-radius:0 0 16px 16px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .32s ease,transform .32s ease;
  pointer-events:none;
}
.gallery-item:hover .gallery-caption{
  opacity:1;
  transform:translateY(0);
}
.gallery-caption h4{
  color:#fff;font-size:1rem;font-weight:700;
  margin:0 0 4px;letter-spacing:.01em;line-height:1.3;
  font-family:"Playfair Display",serif;
}
.gallery-caption p{
  color:rgba(255,255,255,.82);font-size:.8rem;
  margin:0;line-height:1.45;
  font-family:"Inter",system-ui,sans-serif;font-weight:400;
}
@media(max-width:768px){
  .gallery-caption{padding:30px 12px 12px}
  .gallery-caption h4{font-size:.82rem}
  .gallery-caption p{font-size:.72rem}
}

/* =========================================================
   GLOBAL REACH: Enhanced glassmorphism on f-item
   ========================================================= */
.f-item{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
}

/* =========================================================
   FOOTER: Trust Badges Strip
   ========================================================= */
.foot-trust{
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0;
  display:flex;justify-content:center;align-items:center;
  gap:30px;flex-wrap:wrap;
}
.foot-trust-item{
  display:flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.65);
  font-size:.81rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.foot-trust-item i{color:rgba(106,168,112,.9);font-size:.92rem}
@media(max-width:640px){
  .foot-trust{gap:16px;padding:14px 0}
  .foot-trust-item{font-size:.72rem}
}

/* =========================================================
   SCROLL-REVEAL (IntersectionObserver)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.25,.8,.25,1);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   EXPORT PROCESS SECTION
   ========================================================= */
.export-process{
  background:
    linear-gradient(135deg,#fffefb 0%,#f6f0e6 50%,#eef4ec 100%);
  position:relative;overflow:hidden;
}
.export-process::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23385a3a' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.ep-title{
  text-align:center;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:6px;
}
.export-process .section-lead{text-align:center;max-width:66ch;margin:0 auto 3rem}
.export-process .kicker{text-align:center}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.process-grid::before{
  content:"";
  position:absolute;
  top:52px;left:calc(12.5% + 22px);right:calc(12.5% + 22px);
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,90,58,.2) 20%,rgba(56,90,58,.2) 80%,transparent);
  z-index:0;
}

.process-step{
  position:relative;z-index:1;
  background:#fff;
  border:1px solid rgba(56,90,58,.1);
  border-radius:18px;
  padding:28px 22px 24px;
  text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.04);
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease,border-color .3s ease;
}
.process-step:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 36px rgba(0,0,0,.1),0 4px 12px rgba(56,90,58,.08);
  border-color:rgba(56,90,58,.22);
}
.process-num{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;
  color:rgba(56,90,58,.55);text-transform:uppercase;margin-bottom:14px;
  font-family:"Inter",system-ui,sans-serif;
}
.process-icon-wrap{
  width:52px;height:52px;margin:0 auto 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(56,90,58,.1),rgba(56,90,58,.06));
  border:1px solid rgba(56,90,58,.16);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,transform .3s ease;
}
.process-step:hover .process-icon-wrap{
  background:linear-gradient(135deg,rgba(56,90,58,.18),rgba(56,90,58,.1));
  transform:scale(1.1) rotate(-4deg);
}
.process-icon-wrap i{font-size:1.3rem;color:var(--accent)}
.process-step h4{
  font-family:"Playfair Display",serif;color:var(--deep);
  font-size:1.05rem;margin:0 0 8px;
}
.process-step p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.6}

@media(max-width:980px){
  .process-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .process-grid::before{display:none}
}
@media(max-width:520px){
  .process-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  /* Two-row grid layout:
     Row 1 → [num] [icon] [h4]
     Row 2 → [description spans full width] */
  /* 4. Softer card shadow */
  .process-step{
    display:grid;
    grid-template-columns:auto 38px 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    row-gap:10px;
    align-items:center;
    padding:18px 16px;
    text-align:left;
    box-shadow:0 2px 10px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);
  }
  /* 1. Step number: slightly clearer, not dominant */
  .process-num{
    grid-column:1;grid-row:1;
    margin:0;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.12em;
    color:rgba(56,90,58,.7);
  }
  /* 2. Smaller icon container */
  .process-icon-wrap{
    grid-column:2;grid-row:1;
    width:38px;height:38px;
    border-radius:10px;
    margin:0;
  }
  .process-icon-wrap i{
    font-size:1.1rem;
  }
  .process-step h4{
    grid-column:3;grid-row:1;
    margin:0;
    font-size:.96rem;
    line-height:1.3;
  }
  /* 5. Improved description line-height */
  .process-step p{
    grid-column:1 / -1;grid-row:2;
    margin:0;
    font-size:.84rem;
    line-height:1.7;
  }
  /* 6. Consistent card gap */
  .process-grid{
    gap:14px;
  }
}

/* =========================================================
   EXPORT COMPLIANCE SECTION
   ========================================================= */
.export-compliance{
  background:#fdfbf7;
  border-top:1px solid rgba(56,90,58,.08);
  border-bottom:1px solid rgba(56,90,58,.08);
}
.ec-title{text-align:center;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:6px}
.export-compliance .section-lead{text-align:center;max-width:66ch;margin:0 auto 3rem}
.export-compliance .kicker{text-align:center}

.comp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:2.5rem;
}
.comp-card{
  background:#fff;
  border:1px solid rgba(56,90,58,.12);
  border-radius:16px;
  padding:26px 20px 22px;
  text-align:center;
  box-shadow:0 3px 14px rgba(0,0,0,.05);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.comp-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(0,0,0,.09);
  border-color:rgba(56,90,58,.26);
}
.comp-card__icon{
  width:54px;height:54px;margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg,#e8f0ea,#d4e6d6);
  border:2px solid rgba(56,90,58,.15);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease,background .3s ease;
}
.comp-card:hover .comp-card__icon{
  transform:scale(1.12) rotate(-5deg);
  background:linear-gradient(135deg,#d4e6d6,#bddbc1);
}
.comp-card__icon i{font-size:1.3rem;color:var(--accent)}
.comp-card h4{
  font-family:"Playfair Display",serif;color:var(--deep);
  font-size:1rem;margin:0 0 7px;
}
.comp-card p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.55}

.compliance-footnote{
  text-align:center;
  background:linear-gradient(135deg,rgba(56,90,58,.07),rgba(56,90,58,.04));
  border:1px solid rgba(56,90,58,.14);
  border-radius:12px;
  padding:16px 24px;
  font-size:.88rem;color:var(--deep);
  max-width:80ch;margin:0 auto;
  line-height:1.65;
}
.compliance-footnote i{color:var(--accent);margin-right:6px}

.compliance-cta{
  text-align:center;
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.compliance-cta__note{
  font-size:.88rem;
  color:var(--muted);
  margin:0;
}
.compliance-cta__btn{
  padding:14px 32px;
  font-size:1rem;
}
.compliance-cta__btn i{margin-left:8px;transition:transform .2s ease}
.compliance-cta__btn:hover i{transform:translateX(4px)}

@media(max-width:980px){
  .comp-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:640px){
  /* 2. Heading: allow single line where space permits */
  .ec-title{
    font-size:clamp(1.4rem,6vw,1.9rem);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* 7. Kicker: refined letter spacing */
  .export-compliance .kicker{
    letter-spacing:.28em;
    font-size:.72rem;
  }
  /* 5. Softer card shadow */
  .comp-card{
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
}
@media(max-width:480px){
  .comp-grid{grid-template-columns:1fr}
  /* Two-row grid: [icon | title] on row 1, description full-width on row 2 */
  .comp-card{
    /* 3. More internal breathing room */
    padding:20px 18px;
    display:grid;
    grid-template-columns:36px 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    row-gap:8px;
    /* 4. Vertically centred header row */
    align-items:center;
    text-align:left;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .comp-card__icon{
    grid-column:1;grid-row:1;
    width:36px;height:36px;
    margin:0;
    align-self:center;
  }
  .comp-card__icon i{
    font-size:1.05rem;
  }
  .comp-card h4{
    grid-column:2;grid-row:1;
    margin:0;
    font-size:.95rem;
    line-height:1.3;
    align-self:center;
  }
  .comp-card p{
    grid-column:1 / -1;grid-row:2;
    margin:0;
    line-height:1.6;
  }
}

/* =========================================================
   REQUEST SAMPLES SECTION
   ========================================================= */
.samples-cta{
  position:relative;isolation:isolate;
  padding:80px 0;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(36,58,42,.96) 0%,rgba(27,43,29,.98) 100%),
    url('https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Home%20Page%20Background%20Image.webp') center/cover no-repeat fixed;
}
.samples-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 80% 50%,rgba(77,155,84,.12) 0%,transparent 65%);
}
.samples-inner{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
}
.samples-text .kicker{color:rgba(255,255,255,.55)}
.samples-text h2{
  color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);
  margin-bottom:.7rem;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.samples-text p{
  color:rgba(255,255,255,.8);font-size:1rem;line-height:1.7;
  max-width:56ch;margin-bottom:1.2rem;
}
.samples-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:10px;
}
.samples-list li{
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.88);font-size:.9rem;font-weight:500;
}
.samples-list li i{
  color:rgba(106,196,114,.9);font-size:.9rem;flex-shrink:0;
}
.samples-actions{
  display:flex;flex-direction:column;gap:14px;align-items:stretch;min-width:220px;
}
.samples-btn-primary{
  background:linear-gradient(135deg,#4d9b54,var(--accent));
  border:0;color:#fff !important;
  box-shadow:0 8px 28px rgba(56,90,58,.4);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1rem;
}
.samples-btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(56,90,58,.5);
  opacity:1;
}
.samples-btn-wa{
  border:2px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1rem;background:transparent;
}
.samples-btn-wa:hover{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,255,255,.7) !important;
  transform:translateY(-3px);
  opacity:1;
}
.samples-btn-wa i{color:#25d366;font-size:1.15rem}

@media(max-width:860px){
  .samples-inner{grid-template-columns:1fr;gap:36px}
  .samples-actions{flex-direction:row;flex-wrap:wrap;min-width:auto}
  .samples-btn-primary,.samples-btn-wa{flex:1;min-width:180px}
}
@media(max-width:480px){
  .samples-cta{padding:60px 0}
  .samples-actions{flex-direction:column}
  .samples-btn-primary,.samples-btn-wa{width:100%}
}

/* =========================================================
   LIGHTBOX OVERLAY
   ========================================================= */
.lightbox-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(4,4,4,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  padding:16px 60px;
}
.lightbox-overlay.open{opacity:1;pointer-events:auto}

/* Image + caption wrapper — animates in together */
.lb-content{
  display:flex;flex-direction:column;align-items:center;
  max-width:min(90vw,1100px);
  transform:scale(.93) translateY(14px);
  transition:transform .3s cubic-bezier(.25,.8,.25,1);
}
.lightbox-overlay.open .lb-content{transform:scale(1) translateY(0)}

.lightbox-img{
  max-width:100%;
  max-height:78vh;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
  display:block;
  object-fit:contain;
}

/* Caption naturally below the image */
.lightbox-caption{
  margin:14px 0 0;
  text-align:center;
  padding:10px 22px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  max-width:min(90%,640px);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lb-cap-title{
  display:block;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  font-family:"Playfair Display",serif;
  letter-spacing:.01em;
}
.lb-cap-desc{
  display:block;
  color:rgba(255,255,255,.75);
  font-size:.8rem;
  font-weight:400;
  line-height:1.5;
  font-family:"Inter",system-ui,sans-serif;
}

/* Close button — large, circular, easy to tap */
.lightbox-close{
  position:absolute;top:14px;right:14px;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.28);
  color:#fff;font-size:1.25rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
  z-index:1;
}
.lightbox-close:hover{background:rgba(255,255,255,.26);transform:scale(1.1)}

/* Prev / Next arrows */
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.22);
  color:#fff;font-size:1.15rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
  z-index:1;
}
.lightbox-prev{left:14px}
.lightbox-next{right:14px}
.lightbox-prev:hover{background:rgba(255,255,255,.24);transform:translateY(-50%) scale(1.08)}
.lightbox-next:hover{background:rgba(255,255,255,.24);transform:translateY(-50%) scale(1.08)}

@media(max-width:640px){
  .lightbox-overlay{padding:12px 52px}
  .lightbox-prev{left:6px;width:44px;height:44px;font-size:1rem}
  .lightbox-next{right:6px;width:44px;height:44px;font-size:1rem}
  .lightbox-close{top:10px;right:10px;width:46px;height:46px;font-size:1.15rem}
  .lightbox-img{max-height:70vh;border-radius:10px}
  .lightbox-caption{font-size:.82rem;margin-top:10px}
}

/* =========================================================
   VIDEO SECTION: caption + frame improvements
   ========================================================= */
.estate-video .video-caption{
  text-align:center;
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  font-style:italic;
  letter-spacing:.01em;
  margin-top:14px;
}

/* =========================================================
   QUALITY SECTION: improved line-height and badge hover
   ========================================================= */
.quality p{line-height:1.85}
.quality h2{margin-bottom:1rem}
.c-badge{
  font-size:.82rem;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.c-badge:hover{
  border-color:rgba(56,90,58,.45);
  box-shadow:0 6px 18px rgba(56,90,58,.15);
}

/* =========================================================
   FOOTER: quote button prominence
   ========================================================= */
.site-footer .btn:not(.btn--ghost){
  background:linear-gradient(135deg,#5aac60 0%,#3d7a44 60%,var(--accent) 100%);
  box-shadow:0 4px 16px rgba(56,90,58,.40),0 0 0 1px rgba(255,255,255,.08);
}
.site-footer .btn:not(.btn--ghost):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(56,90,58,.55),0 0 0 1px rgba(255,255,255,.12);
  background:linear-gradient(135deg,#64bc6a 0%,#438048 60%,#3a6640 100%);
}

/* =========================================================
   FOOTER: link hover effects
   ========================================================= */
.site-footer .link-list a{
  transition:color .22s ease, transform .22s ease;
  position:relative;
  display:inline-block;
}
.site-footer .link-list a:hover{
  color:rgba(106,196,114,.95) !important;
  transform:translateX(5px);
  text-decoration:none !important;
  opacity:1;
}

/* =========================================================
   SAMPLES ↔ FOOTER DIVIDER
   ========================================================= */
.samples-footer-divider{
  height:4px;
  background:linear-gradient(90deg,transparent 0%,rgba(56,90,58,.25) 20%,rgba(56,90,58,.45) 50%,rgba(56,90,58,.25) 80%,transparent 100%);
}

/* =========================================================
   COMPLIANCE LIST (footer column with icons)
   ========================================================= */
.compliance-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  line-height:1.7;
}
.compliance-list li i{
  color:rgba(106,168,112,.9);
  font-size:.88rem;
  margin-top:.22em;
  flex-shrink:0;
  width:15px;
  text-align:center;
}
.compliance-list li span{font-size:.88rem;line-height:1.7}
.compliance-list li strong{color:#d8d4ce}
.avail{color:rgba(106,196,114,.95);font-weight:600}

/* =========================================================
   CONTACT ITEMS (phone / email / location highlight)
   ========================================================= */
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 13px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  margin:7px 0 !important;
  transition:background .2s ease,border-color .2s ease;
}
.contact-item:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
.contact-item i{
  font-size:1rem;
  flex-shrink:0;
  margin-top:.15em;
}
.contact-item--phone i{color:rgba(106,196,114,.9)}
.contact-item--email i{color:rgba(132,160,240,.9)}
.contact-item--location i{color:rgba(240,160,100,.9)}

/* =========================================================
   FLOATING WHATSAPP BUTTON
   ========================================================= */
.wa-float{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:8000;
  width:56px;
  height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:transform .22s cubic-bezier(.25,.8,.25,1),box-shadow .22s ease;
  text-decoration:none !important;
  opacity:1 !important;
}
.wa-float:hover{
  transform:scale(1.1) translateY(-3px);
  box-shadow:0 8px 28px rgba(37,211,102,.55);
}
.wa-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  animation:wa-pulse 2.2s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.35);opacity:0}
}
@media(max-width:480px){
  .wa-float{width:46px;height:46px;font-size:1.3rem;bottom:22px;right:16px}
}

/* =========================================================
   FOOTER: brand sub-line
   ========================================================= */
.foot-brand-sub{
  font-size:.82rem;
  color:rgba(180,175,168,.75);
  margin:0 0 16px;
  line-height:1.5;
  font-style:normal;
}
.site-footer .foot-brand-sub{color:rgba(180,175,168,.65)}

/* =========================================================
   FOOTER: contact phone helper text
   ========================================================= */
.contact-helper{
  display:block;
  font-size:.75rem;
  color:rgba(106,196,114,.75);
  margin-top:2px;
  font-weight:500;
  letter-spacing:.01em;
}

/* =========================================================
   FOOTER: heading border color override (dark bg)
   ========================================================= */
.site-footer .foot-heading{
  border-bottom-color:rgba(255,255,255,.14);
  color:#fff;
}

/* =========================================================
   FOOTER: grid padding & body text size
   ========================================================= */
.site-footer .footer-grid{
  padding-top:52px;
  padding-bottom:40px;
  gap:36px;
}
.site-footer .link-list li{
  font-size:.95rem;
  line-height:1.65;
  margin:11px 0;
}
.site-footer .link-list .foot-sublink{
  margin:4px 0;
}

/* =========================================================
   FOOTER: social icon hover scale
   ========================================================= */
.site-footer .social a:hover{
  transform:translateY(-4px) scale(1.1);
  background:rgba(56,90,58,.55) !important;
  border-color:rgba(106,196,114,.5) !important;
  box-shadow:0 6px 18px rgba(56,90,58,.4);
}

/* =========================================================
   FOOTER: button hover lift
   ========================================================= */
.site-footer .btn:hover{
  transform:translateY(-2px);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* =========================================================
   FOOTER: compliance text brightness
   ========================================================= */
.site-footer .compliance-list li span{color:rgba(255,255,255,.88)}
.site-footer .compliance-list li strong{color:#fff}

/* =========================================================
   FOOTER: contact card glass effect
   ========================================================= */
.site-footer .contact-item{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
}
.site-footer .contact-item:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(106,196,114,.3);
}

/* =========================================================
   FOOTER: separator line above footer
   ========================================================= */
.samples-footer-divider{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(56,90,58,.5) 30%,rgba(106,196,114,.6) 50%,rgba(56,90,58,.5) 70%,transparent 100%);
}
.site-footer{border-top:2px solid rgba(56,90,58,.35)}

/* =========================================================
   HERO: mobile refinements (≤640px)
   ========================================================= */
@media(max-width:640px){

  /* 1. Darken overlay on mobile — top must cover vivid background */
  .hero__overlay{
    background:
      linear-gradient(rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.6) 100%),
      radial-gradient(transparent 30%, rgba(0,0,0,.28) 100%);
  }

  /* 2. Heading: 32px, tight line-height, balanced max-width */
  .hero h1{
    font-size:2rem;
    line-height:1.22;
    max-width:16ch;
    margin:0 auto 1.1rem;
    padding:0 6px;
  }

  /* 3. Trust lines: centre-align on mobile */
  .hero-trust{
    align-items:center;
    margin:.5rem 0 1.2rem;
  }

  /* 4. Sub-text: more breathing room */
  .hero-sub{
    margin:.5rem auto 2rem;
    font-size:.93rem;
    line-height:1.65;
    max-width:34ch;
  }

  /* 5. Buttons: equal width, commanding presence */
  .hero .btn--lg,
  .btn--outline-hero{
    width:auto;
    max-width:220px;
    justify-content:center;
    text-align:center;
  }
  .hero .btn--lg{
    padding:12px 24px;
    font-size:1.05rem;
    box-shadow:
      0 6px 24px rgba(46,122,80,.55),
      0 2px 8px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  /* 6. CTA row: stacked, centred */
  .hero__cta{
    gap:14px;
    flex-direction:column;
    align-items:center;
  }
}