/* ===========================================================
   Grandma & Son — Premium Green & White Theme
   Palette: fresh white, rich forest green, emerald accents,
   warm gold highlights, clean modern premium feel
   Type: Fraunces (display) + Work Sans (body)
=========================================================== */

:root{
  --ink:        #0F2318;
  --ink-soft:   #3D5A46;
  --paper:      #FFFFFF;
  --paper-2:    #F2FAF4;
  --paper-3:    #E6F4EA;
  --green:      #1A7A3C;
  --green-dark: #125A2C;
  --green-deep: #0D4020;
  --green-mid:  #2D9E55;
  --green-light:#E8F7ED;
  --green-glow: #4CAF71;
  --gold:       #A87C2A;
  --gold-light: #D4AA50;
  --line:       rgba(26,122,60,0.15);
  --shadow:     0 18px 50px -20px rgba(26,122,60,0.28);
  --shadow-sm:  0 4px 16px -6px rgba(26,122,60,0.20);
  --radius-sm:  10px;
  --radius-md:  18px;
  --radius-lg:  28px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
}

p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.9em 1.6em;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--green);
  color:#fff;
}
.btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-small{ padding:.6em 1.2em; font-size:.88rem; }
.btn-full{ width:100%; justify-content:center; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--green-mid);
  outline-offset:2px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 16px -6px rgba(26,122,60,0.10);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ color:var(--green); display:flex; }
.brand-text{
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}
.brand-text em{ font-style:normal; color:var(--green-mid); }
.brand-logo{
  height:52px;
  width:auto;
  max-width:80px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

.main-nav{
  display:flex;
  gap:clamp(12px, 1.6vw, 24px);
  flex:1;
  justify-content:center;
  align-items:center;
}
.main-nav a{
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--green); }
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:var(--green);
  transition:width .2s ease;
}
.main-nav a:hover::after{ width:100%; }
.main-nav .nav-arrow{ display:none; }
.main-nav .mobile-only-nav-link{ display:none !important; }
.main-nav-cta{ display:none; }
.main-nav .nav-highlight-link{
  color:#B45309;
  font-weight:600;
}
.main-nav .nav-highlight-link:hover{
  color:#D97706;
}
.main-nav .nav-highlight-link::after{
  background:#D97706;
}

/* ---------- Navigation Dropdown (Services) ---------- */
.nav-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.nav-dropdown-btn{
  background:none;
  border:none;
  padding:6px 0;
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  position:relative;
  transition:color .18s ease;
  white-space:nowrap;
  line-height:1.4;
}
.nav-dropdown-btn:hover,
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown.open .nav-dropdown-btn,
.nav-dropdown-btn.active{
  color:var(--green);
}
.nav-dropdown-btn::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--green);
  transition:width .2s ease;
}
.nav-dropdown-btn:hover::after,
.nav-dropdown:hover .nav-dropdown-btn::after,
.nav-dropdown.open .nav-dropdown-btn::after,
.nav-dropdown-btn.active::after{
  width:100%;
}
.dropdown-chevron{
  transition:transform .22s cubic-bezier(0.16, 1, 0.3, 1);
  color:currentColor;
  pointer-events:none;
}
.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron{
  transform:rotate(180deg);
}

/* Dropdown Floating Menu (Desktop) */
@media (min-width:981px){
  .nav-dropdown-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    width:290px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 18px 42px -10px rgba(15,43,29,0.18), 0 4px 14px rgba(0,0,0,0.05);
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:4px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s cubic-bezier(0.16, 1, 0.3, 1), transform .2s cubic-bezier(0.16, 1, 0.3, 1), visibility .2s ease;
    z-index:200;
  }
  .nav-dropdown-menu::before{
    content:"";
    position:absolute;
    top:-12px;
    left:0;
    right:0;
    height:12px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
}

.nav-dropdown-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:10px;
  text-decoration:none;
  transition:background .18s ease, transform .15s ease;
  position:relative;
  border-bottom:none !important;
}
.nav-dropdown-item:hover{
  background:var(--paper);
  padding-left:12px !important;
}
.nav-dropdown-item.active{
  background:rgba(26,122,60,0.08);
}
.dropdown-item-icon{
  font-size:1.35rem;
  line-height:1;
  width:36px;
  height:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(15,43,29,0.04);
  flex-shrink:0;
}
.dropdown-item-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.dropdown-item-title{
  font-size:.90rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}
.dropdown-item-sub{
  font-size:.73rem;
  color:var(--ink-soft);
  line-height:1.2;
}
.dropdown-item-arrow{
  color:var(--green);
  font-size:.95rem;
  font-weight:700;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.nav-dropdown-item:hover .dropdown-item-arrow{
  opacity:1;
  transform:translateX(0);
}
.main-nav .nav-dropdown-item::after{
  display:none !important;
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.phone-chip{
  display:flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:600;
  color:var(--ink-soft);
}
.phone-chip svg{ color:var(--green); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  cursor:pointer;
  padding:0;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  flex-shrink:0;
}
.nav-toggle:hover{
  border-color:var(--green);
  background:rgba(26,122,60,0.04);
}
.nav-toggle span{
  display:block; height:2px; width:20px;
  background:var(--ink);
  border-radius:2px;
  margin:0 auto;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:64px;
  overflow:hidden;
  background:linear-gradient(160deg, #FFFFFF 0%, #F2FAF4 60%, #E6F4EA 100%);
}
.hero::before{
  content:"";
  position:absolute;
  top:-80px; right:-80px;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(26,122,60,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding-bottom:48px;
}
.eyebrow-plain{
  font-size:.9rem;
  color:var(--green);
  font-weight:600;
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow-plain::before{
  content:"";
  display:inline-block;
  width:28px; height:2px;
  background:var(--green);
  border-radius:2px;
}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  max-width:11.5ch;
  color:var(--ink);
}
.hero h1 span{ color:var(--green); font-style:italic; font-weight:500; }
.hero-lead{
  font-size:1.08rem;
  max-width:52ch;
  margin-bottom:28px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }

.hero-stats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid rgba(26,122,60,0.14);
  margin:0;
}
.hero-stats > div{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(26,122,60,0.12);
  box-shadow:0 4px 12px -2px rgba(15,43,29,0.04);
}
.hero-stats dt{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--green);
  font-weight:700;
  margin-bottom:4px;
}
.hero-stats dd{
  margin:0;
  font-size:.90rem;
  font-weight:700;
  color:var(--ink);
}

.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:490px;
  margin:0 auto;
  animation:riseIn 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Ambient backlight glow */
.hero-art::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:90%; height:90%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(45,158,85,0.15) 0%, rgba(45,158,85,0.04) 55%, transparent 75%);
  filter:blur(30px);
  z-index:0;
  pointer-events:none;
}

.hero-garlic-showcase{
  position:relative;
  z-index:1;
  width:100%;
}

.hero-garlic-image{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 20px 32px rgba(15,43,29,0.15)) drop-shadow(0 6px 12px rgba(0,0,0,0.06));
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}

.hero-art:hover .hero-garlic-image{
  transform:translateY(-4px) scale(1.015);
}

/* ---------- Hero Selling Points Highlights ---------- */
.hero-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:26px;
  font-size:.84rem;
  font-weight:600;
  color:var(--ink);
}
.hero-highlights span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(26,122,60,0.12);
  box-shadow:0 2px 6px rgba(15,43,29,0.03);
}
.hero-highlights svg{
  color:var(--green);
  flex-shrink:0;
}

/* ---------- Hero Floating Micro-Badges ---------- */
.hero-badges{
  display:contents;
}
.hero-badge{
  position:absolute;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(26,122,60,0.20);
  border-radius:999px;
  padding:7px 15px;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  box-shadow:0 10px 24px -4px rgba(15,43,29,0.14), 0 3px 8px rgba(0,0,0,0.04);
  display:inline-flex;
  align-items:center;
  gap:7px;
  z-index:2;
  white-space:nowrap;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  pointer-events:auto;
}
.hero-badge svg{
  color:var(--green);
  flex-shrink:0;
}
.hero-badge:hover{
  transform:translateY(-2px);
  border-color:var(--green);
  box-shadow:0 14px 28px -4px rgba(15,43,29,0.20);
}
.hero-badge-1{
  top:6%;
  right:-2%;
}
.hero-badge-2{
  top:16%;
  left:-5%;
}
.hero-badge-3{
  bottom:8%;
  left:-3%;
}

/* Ticker */
.ticker{
  position:relative;
  z-index:2;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--green);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:14px 0;
}
.ticker-track{
  display:inline-flex;
  gap:14px;
  animation:scrollTicker 26s linear infinite;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.03em;
}
.ticker-track span{ opacity:.95; }
@keyframes scrollTicker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Sections generic ---------- */
.section{ padding:100px 0; }
.section-tinted{ background:var(--paper-2); }
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{ font-size:clamp(1.9rem, 3.2vw, 2.5rem); }
.section-head p{ font-size:1.05rem; }

/* ---------- Varieties ---------- */
.variety-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.variety-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:24px 20px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 2px 8px rgba(15,43,29,0.04);
}
.variety-card:hover{
  transform:translateY(-5px);
  border-color:var(--green);
  box-shadow:var(--shadow);
}
.variety-card-featured{
  border-color:var(--green);
  background:linear-gradient(180deg, #F2FAF4 0%, #FFFFFF 60%);
  box-shadow:0 8px 24px -4px rgba(26,122,60,0.14);
}
.variety-badge-top{
  min-height:24px;
  display:flex;
  align-items:center;
  margin-bottom:12px;
}
.variety-pill{
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:rgba(26,122,60,0.10);
  color:var(--green-dark);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(26,122,60,0.15);
  white-space:nowrap;
}
.variety-pill-featured{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  box-shadow:0 2px 8px rgba(26,122,60,0.25);
}
.variety-media{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:12px;
  overflow:hidden;
  background:#f5efe6;
  margin-bottom:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.variety-media img,
.variety-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(0.2, 0, 0.2, 1);
}
.variety-card:hover .variety-media img,
.variety-card:hover .variety-img{
  transform:scale(1.06);
}
.variety-content{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.variety-card h3{
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.3;
}
.variety-card p{
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 16px;
  flex-grow:1;
}
.variety-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(26,122,60,0.08);
}
.variety-tag{
  font-size:.72rem;
  font-weight:600;
  color:var(--green);
  background:rgba(26,122,60,0.07);
  padding:3px 8px;
  border-radius:6px;
  white-space:nowrap;
}

/* ---------- Why us (alternating rows) ---------- */
.why-list{ display:flex; flex-direction:column; }
.why-row{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:26px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.why-row:first-child{ padding-top:0; }
.why-row:last-child{ border-bottom:none; }
.why-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--green);
  transition:background .2s ease, border-color .2s ease;
}
.why-row:hover .why-icon{
  background:var(--green-light);
  border-color:var(--green);
}
.why-row:nth-child(3n+1) .why-icon{ color:var(--green); }
.why-row:nth-child(3n+2) .why-icon{ color:var(--green-mid); }
.why-row:nth-child(3n+3) .why-icon{ color:var(--green-dark); }
.why-text h3{ font-size:1.22rem; margin-bottom:6px; }
.why-text p{ max-width:62ch; margin:0; }

/* ---------- Process timeline ---------- */
.process-line{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  counter-reset:none;
  position:relative;
}
.process-line::before{
  content:"";
  position:absolute;
  top:14px; left:4%; right:4%;
  height:1px;
  background:var(--line);
}
.process-line li{
  position:relative;
  padding:0 18px 0 0;
  border-left:1px solid transparent;
}
.process-index{
  display:block;
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--green);
  font-weight:600;
  margin-bottom:16px;
  position:relative;
  background:var(--paper);
  z-index:1;
  width:30px;
}
.process-line h3{ font-size:1.05rem; margin-bottom:8px; }
.process-line p{ font-size:.9rem; margin:0; }
.process-line-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.gallery-item{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
}
.gallery-item:hover, .gallery-item:focus-visible{
  transform:translateY(-4px);
  border-color:var(--green);
  box-shadow:var(--shadow);
}
.gallery-item-wide{
  grid-column:span 2;
}
.gallery-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--paper-2);
}
.gallery-item-wide .gallery-thumb{
  aspect-ratio:21 / 10;
}
.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.gallery-item:hover .gallery-thumb img{
  transform:scale(1.04);
}
.gallery-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(15,35,24,0.78);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.74rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.02em;
  pointer-events:none;
}
.gallery-zoom-icon{
  position:absolute;
  right:12px;
  bottom:12px;
  width:32px;
  height:32px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  color:var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.85);
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
.gallery-item:hover .gallery-zoom-icon,
.gallery-item:focus-visible .gallery-zoom-icon{
  opacity:1;
  transform:scale(1);
}
.gallery-info{
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.gallery-tag{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--green);
  font-weight:700;
  margin-bottom:6px;
}
.gallery-info h3{
  font-size:1.14rem;
  margin-bottom:6px;
  color:var(--ink);
}
.gallery-info p{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,25,16,0.85);
  backdrop-filter:blur(8px);
}
.lightbox-content{
  position:relative;
  max-width:820px;
  width:100%;
  background:var(--paper);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 24px 64px -12px rgba(0,0,0,0.5);
  transform:scale(0.96);
  transition:transform .25s ease;
  z-index:1;
}
.lightbox.open .lightbox-content{
  transform:scale(1);
}
.lightbox-media{
  background:#0F2318;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:65vh;
  overflow:hidden;
}
.lightbox-media img{
  max-width:100%;
  max-height:65vh;
  object-fit:contain;
  display:block;
}
.lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:none;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s ease;
  z-index:2;
}
.lightbox-close:hover{
  background:rgba(0,0,0,0.85);
}
.lightbox-caption{
  padding:18px 24px;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.lightbox-caption h3,
.lightbox-caption .lightbox-title{
  font-size:1.18rem;
  margin-bottom:4px;
  color:var(--ink);
}
.lightbox-caption p{
  margin:0;
  font-size:.90rem;
  color:var(--ink-soft);
}

/* ---------- Delivery grid ---------- */
.delivery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.delivery-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.delivery-card:hover{
  transform:translateY(-3px);
  border-color:var(--green);
  box-shadow:var(--shadow-sm);
}
.delivery-card svg{ color:var(--green); margin-bottom:12px; }
.delivery-card h3{ font-size:1.08rem; margin-bottom:6px; }
.delivery-card p{ font-size:.9rem; margin:0; }
.delivery-card-cta{
  background:var(--green);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  border-color:transparent;
}
.delivery-card-cta:hover{
  background:var(--green-dark);
  border-color:transparent;
}
.delivery-card-cta p{ color:rgba(255,255,255,0.85); opacity:1; margin-bottom:8px; font-size:.9rem; }
.delivery-card-cta a{ font-weight:700; color:#fff; }
.delivery-card-cta svg{ color:rgba(255,255,255,0.6); }

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.testimonial{
  margin:0;
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:32px 28px;
  border:1.5px solid var(--line);
  border-top:3px solid var(--green);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.testimonial:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.testimonial p{
  font-family:var(--font-display);
  font-size:1.08rem;
  color:var(--ink);
  font-style:italic;
  margin-bottom:16px;
}
.testimonial cite{
  font-style:normal;
  font-size:.84rem;
  font-weight:600;
  color:var(--green);
}

/* ---------- FAQ ---------- */
.faq-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:860px;
  margin:0 auto;
}
.faq-item{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  transition:border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.faq-item:hover{
  border-color:var(--green);
  box-shadow:var(--shadow-sm);
}
.faq-item[open]{
  border-color:var(--green-mid);
  box-shadow:var(--shadow-sm);
}
.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.faq-question::-webkit-details-marker{
  display:none;
}
.faq-icon{
  color:var(--green);
  flex-shrink:0;
  transition:transform .25s ease;
}
.faq-item[open] .faq-icon{
  transform:rotate(180deg);
}
.faq-answer{
  padding:0 20px 18px;
  color:var(--ink-soft);
  font-size:.90rem;
  line-height:1.55;
  border-top:1px solid rgba(26,122,60,0.08);
  margin-top:-4px;
  padding-top:12px;
}
.faq-answer p{
  margin:0 0 .5em;
}
.faq-answer p:last-child{
  margin:0;
}
.faq-answer strong{
  color:var(--ink);
}
.faq-answer a{
  color:var(--green);
  font-weight:600;
  text-decoration:underline;
}

/* ---------- Contact ---------- */
.section-dark{
  background:var(--green-deep);
  color:#fff;
}
.section-dark .section-head{ display:none; }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:start;
}
.contact-copy h2{ color:#fff; font-size:clamp(1.9rem,3vw,2.3rem); }
.contact-copy p{ color:rgba(255,255,255,0.78); font-size:1.02rem; }
.contact-list{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.contact-list li{
  display:flex; align-items:center; gap:12px;
  font-size:.96rem; font-weight:500;
  color:rgba(255,255,255,0.90);
}
.contact-list svg{ color:var(--green-glow); flex-shrink:0; }

.order-form{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,0.35);
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.form-row-group{ display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; min-width:0; }
.form-row{ display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; }
.form-row label{ font-size:.84rem; font-weight:600; color:var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea{
  font-family:inherit;
  font-size:16px;
  padding:.75em .9em;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper-2);
  color:var(--ink);
  resize:vertical;
  transition:border-color .18s ease, background .18s ease;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.form-row select{
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color:var(--green);
  background:#fff;
  outline:none;
}
.form-row input::placeholder,
.form-row textarea::placeholder{
  font-size:.84rem;
  color:rgba(18, 43, 30, 0.45);
  font-weight:400;
}
.form-note{
  font-size:.86rem;
  margin:0;
  min-height:1.2em;
  color:var(--green);
  font-weight:600;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,0.80);
  padding:60px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.brand-footer{ margin-bottom:10px; }
.brand-footer .brand-mark{ color:var(--green-glow); }
.brand-footer .brand-text{ color:#fff; }
.brand-footer .brand-text em{ color:var(--green-glow); }
.brand-logo-footer{
  height:50px;
  width:auto;
  max-width:76px;
  object-fit:contain;
  opacity:0.92;
}
.footer-tag{ font-size:.9rem; max-width:32ch; color:rgba(255,255,255,0.60); }
.footer-col h4,
.footer-col .footer-col-title{
  font-family:var(--font-body);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.90);
  font-weight:700;
  margin-bottom:14px;
}
.footer-nav-cols{ display:contents; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col a, .footer-col span{
  font-size:.92rem;
  color:rgba(255,255,255,0.55);
}
.footer-col a:hover{ color:var(--green-glow); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:22px 0;
  font-size:.82rem;
  color:rgba(255,255,255,0.40);
}
.footer-texture{
  width:100%;
  overflow:hidden;
  line-height:0;
  display:block;
  margin-top:8px;
}
.footer-texture img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  object-position:bottom center;
  pointer-events:none;
}

/* Decorative Hero Background Texture */
.hero-texture{
  position:absolute;
  bottom:0px;
  left:0;
  width:100%;
  height:clamp(150px, 16vw, 240px);
  overflow:hidden;
  line-height:0;
  pointer-events:none;
  z-index:0;
  opacity:0.68;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
}
.hero-texture picture{
  display:block;
  width:100%;
  height:100%;
}
.hero-texture img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
  pointer-events:none;
}
.section-texture{
  width:100%;
  overflow:hidden;
  line-height:0;
  display:block;
  margin-bottom:-1px;
  position:relative;
  z-index:2;
  pointer-events:none;
}
.section-texture img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  bottom:26px; right:26px;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .18s ease;
  z-index:90;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--green-dark); }

/* ===========================================================
   Responsive
=========================================================== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:440px; margin:0 auto; }
  .hero-badge{ font-size:.78rem; padding:6px 13px; }
  .hero-badge-1{ top:4%; right:0%; }
  .hero-badge-2{ top:14%; left:0%; }
  .hero-badge-3{ bottom:6%; left:0%; }
  .variety-row{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-item-wide{ grid-column:span 2; }
  .delivery-grid{ grid-template-columns:repeat(2,1fr); }
  .process-line{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .process-line.process-line-4{ grid-template-columns:repeat(2,1fr); }
  .process-line::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .order-form{ padding:30px 24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:981px) and (max-width:1140px){
  .phone-chip span{ display:none; }
  .phone-chip{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1.5px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  .main-nav{ gap:14px; }
  .header-row{ gap:16px; }
}

@media (max-width:980px){
  .site-header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#ffffff;
  }
  .main-nav{
    position:fixed;
    top:78px;
    left:0;
    right:0;
    width:100vw;
    height:calc(100vh - 78px);
    height:calc(100dvh - 78px);
    max-height:calc(100vh - 78px);
    max-height:calc(100dvh - 78px);
    background:#ffffff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 24px 40px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px rgba(15,43,29,0.16);
    overflow-y:auto;
    overflow-anchor:none !important;
    scroll-behavior:auto !important;
    overscroll-behavior:contain;
    z-index:999;
  }
  .main-nav,
  .main-nav *{
    overflow-anchor:none !important;
  }
  .main-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .main-nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 4px;
    width:100%;
    border-bottom:1px solid var(--line);
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
    white-space:normal;
    text-decoration:none;
    transition:color .15s ease, padding-left .15s ease;
  }
  .main-nav a:hover,
  .main-nav a:active{
    color:var(--green);
    padding-left:4px;
  }
  .main-nav a::after{ display:none; }
  .main-nav .nav-arrow{
    display:inline-block;
    color:var(--green);
    font-size:1.15rem;
    font-weight:700;
    line-height:1;
    transition:transform .15s ease;
  }
  .main-nav a:hover .nav-arrow,
  .main-nav a:active .nav-arrow{
    transform:translateX(3px);
  }
  .main-nav .mobile-only-nav-link{
    display:flex !important;
  }
  /* Mobile dropdown (Services) */
  .nav-dropdown{
    width:100%;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    overflow-anchor:none !important;
  }
  .nav-dropdown-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 4px;
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
    background:none;
    border:none;
    outline:none;
    cursor:pointer;
    text-align:left;
    -webkit-appearance:none;
    appearance:none;
    box-sizing:border-box;
    transition:color .15s ease, padding-left .15s ease;
    touch-action:manipulation;
  }
  .nav-dropdown-btn:hover,
  .nav-dropdown-btn:active{
    color:var(--green);
    padding-left:4px;
  }
  .nav-dropdown-btn::after{ display:none; }
  .nav-dropdown-btn .dropdown-chevron{
    width:18px;
    height:18px;
    color:var(--green);
    transition:transform .25s ease;
  }
  .nav-dropdown.open .nav-dropdown-btn{
    color:var(--green);
    border-bottom:1px dashed rgba(26,122,60,0.18);
  }
  .nav-dropdown.open .dropdown-chevron{
    transform:rotate(180deg);
  }

  /* Mobile Dropdown Submenu Container */
  .nav-dropdown-menu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:rgba(26,122,60,0.03) !important;
    border-left:3px solid var(--green) !important;
    padding:2px 0 4px 12px !important;
    margin:0 !important;
    display:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    box-sizing:border-box !important;
    overflow-anchor:none !important;
    transition:none !important;
  }
  .nav-dropdown.open .nav-dropdown-menu{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  .nav-dropdown-menu::before{ display:none !important; }

  /* Mobile Submenu Items */
  .main-nav .nav-dropdown-item{
    background:transparent;
    border:none !important;
    border-bottom:1px solid rgba(15,43,29,0.06) !important;
    border-radius:0;
    padding:12px 4px 12px 6px !important;
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    transition:color .15s ease, padding-left .15s ease;
  }
  .main-nav .nav-dropdown-item:last-child{
    border-bottom:none !important;
  }
  .main-nav .nav-dropdown-item:hover,
  .main-nav .nav-dropdown-item:active{
    background:transparent;
    padding-left:10px !important;
  }
  .main-nav .nav-dropdown-item.active{
    background:transparent;
  }
  .main-nav .nav-dropdown-item.active .dropdown-item-title{
    color:var(--green);
    font-weight:700;
  }
  .main-nav .dropdown-item-icon{
    font-size:1.15rem;
    width:auto;
    height:auto;
    border:none;
    background:none;
    box-shadow:none;
    border-radius:0;
    margin-right:8px;
    flex-shrink:0;
  }
  .main-nav .dropdown-item-text{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    flex:1;
  }
  .main-nav .dropdown-item-title{
    font-size:.95rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.3;
  }
  .main-nav .dropdown-item-sub{
    display:none;
  }
  .main-nav .nav-dropdown-item .dropdown-item-arrow{
    opacity:1;
    transform:none;
    color:var(--green);
    font-size:1.05rem;
    font-weight:700;
    margin-left:auto;
    padding-right:4px;
  }
  .main-nav-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
    padding-bottom:16px;
  }
  .main-nav-cta .btn{
    width:100%;
    justify-content:center;
    padding:13px 18px;
    font-size:.95rem;
    border-bottom:none;
  }
  .phone-chip{ display:none; }
  .nav-toggle{ display:flex; }
  .testimonial-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .testimonial:last-child:nth-child(odd){ grid-column:span 2; }
}

@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .section{ padding:72px 0; }
  .header-row{ height:68px; }
  .brand-logo{ height:44px; width:auto; max-width:68px; }
  .main-nav{
    top:68px;
    height:calc(100vh - 68px);
    height:calc(100dvh - 68px);
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);
    padding:8px 18px 40px;
    overflow-anchor:none !important;
    scroll-behavior:auto !important;
    overscroll-behavior:contain;
  }
  .main-nav a{
    padding:14px 2px;
    font-size:1rem;
  }
  .nav-dropdown-btn{
    padding:14px 2px;
    font-size:1rem;
  }
  .main-nav .nav-dropdown-item{
    padding:10px 2px 10px 6px !important;
  }
  .main-nav .dropdown-item-title{
    font-size:.92rem;
  }
  .nav-toggle{ display:flex; }
  html{ scroll-padding-top:70px; }
  .hero{ padding-top:40px; }
  .hero-grid{ padding-bottom:24px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:20px; }
  .hero-cta .btn{ justify-content:center; }
  .hero-highlights{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-bottom:20px;
  }
  .hero-highlights span{
    width:100%;
    box-sizing:border-box;
    font-size:.82rem;
    padding:9px 14px;
    border-radius:10px;
    background:rgba(255,255,255,0.88);
  }
  .hero-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:16px 0 24px;
    border-top:1px solid rgba(26,122,60,0.14);
  }
  .hero-stats > div{
    min-width:0;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,0.90);
    border:1px solid rgba(26,122,60,0.14);
    box-shadow:0 4px 12px -2px rgba(15,43,29,0.06);
  }
  .hero-stats dt{
    font-size:.66rem;
    margin-bottom:3px;
  }
  .hero-stats dd{
    font-size:.80rem;
    line-height:1.35;
  }
  .variety-row{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .variety-card{
    padding:16px 12px 14px;
    border-radius:12px;
  }
  .variety-badge-top{
    min-height:20px;
    margin-bottom:8px;
  }
  .variety-pill{
    font-size:.60rem;
    padding:2px 7px;
    letter-spacing:.02em;
  }
  .variety-media{
    border-radius:10px;
    margin-bottom:10px;
  }
  .variety-card h3{
    font-size:.94rem;
    margin-bottom:6px;
  }
  .variety-card p{
    font-size:.78rem;
    line-height:1.45;
    margin-bottom:10px;
  }
  .variety-meta{
    padding-top:8px;
    gap:4px;
  }
  .variety-tag{
    font-size:.64rem;
    padding:2px 5px;
  }
  .gallery-grid{ grid-template-columns:1fr; gap:16px; }
  .gallery-item-wide{ grid-column:span 1; }
  .gallery-item-wide .gallery-thumb{ aspect-ratio:16 / 10; }
  .gallery-info{ padding:16px 18px; }
  .lightbox-content{ max-width:95vw; }
  .lightbox-caption{ padding:14px 18px; }
  .why-row{ grid-template-columns:48px 1fr; gap:16px; padding:24px 0; }
  /* Process - 2 cards per row */
  .process-line{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .process-line::before{ display:none; }
  .process-line li{
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:16px 14px;
    box-shadow:0 2px 8px rgba(15,43,29,0.03);
    display:flex;
    flex-direction:column;
  }
  .process-line li:last-child:nth-child(odd){ grid-column:span 2; }
  .process-index{
    font-size:1.15rem;
    margin-bottom:6px;
    width:auto;
    background:none;
  }
  .process-line h3{
    font-size:.92rem;
    margin-bottom:6px;
    line-height:1.3;
  }
  .process-line p{
    font-size:.78rem;
    line-height:1.45;
    color:var(--ink-soft);
  }

  /* Delivery - 2 cards per row */
  .delivery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .delivery-card{
    padding:16px 14px;
    border-radius:12px;
  }
  .delivery-card svg{
    width:18px;
    height:18px;
    margin-bottom:8px;
  }
  .delivery-card h3{
    font-size:.95rem;
    margin-bottom:4px;
  }
  .delivery-card p{
    font-size:.78rem;
    line-height:1.4;
  }
  .delivery-card-cta{
    padding:16px 14px;
  }
  .delivery-card-cta p{
    font-size:.78rem;
    margin-bottom:6px;
  }
  .delivery-card-cta a{
    font-size:.82rem;
  }

  /* Testimonials - 2 cards per row */
  .testimonial-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .testimonial{
    padding:18px 14px 16px;
    border-radius:12px;
  }
  .testimonial:last-child:nth-child(odd){ grid-column:span 2; }
  .testimonial p{
    font-size:.88rem;
    line-height:1.45;
    margin-bottom:10px;
  }
  .testimonial cite{
    font-size:.74rem;
  }

  /* Footer - centered header, centered 2-col navigation block, centered contact, and bottom */
  .footer-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    padding-bottom:26px;
  }
  .footer-grid > div:first-child{
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .brand-footer{
    justify-content:center;
    margin:0 auto 8px;
  }
  .footer-tag{
    font-size:.84rem;
    text-align:center;
    margin:0 auto;
    max-width:100%;
  }
  .footer-nav-cols{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    gap:32px;
    width:100%;
    padding:2px 0;
  }
  .footer-nav-cols .footer-col{
    flex:0 0 auto;
    text-align:left;
    align-items:flex-start;
    border-top:none;
    padding-top:0;
  }
  .footer-nav-cols .footer-col h4,
  .footer-nav-cols .footer-col .footer-col-title{
    text-align:left;
    font-size:.78rem;
    margin-bottom:10px;
  }
  .footer-col-contact{
    width:100%;
    text-align:center;
    align-items:center;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer-col-contact h4{
    text-align:center;
    font-size:.78rem;
    margin-bottom:10px;
  }
  .footer-col{ gap:8px; }
  .footer-col a, .footer-col span{
    font-size:.84rem;
    line-height:1.45;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    gap:6px;
    padding:18px 0 22px;
  }
  .footer-bottom span{
    text-align:center;
  }
  .form-row-group{ grid-template-columns:1fr 1fr; gap:10px; }
  .form-row{ gap:3px; }
  .form-row label{ font-size:.78rem; font-weight:600; }
  .form-row input{
    font-size:16px !important;
    padding:7px 10px !important;
    border-radius:8px !important;
  }
  .form-row select{
    font-size:.84rem !important;
    padding:7px 8px !important;
    border-radius:8px !important;
  }
  .form-row textarea{
    font-size:16px !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    height:44px;
    min-height:44px;
  }
  .form-row input::placeholder,
  .form-row textarea::placeholder{
    font-size:.78rem;
    color:rgba(18, 43, 30, 0.45);
  }
  .order-form{
    padding:16px 14px;
    border-radius:16px;
    gap:10px;
  }
  .order-form h3{
    font-size:1.15rem !important;
    margin:0 0 2px !important;
  }
  .order-form p{
    font-size:.80rem !important;
    margin:0 0 4px !important;
    line-height:1.35;
  }
  .order-form button.btn{
    padding:11px 16px;
    font-size:.95rem;
    margin-top:2px;
  }
  .contact-grid{ gap:28px; }
  .contact-list li{
    align-items:flex-start;
    font-size:.88rem;
    gap:10px;
    word-break:break-word;
  }
  .contact-list li svg{
    margin-top:2px;
  }
  .btn-small{ display:none; }
  .hero-art{
    flex-direction:column;
    max-width:320px;
    margin:0 auto 24px;
  }
  .hero-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:14px;
    width:100%;
    z-index:2;
  }
  .hero-badge{
    position:static;
    transform:none !important;
    font-size:.74rem;
    padding:6px 12px;
    box-shadow:0 4px 12px -2px rgba(15,43,29,0.10);
  }
  .hero-badge-1,
  .hero-badge-2,
  .hero-badge-3{
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
  }
  .hero-texture{
    bottom:0;
    height:clamp(170px, 36vw, 230px);
    opacity:0.75;
    -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
  }
}

@media (max-width:420px){
  .hero-art{ max-width:270px; margin:0 auto 18px; }
  .hero-badges{ gap:6px; margin-top:10px; }
  .hero-badge{ font-size:.68rem; padding:5px 9px; gap:5px; }
  .hero-badge svg{ width:12px; height:12px; }
  .hero-highlights span{
    font-size:.76rem;
    padding:8px 11px;
  }
  .hero-stats{
    gap:8px;
    padding:14px 0 20px;
  }
  .hero-stats > div{
    padding:8px 10px;
  }
  .hero-stats dt{
    font-size:.62rem;
  }
  .hero-stats dd{
    font-size:.75rem;
  }
  .hero-texture{
    bottom:0;
    height:clamp(160px, 42vw, 200px);
    opacity:0.80;
    -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
  }
  .variety-row{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .variety-card{
    padding:12px 8px 10px;
  }
  .variety-pill{
    font-size:.56rem;
    padding:2px 5px;
  }
  .variety-media{
    border-radius:8px;
    margin-bottom:8px;
  }
  .variety-card h3{
    font-size:.88rem;
  }
  .variety-card p{
    font-size:.74rem;
  }
  .variety-tag{
    display:none;
  }
  .process-line{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .process-line li{
    padding:12px 10px;
    border-radius:10px;
  }
  .process-index{
    font-size:1.02rem;
    margin-bottom:4px;
  }
  .process-line h3{
    font-size:.84rem;
    margin-bottom:4px;
  }
  .process-line p{
    font-size:.72rem;
    line-height:1.35;
  }
  .delivery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .delivery-card{
    padding:12px 10px;
    border-radius:10px;
  }
  .delivery-card svg{
    width:16px;
    height:16px;
    margin-bottom:6px;
  }
  .delivery-card h3{
    font-size:.88rem;
    margin-bottom:3px;
  }
  .delivery-card p{
    font-size:.72rem;
    line-height:1.35;
  }
  .delivery-card-cta{
    padding:12px 10px;
  }
  .delivery-card-cta p{
    font-size:.72rem;
    margin-bottom:4px;
  }
  .delivery-card-cta a{
    font-size:.76rem;
  }
  .testimonial-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .testimonial{
    padding:14px 10px;
    border-radius:10px;
  }
  .testimonial p{
    font-size:.80rem;
    line-height:1.38;
    margin-bottom:8px;
  }
  .testimonial cite{
    font-size:.68rem;
  }
  .footer-nav-cols{
    gap:22px;
  }
  .footer-col h4{
    font-size:.74rem;
    margin-bottom:8px;
  }
  .footer-col a, .footer-col span{
    font-size:.78rem;
  }
  .footer-bottom{
    gap:4px;
    padding:14px 0 18px;
  }
  .order-form{
    padding:14px 12px;
    border-radius:14px;
    gap:8px;
  }
  .order-form h3{
    font-size:1.08rem !important;
    margin:0 0 2px !important;
  }
  .order-form p{
    font-size:.76rem !important;
    margin:0 0 4px !important;
  }
  .form-row{
    gap:2px;
  }
  .form-row label{
    font-size:.75rem;
  }
  .form-row input{
    font-size:16px !important;
    padding:6px 9px !important;
  }
  .form-row select{
    font-size:.80rem !important;
    padding:6px 8px !important;
  }
  .form-row textarea{
    font-size:16px !important;
    padding:5px 9px !important;
    height:40px;
    min-height:40px;
  }
  .form-row input::placeholder,
  .form-row textarea::placeholder{
    font-size:.74rem;
  }
  .form-row-group{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .order-form button.btn{
    padding:10px 14px;
    font-size:.90rem;
  }
}

/* ===========================================================
   Turmeric (Haldi) Theme & Layout Extensions
   Warm amber, saffron gold, and botanical earth tones
=========================================================== */
:root{
  --turmeric-deep:   #78350F;
  --turmeric-warm:   #B45309;
  --turmeric-gold:   #D97706;
  --turmeric-amber:  #F59E0B;
  --turmeric-light:  #FEF3C7;
  --turmeric-bg:     #FFFDF5;
}

.hero-turmeric{
  background:linear-gradient(160deg, #FFFFFF 0%, #FFFDF2 55%, #FEF3C7 100%);
}
.hero-turmeric::before{
  background:radial-gradient(circle, rgba(217,119,6,0.12) 0%, transparent 70%);
}
.hero-turmeric .eyebrow-plain{
  color:var(--turmeric-warm);
}
.hero-turmeric .eyebrow-plain::before{
  background:var(--turmeric-gold);
}
.hero-turmeric h1 span{
  color:var(--turmeric-gold);
}
.hero-turmeric .hero-badge{
  border-color:rgba(217,119,6,0.25);
}
.hero-turmeric .hero-badge svg{
  color:var(--turmeric-gold);
}
.hero-turmeric .hero-badge:hover{
  border-color:var(--turmeric-gold);
  box-shadow:0 14px 28px -4px rgba(180,83,9,0.20);
}

.ticker-turmeric{
  background:linear-gradient(90deg, #92400E 0%, #B45309 45%, #D97706 100%);
}

.variety-card-turmeric{
  border-color:rgba(217,119,6,0.22);
}
.variety-card-turmeric:hover{
  border-color:var(--turmeric-gold);
  box-shadow:0 16px 36px -12px rgba(180,83,9,0.20);
}
.variety-pill-turmeric{
  background:var(--turmeric-light);
  color:var(--turmeric-deep);
  border:1px solid rgba(217,119,6,0.30);
}
.variety-card-turmeric .variety-tag{
  color:var(--turmeric-warm);
  background:rgba(217,119,6,0.08);
}
.variety-card-turmeric .variety-meta{
  border-top-color:rgba(217,119,6,0.12);
}

.btn-turmeric{
  background:var(--turmeric-gold);
  color:#fff;
}
.btn-turmeric:hover{
  background:var(--turmeric-warm);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(180,83,9,0.38);
}

.curcumin-callout{
  background:var(--turmeric-bg);
  border:1.5px solid rgba(217,119,6,0.25);
  border-radius:var(--radius-md);
  padding:24px;
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:18px;
}
.curcumin-callout-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--turmeric-light);
  color:var(--turmeric-warm);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.curcumin-callout h4,
.curcumin-callout h3{
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:700;
  color:var(--turmeric-deep);
  margin:0 0 4px;
}
.curcumin-callout p{
  font-size:.92rem;
  margin:0;
  color:var(--ink-soft);
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.benefit-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.benefit-card:hover{
  transform:translateY(-3px);
  border-color:var(--turmeric-gold);
  box-shadow:0 12px 30px -10px rgba(180,83,9,0.14);
}
.benefit-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--turmeric-light);
  color:var(--turmeric-warm);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.benefit-card h3{
  font-size:1.15rem;
  margin-bottom:8px;
}
.benefit-card p{
  font-size:.92rem;
  margin:0;
  line-height:1.55;
}

@media (max-width:980px){
  .benefit-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
}

@media (max-width:640px){
  .benefit-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .benefit-card{
    padding:16px 12px;
    border-radius:12px;
  }
  .benefit-icon{
    width:36px;
    height:36px;
    border-radius:8px;
    margin-bottom:10px;
  }
  .benefit-card h3{
    font-size:.94rem;
    margin-bottom:4px;
  }
  .benefit-card p{
    font-size:.78rem;
    line-height:1.4;
  }
  .curcumin-callout{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:10px;
  }
}

/* ===========================================================
   Red Chilli (Lal Mirch) Theme & Layout Extensions
   Rich ruby red, fiery crimson, and warm spice tones
=========================================================== */
:root{
  --chilli-deep:     #7F1D1D;
  --chilli-crimson:  #991B1B;
  --chilli-red:      #DC2626;
  --chilli-flame:    #EF4444;
  --chilli-light:    #FEE2E2;
  --chilli-bg:       #FFF8F8;
}

.hero-chilli{
  background:linear-gradient(160deg, #FFFFFF 0%, #FFF8F8 55%, #FEE2E2 100%);
}
.hero-chilli::before{
  background:radial-gradient(circle, rgba(220,38,38,0.12) 0%, transparent 70%);
}
.hero-chilli .eyebrow-plain{
  color:var(--chilli-crimson);
}
.hero-chilli .eyebrow-plain::before{
  background:var(--chilli-red);
}
.hero-chilli h1 span{
  color:var(--chilli-red);
}
.hero-chilli .hero-badge{
  border-color:rgba(220,38,38,0.25);
}
.hero-chilli .hero-badge svg{
  color:var(--chilli-red);
}
.hero-chilli .hero-badge:hover{
  border-color:var(--chilli-red);
  box-shadow:0 14px 28px -4px rgba(220,38,38,0.22);
}

.ticker-chilli{
  background:linear-gradient(90deg, #7F1D1D 0%, #991B1B 45%, #DC2626 100%);
}

.variety-card-chilli{
  border-color:rgba(220,38,38,0.20);
}
.variety-card-chilli:hover{
  border-color:var(--chilli-red);
  box-shadow:0 16px 36px -12px rgba(220,38,38,0.20);
}
.variety-pill-chilli{
  background:var(--chilli-light);
  color:var(--chilli-deep);
  border:1px solid rgba(220,38,38,0.30);
}
.variety-card-chilli .variety-tag{
  color:var(--chilli-crimson);
  background:rgba(220,38,38,0.08);
}
.variety-card-chilli .variety-meta{
  border-top-color:rgba(220,38,38,0.12);
}

.btn-chilli{
  background:var(--chilli-red);
  color:#fff;
}
.btn-chilli:hover{
  background:var(--chilli-crimson);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(185,28,28,0.38);
}

.heat-meter{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:100px;
  font-size:.76rem;
  font-weight:600;
}
.heat-mild{
  background:#FEF3C7;
  color:#92400E;
}
.heat-medium{
  background:#FFEDD5;
  color:#C2410C;
}
.heat-hot{
  background:#FEE2E2;
  color:#991B1B;
}
.heat-extra-hot{
  background:#FCA5A5;
  color:#7F1D1D;
}

.chilli-callout{
  background:var(--chilli-bg);
  border:1.5px solid rgba(220,38,38,0.25);
  border-radius:var(--radius-md);
  padding:24px;
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:18px;
}
.chilli-callout-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--chilli-light);
  color:var(--chilli-crimson);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.chilli-callout h4,
.chilli-callout h3{
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:700;
  color:var(--chilli-deep);
  margin:0 0 4px;
}
.chilli-callout p{
  font-size:.92rem;
  margin:0;
  color:var(--ink-soft);
}

.benefit-card-chilli:hover{
  border-color:var(--chilli-red);
  box-shadow:0 12px 30px -10px rgba(220,38,38,0.16);
}
.benefit-icon-chilli{
  background:var(--chilli-light);
  color:var(--chilli-crimson);
}

@media (max-width:640px){
  .chilli-callout{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:10px;
  }
}

/* ===========================================================
   Mustard Oil (Sarson Ka Tel) Theme & Layout Extensions
   Rich golden amber, warm brass, and sunlit yellow mustard tones
=========================================================== */
:root{
  --mustard-deep:     #451A03;
  --mustard-dark:     #78350F;
  --mustard-gold:     #B45309;
  --mustard-warm:     #D97706;
  --mustard-bright:   #F59E0B;
  --mustard-yellow:   #FACC15;
  --mustard-light:    #FEF3C7;
  --mustard-bg:       #FFFDF5;
}

.hero-mustard{
  background:linear-gradient(160deg, #FFFFFF 0%, #FFFDF5 55%, #FEF3C7 100%);
}
.hero-mustard::before{
  background:radial-gradient(circle, rgba(217,119,6,0.14) 0%, transparent 70%);
}
.hero-mustard .eyebrow-plain{
  color:var(--mustard-warm);
}
.hero-mustard .eyebrow-plain::before{
  background:var(--mustard-bright);
}
.hero-mustard h1 span{
  color:var(--mustard-warm);
}
.hero-mustard .hero-badge{
  border-color:rgba(217,119,6,0.25);
}
.hero-mustard .hero-badge svg{
  color:var(--mustard-warm);
}
.hero-mustard .hero-badge:hover{
  border-color:var(--mustard-warm);
  box-shadow:0 14px 28px -4px rgba(217,119,6,0.22);
}

.ticker-mustard{
  background:linear-gradient(90deg, #451A03 0%, #78350F 40%, #B45309 75%, #D97706 100%);
}

.variety-card-mustard{
  border-color:rgba(217,119,6,0.22);
}
.variety-card-mustard:hover{
  border-color:var(--mustard-warm);
  box-shadow:0 16px 36px -12px rgba(217,119,6,0.22);
}
.variety-pill-mustard{
  background:var(--mustard-light);
  color:var(--mustard-deep);
  border:1px solid rgba(217,119,6,0.30);
}
.variety-card-mustard .variety-tag{
  color:var(--mustard-warm);
  background:rgba(217,119,6,0.09);
}
.variety-card-mustard .variety-meta{
  border-top-color:rgba(217,119,6,0.14);
}

.btn-mustard{
  background:linear-gradient(135deg, #D97706 0%, #B45309 100%);
  color:#fff;
}
.btn-mustard:hover{
  background:linear-gradient(135deg, #B45309 0%, #78350F 100%);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(180,83,9,0.42);
}

/* Mustard Quality Guide & Pungency Scale */
.pungency-meter{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:100px;
  font-size:.76rem;
  font-weight:600;
}
.pungency-smooth{
  background:#FEF9C3;
  color:#854D0E;
}
.pungency-medium{
  background:#FEF08A;
  color:#713F12;
}
.pungency-strong{
  background:#FDE68A;
  color:#451A03;
}
.pungency-intense{
  background:#F59E0B;
  color:#FFFFFF;
}

.mustard-callout{
  background:var(--mustard-bg);
  border:1.5px solid rgba(217,119,6,0.25);
  border-radius:var(--radius-md);
  padding:24px;
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:18px;
}
.mustard-callout-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--mustard-light);
  color:var(--mustard-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.mustard-callout h4,
.mustard-callout h3{
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:700;
  color:var(--mustard-deep);
  margin:0 0 4px;
}
.mustard-callout p{
  font-size:.92rem;
  margin:0;
  color:var(--ink-soft);
}

.benefit-card-mustard:hover{
  border-color:var(--mustard-warm);
  box-shadow:0 12px 30px -10px rgba(217,119,6,0.18);
}
.benefit-icon-mustard{
  background:var(--mustard-light);
  color:var(--mustard-dark);
}

@media (max-width:640px){
  .mustard-callout{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:10px;
  }
}

.process-line-mustard::before{
  background:rgba(217,119,6,0.22);
}
.process-line-mustard .process-index{
  color:var(--mustard-warm);
}





























/* ===========================================================
   Multi-Product Home Page Styles
=========================================================== */
.home-hero{
  position:relative;
  padding-top:64px;
  overflow:hidden;
  background:linear-gradient(160deg, #FFFFFF 0%, #F2FAF4 55%, #E6F4EA 100%);
}
.home-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding-bottom:52px;
}
.home-hero-copy{
  display:flex;
  flex-direction:column;
}
.home-hero-copy h1{
  font-size:clamp(2.4rem, 4.4vw, 3.5rem);
  color:var(--ink);
  line-height:1.15;
  margin:0 0 18px;
}
.home-hero-copy h1 span{
  color:var(--green);
  font-style:italic;
  font-weight:500;
}
.home-hero-products{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:540px;
  margin:0 auto;
}
.home-hero-product-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  padding:14px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  box-shadow:0 8px 24px -6px rgba(15,43,29,0.08);
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .25s ease;
  position:relative;
}
.home-hero-product-card:hover{
  transform:translateY(-5px);
  border-color:var(--green);
  box-shadow:0 18px 36px -10px rgba(26,122,60,0.22);
}
.home-hpc-img{
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:12px;
  overflow:hidden;
  background:var(--paper-2);
  margin-bottom:12px;
  position:relative;
}
.home-hpc-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.home-hero-product-card:hover .home-hpc-img img{
  transform:scale(1.06);
}
.home-hpc-label{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.home-hpc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2px;
}
.home-hpc-emoji{
  font-size:1.15rem;
}
.home-hpc-tag{
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(26,122,60,0.10);
  color:var(--green-dark);
}
.home-hpc-turmeric .home-hpc-tag{
  background:rgba(180,83,9,0.12);
  color:#92400E;
}
.home-hpc-chilli .home-hpc-tag{
  background:rgba(220,38,38,0.12);
  color:#991B1B;
}
.home-hpc-mustard .home-hpc-tag{
  background:rgba(217,119,6,0.14);
  color:#78350F;
}
.home-hpc-name{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}
.home-hpc-sub{
  font-size:.76rem;
  color:var(--ink-soft);
  margin-top:2px;
}

/* Home Products Showcase (4 core categories) */
.home-product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.home-product-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 20px -8px rgba(15,43,29,0.08);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px -12px rgba(26,122,60,0.18);
  border-color:var(--green);
}
.home-product-image{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--paper-2);
}
.home-product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.home-product-card:hover .home-product-image img{
  transform:scale(1.05);
}
.home-product-overlay{
  position:absolute;
  top:12px;
  left:12px;
}
.home-product-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(15,35,24,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font-size:.70rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.02em;
}
.home-product-body{
  padding:20px 18px 18px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.home-product-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.home-product-category{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--green);
}
.home-product-tags{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.home-product-tags span{
  font-size:.66rem;
  font-weight:600;
  padding:2px 6px;
  border-radius:5px;
  background:rgba(26,122,60,0.08);
  color:var(--green-dark);
}
.home-product-body h3{
  font-size:1.12rem;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.3;
}
.home-product-body p{
  font-size:.84rem;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0 0 12px;
  flex-grow:1;
}
.home-product-varieties{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding-top:10px;
  border-top:1px solid rgba(26,122,60,0.10);
  margin-bottom:14px;
}
.home-product-varieties span{
  font-size:.68rem;
  font-weight:600;
  color:var(--ink);
  background:var(--paper-2);
  padding:2px 7px;
  border-radius:5px;
  border:1px solid rgba(26,122,60,0.10);
}
.home-product-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:auto;
}
.home-product-actions .btn{
  flex:1;
  min-width:0;
  justify-content:center;
  padding:.65em .8em;
  font-size:.82rem;
  white-space:nowrap;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btn-wa-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  min-width:38px;
  padding:0;
  border-radius:10px;
  background:#25D366;
  color:#fff;
  border:none;
  flex-shrink:0;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-wa-icon svg{
  width:20px;
  height:20px;
}
.btn-wa-icon:hover{
  background:#1EBE5D;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 16px -3px rgba(37,211,102,0.45);
}

/* Section Why-Us Ambient Background & Trust Grid */
#why-us{
  background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(45,158,85,0.28), transparent 70%),
             radial-gradient(ellipse 60% 40% at 85% 90%, rgba(26,122,60,0.22), transparent 60%),
             #0B2B18;
  position:relative;
  overflow:hidden;
}
#why-us::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(76,175,113,0.10) 0%, transparent 40%);
  pointer-events:none;
}

.home-trust-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  position:relative;
  z-index:1;
}
.home-trust-card{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-md);
  padding:30px 26px;
  box-shadow:0 16px 36px -12px rgba(0,0,0,0.40);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.home-trust-card::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(110,231,183,0.7), transparent);
  opacity:0;
  transition:opacity .3s ease;
}
.home-trust-card:hover{
  transform:translateY(-6px);
  border-color:rgba(110,231,183,0.50);
  background:rgba(255,255,255,0.11);
  box-shadow:0 24px 48px -12px rgba(0,0,0,0.5), 0 0 28px -4px rgba(76,175,113,0.25);
}
.home-trust-card:hover::after{
  opacity:1;
}
.home-trust-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(74,222,128,0.22) 0%, rgba(26,122,60,0.40) 100%);
  border:1px solid rgba(110,231,183,0.45);
  box-shadow:0 0 16px rgba(74,222,128,0.20), inset 0 1px 1px rgba(255,255,255,0.2);
  color:#86EFAC;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  transition:transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.home-trust-card:hover .home-trust-icon{
  transform:scale(1.08) rotate(3deg);
  box-shadow:0 0 22px rgba(74,222,128,0.45);
  color:#FFFFFF;
}
.home-trust-card h3{
  font-family:var(--font-display);
  color:#FFFFFF;
  font-size:1.22rem;
  font-weight:700;
  margin:0 0 10px;
  line-height:1.3;
}
.home-trust-card p{
  color:rgba(255,255,255,0.84);
  font-size:.92rem;
  line-height:1.65;
  margin:0;
}

/* Home Stats Banner */
.home-stats-banner{
  background:linear-gradient(180deg, #092314 0%, #06190E 100%);
  color:#fff;
  padding:36px 0;
  border-top:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(255,255,255,0.09);
  position:relative;
}
.home-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.home-stat{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.11);
  border-radius:var(--radius-md);
  padding:22px 18px;
  text-align:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.home-stat:hover{
  transform:translateY(-3px);
  border-color:rgba(110,231,183,0.40);
  background:rgba(255,255,255,0.09);
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.35);
}
.home-stat-number{
  font-family:var(--font-sans);
  font-size:clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight:800;
  background:linear-gradient(135deg, #FFFFFF 25%, #86EFAC 75%, #34D399 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.05;
  margin-bottom:8px;
  letter-spacing:-0.02em;
}
.home-stat-label{
  font-size:.78rem;
  font-weight:700;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ---------- Home SEO Content Section ---------- */
.section-seo{
  background:#fff;
  border-top:1px solid var(--line);
}
.home-seo-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:20px;
}
.home-seo-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.home-seo-card:hover{
  border-color:rgba(26,122,60,0.30);
  box-shadow:0 8px 24px -6px rgba(15,43,29,0.08);
}
.home-seo-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.home-seo-icon{
  font-size:1.8rem;
  line-height:1;
  flex-shrink:0;
}
.home-seo-header h3{
  margin:0;
  font-size:1.15rem;
  color:var(--ink);
  line-height:1.3;
}
.home-seo-card p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.home-seo-links{
  margin-top:auto;
  padding-top:6px;
}
.home-seo-links a{
  font-size:.88rem;
  font-weight:600;
  color:var(--green);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:color .18s ease;
  text-decoration:none;
}
.home-seo-links a:hover{
  color:var(--green-dark);
  text-decoration:underline;
}
.home-seo-city-summary{
  margin-top:32px;
  padding:22px 26px;
  background:var(--paper-2);
  border-radius:var(--radius);
  border-left:4px solid var(--green);
}
.home-seo-city-summary h3{
  font-size:1.15rem;
  margin:0 0 8px;
  color:var(--ink);
}
.home-seo-city-summary p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* Responsive adjustments */
@media (max-width:960px){
  .home-hero-inner{
    grid-template-columns:1fr;
    gap:36px;
    padding-bottom:36px;
  }
  .home-hero-products{
    max-width:480px;
  }
  .home-product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .home-trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .home-stats-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
}
@media (max-width:640px){
  .home-hero-products{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .home-hero-product-card{
    padding:10px;
    border-radius:14px;
  }
  .home-hpc-name{
    font-size:.88rem;
  }
  .home-hpc-sub{
    display:none;
  }
  .home-product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
  .home-product-card{
    border-radius:14px;
  }
  .home-product-overlay{
    top:8px;
    left:8px;
  }
  .home-product-badge{
    font-size:.58rem;
    padding:3px 7px;
    gap:3px;
  }
  .home-product-body{
    padding:12px 10px 12px;
  }
  .home-product-meta{
    margin-bottom:4px;
    gap:4px;
  }
  .home-product-category{
    font-size:.62rem;
  }
  .home-product-tags{
    display:none;
  }
  .home-product-body h3{
    font-size:.88rem;
    margin-bottom:6px;
    line-height:1.25;
  }
  .home-product-body p{
    font-size:.74rem;
    line-height:1.4;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .home-product-varieties{
    display:none;
  }
  .home-product-actions{
    flex-direction:row;
    gap:6px;
    width:100%;
  }
  .home-product-actions .btn{
    flex:1;
    min-width:0;
    padding:.5em .4em;
    font-size:.74rem;
    border-radius:8px;
  }
  .btn-wa-icon{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:8px;
  }
  .btn-wa-icon svg{
    width:16px;
    height:16px;
  }
  .home-trust-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
  .home-trust-card{
    padding:18px 14px;
    border-radius:14px;
  }
  .home-trust-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    margin-bottom:12px;
  }
  .home-trust-icon svg{
    width:20px;
    height:20px;
  }
  .home-trust-card h3{
    font-size:.92rem;
    margin-bottom:6px;
    line-height:1.25;
  }
  .home-trust-card p{
    font-size:.74rem;
    line-height:1.45;
  }
  .home-stats-banner{
    padding:24px 0;
  }
  .home-stats-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .home-stat{
    padding:16px 10px;
    border-radius:12px;
  }
  .home-stat-number{
    font-size:1.6rem;
    margin-bottom:4px;
  }
  .home-stat-label{
    font-size:.68rem;
    letter-spacing:.05em;
  }
  .faq-grid{ gap:10px; }
  .faq-item{ border-radius:12px; }
  .faq-question{
    padding:13px 15px;
    font-size:.88rem;
    line-height:1.35;
    gap:10px;
  }
  .faq-icon{ width:16px; height:16px; }
  .faq-answer{
    padding:0 15px 14px;
    padding-top:10px;
    font-size:.80rem;
    line-height:1.45;
  }
  .home-seo-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .home-seo-card{
    padding:18px 16px;
    gap:10px;
    border-radius:14px;
  }
  .home-seo-icon{
    font-size:1.5rem;
  }
  .home-seo-header h3{
    font-size:1.02rem;
  }
  .home-seo-card p{
    font-size:.84rem;
    line-height:1.5;
  }
  .home-seo-links a{
    font-size:.84rem;
  }
  .home-seo-city-summary{
    padding:16px 14px;
    margin-top:20px;
    border-radius:12px;
  }
  .home-seo-city-summary h3{
    font-size:1.02rem;
    margin-bottom:6px;
  }
  .home-seo-city-summary p{
    font-size:.84rem;
    line-height:1.5;
  }
}
@media (max-width:480px){
  .home-hero-products{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .home-product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .home-product-body{
    padding:10px 8px 10px;
  }
  .home-product-body h3{
    font-size:.82rem;
  }
  .home-product-body p{
    font-size:.68rem;
  }
  .home-product-actions .btn{
    font-size:.70rem;
    padding:.45em .5em;
  }
  .home-trust-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .home-trust-card{
    padding:14px 10px;
    border-radius:12px;
  }
  .home-trust-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    margin-bottom:10px;
  }
  .home-trust-icon svg{
    width:18px;
    height:18px;
  }
  .home-trust-card h3{
    font-size:.84rem;
    margin-bottom:4px;
  }
  .home-trust-card p{
    font-size:.68rem;
    line-height:1.35;
  }
  .home-stat{
    padding:12px 8px;
  }
  .home-stat-number{
    font-size:1.45rem;
  }
  .home-stat-label{
    font-size:.62rem;
  }
  .faq-question{
    padding:12px 14px;
    font-size:.84rem;
  }
  .faq-answer{
    padding:0 14px 12px;
    font-size:.78rem;
  }
  .home-seo-card{
    padding:15px 12px;
  }
  .home-seo-header h3{
    font-size:.94rem;
  }
  .home-seo-card p{
    font-size:.80rem;
  }
  .home-seo-city-summary{
    padding:14px 12px;
  }
  .home-seo-city-summary h3{
    font-size:.94rem;
  }
  .home-seo-city-summary p{
    font-size:.80rem;
  }
}

/* ===========================================================
   BLOG SYSTEM STYLES (Grandma & Son Journal)
   =========================================================== */

/* --- Blog Hero --- */
.blog-hero {
  padding: 64px 0 44px;
  background: linear-gradient(180deg, #F2FAF4 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.blog-hero-content {
  max-width: 780px;
  margin: 0 auto;
}
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-light);
  color: var(--green);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.blog-hero-title {
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.15;
  margin-bottom: 16px;
}
.blog-hero-subtitle {
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 32px;
}

/* --- Blog Search Form --- */
.blog-search-form {
  max-width: 580px;
  margin: 0 auto;
}
.blog-search-box {
  display: flex;
  align-items: center;
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid rgba(26, 122, 60, 0.25);
  border-radius: 999px;
  padding: 6px 8px 6px 18px;
  box-shadow: 0 8px 24px -8px rgba(26, 122, 60, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-search-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 10px 28px -6px rgba(26, 122, 60, 0.2);
}
.blog-search-icon {
  color: var(--green);
  flex-shrink: 0;
  margin-right: 10px;
}
.blog-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: transparent;
  min-width: 0;
}
.blog-search-input::placeholder {
  color: #94A3B8;
}
.blog-search-clear {
  color: #94A3B8;
  font-weight: bold;
  padding: 0 8px;
  margin-right: 4px;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.blog-search-clear:hover {
  color: #E11D48;
}
.blog-search-btn {
  padding: 0.65em 1.4em !important;
  font-size: 0.92rem !important;
}

/* --- Category Pills --- */
.blog-categories-bar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-category-pills {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: #F8FAF8;
  border: 1px solid rgba(26, 122, 60, 0.18);
  white-space: nowrap;
  transition: all 0.18s ease;
}
.category-pill:hover {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green);
}
.category-pill.active {
  background: var(--green);
  color: #FFFFFF;
  border-color: var(--green);
  box-shadow: 0 4px 12px -3px rgba(26, 122, 60, 0.35);
}

/* --- Blog Post Listing Section --- */
.blog-posts-section {
  padding: 56px 0 72px;
}
.blog-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.blog-section-heading {
  font-size: 1.65rem;
  margin: 0;
  color: var(--ink);
}
.blog-posts-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  padding: 4px 12px;
  border-radius: 999px;
}

/* --- Blog Cards Grid --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 32px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 122, 60, 0.14);
  overflow: hidden;
  box-shadow: 0 4px 18px -6px rgba(26, 122, 60, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -12px rgba(26, 122, 60, 0.2);
  border-color: rgba(26, 122, 60, 0.32);
}
.blog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #EAF4EE;
  overflow: hidden;
}
.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.blog-card:hover .blog-card-img {
  transform: scale(1.05);
}
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E6F4EA 0%, #D1EAD8 100%);
  color: var(--green-deep);
}
.placeholder-emoji {
  font-size: 3rem;
  margin-bottom: 6px;
}
.placeholder-tag {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
}
.blog-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 35, 24, 0.86);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.blog-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #64748B;
  margin-bottom: 12px;
}
.blog-card-date, .blog-card-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.blog-meta-dot {
  color: #CBD5E1;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink);
  transition: color 0.18s ease;
}
.blog-card-title a {
  color: inherit;
}
.blog-card:hover .blog-card-title {
  color: var(--green);
}
.blog-card-excerpt {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.58;
  margin: 0 0 20px;
  flex: 1;
}
.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 122, 60, 0.1);
  font-size: 0.86rem;
}
.blog-author-text {
  color: #64748B;
  font-size: 0.82rem;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--green);
  transition: gap 0.2s ease, color 0.2s ease;
}
.blog-card:hover .blog-read-more {
  color: var(--green-dark);
  gap: 9px;
}

/* --- Empty State --- */
.blog-empty-state {
  text-align: center;
  padding: 64px 20px;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(26, 122, 60, 0.25);
  max-width: 580px;
  margin: 0 auto;
}
.blog-empty-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}
.blog-empty-title {
  font-size: 1.45rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.blog-empty-text {
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

/* --- Pagination Styles --- */
.blog-pagination-wrapper {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.blog-pagination-wrapper nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.blog-pagination-wrapper svg {
  width: 18px !important;
  height: 18px !important;
}

/* --- Blog Index Bottom CTA --- */
.blog-cta-banner {
  padding: 20px 0 80px;
}
.blog-cta-card {
  background: linear-gradient(135deg, #0F2A1A 0%, #164627 100%);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.blog-cta-eyebrow {
  color: var(--green-glow) !important;
  margin-bottom: 12px;
}
.blog-cta-copy h2 {
  color: #FFFFFF;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  margin-bottom: 16px;
  line-height: 1.2;
}
.blog-cta-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 28px;
}
.blog-cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.blog-cta-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}
.blog-cta-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.blog-cta-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.blog-cta-visual img {
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.15);
}

/* ===========================================================
   SINGLE ARTICLE SHOW PAGE
   =========================================================== */

.blog-preview-banner {
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
  color: #92400E;
  padding: 12px 0;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}
.blog-preview-banner .preview-badge {
  background: #F59E0B;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 8px;
  text-transform: uppercase;
}

.article-page {
  padding: 36px 0 72px;
}
.article-container {
  max-width: 840px;
  margin: 0 auto;
}

/* Breadcrumbs */
.article-breadcrumbs {
  margin-bottom: 28px;
}
.article-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: #64748B;
}
.article-breadcrumbs a {
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.article-breadcrumbs a:hover {
  color: var(--green);
}
.article-breadcrumbs li[aria-current="page"] {
  color: var(--green-dark);
  font-weight: 600;
}

/* Article Header */
.article-header {
  margin-bottom: 32px;
}
.article-category-wrap {
  margin-bottom: 16px;
}
.article-category-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 5px 14px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.article-category-badge:hover {
  background: var(--green);
  color: #FFFFFF;
}
.article-title {
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  line-height: 1.18;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 24px;
}
.article-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
}
.article-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.author-name {
  display: block;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
}
.author-title {
  display: block;
  font-size: 0.8rem;
  color: #64748B;
}
.article-meta-details {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #64748B;
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-dot {
  color: #CBD5E1;
}

/* Featured Image */
.article-featured-media {
  margin: 32px 0 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.15);
  background: #F1F5F2;
}
.article-featured-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Lead Excerpt */
.article-lead-excerpt {
  background: var(--paper-2);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
  margin: 28px 0 36px;
}
.article-lead-excerpt p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.68;
  color: var(--ink);
  font-weight: 500;
}

/* Rendered Article Typography */
.article-body {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.82;
  color: #223328;
  margin-bottom: 48px;
}
.article-body p {
  margin-bottom: 22px;
  color: #26382D;
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.28;
  color: var(--green-deep);
  margin: 44px 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26, 122, 60, 0.15);
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.32;
  color: var(--ink);
  margin: 32px 0 14px;
}
.article-body h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green-dark);
  margin: 24px 0 10px;
}
.article-body ul, .article-body ol {
  margin: 0 0 24px 0;
  padding-left: 28px;
}
.article-body ul li {
  list-style-type: disc;
  margin-bottom: 10px;
  line-height: 1.7;
}
.article-body ol li {
  list-style-type: decimal;
  margin-bottom: 10px;
  line-height: 1.7;
}
.article-body blockquote {
  background: #F4FAF6;
  border-left: 4px solid var(--green);
  padding: 20px 26px;
  margin: 32px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--green-deep);
}
.article-body strong {
  color: var(--ink);
  font-weight: 600;
}
.article-body a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.article-body a:hover {
  color: var(--green-dark);
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 28px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.96rem;
}
.article-body table th, .article-body table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
}
.article-body table th {
  background: var(--paper-2);
  font-weight: 600;
  color: var(--green-deep);
}

/* --- Social Share Bar --- */
.article-share-bar {
  background: #F8FAF8;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  margin: 44px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.share-prompt-label {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
}
.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-share-whatsapp {
  background: #25D366;
  color: #FFFFFF;
}
.btn-share-whatsapp:hover {
  background: #1EBE5D;
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-share-copy {
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--line);
}
.btn-share-copy:hover {
  background: var(--paper-2);
  border-color: var(--green);
  color: var(--green);
}
.btn-share-copy.copied {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green);
}
.btn-share-back {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
.btn-share-back:hover {
  color: var(--green);
}

/* --- Author / Brand Box --- */
.article-author-box {
  background: linear-gradient(135deg, #F2FAF4 0%, #FFFFFF 100%);
  border: 1.5px solid rgba(26, 122, 60, 0.22);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 40px 0;
}
.author-box-avatar {
  font-size: 2.8rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50%;
  border: 2px solid var(--green);
  box-shadow: 0 4px 14px rgba(26, 122, 60, 0.15);
  flex-shrink: 0;
}
.author-box-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.author-box-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: 0 0 10px;
}
.author-box-desc {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.author-box-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green);
}
.author-box-links a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.author-box-links a:hover {
  color: var(--green-dark);
}

/* --- Related Articles --- */
.related-articles-section {
  border-top: 1px solid var(--line);
  padding: 64px 0;
}
.related-blog-grid {
  margin-top: 40px;
}

/* --- Blog Single CTA --- */
.blog-single-cta {
  padding: 72px 0;
}

/* Responsive adjustments */
@media (max-width: 840px) {
  .blog-cta-card {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 28px;
    text-align: center;
  }
  .blog-cta-actions {
    justify-content: center;
  }
  .blog-cta-visual img {
    max-height: 240px;
  }
  .article-author-box {
    flex-direction: column;
    padding: 24px;
    align-items: center;
    text-align: center;
  }
  .author-box-links {
    justify-content: center;
  }
  .article-share-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .blog-hero {
    padding: 40px 0 28px;
  }
  .blog-search-box {
    padding: 4px 6px 4px 14px;
  }
  .blog-search-btn {
    padding: 0.55em 1em !important;
  }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .blog-card {
    border-radius: 12px;
  }
  .blog-card-media {
    aspect-ratio: 16 / 11;
  }
  .blog-card-badge {
    top: 6px;
    left: 6px;
    font-size: 0.65rem;
    padding: 2px 7px;
  }
  .placeholder-emoji {
    font-size: 1.8rem;
    margin-bottom: 2px;
  }
  .placeholder-tag {
    font-size: 0.62rem;
  }
  .blog-card-body {
    padding: 10px 10px 12px;
  }
  .blog-card-meta {
    font-size: 0.68rem;
    gap: 4px;
    margin-bottom: 5px;
    flex-wrap: wrap;
  }
  .blog-card-meta svg {
    width: 10px;
    height: 10px;
  }
  .blog-card-title {
    font-size: 0.88rem;
    line-height: 1.25;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-excerpt {
    font-size: 0.75rem;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-footer {
    padding-top: 8px;
    font-size: 0.74rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .blog-author-text {
    font-size: 0.68rem;
  }
  .blog-read-more {
    font-size: 0.74rem;
    gap: 3px;
  }
  .blog-read-more svg {
    width: 11px;
    height: 11px;
  }
  .article-meta-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-title {
    font-size: 1.85rem;
  }
}

@media (max-width: 420px) {
  .blog-grid {
    gap: 8px;
  }
  .blog-card-body {
    padding: 8px 6px 10px;
  }
  .blog-card-title {
    font-size: 0.82rem;
  }
  .blog-card-excerpt {
    display: none;
  }
}

/* ==========================================================================
   BLOG & FRONTEND PAGINATION
   ========================================================================== */
.blog-pagination-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.blog-pagination-wrapper nav[role="navigation"] {
  width: 100%;
}

.blog-pagination-wrapper nav[role="navigation"] svg,
svg.w-5,
svg.h-5 {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@media (min-width: 641px) {
  .blog-pagination-wrapper nav[role="navigation"] .sm\:hidden {
    display: none !important;
  }
  .blog-pagination-wrapper nav[role="navigation"] .hidden.sm\:flex-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .blog-pagination-wrapper nav[role="navigation"] .sm\:hidden {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .blog-pagination-wrapper nav[role="navigation"] .hidden.sm\:flex-1 {
    display: none !important;
  }
}

.blog-pagination-wrapper nav[role="navigation"] a,
.blog-pagination-wrapper nav[role="navigation"] span.inline-flex > span,
.blog-pagination-wrapper nav[role="navigation"] span.inline-flex > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.15s ease;
  margin: 0 2px;
}

.blog-pagination-wrapper nav[role="navigation"] a:hover {
  background: var(--paper-warm);
  color: var(--primary);
}

.blog-pagination-wrapper nav[role="navigation"] span[aria-current="page"] span,
.blog-pagination-wrapper nav[role="navigation"] .bg-gray-200 {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  font-weight: 600;
}

/* ===========================================================
   Policy & Legal Pages (Shipping Policy, etc.)
=========================================================== */
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-bottom-links a:hover {
  color: var(--green-glow);
  text-decoration: underline;
}
.footer-bottom-sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.35);
}

.policy-page {
  padding: 44px 0 72px;
  background: #FCFDFD;
}
.policy-container {
  max-width: 820px;
  margin: 0 auto;
}
.policy-header {
  margin-bottom: 24px;
}
.policy-title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.2;
  margin-bottom: 12px;
}
.policy-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-2);
  border-left: 4px solid var(--green);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 28px;
}
.policy-card-body {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.05);
}
.policy-item {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(26, 122, 60, 0.12);
}
.policy-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.policy-item h2,
.policy-item h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--green-deep);
  margin-bottom: 8px;
  line-height: 1.3;
}
.policy-item p {
  font-size: 1rem;
  line-height: 1.68;
  color: #26382D;
  margin-bottom: 8px;
}
.policy-item p:last-child {
  margin-bottom: 0;
}
.policy-item a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
}
.policy-item a:hover {
  color: var(--green-dark);
}
.policy-note {
  font-size: 0.92rem;
  color: #64748B;
  margin-top: 4px;
}
.policy-contact-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.policy-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-light);
  color: var(--green-dark) !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.policy-contact-chip:hover {
  background: var(--green);
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .policy-page {
    padding: 24px 0 50px;
  }
  .policy-card-body {
    padding: 22px 18px;
  }
  .policy-title {
    font-size: 1.85rem;
  }
}