/* =====================================================================
   SHRIVASUNDHARA GLOBAL CONCEPTS PVT LTD - public stylesheet
   Palette is taken from the company logo.
   ===================================================================== */

/* ----------------------------- tokens ----------------------------- */
:root {
  /* --- brand (softened, still logo-led) ---------------------------- */
  --green-900: #0b3b21;
  --green-800: #125c33;
  --green-700: #1a7a44;
  --green-600: #2b9057;
  --green-500: #3fa96b;
  --green-100: #e2f3e8;
  --green-50:  #f1faf4;
  --lime-500:  #9dc94e;
  --lime-100:  #f0f8de;
  --maroon:    #a8324a;
  --maroon-dark:#8a2439;
  --gold:      #f2b93b;

  /* --- neutrals ---------------------------------------------------- */
  --ink-900:   #12231a;
  --ink-700:   #37503f;
  --ink-500:   #697f72;
  --ink-300:   #a2b3a8;
  --line:      #e6efe9;
  --line-soft: #eff5f1;
  --bg:        #ffffff;
  --bg-canvas: #f5faf7;
  --bg-soft:   #f3faf5;
  --bg-cream:  #fbfaf3;
  --white:     #ffffff;
  --danger:    #c0392b;
  --warn:      #b8801a;

  /* --- soft geometry ----------------------------------------------- */
  --radius-xs: 12px;
  --radius-sm: 14px;
  --radius:    22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --pill:      999px;

  /* --- layered, hue-tinted shadows (no harsh black) ---------------- */
  --shadow-xs: 0 1px 2px rgba(18, 35, 26, .04), 0 1px 3px rgba(18, 35, 26, .04);
  --shadow-sm: 0 2px 4px rgba(18, 35, 26, .03), 0 10px 22px -12px rgba(18, 35, 26, .14);
  --shadow:    0 4px 10px rgba(18, 35, 26, .04), 0 22px 44px -20px rgba(18, 35, 26, .20);
  --shadow-lg: 0 12px 26px rgba(18, 35, 26, .07), 0 48px 80px -36px rgba(18, 35, 26, .30);
  --glow:      0 12px 28px -10px rgba(26, 122, 68, .48);
  --glow-lime: 0 12px 28px -10px rgba(157, 201, 78, .58);

  /* --- type -------------------------------------------------------- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1200px;
  --header-h: 86px;
}

/* ----------------------------- reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--bg);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--green-500); }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink-900); line-height: 1.22; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.08rem; font-weight: 700; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 880px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green-700); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }
.icon { flex: none; vertical-align: middle; }

/* ---------------------------- buttons ----------------------------- */
.btn {
  --btn-bg: var(--green-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 24px; border: 2px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: linear-gradient(135deg, var(--green-700), var(--green-500)); }
.btn--lime { --btn-bg: var(--lime-500); --btn-fg: var(--green-900); }
.btn--lime:hover { color: var(--green-900); }
.btn--maroon { --btn-bg: var(--maroon); }
.btn--dark { --btn-bg: var(--ink-900); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--green-700); border-color: var(--green-700); }
.btn--outline:hover { --btn-bg: var(--green-700); --btn-fg: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--green-800); }
.btn--light:hover { color: var(--green-800); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--green-800); }
.btn--ghost { --btn-bg: var(--green-50); --btn-fg: var(--green-700); }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.btn--lg { padding: 16px 32px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ----------------------------- topbar ----------------------------- */
.topbar {
  background: var(--green-900);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 40px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px;
}
.topbar__list { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar__list li { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__list a { color: rgba(255,255,255,.92); }
.topbar__list a:hover { color: var(--lime-500); }
.topbar__gst { color: rgba(255,255,255,.72); }
.topbar__right { display: flex; align-items: center; gap: 1rem; }
.topbar__tagline { color: var(--lime-500); font-weight: 600; font-style: italic; }
.topbar__social { display: flex; gap: .45rem; }
.topbar__social a {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
}
.topbar__social a:hover { background: var(--lime-500); color: var(--green-900); }

/* ---------------------------- header ------------------------------ *//* NOTE: the frosted glass effect lives on a pseudo element on purpose.
   A backdrop-filter on .site-header itself would make the header the
   containing block for the fixed mobile menu, which would collapse the
   menu panel to the height of the header. */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: .75rem; margin-right: auto; }
.brand__logo { width: 78px; height: 78px; object-fit: contain; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-800); }
.brand__text small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }

.primary-nav { display: flex; align-items: center; gap: 1rem; }
.primary-nav__list {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav__list > li { position: relative; }
.primary-nav__list > li > a {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 10px 13px; border-radius: 999px;
  font-size: .93rem; font-weight: 600; color: var(--ink-900);
}
.primary-nav__list > li > a:hover,
.primary-nav__list > li > a.active { background: var(--green-50); color: var(--green-700); }
.primary-nav__cta { display: flex; }
.dropdown-toggle { display: none; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 95;
  min-width: 290px; padding: .55rem; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--ink-700); }
.dropdown a:hover { background: var(--green-50); color: var(--green-700); }
.dropdown__all { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; }
.dropdown__all a { color: var(--green-700); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }

.nav-toggle {
  display: none; width: 46px; height: 42px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; margin: 0 auto; position: relative; height: 16px; }
.nav-toggle__bars i {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--green-800);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 7px; }
.nav-toggle__bars i:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* -------------------------- page banner --------------------------- */
.page-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--green-900), var(--green-700) 60%, var(--green-600));
  color: #fff; padding: 46px 0 40px;
}
.page-banner__bg {
  position: absolute; inset: 0; opacity: .18;
  background-image: radial-gradient(circle at 12% 25%, rgba(255,255,255,.5) 0, transparent 32%),
                    radial-gradient(circle at 82% 15%, rgba(140,198,63,.6) 0, transparent 28%);
}
.page-banner__inner { position: relative; }
.page-banner__title { color: #fff; margin: 0 0 .35rem; }
.page-banner__sub { color: rgba(255,255,255,.86); max-width: 720px; margin: 0 0 .9rem; }
.breadcrumbs { display: flex; align-items: center; gap: .5rem; font-size: .86rem; flex-wrap: wrap; }
.breadcrumbs a { color: rgba(255,255,255,.82); }
.breadcrumbs a:hover { color: var(--lime-500); }
.breadcrumbs__sep { color: rgba(255,255,255,.45); }
.breadcrumbs__current { color: var(--lime-500); font-weight: 600; }

/* ----------------------------- hero ------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, #0a3d1e 0%, #10633a 45%, #1c8f46 100%);
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
}
.hero::after {
  content: ""; position: absolute; right: -8%; top: -14%; width: 46%; height: 130%;
  background: radial-gradient(circle, rgba(140,198,63,.35), transparent 62%);
  pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  padding: 7px 15px; border-radius: 999px; font-size: .83rem; font-weight: 600;
  color: var(--lime-100); margin-bottom: 1rem;
}
.hero__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: .8rem; }
.hero__title span { color: var(--lime-500); }
.hero__text { color: rgba(255,255,255,.9); font-size: 1.06rem; max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.hero__points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .5rem; }
.hero__points li { display: flex; gap: .55rem; align-items: flex-start; color: rgba(255,255,255,.92); font-size: .95rem; }
.hero__points .icon { color: var(--lime-500); margin-top: .28rem; }
.hero__media { position: relative; display: grid; place-items: center; }
.hero__card {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-lg); padding: 1.4rem; backdrop-filter: blur(6px); width: 100%;
}
.hero__card img { margin: 0 auto 1rem; width: min(210px, 60%); filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }
.hero__card-title { color: #fff; font-size: 1.05rem; text-align: center; margin-bottom: .25rem; }
.hero__card-sub { text-align: center; color: rgba(255,255,255,.82); font-size: .88rem; margin-bottom: 1rem; }
.hero__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; text-align: center; }
.hero__mini div { background: rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: .6rem .35rem; }
.hero__mini strong { display: block; font-family: var(--font-head); font-size: 1.2rem; color: var(--lime-500); }
.hero__mini span { font-size: .72rem; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------- trust strip -------------------------- */
.trust-strip { background: var(--green-900); color: #fff; padding: 14px 0; }
.trust-strip__inner { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .88rem; }
.trust-strip__item { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.9); }
.trust-strip__item .icon { color: var(--lime-500); }

/* ---------------------------- sections ---------------------------- */
.section { padding: clamp(48px, 6vw, 88px) 0; }
.section--tint { background: var(--bg-soft); }
.section--cream { background: var(--bg-cream); }
.section--green { background: linear-gradient(160deg, var(--green-900), var(--green-700)); color: rgba(255,255,255,.92); }
.section--green h2, .section--green h3, .section--green h4 { color: #fff; }
.section--tight { padding: clamp(30px, 4vw, 52px) 0; }
.section__head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 46px); text-align: center; }
.section__head--left { margin-left: 0; text-align: left; }
.section__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-600); background: var(--green-100);
  padding: 6px 14px; border-radius: 999px; margin-bottom: .9rem;
}
.section--green .section__eyebrow { background: rgba(255,255,255,.14); color: var(--lime-100); }
.section__title { margin-bottom: .6rem; }
.section__lead { color: var(--ink-500); font-size: 1.02rem; margin: 0; }
.section--green .section__lead { color: rgba(255,255,255,.85); }
.section__foot { text-align: center; margin-top: 2.2rem; }

/* ----------------------------- grid ------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.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)); }
.grid--sidebar { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

/* Product detail layout. The old version set grid-template-columns as an inline
   style in product.php, which no media query can override, so phones got the
   desktop 2-column grid crushed into ~150px columns. Areas keep the desktop
   look (media left, head over body right) and let small screens restack as
   title -> image/info -> details -> form. */
.product-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "media head" "media body";
  column-gap: 2.4rem; row-gap: 0; align-items: start;
}
.product-layout__media { grid-area: media; min-width: 0; }
.product-layout__head  { grid-area: head;  min-width: 0; }
.product-layout__body  { grid-area: body;  min-width: 0; }

/* ----------------------------- cards ------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--green-100), var(--lime-100));
  color: var(--green-700); margin-bottom: 1rem;
}
.card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }

.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.feature-card__num {
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  color: var(--green-700); background: var(--green-50); border-radius: 999px;
  padding: 3px 12px; display: inline-block; margin-bottom: .8rem;
}
.section--green .feature-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: none; }
.section--green .feature-card p { color: rgba(255,255,255,.85); }
.section--green .feature-card__num { background: rgba(255,255,255,.15); color: var(--lime-100); }

/* ------------------- approach step cards (home) -------------------- */
/* A bolder restyle of the 4-step pipeline: outlined ghost number,
   3D-tilted gradient icon tile and a connector arrow in the gap. */
.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; position: relative; }
.step-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(63,169,107,.35); }
.step-card__num {
  position: absolute; top: 8px; right: 16px;
  font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(43,144,87,.3);
  pointer-events: none; user-select: none;
}
.step-card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px;
  background: linear-gradient(135deg, var(--green-600), var(--lime-500));
  color: #fff; margin-bottom: 1.1rem;
  box-shadow: 0 12px 22px -10px rgba(26,122,68,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transform: perspective(420px) rotateX(9deg) rotateY(-10deg);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.step-card:hover .step-card__icon { transform: perspective(420px) rotateX(0deg) rotateY(0deg) translateY(-3px); }
.step-card__step {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-600); margin-bottom: .3rem;
}
.step-card__title { font-size: 1.14rem; margin-bottom: .45rem; }
.step-card__text { font-size: .92rem; color: var(--ink-500); margin: 0; }
.step-card__arrow {
  position: absolute; top: 50%; right: -18px; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--green-600);
  box-shadow: var(--shadow-sm);
}
.step-card:last-child .step-card__arrow { display: none; }
@media (max-width: 992px) {
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-card__arrow { display: none; }
}
@media (max-width: 720px) {
  .steps-row { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
}

/* -------------------------- category card ------------------------- */
.category-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(63,169,107,.35); }
.category-card__count {
  position: absolute; top: 8px; right: 16px;
  font-family: var(--font-head); font-weight: 800; font-size: 3.2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(43,144,87,.3);
  pointer-events: none; user-select: none;
}
.category-card__icon {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px;
  background: linear-gradient(135deg, var(--green-600), var(--lime-500));
  color: #fff; margin-bottom: 1.1rem;
  box-shadow: 0 12px 22px -10px rgba(26,122,68,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transform: perspective(420px) rotateX(9deg) rotateY(-10deg);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.category-card:hover .category-card__icon { transform: perspective(420px) rotateX(0deg) rotateY(0deg) translateY(-3px); }
.category-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.category-card p { font-size: .92rem; color: var(--ink-500); flex: 1; }
.category-card__more {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  margin-top: .9rem; padding: 7px 14px; border-radius: 999px;
  background: var(--green-50); color: var(--green-700);
  font-weight: 700; font-size: .84rem;
  transition: gap .2s ease, background .2s ease;
}
.category-card:hover .category-card__more { gap: .7rem; background: var(--green-100); }

/* --------------------------- product card ------------------------- */
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(140deg, var(--green-50), var(--lime-100)); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-card__media img { transform: scale(1.06); }
/* --- rotating uploaded photos ------------------------------------------
   A product with no photo falls back to the CSS-3D spinning pack
   (.pack3d__spin). An uploaded photo gets a gentle 3D sway on the
   <a class="product-card__shot"> wrapper - about 10 degrees each way,
   easing back and forth - so it feels alive without turning edge-on and
   losing the product. A full turntable was tried and rejected: a flat
   photo foreshortens past ~20 degrees and stops reading as the pack. The
   motion lives on the wrapper so the img keeps its own hover zoom, and
   hovering pauses the sway so the pack can be inspected.

   Uploaded photos are object-fit: contain, not cover: the media box is a
   4:3 landscape but pack shots are often portrait (the Diatomite Silicon
   upload is 407x861), and cover cropped the top and bottom off the bag.
   contain always shows the whole pack and letterboxes onto the media
   gradient, and hover stays a light 1.05 so it never crops. */
.product-card__media { perspective: 1000px; }
.product-card__shot {
  display: block; width: 100%; height: 100%; overflow: hidden;
  transform-style: preserve-3d;
  animation: shot-sway var(--shot-sway-speed, 7s) ease-in-out infinite;
}
.product-card__shot img { object-fit: contain; }
.product-card:hover .product-card__shot img { transform: scale(1.05); }
.product-card:hover .product-card__shot { animation-play-state: paused; }
/* Gentle sway only - never a full turntable: a flat photo rotating past
   ~20 degrees starts foreshortening and stops reading as the product. */
@keyframes shot-sway {
  0%, 100% { transform: perspective(1100px) rotateX(3deg) rotateY(-10deg); }
  50%      { transform: perspective(1100px) rotateX(-2deg) rotateY(10deg) translateY(-4px); }
}
.product-card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--maroon); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.product-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.product-card__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-600); margin-bottom: .5rem; }
.product-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.product-card__title a { color: var(--ink-900); }
.product-card__title a:hover { color: var(--green-700); }
.product-card__text { font-size: .9rem; color: var(--ink-500); flex: 1; }
.product-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 1rem; }
.product-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.product-card__actions .btn { flex: 1 1 auto; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green-50); color: var(--green-800);
  border-radius: 999px; padding: 4px 11px; font-size: .76rem; font-weight: 600;
}
.chip--lime { background: var(--lime-100); color: #4d7a13; }
.chip--maroon { background: #fdecef; color: var(--maroon); }

/* --------------------------- stat / why --------------------------- */
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--green-700); line-height: 1.1; }
.stat-card span { font-size: .86rem; color: var(--ink-500); }
.section--green .stat-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.section--green .stat-card strong { color: var(--lime-500); }
.section--green .stat-card span { color: rgba(255,255,255,.85); }

.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.why-list li { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem; box-shadow: var(--shadow-sm); }
.why-list__check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-100); color: var(--green-700); flex: none; margin-top: 2px; }
.why-list strong { display: block; color: var(--ink-900); font-size: .97rem; }
.why-list span { font-size: .88rem; color: var(--ink-500); }

/* -------------------------- director card ------------------------- */
.director-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.director-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.director-card__photo { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--green-100), var(--lime-100)); overflow: hidden; }
.director-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.director-card__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 3rem; font-weight: 800; color: var(--green-700); opacity: .55;
}
.director-card__badge {
  position: absolute; left: 12px; bottom: 12px; background: var(--green-700); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.director-card__body { padding: 1.2rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.director-card__name { font-size: 1.08rem; margin-bottom: .15rem; }
.director-card__role { font-size: .86rem; font-weight: 700; color: var(--green-600); margin-bottom: .6rem; }
.director-card__qual { font-size: .82rem; color: var(--ink-500); margin-bottom: .7rem; }
.director-card__bio { font-size: .9rem; color: var(--ink-500); flex: 1; }
.director-card__contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700); transition: background .2s, color .2s, transform .2s;
}
.icon-btn:hover { background: var(--green-700); color: #fff; transform: translateY(-2px); }
.icon-btn--wa { background: #e6f9ee; color: #1faa53; }
.icon-btn--wa:hover { background: #25d366; color: #fff; }
.icon-btn--fb { background: #eef3fd; color: #1877f2; }
.icon-btn--fb:hover { background: #1877f2; color: #fff; }
.icon-btn--ig { background: #fdeef4; color: #d5338f; }
.icon-btn--ig:hover { background: #d5338f; color: #fff; }
.icon-btn--in { background: #e9f3fa; color: #0a66c2; }
.icon-btn--in:hover { background: #0a66c2; color: #fff; }
.icon-btn--tw { background: #eef1f3; color: #111; }
.icon-btn--tw:hover { background: #111; color: #fff; }
.icon-btn--yt { background: #fdecec; color: #ff0000; }
.icon-btn--yt:hover { background: #ff0000; color: #fff; }

/* --------------------------- document card ------------------------ */
.doc-card {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.doc-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 14px; background: var(--maroon); color: #fff; font-size: .72rem; font-weight: 700;
}
.doc-card__icon--pdf { background: #d93025; }
.doc-card__icon--img { background: var(--green-700); }
.doc-card__icon--doc { background: #185abd; }
.doc-card__icon--xls { background: #1f7244; }
.doc-card__body { flex: 1; min-width: 0; }
.doc-card__title { font-size: 1.02rem; margin-bottom: .3rem; }
.doc-card__text { font-size: .88rem; color: var(--ink-500); margin-bottom: .6rem; }
.doc-card__meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .78rem; color: var(--ink-300); }

/* ------------------------------ table ----------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
.table th, .table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { background: var(--green-50); color: var(--green-800); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.table tbody tr:hover { background: #fafdfa; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------ forms ----------------------------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form__group { display: flex; flex-direction: column; gap: .35rem; }
.form__label { font-size: .88rem; font-weight: 600; color: var(--ink-900); }
.form__label .req { color: var(--maroon); }
.form__control {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: .95rem; color: var(--ink-900);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__control:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(42,160,85,.12); }
.form__control::placeholder { color: var(--ink-300); }
textarea.form__control { min-height: 130px; resize: vertical; }
.form__hint { font-size: .78rem; color: var(--ink-300); }
.form__error { font-size: .8rem; color: var(--danger); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.form__check { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; color: var(--ink-500); }
.form__check input { margin-top: .3rem; }
.hp-field { position: absolute !important; left: -9999px; opacity: 0; }

/* ----------------------------- alerts ----------------------------- */
.flash-wrap { padding-top: 18px; }
.alert { border-radius: var(--radius-sm); padding: .95rem 1.15rem; margin-bottom: .8rem; font-size: .92rem; border: 1px solid transparent; }
.alert--success { background: #e9f8ee; border-color: #bde5cb; color: #14612f; }
.alert--error   { background: #fdeceb; border-color: #f3c4bf; color: #8f2418; }
.alert--warning { background: #fdf6e6; border-color: #f0debe; color: #8a6410; }
.alert--info    { background: #eaf3fd; border-color: #c5dcf5; color: #1a4f86; }
.alert ul { margin: .35rem 0 0; }

/* ---------------------------- pagination -------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.2rem; }
.pagination__link {
  min-width: 42px; padding: 9px 13px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--ink-700);
}
.pagination__link:hover { border-color: var(--green-500); color: var(--green-700); }
.pagination__link.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ------------------------------ badges ---------------------------- */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.badge--new      { background: #fdecef; color: var(--maroon); }
.badge--progress { background: #fdf6e6; color: var(--warn); }
.badge--ok       { background: #e9f8ee; color: #14612f; }
.badge--muted    { background: #eef1ef; color: var(--ink-500); }
.badge--green    { background: var(--green-100); color: var(--green-800); }

/* --------------------------- filter bar --------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); margin-bottom: 1.8rem;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-chip {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: .85rem; font-weight: 600; color: var(--ink-700); cursor: pointer;
}
.filter-chip:hover { border-color: var(--green-500); color: var(--green-700); }
.filter-chip.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box input { padding-left: 40px; min-width: 240px; }
.search-box .icon { position: absolute; left: 13px; color: var(--ink-300); }

/* ---------------------------- accordion --------------------------- */
.accordion { display: grid; gap: .7rem; }
.accordion__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.accordion__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; background: #fff; border: 0; cursor: pointer;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--ink-900); text-align: left;
}
.accordion__btn .icon { transition: transform .25s ease; color: var(--green-700); }
.accordion__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.accordion__panel-inner { padding: 0 1.15rem 1.15rem; color: var(--ink-500); font-size: .94rem; }

/* ----------------------------- CTA band --------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--maroon), var(--maroon-dark));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 3rem);
  display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta-band h2, .cta-band h3 { color: #fff; margin-bottom: .35rem; }
.cta-band p { color: rgba(255,255,255,.88); margin: 0; }
.cta-band__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* --------------------------- prose blocks ------------------------- */
.prose { font-size: 1rem; }
.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.4rem; }
.prose img { border-radius: var(--radius); margin: 1.2rem 0; }
.prose ul li { margin-bottom: .35rem; }
.prose--lg { font-size: 1.04rem; }

.benefit-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; }
.benefit-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; }
.benefit-list .icon { color: var(--green-600); margin-top: .25rem; flex: none; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spec-table th, .spec-table td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; }
.spec-table th { background: var(--green-50); color: var(--green-800); width: 38%; }

.product-gallery { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(140deg, var(--green-50), var(--lime-100)); }
.product-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-gallery--shot { perspective: 1200px; }
.product-gallery--shot img {
  /* contain for the same reason as the card shot: never crop the pack.
     Slower than the card (18s vs 14s) because the pack is bigger here. */
  object-fit: contain;
  transform-origin: center center;
  animation: shot-sway-lg 8s ease-in-out infinite;
}
.product-gallery--shot:hover img { animation-play-state: paused; }
@keyframes shot-sway-lg {
  0%, 100% { transform: perspective(1400px) rotateX(2deg) rotateY(-8deg); }
  50%      { transform: perspective(1400px) rotateX(-1deg) rotateY(8deg) translateY(-5px); }
}
.product-facts { display: grid; gap: .6rem; margin: 1rem 0; }
.product-facts div { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.product-facts strong { min-width: 108px; color: var(--ink-900); }

/* ---------------------------- map / boxes ------------------------- */
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

.info-tile { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.info-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-50); color: var(--green-700); flex: none; }
.info-tile strong { display: block; color: var(--ink-900); font-size: .95rem; }
.info-tile p, .info-tile a { font-size: .9rem; margin: 0; color: var(--ink-500); }
.info-tile a:hover { color: var(--green-700); }

/* ---------------------------- 404 / empty ------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-500); }
.empty-state .icon { color: var(--green-500); margin-bottom: 1rem; }

/* ----------------------------- footer ----------------------------- */
.site-footer { background: var(--green-900); color: rgba(255,255,255,.78); margin-top: 0; }
.footer-cta { background: linear-gradient(120deg, var(--green-700), var(--green-500)); }
.footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1.9rem 20px; flex-wrap: wrap; }
.footer-cta__title { color: #fff; font-size: 1.35rem; margin-bottom: .3rem; }
.footer-cta__text { color: rgba(255,255,255,.9); margin: 0; font-size: .95rem; max-width: 60ch; }
.footer-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2rem; padding: 3rem 20px 2.4rem; }
.footer-col { min-width: 0; }
.footer-brand { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.footer-brand img { width: 76px; height: 76px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.footer-brand strong { display: block; color: #fff; font-family: var(--font-head); font-size: .95rem; line-height: 1.25; }
.footer-brand span { font-size: .78rem; color: var(--lime-500); font-style: italic; }
.footer-about { font-size: .88rem; line-height: 1.7; }
.footer-badges { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; font-size: .78rem; color: rgba(255,255,255,.72); }
.footer-badges li { display: flex; gap: .45rem; align-items: center; }
.footer-badges .icon { color: var(--lime-500); }
.footer-social { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.footer-social a:hover { background: var(--lime-500); color: var(--green-900); }
.footer-title { color: #fff; font-size: 1rem; margin-bottom: 1rem; padding-bottom: .55rem; position: relative; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--lime-500); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .89rem; }
.footer-links a { color: rgba(255,255,255,.78); }
.footer-links a:hover { color: var(--lime-500); padding-left: 4px; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; font-size: .87rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .icon { color: var(--lime-500); margin-top: .2rem; flex: none; }
.footer-contact a { color: rgba(255,255,255,.85); }
.footer-contact a:hover { color: var(--lime-500); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); font-size: .8rem; }
.footer-bottom__inner { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 20px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
.footer-bottom__meta { color: rgba(255,255,255,.6); margin-left: .5rem; }
.footer-bottom__links { display: flex; gap: 1rem; flex-wrap: wrap; color: rgba(255,255,255,.6); }

/* ---------------------- floating action buttons ------------------- */
.float-stack {
  position: fixed; right: 16px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column-reverse; gap: .65rem; align-items: flex-end;
}
.float-btn {
  position: relative; display: flex; align-items: center; gap: .55rem;
  padding: 12px 14px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; box-shadow: 0 8px 22px rgba(16,36,26,.28);
  transition: transform .2s ease, box-shadow .2s ease, padding .2s ease;
}
.float-btn:hover { transform: translateY(-3px) scale(1.03); color: #fff; box-shadow: 0 12px 28px rgba(16,36,26,.34); }
.float-btn--whatsapp { background: #25d366; }
.float-btn--map { background: var(--green-700); }
.float-btn--call { background: #2b6cb0; }
.float-btn--top { background: var(--ink-900); padding: 12px; }
.float-btn--top[hidden] { display: none; }
.float-btn__label { font-size: .84rem; font-weight: 700; letter-spacing: .01em; }
.float-btn--top .float-btn__label { display: none; }
.float-btn__pulse {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.75); animation: floatPulse 2.4s infinite;
  pointer-events: none;
}
@keyframes floatPulse {
  0%   { transform: scale(1); opacity: .75; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.float-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--ink-900); color: #fff; font-size: .78rem; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.float-btn[data-tooltip]:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }

/* WhatsApp chat panel (progressive enhancement, optional) */
.wa-panel {
  position: fixed; right: 16px; bottom: 86px; z-index: 121; width: min(320px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.1rem; display: none;
}
.wa-panel.is-open { display: block; }
.wa-panel h4 { margin-bottom: .35rem; }
.wa-panel p { font-size: .86rem; color: var(--ink-500); }

/* --------------------------- animations --------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-btn__pulse { animation: none; }
  /* Park the spinning packs in a three-quarter pose. */
  .pack3d__spin, .pack3d__float, .pack3d__shadow { animation: none; }
  .pack3d__spin { transform: rotateX(-7deg) rotateY(-24deg); }
  /* Park the swaying photos flat too. */
  .product-card__shot, .product-gallery--shot img { animation: none; }
  .product-gallery--shot img { transform: none; }
}

/* ------------------------- dealer directory ----------------------- */
.dealer-search {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 1.4rem; margin-bottom: 1.4rem;
}
.dealer-search__main {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  /* stretch (not end) so labels sit on one line: the search input renders
     2px shorter than a select, which would otherwise offset every label. */
  align-items: stretch;
}
/* Compact variant (home page): only 3 fields, so lay them out on ONE row
   instead of inheriting the 5-column directory grid and wrapping. */
.dealer-search__main--compact {
  grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr));
}
.dealer-search__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; position: relative; }
/* The desktop grow rule below (.search-box { flex: 1 1 240px }) is written for
   the horizontal filter bar. These fields stack vertically, where that 240px
   flex-basis would become a 240px HEIGHT and shove the row out of alignment. */
.dealer-search__field .search-box { flex: 0 0 auto; }
.dealer-search__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.dealer-search__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.dealer-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; padding: .3rem;
}
.dealer-suggest__item {
  display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem;
  border-radius: 8px; color: var(--ink-700);
}
.dealer-suggest__item:hover, .dealer-suggest__item.is-active { background: var(--green-50); color: var(--green-800); }
.dealer-suggest__item .icon { color: var(--green-600); margin-top: .2rem; flex: none; }
.dealer-suggest__title { display: block; font-weight: 600; font-size: .9rem; color: var(--ink-900); }
.dealer-suggest__meta { display: block; font-size: .78rem; color: var(--ink-300); }
.dealer-suggest__label {
  padding: .55rem .7rem .25rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300);
}
.dealer-suggest__empty { padding: .8rem .7rem; font-size: .86rem; color: var(--ink-500); }

.dealer-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem;
  margin-bottom: 1.4rem;
}
.dealer-stats > div {
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-sm);
  padding: .9rem 1rem; text-align: center;
}
.dealer-stats strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--green-700); line-height: 1.1; }
.dealer-stats span { font-size: .78rem; color: var(--ink-500); }

.dealer-grid { align-items: start; }

.dealer-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.dealer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dealer-card__head { display: flex; gap: 1rem; align-items: flex-start; }
.dealer-card__photo {
  width: 74px; height: 74px; flex: none; border-radius: 14px; object-fit: cover;
  background: var(--green-50); border: 1px solid var(--line);
}
.dealer-card__initials {
  width: 74px; height: 74px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800;
  font-size: 1.5rem; color: var(--green-700);
  background: linear-gradient(140deg, var(--green-100), var(--lime-100));
}
.dealer-card__ident { min-width: 0; }
.dealer-card__name { font-size: 1.06rem; margin: 0 0 .15rem; }
.dealer-card__person { font-size: .88rem; color: var(--ink-500); margin: 0 0 .45rem; }
.dealer-card__flags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dealer-card__place { font-size: .78rem; color: var(--ink-300); display: inline-flex; align-items: center; gap: .25rem; }
.dealer-card__body { margin-top: .9rem; display: grid; gap: .45rem; flex: 1; }
.dealer-card__row { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; margin: 0; color: var(--ink-700); }
.dealer-card__row .icon { color: var(--green-600); margin-top: .22rem; flex: none; }
.dealer-card__actions {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.dealer-card__actions .btn { padding: 8px 13px; font-size: .82rem; }
.dealer-card__social { display: flex; gap: .35rem; margin-left: auto; }
.dealer-card__social .icon-btn { width: 32px; height: 32px; }

@media (max-width: 992px) {
  .dealer-search__main,
  .dealer-search__main--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dealer-search__field--wide { grid-column: 1 / -1; }
  .dealer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dealer-search__main,
  .dealer-search__main--compact { grid-template-columns: minmax(0, 1fr); }
  .dealer-card__social { margin-left: 0; }
  .dealer-card__actions .btn { flex: 1 1 auto; }
}

/* =====================================================================
   SOFT MODERN REFRESH --------------------------------------------------
   A calmer skin: rounded geometry, layered hue-tinted shadows, aurora
   gradients, glass surfaces and pill chips. Deliberately kept BEFORE the
   responsive rules below so the breakpoints still take priority.
   ===================================================================== */

html { scrollbar-width: thin; scrollbar-color: #cbdcd2 transparent; }
::selection { background: var(--lime-100); color: var(--green-900); }

h1, h2, h3, h4 { letter-spacing: -.022em; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; border-radius: 6px; }

/* --- buttons: gradient fill + soft coloured glow -------------------- */
.btn {
  border-radius: var(--pill);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--primary { --btn-bg: linear-gradient(135deg, var(--green-700), var(--green-500)); box-shadow: var(--glow); }
.btn--primary:hover { box-shadow: 0 18px 36px -12px rgba(26, 122, 68, .55); }
.btn--lime { --btn-bg: linear-gradient(135deg, var(--lime-500), #bde172); --btn-fg: var(--green-900); box-shadow: var(--glow-lime); }
.btn--lime:hover { color: var(--green-900); box-shadow: 0 18px 36px -12px rgba(157, 201, 78, .7); }
.btn--dark { --btn-bg: linear-gradient(135deg, #14241b, var(--ink-900)); }
.btn--outline { border-width: 1.5px; box-shadow: none; }
.btn--outline:hover { box-shadow: var(--glow); }
.btn--ghost { box-shadow: none; }
.btn--light, .btn--outline-light { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }

/* --- topbar + header: glassy, softer edge --------------------------- */
.topbar {
  background: linear-gradient(90deg, #0b3b21, #125c33 60%, #16572f);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__social a { backdrop-filter: blur(6px); }
.site-header { border-bottom: 1px solid var(--line-soft); }
.site-header::before {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
}
.site-header.is-stuck { box-shadow: 0 12px 32px -24px rgba(18, 35, 26, .55); }
.brand__logo { box-shadow: 0 6px 18px -10px rgba(18, 35, 26, .45); }
.primary-nav__list > li > a { transition: background .2s ease, color .2s ease; }

/* --- hero: aurora mesh + fine dot grain + glass card ---------------- */
.hero {
  background:
    radial-gradient(900px 480px at 6% -12%, rgba(157, 201, 78, .30), transparent 62%),
    radial-gradient(760px 560px at 102% 8%, rgba(63, 169, 107, .42), transparent 64%),
    linear-gradient(152deg, #0b3b21 0%, #10502c 46%, #1a7a44 100%);
  padding: clamp(56px, 7vw, 104px) 0 clamp(52px, 6vw, 88px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 90% at 18% 0%, #000 24%, transparent 74%);
          mask-image: radial-gradient(120% 90% at 18% 0%, #000 24%, transparent 74%);
}
.hero::after {
  right: -10%; top: -18%; width: 52%; height: 140%;
  background: radial-gradient(circle, rgba(157, 201, 78, .34), transparent 62%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .26); }
.hero__card {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  border-radius: var(--radius-lg);
  box-shadow: 0 44px 84px -44px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero__card img {
  border-radius: 50%; background: rgba(255, 255, 255, .94); padding: 12px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
}
.hero__mini div { border-radius: var(--radius-sm); background: rgba(255, 255, 255, .12); }

/* --- inner page banner --------------------------------------------- */
.page-banner {
  background:
    radial-gradient(760px 340px at 88% -20%, rgba(157, 201, 78, .24), transparent 62%),
    linear-gradient(120deg, #0b3b21, #125c33 58%, #1a7a44);
  padding: 54px 0 46px;
}

/* --- trust strip becomes a row of soft pill chips ------------------- */
.trust-strip {
  background: linear-gradient(180deg, #ffffff, var(--bg-soft));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-700);
  padding: 16px 0;
}
.trust-strip__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  padding: 7px 16px; box-shadow: var(--shadow-xs); color: var(--ink-700); font-weight: 600;
}
.trust-strip__item .icon { color: var(--green-600); }

/* --- sections ------------------------------------------------------ */
.section--tint { background: linear-gradient(180deg, #f7fcf9 0%, var(--bg-soft) 100%); }
.section--green {
  background:
    radial-gradient(700px 320px at 85% -10%, rgba(157, 201, 78, .22), transparent 62%),
    linear-gradient(160deg, #0b3b21, #14663a);
}
.section__eyebrow {
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  border: 1px solid rgba(26, 122, 68, .14);
  box-shadow: 0 6px 16px -12px rgba(26, 122, 68, .6);
}

/* --- cards: softer lift, warmer hairline ---------------------------- */
.card, .feature-card, .stat-card, .product-card, .category-card,
.director-card, .doc-card, .why-list li, .form-card {
  box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.card:hover, .feature-card:hover, .product-card:hover, .category-card:hover,
.director-card:hover, .doc-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: rgba(63, 169, 107, .28);
}
.card__icon {
  background: linear-gradient(135deg, var(--green-100), var(--lime-100));
  box-shadow: 0 10px 22px -14px rgba(26, 122, 68, .8);
}
.feature-card__num {
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  border: 1px solid rgba(26, 122, 68, .12);
}
.product-card__tag {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  box-shadow: 0 8px 18px -10px rgba(168, 50, 74, .7);
}
.director-card__badge { background: linear-gradient(135deg, var(--green-700), var(--green-500)); }

/* --- forms: soft filled fields ------------------------------------- */
.form__control {
  background: var(--bg-canvas);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.form__control:hover { border-color: #d8e6dd; }
.form__control:focus {
  background: #fff;
  border-color: var(--green-500);
  box-shadow: 0 0 0 5px rgba(63, 169, 107, .14);
}
.form-card { border-radius: var(--radius-lg); }

/* Let the product search field fill the bar on desktop so its placeholder is
   never clipped (mobile keeps the full-width stacked layout). */
@media (min-width: 721px) {
  .search-box { flex: 1 1 240px; }
  .search-box input { flex: 1 1 auto; }
}

/* --- chips, badges, pagination -------------------------------------- */
.badge, .chip { border-radius: var(--pill); }
.pagination__link { border-radius: var(--radius-sm); }

/* --- footer --------------------------------------------------------- */
.site-footer { background: linear-gradient(180deg, #0b3b21, #081f12); }
.footer-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--green-800), var(--green-600) 55%, var(--green-500));
}
.footer-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 220px at 86% 12%, rgba(157, 201, 78, .34), transparent 70%);
}
.footer-cta__inner { position: relative; z-index: 1; }
.footer-social a { transition: transform .2s ease, background .2s ease; }
.footer-social a:hover { transform: translateY(-3px); }

/* --- floating actions ------------------------------------------------ */
.float-btn { box-shadow: 0 12px 28px -10px rgba(18, 35, 26, .5); }
.float-btn:hover { box-shadow: 0 18px 38px -12px rgba(18, 35, 26, .55); }
.float-btn--whatsapp { background: linear-gradient(135deg, #25d366, #12b855); }
.float-btn--map { background: linear-gradient(135deg, var(--green-700), var(--green-600)); }

/* --- packaging showcase ---------------------------------------------- */
.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.pack-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1rem 1.3rem; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.pack-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(63, 169, 107, .28); }
.pack-card__media { border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(150deg, var(--green-50), var(--lime-100)); }
.pack-card__media img { width: 100%; height: auto; }
.pack-card__title { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.02rem; margin: .95rem 0 .3rem; }
.pack-card__title .icon { color: var(--green-600); }
.pack-card__text { font-size: .87rem; color: var(--ink-500); margin: 0; }
@media (max-width: 992px) { .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pack-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; } }

/* --- spinning 3D product pack ------------------------------------------
   Markup from includes/pack3d.php: a packaging box / sack / pouch / bottle
   assembled from CSS 3D transforms that slowly spins on the spot. No JS and
   no image files - keyframes do all the work and prefers-reduced-motion
   parks the pack in a static three-quarter pose. ----------------------- */
.pack3d {
  position: relative; display: block; width: 100%;
  --pack-scale: .86;
  --pack-w: 158px; --pack-d: 96px; --pack-h: 200px;
  --pack-shadow-w: 174px;
}
.pack3d--xs { --pack-scale: .50; }
.pack3d--sm { --pack-scale: .66; }
.pack3d--md { --pack-scale: .86; }
.pack3d--lg { --pack-scale: 1.06; }

.pack3d--carton { --pack-w: 158px; --pack-d: 96px;  --pack-h: 200px; --pack-shadow-w: 174px; }
.pack3d--sack   { --pack-w: 150px; --pack-d: 106px; --pack-h: 212px; --pack-shadow-w: 176px; }
.pack3d--pouch  { --pack-w: 150px; --pack-d: 36px;  --pack-h: 204px; --pack-shadow-w: 166px; }
.pack3d--bottle {
  --pack-r: 54px; --pack-h: 160px;
  --pack-neck-r: 16px; --pack-neck-h: 26px;
  --pack-cap-r: 19px;  --pack-cap-h: 20px;
  --pack-shadow-w: 148px;
}

.pack3d__stage { position: relative; width: 100%; height: calc(230px * var(--pack-scale)); }
.pack3d__scene {
  position: absolute; left: 50%; top: 50%;
  width: 230px; height: 230px;
  transform: translate(-50%, -50%) scale(var(--pack-scale));
}
.pack3d__float { position: absolute; inset: 0; perspective: 900px; animation: pack3d-bob 6s ease-in-out infinite; }
.pack3d__spin  { position: absolute; inset: 0; transform-style: preserve-3d; animation: pack3d-spin var(--pack-spin, 16s) linear infinite; }
.pack3d__box   { position: absolute; inset: 0; transform-style: preserve-3d; }
.pack3d__shadow {
  position: absolute; left: 50%; bottom: 6px;
  width: var(--pack-shadow-w); height: 20px;
  background: radial-gradient(ellipse at center, rgba(12, 40, 25, .38), rgba(12, 40, 25, 0) 70%);
  animation: pack3d-pulse 6s ease-in-out infinite;
}
@keyframes pack3d-spin  { from { transform: rotateX(-7deg) rotateY(-24deg); } to { transform: rotateX(-7deg) rotateY(336deg); } }
@keyframes pack3d-bob   { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes pack3d-pulse { 0%, 100% { opacity: .85; transform: translateX(-50%) scaleX(.94); } 50% { opacity: .5; transform: translateX(-50%) scaleX(1.06); } }

/* --- faces ----------------------------------------------------------- */
.pack3d__face {
  position: absolute; left: 50%; top: 50%;
  backface-visibility: hidden; overflow: hidden;
}
.pack3d__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.20), rgba(255,255,255,0) 44%, rgba(6,28,16,.20) 100%);
}
.pack3d__face--front, .pack3d__face--back {
  width: var(--pack-w); height: var(--pack-h);
  margin-left: calc(var(--pack-w) / -2); margin-top: calc(var(--pack-h) / -2);
}
.pack3d__face--left, .pack3d__face--right {
  width: var(--pack-d); height: var(--pack-h);
  margin-left: calc(var(--pack-d) / -2); margin-top: calc(var(--pack-h) / -2);
}
.pack3d__face--top, .pack3d__face--bottom {
  width: var(--pack-w); height: var(--pack-d);
  margin-left: calc(var(--pack-w) / -2); margin-top: calc(var(--pack-d) / -2);
}
.pack3d__face--front  { transform: translateZ(calc(var(--pack-d) / 2)); }
.pack3d__face--back   { transform: rotateY(180deg) translateZ(calc(var(--pack-d) / 2)); }
.pack3d__face--right  { transform: rotateY(90deg)  translateZ(calc(var(--pack-w) / 2)); }
.pack3d__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--pack-w) / 2)); }
.pack3d__face--top    { transform: rotateX(90deg)  translateZ(calc(var(--pack-h) / 2)); }
.pack3d__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--pack-h) / 2)); }

.pack3d__face--front {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 20px 13px; text-align: center; color: #fff;
  background: linear-gradient(155deg, #2fa465 0%, #17804a 48%, #0f5f36 100%);
}
.pack3d__face--back {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 16px 14px; text-align: center; color: #fff;
  background: linear-gradient(155deg, #156a3d, #0b462a);
}
.pack3d__face--left, .pack3d__face--right {
  display: grid; place-items: center;
  background: linear-gradient(180deg, #1a8149, #0c4f2d);
}
.pack3d__face--top { display: grid; place-items: center; background: linear-gradient(135deg, #3cb273, #1d8f50); }
.pack3d__face--bottom { background: #093a20; }

.pack3d__stripe { position: absolute; top: 0; left: 0; right: 0; height: 9px; background: var(--lime-500); z-index: 2; }
.pack3d__stripe--bottom { top: auto; bottom: 0; height: 6px; background: rgba(255,255,255,.32); }
.pack3d .pack3d__logo {
  width: 54px; height: 54px; margin: 0; aspect-ratio: auto; filter: none;
  object-fit: contain; padding: 5px; background: #fff;
  border-radius: 14px; box-shadow: 0 6px 14px rgba(0,0,0,.24);
}
.pack3d .pack3d__logo ~ .pack3d__seal { display: none; }
.pack3d__brand { font-size: .5rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--lime-100); }
.pack3d__label {
  font-family: var(--font-head); font-weight: 800; font-size: .98rem; line-height: 1.16; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.pack3d__sub { font-size: .55rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.pack3d__seal {
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.42); color: var(--lime-100);
}
.pack3d__back-brand { font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.pack3d__barcode { width: 74%; height: 34px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px); }
.pack3d__back-note { font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.pack3d__vertical {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.86); white-space: nowrap; max-height: 90%; overflow: hidden;
}
.pack3d__topmark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px dashed rgba(255,255,255,.55); color: var(--lime-100);
}

/* --- variant skins ---------------------------------------------------- */
/* woven sack */
.pack3d--sack .pack3d__face--front {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    linear-gradient(155deg, #38a86b 0%, #157a45 55%, #0e5b33 100%);
}
.pack3d--sack .pack3d__face--top { background: linear-gradient(135deg, #46b87b, #1f9154); }
.pack3d--sack .pack3d__stripe { height: 12px; background: repeating-linear-gradient(90deg, var(--lime-500) 0 8px, #86b23e 8px 16px); }

/* foil pouch with zip seals */
.pack3d--pouch .pack3d__face--front  { border-radius: 3px 3px 8px 8px; background: linear-gradient(155deg, #57b757 0%, #2b9145 55%, #166b34 100%); }
.pack3d--pouch .pack3d__face--back   { border-radius: 3px 3px 8px 8px; }
.pack3d--pouch .pack3d__stripe       { height: 8px; background: repeating-linear-gradient(90deg, var(--lime-500) 0 6px, #86b23e 6px 12px); }

/* bottle: faceted cylinder (16 body / 12 neck / 12 cap segments) */
.pack3d__seg {
  width: calc(var(--pack-r) * .41); height: var(--pack-h);
  margin-left: calc(var(--pack-r) * -.205); margin-top: calc(var(--pack-h) / -2);
  background: linear-gradient(180deg,
    #2ea263 0%, #17804a 16%,
    rgba(255,255,255,.96) 16%, rgba(255,255,255,.96) 78%,
    #106035 78%, #0c4a2a 100%);
  transform: rotateY(var(--seg, 0deg)) translateZ(var(--pack-r));
}
.pack3d__circle { border-radius: 50%; }
.pack3d__circle--body-top,
.pack3d__circle--body-bottom {
  width: calc(var(--pack-r) * 2); height: calc(var(--pack-r) * 2);
  margin-left: calc(var(--pack-r) * -1); margin-top: calc(var(--pack-r) * -1);
}
.pack3d__circle--body-top    { transform: rotateX(90deg)  translateZ(calc(var(--pack-h) / 2)); background: radial-gradient(circle at 35% 30%, #2f9e63, #12613a); }
.pack3d__circle--body-bottom { transform: rotateX(-90deg) translateZ(calc(var(--pack-h) / 2)); background: #093a20; }
.pack3d__bottle-label {
  width: calc(var(--pack-r) * 1.24); height: calc(var(--pack-h) * .60);
  margin-left: calc(var(--pack-r) * -.62); margin-top: calc(var(--pack-h) * -.30);
  transform: translateY(calc(var(--pack-h) * -.03)) translateZ(calc(var(--pack-r) * 1.02));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 3px 6px; text-align: center;
}
.pack3d__bottle-label .pack3d__brand { color: var(--green-700); font-size: .34rem; letter-spacing: .04em; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }
.pack3d__bottle-label .pack3d__label { color: var(--ink-900); font-size: .76rem; -webkit-line-clamp: 4; overflow-wrap: anywhere; }
.pack3d__bottle-label .pack3d__logo { width: 30px; height: 30px; padding: 3px; border-radius: 8px; box-shadow: none; }
.pack3d__bottle-label .pack3d__logo ~ .pack3d__brand { display: none; }
.pack3d__seg--neck {
  width: calc(var(--pack-neck-r) * .56); height: var(--pack-neck-h);
  margin-left: calc(var(--pack-neck-r) * -.28); margin-top: calc(var(--pack-neck-h) / -2);
  background: linear-gradient(180deg, #1e9152, #0d5731);
  transform: translateY(calc(var(--pack-h) / -2 - var(--pack-neck-h) / 2)) rotateY(var(--seg, 0deg)) translateZ(var(--pack-neck-r));
}
.pack3d__circle--neck-top {
  width: calc(var(--pack-neck-r) * 2); height: calc(var(--pack-neck-r) * 2);
  margin-left: calc(var(--pack-neck-r) * -1); margin-top: calc(var(--pack-neck-r) * -1);
  transform: translateY(calc(var(--pack-h) / -2 - var(--pack-neck-h) / 2)) rotateX(90deg) translateZ(calc(var(--pack-neck-h) / 2));
  background: #0d5731;
}
.pack3d__seg--cap {
  width: calc(var(--pack-cap-r) * .56); height: var(--pack-cap-h);
  margin-left: calc(var(--pack-cap-r) * -.28); margin-top: calc(var(--pack-cap-h) / -2);
  background: linear-gradient(180deg, #c3e974, var(--lime-500) 55%, #7ba63a);
  transform: translateY(calc(var(--pack-h) / -2 - var(--pack-neck-h) - var(--pack-cap-h) / 2)) rotateY(var(--seg, 0deg)) translateZ(var(--pack-cap-r));
}
.pack3d__circle--cap-top {
  width: calc(var(--pack-cap-r) * 2); height: calc(var(--pack-cap-r) * 2);
  margin-left: calc(var(--pack-cap-r) * -1); margin-top: calc(var(--pack-cap-r) * -1);
  transform: translateY(calc(var(--pack-h) / -2 - var(--pack-neck-h) - var(--pack-cap-h) / 2)) rotateX(90deg) translateZ(calc(var(--pack-cap-h) / 2));
  background: radial-gradient(circle at 35% 30%, #d4f48a, var(--lime-500));
}

/* --- where the pack appears ------------------------------------------- */
.page-banner__pack {
  position: absolute; z-index: 0; pointer-events: none;
  right: max(24px, calc((100% - var(--container)) / 2 + 20px));
  bottom: -4px; width: 170px;
}
@media (max-width: 992px) { .page-banner__pack { display: none; } }

/* The hero pack floats above the card's top-right corner (only from
   1101px, where the logo no longer reaches the corner), so the original
   logo stays untouched inside the card. */
.hero__pack {
  position: absolute; z-index: 2; pointer-events: none; display: none;
  top: -84px; right: -4px; width: 152px;
}
@media (min-width: 1101px) { .hero__pack { display: block; } }

/* Logo tile: square with rounded corners that gently sways in 3D. */
.hero__logo-tile {
  width: min(210px, 62%); aspect-ratio: 1 / 1;
  margin: 0 auto 1.1rem; padding: 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px;
  box-shadow: 0 22px 40px -18px rgba(6, 28, 16, .55), 0 3px 10px rgba(6, 28, 16, .18), inset 0 1px 0 #fff;
  transform: perspective(700px) rotateX(9deg) rotateY(-11deg);
  animation: heroLogo3d 7s ease-in-out infinite;
  transition: box-shadow .3s ease;
}
.hero__logo-tile:hover {
  box-shadow: 0 28px 52px -18px rgba(6, 28, 16, .62), 0 4px 14px rgba(6, 28, 16, .22), inset 0 1px 0 #fff;
}
.hero__logo-tile img {
  width: 100%; height: 100%; object-fit: contain;
  margin: 0; filter: none; border-radius: 16px;
}
@keyframes heroLogo3d {
  0%, 100% { transform: perspective(700px) rotateX(9deg) rotateY(-11deg); }
  50%      { transform: perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .hero__logo-tile { animation: none; } }
.pack-card__media .pack3d__stage { height: calc(248px * var(--pack-scale)); }
.product-gallery--3d .pack3d__stage { height: calc(300px * var(--pack-scale)); }
.pack3d__spin, .pack3d__float, .pack3d__shadow { will-change: transform; }

/* --- prose imagery --------------------------------------------------- */
.prose img { border-radius: var(--radius); }

/* --- header breathing room -------------------------------------------
   At 1200px the brand + 8 nav items + CTA filled the bar exactly, so the
   flex items shrank and the labels wrapped onto two lines. Lighten the bar
   so nothing ever wraps; the <=1100 rules below tighten it further. */
.brand__text strong, .brand__text small { white-space: nowrap; }
@media (max-width: 1280px) {
  .brand__logo { width: 66px; height: 66px; }
  .brand__text strong { font-size: 1.02rem; }
  .brand__text small { font-size: .68rem; }
  .primary-nav { gap: .7rem; }
  .primary-nav__list { gap: .05rem; }
  .primary-nav__list > li > a { padding: 9px 11px; font-size: .9rem; white-space: nowrap; }
}

/* --- team / directors -------------------------------------------------
   Wide profile cards (photo + bio side by side). The old markup forced a
   3-up grid with a 210px photo strip, which left the bio ~120px wide. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.team-card {
  display: flex; gap: 1.3rem; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.team-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(63, 169, 107, .28); }
.team-card--lead {
  background: linear-gradient(140deg, #ffffff 0%, var(--green-50) 58%, var(--lime-100) 100%);
  border-color: rgba(63, 169, 107, .34);
}
.team-card__photo {
  position: relative; flex: none; width: 190px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm); overflow: hidden;
  background: linear-gradient(155deg, var(--green-100), var(--lime-100));
  box-shadow: inset 0 0 0 1px rgba(26, 122, 68, .10);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.team-card__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 3.2rem; font-weight: 800;
  color: var(--green-700); opacity: .45; letter-spacing: -.03em;
}
.team-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.team-card__role {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-100);
  padding: 5px 12px; border-radius: var(--pill);
}
.team-card--lead .team-card__role { background: var(--lime-100); color: #4d7a13; }
.team-card__name { font-size: 1.26rem; margin: .75rem 0 .2rem; }
.team-card__qual { font-size: .84rem; color: var(--ink-500); margin: 0 0 .55rem; }
.team-card__bio { font-size: .93rem; color: var(--ink-500); margin: 0; flex: 1; }
.team-card__contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }

/* ------------------- justified body copy ------------------------------
   Running prose across the public pages is justified. Deliberately limited
   to paragraphs and descriptions: headings, navigation, buttons, badges,
   tables and centred blocks (section leads, stat cards, hero card, page
   banner) keep their current alignment, because justifying short centred
   text opens large word gaps. Short one-line strings are unaffected either
   way - text-align:justify only changes every line except the last.

   .prose targets its paragraphs and list items rather than the block itself:
   text-align inherits, so justifying .prose wholesale would drag every
   heading inside it (including a centred section title) into justify too. */
.prose p,
.prose li,
.card p,
.feature-card p,
.product-card__text,
.category-card p,
.step-card__text,
.pack-card__text,
.director-card__qual,
.director-card__bio,
.team-card__qual,
.team-card__bio,
.doc-card__text,
.dealer-card__row,
.accordion__panel-inner,
.info-tile p,
.benefit-list li span,
.why-list span,
.hero__text,
.cta-band p,
.footer-cta__text,
.footer-about { text-align: justify; }

/* --------------------------- responsive --------------------------- */
@media (max-width: 1100px) {
  :root { --header-h: 76px; }
  .brand__logo { width: 66px; height: 66px; }
  .primary-nav__list > li > a { padding: 9px 10px; font-size: .88rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem; }
}

@media (max-width: 992px) {
  /* The slide-out menu is positioned right below the top bar, so the bar must
     stay exactly one line tall (40px) at tablet and phone sizes. */
  .topbar { font-size: .78rem; }
  .topbar__inner { flex-wrap: nowrap; min-height: 40px; }
  .topbar__right { display: none; }
  .topbar__list { flex-wrap: nowrap; gap: .85rem; overflow: hidden; min-width: 0; }
  .topbar__list li { white-space: nowrap; }
  .topbar__list a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  /* Lead with the headline on small screens - the logo card repeats the
     header logo and pushed the actual message below the fold. */
  .hero__media { order: 0; max-width: 520px; margin: 0 auto; }

  /* Mobile navigation */
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: calc(var(--header-h) + 40px) 0 0 auto;
    width: min(360px, 88vw); background: #fff; border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 1rem 2.5rem; overflow-y: auto;
    transform: translateX(105%); transition: transform .3s ease;
    box-shadow: -12px 0 34px rgba(16,36,26,.14); z-index: 95;
  }
  body.nav-open .primary-nav { transform: translateX(0); }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .primary-nav__list > li { border-bottom: 1px solid var(--line); }
  .primary-nav__list > li > a { border-radius: 0; padding: 13px 6px; justify-content: flex-start; }
  .has-dropdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .has-dropdown > a { flex: 1; }
  .has-dropdown > a .chev { display: none; }
  .dropdown-toggle {
    display: grid; place-items: center; width: 42px; height: 42px;
    background: transparent; border: 0; cursor: pointer; color: var(--green-700);
  }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-top: 1px dashed var(--line); border-radius: 0;
    width: 100%; display: none; padding: .3rem 0 .6rem .6rem;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .primary-nav__cta { margin-top: 1.2rem; }
  .primary-nav__cta .btn { width: 100%; }
  /* The scrim must sit BELOW the sticky header (z-index:90), which is the
     stacking context that holds the drawer. At 90 both shared a level and the
     scrim - being later in the DOM - painted over the drawer, so every tap hit
     the scrim and the "tap outside" handler closed the menu. 80 keeps it above
     all page content while leaving the header and its drawer on top. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(10,32,20,.45); z-index: 80;
  }
  /* Drop the floating buttons under the scrim too, otherwise they float over
     the open drawer and swallow taps meant for the menu. */
  body.nav-open .float-stack,
  body.nav-open .wa-panel { z-index: 78; }
}

/* On small screens the section padding drops to 44-48px, so the footer reads as
   glued to the content above it (desktop gets ~77px). Restore a comparable gap. */
@media (max-width: 992px) {
  .site-footer { margin-top: 32px; }

  /* Product detail stacks: title block first, then image + info card, then
     description accordions and the enquiry form. */
  .product-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "body";
    gap: 1.6rem;
  }
  .product-layout .card { padding: 1.25rem; }
  /* iOS/iPadOS Safari zooms the viewport when a focused input renders below
     16px - 16px keeps the page still while typing. */
  .form__control, .search-box input, select { font-size: 16px; }
  /* Small-button tap target (Price on WhatsApp, Call to order, card actions). */
  .btn--sm { min-height: 44px; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .spec-table { font-size: .88rem; }
  .spec-table th, .spec-table td { padding: .55rem .6rem; }
  .spec-table th { width: 36%; }
  .chip { max-width: 100%; }
  .topbar__inner { justify-content: center; }
  .topbar__gst, .topbar__tagline { display: none; }
  .brand__text strong { font-size: .98rem; }
  .brand__text small { font-size: .66rem; }
  .section { padding: 44px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  /* Team profile: photo becomes a banner above the text */
  .team-card { flex-direction: column; }
  .team-card__photo { width: 100%; aspect-ratio: 3 / 2; }
  .team-card__photo img { object-position: 50% 22%; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); padding: 2.2rem 20px; }
  .footer-cta__inner { padding: 1.5rem 20px; }
  .footer-cta__actions .btn { flex: 1 1 auto; }
  .footer-bottom__inner { flex-direction: column; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .float-btn__label { display: none; }
  .float-btn--whatsapp, .float-btn--map, .float-btn--call { padding: 13px; }
  .float-btn[data-tooltip]::before { display: none; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-box input { min-width: 0; width: 100%; }
  .doc-card { flex-direction: row; }
  .stat-card strong { font-size: 1.7rem; }
  .hero__mini { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  /* Only the horizontal gutter shrinks here. Using longhands keeps the vertical
     padding of composite containers (.footer-cta__inner, .footer-grid,
     .footer-bottom__inner ...) - the shorthand collapsed them to 0 and glued
     the footer sections together. */
  .container { padding-left: 16px; padding-right: 16px; }
  .hero__mini strong { font-size: 1rem; }
  .hero__mini span { letter-spacing: 0; }
  /* Keep the top bar to a single line - hide the (long) email address */
  .topbar__list li:nth-child(2) { display: none; }
  .btn { padding: 12px 20px; font-size: .9rem; }
  .hero__actions .btn { width: 100%; }
  .card, .feature-card, .form-card { padding: 1.15rem; }
  .section__head { text-align: left; }
}

/* ------------------------------ print ----------------------------- */
@media print {
  .topbar, .site-header, .float-stack, .site-footer, .page-banner__bg, .page-banner__pack, .pack3d, .filter-bar, .pagination { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}