/* ==========================================================================
   Green Harvest Fertilizer - Corporate Website Stylesheet
   ========================================================================== */

:root{
  --green-900:#0F3D20;
  --green-800:#16552C;
  --green-700:#1C6B37;
  --green-600:#2E8B46;
  --green-500:#3FA158;
  --green-100:#E7F2E9;
  --green-50:#F2F8F3;
  /* gold-600 is used for small uppercase label text, so it is darkened to a
     bronze that clears WCAG AA 4.5:1 on white, soft grey and gold tints. */
  --gold-600:#8F6716;
  --gold-500:#C9962B;
  --gold-400:#E3B74F;
  --gold-100:#FBF2DC;
  --charcoal:#23282D;
  --grey-700:#434C55;
  --grey-600:#5A646E;
  --grey-400:#98A2A8;
  --grey-300:#D7DCD8;
  --grey-200:#E8ECE7;
  --white:#FFFFFF;
  --bg-soft:#F6F8F4;
  --red-600:#B3261E;

  /* One sans superfamily across the site. Noto Sans Devanagari sits in both
     stacks so the Hindi product names render properly instead of falling back
     to whatever the device happens to have. */
  --font-head:"Plus Jakarta Sans","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Plus Jakarta Sans","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --shadow-sm:0 1px 2px rgba(15,61,32,.06),0 1px 3px rgba(15,61,32,.08);
  --shadow-md:0 2px 6px rgba(15,61,32,.07),0 8px 20px rgba(15,61,32,.07);
  --shadow-lg:0 4px 12px rgba(15,61,32,.09),0 16px 40px rgba(15,61,32,.10);

  --radius:6px;
  --radius-lg:10px;
  --wrap:1180px;
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--green-900)}
/* A geometric sans needs tighter tracking than a serif at display sizes, and a
   heavier weight to hold the same presence. */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--green-900);line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem)}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);font-weight:700;letter-spacing:-.015em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--grey-200);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding:clamp(3rem,2rem + 4vw,5.5rem) 0}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--green-50)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--green-900);color:#fff;padding:.8rem 1.2rem;text-decoration:none}
.skip-link:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.2;
  padding:.85rem 1.6rem;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn--primary{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.btn--primary:hover{background:var(--green-900);border-color:var(--green-900);color:#fff}
.btn--gold{background:var(--gold-500);color:#1E1704;border-color:var(--gold-500)}
.btn--gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:#1E1704}
.btn--ghost{background:transparent;color:var(--green-800);border-color:var(--grey-300)}
.btn--ghost:hover{background:var(--green-50);border-color:var(--green-600);color:var(--green-900)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--on-dark:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn--sm{padding:.6rem 1.1rem;font-size:.92rem}
.btn--block{width:100%}

/* ---------- Header ---------- */
.topbar{background:var(--green-900);color:#D7E6DA;font-size:.86rem}
.topbar__inner{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:space-between;padding-block:.5rem}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline;color:var(--gold-400)}
.topbar__item{display:inline-flex;align-items:center;gap:.4rem}
.topbar svg{width:15px;height:15px;flex-shrink:0}
@media (max-width:620px){.topbar__inner{justify-content:center;font-size:.82rem}}

.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--grey-200)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand img{width:52px;height:52px}
.brand__name{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--green-900);line-height:1.1;letter-spacing:-.01em}
.brand__tag{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-600)}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  font-size:.97rem;font-weight:600;color:var(--grey-700);text-decoration:none;
  padding:.55rem .85rem;border-radius:var(--radius);
}
.nav a:hover{color:var(--green-800);background:var(--green-50)}
.nav a[aria-current="page"]{color:var(--green-900);box-shadow:inset 0 -3px 0 var(--gold-500)}
.nav__cta{margin-left:.6rem}
.nav-toggle{display:none;background:#fff;border:1px solid var(--grey-300);border-radius:var(--radius);padding:.55rem .7rem;cursor:pointer;align-items:center;gap:.5rem;font-weight:600;color:var(--green-900);font-size:.95rem}
.nav-toggle__bars{display:block;width:20px;height:2px;background:var(--green-900);position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--green-900)}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}

@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--grey-200);box-shadow:var(--shadow-md);padding:.5rem 20px 1rem;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem .6rem;border-bottom:1px solid var(--grey-200);border-radius:0}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--gold-500)}
  .nav__cta{margin:.9rem 0 0}
  .site-header__inner{position:relative}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--green-900);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,45,23,.94) 0%,rgba(13,56,29,.88) 42%,rgba(16,70,36,.62) 100%);
}
.hero__inner{position:relative;padding:clamp(3.5rem,2rem + 7vw,7rem) 0;max-width:720px}
.hero__eyebrow{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-400);border:1px solid rgba(227,183,79,.45);border-radius:999px;padding:.35rem .9rem;margin-bottom:1.3rem;
}
.hero h1{color:#fff;margin-bottom:.6em}
.hero__lead{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:#D9E7DC;max-width:60ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Page head / breadcrumbs ---------- */
.page-head{background:var(--green-900);color:#fff;padding:clamp(2.2rem,1.6rem + 2.5vw,3.4rem) 0}
.page-head h1{color:#fff;margin-bottom:.35em}
.page-head__lead{color:#CFE0D3;max-width:70ch;margin:0;font-size:1.05rem}
.crumbs{font-size:.85rem;margin-bottom:1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.crumbs li{margin:0;color:#A9C4AF}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:#6E8C76}
.crumbs a{color:#CFE0D3;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--gold-400);font-weight:600}

/* ---------- Generic blocks ---------- */
.eyebrow{display:block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-600);margin-bottom:.7rem}
.section-head{max-width:720px;margin-bottom:2.6rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{color:var(--grey-600);font-size:1.04rem;margin-bottom:0}
.lead{font-size:1.1rem;color:var(--grey-700)}

.grid{display:grid;gap:1.6rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 3vw,3.6rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%}

/* ---------- Product cards ---------- */
.card{
  background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--grey-300)}
.card__media{
  position:relative;background:var(--bg-soft);border-bottom:1px solid var(--grey-200);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:1.1rem;
}
.card__media img{max-height:100%;width:auto;object-fit:contain;border-radius:3px}
.card__body{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:.15em}
.card__native{font-size:.95rem;color:var(--grey-600);margin:0 0 .7rem}
.card__desc{font-size:.95rem;color:var(--grey-700);margin-bottom:1rem;flex:1}
.card__meta{list-style:none;padding:.85rem 0 0;margin:0 0 1.15rem;font-size:.88rem;color:var(--grey-700);border-top:1px solid var(--grey-200)}
.card__meta li{display:flex;gap:.6rem;margin-bottom:.35rem}
.card__meta strong{color:var(--green-900);font-weight:600;min-width:84px;flex-shrink:0}
.card__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}

.tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--green-800);background:var(--green-100);border-radius:999px;padding:.3rem .75rem;margin-bottom:.8rem;
}
.tag--gold{color:var(--gold-600);background:var(--gold-100)}

/* ---------- Feature list ---------- */
.feature{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.6rem 1.5rem}
.feature__icon{
  width:46px;height:46px;border-radius:50%;background:var(--green-100);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.feature__icon svg{width:23px;height:23px}
.feature h3{font-size:1.12rem;margin-bottom:.4em}
.feature p{font-size:.95rem;color:var(--grey-600);margin:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;position:relative}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .65rem;font-size:.84rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(8,36,18,.85),rgba(8,36,18,0));
}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--green-800);color:#fff;border-radius:var(--radius-lg);padding:clamp(2rem,1.4rem + 2.4vw,3.2rem);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#D4E4D8;max-width:62ch;margin-inline:auto;margin-bottom:1.8rem}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ---------- Filters / toolbar ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1rem 1.1rem;margin-bottom:2rem;
}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-btn{
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:#fff;color:var(--grey-700);border:1px solid var(--grey-300);border-radius:999px;padding:.5rem 1rem;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.filter-btn:hover{border-color:var(--green-600);color:var(--green-800)}
.filter-btn[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:#fff}
.search-field{position:relative;flex:1;min-width:230px;max-width:320px}
.search-field input{
  width:100%;font:inherit;font-size:.95rem;padding:.6rem .85rem .6rem 2.3rem;
  border:1px solid var(--grey-300);border-radius:var(--radius);background:#fff;color:var(--charcoal);
}
.search-field input:focus{border-color:var(--green-600);outline:none;box-shadow:0 0 0 3px rgba(46,139,70,.14)}
.search-field svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--grey-400)}
.empty-state{
  display:none;text-align:center;padding:3rem 1rem;background:var(--bg-soft);
  border:1px dashed var(--grey-300);border-radius:var(--radius-lg);color:var(--grey-600);
}
.empty-state.is-visible{display:block}
.empty-state h3{margin-bottom:.3em}
.card.is-hidden{display:none}

/* ---------- Product detail ---------- */
.product-detail{padding-block:clamp(2.5rem,2rem + 2.5vw,4rem);border-bottom:1px solid var(--grey-200)}
.product-detail:last-of-type{border-bottom:0}
.product-detail__grid{display:grid;grid-template-columns:400px 1fr;gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:start}
/* Grid items default to min-width:auto, which lets a wide table push the whole
   column open instead of scrolling inside .table-scroll. min-width:0 fixes that. */
.product-detail__grid > *{min-width:0}
@media (max-width:880px){.product-detail__grid{grid-template-columns:1fr}}
.product-detail__media{background:var(--bg-soft);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.6rem;display:flex;align-items:center;justify-content:center}
.product-detail__media img{max-height:420px;width:auto}

.spec-table{width:100%;border-collapse:collapse;font-size:.95rem;margin-bottom:1.4rem}
.spec-table caption{text-align:left;font-weight:700;color:var(--green-900);font-family:var(--font-head);font-size:1.1rem;padding-bottom:.6rem}
.spec-table th,.spec-table td{text-align:left;padding:.7rem .85rem;border:1px solid var(--grey-200);vertical-align:top}
.spec-table thead th{background:var(--green-100);color:var(--green-900);font-weight:700}
.spec-table tbody th{background:var(--bg-soft);font-weight:600;color:var(--green-900);width:34%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.4rem}
.table-scroll .spec-table{margin-bottom:0;min-width:540px}

.note{
  border-left:4px solid var(--gold-500);background:var(--gold-100);
  padding:1rem 1.15rem;border-radius:0 var(--radius) var(--radius) 0;font-size:.93rem;color:#4A3B12;margin-bottom:1.4rem;
}
.note strong{color:#3A2E0C}
.note--info{border-left-color:var(--green-600);background:var(--green-50);color:var(--grey-700)}
.note--info strong{color:var(--green-900)}
.note p:last-child{margin-bottom:0}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1.2rem + 3vw,3.4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.office{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.6rem;height:100%}
.office__type{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);display:block;margin-bottom:.55rem}
.office h3{margin-bottom:.4em}
.office address{font-style:normal;color:var(--grey-700);font-size:.97rem;margin-bottom:1rem}
.office__links{display:flex;flex-wrap:wrap;gap:.6rem}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--grey-200)}
.contact-list li:last-child{border-bottom:0}
.contact-list svg{width:20px;height:20px;color:var(--green-600);flex-shrink:0;margin-top:.22rem}
.contact-list strong{display:block;color:var(--green-900);font-size:.88rem;letter-spacing:.02em}
.contact-list a{color:var(--grey-700);text-decoration:none;font-size:1.02rem;font-weight:600}
.contact-list a:hover{color:var(--green-800);text-decoration:underline}
.contact-list span{color:var(--grey-600);font-size:.97rem}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.9rem;font-weight:600;color:var(--green-900);margin-bottom:.4rem}
.field .req{color:var(--red-600)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--charcoal);background:#fff;
  border:1px solid var(--grey-300);border-radius:var(--radius);padding:.72rem .9rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right .85rem center;background-size:15px;padding-right:2.4rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(46,139,70,.14);outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red-600);box-shadow:0 0 0 3px rgba(179,38,30,.1)}
.field__hint{font-size:.83rem;color:var(--grey-600);margin-top:.35rem}
.field__error{display:none;font-size:.85rem;color:var(--red-600);margin-top:.35rem;font-weight:600}
.field__error.is-visible{display:block}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{display:none;border-radius:var(--radius);padding:1rem 1.15rem;margin-bottom:1.3rem;font-size:.95rem}
.form-status.is-visible{display:block}
.form-status--success{background:var(--green-100);border:1px solid var(--green-500);color:#13421F}
.form-status--error{background:#FDECEA;border:1px solid #E3A9A4;color:#7A1C16}
.form-status--info{background:var(--gold-100);border:1px solid var(--gold-400);color:#4A3B12}
.form-status p:last-child{margin-bottom:0}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn[aria-busy="true"] .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.map-embed{border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft)}
.map-embed a{
  display:flex;align-items:center;gap:.7rem;padding:1rem 1.15rem;text-decoration:none;
  font-weight:600;color:var(--green-800);font-size:.95rem;
}
.map-embed a:hover{background:var(--green-50)}
.map-embed svg{width:20px;height:20px;flex-shrink:0}

/* ---------- Legal ---------- */
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,1rem + 3vw,3.4rem);align-items:start}
@media (max-width:900px){.legal-layout{grid-template-columns:1fr}}
.legal-nav{position:sticky;top:calc(var(--header-h) + 16px);background:var(--bg-soft);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.2rem}
@media (max-width:900px){.legal-nav{position:static}}
.legal-nav h2{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-600);font-family:var(--font-body);font-weight:700;margin-bottom:.8rem}
.legal-nav ul{list-style:none;margin:0;padding:0}
.legal-nav li{margin-bottom:.15rem}
.legal-nav a{display:block;font-size:.92rem;color:var(--grey-700);text-decoration:none;padding:.4rem .5rem;border-radius:var(--radius)}
.legal-nav a:hover{background:var(--green-100);color:var(--green-900)}
.legal-doc{max-width:74ch}
.legal-doc h2{padding-top:1rem;margin-top:2.4rem;border-top:3px solid var(--green-700)}
.legal-doc > h2:first-child{margin-top:0;border-top:0;padding-top:0}
.legal-doc h3{font-size:1.18rem;margin-top:1.9rem}
.legal-doc p,.legal-doc li{color:var(--grey-700);font-size:1rem}
.legal-meta{font-size:.9rem;color:var(--grey-600);background:var(--bg-soft);border:1px solid var(--grey-200);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:2rem}

/* ---------- Editable placeholder marker ---------- */
.pending{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--gold-100);color:var(--gold-600);border:1px dashed var(--gold-400);border-radius:var(--radius);padding:.2rem .55rem;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:#C3D6C8;padding-top:clamp(2.8rem,2rem + 3vw,4rem);font-size:.95rem}
.site-footer h2,.site-footer h3{color:#fff;font-size:1rem;font-family:var(--font-body);font-weight:700;letter-spacing:.03em;margin-bottom:1rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:2rem}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer a{color:#C3D6C8;text-decoration:none}
.site-footer a:hover{color:var(--gold-400);text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55rem}
.footer-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.footer-brand img{width:54px;height:54px}
.footer-brand strong{font-family:var(--font-head);color:#fff;font-size:1.1rem;display:block;line-height:1.2}
.footer-brand span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-400)}
.site-footer address{font-style:normal;line-height:1.6}
.footer-bottom{
  margin-top:2.6rem;border-top:1px solid rgba(255,255,255,.14);padding-block:1.3rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center;justify-content:space-between;font-size:.88rem;color:#9DB6A4;
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* ---------- Floating mobile contact ---------- */
.float-contact{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:.6rem}
.float-contact a{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  box-shadow:var(--shadow-lg);color:#fff;text-decoration:none;transition:transform .18s ease;
}
.float-contact a:hover{transform:translateY(-2px);color:#fff}
.float-contact svg{width:24px;height:24px}
.float-contact .is-call{background:var(--green-700)}
.float-contact .is-wa{background:#25D366}
@media (min-width:981px){.float-contact{display:none}}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:clamp(3.5rem,2rem + 7vw,7rem) 0}
.notfound__code{font-family:var(--font-head);font-size:clamp(4rem,2rem + 10vw,7.5rem);line-height:1;color:var(--green-100);font-weight:700;margin:0}
.notfound h1{margin-top:-.25em}
.notfound__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.8rem}

@media print{
  .site-header,.topbar,.site-footer,.float-contact,.btn,.legal-nav,.toolbar{display:none!important}
  body{font-size:12pt;color:#000}
}

/* ---------- Overflow safety for grid/flex children ----------
   Any grid child that contains a wide table, long word or scroll container
   must be allowed to shrink below its content width.                        */
.split > *,
.contact-grid > *,
.legal-layout > *,
.grid > *,
.card__body,
.card__meta li{min-width:0}
.card__meta li span{overflow-wrap:anywhere}
.legal-doc{overflow-wrap:break-word}

/* ---------- [hidden] must always win ----------
   .float-contact a and similar rules set display:flex, which overrides the
   browser's display:none for the hidden attribute. Without this, the WhatsApp
   button would appear even while it is disabled in config.js.                */
[hidden]{display:none!important}

/* ---------- Small phone header ----------
   At 375px the full brand lock-up plus the Menu button exceeded the viewport
   and caused sideways scrolling on every page.                               */
.brand{min-width:0}
@media (max-width:430px){
  .brand img{width:44px;height:44px}
  .brand__name{font-size:.95rem}
  .brand__tag{font-size:.6rem;letter-spacing:.07em}
  .nav-toggle{padding:.5rem .6rem;font-size:.88rem;gap:.4rem}
  .wrap{padding-inline:16px}
}

/* ==========================================================================
   MICRO-INTERACTIONS AND MOTION
   --------------------------------------------------------------------------
   Deliberately restrained: short durations, small distances, no bounce, no
   parallax, no spinning. Motion is used to show relationships and to give
   feedback, never for decoration.

   Two hard rules:
   1. Reveal animations apply ONLY under .js (a class set by a tiny inline
      script in the <head>). With JavaScript off, the page renders fully
      visible and completely static.
   2. Everything is cancelled by prefers-reduced-motion at the end of the file.
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  will-change:opacity,transform;
}
.js [data-reveal="left"]{transform:translate3d(-22px,0,0)}
.js [data-reveal="right"]{transform:translate3d(22px,0,0)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-revealed{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

/* Stagger the children of a group: cards, feature tiles, gallery figures. */
.js [data-reveal-group] > *{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.js [data-reveal-group].is-revealed > *{opacity:1;transform:none}
.js [data-reveal-group].is-revealed > *:nth-child(1){transition-delay:0ms}
.js [data-reveal-group].is-revealed > *:nth-child(2){transition-delay:80ms}
.js [data-reveal-group].is-revealed > *:nth-child(3){transition-delay:160ms}
.js [data-reveal-group].is-revealed > *:nth-child(4){transition-delay:240ms}
.js [data-reveal-group].is-revealed > *:nth-child(5){transition-delay:320ms}

/* ---------- Hero entrance and slow drift ----------
   A 28-second pan of roughly 4 per cent. It should be barely perceptible: the
   intent is a field that feels alive, not an effect that asks to be noticed. */
.hero__media img{
  animation:hero-drift 28s var(--ease-soft) infinite alternate;
  transform-origin:center 60%;
}
@keyframes hero-drift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.08) translate3d(-1.2%,-0.8%,0)}
}
.js .hero__eyebrow,
.js .hero h1,
.js .hero__lead,
.js .hero__actions{
  opacity:0;
  animation:hero-rise .8s var(--ease-out) forwards;
}
.js .hero__eyebrow{animation-delay:.10s}
.js .hero h1{animation-delay:.20s}
.js .hero__lead{animation-delay:.32s}
.js .hero__actions{animation-delay:.44s}
@keyframes hero-rise{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

/* ---------- Image zoom frame ----------
   Wrapping an image in .zoom gives a slow, contained scale on hover or focus,
   with the overflow clipped so nothing escapes the rounded corner.           */
.zoom{overflow:hidden;border-radius:var(--radius-lg);position:relative;display:block;background:var(--green-900)}
.zoom img{
  transition:transform .85s var(--ease-out),filter .45s var(--ease-soft);
  will-change:transform;
}
.zoom:hover img,
.zoom:focus-within img{transform:scale(1.055)}

/* A caption bar that sits over the foot of a framed image. */
.zoom__caption{
  position:absolute;inset:auto 0 0 0;
  padding:2rem 1.1rem .85rem;
  color:#fff;font-size:.9rem;font-weight:600;
  background:linear-gradient(to top,rgba(8,36,18,.88),rgba(8,36,18,0));
  transition:padding-bottom .3s var(--ease-out);
}
.zoom:hover .zoom__caption{padding-bottom:1.1rem}

/* ---------- Product cards ---------- */
.card{transition:box-shadow .28s var(--ease-soft),border-color .28s var(--ease-soft),transform .28s var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--green-100)}
.card__media{overflow:hidden}
.card__media img{transition:transform .7s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.05)}

/* A soft tint sweeps in behind the pack shot on hover. */
.card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(46,139,70,.10),rgba(201,150,43,.10));
  opacity:0;transition:opacity .35s var(--ease-soft);
}
.card:hover .card__media::after{opacity:1}

/* The category tag fills in as the card lifts. */
.card .tag{transition:background-color .28s var(--ease-soft),color .28s var(--ease-soft)}
.card:hover .tag{background:var(--green-700);color:#fff}

/* ---------- Buttons ---------- */
.btn{transform:translateZ(0)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
.btn--primary,.btn--gold{box-shadow:0 1px 2px rgba(15,61,32,.14)}
.btn--primary:hover,.btn--gold:hover{box-shadow:0 4px 14px rgba(15,61,32,.20)}
.btn .arrow{
  display:inline-block;width:1em;height:1em;flex-shrink:0;
  transition:transform .3s var(--ease-out);
}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Navigation ---------- */
.nav a{position:relative}
.nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:2px;
  background:var(--gold-500);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{display:none}
.nav .nav__cta::after{display:none}
@media (max-width:980px){.nav a::after{display:none}}

/* The menu bars morph into a cross while the mobile menu is open. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{transition:transform .28s var(--ease-out),opacity .2s linear}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}
.nav.is-open{animation:menu-drop .26s var(--ease-out)}
@keyframes menu-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Gallery ---------- */
.gallery figure{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-soft)}
.gallery figure:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.gallery img{transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{transition:padding-bottom .3s var(--ease-out)}
.gallery figure:hover figcaption{padding-bottom:.9rem}

/* ---------- Feature tiles ---------- */
.feature{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-soft),border-color .28s var(--ease-soft)}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-100)}
.feature__icon{transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),transform .4s var(--ease-out)}
.feature:hover .feature__icon{background:var(--green-700);color:#fff;transform:scale(1.06)}

/* ---------- Offices, filters, forms ---------- */
.office{transition:box-shadow .28s var(--ease-soft),border-color .28s var(--ease-soft)}
.office:hover{box-shadow:var(--shadow-md);border-color:var(--green-100)}
.filter-btn{transition:background-color .22s var(--ease-soft),border-color .22s var(--ease-soft),color .22s var(--ease-soft),transform .22s var(--ease-out)}
.filter-btn:hover{transform:translateY(-1px)}
.filter-btn:active{transform:translateY(0)}

/* Cards fade up as they re-enter the catalogue after a filter or search change.
   Applied only via .is-entering, which main.js adds for the duration of the
   animation. Deliberately no fill mode: an animation that never runs must not
   be able to leave a card stuck at opacity 0. */
.card.is-entering{animation:card-in .4s var(--ease-out)}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.form-status.is-visible{animation:status-in .36s var(--ease-out)}
@keyframes status-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.field__error.is-visible{animation:err-in .24s var(--ease-out)}
@keyframes err-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.field input,.field select,.field textarea{transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background-color .2s var(--ease-soft)}

/* ---------- Footer, floating buttons, tables ---------- */
.site-footer a{transition:color .2s var(--ease-soft),padding-left .25s var(--ease-out)}
.site-footer li a:hover{padding-left:3px}
.float-contact a{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-soft)}
.float-contact a:hover{transform:translateY(-3px) scale(1.04)}
.contact-list li{transition:background-color .22s var(--ease-soft)}
.contact-list li:hover{background:var(--green-50)}
.map-embed svg{transition:transform .3s var(--ease-out)}
.map-embed a:hover svg{transform:translateY(-2px)}
.legal-nav a{transition:background-color .2s var(--ease-soft),padding-left .22s var(--ease-out)}
.legal-nav a:hover{padding-left:.8rem}
.spec-table tbody tr{transition:background-color .2s var(--ease-soft)}
.spec-table tbody tr:hover{background:var(--green-50)}
.split__media img{transition:transform .5s var(--ease-out)}

/* ---------- Respect the motion preference ----------
   This block stays last so that it overrides everything above.               */
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:scale(1.02)}
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .hero__eyebrow,
  .js .hero h1,
  .js .hero__lead,
  .js .hero__actions{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  .card,.feature,.gallery figure,.btn,.float-contact a,.office,.filter-btn{transition:none!important}
  .card:hover,.feature:hover,.gallery figure:hover,.btn:hover,.float-contact a:hover,.filter-btn:hover{transform:none!important}
  .zoom:hover img,
  .zoom:focus-within img,
  .card:hover .card__media img,
  .gallery figure:hover img{transform:none!important}
  .card{animation:none!important}
  .nav.is-open{animation:none!important}
}

/* ---------- Zoom frame corrections ----------
   When a split image is wrapped in .zoom, the frame owns the rounded corner
   and the shadow; the image inside must be square-edged or the two radii
   fight each other and show a pale seam.                                     */
.split__media .zoom{box-shadow:var(--shadow-md)}
.split__media .zoom img{border-radius:0;box-shadow:none;display:block;width:100%}

/* ---------- Image strip ----------
   A row of framed photographs used to close a page. Captions sit over the
   foot of each image rather than below it, so the row keeps one clean edge.  */
.img-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:760px){.img-strip{grid-template-columns:1fr}}
.img-strip .zoom{aspect-ratio:4/3}
.img-strip .zoom img{width:100%;height:100%;object-fit:cover}

/* ---------- Wide framed figure ---------- */
.figure-wide{margin:0}
.figure-wide .zoom{box-shadow:var(--shadow-md)}
.figure-wide .zoom img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:620px){.figure-wide .zoom img{aspect-ratio:16/9}}
.figure-wide figcaption{
  margin-top:.75rem;font-size:.88rem;color:var(--grey-600);
  border-left:3px solid var(--gold-500);padding-left:.8rem;
}

/* ---------- Reveal transforms must never cause sideways scroll ----------
   A [data-reveal="right"] element sits 22px to the right until it is revealed.
   On a narrow screen that pushed the page wider than the viewport and allowed
   the whole page to scroll sideways. Two defences:

   1. Below the layout breakpoint, where split sections stack anyway, the
      horizontal reveals become vertical ones. Sideways motion reads as a
      mistake on a phone in any case.
   2. A clip on the root as a safety net, for any future horizontal transform.
      overflow-x:clip is used rather than hidden because hidden would create a
      scroll container and break the sticky header.                           */
@media (max-width:860px){
  .js [data-reveal="left"],
  .js [data-reveal="right"]{transform:translate3d(0,18px,0)}
}
html{overflow-x:clip}

/* ---------- Typography refinements for the sans family ----------
   Plus Jakarta Sans has a large x-height, so body copy can sit slightly
   tighter than it did with the serif without losing comfort.               */
/* Body copy keeps normal tracking. Tightening is for display sizes only;
   on long passages it costs legibility, which matters for this audience. */
body{letter-spacing:normal}
.legal-doc p,.legal-doc li{letter-spacing:.002em}
.brand__name{font-weight:800;letter-spacing:-.02em}
.page-head h1,.hero h1{letter-spacing:-.03em}
.spec-table caption{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em}
.notfound__code{font-weight:800;letter-spacing:-.04em}
.footer-brand strong{font-weight:800;letter-spacing:-.02em}
.btn{letter-spacing:-.005em}

/* Devanagari: slightly larger, because Devanagari has a smaller visual size
   than Latin at the same point size, and it carries the product names. */
[lang="hi"]{
  font-family:"Noto Sans Devanagari","Plus Jakarta Sans",sans-serif;
  font-size:1.04em;
  line-height:1.5;
}

/* ---------- Very small phones (360px and under) ----------
   Plus Jakarta Sans sets the brand name slightly wider than the previous
   system font, which pushed the Menu button about 2px past the viewport on
   360px Android handsets. Tighten the lock-up a little further there.      */
@media (max-width:400px){
  .brand{gap:.55rem}
  .brand img{width:40px;height:40px}
  .brand__name{font-size:.88rem}
  .brand__tag{font-size:.56rem;letter-spacing:.05em}
  .nav-toggle{padding:.48rem .58rem;font-size:.84rem;gap:.35rem}
}