/* ==========================================================================
   ABID NAIM LTD — Global Stylesheet
   A heritage import & export trading house, est. 1996, Kabul, Afghanistan
   Design language: minimal & professional, with subtle Afghan/Silk-Road
   heritage motifs (geometric borders, caravan silhouettes, botanical marks)
   ========================================================================== */

:root{
  /* ---- Brand palette (drawn from the Abid Naim crest: antique gold on
     midnight indigo) plus a warm caravan-route terracotta and parchment
     cream so the site reads as "ancient trade house", not "generic corp"  */
  --navy-950:#0B1220;
  --navy-900:#0F1B33;
  --navy-800:#152343;
  --navy-700:#1E2F55;
  --navy-600:#2A3E68;
  --gold-700:#9c7a2e;
  --gold-600:#B08D3F;
  --gold-500:#C6A24E;
  --gold-400:#D8BA71;
  --gold-100:#F3E8CC;
  /* ---- bright accent surfaces (new light palette) ----
     Used in place of the old full-bleed dark-navy section backgrounds
     so the site reads as light/airy rather than heavy & dark, while
     still using the brand navy for text/icons and the brand gold for
     accents & bright color-block sections. */
  --sky-50:#F5F9FE;
  --sky-100:#E9F1FB;
  --terracotta-600:#A85A32;
  --terracotta-500:#BE6C3D;
  --cream-100:#FBF7EE;
  --cream-200:#F4EDDC;
  --cream-300:#EBE0C6;
  --ink-900:#231F16;
  --ink-700:#3B3527;
  --ink-500:#665E48;
  --ink-300:#948a6c;
  --white:#FFFFFF;
  --line:#E3D8B9;

  --shadow-sm: 0 2px 10px rgba(20,15,5,.06);
  --shadow-md: 0 10px 30px rgba(20,15,5,.09);
  --shadow-lg: 0 24px 60px rgba(11,18,32,.18);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;

  /* ---- Typography system ----
     Display: Playfair Display — a high-contrast heritage serif used across
       luxury, hospitality & finance brands; reads as "established trade
       house" rather than "template". Semibold weight for authority, italic
       reserved for accent words/quotes.
     Body: Inter — the current world-standard UI/reading sans-serif
       (exceptional legibility at small sizes, full weight range, neutral
       and highly trustworthy tone for B2B/trade content).
     Serif accent: Cormorant Garamond — kept for quotes, year marks, and
       delicate accents that want a lighter literary touch than Playfair.
     Arabic: Noto Naskh Arabic — the professional standard for clean,
       legible Naskh-style Arabic on the web. */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', serif;

  --container: 1240px;

  /* ---- motion system ----
     A single soft "settle" easing curve used across hovers, reveals and
     micro-interactions so every animation on the site feels like it
     belongs to the same hand, plus shared durations so nothing feels
     rushed or laggy relative to anything else. */
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .22s;
  --dur-base: .4s;
  --dur-slow: .7s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-900);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  opacity:0;
  animation:page-fade-in .6s var(--ease-smooth) .05s forwards;
}
@keyframes page-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--ease-soft); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; color:var(--navy-900); line-height:1.18; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.arabic{ font-family:var(--font-arabic); direction:rtl; }

/* ---- layout helpers ---- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; position:relative; }
.section-sm{ padding:56px 0; }
@media (max-width:780px){
  .section{ padding:64px 0; }
  .section-sm{ padding:40px 0; }
}
.grid{ display:grid; gap:32px; }
/* Grid items default to min-width:auto, meaning a track won't shrink
   below the intrinsic width of its content (e.g. flex-wrap rows like
   .tag-list, or an inline button) even when the track itself is set to
   1fr. At narrow widths that forced a couple of columns a few pixels
   wider than the viewport and pushed the page into horizontal scroll.
   min-width:0 lets tracks shrink to the container and rely on wrapping/
   text-wrap instead. */
.grid > *{ min-width:0; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
/* #categories now holds 5 cards since Saffron joined Cardamom, Tea, Staples
   and Dry Fruits — a fixed 4-column track would strand the 5th card alone
   on its own row. auto-fit lets it settle into a balanced 3+2 instead. */
#categories .g4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
@media (max-width:980px){ .g4{ grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.center{ text-align:center; }
.text-gold{ color:var(--gold-600); }
.text-cream{ color:var(--cream-200); }
.muted{ color:var(--ink-500); }

/* ---- eyebrow / kicker ---- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:.74rem; color:var(--gold-700); margin-bottom:16px;
}
.kicker::before,.kicker::after{ content:""; width:26px; height:1px; background:var(--gold-600); display:inline-block; }
.kicker.left::before{ display:none; }
.kicker.left::after{ display:inline-block; }

.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.section-head p{ color:var(--ink-500); font-size:1.06rem; }
.section-head.align-left{ margin:0 0 48px; text-align:left; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:2px; font-weight:600; font-size:.92rem;
  letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent;
  transition:background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
  white-space:nowrap; will-change:transform;
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform var(--dur-base) var(--ease-smooth); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0) scale(.97); }
.btn-primary{ background:var(--navy-900); color:var(--gold-100); border-color:var(--navy-900); }
.btn-primary:hover{ background:var(--navy-800); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-gold{ background:var(--gold-600); color:var(--navy-950); border-color:var(--gold-600); }
.btn-gold:hover{ background:var(--gold-500); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-outline:hover{ background:var(--navy-900); color:var(--gold-100); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline-light{ background:transparent; color:var(--cream-100); border-color:rgba(251,247,238,.5); }
.btn-outline-light:hover{ background:var(--cream-100); color:var(--navy-900); border-color:var(--cream-100); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.btn-whatsapp:hover{ background:#1ebe5b; transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.78rem; }
/* white-space:nowrap above keeps short button labels ("Get a Quote",
   "View Products") crisp on one line, but a couple of longer product
   CTAs ("Request Cardamom Quote") have a text-plus-padding min-width
   wider than the smallest phones (320–360px), which was pushing those
   pages into horizontal scroll. Letting long labels wrap only below
   380px keeps every normal button single-line while fixing the two
   long-label cases gracefully. */
@media (max-width:380px){
  .btn{ white-space:normal; text-align:center; }
}

/* ---- top utility bar ---- */
.topbar{
  background:var(--gold-600); color:var(--navy-950); font-size:.78rem;
  letter-spacing:.02em;
}
.topbar .container{
  display:flex; align-items:center; justify-content:center;
  padding-top:11px; padding-bottom:11px; gap:24px;
}
.topbar-contact{ display:flex; align-items:center; gap:16px; }
.topbar a{ color:var(--navy-950); opacity:.88; transition:opacity .2s ease, color .2s ease; }
.topbar a:hover{ opacity:1; text-decoration:underline; }
.topbar-sep{ width:3px; height:3px; border-radius:50%; background:var(--navy-950); opacity:.4; flex:none; }

@media (max-width:760px){
  .topbar .container{ padding-top:9px; padding-bottom:9px; }
}
@media (max-width:380px){
  .topbar-contact{ gap:10px; }
  .topbar{ font-size:.72rem; }
}

/* ---- header / nav ---- */
.site-header{
  /* z-index:260 must stay ABOVE .nav-scrim's z-index:250. .main-nav (the
     slide-out mobile menu) lives inside this header, and "isolation:isolate"
     traps its z-index:300 so it only ranks against siblings *inside* this
     header — it can never out-rank .nav-scrim, which sits outside the header
     in the DOM. If .site-header's own z-index drops below .nav-scrim's, the
     dark overlay paints on top of the open mobile menu: the menu looks grey/
     washed-out and every tap on a menu link actually hits the overlay
     instead, making links appear broken. Keep this above .nav-scrim. */
  position:sticky; top:0; z-index:260; background:transparent;
  border-bottom:1px solid var(--line); isolation:isolate;
  transition:box-shadow var(--dur-base) var(--ease-smooth);
}
/* Blur is applied on a pseudo-element rather than the header itself.
   backdrop-filter/filter on an element creates a new containing block
   for any fixed-position descendant — since .main-nav (the fullscreen
   mobile menu) lives inside this header, putting backdrop-filter here
   directly broke it in two ways: (1) "position:fixed; inset:0 0 0 auto"
   resolved against the header's box instead of the viewport, so the
   mobile nav opened offset below the top and past the bottom of the
   screen; (2) the off-canvas translateX(100%) copy of that nav overflowed
   the header's box on every page at every width, inflating
   document scrollWidth. The body{overflow-x:hidden} safety net below
   only stops body's own scrollWidth from being scrollable — it doesn't
   trim documentElement's scrollWidth, so mobile browsers could still
   rubber-band/scroll the extra 340px into view. html{overflow-x:hidden}
   (top of this file) closes that gap by clamping the actual viewport
   scroll width, on top of moving the blur here to remove the containing
   block without losing the frosted-glass look. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,247,238,.92); backdrop-filter:blur(10px);
}
/* padding-top/bottom only (not shorthand "padding:18px 0") so the
   horizontal padding this element inherits from .container (24px) is
   never overwritten. .container's 24px side padding only actually shows
   up as visible space below 1240px-wide viewports — above that, .container
   is narrower than the viewport and centered by margin:auto, which was
   masking this bug on wide desktop windows while every tablet, narrow
   laptop window, and phone below 1240px had the logo and header buttons
   sitting flush against the screen edge. */
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; gap:24px; }
.brand{ display:flex; align-items:center; gap:16px; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.2; }
.brand-text strong{ font-family:var(--font-display); font-weight:600; font-size:1.32rem; color:var(--navy-900); letter-spacing:.01em; white-space:nowrap; }
.brand-text span{ font-family:var(--font-body); font-size:.64rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700); margin-top:5px; white-space:nowrap; }

/* ---- logo medallion badge ----
   The gold calligraphy mark reads too faint directly on the cream header/
   footer surfaces (gold-on-cream = low contrast). Instead the mark now
   sits on a small navy "plaque": a soft radial gradient for depth, a thin
   gold ring, an inset gloss highlight along the top edge (glass feel),
   and a layered drop shadow to lift it off the page. */
.brand-badge{
  position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 11px; border-radius:16px;
  background:radial-gradient(130% 130% at 32% 18%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  border:1.5px solid var(--gold-500);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -10px 16px rgba(0,0,0,.4),
    0 3px 8px rgba(11,18,32,.28),
    0 12px 22px -6px rgba(11,18,32,.4);
  overflow:hidden;
}
.brand-badge::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%);
}
.brand-badge img{ position:relative; z-index:1; height:56px; width:auto; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

@media (max-width:480px){
  /* padding:14px 0 previously reset the horizontal padding to 0, wiping
     out the 24px side margin every other section on the site uses (from
     .container). That left the logo badge and hamburger button touching
     the screen edges exactly, with zero breathing room. Keep 20px on the
     sides here so the header matches the rest of the page. */
  .nav-row{ padding:14px 20px; gap:14px; }
  .brand{ gap:11px; }
  .brand-badge{ padding:7px 9px; border-radius:13px; }
  .brand-badge img{ height:40px; }
  .brand-text strong{ font-size:1.08rem; }
  .brand-text span{ font-size:.56rem; letter-spacing:.13em; margin-top:3px; }
}

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  padding:10px 16px; font-size:.86rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink-700); position:relative; border-radius:2px;
  transition:color var(--dur-base) var(--ease-smooth);
}
.main-nav a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px;
  background:var(--gold-600); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-smooth);
}
.main-nav a:hover{ color:var(--navy-900); }
.main-nav a:hover::after{ transform-origin:left; }
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }
.main-nav a.active{ color:var(--navy-900); font-weight:600; }

.header-cta{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); color:var(--navy-900);
  transition:background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
  flex:none;
}
.icon-btn:hover{ background:var(--gold-600); border-color:var(--gold-600); color:var(--navy-950); transform:translateY(-2px) rotate(-6deg); box-shadow:var(--shadow-sm); }
.icon-btn svg{ width:21px; height:21px; }

.menu-toggle{ display:none; width:48px; height:48px; border:1.5px solid var(--line); border-radius:50%; align-items:center; justify-content:center; background:none; transition:background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
.menu-toggle:hover{ border-color:var(--gold-600); background:var(--gold-100); }
.menu-toggle:active{ transform:scale(.92); }
.menu-toggle svg{ width:22px; height:22px; transition:transform var(--dur-base) var(--ease-smooth); }

@media (max-width:1080px){
  .main-nav{ position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(340px,86vw);
    background:var(--white); flex-direction:column; align-items:stretch; padding:100px 28px 40px;
    transform:translateX(100%); transition:transform .4s var(--ease-smooth); gap:4px; z-index:300; overflow-y:auto;
    box-shadow:-12px 0 40px rgba(11,18,32,.12); }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink-700); padding:16px 6px; border-bottom:1px solid var(--line); border-radius:0;
    font-size:.98rem; min-height:44px; display:flex; align-items:center;
    opacity:0; transform:translateX(16px); transition:opacity .4s var(--ease-smooth), transform .4s var(--ease-smooth), color var(--dur-base) var(--ease-smooth); }
  .main-nav.open a{ opacity:1; transform:translateX(0); }
  .main-nav.open a:nth-child(1){ transition-delay:.06s; }
  .main-nav.open a:nth-child(2){ transition-delay:.1s; }
  .main-nav.open a:nth-child(3){ transition-delay:.14s; }
  .main-nav.open a:nth-child(4){ transition-delay:.18s; }
  .main-nav.open a:nth-child(5){ transition-delay:.22s; }
  .main-nav a::after{ display:none; }
  .main-nav a.active{ color:var(--gold-700); }
  .menu-toggle{ display:flex; }
  /* Previously only .btn-label was hidden here, leaving the "Get a Quote"
     .btn-primary in the DOM with no visible content — it rendered as an
     empty navy pill next to the WhatsApp icon and hamburger. Hiding the
     whole link removes the dead-looking box; the same "Contact" link is
     one tap away in the menu, so nothing is lost. */
  .header-cta a.btn-primary{ display:none; }
}
.nav-scrim{ position:fixed; inset:0; background:rgba(11,18,32,.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-smooth); z-index:250; }
.nav-scrim.open{ opacity:1; pointer-events:auto; }
.submenu-caret{ width:10px; height:10px; margin-left:4px; opacity:.6; }
.has-sub{ position:relative; }
.submenu{
  position:absolute; top:100%; left:0; min-width:230px; background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-md); padding:10px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .2s ease; border-radius:var(--radius-sm); z-index:50;
}
.has-sub:hover .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{ display:block; padding:10px 14px; font-size:.84rem; border-radius:4px; }
.submenu a:hover{ background:var(--cream-200); }
@media (max-width:1080px){
  .submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:none;
    display:none; padding:0 0 0 14px; }
  .has-sub.open .submenu{ display:block; }
}

/* ---- pattern & motif elements ---- */
.geo-divider{ width:100%; height:14px; overflow:hidden; }
.geo-divider svg{ width:100%; height:100%; display:block; }

.pattern-bg{
  background-image:radial-gradient(circle at 1px 1px, var(--gold-500) 1px, transparent 1px);
  background-size:22px 22px; opacity:.14;
  position:absolute; inset:0; pointer-events:none;
}
.corner-mark{ position:absolute; width:64px; height:64px; opacity:.5; }
.corner-mark.tl{ top:18px; left:18px; }
.corner-mark.br{ bottom:18px; right:18px; transform:rotate(180deg); }

/* ---- hero ---- */
.hero{
  position:relative; background:linear-gradient(180deg,var(--cream-100) 0%, var(--gold-100) 55%, var(--cream-200) 100%);
  color:var(--ink-900); overflow:hidden;
  padding:120px 0 100px;
}
/* 120px top / 100px bottom is sized for a spacious desktop hero. With no
   mobile override, phones inherited the same huge padding, leaving a tall
   stretch of near-empty background (just the faint star pattern) between
   the header and the first line of text — the gap the design was flagged
   for. Tighten it well below the 700px breakpoint used elsewhere on the
   site for the same reason (see .page-hero.has-photo). */
@media (max-width:700px){
  .hero{ padding:56px 0 52px; }
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:url('../images/patterns/star-pattern.svg');
  background-size:340px; opacity:.16;
}
.hero-caravan{ position:absolute; left:0; right:0; bottom:0; opacity:.85; pointer-events:none; }
.hero-caravan svg{ width:100%; height:auto; display:block; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:3; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }

/* ---- hero video background (replaces static hero image) ---- */
.hero.hero-video{
  background:var(--navy-950); padding:196px 0 64px; min-height:92vh;
  display:flex; align-items:center;
}
.hero.hero-video::before{ content:none; }
@media (max-width:960px){ .hero.hero-video{ padding:168px 0 56px; min-height:auto; } }
@media (max-width:700px){ .hero.hero-video{ padding:132px 0 48px; } }
.hero-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video-bg video{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  transform:translate(-50%,-50%); object-fit:cover;
}
.hero-video-overlay{
  position:absolute; inset:0;
  background:radial-gradient(60% 75% at 50% 46%, rgba(8,12,22,.84) 0%, rgba(8,12,22,.66) 45%, rgba(8,12,22,.42) 75%, rgba(8,12,22,.3) 100%);
}
.hero-grid--video{ grid-template-columns:1fr; position:relative; z-index:2; justify-items:center; text-align:center; }
.hero-grid--video > div{ max-width:860px; display:flex; flex-direction:column; align-items:center; }

/* premium pill badge, replaces the plain kicker text on the video hero */
.hero-kicker{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 22px; margin-bottom:30px;
  border:1px solid rgba(216,186,113,.4);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  font-family:var(--font-body); font-weight:600; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400);
}
.hero-kicker svg{ width:12px; height:12px; flex-shrink:0; }
@media (max-width:520px){ .hero-kicker{ font-size:.6rem; padding:8px 16px; gap:7px; letter-spacing:.14em; } }

.hero.hero-video h1{
  color:var(--white); font-size:clamp(2.05rem,5vw,4.1rem); line-height:1.14;
  max-width:850px; margin-bottom:24px; letter-spacing:-.015em;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero.hero-video h1 em{ color:var(--gold-400); font-style:italic; font-weight:500; }
.hero.hero-video p.lead{
  color:rgba(255,255,255,.86); max-width:600px; margin:0 auto 40px;
  font-size:1.12rem; line-height:1.72;
}
.hero.hero-video .hero-actions{ justify-content:center; gap:18px; margin-bottom:52px; }
.hero.hero-video .btn{ padding:17px 32px; font-size:.86rem; }
.hero.hero-video .btn-outline{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.5); color:var(--white); backdrop-filter:blur(6px); }
.hero.hero-video .btn-outline:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.85); }
@media (max-width:480px){
  .hero.hero-video .hero-actions{ flex-direction:column; width:100%; gap:14px; }
  .hero.hero-video .hero-actions .btn{ width:100%; }
}

.hero.hero-video .hero-stats{
  justify-content:space-between; flex-wrap:nowrap; gap:8px; width:100%;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.14);
}
.hero.hero-video .hero-stats div{ text-align:center; position:relative; flex:1; padding:0 10px; }
.hero.hero-video .hero-stats div:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:32px; background:rgba(255,255,255,.15);
}
.hero.hero-video .hero-stats div strong{ color:var(--gold-400); font-size:clamp(1.5rem,3vw,2.05rem); }
.hero.hero-video .hero-stats div span{ color:rgba(255,255,255,.66); font-size:.68rem; letter-spacing:.09em; }
@media (max-width:760px){
  .hero.hero-video .hero-stats{ flex-wrap:wrap; justify-content:center; row-gap:26px; }
  .hero.hero-video .hero-stats div{ flex:0 0 44%; padding:0; }
  .hero.hero-video .hero-stats div:nth-child(2n)::after{ display:none; }
}
.hero-badge.hero-badge--video{
  position:absolute; right:5%; left:auto; bottom:36px; z-index:3;
}
@media (max-width:960px){ .hero-badge.hero-badge--video{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero-video-bg video{ display:none; } }
.hero-grid > div:first-child > *{ opacity:0; animation:hero-rise .8s var(--ease-smooth) forwards; }
.hero-grid > div:first-child > *:nth-child(1){ animation-delay:.05s; }
.hero-grid > div:first-child > *:nth-child(2){ animation-delay:.15s; }
.hero-grid > div:first-child > *:nth-child(3){ animation-delay:.25s; }
.hero-grid > div:first-child > *:nth-child(4){ animation-delay:.35s; }
.hero-grid > div:first-child > *:nth-child(5){ animation-delay:.45s; }
.hero-art{ opacity:0; animation:hero-rise .9s var(--ease-smooth) .3s forwards; }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
.hero h1{ color:var(--navy-900); font-size:clamp(2.3rem,4.6vw,3.7rem); margin-bottom:22px; letter-spacing:-.02em; }
.hero h1 em{ font-style:italic; font-weight:500; color:var(--gold-700); }
.hero p.lead{ font-size:1.14rem; line-height:1.65; color:var(--ink-700); max-width:540px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:52px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--gold-700); }
.hero-stats div span{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); }

.hero-art{ position:relative; }
.hero-art .frame{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:14px; background:var(--white); box-shadow:var(--shadow-md);
  transition:box-shadow var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth);
}
.hero-art:hover .frame{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.hero-art img{ border-radius:calc(var(--radius-lg) - 8px); width:100%; height:520px; object-fit:cover; transition:transform .8s var(--ease-smooth); }
.hero-art:hover img{ transform:scale(1.03); }
.hero-badge{
  position:absolute; left:-28px; bottom:-28px; background:var(--gold-600); color:var(--navy-950);
  border-radius:50%; width:132px; height:132px; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; box-shadow:var(--shadow-lg); font-family:var(--font-display);
  border:4px solid var(--white); animation:badge-float 4.5s ease-in-out infinite;
}
@keyframes badge-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.hero-badge strong{ font-size:1.9rem; line-height:1; }
.hero-badge span{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-body); font-weight:600; margin-top:4px; }
@media (max-width:600px){ .hero-art img{ height:360px; } .hero-badge{ width:104px; height:104px; left:-14px; bottom:-14px; } .hero-badge strong{ font-size:1.4rem;} }

/* ---- inner page hero (short) ---- */
.page-hero{
  background:linear-gradient(180deg,var(--gold-100), var(--cream-200));
  color:var(--navy-900); padding:76px 0 64px; position:relative; overflow:hidden;
}
.page-hero::before{ content:""; position:absolute; inset:0; background-image:url('../images/patterns/star-pattern.svg'); background-size:300px; opacity:.1; z-index:1; }
.page-hero .container{ position:relative; z-index:3; }
/* Default (no photo loaded yet / JS disabled): dark text on the light
   gradient fallback. Once .has-photo is added the section gets a photo
   + navy scrim behind it, so the rules below flip the text to light
   with a shadow for legibility over the image. */
.page-hero h1{ color:var(--navy-900); font-size:clamp(2rem,4vw,2.9rem); margin-bottom:12px; position:relative; }
.page-hero.has-photo h1{ color:var(--cream-100); text-shadow:0 2px 14px rgba(11,18,32,.4); }
.breadcrumb{ font-size:.82rem; color:var(--ink-500); display:flex; gap:8px; align-items:center; position:relative; }
.breadcrumb a:hover{ color:var(--gold-700); }
.breadcrumb svg{ width:11px; height:11px; opacity:.6; }
.page-hero.has-photo .breadcrumb{ color:var(--cream-300); }
.page-hero.has-photo .breadcrumb a:hover{ color:var(--gold-400); }
.page-hero p{ color:var(--ink-700); max-width:600px; position:relative; }
.page-hero.has-photo p{ color:var(--cream-200); text-shadow:0 1px 8px rgba(11,18,32,.35); }

/* ---- page-hero WITH a background photo ----
   Usage: add class "has-photo" to the <section class="page-hero"> tag and set
   an inline style background-image:url('images/hero/your-file.jpg').
   A light-to-moderate navy scrim is applied on top of the photo — just
   enough for the white heading/paragraph text to stay readable — while
   keeping the photo itself bright and visible (previously this was a
   near-opaque dark navy wash that hid the photo almost entirely, which
   was the single biggest source of the site's "too dark" feel). No extra
   markup needed, and no text is ever baked into the image itself (keeps
   it editable, translatable and accessible). See IMAGE-GUIDE.md for exact
   pixel sizes and ready-to-use Gemini prompts for each page. */
.page-hero.has-photo{ background-size:cover; background-position:center; padding:120px 0 84px; }
.page-hero.has-photo::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(115deg, rgba(15,27,51,.5) 0%, rgba(15,27,51,.36) 32%, rgba(15,27,51,.22) 60%, rgba(15,27,51,.12) 100%);
}
@media (max-width:700px){
  .page-hero.has-photo{ padding:100px 0 64px; }
  .page-hero.has-photo::after{ background:linear-gradient(180deg, rgba(15,27,51,.4) 0%, rgba(15,27,51,.5) 60%, rgba(15,27,51,.68) 100%); }
}

/* ---- marquee strip ---- */
.strip{ background:var(--gold-600); color:var(--navy-950); padding:18px 0; overflow:hidden; }
.marquee{ display:flex; gap:60px; white-space:nowrap; animation:scroll-left 32s linear infinite; width:max-content; }
.marquee span{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; color:var(--navy-950); }
.marquee span::after{ content:"•"; color:rgba(11,18,32,.45); margin-left:48px; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---- cards: category / product ---- */
.cat-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
  position:relative;
}
.cat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold-500); }
.cat-card .icon-wrap{
  width:88px; height:88px; border-radius:50%; background:var(--cream-200); display:flex; align-items:center;
  justify-content:center; margin:36px auto 20px;
  transition:background var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.cat-card:hover .icon-wrap{ background:var(--gold-100); transform:scale(1.08) rotate(-6deg); box-shadow:0 8px 20px rgba(176,141,63,.25); }
.cat-card .icon-wrap svg{ width:42px; height:42px; color:var(--navy-900); transition:color var(--dur-base) var(--ease-smooth); }
.cat-card:hover .icon-wrap svg{ color:var(--gold-700); }
.cat-card h3{ font-size:1.2rem; text-align:center; margin-bottom:8px; }
.cat-card p{ text-align:center; color:var(--ink-500); font-size:.9rem; padding:0 24px; }
.cat-card .cat-link{ display:block; text-align:center; padding:18px; border-top:1px solid var(--line); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--navy-900); transition:background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), padding var(--dur-base) var(--ease-smooth); }
.cat-card:hover .cat-link{ background:var(--gold-600); color:var(--navy-950); padding-left:22px; padding-right:22px; }

.product-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
  height:100%;
}
.product-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--gold-500); }
.product-card .thumb{ position:relative; aspect-ratio:4/3.1; overflow:hidden; background:var(--cream-200); }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-smooth); }
.product-card:hover .thumb img{ transform:scale(1.08); }
.product-card .thumb .tag{
  position:absolute; top:12px; left:12px; background:var(--gold-600); color:var(--navy-950); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:2px; font-weight:600;
  box-shadow:0 4px 10px rgba(176,141,63,.35);
}
.product-card .body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card .cat{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-700); font-weight:600; }
.product-card h3{ font-size:1.22rem; margin-bottom:2px; }
.product-card p{ color:var(--ink-500); font-size:.88rem; flex:1; }
.product-card .card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }

/* Placeholder for missing product photography */
.placeholder-thumb{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:10px; background:
    repeating-linear-gradient(45deg, var(--cream-300), var(--cream-300) 10px, var(--cream-200) 10px, var(--cream-200) 20px);
  border:2px dashed var(--gold-500); color:var(--gold-700); text-align:center; padding:16px;
  position:relative;
}
.placeholder-thumb svg{ width:40px; height:40px; opacity:.7; }
.placeholder-thumb span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; max-width:200px; }

/* Once js/main.js finds a real photo saved at the path named in the
   placeholder text, it inserts a <picture> here and adds this class —
   automatically, no HTML edit needed. */
.placeholder-thumb.has-photo{ border:none; background:none; padding:0; }
.placeholder-thumb.has-photo svg,
.placeholder-thumb.has-photo > span{ display:none; }
.placeholder-thumb picture{ position:absolute; inset:0; display:block; }
.placeholder-thumb picture img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Once a real photo replaces a .placeholder-thumb inside a dry-fruit
   .cat-card, wrap it in this class instead so it keeps the exact same
   150px-tall, rounded, cropped box — see IMAGE-GUIDE.md for the swap code. */
.cat-card .photo-thumb{ height:150px; margin:20px 20px 0; border-radius:var(--radius-sm); overflow:hidden; }
.cat-card .photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- feature / icon list rows ---- */
.feature-row{ display:flex; gap:22px; align-items:flex-start; transition:transform var(--dur-base) var(--ease-smooth); }
.feature-row:hover{ transform:translateX(4px); }
.feature-row .ic{
  width:64px; height:64px; border-radius:50%; border:1.5px solid var(--gold-500); display:flex; align-items:center;
  justify-content:center; flex:none; color:var(--navy-900); background:var(--white);
  transition:background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.feature-row:hover .ic{ background:var(--gold-600); color:var(--navy-950); border-color:var(--gold-600); transform:scale(1.06); box-shadow:var(--shadow-sm); }
.feature-row .ic svg{ width:30px; height:30px; }
.feature-row h4{ font-size:1.08rem; margin-bottom:5px; }
.feature-row p{ color:var(--ink-500); font-size:.92rem; margin:0; }

/* ---- timeline (heritage / generations) ---- */
.timeline{ position:relative; max-width:900px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:24px; top:0; bottom:0; width:2px; background:var(--line); }
@media (min-width:820px){ .timeline::before{ left:50%; transform:translateX(-1px);} }
.t-item{ position:relative; padding:0 0 52px 64px; }
@media (min-width:820px){
  .t-item{ width:50%; padding:0 0 60px 0; }
  .t-item:nth-child(odd){ padding-right:56px; text-align:right; margin-left:0; }
  .t-item:nth-child(even){ padding-left:56px; margin-left:50%; }
}
.t-dot{
  position:absolute; left:16px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--gold-600);
  border:4px solid var(--cream-100); box-shadow:0 0 0 2px var(--gold-600);
  transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.t-item:hover .t-dot{ transform:scale(1.25); box-shadow:0 0 0 5px rgba(176,141,63,.3); }
@media (min-width:820px){
  .t-item:nth-child(odd) .t-dot{ left:auto; right:-9px; }
  .t-item:nth-child(even) .t-dot{ left:-9px; }
}
.t-year{ font-family:var(--font-display); color:var(--gold-700); font-size:1.5rem; margin-bottom:4px; display:block; }
.t-item h4{ margin-bottom:6px; }
.t-item p{ color:var(--ink-500); font-size:.92rem; }

/* ---- stats band ---- */
.stat-band{ background:var(--gold-600); color:var(--navy-950); position:relative; overflow:hidden; }
.stat-band .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:56px 24px; text-align:center; position:relative; z-index:2;}
@media (max-width:780px){ .stat-band .container{ grid-template-columns:repeat(2,1fr);} }
.stat-band strong{ display:block; font-family:var(--font-display); font-size:2.6rem; color:var(--navy-950); }
.stat-band span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(11,18,32,.75); }

/* ---- testimonial ---- */
.testi-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:34px; height:100%; transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); }
.testi-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-500); }
.testi-stars{ color:var(--gold-500); letter-spacing:2px; margin-bottom:14px; font-size:1rem; }
.testi-card p{ color:var(--ink-700); font-style:italic; font-size:.98rem; }
.testi-person{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.testi-avatar{ width:52px; height:52px; border-radius:50%; background:var(--gold-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--gold-700); font-size:1.2rem; flex:none; }
.testi-person strong{ display:block; font-size:.92rem; }
.testi-person span{ font-size:.78rem; color:var(--ink-500); }

/* ---- CTA band with pattern ---- */
.cta-band{
  background:var(--terracotta-600); color:var(--cream-100); border-radius:var(--radius-lg);
  padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::before{ content:""; position:absolute; inset:0; background-image:url('../images/patterns/star-pattern.svg'); background-size:220px; opacity:.12; }
.cta-band h3{ color:var(--cream-100); font-size:1.7rem; margin-bottom:6px; position:relative; }
.cta-band p{ color:rgba(255,255,255,.85); margin:0; position:relative; }
.cta-band .actions{ position:relative; display:flex; gap:14px; flex-wrap:wrap; }

/* Contact page: info column + form column. This was previously an inline
   style="grid-template-columns:1fr 1.3fr" on the element in contact.html.
   An inline style always wins over a class rule, so it silently overrode
   the .grid/.g2/.g3/.g4 responsive system with no small-screen fallback —
   the form column stayed pinned at ~1.3fr on every phone width, pushing
   the whole page into horizontal scroll. Defining it here restores a
   normal cascade the media queries below can actually collapse. */
.contact-grid{ grid-template-columns:1fr 1.3fr; gap:56px; align-items:flex-start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---- forms ---- */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.03em; margin-bottom:8px; color:var(--navy-900); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); font-family:var(--font-body); font-size:.95rem; color:var(--ink-900); transition:border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold-600); }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:42px; box-shadow:var(--shadow-sm); }
@media (max-width:600px){ .form-card{ padding:26px; } }
.form-note{ font-size:.78rem; color:var(--ink-500); margin-top:14px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

/* ---- contact info cards ---- */
.info-card{ display:flex; gap:18px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--line); transition:transform var(--dur-base) var(--ease-smooth); }
.info-card:last-child{ border-bottom:none; }
.info-card:hover{ transform:translateX(4px); }
.info-card .ic{
  width:54px; height:54px; border-radius:50%; background:var(--gold-100); display:flex; align-items:center; justify-content:center;
  flex:none; color:var(--gold-700); transition:background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth);
}
.info-card:hover .ic{ background:var(--gold-600); color:var(--navy-950); transform:scale(1.06); }
.info-card .ic svg{ width:26px; height:26px; }
.info-card h4{ font-size:1rem; margin-bottom:5px; }
.info-card p, .info-card a{ font-size:.92rem; color:var(--ink-500); }
.info-card a:hover{ color:var(--gold-700); }

/* ---- accordion (FAQ) ---- */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none;
  padding:24px 4px; text-align:left; font-family:var(--font-display); font-size:1.1rem; color:var(--navy-900);
  transition:color var(--dur-base) var(--ease-smooth);
}
.accordion-btn:hover{ color:var(--gold-700); }
.accordion-btn svg{
  width:34px; height:34px; padding:8px; flex:none; box-sizing:border-box; border-radius:50%;
  border:1.5px solid var(--gold-500); color:var(--gold-600);
  transition:transform var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
}
.accordion-item.open .accordion-btn svg{ transform:rotate(45deg); background:var(--gold-600); color:var(--navy-950); border-color:var(--gold-600); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-smooth); }
.accordion-item.open .accordion-panel{ max-height:500px; }
.accordion-panel-inner{ padding:0 4px 24px; color:var(--ink-500); font-size:.95rem; }

/* ---- footer ---- */
.site-footer{ background:var(--cream-300); color:var(--ink-700); position:relative; overflow:hidden; border-top:1px solid var(--line); }
.footer-top{ padding:76px 0 50px; position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.5fr .9fr .9fr 1.1fr 1.1fr; gap:32px; }
@media (max-width:1100px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-badge{ margin-bottom:18px; padding:12px 15px; border-radius:18px; }
.footer-brand .brand-badge img{ height:66px; }
.footer-brand p{ color:var(--ink-700); opacity:.85; font-size:.9rem; max-width:320px; }
.footer-col h4{ color:var(--gold-700); font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ color:var(--ink-700); opacity:.85; font-size:.9rem; }
.footer-col a:hover{ color:var(--gold-700); opacity:1; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.footer-social a:hover{ background:var(--gold-600); border-color:var(--gold-600); color:var(--navy-950); transform:translateY(-3px) rotate(-6deg); box-shadow:var(--shadow-sm); }
.footer-social svg{ width:19px; height:19px; }
.footer-bottom{ border-top:1px solid var(--line); padding:24px 0; font-size:.8rem; position:relative; z-index:2; color:var(--ink-500); }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:var(--gold-700); }
.footer-pattern{ position:absolute; left:0; right:0; bottom:0; opacity:.15; pointer-events:none; }

/* ---- floating WhatsApp button (with country select menu) ---- */
.wa-float-select{ position:fixed; right:24px; bottom:24px; z-index:400; }
.wa-float{
  position:relative; width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:wa-pulse 2.6s ease-in-out infinite;
  transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.wa-float svg{ width:32px; height:32px; color:#fff; }
@keyframes wa-pulse{ 0%,100%{ box-shadow:0 8px 24px rgba(37,211,102,.35);} 50%{ box-shadow:0 8px 30px rgba(37,211,102,.7);} }
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }

.wa-float-menu{
  position:absolute; right:0; bottom:calc(100% + 14px); width:236px;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s var(--ease-smooth), visibility .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.wa-float-select.is-open .wa-float-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-float-menu-label{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); font-weight:700; padding:4px 10px 8px; }
.wa-float-menu a{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600; color:var(--navy-900); text-decoration:none;
  transition:background var(--dur-base) var(--ease-smooth);
}
.wa-float-menu a:hover{ background:var(--cream-200); }
.wa-float-menu a img{ border-radius:3px; box-shadow:0 0 0 1px rgba(11,18,32,.1); flex-shrink:0; }
.wa-float-menu a span{ margin-left:auto; font-weight:500; color:var(--ink-500); font-size:.78rem; }

/* ---- nav header WhatsApp select ---- */
.nav-wa-select{ position:relative; display:inline-flex; }
.nav-wa-menu{
  position:absolute; right:0; top:calc(100% + 10px); width:200px;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); z-index:500;
  transition:opacity .2s var(--ease-smooth), visibility .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.nav-wa-select.is-open .nav-wa-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-wa-menu a{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:600; color:var(--navy-900); text-decoration:none;
  transition:background var(--dur-base) var(--ease-smooth);
}
.nav-wa-menu a:hover{ background:var(--cream-200); }
.nav-wa-menu a img{ border-radius:3px; box-shadow:0 0 0 1px rgba(11,18,32,.1); }

/* ---- contact-page WhatsApp select (full-width button) ---- */
.wa-select{ position:relative; }
.wa-select-toggle{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; }
.wa-select-caret{ width:14px; height:14px; transform:rotate(90deg); transition:transform .2s var(--ease-smooth); }
.wa-select.is-open .wa-select-caret{ transform:rotate(-90deg); }
.wa-select-menu{
  position:absolute; left:0; right:0; bottom:calc(100% + 10px);
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); z-index:20;
  transition:opacity .2s var(--ease-smooth), visibility .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.wa-select.is-open .wa-select-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-select-menu a{
  display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:var(--radius-sm);
  font-size:.88rem; font-weight:600; color:var(--navy-900); text-decoration:none;
  transition:background var(--dur-base) var(--ease-smooth);
}
.wa-select-menu a:hover{ background:var(--cream-200); }
.wa-select-menu a img{ border-radius:3px; box-shadow:0 0 0 1px rgba(11,18,32,.1); }
.wa-select-menu a span{ margin-left:auto; font-weight:500; color:var(--ink-500); font-size:.78rem; }

/* ---- back to top ---- */
.back-top{
  position:fixed; right:26px; bottom:100px; z-index:399; width:46px; height:46px; border-radius:50%;
  background:var(--gold-600); color:var(--navy-950); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-base) var(--ease-smooth), visibility var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}
.back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover{ background:var(--gold-500); transform:translateY(-4px); }
.back-top svg{ width:19px; height:19px; }
@media (max-width:480px){
  .wa-float-select{ right:16px; bottom:16px; }
  .wa-float{ width:56px; height:56px; }
  .wa-float svg{ width:28px; height:28px; }
  .wa-float-menu{ width:210px; }
  .back-top{ width:42px; height:42px; right:18px; bottom:82px; }
}

/* ---- misc ---- */
.divider-gold{ width:64px; height:2px; background:var(--gold-600); margin:0 auto 20px; }
.divider-gold.left{ margin:0 0 20px; }
.badge-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.badge-pill{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border:1.5px solid var(--line); border-radius:30px; font-size:.8rem; font-weight:600; color:var(--navy-900); background:var(--white); transition:border-color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth); }
.badge-pill:hover{ border-color:var(--gold-500); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.badge-pill svg{ width:16px; height:16px; color:var(--gold-600); flex:none; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; gap:36px;} }
.two-col.founder-row{ grid-template-columns:1.2fr .8fr; }
@media (max-width:880px){ .two-col.founder-row{ grid-template-columns:1fr; } }
.founder-portrait{ max-width:320px; margin:0 auto; }
.founder-portrait .img-frame{ border:10px solid var(--white); box-shadow:var(--shadow-lg); }
.founder-caption{ text-align:center; margin-top:18px; font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--ink-500); font-size:1rem; letter-spacing:.01em; }
.founder-caption strong{ display:block; font-family:'Playfair Display',serif; font-style:normal; color:var(--ink-900); font-size:1.05rem; margin-bottom:2px; }
.img-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.img-frame img{ width:100%; height:100%; object-fit:cover; }
/* <picture> wrappers (used for WebP + JPEG fallback) must not break the
   100%-fill sizing that .img-frame / .thumb / .hero-art rely on */
.img-frame picture,.product-card .thumb picture,.hero-art picture{ display:block; width:100%; height:100%; }
.img-frame.ratio-4-5{ aspect-ratio:4/5; }
.img-frame.ratio-16-9{ aspect-ratio:16/9; }
.img-frame.ratio-1-1{ aspect-ratio:1/1; }

/* ---- product image slider (fade cross-fade, auto-rotating) ---- */
.img-slider-track{ position:relative; width:100%; height:100%; }
.img-slider-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease-smooth); }
.img-slider-slide picture,.img-slider-slide img{ width:100%; height:100%; display:block; object-fit:cover; }
.img-slider-slide.is-active{ opacity:1; z-index:1; }
.img-slider-dots{ position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:9px; z-index:2; }
.img-slider-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.55); padding:0; cursor:pointer; transition:background .25s var(--ease-smooth), transform .25s var(--ease-smooth); }
.img-slider-dots button.is-active{ background:var(--white); transform:scale(1.3); }

.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.tag-list li{ background:var(--cream-200); border:1px solid var(--line); padding:8px 16px; border-radius:30px; font-size:.8rem; font-weight:500; }

/* ---- grading specification blocks (tea grades, cardamom size grades) ---- */
.grade-panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; margin-top:60px;
}
.grade-panel-head{ max-width:680px; margin:0 auto 32px; text-align:center; }
.grade-panel-head h3{ font-size:1.5rem; margin-bottom:10px; }
.grade-panel-head p{ margin:0; }
.grade-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.grade-group{ background:var(--cream-100); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; }
.grade-group h4{
  font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-700); margin:0 0 4px;
}
.grade-group p.grade-desc{ font-size:.86rem; color:var(--ink-500); margin:0 0 14px; line-height:1.55; }
.grade-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.grade-chips li{
  background:var(--white); border:1px solid var(--line); color:var(--navy-900);
  font-weight:600; font-size:.78rem; letter-spacing:.02em; padding:6px 12px; border-radius:8px;
}
@media (max-width:600px){
  .grade-panel{ padding:26px 18px; }
  .grade-panel-head h3{ font-size:1.3rem; }
}

.check-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; font-size:.96rem; color:var(--ink-700); transition:transform var(--dur-base) var(--ease-smooth); }
.check-list li:hover{ transform:translateX(4px); }
.check-list svg{
  width:24px; height:24px; padding:5px; box-sizing:border-box; border-radius:50%; background:var(--gold-100);
  color:var(--gold-700); flex:none; margin-top:0;
}

/* map */
.map-frame{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; filter:sepia(12%) saturate(85%); }
.map-frame iframe{ width:100%; height:420px; border:0; display:block; }

/* office cards */
.office-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:32px; height:100%; transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); }
.office-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-500); }
.office-card .flag{ width:60px; height:45px; margin-bottom:16px; display:block; border-radius:7px; box-shadow:0 0 0 1px rgba(11,18,32,.08), var(--shadow-sm); object-fit:cover; }
.office-card h3{ font-size:1.22rem; margin-bottom:12px; }

/* country / market grid */
.country-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:980px){ .country-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .country-grid{ grid-template-columns:repeat(2,1fr);} }
.country-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 14px 24px; text-align:center; transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); }
.country-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-500); }
.country-card:hover .flag{ transform:scale(1.1); }
.country-card .flag{ width:72px; height:54px; display:block; margin:0 auto 16px; border-radius:9px; box-shadow:0 0 0 1px rgba(11,18,32,.08), var(--shadow-sm); object-fit:cover; transition:transform var(--dur-base) var(--ease-smooth); }
.country-card h4{ font-size:.88rem; font-weight:700; margin-bottom:4px; color:var(--navy-900); }
.country-card .tag-sm{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gold-600); font-weight:600; }
.country-card-phone{ display:block; margin-top:6px; font-size:.72rem; color:var(--ink-500); text-decoration:none; }
.country-card-phone:hover{ color:var(--gold-600); text-decoration:underline; }
.country-grid.on-dark .country-card-phone{ color:rgba(255,255,255,.6); }
.country-grid.on-dark .country-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.country-grid.on-dark .country-card h4{ color:var(--cream-100); }
.country-grid.on-dark .country-card:hover{ border-color:var(--gold-400); }
.country-grid.on-dark .country-card .flag{ box-shadow:0 0 0 1px rgba(255,255,255,.18), var(--shadow-sm); }

/* utility spacing */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-32{margin-top:32px;} .mb-32{margin-bottom:32px;}

/* reveal on scroll — progressive enhancement only.
   Content is fully visible by default (and to search engines / no-JS
   browsers). It is only ever hidden-then-faded-in when the `js` class
   has been added to <html>, AND main.js additionally force-reveals
   everything after a short timeout as a safety net. */
.js .reveal{ opacity:0; transform:translateY(30px) scale(.98); transition:opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth); }
.reveal.in{ opacity:1; transform:translateY(0) scale(1); }
/* Staggered entrance for cards/items that share a parent .grid or list,
   so groups of icons/cards cascade in rather than popping together. */
.js .grid > .reveal:nth-child(1),.js .footer-grid > .reveal:nth-child(1){ transition-delay:.02s; }
.js .grid > .reveal:nth-child(2),.js .footer-grid > .reveal:nth-child(2){ transition-delay:.1s; }
.js .grid > .reveal:nth-child(3),.js .footer-grid > .reveal:nth-child(3){ transition-delay:.18s; }
.js .grid > .reveal:nth-child(4),.js .footer-grid > .reveal:nth-child(4){ transition-delay:.26s; }
.js .grid > .reveal:nth-child(5){ transition-delay:.34s; }
.js .grid > .reveal:nth-child(6){ transition-delay:.42s; }
.js .grid > .reveal:nth-child(7){ transition-delay:.5s; }
.js .grid > .reveal:nth-child(8){ transition-delay:.58s; }

/* quote modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(11,18,32,.65); backdrop-filter:blur(3px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-smooth), visibility var(--dur-base) var(--ease-smooth); }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{ background:var(--cream-100); border-radius:var(--radius-lg); max-width:520px; width:100%; padding:40px; position:relative; transform:translateY(24px) scale(.97); transition:transform var(--dur-base) var(--ease-smooth); max-height:88vh; overflow-y:auto; }
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--cream-200); border:none; transition:background var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), rotate var(--dur-base) var(--ease-smooth);
}
.modal-close:hover{ background:var(--gold-600); color:var(--navy-950); transform:rotate(90deg); }
.modal-close svg{ width:17px; height:17px; }

.success-box{ display:none; text-align:center; padding:30px 10px; }
.success-box svg{ width:60px; height:60px; color:var(--gold-600); margin:0 auto 18px; animation:success-pop .5s var(--ease-smooth); }
@keyframes success-pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---- extra mobile polish ----
   Applies across every page since this stylesheet is shared. Keeps
   icons and tap targets comfortably visible/usable on small phones
   instead of shrinking them to the point of losing the "premium" feel,
   while trimming the extra breathing room added above for icon
   enlargement so nothing feels cramped or oversized on narrow screens. */
@media (max-width:640px){
  .cat-card .icon-wrap{ width:76px; height:76px; margin:28px auto 16px; }
  .cat-card .icon-wrap svg{ width:36px; height:36px; }
  .feature-row .ic{ width:56px; height:56px; }
  .feature-row .ic svg{ width:26px; height:26px; }
  .info-card .ic{ width:48px; height:48px; }
  .info-card .ic svg{ width:22px; height:22px; }
  .hero-stats{ gap:22px 28px; }
  .stat-band strong{ font-size:2.1rem; }
  .btn{ padding:14px 24px; }
  .modal-box{ padding:28px 22px; }
}
/* Any element used as a tap target should never fall below the
   44x44px accessibility minimum, even where a design pass elsewhere
   sized it smaller for a dense desktop layout. */
@media (max-width:900px){
  .icon-btn,.menu-toggle,.footer-social a,.back-top,.modal-close{ min-width:44px; min-height:44px; }
}