/* =========================================================================
   SAMRUDDHI IMPEXX — style.css
   Single stylesheet for the whole site. Sections in this order:
   1.  RESET
   2.  TOKENS (colours, type scale, spacing)
   3.  BASE TYPOGRAPHY
   4.  LAYOUT HELPERS
   5.  BUTTONS
   6.  HEADER + NAVIGATION
   7.  HERO + TRADE-ROUTE MAP
   8.  BRAND PILLARS
   9.  SECTION TITLES (navy tab + orange rule)
   10. CARDS (products, services, reasons)
   11. SPEC TABLES
   12. QUALITY STEPS + CERTIFICATIONS
   13. COUNTERS
   14. FORMS
   15. CTA BAND + WAVE DIVIDERS
   16. FOOTER
   17. FLOATING BUTTONS (WhatsApp, back to top)
   18. MOTION / SCROLL REVEAL
   19. RESPONSIVE
   ========================================================================= */


/* =========================================================================
   1. RESET
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; }

a { color: inherit; }


/* =========================================================================
   2. TOKENS
   ========================================================================= */
:root{
  /* --- Brand palette --- */
  --navy-900:#0B1F4B;   /* headers, dark bands, footer */
  --navy-700:#14306E;   /* headings, nav */
  --orange-500:#F26522; /* primary accent, CTAs, underlines */
  --orange-300:#FF9A5C; /* hover, soft accents */
  --sand-50:#FBF9F5;    /* page background */
  --ink-700:#2C3446;    /* body text */
  --line:#E4E7EE;       /* borders, table rules */

  /* --- Derived --- */
  --white:#FFFFFF;
  --navy-050:#EEF2FA;   /* tinted panels */
  --ink-500:#5C6579;    /* muted body text */
  --orange-050:#FFF3EC; /* soft accent panels */
  --shadow-sm:0 2px 8px rgba(11,31,75,.06);
  --shadow-md:0 10px 30px rgba(11,31,75,.10);
  --shadow-lg:0 24px 60px rgba(11,31,75,.16);

  /* --- Type --- */
  --font-display:"Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Fluid type scale */
  --fs-hero:clamp(2.2rem, 1.35rem + 3.6vw, 3.9rem);
  --fs-h1:clamp(1.95rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2:clamp(1.55rem, 1.20rem + 1.5vw, 2.35rem);
  --fs-h3:clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  --fs-lead:clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-eyebrow:0.8rem;

  /* --- Space --- */
  --gutter:clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  --section-y:clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --max:1200px;

  --header-h:74px;
}


/* =========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* clip (not hidden) so the sticky header keeps working while the
     off-canvas mobile menu can never create a sideways scrollbar */
  overflow-x: clip;
}

body{
  background: var(--sand-50);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--navy-700);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p + p { margin-top: 1rem; }

.lead{
  font-size: var(--fs-lead);
  color: var(--ink-500);
  max-width: 62ch;
}

.eyebrow{
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-500);
  display: block;
  margin-bottom: .75rem;
}

strong { color: var(--navy-700); font-weight: 700; }

::selection { background: var(--orange-500); color: #fff; }

/* Visible focus ring everywhere (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left: 0; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   4. LAYOUT HELPERS
   ========================================================================= */
.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: var(--section-y); position: relative; }
.section--tint{ background: var(--white); }
.section--navy{ background: var(--navy-900); color: #D8DFEE; }
.section--navy h2, .section--navy h3{ color: #fff; }
.section--flush-top{ padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

.grid{ display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.split{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.stack > * + *{ margin-top: 1rem; }
.center{ text-align: center; }
.center .lead{ margin-inline: auto; }
.mt-2{ margin-top: 2rem; }

/* Dotted world-map texture layer (JS paints the dots into this element) */
.map-texture{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  overflow: hidden;
}
.map-texture svg{ width: 100%; height: 100%; }
.section > .container{ position: relative; z-index: 1; }


/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.btn{
  --btn-bg: var(--orange-500);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(242,101,34,.25);
}
.btn:hover{ background: var(--orange-300); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--navy{ --btn-bg: var(--navy-700); box-shadow: 0 6px 18px rgba(20,48,110,.22); }
.btn--navy:hover{ background: var(--navy-900); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--navy-700);
  border: 2px solid var(--navy-700);
  box-shadow: none;
}
.btn--ghost:hover{ background: var(--navy-700); color: #fff; }

.btn--light{
  --btn-bg:#fff;
  --btn-fg: var(--navy-900);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.btn--light:hover{ background: var(--orange-500); color: #fff; }

.btn--block{ width: 100%; }

.btn-row{ display: flex; flex-wrap: wrap; gap: .85rem; }

.text-link{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--orange-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.text-link::after{ content: "→"; transition: transform .18s ease; }
.text-link:hover::after{ transform: translateX(4px); }


/* =========================================================================
   6. HEADER + NAVIGATION
   ========================================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled{ box-shadow: var(--shadow-sm); }

.header-inner{
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --- Logo lockup --- */
.logo{
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.logo img{ height: 44px; width: auto; }
.logo-text{ line-height: 1; }
.logo-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--navy-900);
  letter-spacing: .01em;
  display: block;
}
.logo-sub{
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .34em;
  color: var(--orange-500);
  font-weight: 600;
  display: block;
  margin-top: 3px;
}

/* --- Desktop nav --- */
.nav{ display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1vw, 1.4rem); }
.nav a{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy-700);
  text-decoration: none;
  padding: .4rem 0;
  position: relative;
}
.nav a::after{
  content:"";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 3px;
  background: var(--orange-500);
  border-radius: 2px;
  transition: right .22s ease;
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{ right: 0; }
.nav a[aria-current="page"]{ color: var(--navy-900); }

.header-cta{ display: inline-flex; }

/* --- Hamburger --- */
.nav-toggle{
  display: none;
  position: relative;
  z-index: 101;   /* stays clickable above the open slide-in panel */
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--navy-900);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span{
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile slide-in panel --- */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(11,31,75,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 98;
}
.nav-backdrop.is-open{ opacity: 1; visibility: visible; }

body.nav-open{ overflow: hidden; }


/* =========================================================================
   7. HERO + TRADE-ROUTE MAP
   ========================================================================= */
.hero{
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--sand-50) 100%);
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(4rem, 2rem + 6vw, 7rem);
}
.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.hero-copy{ max-width: 700px; }

.hero h1{
  font-size: var(--fs-hero);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  font-weight: 900;
  line-height: .97;
}
.hero h1 .line,
.hero h1 .accent{ display: block; }
.hero h1 .accent{ color: var(--orange-500); }

.hero .rule{ margin-block: 1.4rem 1.2rem; }

.hero-sub{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem);
  color: var(--navy-700);
  line-height: 1.35;
  max-width: 24ch;
}
.hero .btn-row{ margin-top: 2rem; }

/* Signature element: animated trade-route map */
.hero-map{
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.hero-map svg{ width: 100%; height: auto; overflow: visible; }

.map-dot{ fill: var(--navy-700); opacity: .30; }
.hero-map .map-dot{ opacity: .34; }

.route{
  fill: none;
  stroke: var(--orange-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .85;
}
.route-node{ fill: var(--orange-500); }
.route-node-halo{ fill: var(--orange-500); opacity: .35; }
.origin-node{ fill: var(--navy-900); }
.origin-ring{ fill: none; stroke: var(--orange-500); stroke-width: 2; opacity: .55; }
.origin-label{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--navy-900);
  letter-spacing: .12em;
}

/* Route drawing animation */
.js-anim .route{
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: draw-route 2.6s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes draw-route{ to { stroke-dashoffset: 0; } }

.js-anim .route-node,
.js-anim .route-node-halo{
  opacity: 0;
  animation: node-in .6s ease forwards, node-pulse 3.4s ease-in-out infinite;
  animation-delay: var(--node-delay, 1.6s), calc(var(--node-delay, 1.6s) + .6s);
}
@keyframes node-in{ to { opacity: 1; } }
@keyframes node-pulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%    { transform: scale(1.55); opacity: .35; }
}
.route-node-halo{ transform-box: fill-box; transform-origin: center; }
.route-node{ transform-box: fill-box; transform-origin: center; }

/* Curved band under the hero (inline SVG divider) */
.wave{ display: block; width: 100%; height: auto; margin-bottom: -1px; }
.wave--flip{ transform: rotate(180deg); }


/* =========================================================================
   8. BRAND PILLARS
   ========================================================================= */
.pillars{ background: var(--navy-900); position: relative; z-index: 2; }
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.pillar{
  text-align: center;
  padding: .5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.pillar:last-child{ border-right: 0; }
.pillar svg{ width: 34px; height: 34px; margin: 0 auto .6rem; stroke: var(--orange-300); }
.pillar span{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
}


/* =========================================================================
   9. SECTION TITLES (navy tab + orange rule)
   ========================================================================= */
.rule{
  display: block;
  width: 58px;
  height: 4px;
  background: var(--orange-500);
  border-radius: 2px;
}
.center .rule{ margin-inline: auto; }
.section-head{ margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.section-head .rule{ margin-top: 1rem; }

/* Navy "tab" title with rounded right edge — the brochure's signature band */
.tab-title{
  display: inline-block;
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--fs-h2);
  line-height: 1;
  padding: clamp(.85rem, .6rem + .7vw, 1.25rem) clamp(2rem, 1rem + 3vw, 3.5rem) clamp(.85rem, .6rem + .7vw, 1.25rem) var(--gutter);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-left: calc(var(--gutter) * -1);
}
.page-head{
  background: var(--white);
  padding-top: clamp(2rem, 1rem + 3vw, 3.25rem);
  padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-head .lead{ margin-top: 1.5rem; }
.page-head .rule{ margin-top: 1.25rem; }

.breadcrumbs{
  font-size: var(--fs-small);
  color: var(--ink-500);
  margin-bottom: 1.1rem;
}
.breadcrumbs a{ color: var(--ink-500); text-decoration: none; }
.breadcrumbs a:hover{ color: var(--orange-500); }


/* =========================================================================
   10. CARDS
   ========================================================================= */
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.35rem, 1rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  height: 100%;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D9DEEA; }
.card h3{ margin-bottom: .5rem; }
.card p{ color: var(--ink-500); }

/* Product category card with circular image + orange ring */
.product-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
}
.circle-img{
  width: clamp(150px, 40vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--orange-500);
  padding: 6px;
  background: #fff;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.circle-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.product-card h3{ color: var(--navy-900); text-transform: uppercase; letter-spacing: .04em; }
.product-card .text-link{ margin-top: auto; padding-top: 1rem; }

/* Icon list — services / why choose us */
.icon-list{ display: grid; gap: 1.5rem; }
.icon-item{ display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; }
.icon-badge{
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: #fff;
  flex-shrink: 0;
}
.icon-badge svg{ width: 24px; height: 24px; stroke: #fff; }
.icon-badge--orange{ background: var(--orange-500); }
.icon-badge--orange svg{ stroke: #fff; }
.icon-item h3{
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy-900);
  margin-bottom: .2rem;
}
.icon-item p{ color: var(--ink-500); font-size: .96rem; }

.two-col-lists{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.two-col-lists > div + div{
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Variant highlight cards (e.g. Red vs Pink onion powder) */
.variant-card{
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: #fff;
}
.variant-card h3{ text-transform: uppercase; letter-spacing: .05em; margin-bottom: .9rem; }
.variant-card--red{ background: linear-gradient(180deg,#FDF1F3,#fff); }
.variant-card--red h3{ color: #B4234A; }
.variant-card--pink{ background: linear-gradient(180deg,#FDF3F6,#fff); }
.variant-card--pink h3{ color: #D4548A; }

.check-list{ display: grid; gap: .6rem; }
.check-list li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .96rem;
}
.check-list li::before{
  content: "✓";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 4px;
}
.check-list--crimson li::before{ background: #C42A54; }

/* Packaging note strip */
.packaging{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange-500);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
.packaging svg{ width: 44px; height: 44px; stroke: var(--navy-900); }
.packaging h3{ text-transform: uppercase; letter-spacing: .06em; font-size: 1.02rem; margin-bottom: .15rem; }
.packaging p{ color: var(--ink-500); font-size: .96rem; }

/* Product filter tabs */
.filter-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
.filter-tab{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  padding: .6rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy-700);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filter-tab:hover{ border-color: var(--orange-300); color: var(--orange-500); }
.filter-tab[aria-selected="true"]{
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.is-hidden{ display: none !important; }

/* Variant block: image left, table right */
.variant-row{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.variant-row:first-of-type{ border-top: 0; padding-top: 0; }
.variant-row .shot{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}
.variant-row .shot img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.variant-row h3{
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.variant-row h3 .num{
  font-size: .82rem;
  color: #fff;
  background: var(--orange-500);
  border-radius: 6px;
  padding: .15rem .55rem;
  letter-spacing: 0;
}


/* =========================================================================
   11. SPEC TABLES
   ========================================================================= */
.spec-table{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spec-table caption{
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .9rem 1.15rem;
  background: var(--navy-050);
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.spec-table th,
.spec-table td{
  padding: .8rem 1.15rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: .95rem;
  vertical-align: top;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td{ border-bottom: 0; }
.spec-table th{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  width: 42%;
  background: #FCFDFF;
}
.spec-table td{ color: var(--ink-700); }
.spec-table tbody tr:hover th{ background: var(--orange-050); }

/* Wide comparison table (raisins / flakes overview) */
.compare-table{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.compare-table thead th{
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  text-align: left;
}
.compare-table td, .compare-table tbody th{
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  text-align: left;
}
.compare-table tbody th{ font-family: var(--font-display); color: var(--navy-900); white-space: nowrap; }
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th{ border-bottom: 0; }
.table-scroll{ overflow-x: auto; }


/* =========================================================================
   12. QUALITY STEPS + CERTIFICATIONS
   ========================================================================= */
.steps{ display: grid; gap: 0; counter-reset: step; }
.step{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.1rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.step:last-child{ border-bottom: 0; }
.step-badge{
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--navy-900);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.step h3{
  font-size: 1.05rem;
  color: var(--navy-900);
  margin-bottom: .1rem;
}
.step p{ color: var(--ink-500); font-size: .95rem; }

.cert-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .6rem + 2vw, 2.5rem);
  text-align: center;
}
.cert{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.cert img{ height: 76px; width: auto; margin: 0 auto 1rem; object-fit: contain; }
.cert h3{
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy-900);
  margin-bottom: .35rem;
}
.cert p{ font-size: .88rem; color: var(--ink-500); }


/* =========================================================================
   13. COUNTERS
   ========================================================================= */
.counters{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  text-align: center;
}
.counter-num{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.counter-num .plus{ color: var(--orange-500); }
.counter-label{
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A9B6D2;
  margin-top: .65rem;
  display: block;
}


/* =========================================================================
   14. FORMS
   ========================================================================= */
.form-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.15rem; }
.field{ display: flex; flex-direction: column; gap: .35rem; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  color: var(--navy-900);
  letter-spacing: .02em;
}
.field label .req{ color: var(--orange-500); }
.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  background: #fff;
  font-size: .95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ resize: vertical; min-height: 118px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(242,101,34,.14);
}
.field .error{
  font-size: .8rem;
  color: #C4321F;
  min-height: 1em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color: #C4321F; }

.form-status{
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  display: none;
}
.form-status.is-success{
  display: block;
  background: #EAF7EE;
  border: 1px solid #BFE3CB;
  color: #1D6B37;
}
.form-status.is-error{
  display: block;
  background: #FDECEA;
  border: 1px solid #F3C2BB;
  color: #A32B1A;
}

.form-note{ font-size: .82rem; color: var(--ink-500); margin-top: .9rem; }

/* Contact details list */
.contact-list{ display: grid; gap: 1.35rem; }
.contact-item{ display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.contact-item .icon-badge{ width: 48px; height: 48px; }
.contact-item h3{
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--navy-900);
  margin-bottom: .15rem;
}
.contact-item a, .contact-item p{ color: var(--ink-500); text-decoration: none; font-size: .98rem; }
.contact-item a:hover{ color: var(--orange-500); }

.map-embed{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.map-embed iframe{ width: 100%; height: 380px; border: 0; }


/* =========================================================================
   15. CTA BAND + WAVE DIVIDERS
   ========================================================================= */
.cta-band{
  background: var(--navy-900);
  color: #D8DFEE;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.cta-band h2{ color: #fff; text-transform: uppercase; letter-spacing: -0.01em; }
.cta-band .lead{ color: #B9C4DC; }
.cta-band .container{ position: relative; z-index: 1; }
.cta-band .map-texture{ opacity: .22; }
.cta-band .map-dot{ fill: #8FA8DA; opacity: .5; }

.wave-wrap{ line-height: 0; background: transparent; }


/* =========================================================================
   16. FOOTER
   ========================================================================= */
.site-footer{
  background: var(--navy-900);
  color: #B9C4DC;
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  font-size: .95rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.site-footer h3{
  color: #fff;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 1.1rem;
}
.site-footer .logo-name{ color: #fff; }
.site-footer a{ color: #B9C4DC; text-decoration: none; }
.site-footer a:hover{ color: var(--orange-300); }
.footer-links{ display: grid; gap: .6rem; }
.footer-contact{ display: grid; gap: .75rem; }
.footer-contact li{ display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
.footer-contact svg{ width: 18px; height: 18px; stroke: var(--orange-300); margin-top: 4px; }

.socials{ display: flex; gap: .6rem; margin-top: 1.1rem; }
.socials a{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  display: grid;
  place-items: center;
  transition: background-color .18s ease, transform .18s ease;
}
.socials a:hover{ background: var(--orange-500); transform: translateY(-2px); }
.socials svg{ width: 18px; height: 18px; fill: #fff; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: #93A2C2;
}


/* =========================================================================
   17. FLOATING BUTTONS
   ========================================================================= */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.07); }
.whatsapp-float svg{ width: 30px; height: 30px; fill: #fff; }

.to-top{
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 94;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease, background-color .18s ease;
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--orange-500); }
.to-top svg{ width: 18px; height: 18px; stroke: #fff; }


/* =========================================================================
   18. MOTION / SCROLL REVEAL
   ========================================================================= */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* No JS? Everything stays visible. */
html:not(.js) .reveal{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1 !important; transform: none !important; }
  .js-anim .route{ stroke-dashoffset: 0 !important; }
  .js-anim .route-node, .js-anim .route-node-halo{ opacity: 1 !important; }
}


/* =========================================================================
   19. RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-copy{ max-width: 34rem; }
  .hero-map{ min-height: auto; order: 2; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px){
  /* Nav becomes a slide-in panel */
  .nav-toggle{ display: flex; }
  .header-cta{ display: none; }
  .nav{
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(320px, 84vw);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 1.25rem) 1.5rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 99;
    overflow-y: auto;
    visibility: hidden;
  }
  .nav.is-open{ transform: translateX(0); visibility: visible; }
  .nav a{
    padding: .95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
  }
  .nav a::after{ display: none; }
  .nav a[aria-current="page"]{ color: var(--orange-500); }
  .nav .btn{ margin-top: 1.25rem; }

  .split{ grid-template-columns: 1fr; }
  .two-col-lists{ grid-template-columns: 1fr; }
  .two-col-lists > div + div{ border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; }
  .variant-row{ grid-template-columns: 1fr; }
  .variant-row .shot img{ aspect-ratio: 16/9; }
  .counters{ grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
}

@media (max-width: 760px){
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .cert-strip{ grid-template-columns: 1fr; }
  .pillars-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .pillar:nth-child(2){ border-right: 0; }
  .form-grid{ grid-template-columns: 1fr; }
}

/* Spec tables collapse into stacked label/value cards */
@media (max-width: 640px){
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td{
    display: block;
    width: 100%;
  }
  .spec-table caption{ display: block; }
  .spec-table tr{ border-bottom: 1px solid var(--line); padding: .35rem 0; }
  .spec-table tr:last-child{ border-bottom: 0; }
  .spec-table th{
    background: transparent;
    padding-bottom: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
    border-bottom: 0;
  }
  .spec-table td{ padding-top: .15rem; border-bottom: 0; font-weight: 600; color: var(--navy-900); }

  .compare-table{ border: 0; background: transparent; }
  .compare-table thead{ display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th{ display: block; width: 100%; }
  .compare-table tr{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: .5rem .25rem;
  }
  .compare-table tbody th{
    font-size: 1rem;
    padding: .6rem 1rem .3rem;
    border-bottom: 0;
  }
  .compare-table td{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .compare-table tr td:last-child{ border-bottom: 0; }
  .compare-table td::before{
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-500);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    flex-shrink: 0;
  }
}

@media (max-width: 420px){
  .tab-title{ font-size: 1.4rem; }
  .btn{ width: 100%; }
  .btn-row{ flex-direction: column; }
}

/* Print — keep it simple and legible */
@media print{
  .site-header, .whatsapp-float, .to-top, .map-texture, .hero-map, .wave-wrap{ display: none !important; }
  body{ background: #fff; }
}

/* =========================================================================
   20. LATE ADJUSTMENTS (kept at the end so they win on specificity)
   ========================================================================= */

/* The "Get a quote" button inside the nav is for the mobile panel only —
   on desktop the header already shows one. */
.nav > .btn{ display: none; }
@media (max-width: 900px){
  .nav > .btn{ display: inline-flex; }
}

/* Page headers carry the same dotted-map texture as the hero */
.page-head > .container,
.hero > .container{ position: relative; z-index: 1; }
.page-head .map-texture{ opacity: .16; }

/* Cards that lead with an icon badge */
.card > .icon-badge{ margin-bottom: .25rem; }

/* Product cards on products.html carry a bullet list, so the link sits last */
.product-card .check-list{ width: 100%; }
.product-card .check-list li{ font-size: .9rem; }

/* Links that sit inside a sentence — no arrow, just an underline */
.inline-link{
  color: var(--orange-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inline-link:hover{ color: var(--navy-700); }