/* ===========================================================================
   Uptodate Hot Melts — corporate design system
   Brand colours taken from the existing upthotmelts.co.in:
     heading / primary  #226E93      banner blue  #1E6C93
     deep teal          #134F5C      mid teal     #006580
     light grey         #F2F2F2      rule grey    #E9E8E8
   Typeface: Lato (same as the existing site), light-weight headings.
   =========================================================================== */

:root{
  /* brand */
  --blue:#226E93;
  --blue-dark:#1B5A79;
  --blue-deep:#103A48;
  --blue-mid:#006580;
  --blue-tint:#EAF2F6;
  --blue-tint-2:#D8E7EE;
  --logo-blue:#005099;   /* asli logo ka blue */

  /* Inner-page header band (.phero). 16-Sep-2026 OP: "top ka blue thoda dark hai, light karo".
     Pehle #103A48 (lagbhag kaala-neela) se shuru hota tha. Ab brand blue se shuru hokar
     daayein halka hota hai. -a par hi saara text baithta hai isliye wahi sabse gehra:
     white text vs -a = 5.65:1, vs -b = 4.9:1 (dono AA paas). -c sirf khaali decorative
     hissa hai — use kabhi text ke neeche mat le jaana. */
  --phero-0:#0D3B4C;       /* band ka sabse gehra sira (baayan) */
  --phero-a:#226E93;
  --phero-b:#2878A0;
  --phero-c:#3B94AE;
  --phero-scrim:9,48,62;   /* rgb triple (rgba() me alpha ke saath use hota hai) */
  --phero-accent:#C0871F;  /* band ka accent — corner brackets aur neeche ka dashed rule */

  /* accent — molten glue amber. Yellow pe hamesha --ink text. */
  --yellow:#C0871F;          /* deep gold — brass jaisa, caution-yellow nahi */
  --yellow-deep:#D69B2E;   /* hover halka hota hai, gehra nahi — ink text ka contrast bachta hai */
  --yellow-soft:#FBF3E3;
  --yellow-line:#EAD9B4;
  /* gold background par likhne wala text. Light me gehra brown, dark me halka gold —
     hardcode karoge to dark mode me contrast 2.5:1 par gir jaata hai (10-Sep-2026 pakda). */
  --gold-ink:#7A5510;

  /* neutrals */
  --bg:#FFFFFF;
  --bg-alt:#FAF8F4;   /* warm paper */
  --grey:#F2F2F2;
  --surface:#FFFFFF;
  --ink:#1F2020;
  --body:rgba(31,32,32,.76);
  --muted:rgba(31,32,32,.56);
  --line:#E1E5E7;
  --line-soft:#EDEFF1;

  --ok:#1C6B4A;

  --shadow-sm:0 1px 3px rgba(19,79,92,.07);
  --shadow:0 6px 20px rgba(19,79,92,.09);
  --shadow-lg:0 18px 44px rgba(19,79,92,.15);

  --r-sm:6px; --r:6px; --r-lg:10px; --r-pill:999px;
  --wrap:1200px;
  --head:82px;   /* poora logo (mark + Uptodate wordmark) isme aaram se baithe */
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#57A6C9; --blue-dark:#7BBBD8; --blue-deep:#0E323C; --blue-mid:#3E93B0;
    --blue-tint:#132A33; --blue-tint-2:#17323C; --logo-blue:#7FB6DC;
    --phero-0:#0A2F3B; --phero-a:#134C5E; --phero-b:#175E73; --phero-c:#1C7186; --phero-scrim:5,26,34;
    --yellow:#E7B860; --yellow-deep:#F0CB86; --yellow-soft:#241E12; --yellow-line:#463A1E; --gold-ink:#E7B860;
    --bg:#0E1417; --bg-alt:#141B1E; --grey:#182126; --surface:#141C21;
    --ink:#E8EEF1; --body:rgba(232,238,241,.78); --muted:rgba(232,238,241,.55);
    --line:#222E35; --line-soft:#1B252B;
    --ok:#5FC79A;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow:0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 18px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --blue:#57A6C9; --blue-dark:#7BBBD8; --blue-deep:#0E323C; --blue-mid:#3E93B0;
  --blue-tint:#132A33; --blue-tint-2:#17323C; --logo-blue:#7FB6DC;
  --phero-0:#0A2F3B; --phero-a:#134C5E; --phero-b:#175E73; --phero-c:#1C7186; --phero-scrim:5,26,34;
  --yellow:#E7B860; --yellow-deep:#F0CB86; --yellow-soft:#241E12; --yellow-line:#463A1E; --gold-ink:#E7B860;
  --bg:#0E1417; --bg-alt:#141B1E; --grey:#182126; --surface:#141C21;
  --ink:#E8EEF1; --body:rgba(232,238,241,.78); --muted:rgba(232,238,241,.55);
  --line:#222E35; --line-soft:#1B252B;
  --ok:#5FC79A;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow:0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:0 18px 44px rgba(0,0,0,.55);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16.5px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .16s}
a:hover{color:var(--blue-dark)}
/* Content ke andar ke links underline hone chahiye — accessibility aur saaf dikhte hain */
.article a,.prob a,.card p a,.lead a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--gold-line,var(--yellow))}
h1,h2,h3,h4{color:var(--blue);font-family:inherit;margin:0 0 .55em;line-height:1.24;text-wrap:balance}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:300;letter-spacing:-.005em}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:300;letter-spacing:-.004em}
h3{font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:0}
h4{font-size:1rem;font-weight:700;color:var(--ink)}
p{margin:0 0 1.05rem}
ul{margin:0 0 1.05rem;padding-left:1.2rem}
li{margin:.3rem 0}
strong{color:var(--ink);font-weight:700}
:focus-visible{outline:3px solid var(--yellow-deep);outline-offset:3px;border-radius:3px}
::selection{background:var(--yellow);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.section{padding:clamp(58px,6.5vw,100px) 0}
.section--alt{background:var(--bg-alt)}
.section--grey{background:var(--grey)}
.section--tight{padding:clamp(36px,4vw,56px) 0}
.center{text-align:center}
.lead{font-size:1.06rem;max-width:64ch}
.center .lead{margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue-mid);margin-bottom:.75rem;
}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--yellow);border-radius:2px;flex:0 0 auto}
.shead{max-width:66ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.shead.center{margin-inline:auto}
.shead p{margin-bottom:0}
.rule{width:56px;height:4px;background:var(--yellow);border:0;margin:0 0 1.4rem;border-radius:2px}
.center .rule{margin-inline:auto}

/* ---------- buttons ---------- */
/* Buttons — thoda bada, thodi depth, aur hover pe halki si lift.
   Flat button sasta lagta hai; ye chhoti detail hi professional feel deti hai. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.85rem;border:1.5px solid transparent;border-radius:var(--r-sm);
  font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.012em;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn__ar{width:15px;height:15px;flex:0 0 auto;transition:transform .22s var(--ease)}
.btn:hover .btn__ar{transform:translateX(4px)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
/* 29-Sep-2026 OP (screenshot "Request a Quote for Applicator" ke saath): "pure website ke button esi
   color me aur esi design me bana do, baaki length same" — ab HAR button variant (primary, blue, deep,
   outline, ghost, white, yellow) ek hi chamakdaar yellow (#F2C230) + gehra text. Size/lambai wahi
   (.btn / --sm / --lg / --block ka padding nahi chheda). Class naam HTML me waise hi hain, taaki kabhi
   alag rang wapas chahiye to sirf yahan badalna pade. Purani CSS:
   Old Website Backup/all-buttons-yellow-2026-09-29/style.css
   Yellow par safed text kabhi mat karna (contrast 1.6:1); #1F2020 par 10.6:1 hai. */
.btn--primary,.btn--yellow,.btn--blue,.btn--deep,.btn--outline,.btn--ghost,.btn--white{
  background:#F2C230;color:#1F2020;border-color:#F2C230;backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.40) inset, 0 2px 8px rgba(120,84,16,.28);
}
.btn--primary:hover,.btn--yellow:hover,.btn--blue:hover,.btn--deep:hover,.btn--outline:hover,
.btn--ghost:hover,.btn--white:hover{
  background:#FFD34D;color:#1F2020;border-color:#FFD34D;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 8px 20px rgba(120,84,16,.34);
  transform:translateY(-2px);
}
.btn--primary:active,.btn--yellow:active,.btn--blue:active,.btn--deep:active,.btn--outline:active,
.btn--ghost:active,.btn--white:active{transform:translateY(0);box-shadow:0 1px 4px rgba(120,84,16,.28)}
.btn--sm{padding:.6rem 1.2rem;font-size:.875rem;gap:.4rem}
.btn--lg{padding:1.05rem 2.2rem;font-size:1rem}
.btn--block{width:100%}

/* ---------- header ---------- */
/* 10-Sep-2026 nav restyle: brand colours only (blue #226E93 + gold accent) — asked-for
   glassmorphism/new palette dropped per OP's 05-Sep correction (see brand-colors-uptodate
   memory). Motion stays transform/opacity so it's cheap; prefers-reduced-motion respected. */
.header{
  position:sticky;top:0;z-index:200;background:var(--surface);transition:box-shadow .25s;
}
.header::after{                     /* thin animated gradient line replaces the flat border */
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--blue) 0%,var(--yellow) 30%,var(--blue-mid) 60%,var(--yellow) 100%);
  background-size:220% 100%;animation:navGradient 10s linear infinite;
}
.header.is-stuck{box-shadow:0 4px 20px rgba(19,79,92,.12)}
.header__inner{display:flex;align-items:center;gap:1rem;height:var(--head);position:relative}
/* 8 items + icons chahiye jagah zyada — sirf header ka wrap thoda chauda (1200 -> 1320),
   baaki poori site ka content-width (--wrap:1200px) chhua nahi. */
.header .wrap{width:min(100% - 40px,1320px)}
@keyframes navGradient{to{background-position:220% 0}}
@media (prefers-reduced-motion:reduce){.header::after{animation:none}}

/* Brand lockup = ASLI poora logo (mark + uske neeche 'Uptodate' wordmark), image hi.
   Pehle sirf mark lagta tha aur 'Uptodate' alag se type kiya jaata tha — logo adhoora
   dikhta tha (07-Sep-2026 OP ne pakda). Naam ab image ke andar hai, type mat karo.
   'Hot Melts' patli vertical line ke baad chhota label hai. */
/* Brand = sirf asli logo (mark + neeche 'Uptodate' wordmark). Bagal me pehle ek chhota
   'HOT MELTS' label tha — 07-Sep-2026 ko OP ne header aur footer dono se hatwa diya. */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand__logo{height:64px;width:auto;flex:0 0 auto;display:block}
@media (max-width:600px){
  .brand__logo{height:50px}
}

.mainnav{margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:.08rem}
.mainnav > li{list-style:none;position:static}
.mainnav > li.navcta{display:none}   /* mobile menu ka CTA — desktop pe header ka apna button hai */
/* desktop: har nav item header ki poori height le — link ke neeche ka khaali hissa bhi item ka
   hi rahe, taaki panel ki taraf jaate mouse "bahar" na gine */
@media (min-width:1340px){
  .mainnav{align-self:stretch}
  .mainnav > li{display:flex;align-items:center;align-self:stretch}
}
.navlink{
  display:inline-flex;align-items:center;gap:.32rem;padding:.62rem .58rem;border-radius:var(--r-pill);
  color:var(--blue);font-weight:600;font-size:.87rem;letter-spacing:.012em;background:none;border:0;
  font-family:inherit;white-space:nowrap;cursor:pointer;position:relative;overflow:hidden;
  /* `color` ko transition me MAT daalna: uska value var(--blue) se aata hai, aur theme
     badalne par transitioned property CSS-variable ke naye value ko nahi uthati —
     dark mode toggle karte hi nav links purane halke blue me atak jaate the (3:1 contrast,
     10-Sep-2026 pakda). Baaki properties theme-independent hain, unka transition safe hai. */
  transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
a.navlink{text-decoration:none}
.navlink__ic{display:inline-flex;flex:0 0 auto;width:15px;height:15px;transition:transform .3s var(--ease)}
.navlink__ic svg{width:100%;height:100%;display:block}
.navlink__label{line-height:1.2}
/* Underline poore item (icon + label) ke neeche, beech se bahar ki taraf khulti hai. Pehle ye
   label ke andar thi aur active pill ke bottom kinare se chipak jaati thi (OP ne pakda). */
.navlink::after{
  content:'';position:absolute;left:.58rem;right:.58rem;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--yellow));
  transform:scaleX(0);transition:transform .32s var(--ease);
}
.navlink:hover,.navlink:focus-visible,.navlink[aria-expanded="true"]{
  color:var(--blue);background:var(--blue-tint);transform:scale(1.05);box-shadow:var(--shadow-sm);z-index:2;
}
.navlink:hover .navlink__ic,.navlink:focus-visible .navlink__ic{transform:translateY(-1px) scale(1.12)}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
.navlink:active{transform:scale(.96)}
/* Active = sirf blue+bold text + gradient underline. Bhara hua pill button jaisa lag raha tha
   (10-Sep-2026 OP: "home page ka button sahi nahi hai") — background/shadow hata diya. */
.navlink.is-active{color:var(--blue);font-weight:700}
.navlink.is-active::after{
  transform:scaleX(1);background:linear-gradient(90deg,var(--blue),var(--yellow),var(--blue));
}
.navlink .chev{width:10px;height:10px;opacity:.55;transition:transform .28s var(--ease)}
.navlink[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Nav ki pehchaan: ek hi gold bar jo hover/active item ke neeche slide karta hai (har item ki
   apni underline ki jagah). Gold isliye ki brand rule me "active nav underline" ka rang yahi hai.
   Sirf transform chalta hai (translateX + scaleX), isliye 60fps. JS na chale to per-item
   ::after underline fallback ban jaati hai — tab .has-ind class lagti hi nahi. */
.navind{
  position:absolute;left:0;top:0;width:1px;height:3px;background:var(--yellow);
  transform-origin:left center;transform:translateX(0) scaleX(0);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.mainnav.has-ind .navlink::after{opacity:0}
@media (max-width:1339px){.navind{display:none}}
@media (prefers-reduced-motion:reduce){.navind{transition:opacity .2s}}
.ripple{
  position:absolute;border-radius:50%;background:rgba(34,110,147,.22);
  transform:scale(0);pointer-events:none;animation:rippleFx .55s var(--ease) forwards;
}
@keyframes rippleFx{to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .navlink,.navlink__ic,.navlink::after{transition:none}
  .navlink:hover,.navlink:focus-visible{transform:none}
  .ripple{display:none}
}

/* 11-Sep-2026 OP: panel screen se lamba ho to neeche kat jaata tha — ab viewport ke andar rehta
   hai aur khud scroll hota hai (page nahi). */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(94vw,900px);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:1.6rem 1.8rem;
  max-height:calc(100vh - var(--head) - 24px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr 240px;gap:1.8rem}
.mega__col h4{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-soft);
}
.mega__list{list-style:none;padding:0;margin:0}
.mega__list li{margin:0}
.mega__list a{
  display:block;padding:.42rem .55rem;margin:0 -.55rem;border-radius:var(--r-sm);
  color:var(--ink);font-size:.92rem;transition:color .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease);
}
.mega__list a:hover{color:var(--blue);background:var(--blue-tint);transform:translateX(2px)}
.mega__list small{display:block;color:var(--muted);font-size:.79rem;line-height:1.45;font-weight:400}
.mega__promo{background:var(--blue-tint);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;gap:.9rem}
.mega__promo h5{margin:0 0 .3rem;font-size:.98rem;font-weight:700;color:var(--blue)}
.mega__promo p{font-size:.85rem;margin:0;color:var(--body)}
/* "By industry" ke links pehle inline `color:#fff` se safed the — aur ye panel ka background
   halka blue (--blue-tint) hai, isliye wo bilkul dikhte hi nahi the (07-Sep-2026 OP ne pakda). */
.mega__ind{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.mega__ind:hover{color:var(--blue-dark)}

.headtools{display:flex;align-items:center;gap:.35rem;flex:0 0 auto;margin-left:.6rem}
.iconbtn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;padding:0;
  position:relative;overflow:hidden;transition:border-color .2s,color .2s,transform .2s var(--ease);
}
.iconbtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.iconbtn:active{transform:translateY(0) scale(.94)}
.iconbtn svg{width:15px;height:15px}
.langbtn{width:auto;padding:0 .6rem;font-family:inherit;font-size:.75rem;font-weight:700;letter-spacing:.06em}
#icon-sun{display:none}
:root[data-theme="dark"] #icon-sun{display:block}
:root[data-theme="dark"] #icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #icon-sun{display:block}
  :root:not([data-theme="light"]) #icon-moon{display:none}
}
/* Burger = 3 bars ki jagah ab span hai (pehle ek 3-line svg tha) taaki har bar ko
   alag rotate/fade karke click par X me morph kiya ja sake — 100% CSS, JS wahi purana hai. */
.burger{display:none;position:relative}
.burger__bar{
  position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%) translateY(-5px);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.burger__bar:nth-child(2){transform:translate(-50%,-50%)}
.burger__bar:nth-child(3){transform:translate(-50%,-50%) translateY(5px)}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* Breakpoint 1259 -> 1339: har item ke aage icon aane se desktop nav ~185px chaudi ho gayi,
   1280/1300 pe wo header ke andar fit nahi hoti thi. Us se neeche ab full-screen slide menu. */
@media (max-width:1339px){
  .header__cta{display:none}
  .burger{display:grid}
  .mainnav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:var(--head) 0 0;background:var(--bg);
    padding:.5rem 20px 3rem;overflow-y:auto;z-index:190;
    transform:translateX(100%);visibility:hidden;transition:transform .38s var(--ease),visibility .38s;
  }
  .mainnav.is-open{transform:translateX(0);visibility:visible}
  .mainnav > li{border-bottom:1px solid var(--line-soft)}
  .mainnav > li.navcta{display:block;border-bottom:0;margin-top:1rem}
  .navlink{width:100%;justify-content:flex-start;gap:.75rem;padding:1.05rem .3rem;font-size:1.04rem;
    white-space:normal;border-radius:0;min-height:52px}
  .navlink__ic{width:18px;height:18px}
  .navlink .chev{margin-left:auto;width:12px;height:12px}   /* chevron hi daayein, label icon ke saath */
  .navlink:hover,.navlink:focus-visible{transform:none;box-shadow:none;background:none}
  .navlink[aria-haspopup]{font-weight:700}
  .navlink.is-active{background:none;box-shadow:none}
  .navlink::after{display:none}          /* stacked mobile menu me underline ki zaroorat nahi */
  .mega{
    position:static;transform:none;width:auto;box-shadow:none;border:0;border-radius:0;
    padding:0 0 1rem;background:transparent;display:none;opacity:1;visibility:visible;pointer-events:auto;
    max-height:none;overflow:visible;
  }
  .mega.is-open{display:block;transform:none}
  .mega__grid{grid-template-columns:1fr;gap:1.2rem}
  .mega__promo{display:none}
}
@media (max-width:1339px) and (prefers-reduced-motion:reduce){
  .mainnav{transition:none}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--blue-deep);overflow:hidden}
/* Hero ab ek rotating slideshow hai: 3 plant photo + 2 asli video (adhesive/applicator
   in use), 08-Sep-2026 OP ke kehne par. Size wahi hai jo slideshow se pehle thi — koi
   fixed aspect-ratio ki zaroorat nahi, kyunki photo (object-fit:cover) aur video
   (JS me hSizeVideo() jo runtime pe container ka clientWidth/clientHeight dekh kar cover
   karta hai) dono is min-height wale ratio-less box me bhi khud-ba-khud sahi fit ho jaate
   hain. (09-Sep-2026 OP ne size chhota karne ko kaha — pehle wala hi wapas laga diya.) */
.hero__media{position:relative;min-height:clamp(300px,40vw,480px);overflow:hidden}
@media (max-width:640px){
  /* Phone pe 40vw sirf ~150px deta hai, to 300px ka floor lag jaata tha — teen-line heading
     + subtitle + do button us 300px me nahi aate the aur upar se sticky header ke peeche kat
     jaate the. Sirf yahan thoda extra diya, desktop ka "chota" size chhua nahi. */
  .hero__media{min-height:400px}
}
/* 17-Sep-2026: <=900px par slideshow controls hero ke neeche-beech me baithte hain, isliye
   media ko utni hi extra height chahiye — warna copy upar khisak kar heading/eyebrow kat
   jaate hain (pehle yahi hua tha). */
@media (max-width:900px){
  .hero__media{min-height:calc(clamp(300px,40vw,480px) + 90px)}   /* 29-Sep-2026: 58px se 90px — hero ki line lambi hui */
}
@media (max-width:640px){
  /* 29-Sep-2026: hero ki line lambi hui ("leading local ... since 2024") — 458px me heading
     header ke peeche kat rahi thi, isliye 535px */
  .hero__media{min-height:535px}
}
@media (max-width:360px){.hero__media{min-height:580px}}   /* chhote phone (320px) par line aur lambi toot-ti hai */
/* 11-Sep-2026 OP: "jaldi change ho raha hai, smooth hona chahiye" — photo 2s se 5s, fade 1.4s.
   Nayi slide upar (z-index 1) fade-in hoti hai; purani tab tak poori dikhti rehti hai
   (transition-delay), taaki beech me dono aadhi-halki hokar neela background na jhalke. */
.hero__slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.4s ease-in-out 1.4s}
.hero__slide.is-active{opacity:1;z-index:1;transition-delay:0s}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Poster = us video ka apna thumbnail. Iframe ke peeche rehta hai, isliye video load hone
   tak (ya agar browser autoplay block kar de tab bhi) slide kabhi khaali/kaali nahi dikhti. */
.hero__slide--video{background:var(--blue-deep) center/cover no-repeat}
.hero__slide--video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none}
/* Text ke liye dark overlay. Pehle .94/.80 tha — ek static photo ke liye theek tha, par
   video slide uske neeche lagbhag dikhti hi nahi thi. Halka kiya: safed text par bhi
   sabse halke hisse me contrast 4.6:1 (AA pass) rehta hai. */
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(13,44,55,.86) 0%,rgba(16,58,72,.68) 46%,rgba(34,110,147,.30) 100%);
}
/* Aakhri slide: founder ka parichay. Line wahi hai jo About page pe pehle se hai —
   unke naam par koi banaya hua "quote" nahi likha. Card daayin taraf hai kyunki hero ka
   apna text baayin taraf rehta hai; chhoti screen pe card chhup jaata hai (bheed na ho). */
.hero__slide--founder{background:linear-gradient(120deg,var(--blue-deep) 0%,var(--blue-mid) 100%)}
.founder-card{
  position:absolute;right:clamp(20px,5vw,64px);top:50%;transform:translateY(-50%);
  z-index:1;display:flex;align-items:center;gap:1.1rem;max-width:min(46%,430px);
  /* halka panel — scrim ke neeche card ka text dhundhla pad raha tha */
  padding:1rem 1.15rem;border-radius:var(--r-lg);
  background:rgba(9,32,41,.52);border:1px solid rgba(255,255,255,.14);
}
.founder-card img{
  width:clamp(88px,9vw,124px);aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  border:2px solid rgba(255,255,255,.28);flex:0 0 auto;
}
.founder-card__name{display:block;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.25}
.founder-card__role{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);margin:.15rem 0 .5rem;
}
.founder-card p{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.96);margin:0}
@media (max-width:900px){.founder-card{display:none}}

.hero__dots{position:absolute;z-index:3;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,26px);
  display:flex;gap:.5rem}
.hero__dots button{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.7);background:transparent;transition:background .2s,transform .2s;
}
.hero__dots button.is-active{background:var(--yellow);border-color:var(--yellow);transform:scale(1.25)}
@media (max-width:640px){.hero__dots{display:none}}   /* chhoti screen pe bheed nahi */

/* ---------- hero controls (17-Sep-2026 OP) -------------------------------
   "photo aur video badalne ke liye right me button de do, aur agar kisi ko bada
   kar dekhna ho to". Controls DAYIN taraf hain — bayin taraf hero ka text hai,
   use dhakna nahi hai. Dots ke thoda upar, taaki dono takraayein na. */
/* Badi screen par controls neeche-dayin, dots ke thoda upar — hero ka text
   neeche-BAYIN taraf hai, isliye yahan kabhi takraav nahi hota (~550px ki doori). */
.hero__nav{
  position:absolute;z-index:4;right:clamp(16px,3vw,32px);
  bottom:calc(clamp(16px,3vw,26px) + 26px);
  display:flex;align-items:center;gap:.45rem;
}
.hero__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  width:38px;height:38px;padding:0;border-radius:var(--r-pill);cursor:pointer;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(16,58,72,.42);color:#fff;
  backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.hero__btn svg{width:18px;height:18px;flex:0 0 auto}
.hero__btn:hover{background:#fff;color:var(--blue-deep);border-color:#fff;
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.26)}
.hero__btn:active{transform:translateY(0)}
/* Chhoti/darmiyani screen (<=900px) par hero ka text poori chaudai le leta hai aur CTA
   buttons dayin taraf tak pahunch jaate hain — na upar ka kona khaali bachta hai (h1 wahan
   hai) na dayan (button wahan hai). Isliye yahan controls hero ke SABSE NEECHE, BEECH me
   aa jaate hain, aur `.hero__copy` ko utni jagah chhodni padti hai. */
@media (max-width:900px){
  .hero__nav{left:0;right:0;bottom:clamp(12px,3vw,18px);justify-content:center;gap:.4rem}
  .hero .hero__copy{padding-bottom:58px}   /* base .hero__copy rule neeche hai — specificity chahiye */
}
@media (max-width:640px){
  .hero__btn{width:34px;height:34px}
  .hero__btn svg{width:16px;height:16px}
}
.hero__copy{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:0 0 clamp(28px,4vw,52px);
}
.hero__copy .wrap{max-width:var(--wrap)}
.hero h1{color:#fff;margin-bottom:.5rem;max-width:20ch}
.hero h1 b{font-weight:700;color:#E9C275}
.hero__sub{color:rgba(255,255,255,.9);font-size:clamp(1rem,1.5vw,1.16rem);max-width:56ch;margin:0}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.73rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;background:transparent;
  border:0;border-left:3px solid var(--yellow);padding:.1rem 0 .1rem .8rem;margin-bottom:1.3rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}

/* search / quick bar under the hero */
.quickbar{background:var(--blue);color:#fff}
/* Search bar akela hai — pehle iske bagal me 4 shortcut chips the (Carton sealing,
   Filtration, Automotive, Labelling), 07-Sep-2026 ko OP ne hatwa diye. */
.quickbar__inner{display:flex;align-items:center;padding:1.15rem 0}
.quickform{display:flex;gap:.6rem;max-width:760px;width:100%}
/* Poori chaudai mat do: Search button bilkul right kinare pe chala jaata hai aur
   floating 'Request a Quote' button uske upar aa jaata hai (07-Sep-2026 pakda). */
.quickform input{
  flex:1;min-width:0;padding:.72rem .95rem;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--r-sm);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.94rem;
}
.quickform input::placeholder{color:rgba(255,255,255,.75)}
.quickform input:focus{outline:none;background:rgba(255,255,255,.2);border-color:#fff}

/* ---------- intro / stats ---------- */
.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* Numbers strip — pehle safed dabbe + patli grey lines the, page pe kho jaate the.
   Ab brand-blue gradient panel: number safed, uske neeche gold underline, tiles ke beech
   translucent divider (grey line nahi). Rang wahi blue+gold, sirf treatment badla hai. */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue-mid) 58%,var(--blue) 100%);
  box-shadow:0 14px 34px rgba(16,58,72,.20);
}
.stats::after{                      /* upar-daayen se halki roshni, panel flat na lage */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 100% 0%,rgba(255,255,255,.15),transparent 62%);
}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{position:relative;z-index:1;padding:1.9rem 1.1rem 1.7rem;text-align:center}
.stats div + div{box-shadow:inset 1px 0 0 rgba(255,255,255,.17)}
@media (max-width:700px){
  .stats div:nth-child(odd){box-shadow:none}
  .stats div:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(255,255,255,.17)}
  .stats div:nth-child(4){box-shadow:inset 1px 0 0 rgba(255,255,255,.17),inset 0 1px 0 rgba(255,255,255,.17)}
}
.stats b{
  display:block;font-size:clamp(1.9rem,3.4vw,2.45rem);font-weight:300;color:#fff;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stats b::after{                    /* gold underline — pehle label ke upar border tha */
  content:'';display:block;width:36px;height:3px;border-radius:2px;
  background:#E7B860;margin:.65rem auto 0;   /* gehre blue pe halka gold — #C0871F sirf 1.8:1 pe doob jaata hai */
}
.stats span{
  display:inline-block;margin-top:.65rem;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.92);   /* .82 pe gradient ke halke sire par contrast 4.38 — fail */
}

.trust{background:var(--grey);border-bottom:1px solid var(--line)}
.trust__inner{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;justify-content:center;align-items:center;padding:.95rem 0;font-size:.88rem;color:var(--body)}
.trust__inner span{display:inline-flex;align-items:center;gap:.45rem}
.trust__inner b{color:var(--blue-deep);font-weight:700}
.trust__inner svg{width:15px;height:15px;color:var(--yellow-deep)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- "Where we supply" (10-Sep-2026, home page) ---------- */
/* India = blue, UAE = gold — dono brand ke apne hi rang, bahar se koi naya color nahi laya
   (10-Sep-2026 OP ne "colorful karo" kaha, par palette wahi rakha jo already tay hai). */
/* 11-Sep-2026 OP: India card ke peeche apna plant (Unit 3, Sitarganj — pehle Taj Mahal tha, OP ne
   hatwaya), UAE ke peeche Burj Khalifa ki photo.
   Photo upar khuli dikhe, text neeche ek dark scrim par — isliye content flex-end par hai.
   Scrim ka rang card ke apne theme se (India = brand deep blue, UAE = dark gold/brown).
   Photo + scrim dono theme (light/dark) me same rehte hain, text hamesha white. */
.reach__card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:2.1rem 1.8rem 1.9rem;text-align:center;overflow:hidden;
  min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  transition:border-color .22s,box-shadow .22s,transform .22s var(--ease);
}
.reach__card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px}
.reach__card:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.reach__pin{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  margin-bottom:1.1rem;transition:transform .22s var(--ease);
}
.reach__card:hover .reach__pin{transform:scale(1.08)}
.reach__pin svg{width:26px;height:26px}
/* pin beech me hota to photo ke main subject par baithta — isliye photo wale card me upar-left kone me */
.reach__card .reach__pin{position:absolute;top:1.15rem;left:1.15rem;width:46px;height:46px;margin:0;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.reach__card .reach__pin svg{width:22px;height:22px}
.reach__card h3{font-size:1.45rem;font-weight:400;margin-bottom:.5rem;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.reach__card p{font-size:.95rem;color:rgba(255,255,255,.92);margin:0;max-width:34rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}

.reach__card--india{
  background:linear-gradient(180deg,rgba(14,50,60,0) 0%,rgba(14,50,60,.30) 38%,rgba(14,50,60,.80) 66%,rgba(14,50,60,.94) 100%),
             url('../img/hero-unit-3.jpg') 60% center/cover no-repeat; /* 60%: warehouse + office dono frame me */
}
.reach__card--india::before{background:var(--blue)}
.reach__card--india:hover{border-color:var(--blue)}
.reach__card--india .reach__pin{background:#226E93;color:#fff}

/* Burj photo ke left chauthai me hai — narrow (mobile) card par bhi dikhe isliye x = 22% */
/* 16-Sep-2026 OP: card pehle amber/peela dikhta tha ("blue fika hona chahiye"). Ab parda
   blue hai aur khaasa ujaala ("2 fika wala chahiye lekin ujaala bada do" -> phir "third
   wala", yaani sabse chamakdaar version). Upar halka neela wash, neeche gehra — kyunki
   "UAE" heading aur Thermobond wali line wahin baithti hai: safed text ka contrast 8.3:1
   aur gold <strong> ka 5.4:1, dono AA paas. Neeche ko halka mat karna, wahin girega.
   Gold accent (upar ki patti, pin, strong ka rang) gold hi hai — wahi is card ko India
   wale card se alag dikhata hai. */
/* 16-Sep-2026 (baad me): photo badli — ab Burj Khalifa ki shaam wali nahi, din ki coastline
   hai ("din dikhe, subah ya raat nahi"). Us gehri shaam wali photo ko halka karne ke liye jo
   bhaara safed wash tha (.80/.70) wo is chamakdaar photo ko dhundhla kar deta tha — din dikhta
   hi nahi tha. Ab upar parda bahut halka hai (aasman aur Burj Al Arab saaf dikhein) aur neeche
   wahi gehra scrim, jahan heading + Thermobond wali line baithti hai. */
.reach__card--uae{
  background:linear-gradient(180deg,
               rgba(236,248,255,.20) 0%,rgba(190,222,240,.24) 36%,
               rgba(34,106,138,.62) 72%,rgba(20,80,102,.92) 100%),
             url('../img/reach-uae-day.jpg') 30% 52%/cover no-repeat;   /* naam badla: purani file cache me rah jaati thi */
}
.reach__card--uae::before{background:var(--yellow)}
.reach__card--uae:hover{border-color:var(--yellow-deep)}
.reach__card--uae .reach__pin{background:#C0871F;color:#1F2020}
.reach__card--uae strong{color:#F0CB86}

@media (max-width:700px){.reach{grid-template-columns:1fr}.reach__card{min-height:320px}}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;transition:border-color .22s,box-shadow .22s,transform .22s var(--ease);overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.card:hover{border-color:var(--blue-tint-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.4rem}
.card p{margin:0;font-size:.95rem}
.card__icon{
  width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;margin-bottom:1.1rem;
}
.card__icon svg{width:21px;height:21px}
.card__more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:700;font-size:.89rem;color:var(--blue)}
.card__more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.card:hover .card__more svg{transform:translateX(3px)}
a.card{display:block;color:inherit}
a.card:hover{color:inherit}

/* section / industry tile — flat, brand blue */
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:158px;padding:1.35rem;border-radius:var(--r);color:#fff;background:var(--blue);
  border:1px solid var(--blue);transition:background .2s,box-shadow .2s,transform .2s var(--ease);
}
.tile:nth-child(even){background:var(--blue-mid);border-color:var(--blue-mid)}
.tile:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;box-shadow:var(--shadow);transform:translateY(-2px)}
.tile__n{position:absolute;top:1.1rem;left:1.35rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.tile__name{font-size:1.06rem;font-weight:700;margin-bottom:.3rem}
.tile__line{font-size:.855rem;color:rgba(255,255,255,.86);line-height:1.5}
.tile__count{position:absolute;top:1rem;right:1.1rem;font-size:.72rem;font-weight:700;
  background:var(--yellow);color:#1F2020;padding:.18rem .58rem;border-radius:var(--r-sm)}

/* ---------- product finder ---------- */
.finder{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;position:sticky;top:calc(var(--head) + 12px);z-index:40;box-shadow:var(--shadow-sm);
}
.finder__row{display:grid;grid-template-columns:1.7fr 1fr 1fr auto;gap:.65rem;align-items:center}
@media (max-width:900px){.finder{position:static}.finder__row{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.finder__row{grid-template-columns:1fr}}
.field{position:relative;display:block}
.field input,.field select{
  width:100%;padding:.72rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.93rem;color:var(--ink);background:var(--surface);transition:border-color .16s,box-shadow .16s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.field--search input{padding-left:2.35rem}
.field--search .ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.finder__count{font-size:.85rem;color:var(--muted);white-space:nowrap;font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 1.7rem}
.chip{
  padding:.4rem .9rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  font-family:inherit;font-size:.86rem;font-weight:400;color:var(--body);cursor:pointer;transition:all .16s;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.is-active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}

.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:1.1rem}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.pcard:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}

/* media area — har card me same 4:3, photo ho ya placeholder */
.pcard__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grey);flex:0 0 auto}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;text-align:center;padding:1rem;
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
}
.pcard__ph-code{color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.pcard__ph-form{color:rgba(255,255,255,.82);font-size:.82rem;line-height:1.4}
.pcard__tag{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--yellow);color:#1F2020;padding:.22rem .6rem;border-radius:var(--r-sm);white-space:nowrap;
}

/* body — fixed rhythm taaki har card me button ek hi line pe aaye */
.pcard__b{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pcard__code{display:block;font-size:1.12rem;font-weight:700;color:var(--blue);margin-bottom:.35rem}
.pcard__note{font-size:.91rem;margin:0 0 .95rem;min-height:3.9em;line-height:1.5}
.pcard__specs{margin:0 0 1rem;font-size:.85rem;border-top:1px solid var(--line-soft);padding-top:.85rem;display:grid}
.pcard__specs div{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
.pcard__specs dt{color:var(--muted);flex:0 0 auto}
.pcard__specs dd{margin:0;color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.pcard__cta{margin-top:auto}
.empty{padding:3.5rem 1.5rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);grid-column:1/-1}
.empty b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.4rem}

/* ---------- grade selector (page ke andar wala) ----------
   16-Sep-2026 OP: selector ab sirf modal me nahi, home aur products page par khud page me
   bhi hai. Modal ka apna layout hai, ye sirf in-page wale dabbe ke liye. Teen sawaal ek
   line me (chaudi screen par), phone par ek ke neeche ek. */
.gselwrap{
  max-width:860px;margin-inline:auto;padding:clamp(1.3rem,3vw,2rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
/* .formgrid (1fr 1fr) is file me neeche define hua hai, isliye yahan do class chahiye —
   warna wahi jeet jaata hai aur teesra sawaal agli line me chala jaata hai. */
.formgrid.gsel__q{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.formgrid.gsel__q{grid-template-columns:1fr}}
/* modal ke andar jagah kam hai — wahan teeno sawaal ek ke neeche ek */
.modal .formgrid.gsel__q{grid-template-columns:1fr}

/* ---------- inner page header (band) ----------
   Itihaas chhota: pehle flat gehra blue block + poori chaudai ki 3px gold patti thi.
   16-Sep-2026 ko OP ne kaha "border kharab hai, unique karo, blue ke saath design bhi".
   10 design x 10 colour bana kar dikhaye gaye; OP ne **Design 4 "Blueprint" + Colour A
   "Uptodate Blue"** final kiya. Baaki sab options hata diye gaye hain (git me nahi hain,
   dobara chahiye to yahi file ka 16-Sep wala version dekhna).

   Blueprint = technical drawing sheet:
     1) blue gradient + baayein scrim  — baayein gehra, daayein chamakdaar. Text hamesha
        baayein gehre hisse par baithta hai, isliye contrast poora (white text vs baayan
        sira ~9.9:1, beech ~6.7:1 — dono WCAG AA se kaafi upar).
     2) do jaali                       — 96px ki moti aur 16px ki mehin, drawing sheet jaisi
     3) crosshair circle               — daayein taraf bada halka gola
     4) gold corner brackets           — upar-baayein aur neeche-daayein (chaar chhote
        gradient tukdon se; pehle border+mask se banaya tha to poori line ban jaati thi,
        kyunki do mask ka default union hota hai)
     5) neeche dashed gold rule        — flat patti ki jagah
   Sab CSS se hai, koi image nahi — page ka weight nahi badhta.
   Rang ke 5 token (--phero-0/a/b/c/scrim + --phero-accent) :root me hain, isliye poora band
   ek jagah se badla ja sakta hai. */
.phero{
  position:relative;color:#fff;padding:clamp(40px,5vw,68px) 0;overflow:hidden;border-bottom:0;
  background:
    linear-gradient(90deg,rgba(var(--phero-scrim),.55) 0%,rgba(var(--phero-scrim),.18) 52%,rgba(var(--phero-scrim),0) 82%),
    linear-gradient(118deg,var(--phero-0) 0%,var(--phero-a) 30%,var(--phero-b) 64%,var(--phero-c) 100%);
}
.phero > *{position:relative}
.phero__mesh{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
}
.phero__mesh::before{               /* crosshair circle */
  content:'';position:absolute;right:6%;top:50%;width:300px;height:300px;margin-top:-150px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.26);
  box-shadow:0 0 0 30px rgba(255,255,255,.05) inset;
}
.phero__mesh::after{                /* corner brackets — upar-baayein + neeche-daayein */
  content:'';position:absolute;inset:16px 22px;
  background:
    linear-gradient(var(--phero-accent),var(--phero-accent)) left  top    /64px 2px no-repeat,
    linear-gradient(var(--phero-accent),var(--phero-accent)) left  top    /2px 46px no-repeat,
    linear-gradient(var(--phero-accent),var(--phero-accent)) right bottom /64px 2px no-repeat,
    linear-gradient(var(--phero-accent),var(--phero-accent)) right bottom /2px 46px no-repeat;
}
.phero::after{                      /* neeche ka dashed gold rule */
  content:'';position:absolute;inset:auto 0 0 0;height:3px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--phero-accent) 0 26px,rgba(255,255,255,.22) 26px 38px);
}
@media (max-width:760px){
  .phero__mesh::before{right:-90px;width:230px;height:230px;margin-top:-115px}
}
.phero h1{color:#fff;margin-bottom:.5rem;font-size:clamp(1.8rem,3.4vw,2.7rem)}
/* base halka hua to .9 / .75 alpha contrast kam pad rahe the — thoda uthaya */
.phero p{color:rgba(255,255,255,.95);max-width:64ch;margin:0;font-size:1.03rem}
.crumbs{font-size:.82rem;color:rgba(255,255,255,.85);margin-bottom:.9rem}
.crumbs a{color:rgba(255,255,255,.85)}
.crumbs a:hover{color:#fff}
/* 11-Sep-2026 OP: breadcrumb wale har page par "Back" button — pehle breadcrumb ke bagal me chhota
   tha, OP ne kaha "neeche do, thoda bade me": ab page-header ke text ke neeche, bada */
.phero__back{margin-top:1.4rem}
.backbtn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.62rem 1.3rem .62rem 1rem;
  border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-pill);background:rgba(255,255,255,.12);
  color:#fff;font-weight:700;font-size:.98rem;line-height:1.2;
  transition:background-color .2s,border-color .2s,transform .2s var(--ease);
}
.backbtn svg{width:19px;height:19px;transition:transform .2s var(--ease)}
.backbtn:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff}
.backbtn:hover svg{transform:translateX(-3px)}
/* 29-Sep-2026 OP: Back ab header me nahi, har page ke SABSE NEECHE (footer se pehle) — build_site.py page_back().
   Button baaki site jaisa yellow (.btn--yellow). Upar wale section ka neeche ka padding pehle se hai,
   isliye yahan upar thoda kheencha taaki bada khaali gap na bane. */
.pageback{padding:0 0 clamp(30px,3.4vw,48px);margin-top:calc(-1 * clamp(18px,2.6vw,40px))}
.pageback .btn svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.pageback .btn:hover svg{transform:translateX(-3px)}
.phero__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.36rem .85rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  font-size:.79rem;font-weight:600;color:#fff;backdrop-filter:blur(4px);
}
/* 29-Sep-2026 OP: pill ke aage wala chhota gold gol nishan hataya ("es type ke nishan hata do") */
a.pill:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------- product detail ---------- */
.pdetail{display:grid;grid-template-columns:1fr 350px;gap:clamp(2rem,4vw,3.2rem);align-items:start}
@media (max-width:960px){.pdetail{grid-template-columns:1fr}}
.spectable{width:100%;border-collapse:collapse;font-size:.94rem}
.spectable th,.spectable td{padding:.8rem 0;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spectable th{color:var(--muted);font-weight:400;width:46%}
.spectable td{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.sticky-card{position:sticky;top:calc(var(--head) + 18px)}
.qbox{background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:var(--r);padding:1.5rem}
.qbox h3{margin-bottom:.4rem}
.qbox p{font-size:.92rem}
.qbox .btn{margin-top:.35rem}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.spec{width:100%;border-collapse:collapse;font-size:.91rem;min-width:800px}
table.spec th,table.spec td{padding:.85rem 1.05rem;text-align:left;border-bottom:1px solid var(--line-soft)}
table.spec thead th{
  background:var(--grey);color:var(--ink);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
table.spec tbody tr:last-child td{border-bottom:0}
table.spec tbody tr:hover{background:var(--blue-tint)}
table.spec td:first-child{font-weight:700;color:var(--blue);white-space:nowrap}
table.spec td{font-variant-numeric:tabular-nums}

/* ---------- split / checklist ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.8rem);align-items:center}
.split--start{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:1.2rem 0 0}
.checklist li{position:relative;padding-left:1.75rem;margin:.6rem 0;font-size:.96rem}
.checklist li::before{
  content:'';position:absolute;left:0;top:.46em;width:9px;height:9px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft);
}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.acc__item + .acc__item{border-top:1px solid var(--line-soft)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem 1.4rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-weight:700;font-size:1rem;color:var(--ink);
}
.acc__q:hover{color:var(--blue)}
.acc__q[aria-expanded="true"]{color:var(--blue)}
.acc__q .plus{position:relative;width:14px;height:14px;flex:0 0 auto}
.acc__q .plus::before,.acc__q .plus::after{content:'';position:absolute;background:var(--yellow-deep);transition:transform .22s var(--ease)}
.acc__q .plus::before{left:0;top:6px;width:14px;height:2px}
.acc__q .plus::after{left:6px;top:0;width:2px;height:14px}
.acc__q[aria-expanded="true"] .plus::after{transform:scaleY(0)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc__a > div{padding:0 1.4rem 1.25rem;font-size:.95rem;max-width:80ch}

/* ---------- resources ---------- */
.res{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);transition:border-color .2s,box-shadow .2s;color:inherit}
.res:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);color:inherit}
.res__ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;flex:0 0 auto}
.res__ic svg{width:19px;height:19px}
.res b{display:block;color:var(--ink);font-size:.97rem}
.res span{font-size:.86rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--blue-deep);color:#fff;border-radius:var(--r);
  padding:clamp(2rem,4vw,3.2rem);text-align:center;border-top:4px solid var(--yellow)}
.cta h2{color:#fff;font-weight:300}
.cta p{color:rgba(255,255,255,.9);max-width:60ch;margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}

/* ---------- forms ---------- */
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.2rem)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:640px){.formgrid{grid-template-columns:1fr}}
.formgrid .full{grid-column:1/-1}
label{display:block;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:.32rem}
label .req{color:var(--blue)}
.formgrid input,.formgrid select,.formgrid textarea{
  width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);
  transition:border-color .16s,box-shadow .16s;
}
.formgrid textarea{min-height:135px;resize:vertical}
.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.formnote{font-size:.85rem;color:var(--muted);margin-top:.9rem}
.formok{display:none;margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:var(--blue-tint);border:1px solid var(--blue-tint-2);color:var(--blue);font-size:.92rem;font-weight:700}
.formok.is-on{display:block}

.infolist{list-style:none;padding:0;margin:0}
.infolist li{display:flex;gap:.85rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.infolist li:last-child{border-bottom:0}
.infolist svg{width:18px;height:18px;color:var(--blue);flex:0 0 auto;margin-top:.28rem}
.infolist b{display:block;color:var(--ink);font-size:.93rem}
.infolist span{font-size:.92rem}

.mapwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--grey);aspect-ratio:16/10}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
:root[data-theme="dark"] .mapwrap iframe{filter:invert(.92) hue-rotate(180deg) saturate(.75)}

.news{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.news input{flex:1;min-width:190px;padding:.7rem .9rem;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.9rem}
.news input::placeholder{color:rgba(255,255,255,.65)}
.news input:focus{outline:none;border-color:#fff}

/* ---------- video ---------- */
.videowrap{position:relative;padding-top:56.25%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--grey)}
.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- selector modal ---------- */
.modal{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:20px}
.modal.is-open{display:grid}
.modal__bg{position:absolute;inset:0;background:rgba(19,79,92,.55)}
.modal__box{
  position:relative;width:min(100%,580px);max-height:86vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:1.8rem;
}
.modal__x{position:absolute;top:.9rem;right:.9rem;width:32px;height:32px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.modal__x svg{width:14px;height:14px}
.selres{margin-top:1rem;display:grid;gap:.5rem}
.selres__item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.05rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:inherit;transition:border-color .16s,background .16s}
.selres__item:hover{border-color:var(--blue);background:var(--blue-tint);color:inherit}
.selres__item b{display:block;color:var(--blue);font-size:.99rem;font-weight:700}
.selres__item > span > span{font-size:.85rem;color:var(--muted);display:block}
.selres__item .sp{white-space:nowrap;color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- floating actions ---------- */
/* 17-Sep-2026 BUG: ye container fixed + z-index:150 hai aur iska khaali (invisible) box
   neeche-dayin kone ka kaafi hissa dhak leta tha — hero ke slideshow buttons par click
   yahin aakar mar jaati thi. Container ko `pointer-events:none`, aur asli buttons ko
   `auto` — isse peeche ka kuch bhi clickable rehta hai. Naya FAB jodo to `.fab` class
   zaroor do, warna wo khud click nahi lega. */
.fabs{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;flex-direction:column;
  gap:.5rem;align-items:flex-end;pointer-events:none}
.fabs > *{pointer-events:auto}
/* Floating actions — pehle WhatsApp ka bharkeela hara slab poore palette se takra raha tha.
   Ab wo sirf ek gol icon hai (green pehchana jaata hai, par slab nahi), aur quote pill gold. */
.fab{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.9rem;box-shadow:0 6px 18px rgba(16,58,72,.22);
  transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.fab svg{width:18px;height:18px}
.fab--wa{
  width:50px;height:50px;padding:0;justify-content:center;background:#fff;color:#1FA855;
  border:1px solid var(--line);
}
.fab--wa svg{width:24px;height:24px}
.fab--wa span{display:none}
.fab--wa:hover{background:#25D366;color:#fff;border-color:#25D366;transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(37,211,102,.4)}
.fab--quote{background:#F2C230;color:#1F2020;   /* 29-Sep-2026: baaki buttons jaisa yellow */
 
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 18px rgba(120,84,16,.3)}
.fab--quote:hover{background:#FFD34D;color:#1F2020;transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 11px 26px rgba(120,84,16,.36)}
.fab--top{width:44px;height:44px;padding:0;justify-content:center;background:var(--surface);color:var(--blue);
  border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s,transform .2s var(--ease)}
.fab--top:hover{transform:translateY(-3px);border-color:var(--blue)}
.fab--top.is-on{opacity:1;pointer-events:auto}
@media (max-width:600px){
  .fabs{right:12px;bottom:12px;gap:.45rem}
  .fab--quote span{display:none}
  .fab--quote{padding:0;width:50px;height:50px;justify-content:center}
  .fab--wa{width:50px;height:50px}
}

/* ---------- footer ---------- */
.footer{background:var(--blue-deep);color:rgba(255,255,255,.78);padding:clamp(46px,5vw,68px) 0 0}
.footer a{color:rgba(255,255,255,.88)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:2rem}
@media (max-width:960px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h4{color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;padding-bottom:.55rem;border-bottom:2px solid var(--yellow)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:.48rem 0;font-size:.92rem}
.footer .brand__logo{height:64px}
.footer .brand{align-items:center}
.footer__about p{font-size:.92rem;margin-top:1rem;max-width:36ch}
.footer__units{font-size:.89rem;line-height:1.75}
.footer__units b{color:#fff;display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:.95rem}
.footer__units b:first-of-type{margin-top:0}
.footer__bottom{margin-top:2.6rem;border-top:1px solid rgba(255,255,255,.14);padding:1.2rem 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;font-size:.85rem}
.certrow{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.certrow span{font-size:.72rem;font-weight:700;border:1px solid var(--yellow);border-radius:var(--r-sm);padding:.22rem .65rem;color:var(--yellow)}

/* ---------- reveal ---------- */
/* Reveal sirf tab chhupta hai jab JS chal raha ho (html.js). JS band ho ya
   observer late fire kare to content hamesha dikhta rahega — khaali area nahi. */
.reveal{transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(12px)}
html.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1!important;transform:none!important;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- print ---------- */
@media print{
  .header,.fabs,.cta,.footer,.finder,.chips,.btn,.quickbar,.backbtn,.pageback{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .phero{background:#fff;color:#000;padding:0 0 12pt;border-bottom:2px solid #226E93}
  .phero h1,.phero p,.crumbs{color:#000}
  .plist{grid-template-columns:repeat(2,1fr)}
  .pcard{break-inside:avoid;border:1px solid #999}
  .pcard__viz{background:#f2f2f2!important;color:#000}
  .pcard__code{color:#000}
  .pcard__tag{background:#ddd;color:#000}
}


/* ===========================================================================
   Photography — real plant, product and equipment images
   =========================================================================== */

/* generic figure */
.figure{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--grey)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure figcaption{padding:.7rem 1rem;font-size:.85rem;color:var(--muted);background:var(--surface);border-top:1px solid var(--line)}
.figure--tall{aspect-ratio:3/4}
.figure--wide{aspect-ratio:16/10}
.figure--square{aspect-ratio:1/1}

/* product family tile with a photo behind it */
.tile--photo{background:var(--blue-deep);isolation:isolate}
.tile--photo .tile__bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.tile--photo::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(19,79,92,.42) 0%,rgba(19,79,92,.88) 68%);
  transition:background .25s;
}
.tile--photo:hover{background:var(--blue-deep)}
.tile--photo:hover .tile__bg{transform:scale(1.06)}
.tile--photo:hover::before{background:linear-gradient(180deg,rgba(19,79,92,.5) 0%,rgba(19,79,92,.93) 68%)}

/* industry card — red line icon on white, jaise original site pe tha */
.icard{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem;color:inherit;text-align:left;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.icard:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.icard__ic{width:56px;height:56px;margin-bottom:1rem;display:grid;place-items:center}
.icard__ic img{width:100%;height:100%;object-fit:contain}
.icard__name{font-size:1.08rem;font-weight:700;color:var(--blue);margin-bottom:.3rem}
.icard__line{font-size:.88rem;color:var(--body);line-height:1.55;flex:1}
.icard__count{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line-soft);
  font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* product card image */
.pcard__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grey)}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard__img .pcard__tag{position:absolute;top:.7rem;right:.7rem;background:rgba(19,79,92,.86);backdrop-filter:blur(4px)}
.pcard__head{padding:1.1rem 1.25rem .2rem}
.pcard__head .pcard__code{color:var(--blue);font-size:1.15rem;font-weight:700}
.pcard__b--withimg{padding-top:.6rem}

/* grade detail gallery */
.pshot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--grey);aspect-ratio:1/1;margin-bottom:1.5rem}
.pshot img{width:100%;height:100%;object-fit:cover;display:block}

/* machine cards */
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.mcard:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.mcard__img{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:1rem}
.mcard__img img{width:100%;height:100%;object-fit:contain}
.mcard__b{padding:1.15rem 1.25rem 1.35rem;border-top:1px solid var(--line-soft)}
.mcard__model{font-size:1.05rem;font-weight:700;color:var(--blue);margin-bottom:.5rem}
.mcard__spec{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;padding:.18rem 0}
.mcard__spec dt{color:var(--muted)}
.mcard__spec dd{margin:0;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* 16-Sep-2026 OP: machine card ab clickable hai — poora spec page kholta hai */
.mcard--link{display:block;text-decoration:none;color:inherit}
.mcard--link:hover{transform:translateY(-2px)}
.mcard--link .mcard__img img{transition:transform .25s var(--ease)}
.mcard--link:hover .mcard__img img{transform:scale(1.04)}
.mcard__more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.85rem;
  font-weight:700;font-size:.85rem;color:var(--blue)}
.mcard__more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.mcard--link:hover .mcard__more svg{transform:translateX(3px)}
.spec td a{color:var(--blue);font-weight:700;text-decoration:none}
.spec td a:hover{text-decoration:underline}

/* founder / team */
/* Leadership — photo left, text right; ek shaant blue panel me */
.leaders{display:grid;gap:1.3rem}
.person{
  display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;transition:border-color .22s,box-shadow .22s;
}
.person:hover{border-color:var(--blue-tint-2);box-shadow:var(--shadow-sm)}
@media (max-width:680px){.person{grid-template-columns:1fr;gap:1.2rem}}
.person .figure{aspect-ratio:4/5;margin:0;border-radius:var(--r-sm);background:var(--blue-tint)}
.person .figure img{filter:saturate(.94)}
.person h3{margin-bottom:.15rem;font-size:1.28rem;color:var(--blue-deep)}
.person .role{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-mid);padding-bottom:.55rem;margin-bottom:.9rem;border-bottom:2px solid var(--yellow);
}
.person p{font-size:.97rem;margin:0;max-width:68ch}
.person > div{min-width:0}

/* photo strip */
/* Teen photo ka strip. Pehle ye sankre column me tha aur 1:1 me kata hua tha — photo ka
   aadha hissa crop ho jaata tha. Ab poori chaudai, 4:3 media aur neeche caption. */
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.strip3 .figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.strip3 .figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.strip3 figcaption{padding:.7rem .85rem .8rem;font-size:.83rem;line-height:1.4;color:var(--muted);
  border-top:1px solid var(--line-soft)}
@media (max-width:900px){.strip3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.strip3{grid-template-columns:1fr}}


/* ===========================================================================
   Product page — badi image left, details right
   =========================================================================== */
.pgrid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}

.pmain{
  position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--grey);margin:0;
}
.pmain img{width:100%;height:100%;object-fit:cover;display:block}
/* 16-Sep-2026 OP: "machine ka photo cut raha hai". Grade ki photo square hai isliye `cover`
   theek tha, par catalogue ke machine render portrait (~3:4) hain — cover unhe upar-neeche se
   kaat deta tha. Machine wale figure par `contain` + white background (photo ka background bhi
   white hai, isliye letterbox dikhta hi nahi) aur thoda padding. */
.pmain--machine{background:#fff;border-color:var(--line)}
.pmain--machine img{object-fit:contain;padding:clamp(.9rem,3%,1.6rem)}
.pmain__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:2rem;
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
}
.pmain__ph b{color:#fff;font-size:2rem;font-weight:700;letter-spacing:-.02em}
.pmain__ph span{color:rgba(255,255,255,.85);font-size:1rem}
.pmain__ph small{color:rgba(255,255,255,.6);font-size:.8rem;margin-top:.6rem}
.pmain__cap{margin-top:.7rem;font-size:.83rem;color:var(--muted);text-align:center}

.psum h2{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:.7rem}
.pkey{margin:1.4rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.4rem 0}
.pkey div{display:flex;justify-content:space-between;gap:1.5rem;padding:.62rem 0;border-bottom:1px solid var(--line-soft)}
.pkey div:last-child{border-bottom:0}
.pkey dt{color:var(--muted);font-size:.9rem}
.pkey dd{margin:0;color:var(--ink);font-weight:700;font-size:.92rem;text-align:right;font-variant-numeric:tabular-nums}
.pactions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.pnote{font-size:.85rem;color:var(--muted);margin-top:1rem}

.pcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.6rem)}
/* 19-Sep-2026: grid item ka default min-width:auto hota hai — andar chaudi table (R&D ka
   6-column pilot-plant table) poori column ko 900px+ kheench leti thi aur phone par page
   sideways hilta tha. min-width:0 se column screen jitna rehta hai, table apne
   .tablewrap ke andar hi scroll hoti hai. */
.pcols > *,.pgrid > *,.split > *{min-width:0}
@media (max-width:760px){.pcols{grid-template-columns:1fr}}


/* ===========================================================================
   Knowledge article
   =========================================================================== */
.article{font-size:1.06rem;line-height:1.8}
.article p{margin:0 0 1.35rem;max-width:70ch}
.article p:first-child{font-size:1.16rem;color:var(--ink)}
.callout{
  background:var(--yellow-soft);border-left:4px solid var(--yellow);border-radius:0 var(--r) var(--r) 0;
  padding:1.5rem 1.7rem;margin:2.2rem 0 0;
}
.callout h3{margin-bottom:.7rem;color:var(--blue)}
.callout .checklist{margin:0}
.callout .checklist li{font-size:.98rem}

/* video grid */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
@media (max-width:840px){.vgrid{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  transition:border-color .2s,box-shadow .2s}
.vcard:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.vcard__frame{
  position:relative;padding:0;width:100%;padding-top:56.25%;background:#000;
  border:0;cursor:pointer;display:block;overflow:hidden;
}
.vcard__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),opacity .2s}
.vcard__frame:hover img{transform:scale(1.04);opacity:.9}
.vcard__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:46px;border-radius:10px;background:var(--yellow);
  display:grid;place-items:center;transition:background .2s,transform .2s var(--ease);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.vcard__play::after{content:'';border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #1F2020;margin-left:3px}
.vcard__frame:hover .vcard__play{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
.vcard__b{padding:1.1rem 1.3rem 1.3rem}
.vcard__cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-mid);margin-bottom:.4rem}
.vcard h3{font-size:1.05rem;margin-bottom:.3rem}
.vcard p{font-size:.9rem;margin:0}


/* ---------- industry troubleshooting ---------- */
.probs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:860px){.probs{grid-template-columns:1fr}}
.prob{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--yellow);
  border-radius:0 var(--r) var(--r) 0;padding:1.5rem 1.6rem;
}
.prob h3{font-size:1.05rem;color:var(--blue-deep);margin-bottom:.8rem}
.prob p{font-size:.93rem;margin:0 0 .7rem;line-height:1.6}
.prob p:last-child{margin-bottom:0}
.prob__why b{color:var(--muted);font-weight:700}
.prob__fix b{color:var(--blue);font-weight:700}


/* ---------- skip to content ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--blue);color:#fff;padding:.75rem 1.2rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip:focus{left:0;color:#fff}

/* ---------- spec values kabhi beech se na tootein ---------- */
.pcard__specs dd,.pkey dd,.spectable td,.mcard__spec dd{white-space:nowrap}
@media (max-width:420px){
  .pcard__specs dd,.pkey dd{white-space:normal}
}

/* ---------- headings me akela shabd (widow) na chhode ---------- */
h1,h2{text-wrap:balance}
h3,.lead{text-wrap:pretty}

/* ---------- grade page print karne layak ----------
   B2B buyer datasheet print karta hai — nav, footer, CTA sab hat jaayein. */
@media print{
  .skip,.header,.fabs,.cta,.footer,.finder,.chips,.quickbar,.trust,.modal,
  .pactions,.btn,.selres,.probs,.qbox{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .phero{background:#fff!important;color:#000;padding:0 0 10pt;border-bottom:3px solid #005099}
  .phero h1{color:#005099;font-size:22pt}
  .phero p,.crumbs{color:#000}
  .pill{border:1px solid #999;color:#000;background:none}
  .section{padding:12pt 0}
  .section--alt{background:#fff}
  .pgrid{grid-template-columns:38% 1fr;gap:16pt}
  .pmain{border:1px solid #999;break-inside:avoid}
  .spectable th,.spectable td{padding:4pt 0;border-bottom:1px solid #ccc}
  .rule{background:#005099}
  .checklist li::before{background:#005099;box-shadow:none}
  a[href]::after{content:''}
  .wrap{width:100%;padding:0}
  h2{font-size:14pt;color:#005099}
  h3{font-size:12pt}
}


/* ---------- client logo strip ---------- */
.clients-band{background:var(--surface);border-block:1px solid var(--line)}
.clients{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media (max-width:1000px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.clients{grid-template-columns:repeat(2,1fr)}}
.client{
  background:var(--surface);display:grid;place-items:center;
  padding:1.6rem 1.1rem;min-height:104px;transition:background .2s;
}
.client:hover{background:var(--bg-alt)}
.client img{
  max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s;
}
.client:hover img{filter:none;opacity:1}
/* logo file na ho to naam — section adhoora nahi dikhta */
.client--text span{
  font-size:1.02rem;font-weight:700;letter-spacing:.01em;color:var(--muted);
  text-align:center;line-height:1.3;transition:color .25s;
}
.client--text:hover span{color:var(--logo-blue)}


/* ---------- products hub: do bade options ---------- */
/* Products hub ke do bade cards.
   Dono photo ka aspect alag hai (adhesive banner chaudi, machine khadi), isliye media area
   fixed 4:3 hai aur image `contain` hoti hai — koi photo kati hui nahi dikhti. Peeche halka
   blue tint taaki safed background wali machine bhi panel me baithi lage. */
/* 10-Sep-2026 OP: ye do cards pehle bahut lambe (aur aapas me alag-alag height ke) the — tab
   square kiye the; 11-Sep-2026 ko OP ne poori width + kam height maangi (neeche). */
/* 11-Sep-2026 OP: "width pura kar do, left-right khaali space nahi, aur thoda patla" — ab poori
   wrap width, square nahi; photo 150px ki patti, facts + button ek hi line me. */
.optgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
/* dono card (aur dono ke button) ek saath dikhein — 700px tak bagal-bagal (11-Sep-2026 OP) */
@media (max-width:700px){.optgrid{grid-template-columns:1fr}}
.optcard{
  position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;color:inherit;
  transition:border-color .24s,box-shadow .24s,transform .24s var(--ease);
}
.optcard::before{                      /* upar patli brand stripe — card ki pehchaan */
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:var(--yellow);
}
.optcard--app::before{background:var(--blue)}
.optcard:hover{border-color:var(--blue);box-shadow:0 16px 38px rgba(16,58,72,.16);transform:translateY(-4px);color:inherit}

.optcard__im{
  position:relative;display:block;flex:0 0 auto;aspect-ratio:7/2;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-tint-2) 0%,var(--blue-tint) 55%,var(--surface) 100%);
  border-bottom:1px solid var(--line-soft);
}
/* contain, cover nahi: adhesive banner ke kinaron pe labels (GRANULES/PALLET FORM) hain jo
   crop me kat jaate, aur machine khadi hai — cover use karte to uska upar/neeche kat jaata. */
/* 11-Sep-2026: ab dono photo khud 7:2 ki bani hain (make_opt_banners.py) — patti ke bilkul
   naap ki, isliye cover se bhi kuch nahi katta aur patti poori bhari rehti hai */
.optcard__im img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
/* "Click" ka nishan — OP: dono card par dikhe ki ye click hote hain */
.optcard__tap{
  position:absolute;right:.7rem;top:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .75rem .34rem .5rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);color:var(--blue-deep);font-size:.74rem;font-weight:700;
  box-shadow:0 4px 14px rgba(16,58,72,.22);
}
.optcard__tap svg{width:18px;height:18px;color:var(--yellow);transform-origin:40% 20%;
  animation:tapHand 1.6s var(--ease) infinite}
.optcard--app .optcard__tap svg{color:var(--blue)}
.optcard__tap::before{                  /* ungli ke neeche halka pulse ring */
  content:'';position:absolute;left:.5rem;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  border:2px solid currentColor;opacity:0;animation:tapRing 1.6s var(--ease) infinite;color:var(--yellow)}
.optcard--app .optcard__tap::before{color:var(--blue)}
@keyframes tapHand{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(2px) scale(.9)}}
@keyframes tapRing{0%,30%{opacity:0;transform:scale(.6)}40%{opacity:.7}100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){.optcard__tap svg,.optcard__tap::before{animation:none}}
:root[data-theme="dark"] .optcard__tap{background:rgba(20,28,33,.92);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .optcard__tap{background:rgba(20,28,33,.92);color:#fff}}
.optcard:hover .optcard__im img{transform:scale(1.04)}
.optcard__no{                          /* bada halka numeral — 01 / 02 */
  position:absolute;left:.8rem;top:.5rem;font-size:1.5rem;font-weight:300;line-height:1;
  color:var(--blue);opacity:.16;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}

/* Body grid: upar ki lines poori chaudai me, aakhri line me facts (left) + button (right) */
.optcard__b{display:grid;grid-template-columns:1fr auto;column-gap:1.2rem;align-content:start;
  padding:.9rem 1.2rem 1rem;flex:1}
.optcard__b > *{grid-column:1 / -1}
.optcard .eyebrow{font-size:.66rem;margin-bottom:.4rem}
.optcard .eyebrow::before{width:14px}
.optcard__h{font-size:clamp(1rem,1.35vw,1.16rem);font-weight:300;color:var(--blue);
  line-height:1.2;margin-bottom:.35rem}
.optcard__p{
  font-size:.82rem;line-height:1.5;color:var(--body);margin-bottom:.6rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.optcard__tags{display:flex;flex-wrap:wrap;gap:.28rem;margin-bottom:.6rem}
.optcard__tags i{
  font-style:normal;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:var(--r-pill);
  background:var(--yellow-soft);color:var(--gold-ink);border:1px solid var(--yellow-line);
}
.optcard--app .optcard__tags i{background:var(--blue-tint);color:var(--blue-deep);border-color:var(--blue-tint-2)}

.optcard__facts{
  grid-column:1;grid-row:5;
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:.4rem 1.6rem;margin:0;padding:.5rem 0;
  border-top:1px solid var(--line-soft);
}
.optcard__facts span{display:flex;flex-direction:column;gap:.1rem;font-size:.63rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.25}
.optcard__facts b{font-size:.95rem;font-weight:300;letter-spacing:-.01em;text-transform:none;
  color:var(--blue-deep);font-variant-numeric:tabular-nums}
.optcard .btn{grid-column:2;grid-row:5;align-self:center;justify-self:end;
  padding:.58rem 1.1rem;font-size:.82rem;white-space:nowrap}
/* card ~550px se patla ho to facts + button ek line me nahi aate (button kinare se chipak jaata) —
   tab button facts ke neeche, aur dono card ke button ek hi seedh me (margin-top:auto) */
@media (max-width:1099px){
  .optcard__b{display:flex;flex-direction:column}
  .optcard__facts{border-bottom:1px solid var(--line-soft);margin-bottom:.75rem}
  .optcard .btn{margin-top:auto;align-self:flex-start}
}

/* 11-Sep-2026 OP: home par pehle sirf ye do card; click karne par neeche application-wise panel */
.optcard.is-active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint-2),0 16px 38px rgba(16,58,72,.16)}
.optcard[data-pline] .btn svg{transition:transform .25s var(--ease);transform:rotate(90deg)}
.optcard.is-active .btn svg{transform:rotate(-90deg)}
.pline{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line);
  animation:plineIn .4s var(--ease)}
.pline__h{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:300}
@keyframes plineIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pline{animation:none}}


/* ---------- applicators page ---------- */
/* Lead: text left, machine photo right. Photo ka background safed hai isliye halka
   blue tint panel diya hai — warna page pe kata-kata dikhta hai. */
.split--lead{align-items:center}
.figure--unit{
  margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--blue-tint-2) 0%,var(--blue-tint) 55%,var(--surface) 100%);
}
.figure--unit img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;padding:1rem}

/* Equipment card jab photo ke saath aata hai (guns/hoses/nozzles/spares) */
.card--ph{padding-top:0;overflow:hidden}
.card__ph{
  margin:-1px -1px 1.1rem;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-tint-2) 0%,var(--blue-tint) 60%,var(--surface) 100%);
  border-bottom:1px solid var(--line-soft);
}
.card__ph img{width:100%;height:100%;object-fit:contain;padding:.55rem;transition:transform .5s var(--ease)}
.card--ph:hover .card__ph img{transform:scale(1.04)}


/* ---------- spare parts gallery ---------- */
/* Photos cut-out (transparent) hain, isliye tile ka background halka tint rakha hai —
   har part ek hi tarah dikhta hai chahe uski asli photo kaale ya neele studio pe li gayi ho. */
.sgroup{margin-top:2.2rem}
.sgroup__h{
  display:flex;align-items:baseline;gap:.7rem;font-size:.82rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);
  padding-bottom:.55rem;border-bottom:2px solid var(--yellow);margin-bottom:1.1rem;
}
.sgroup__h span{font-size:.74rem;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
.spart{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.spart:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.spart__im{
  display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-tint-2) 0%,var(--blue-tint) 60%,var(--surface) 100%);
  border-bottom:1px solid var(--line-soft);
}
.spart__im img{width:100%;height:100%;object-fit:contain;padding:.5rem}
.spart figcaption{display:block;padding:.6rem .7rem .7rem;font-size:.79rem;line-height:1.35;color:var(--body)}
@media (max-width:520px){.sgrid{grid-template-columns:repeat(2,1fr)}}
.pline__sub{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line)}
/* 18-Sep-2026: CSR link judne se 9 nav items — 1366px laptop par "Request a Quote" kinare se kat raha tha.
   Desktop nav ki chhoti screens (1340–1499px) par link ki padding thodi kam. */
@media (min-width:1340px) and (max-width:1499px){
  .navlink{padding:.62rem .36rem;gap:.26rem}
  .headtools{margin-left:.35rem}
}
/* form bot-trap field (send-mail.php) — asli user ko kabhi na dikhe */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* 18-Sep-2026: machine card = spec link + apna "Request a Quote" button */
.mcard__go{display:block;text-decoration:none;color:inherit}
.mcard__q{padding:0 1.25rem 1.25rem}
.mcard--link:hover .mcard__go .mcard__img img{transform:scale(1.04)}
div.mcard--link{display:flex;flex-direction:column}
div.mcard--link .mcard__go{flex:1 1 auto}

/* ===========================================================================
   MOBILE FIXES — 19-Sep-2026 OP: "website mobile me bhi proper khulni chahiye"
   Poori site ka audit (169 pages x 360 / 390 / 414px) kiya. Jo mila:
   1. Har grade + machine page (131) sideways hilta tha — spec table 444px ki ban
      jaati thi, kyunki `.spectable td{white-space:nowrap}` lamba vaakya ("12 months
      in unopened original packing below 40°C") todne nahi deta. Desktop par nowrap
      theek hai (OP chahte the value beech se na toote), par phone par label UPAR aur
      value NEECHE kar di — value ko poori chaudai milti hai, chhote number ab bhi ek
      line me rehte hain, sirf lambe vaakya toot-te hain.
   2. R&D page 924px — upar `.pcols > *{min-width:0}` se theek.
   3. 12px se chhota text (Google "text too small" maanta hai): footer ISO chips,
      product-card tag, eyebrow label, optcard tags — phone par 12px+ kiya.
   4. Estimate form ka "line hatao" (x) button 30px tha — ungli ke liye 40px.
   Desktop par in me se kuch nahi badla.
   =========================================================================== */
@media (max-width:640px){
  /* 1 — spec table: label upar, value neeche */
  .spectable,.spectable tbody,.spectable tr,.spectable th,.spectable td{display:block;width:auto}
  .spectable tr{padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
  .spectable tr:last-child{border-bottom:0}
  .spectable th,.spectable td{padding:0;border:0}
  .spectable th{font-size:.84rem;margin-bottom:.18rem}
  .spectable td{white-space:normal;overflow-wrap:break-word}

  /* 3 — chhota text */
  .certrow span{font-size:.78rem}
  .pcard__tag{font-size:.75rem}
  .eyebrow{font-size:.75rem}
  .hero__eyebrow{font-size:.78rem}
  .optcard__tags i{font-size:.75rem}
  .sgroup__h span{font-size:.8rem}
  /* doosre audit me bache — inke apne rule zyada specific the */
  .optcard .eyebrow{font-size:.75rem}
  .optcard__facts span{font-size:.75rem}
  .optcard__tap{font-size:.78rem}
  .footer__units b{font-size:.78rem}
  .vcard__cat{font-size:.75rem}
}

/* 28-Sep-2026 OP: home ka "Where we supply" photo-card section hataya. Dubai sister concern
   ab Products ke do tab ke theek upar ek khaas "badge" me (neela + gold, baaki page se alag
   dikhe). Aur is section ka upar ka khaali space kam kiya (OP screenshot). */
.home-prod{padding-top:clamp(34px,3.6vw,54px)}
.home-prod .shead{max-width:none;margin-bottom:1.1rem}
.home-prod .rule{margin:.55rem auto .85rem}
.home-prod h2{margin-bottom:.35rem}
.sister-badge{
  display:flex;align-items:center;gap:.85rem;width:fit-content;max-width:100%;
  margin:0 auto clamp(1.3rem,2.4vw,1.9rem);padding:.55rem 1.1rem .55rem .55rem;
  border-radius:var(--r-pill);border:1px solid rgba(233,194,117,.55);
  background:linear-gradient(120deg,var(--blue-deep) 0%,var(--blue-mid) 100%);
  box-shadow:0 10px 24px rgba(16,58,72,.18);color:#fff;
}
.sister-badge__ic{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:#E9C275;color:var(--blue-deep);
}
.sister-badge__ic svg{width:20px;height:20px}
.sister-badge__t{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.sister-badge__t small{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#E9C275}
.sister-badge__t b{font-size:1.02rem;font-weight:700;color:#fff}
.sister-badge__tag{
  margin-left:.35rem;padding:.2rem .6rem;border-radius:var(--r-pill);flex:0 0 auto;
  border:1px solid rgba(255,255,255,.45);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#fff;
}
@media (max-width:480px){
  .sister-badge{gap:.6rem;padding-right:.8rem}
  .sister-badge__t small{font-size:.66rem;letter-spacing:.05em}
  .sister-badge__t b{font-size:.92rem}
  .sister-badge__tag{display:none}
}

/* ---------- 29-Sep-2026 OP: hero text bayin taraf chhote panel me ----------
   OP (screenshot): "video sahi se dikh nahi raha, jo likha hai congested hai — side ya kuch
   better karo"; chuna: "Text bayin taraf chhota". Badi screen (>900px) par:
   - andhera (scrim) sirf bayin ~40% par, dayin taraf photo/video bilkul saaf
   - text beech-khada (vertically center), patla column, font thoda chhota
   Chhoti screen (<=900px) par pehle jaisa hi (wahan jagah hi nahi). Purani CSS:
   Old Website Backup/hero-text-left-panel-2026-09-29/style.css */
@media (min-width:901px){
  /* 29-Sep-2026 (baad me) OP: "jo likha hai use left side me niche ki tarah, aur uske peeche ki
     cheez pura transparent dikhe" — andhera (scrim) poora hataya, text wapas NEECHE-bayin.
     Padhne ke liye sirf text par parchhai (text-shadow), photo par koi parda nahi. */
  .hero__copy{inset:auto 0 0 0;display:flex;align-items:flex-end;padding:0 0 clamp(34px,4vw,56px)}
  .hero__copy .wrap{width:min(100% - 40px,var(--wrap))}   /* flex ke andar bhi .wrap jaisa gutter */
  .hero__copy .wrap > *{max-width:min(470px,40vw)}
  .hero h1{font-size:clamp(1.8rem,2.6vw,2.45rem);max-width:min(470px,40vw);margin-bottom:.6rem}
  .hero__sub{font-size:clamp(.9rem,1.05vw,1rem);line-height:1.55}
  .hero__eyebrow{margin-bottom:1rem}
  .hero__actions{margin-top:1.3rem;gap:.6rem}
  .hero__copy .wrap > .hero__actions{max-width:none}   /* button ka size nahi chheda (OP: lambai same) */
}

/* 29-Sep-2026 OP: hero photo/video par koi andhera nahi (sab screen size) — pehle poore hero par
   neela-kaala parda (.hero__scrim) tha. Text ki readability ab text-shadow se. */
/* 01-Oct-2026 OP (screenshot): "white me sahi se dikh nahi raha — ya background sahi karo jaise pehle kiya tha".
   Poora transparent (29-Sep) hata kar wapas parda, par sirf TEXT ki taraf: bayin taraf gehra-neela jo daayin taraf
   gayab ho jaata hai, aur oopar (aasmaan/chhat) ki taraf bhi fade — daayin + oopar ki photo saaf rahe.
   Jin slides par text nahi (.hero--notext) wahan parda bhi gayab (photo/video poora saaf). Pehla (bina parda):
   Old Website Backup/5 - .../hero-text-left-panel-2026-09-29/style-before-restore-scrim-2026-10-01.css */
.hero__scrim{
  --hl:max(20px,(100vw - var(--wrap)) / 2);
  background:linear-gradient(90deg,
    rgba(11,38,48,.82) 0, rgba(11,38,48,.74) calc(var(--hl) + 400px),
    rgba(11,38,48,.46) calc(var(--hl) + 560px), rgba(11,38,48,.14) calc(var(--hl) + 720px),
    rgba(11,38,48,0) calc(var(--hl) + 820px));
  -webkit-mask-image:linear-gradient(0deg,#000 0,#000 62%,transparent 100%);
          mask-image:linear-gradient(0deg,#000 0,#000 62%,transparent 100%);
  transition:opacity .6s ease;
}
.hero--notext .hero__scrim{opacity:0}
@media (max-width:900px){
  /* chhoti screen: text poori chaudai me neeche — neeche se oopar fade */
  .hero__scrim{
    background:linear-gradient(0deg,rgba(11,38,48,.88) 0,rgba(11,38,48,.72) 55%,rgba(11,38,48,.25) 85%,rgba(11,38,48,0) 100%);
    -webkit-mask-image:none;mask-image:none;
  }
}
.hero__eyebrow,.hero h1,.hero__sub{
  text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 14px rgba(0,0,0,.6),0 0 28px rgba(0,0,0,.35);
}
.hero__eyebrow{border-left-color:var(--yellow)}

/* 29-Sep-2026 OP: "word ka color change kar do jise saf dikhe" — roshan plant-photo slide par text gehra
   neela (safed chamak/halo ke saath), video + founder slide par safed hi (upar wala text-shadow).
   .hero--light main.js hGo() har slide par lagata/hatata hai. */
.hero__eyebrow,.hero h1,.hero h1 b,.hero__sub{transition:color .6s ease,text-shadow .6s ease}
/* 30-Sep-2026 OP: text sirf pehli + founder slides par (main.js hGo() .hero--notext lagata/hatata hai).
   opacity se chhupaya, display se nahi — buttons apni jagah rahen, layout na hile. */
.hero__eyebrow,.hero h1,.hero__sub{transition:color .6s ease,text-shadow .6s ease,opacity .6s ease,visibility 0s}
.hero--notext .hero__eyebrow,.hero--notext h1,.hero--notext .hero__sub{opacity:0;visibility:hidden;
  transition:color .6s ease,text-shadow .6s ease,opacity .6s ease,visibility 0s .6s}
/* 29-Sep-2026 OP: "jo likha hai usko proper black color me" — gehra neela nahi, asli KAALA #000; chamak (halo)
   patli kar di taaki akshar dhundhle nahi, saaf kaale dikhen — bas kinaare par halki safed lakeer. */
.hero--light .hero__eyebrow,.hero--light h1{
  /* 30-Sep-2026 OP (screenshot): "jis color me wahi color same starting me bhi hoga" — pehli photo ka text ab founder/video
     slides jaisa: SAFED heading + sunehra (#E9C275) "import-quality". Kaala/gehra-gold (29-Sep) hata; backup
     Old Website Backup\hero-first-slide-white-text-2026-09-30\. Photo par padhne ke liye wahi gehri parchhai. */
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.35);
}
.hero--light h1{font-weight:700}          /* patla (300) font photo par kho jaata tha */
.hero--light h1 b{color:#E9C275}
/* 29-Sep-2026 OP (screenshot): neeche wali line ("India's leading local...") HAMESHA safed — har photo aur
   video par. Roshan photo par padhne ke liye gehri kaali parchhai. */
.hero .hero__sub,.hero--light .hero__sub{
  color:#fff;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.75),0 0 24px rgba(0,0,0,.55);
}
.hero--light .hero__eyebrow{font-weight:800}