/* =========================================================
   Gluten Free Delhi — Design System
   Palette pulled from the packaging: parchment cream, deep
   heritage green, terracotta (Old Delhi sandstone), teal and
   marigold gold.
   ========================================================= */

:root{
  --cream:        #F4ECDD;
  --cream-soft:   #FBF6EC;
  --paper:        #FFFDF8;
  --ink:          #26221C;
  --ink-soft:     #55503F;
  --green:        #1F4D3C;
  --green-dark:   #163527;
  --green-tint:   #E4EDE4;
  --terracotta:   #C1613D;
  --terracotta-dark:#9C4B2E;
  --teal:         #1B5A63;
  --gold:         #D99A3D;
  --gold-soft:    #F0C878;
  --maroon:       #7A2E2E;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(38,34,28,.08);
  --shadow-md: 0 10px 30px rgba(38,34,28,.12);
  --shadow-lg: 0 24px 60px rgba(38,34,28,.18);

  --ease: cubic-bezier(.22,1,.36,1);
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .4em; line-height:1.15; color: var(--green-dark); }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
.container{ width:min(1200px, 92%); margin-inline:auto; }
section{ position:relative; }

::selection{ background: var(--gold-soft); color: var(--green-dark); }

/* scrollbar flavor */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--terracotta); border-radius:10px; }

/* =================== Utility =================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem; color:var(--terracotta-dark);
}
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--terracotta);
  display:inline-block;
}
.text-center{ text-align:center; }
.section-head{ max-width:640px; margin-bottom:2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: .95em 1.9em;
  border-radius: 999px;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  border:2px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background: var(--terracotta); color:var(--cream-soft); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--terracotta-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-dark{ background: var(--green); color:var(--cream-soft); }
.btn-dark:hover{ background: var(--green-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-outline{ background:transparent; border-color: var(--green); color: var(--green); }
.btn-outline:hover{ background: var(--green); color:var(--cream-soft); transform: translateY(-3px); }
.btn-ghost{ background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-ghost:hover{ background:#fff; color:var(--green-dark); }
.btn-sm{ padding:.6em 1.3em; font-size:.82rem; }
.btn:active{ transform: scale(.96); }

.badge{
  display:inline-flex; align-items:center; gap:.4em;
  background: var(--green-tint); color: var(--green-dark);
  border-radius:999px; padding:.35em .9em; font-size:.72rem; font-weight:600;
  letter-spacing:.03em;
}
.badge svg{ width:14px; height:14px; }

/* =================== Nav =================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:150;
  padding: 1.1rem 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header.scrolled{
  padding:.65rem 0; background: rgba(244,236,221,.9); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.logo{ display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); font-weight:600; }
.logo .mark{
  width:42px; height:42px; border-radius:50%;
  background: var(--green); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease);
}
.logo:hover .mark{ transform: rotate(-14deg) scale(1.06); }
.logo .word{ line-height:1.05; }
.logo .word b{ display:block; font-size:1.18rem; color: var(--green-dark); }
.logo .word span{ display:block; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color: var(--terracotta-dark); font-family: var(--font-body); font-weight:600;}

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  position:relative; font-weight:500; font-size:.95rem; color: var(--ink);
  padding:.3em 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
  background: var(--terracotta); transition: width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--terracotta-dark); }

.nav-actions{ display:flex; align-items:center; gap:1rem; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper); border:1px solid rgba(38,34,28,.12);
  transition: transform .3s var(--ease), background .3s;
}
.icon-btn:hover{ transform: translateY(-2px); background: var(--green-tint); }
.icon-btn svg{ width:19px; height:19px; }
.cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--terracotta);
  color:#fff; font-size:.65rem; font-weight:700; width:19px; height:19px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transform: scale(0); transition: transform .3s var(--ease);
}
.cart-count.show{ transform: scale(1); }

.nav-toggle{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(38,34,28,.12); background:var(--paper); align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition: all .3s var(--ease);
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top:0; transform: rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform: rotate(-45deg); }

/* =================== Marquee =================== */
.marquee{
  background: var(--green); color: var(--cream-soft);
  overflow:hidden; white-space:nowrap; padding: .85rem 0;
}
.marquee-track{ display:inline-flex; gap:2.5rem; animation: marquee 26s linear infinite; }
.marquee span{ font-family: var(--font-display); font-size:1rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:2.5rem; }
.marquee .dot{ color: var(--gold-soft); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* =================== Hero =================== */
.hero{
  padding: 9.5rem 0 6rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,154,61,.16), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(27,90,99,.14), transparent 40%),
    var(--cream);
  overflow:hidden;
  position:relative;
}
.hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap:3rem; align-items:center; }
.hero-copy .eyebrow{ margin-bottom:1.1rem; }
.hero-copy h1{
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  color: var(--green-dark);
}
.hero-copy h1 em{ font-style:normal; color: var(--terracotta); position:relative; }
.hero-copy p.lede{ font-size:1.08rem; color: var(--ink-soft); max-width:480px; margin-bottom:1.9rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero-stats{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-family:var(--font-display); font-size:1.6rem; color: var(--green-dark); }
.hero-stats div span{ font-size:.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-art .ring{
  position:absolute; width:118%; height:118%; border-radius:50%;
  border: 1.5px dashed rgba(31,77,60,.25);
  animation: spin 42s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero-art .blob{
  position:absolute; inset:6%; border-radius:50%;
  background: linear-gradient(160deg, var(--gold-soft), var(--terracotta) 60%, var(--teal));
  opacity:.22; filter: blur(6px);
  animation: float 7s ease-in-out infinite;
}
.hero-art img.product{
  position:relative; z-index:2; width:88%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0px) rotate(0deg);} 50%{ transform: translateY(-16px) rotate(-1.4deg);} }
.hero-art .chip{
  position:absolute; z-index:3; background: var(--paper); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding:.8rem 1.05rem; display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600; animation: floaty 5s ease-in-out infinite;
}
.hero-art .chip svg{ width:20px; height:20px; color: var(--green); }
.hero-art .chip.chip-1{ top:6%; left:-6%; animation-delay:.3s; }
.hero-art .chip.chip-2{ bottom:10%; right:-8%; animation-delay:1.1s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.landmark-strip{ position:absolute; left:0; right:0; bottom:-2px; opacity:.5; }

/* =================== Home-page entrance & ambient animations =================== */
/* Whole-page load fade */
body{ animation: page-in .6s ease-out; }
@keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }

/* Floating bakery elements (cookies, wheat, leaves) */
.bakery-float{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.bakery-float svg{
  position:absolute; opacity:.16; color: var(--terracotta);
  animation: bakery-bob var(--bt,7s) ease-in-out infinite alternate;
  animation-delay: var(--bd,0s);
}
.bakery-float .bf-wheat{ color: var(--gold); }
.bakery-float .bf-leaf{ color: var(--green); }
.bakery-float .bf-choc{ color: var(--maroon); }
@keyframes bakery-bob{
  from{ transform: translateY(0) rotate(-6deg); }
  to  { transform: translateY(-26px) rotate(8deg); }
}

/* Button ripple */
.btn, .add-btn, .filter-chip{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.5); transform: scale(0); opacity:.7;
  animation: ripple-out .55s ease-out forwards;
}
@keyframes ripple-out{ to{ transform: scale(2.6); opacity:0; } }

/* Zoom-in reveal variant */
.reveal-zoom{ opacity:0; transform: scale(.92); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-zoom.in{ opacity:1; transform: scale(1); }
.reveal-stagger.zoom > *{ opacity:0; transform: scale(.92) translateY(14px); }
.reveal-stagger.zoom.in > *{ opacity:1; transform: scale(1) translateY(0); }

/* Testimonial micro-interaction */
.t-card{ transition: transform .45s var(--ease), border-color .45s var(--ease); }
.t-card:hover{ transform: translateY(-6px); border-color: var(--gold-soft); }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
  z-index:300; transition: width .1s linear;
}
.line-mask{ display:block; overflow:hidden; }
.line{ display:block; }
.rise-in{
  opacity:0; transform: translateY(115%);
  animation: rise-in .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise-in{
  to{ opacity:1; transform: translateY(0); }
}
/* non-headline .rise-in elements start lower-key */
p.rise-in, div.rise-in, span.rise-in{ transform: translateY(26px); }

/* Canvas particle field: falling crumbs + rising flour (GoldenCrumb-style) */
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* Biscuits drifting across the full hero */
.drifter{
  position:absolute; left:0; pointer-events:none; opacity:.65; z-index:0;
  animation: drift-across var(--dt,30s) linear infinite;
  animation-delay: var(--dd,0s);
}
@keyframes drift-across{
  0%  { transform: translateX(-10vw) translateY(0) rotate(0deg); }
  100%{ transform: translateX(110vw) translateY(-40px) rotate(360deg); }
}

/* Light-leak wash over the hero */
.light-leak{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(240,200,120,.30), transparent 60%),
    radial-gradient(50% 40% at 85% 20%, rgba(193,97,61,.16), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(27,90,99,.10), transparent 65%);
}

/* Gradient headline accent */
.text-gradient-warm{
  background: linear-gradient(120deg, var(--terracotta-dark), var(--terracotta) 40%, var(--gold) 60%, var(--terracotta-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Continuous shimmer on the hero CTA */
.btn-shimmer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.8s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }

/* Steam wisps above the hero product */
.steam{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); display:flex; gap:8px; pointer-events:none; z-index:3; }
.steam span{
  width:6px; height:56px; border-radius:999px; filter: blur(2px);
  background: linear-gradient(to top, transparent, rgba(255,253,248,.85), transparent);
  animation: steam-rise 3.2s ease-out infinite;
}
.steam span:nth-child(2){ animation-delay:.9s; }
.steam span:nth-child(3){ animation-delay:1.8s; }
@keyframes steam-rise{
  0%  { transform: translateY(0) scaleX(1); opacity:0; }
  15% { opacity:.7; }
  100%{ transform: translateY(-70px) scaleX(1.6); opacity:0; }
}

/* Mouse-tilt 3D card */
.hero-art{ perspective: 900px; }
.tilt-card{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%;
  transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out;
}

/* Eyebrow pulse dot */
.pulse-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--terracotta);
  margin-right:.2em; animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.25); opacity:.7; } }

/* Bouncing scroll cue */
.scroll-cue{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  color: var(--ink-soft); opacity:.55; z-index:2;
  animation: cue-bob 1.8s ease-in-out infinite;
}
.scroll-cue svg{ width:22px; height:22px; }
@keyframes cue-bob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(8px); } }

/* shine sweep on primary buttons */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover::after{ animation: btn-shine .8s var(--ease); }
@keyframes btn-shine{ to{ left:130%; } }

/* marquee: pause when hovered */
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* fade-in-up reveal */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .55s; }

/* =================== Story teaser =================== */
.story-teaser{ padding: 6.5rem 0; }
.story-teaser .container{ display:grid; grid-template-columns: .9fr 1.1fr; gap:4rem; align-items:center; }
.story-teaser .frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg);
}
.story-teaser .frame img{ transition: transform .8s var(--ease); }
.story-teaser .frame:hover img{ transform: scale(1.06); }
.story-teaser .frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(22,53,39,.55));
}
.story-teaser .frame .tag{
  position:absolute; left:1.4rem; bottom:1.4rem; color:#fff; z-index:2;
  font-family: var(--font-hand); font-size:1.7rem;
}
.story-teaser blockquote{
  font-family: var(--font-display); font-size:1.5rem; color: var(--green-dark);
  border-left:3px solid var(--terracotta); padding-left:1.2rem; margin: 1.4rem 0;
  font-weight:500;
}
.timeline-mini{ display:flex; gap:1.4rem; margin-top:1.6rem; flex-wrap:wrap; }
.timeline-mini div{ flex:1; min-width:120px; }
.timeline-mini b{ display:block; font-family:var(--font-display); color:var(--terracotta-dark); font-size:1.1rem; }
.timeline-mini span{ font-size:.82rem; color:var(--ink-soft); }

/* =================== Product cards =================== */
.section-products{ padding: 6.5rem 0; background: var(--cream-soft); position:relative; }
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.8rem; }
.product-card{
  background: var(--paper); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.product-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; background: var(--green-tint); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.09) rotate(-1deg); }
.product-media .fav{
  position:absolute; top:.8rem; right:.8rem; width:36px; height:36px; border-radius:50%;
  background: rgba(255,253,248,.9); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease);
}
.product-media .fav:hover{ transform: scale(1.15); color: var(--terracotta); }
.product-media .ribbon{
  position:absolute; top:.9rem; left:-.4rem; background: var(--terracotta); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; padding:.35em .9em .35em 1.1em;
  border-radius: 0 6px 6px 0; box-shadow: var(--shadow-sm);
}
.product-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.product-body .cat{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--teal); font-weight:600; }
.product-body h3{ font-size:1.16rem; margin:0; }
.product-body p{ font-size:.85rem; color: var(--ink-soft); margin:0; flex:1; }
.product-badges{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.price{ font-family: var(--font-display); font-size:1.25rem; color: var(--green-dark); font-weight:600; }
.price small{ font-family: var(--font-body); font-size:.72rem; color: var(--ink-soft); text-decoration: line-through; margin-left:.4em; font-weight:400;}
.add-btn{
  width:42px; height:42px; border-radius:50%; background: var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; transition: transform .3s var(--ease), background .3s;
  position:relative; overflow:hidden;
}
.add-btn svg{ width:18px; height:18px; }
.add-btn:hover{ background: var(--terracotta); transform: rotate(90deg); }
.add-btn.added{ background: var(--teal); }

/* =================== Marquee small taglines / values =================== */
.value-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem; }
.value-card{
  background: var(--paper); border-radius: var(--radius-md); padding: 1.9rem 1.5rem;
  box-shadow: var(--shadow-sm); text-align:center; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.value-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.value-card .ico{
  width:58px; height:58px; border-radius:50%; margin:0 auto 1rem; background: var(--green-tint); color: var(--green);
  display:flex; align-items:center; justify-content:center; transition: transform .5s var(--ease);
}
.value-card:hover .ico{ transform: scale(1.12) rotate(-8deg); background: var(--gold-soft); color: var(--green-dark); }
.value-card .ico svg{ width:26px; height:26px; }
.value-card h4{ font-size:1.02rem; margin-bottom:.35rem; }
.value-card p{ font-size:.84rem; color: var(--ink-soft); margin:0; }

/* =================== Testimonials =================== */
.testimonials{ padding:6.5rem 0; background: var(--green); color: var(--cream-soft); overflow:hidden; position:relative; }
.testimonials::before{
  content:""; position:absolute; inset:0; opacity:.08;
  background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.testimonials .section-head h2{ color:#fff; }
.testimonials .section-head p{ color: rgba(244,236,221,.75); }
.t-track{ display:flex; gap:1.6rem; transition: transform .6s var(--ease); }
.t-card{
  flex: 0 0 calc(33.333% - 1.1rem); background: rgba(255,253,248,.06); border:1px solid rgba(244,236,221,.18);
  border-radius: var(--radius-md); padding:1.8rem; backdrop-filter: blur(4px);
}
.t-stars{ color: var(--gold-soft); letter-spacing:.15em; margin-bottom:.8rem; }
.t-card p{ font-size:.94rem; color: rgba(244,236,221,.92); }
.t-who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.t-who .av{ width:38px; height:38px; border-radius:50%; background: var(--gold-soft); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display);}
.t-who b{ display:block; font-size:.86rem; }
.t-who span{ font-size:.74rem; color: rgba(244,236,221,.65); }
.t-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:2.2rem; }
.t-dots button{ width:9px; height:9px; border-radius:50%; background: rgba(244,236,221,.35); border:none; transition: all .3s var(--ease); }
.t-dots button.active{ width:26px; border-radius:6px; background: var(--gold-soft); }

/* =================== Newsletter =================== */
.newsletter{ padding: 5.5rem 0; }
.newsletter .box{
  background: linear-gradient(120deg, var(--terracotta), var(--maroon));
  border-radius: var(--radius-lg); padding: 3.2rem; color:#fff; position:relative; overflow:hidden;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;
}
.newsletter .box::before{
  content:"✦"; position:absolute; font-size:14rem; opacity:.08; right:-2rem; top:-4rem; font-family:var(--font-display);
}
.newsletter h2{ color:#fff; }
.newsletter form{ display:flex; gap:.7rem; }
.newsletter input{
  flex:1; padding: 1em 1.2em; border-radius:999px; border:none; font-family:inherit; font-size:.92rem;
  outline: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .3s;
}
.newsletter input:focus{ box-shadow: inset 0 0 0 2px var(--gold-soft); }
.newsletter .note{ font-size:.78rem; opacity:.8; margin-top:.6rem; }

/* =================== Footer =================== */
.site-footer{ background: var(--green-dark); color: rgba(244,236,221,.85); padding: 4.5rem 0 0; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(244,236,221,.15); }
.footer-grid h5{ color: var(--gold-soft); font-family: var(--font-body); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-grid li{ margin-bottom:.6rem; font-size:.9rem; }
.footer-grid a:hover{ color: var(--gold-soft); }
.footer-logo{ display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; }
.footer-logo .mark{ width:40px; height:40px; border-radius:50%; background: var(--gold-soft); color: var(--green-dark); display:flex; align-items:center; justify-content:center; font-weight:700; }
.footer-logo b{ font-family: var(--font-display); font-size:1.1rem; color:#fff; }
.social-row{ display:flex; gap:.7rem; margin-top:1.2rem; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,236,221,.3); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); }
.social-row a:hover{ background: var(--gold-soft); color: var(--green-dark); transform: translateY(-3px); }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:1.6rem 0; font-size:.8rem; flex-wrap:wrap; gap:.6rem; }
.skyline{ width:100%; height:70px; display:block; opacity:.5; }

/* =================== Page header (interior pages) =================== */
.page-hero{
  padding: 10.5rem 0 5rem; text-align:center;
  background: radial-gradient(circle at 50% 0%, rgba(217,154,61,.18), transparent 55%), var(--cream);
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.page-hero p{ max-width:560px; margin-inline:auto; color: var(--ink-soft); }
.breadcrumb{ display:flex; gap:.5rem; justify-content:center; font-size:.82rem; color: var(--ink-soft); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color: var(--terracotta); }

/* toast */
.toast-wrap{ position:fixed; bottom:6.4rem; right:1.6rem; z-index:400; display:flex; flex-direction:column; gap:.7rem; }
.toast{
  background: var(--green-dark); color:#fff; padding:.9rem 1.3rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); display:flex; align-items:center; gap:.7rem; font-size:.88rem;
  transform: translateX(120%); opacity:0; transition: all .45s var(--ease);
}
.toast.show{ transform: translateX(0); opacity:1; }
.toast svg{ width:18px; height:18px; color: var(--gold-soft); flex:none; }

/* cart drawer */
.overlay{ position:fixed; inset:0; background: rgba(22,20,15,.5); z-index:140; opacity:0; pointer-events:none; transition: opacity .4s var(--ease); backdrop-filter: blur(2px); }
.overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 92vw); background: var(--cream-soft); z-index:160;
  transform: translateX(100%); transition: transform .5s var(--ease); display:flex; flex-direction:column;
  box-shadow: -20px 0 50px rgba(0,0,0,.2);
}
.cart-drawer.open{ transform: translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid rgba(38,34,28,.1); }
.cart-head h3{ margin:0; }
.cart-close{ width:36px; height:36px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; transition: transform .3s; }
.cart-close:hover{ transform: rotate(90deg); }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-item{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px dashed rgba(38,34,28,.15); align-items:center; }
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:10px; }
.cart-item .info{ flex:1; }
.cart-item .info b{ font-size:.9rem; display:block; }
.cart-item .info span{ font-size:.78rem; color: var(--ink-soft); }
.qty{ display:flex; align-items:center; gap:.5rem; margin-top:.4rem; }
.qty button{ width:24px; height:24px; border-radius:50%; border:1px solid rgba(38,34,28,.2); background:#fff; font-size:.8rem; }
.cart-item .remove{ color: var(--terracotta); font-size:.75rem; margin-left:auto; }
.cart-empty{ text-align:center; padding:3rem 1rem; color: var(--ink-soft); }
.cart-foot{ padding:1.4rem 1.5rem 1.8rem; border-top:1px solid rgba(38,34,28,.1); }
.cart-foot .row{ display:flex; justify-content:space-between; margin-bottom:1rem; font-family: var(--font-display); font-size:1.15rem; }
.cart-foot .btn{ width:100%; }

/* =================== Shop filters =================== */
.filter-bar{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-bottom:3rem; }
.filter-chip{
  padding:.6em 1.3em; border-radius:999px; border:1.5px solid rgba(38,34,28,.15); background: var(--paper);
  font-size:.85rem; font-weight:600; transition: all .3s var(--ease);
}
.filter-chip:hover{ border-color: var(--terracotta); }
.filter-chip.active{ background: var(--green); border-color: var(--green); color:#fff; }
.product-grid.shop-grid .product-card{ transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .4s, filter .4s; }
.product-card.hide{ display:none; }

/* =================== Timeline (story page) =================== */
.timeline{ position:relative; max-width:760px; margin-inline:auto; padding: 2rem 0; }
.timeline::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: repeating-linear-gradient(to bottom, var(--terracotta) 0 8px, transparent 8px 16px);
}
.t-item{ position:relative; padding-left:70px; margin-bottom:3rem; }
.t-item .yr-dot{
  position:absolute; left:0; top:0; width:50px; height:50px; border-radius:50%;
  background: var(--paper); border:2px solid var(--terracotta); color: var(--terracotta-dark);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:.78rem;
  box-shadow: var(--shadow-sm);
}
.t-item h4{ margin-bottom:.3rem; }
.t-item p{ color: var(--ink-soft); font-size:.92rem; margin:0; }

/* Story sections */
.narrative{ padding: 5rem 0; }
.narrative .container{ max-width:820px; }
.narrative h2{ font-size:2rem; margin-top:2.2rem; }

/* Privacy / legal pages */
.policy-toc{
  display:flex; flex-wrap:wrap; gap:.6rem; background: var(--paper); border-radius: var(--radius-md);
  padding:1.4rem 1.6rem; box-shadow: var(--shadow-sm); margin-bottom:2.6rem;
}
.policy-toc a{
  font-size:.8rem; font-weight:600; color: var(--green-dark); background: var(--green-tint);
  padding:.45em 1em; border-radius:999px; transition: all .3s var(--ease);
}
.policy-toc a:hover{ background: var(--terracotta); color:#fff; transform: translateY(-2px); }
.policy-list{ margin: 0 0 1.4rem; padding-left:0; }
.policy-list li{
  position:relative; padding-left:1.6rem; margin-bottom:.7rem; font-size:.96rem; color: var(--ink-soft);
}
.policy-list li::before{
  content:"✦"; position:absolute; left:0; top:.05em; color: var(--terracotta); font-size:.8rem;
}
.policy-list li b{ color: var(--green-dark); }
@media (max-width:720px){
  .policy-toc{ padding:1.1rem 1.2rem; }
}
.narrative .drop::first-letter{
  font-family: var(--font-display); font-size:3.6rem; float:left; line-height:.8;
  padding: .1em .12em 0 0; color: var(--terracotta); font-weight:600;
}
.pull-quote{
  font-family: var(--font-hand); font-size:2.1rem; color: var(--green); text-align:center;
  margin: 2.5rem auto; max-width:640px; line-height:1.3;
}
.founder-card{
  display:flex; gap:2rem; align-items:center; background: var(--paper); border-radius: var(--radius-lg);
  padding: 2.2rem; box-shadow: var(--shadow-sm); margin: 3rem 0;
}
.founder-card .ph{
  width:120px; height:120px; border-radius:50%; flex:none; background: var(--green-tint);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2.2rem; color:var(--green);
  border: 3px solid var(--gold-soft);
}
.founder-card p{ margin:0; font-style:italic; color: var(--ink-soft); }
.founder-card b{ color: var(--green-dark); }

.gallery-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin: 3rem 0; }
.gallery-strip img{ border-radius: var(--radius-md); aspect-ratio:1; object-fit:cover; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease); }
.gallery-strip img:hover{ transform: scale(1.05) rotate(-1deg); z-index:2; box-shadow: var(--shadow-md); }
.gallery-strip div:nth-child(2){ margin-top:1.6rem; }
.gallery-strip div:nth-child(4){ margin-top:-1.6rem; }

/* =================== Contact page =================== */
.contact-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap:3rem; padding: 5rem 0 7rem; }
.contact-info .info-row{ display:flex; gap:1rem; margin-bottom:1.6rem; }
.contact-info .ico{ width:46px; height:46px; border-radius:50%; background: var(--green-tint); color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info .ico svg{ width:20px; height:20px; }
.contact-info h4{ margin-bottom:.2rem; font-size:1rem; }
.contact-info p{ margin:0; color: var(--ink-soft); font-size:.9rem; }
.contact-form{ background: var(--paper); border-radius: var(--radius-lg); padding:2.4rem; box-shadow: var(--shadow-md); }
.field{ margin-bottom:1.3rem; position:relative; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color: var(--green-dark); }
.field input, .field textarea{
  width:100%; padding: .9em 1em; border-radius: var(--radius-sm); border:1.5px solid rgba(38,34,28,.15);
  font-family:inherit; font-size:.92rem; outline:none; transition: border-color .3s, box-shadow .3s; background:#fff;
}
.field input:focus, .field textarea:focus{ border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(193,97,61,.12); }
.field textarea{ resize:vertical; min-height:120px; }
.map-frame{ margin-top:2rem; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); height:220px; background: var(--green-tint); display:flex; align-items:center; justify-content:center; color: var(--green); position:relative; }

/* =================== Responsive =================== */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero{ padding-top:8rem; text-align:center; }
  .hero-copy p.lede{ margin-inline:auto; }
  .hero-actions, .hero-stats{ justify-content:center; }
  .hero-art{ margin-top:2rem; max-width:420px; margin-inline:auto; }
  .story-teaser .container{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .newsletter .box{ grid-template-columns:1fr; text-align:center; }
  .newsletter form{ justify-content:center; }
  .t-card{ flex: 0 0 100%; }
  .contact-wrap{ grid-template-columns:1fr; }
  .gallery-strip{ grid-template-columns: repeat(2,1fr); }
  .founder-card{ flex-direction:column; text-align:center; }
}
@media (max-width: 720px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(300px,80vw);
    background: var(--cream-soft); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 2rem; gap:1.6rem; transform: translateX(100%); transition: transform .45s var(--ease);
    box-shadow: -10px 0 40px rgba(0,0,0,.15); z-index:5;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:1rem; }
  .value-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap:2rem; }
  .newsletter form{ flex-direction:column; }
  .gallery-strip{ grid-template-columns: 1fr 1fr; }
  .whatsapp-widget{ width:54px; height:54px; right:1.1rem; bottom:1.1rem; }
  .whatsapp-widget svg{ width:28px; height:28px; }
  .toast-wrap{ right:1.1rem; bottom:5.6rem; }
}

/* =================== WhatsApp widget =================== */
.whatsapp-widget{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:130;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45), var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.whatsapp-widget svg{ width:30px; height:30px; position:relative; z-index:2; }
.whatsapp-widget:hover{ transform: scale(1.08) translateY(-2px); box-shadow: 0 10px 30px rgba(37,211,102,.6), var(--shadow-lg); }
.whatsapp-widget::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation: wa-pulse 2.4s ease-out infinite; z-index:1;
}
@keyframes wa-pulse{
  0%{ transform: scale(1); opacity:.55; }
  100%{ transform: scale(1.9); opacity:0; }
}
.whatsapp-widget .wa-tip{
  position:absolute; right:72px; top:50%; transform: translateY(-50%) translateX(6px);
  background: var(--green-dark); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap;
  padding:.55em 1em; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.whatsapp-widget:hover .wa-tip{ opacity:1; transform: translateY(-50%) translateX(0); }

/* =================== Bulk order page =================== */
.newsletter .box.box-teal{ background: linear-gradient(120deg, var(--teal), var(--green-dark)); }
.bulk-form-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap:3rem; padding: 4rem 0 7rem; align-items:start; }
.bulk-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.3rem; }
.field select{
  width:100%; padding:.9em 1em; border-radius: var(--radius-sm); border:1.5px solid rgba(38,34,28,.15);
  font-family:inherit; font-size:.92rem; outline:none; background:#fff; color:var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
.field select:focus{ border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(193,97,61,.12); }
.field .err{ display:none; color:#B3261E; font-size:.75rem; margin-top:.3rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#B3261E; }
.field.invalid .err{ display:block; }
.form-success{
  display:none; text-align:center; padding:3rem 2rem; background: var(--green-tint);
  border-radius: var(--radius-lg);
}
.form-success.show{ display:block; animation: success-pop .6s var(--ease); }
.form-success .tick{
  width:72px; height:72px; border-radius:50%; background: var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
}
.form-success .tick svg{ width:34px; height:34px; }
@keyframes success-pop{ 0%{ transform: scale(.8); opacity:0; } 60%{ transform: scale(1.04); } 100%{ transform: scale(1); opacity:1; } }
.form-error-note{ display:none; margin-top:1rem; font-size:.85rem; color:#B3261E; }
.form-error-note.show{ display:block; }
.form-error-note a{ font-weight:600; text-decoration:underline; }
@media (max-width: 980px){
  .bulk-form-wrap{ grid-template-columns:1fr; }
  .bulk-form .grid-2{ grid-template-columns:1fr; gap:0; }
  /* Keep hero animations alive on mobile — just lighter: shrink the
     drifting biscuits and drop the two largest so text stays readable. */
  .drifter{ opacity:.45; transform-origin:center; }
  .drifter:nth-child(1), .drifter:nth-child(3){ display:none; }
  .drifter svg{ width:70%; height:70%; }
}

/* =================== Reduced motion =================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rise-in{ opacity:1; transform:none; animation:none; }
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
  .hero-particles{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- SEO additions: image sizing, FAQ, blog ---------- */
img{ height:auto; }
.home-faq a:not(.btn), .article-body a:not(.btn){ color: var(--terracotta-dark); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.home-faq{ padding-top: 3rem; }
.faq-list{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.4rem; }
.faq-list details{ background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem 1.3rem; }
.faq-list summary{ cursor:pointer; font-weight:600; color: var(--green-dark); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; color: var(--terracotta); font-size:1.3rem; line-height:1; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after{ transform: rotate(45deg); }
.faq-list details p{ margin:.8rem 0 0; color: var(--ink-soft); }
.blog-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.6rem; }
.blog-card{ background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.6rem; display:flex; flex-direction:column; gap:.6rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.blog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card h2{ font-size:1.3rem; margin:0; }
.blog-card p{ color: var(--ink-soft); margin:0; font-size:.95rem; }
.blog-card .more{ margin-top:auto; color: var(--terracotta-dark); font-weight:600; font-size:.9rem; }
.article-meta{ font-size:.85rem; color: var(--ink-soft); }
.article-body h2{ font-size:1.7rem; }
.article-body h3{ font-size:1.25rem; margin-top:1.6rem; }
.article-body p, .article-body li{ color: var(--ink); line-height:1.75; }
.article-body ul{ padding-left:1.2rem; }
.article-note{ background: var(--green-tint); border-radius: var(--radius-md); padding:1rem 1.3rem; font-size:.92rem; margin:2rem 0; }
.article-cta{ background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding:1.6rem; margin-top:2.4rem; text-align:center; }
.article-cta p{ margin:0 0 1rem; }
.related-list{ display:flex; flex-direction:column; gap:.4rem; padding-left:1.2rem; }
@media (max-width:720px){ .blog-grid{ grid-template-columns:1fr; } }
.article-body{ padding-top:2rem; }