/* =========================================================
   Jalamkar Industries — Coming Soon
   Display type: Recoleta (self-host below), fallback Fraunces
   ========================================================= */

/* Drop licensed Recoleta webfont files into images/../fonts/ and these
   @font-face rules pick them up automatically. Until then the stack
   falls back to Fraunces, the closest free soft-serif. */
@font-face{
  font-family:'Recoleta';
  src:url('fonts/Recoleta-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Recoleta';
  src:url('fonts/Recoleta-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Recoleta';
  src:url('fonts/Recoleta-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --green-900:#173822;
  --green-800:#1f5c34;
  --green-700:#2e7d46;
  --green-600:#3a9155;
  --amber:#e0a63a;
  --amber-dark:#c9861f;
  --amber-bright:#ffc74d;
  /* very light, cool base — a whisper of blue over the warm cream */
  --cream:#f7fbfe;
  --paper:#eef5fb;
  --sky-50:#f4f9fd;
  --sky-100:#e6f1fa;
  --sky-tint:rgba(186,216,240,.30);
  --line:#dbe7f1;
  --ink:#1c2b20;
  --ink-soft:#5a6b5c;

  --font-display:'Recoleta','Fraunces','Baloo 2',Georgia,serif;
  --font-body:'Poppins',system-ui,-apple-system,sans-serif;

  --radius:16px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(23,56,34,.07);
  --shadow-md:0 14px 34px rgba(23,56,34,.13);
  --shadow-lg:0 22px 50px rgba(23,56,34,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:112px;
}

*{box-sizing:border-box;}
/* Grid and flex items default to min-width:auto, so one long unbreakable
   string (an email, a phone number, a nowrap label) can force its track wider
   than the page and produce a horizontal scrollbar. */
.cat-grid>*,.video-grid>*,.award-grid>*,.feature-list>*,.footer-grid>*,
.contact-grid>*,.hero-stats>*,.footer-main>*,.feature-band-inner>*,
.hero-inner>*,.newsletter-inner>*,.cta-band-inner>*{min-width:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
/* Backstop only — the real fixes are the minmax(0,..) tracks above. `hidden`
   for older Safari/WebView, upgraded to `clip` where supported because clip
   does not create a scroll container. */
html,body{overflow-x:hidden;}
@supports (overflow:clip){ html,body{overflow-x:clip;} }
body{max-width:100%;}
body{
  margin:0;
  padding-top:var(--header-h);      /* header is fixed — reserve its space once */
  font-family:var(--font-body);
  color:var(--ink);
  background:#f7fbfe;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* The light-blue wash lives on its own fixed layer. `background-attachment:fixed`
   forces a full-viewport repaint on every scroll frame; a fixed pseudo-element
   is composited instead, so scrolling stays smooth. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -8%,  rgba(178,213,241,.42) 0%, transparent 62%),
    radial-gradient(900px 560px at -10% 22%,  rgba(198,226,246,.34) 0%, transparent 60%),
    linear-gradient(180deg, #f6fbff 0%, #f2f8fd 45%, #f7fbfe 100%);
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:700; letter-spacing:-.01em;}
p{margin:0;}
a{text-decoration:none; color:inherit;}
img,svg{display:block; max-width:100%;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1560px; margin:0 auto; padding:0 30px;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--green-800); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 0; font-size:14px;
}
.skip-link:focus{left:0;}

:where(a,button,input):focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--delay,0s);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:999px; font-weight:600; font-size:14.5px; font-family:var(--font-body);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap; max-width:100%;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--green-800); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-700); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-outline{background:#fff; color:var(--green-800); border-color:var(--green-800);}
.btn-outline:hover{background:var(--green-800); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-whatsapp{background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.32);}
.btn-whatsapp:hover{background:#1eb85a; transform:translateY(-2px); box-shadow:0 10px 26px rgba(37,211,102,.42);}
.btn-amber{background:var(--amber); color:var(--green-900); box-shadow:0 6px 18px rgba(224,166,58,.34);}
.btn-amber:hover{background:var(--amber-bright); transform:translateY(-2px); box-shadow:0 10px 26px rgba(224,166,58,.45);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn-lg{padding:17px 32px; font-size:15.5px;}

/* ---------- header (sticky) ---------- */
/* Fixed, not sticky: the compact state changes the header's height, and a
   sticky header sits in flow — so every collapse yanked the page content up.
   Fixed + a one-time body padding means the shrink never reflows anything. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(250,253,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 6px 26px rgba(23,56,34,.10); background:rgba(250,253,255,.98);}

/* scrolling announcement bar (English + Marathi) */
.topbar{
  background:linear-gradient(90deg,var(--green-900) 0%,#1c4a2c 50%,var(--green-900) 100%);
  color:#d7e5da; font-size:12.4px; overflow:hidden;
}
.marquee{position:relative; overflow:hidden; padding:9px 0;}
/* fade the edges so text slides in and out softly */
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;
}
.marquee::before{left:0;  background:linear-gradient(90deg,var(--green-900),transparent);}
.marquee::after{right:0; background:linear-gradient(270deg,var(--green-900),transparent);}

.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex; align-items:center; flex-shrink:0;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.mq-item{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:500; letter-spacing:.2px;}
.mq-ico{font-size:13px;}
.mq-mr{color:#eaf3ec;}
.mq-hi{color:var(--amber-bright); font-weight:600;}
.mq-sep{margin:0 16px; color:var(--amber); font-size:9px; opacity:.75;}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; transform:none;}
  .marquee{overflow-x:auto;}
}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px;}
.site-header.scrolled .topbar{display:none;}
.site-header.scrolled .header-inner{padding-top:10px; padding-bottom:10px;}

.brand{display:flex; align-items:center; flex-shrink:0;}
.brand-mark{object-fit:contain; height:46px; width:auto; transition:height .3s var(--ease);}
.site-header.scrolled .brand-mark{height:38px;}

.header-nav{display:flex; gap:26px; font-size:14.5px; font-weight:500;}
.header-nav a{position:relative; padding:4px 0; color:var(--ink); transition:color .25s var(--ease);}
.header-nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--amber); transition:width .3s var(--ease);}
.header-nav a:hover{color:var(--green-800);}
.header-nav a:hover::after{width:100%;}

.header-right{display:flex; align-items:center; gap:20px;}
.header-contact{display:flex; gap:22px;}

/* header call CTA */
.header-call{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  padding:8px 18px 8px 10px; border-radius:999px;
  background:linear-gradient(135deg,var(--green-700),var(--green-800));
  color:#fff; box-shadow:0 6px 18px rgba(31,92,52,.26);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.header-call:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(31,92,52,.34); background:linear-gradient(135deg,var(--green-600),var(--green-700));}
.header-call-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  animation:ring 2.6s var(--ease) infinite;
}
@keyframes ring{0%,72%,100%{transform:rotate(0);} 76%{transform:rotate(-12deg);} 80%{transform:rotate(12deg);} 84%{transform:rotate(-8deg);} 88%{transform:rotate(8deg);}}
.header-call-text{display:flex; flex-direction:column; line-height:1.15;}
.header-call-text small{font-size:10.5px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.78);}
.header-call-text strong{font-size:15px; font-weight:700; letter-spacing:.2px;}
.header-contact-item{display:flex; align-items:center; gap:7px; font-size:13.8px; font-weight:600; color:var(--ink); position:relative; transition:color .25s var(--ease);}
.header-contact-item svg{color:var(--green-700);}
.header-contact-item::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--amber); transition:width .3s var(--ease);}
.header-contact-item:hover::after{width:100%;}
.header-contact-item:hover{color:var(--green-800);}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:51px 0 58px;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media picture{display:block; width:100%; height:100%;}
.hero-bg-img{width:100%; height:100%; object-fit:cover;}
.hero-veil{position:absolute; inset:0; background:linear-gradient(100deg, rgba(247,251,254,.94) 0%, rgba(247,251,254,.80) 42%, rgba(247,251,254,.30) 72%, rgba(247,251,254,.10) 100%);}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px 24px;}
.hero-copy{grid-column:1; grid-row:1; max-width:660px;}
.hero-badge{grid-column:2; grid-row:1; align-self:start; animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.6px; font-size:12.5px;
  text-transform:uppercase; color:var(--green-800); background:rgba(255,255,255,.82);
  border:1px solid var(--line); padding:8px 16px; border-radius:999px; margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.eyebrow-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(224,166,58,.22);}
/* the jubilee line carries gold, not green — it's the milestone claim */
.eyebrow-gold{
  color:#8a6008; border-color:rgba(201,151,31,.5);
  background:linear-gradient(135deg,rgba(255,251,238,.95),rgba(250,238,206,.9));
}
.hero-title{
  font-size:clamp(40px,5.2vw,70px); color:var(--green-900); line-height:1.05; margin:0 0 14px;
  letter-spacing:-.025em; text-shadow:0 2px 24px rgba(247,251,254,.92);
}
.hero-title .dot{color:var(--amber);}
.hero-kicker{
  font-size:15.5px; color:#41533f; line-height:1.65; max-width:520px; margin:0 0 20px; font-weight:500;
}
.hero-rule{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.hero-rule span{width:52px; height:3px; border-radius:2px; background:var(--green-700);}
.hero-slogan{
  font-family:var(--font-display); font-size:clamp(24px,2.9vw,34px); font-weight:700; color:var(--green-800);
  line-height:1.25; margin-bottom:14px; letter-spacing:-.015em;
}
.hero-marathi{
  font-size:16.5px; font-weight:500; color:#33452f; max-width:470px; line-height:1.7; margin-bottom:30px;
  padding-left:16px; border-left:3px solid var(--amber);
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-ctas .btn{padding:16px 28px; font-size:15px;}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  margin:34px 0 0; padding:22px 0 0; border-top:1px solid rgba(23,56,34,.16); max-width:720px;
}
.hero-stats>div{padding:0 20px; border-left:1px solid rgba(23,56,34,.12);}
.hero-stats>div:first-child{padding-left:0; border-left:0;}
.hero-stats dt{font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--amber-dark); line-height:1; letter-spacing:-.02em;}
.hero-stats dd{margin:7px 0 0; font-size:12.5px; font-weight:500; color:var(--ink-soft); line-height:1.45;}

.hero-network{
  display:flex; align-items:flex-start; gap:10px; margin-top:18px; max-width:720px;
  padding:12px 16px; border-radius:14px;
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  font-size:13px; color:var(--ink-soft); line-height:1.55;
}
.hero-network svg{color:var(--green-700); flex-shrink:0; margin-top:1px;}
.hero-network strong{color:var(--green-900); font-weight:700;}
.hero-network a{color:var(--green-700); font-weight:700; border-bottom:1.5px solid var(--amber); transition:color .25s var(--ease);}
.hero-network a:hover{color:var(--amber-dark);}

/* ---------- achievement seal (45+ years, laurel both sides) ---------- */
/* The jubilee is the headline claim of the business, so the seal gets a warm
   halo to lift it off the photograph and pull the eye. */
.hero-badge{position:relative;}
.legacy-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:132%; height:126%; max-width:100%; border-radius:50%;
  pointer-events:none; z-index:0;
  background:radial-gradient(circle,
    rgba(255,199,77,.42) 0%, rgba(224,166,58,.26) 38%,
    rgba(224,166,58,.10) 60%, transparent 74%);
  animation:jubileePulse 9s ease-in-out infinite;
}
@keyframes jubileePulse{
  0%,100%{opacity:.75; transform:translate(-50%,-50%) scale(1);}
  50%    {opacity:1;   transform:translate(-50%,-50%) scale(1.06);}
}

.legacy-seal{
  --seal-gold:#c9971f;
  position:relative; z-index:1; width:392px; padding:42px 32px 24px; text-align:center;
  background:
    radial-gradient(130% 90% at 50% 0%, #ffffff 0%, #fdfcf7 45%, #f6f2e6 100%);
  border:1px solid #e7dcc0; border-radius:24px;
  box-shadow:0 28px 70px rgba(23,56,34,.20), 0 2px 0 rgba(255,255,255,.9) inset;
}
/* two hairline frames — the outer solid, the inner fine — like an award plate */
.legacy-seal::before{
  content:""; position:absolute; inset:9px; border-radius:17px;
  border:1px solid rgba(201,151,31,.45); pointer-events:none;
}
.legacy-seal::after{
  content:""; position:absolute; inset:13px; border-radius:13px;
  border:1px solid rgba(201,151,31,.18); pointer-events:none;
}
.legacy-crown{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; color:#fff; z-index:2;
  background:linear-gradient(145deg,#ffd873,#e0a63a 45%,#a9760a);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 14px rgba(169,118,10,.45), inset 0 -2px 4px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.5);
  border:2px solid #fffdf6;
}
/* "Golden Jubilee" ribbon — names the milestone in one recognisable phrase */
.legacy-ribbon{
  position:relative; display:inline-block; margin:0 auto 12px; padding:6px 20px;
  font-family:var(--font-body); font-size:10.5px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; color:#fffdf4;
  background:linear-gradient(135deg,#e0a63a 0%,#b8830f 52%,#d9a441 100%);
  border-radius:999px;
  box-shadow:0 4px 12px rgba(169,118,10,.34), inset 0 1px 0 rgba(255,255,255,.4);
}

/* commemorative emblem: metallic gold figure, engraved rules, script wordmark.
   Laid out on a grid so the vertical rhythm is exact rather than nudged. */
.legacy-emblem{
  position:relative; display:grid; justify-items:center;
  grid-template-rows:auto auto auto auto auto;
  row-gap:0;
}

/* the numeral: heavy high-contrast serif with a polished-gold bevel */
.legacy-num{position:relative; display:flex; align-items:flex-start; justify-content:center; line-height:1; overflow:hidden; padding-bottom:.06em;}
/* a highlight band sweeps across the metal every few seconds */
.legacy-shine{
  position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.72) 50%,transparent 100%);
  transform:skewX(-18deg);
  animation:jubileeShine 9s ease-in-out infinite;
}
@keyframes jubileeShine{
  0%,62%{left:-60%;}
  88%,100%{left:120%;}
}
/* Abril Fatface: a fat-face didone. Playfair's hairlines were dissolving into
   the pale plate at this size — this face keeps a solid gold mass, so the
   figure actually reads. */
.legacy-figure,.legacy-plus{
  font-family:'Abril Fatface','Playfair Display',var(--font-display),serif; font-weight:400;
  /* no near-white stops — they vanished against the card */
  background:linear-gradient(177deg,
    #f7de97 0%,  #e6c265 14%, #d3a533 27%, #b8860b 40%,
    #8f6708 49%,                                  /* bevel waist */
    #c1911b 56%, #eccd7e 65%, #f7e6ae 72%,
    #d9ab3c 84%, #a8790f 94%, #7d5606 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  /* a hairline dark edge plus a lift, so the gold never melts into the plate */
  filter:
    drop-shadow(0 0 1px rgba(125,86,6,.6))
    drop-shadow(0 1px 0 rgba(255,255,255,.85))
    drop-shadow(0 5px 8px rgba(120,84,12,.34));
}
/* line-height, not a fixed height — a clamped box clips the glyph descender */
.legacy-figure{font-size:150px; line-height:1; letter-spacing:-.015em;}
/* the plus rides at the numeral's shoulder, tight to the 0 */
.legacy-plus{font-size:46px; line-height:1; margin:.30em 0 0 6px; letter-spacing:0;}

.legacy-years{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px;
  font-family:'Cormorant Garamond',var(--font-display),serif; font-weight:700;
  font-size:29px; letter-spacing:11px; text-indent:11px; line-height:1; color:var(--green-900);
}
.legacy-of{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:11px;
  font-family:'Cormorant Garamond',var(--font-display),serif; font-weight:600;
  font-size:13.5px; letter-spacing:6px; text-indent:6px; line-height:1; color:var(--amber-dark);
}
/* engraved rules with a centre lozenge, as on a commemorative plaque */
.lg-rule{
  position:relative; height:1.5px; width:44px; flex-shrink:0;
  background:linear-gradient(90deg,transparent,var(--seal-gold) 42%,var(--seal-gold) 58%,transparent);
}
.lg-rule::after{
  content:""; position:absolute; top:50%; left:50%; width:4px; height:4px;
  background:var(--seal-gold); transform:translate(-50%,-50%) rotate(45deg);
}
.lg-rule-sm{width:26px;}
.lg-rule-sm::after{display:none;}

/* the script wordmark sits dark, like the mockup — the gold is the flourish */
.legacy-script{
  font-family:'Great Vibes',cursive; font-size:84px; line-height:1.06; margin-top:6px; padding:0 6px;
  color:var(--green-900); text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.legacy-swash{display:block; width:100%; max-width:280px; height:auto; margin:-16px auto 0;}
.legacy-awards{
  position:relative; margin-top:16px; padding-top:15px;
  border-top:1px solid rgba(201,151,31,.30);
}
.legacy-award{
  display:block; font-size:13px; font-weight:600; color:var(--green-800); margin-bottom:7px;
}
.legacy-award b{color:var(--amber-dark); font-size:15px;}
.legacy-since{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--ink-soft);
}

/* the seal scales down rather than reflowing */
@media (max-width:1280px){
  .legacy-seal{width:320px; padding:36px 26px 22px;}
  .legacy-figure{font-size:120px;}
  .legacy-plus{font-size:38px;}
  .legacy-script{font-size:68px;}
  .legacy-years{font-size:24px; letter-spacing:8px; text-indent:8px;}
  .legacy-swash{max-width:228px;}
  .lg-rule{width:36px;}
}
.hero-slogan-accent{color:var(--green-900);}

/* "Watch on YouTube" on video cards */
.video-yt{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:7px 13px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  color:#fff; background:#FF0000; box-shadow:0 4px 12px rgba(255,0,0,.24);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.video-yt:hover{background:#e00000; transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,0,0,.34);}

/* ---------- section basics ---------- */
.section{padding:62px 0;}
.section-kicker{
  text-align:center; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--amber-dark); margin-bottom:10px;
}
.section-kicker.light{color:var(--amber-bright);}
.section-title{
  text-align:center; font-size:clamp(26px,3.2vw,36px); color:var(--green-900); line-height:1.2; margin-bottom:12px;
}
.section-sub{text-align:center; font-size:14.5px; color:var(--ink-soft); max-width:620px; margin:0 auto 44px; line-height:1.65;}

/* ---------- awards ---------- */
.awards{background:var(--paper);}
/* The two award names carry a metallic gold so they read as honours rather
   than as bold body text. A flat amber goes muddy at this size against the
   pale panel, so it's a gradient with a dark waist — the same treatment as
   the jubilee numeral, at small scale. */
.awards .section-sub strong{
  font-weight:700;
  background:linear-gradient(180deg,#e5b849 0%,#c9861f 46%,#a8760f 62%,#d6a337 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#c9861f;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .awards .section-sub strong{color:#b8830f;}
}
.award-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px;}
.award-card{
  display:flex; align-items:center; gap:24px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#ffffff 0%,#f8fcff 55%,#eaf3fb 100%);
  border:1.5px solid #d9e7f3; border-radius:var(--radius-lg); padding:30px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.award-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--amber-bright),var(--amber-dark));
}
.award-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--amber);}
.award-icon{
  flex-shrink:0; width:118px; height:118px; display:flex; align-items:center; justify-content:center;
  border-radius:18px; background:radial-gradient(circle at 40% 32%, #ffffff 0%, #f1f7fc 68%, #e4eff8 100%);
  border:1px solid #d9e7f3; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.award-icon img{width:100%; height:100%; object-fit:contain;}
.award-card:hover .award-icon{transform:scale(1.04); box-shadow:inset 0 0 22px rgba(201,134,31,.16);}
.award-text{min-width:0;}
.award-tag{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--amber-dark); background:rgba(224,166,58,.14); border:1px solid rgba(201,134,31,.28);
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
.award-card h3{font-size:20px; color:var(--green-900); margin-bottom:4px; line-height:1.25;}
.award-mr{font-size:14px; font-weight:600; color:var(--green-700); margin-bottom:9px !important;}
.award-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px;}
.stars{color:var(--amber-dark); letter-spacing:3px; font-size:14px;}

/* ---------- categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;}
.cat-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-lg); padding:0; overflow:hidden;
  display:flex; flex-direction:column; text-align:center; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cat-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid transparent;
  background:linear-gradient(120deg,var(--green-700),var(--amber),var(--green-700)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.cat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.cat-card:hover::after{opacity:1;}
/* image sits flush against the card edges — zero inner spacing */
.cat-icon{
  width:100%; aspect-ratio:1/1; display:block; overflow:hidden; background:#f4f9fd;
  border-bottom:1px solid var(--line);
}
.cat-icon img{width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s var(--ease);}
/* tall shots where the machine sits low in frame — crop to the implement,
   not to the sky */
.cat-icon img.focus-low{object-position:center 68%;}
.cat-card:hover .cat-icon img{transform:scale(1.06);}
.cat-card span{font-family:var(--font-display); font-weight:700; font-size:17.5px; color:var(--green-900); padding:16px 14px 0;}
.cat-card small{font-size:13px; color:var(--ink-soft); padding:4px 14px 18px;}

/* CTA under the product categories */
.cat-cta{
  margin-top:34px; padding:26px 30px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg,#ffffff 0%,#f4f9fd 60%,#e9f2fa 100%);
  border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cat-cta-text{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
.cat-cta-text strong{display:block; font-family:var(--font-display); font-size:20px; color:var(--green-900); margin-bottom:4px;}
.cat-cta-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- products / carousel ---------- */
.products{background:var(--paper);}
.carousel-wrap{position:relative; display:flex; align-items:center; gap:14px;}
.carousel{overflow:hidden; flex:1; padding:6px 4px 10px;}
.track{display:flex; gap:26px; align-items:stretch; transition:transform .6s var(--ease); will-change:transform;}

.product-card{
  flex:0 0 calc((100% - 52px) / 3);
  display:flex; flex-direction:column;
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-lg);
  padding:0; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* animated border sweep on hover — no tilt, no rotation */
.product-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid transparent;
  background:linear-gradient(120deg,var(--green-700),var(--amber),var(--green-700)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent;}
.product-card:hover::after{opacity:1;}

/* image is flush to the card edges — no padding, no inner border */
.product-img{
  width:100%; aspect-ratio:1/1; display:block; overflow:hidden;
  background:#f4f9fd; border-bottom:1px solid var(--line);
}
.product-img img{
  width:100%; height:100%; object-fit:contain; object-position:center;  /* nothing gets cropped */
  transition:transform .5s var(--ease);
}
.product-card:hover .product-img img{transform:scale(1.05);}

.product-body{display:flex; flex-direction:column; flex:1; padding:18px 20px 20px;}
.product-card h3{font-size:18px; color:var(--green-900); line-height:1.3; min-height:47px;}
.product-card small{font-size:12.5px; color:var(--ink-soft); display:block; margin:5px 0 0;}
.product-foot{
  margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px dashed #dbe7f1;
}
.price{font-family:var(--font-display); font-weight:700; color:var(--green-800); font-size:19px;}
.price span{font-family:var(--font-body); font-size:11.5px; font-weight:500; color:var(--ink-soft);}
/* no invented figures — machines without a confirmed price say so */
.price-ask{font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.product-cta{
  font-size:13px; font-weight:600; color:var(--green-800); border:1.5px solid var(--green-800);
  padding:8px 15px; border-radius:999px; transition:background .25s var(--ease), color .25s var(--ease);
}
.product-cta:hover{background:var(--green-800); color:#fff;}

.car-arrow{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; border:1.5px solid #c8dcec; background:#fff;
  color:var(--green-800); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.car-arrow:hover{background:var(--green-800); color:#fff; transform:scale(1.06); box-shadow:var(--shadow-md);}
.car-dots{display:flex; justify-content:center; align-items:center; gap:2px; margin-top:26px;}
/* the visible dot stays 8px; the button itself is a 24px touch target */
.car-dots button{
  width:30px; height:30px; border:none; background:transparent; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.car-dots button::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#c3d8ea;
  transition:width .3s var(--ease), background .3s var(--ease), border-radius .3s var(--ease);
}
.car-dots button.active::before{background:var(--green-800); width:22px; border-radius:5px;}

.products-more{
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px; text-align:center;
}
.products-more-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.products-more-note{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.products-more-note strong{color:var(--green-800); font-weight:700;}

/* ---------- videos (wide, tight side spacing) ---------- */
.videos{background:var(--cream); padding:62px 0;}
.videos-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px;}
.videos-head .section-kicker,
.videos-title,
.videos-sub{text-align:left; margin-left:0; margin-right:0;}
.videos-sub{margin-bottom:0; max-width:640px;}
.videos-all{flex-shrink:0;}

.video-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.video-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.video-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--green-600);}

.video-thumb{
  position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; cursor:pointer;
  background:#0d1a12; overflow:hidden;
}
.video-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease), filter .35s var(--ease);}
.video-card:hover .video-thumb img{transform:scale(1.06); filter:brightness(.9);}
.video-thumb .play{
  position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  background:rgba(214,32,32,.94); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.video-thumb .play svg{margin-left:3px;}
.video-card:hover .play{transform:scale(1.12); background:#ff0033;}
.video-thumb .dur{
  position:absolute; right:9px; bottom:9px; background:rgba(0,0,0,.82); color:#fff;
  font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:5px; letter-spacing:.3px;
}
.video-thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.video-meta{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.video-meta h3{font-size:16px; color:var(--green-900); line-height:1.35;}
.video-meta small{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
/* views + "Watch on YouTube" share one row */
.video-foot{margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.video-meta .views{font-size:12px; font-weight:600; color:var(--amber-dark); margin:0;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(115deg,var(--green-800) 0%,var(--green-900) 60%,#0f2c1a 100%);
  color:#fff; padding:42px 0; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(224,166,58,.22) 0%,transparent 68%);
}
.cta-band-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-copy h2{font-size:clamp(24px,2.8vw,32px); color:#fff; margin-bottom:8px; line-height:1.25;}
.cta-copy p{font-size:14.5px; color:#bfd3c4; max-width:520px; line-height:1.6;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- why jalamkar ---------- */
.feature-band{background:var(--green-900); color:#fff; padding:62px 0;}
.feature-band-inner{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:center;}
.feature-band .section-kicker{text-align:left;}
.feature-heading{font-size:clamp(24px,2.6vw,32px); color:#fff; margin-bottom:34px; max-width:560px; line-height:1.25;}
.feature-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 26px;}
.feature-item{text-align:left;}
.feature-icon{
  width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.08); color:var(--amber-bright);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.12);
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.feature-item:hover .feature-icon{transform:translateY(-3px); background:var(--amber); color:var(--green-900);}
.feature-item h3{font-size:16.5px; margin-bottom:7px; color:#fff;}
.feature-item p{font-size:13px; color:#bccfc0; line-height:1.6;}
.feature-photo{margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12);}
.feature-photo img{width:100%; height:100%; object-fit:cover; min-height:420px;}

/* ---------- newsletter ---------- */
.newsletter{background:#fff; padding:44px 0 18px;}
.newsletter-inner{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:28px 32px;
}
.nl-left{display:flex; align-items:center; gap:16px;}
.nl-icon{width:48px; height:48px; border-radius:14px; background:var(--green-700); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.nl-left h2{font-size:20px; color:var(--green-900); margin-bottom:5px;}
.nl-left p{font-size:13.5px; color:var(--ink-soft);}
.nl-form{display:flex; gap:10px; flex:1; max-width:440px;}
.nl-form input{
  flex:1; padding:14px 18px; border-radius:999px; border:1.5px solid #c8dcec; font-family:inherit; font-size:14px; background:#fff;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nl-form input:focus{outline:none; border-color:var(--green-700); box-shadow:0 0 0 4px rgba(46,125,70,.14);}
.nl-form button{
  padding:14px 24px; border-radius:999px; background:var(--green-800); color:#fff; border:none; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nl-form button:hover{background:var(--green-700); transform:translateY(-2px);}
.nl-privacy{text-align:center; font-size:12px; color:var(--ink-soft); margin-top:16px;}

/* ---------- contact ---------- */
/* two columns now that hours live inside the contact card — the map takes the
   space the third card used to occupy */
.contact-grid{display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,2fr); gap:24px; align-items:stretch;}
.contact-info{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column;}
.contact-info h3{font-size:18px; color:var(--green-900); margin-bottom:16px;}
.contact-info p{display:flex; align-items:flex-start; gap:10px; overflow-wrap:anywhere; font-size:13.8px; color:var(--ink-soft); margin-bottom:15px; line-height:1.6;}
.contact-info a{transition:color .25s var(--ease);}
.contact-info a:hover{color:var(--green-800);}
.contact-info svg{flex-shrink:0; margin-top:3px; color:var(--green-700);}
/* company name sits on its own line above the street address */
.addr-name{display:block; color:var(--green-900); font-weight:700; margin-bottom:2px;}
.gst-row .gst-no{color:var(--green-900); font-weight:700; letter-spacing:.4px;}
/* working hours, folded into the contact card */
.contact-hours-inline{margin-top:6px; padding-top:18px; border-top:1px dashed var(--line);}
.contact-hours-inline h4{
  display:flex; align-items:center; gap:8px; font-family:var(--font-body);
  font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--amber-dark); margin-bottom:12px;
}
.hours-list{margin:0;}
.hours-list>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:7px 0; border-bottom:1px solid #eef4f9;
}
.hours-list>div:last-child{border-bottom:0;}
.hours-list dt{font-size:13.5px; color:var(--ink-soft);}
.hours-list dd{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;}
.hours-list dd.closed{color:#b3492f;}
.contact-wa{margin-top:20px; align-self:flex-start;}
.contact-map{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1.5px solid var(--line); min-height:510px; background:#e9e9e3;}
.contact-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(1.05);}
.map-card{
  position:absolute; right:16px; bottom:16px; background:#fff; border-radius:14px; padding:16px; width:222px;
  box-shadow:var(--shadow-md); font-size:12px; line-height:1.55; border:1px solid var(--line);
}
.map-card strong{display:block; margin-bottom:12px; font-weight:500; color:var(--ink);}

/* ---------- footer ----------
   Desktop: dark green, compact brand column beside the link columns.
   Mobile:  light "dark white", stacked with a full-width logo. */
.site-footer{background:var(--green-900); color:#ffffff; padding:42px 0 0;}

.footer-main{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,2.5fr); gap:48px; align-items:start;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-top{text-align:left;}
.footer-logo{
  display:block; width:100%; max-width:250px; height:auto; margin:0 0 16px;
  background:#fff; padding:12px 18px; border-radius:14px; object-fit:contain;
}
.footer-blurb{font-size:13.2px; line-height:1.7; color:#ffffff; max-width:360px; margin:0;}
.footer-blurb strong{color:#ffffff; font-weight:700;}

.footer-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:0;}
.footer-col h3{font-family:var(--font-body); font-size:12px; letter-spacing:1.4px; color:var(--amber-bright); text-transform:uppercase; margin-bottom:16px; font-weight:700;}
.footer-col a{display:block; overflow-wrap:anywhere; font-size:13.5px; margin-bottom:11px; color:#ffffff; transition:color .25s var(--ease), transform .25s var(--ease); width:fit-content;}
.footer-col a:hover{color:var(--amber-bright); transform:translateX(4px);}
/* Marathi runs alongside the English on mobile, where there's room to spare */
.mr,.mr-h,.footer-blurb-mr{display:none;}

.social-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; max-width:100%;}
/* NOTE: `.footer-col a` (0-1-1) outranks `.social-btn` (0-1-0), so these
   need the extra class to win on width/margin. */
.social-row .social-btn{
  flex:0 0 44px; width:44px; height:44px; min-width:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin:0; padding:0;
  color:#fff; border:0;
  transition:filter .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-row .social-btn:hover{transform:translateY(-3px); filter:brightness(1.08);}
.social-row .social-btn svg{width:21px; height:21px; flex-shrink:0;}
/* real brand colours, not just on hover */
.social-btn.fb{background:#1877F2; box-shadow:0 5px 14px rgba(24,119,242,.30);}
.social-btn.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); box-shadow:0 5px 14px rgba(214,36,159,.30);}
.social-btn.yt{background:#FF0000; box-shadow:0 5px 14px rgba(255,0,0,.28);}
.social-btn.wa{background:#25D366; box-shadow:0 5px 14px rgba(37,211,102,.32);}
.social-btn.fb:hover{box-shadow:0 9px 22px rgba(24,119,242,.42);}
.social-btn.ig:hover{box-shadow:0 9px 22px rgba(214,36,159,.42);}
.social-btn.yt:hover{box-shadow:0 9px 22px rgba(255,0,0,.40);}
.social-btn.wa:hover{box-shadow:0 9px 22px rgba(37,211,102,.44);}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 30px; font-size:12.5px; color:#ffffff; max-width:1560px; margin:0 auto;
}
/* the fixed WhatsApp bubble sits bottom-right — reserve room so it never
   covers the credit line */
.site-footer{padding-bottom:6px;}
.footer-bottom{padding-right:114px;}
.footer-credit{color:#ffffff; font-weight:500;}
.footer-credit a{
  color:#ffffff; font-weight:700; letter-spacing:.3px; padding-bottom:1px;
  border-bottom:1.5px solid var(--amber-bright); transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer-credit a:hover{color:var(--amber-bright);}

/* ---------- sticky whatsapp ---------- */
.wp-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:width .35s var(--ease), border-radius .35s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  overflow:hidden;
}
.wp-ping{position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.6; animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.9); opacity:0;}}
.wp-label{display:none; white-space:nowrap; color:#fff; font-weight:600; font-size:13.5px; margin-left:8px; position:relative;}
.wp-float:hover{width:176px; border-radius:32px; transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,211,102,.55);}
.wp-float:hover .wp-label{display:inline;}
.wp-float svg{position:relative; flex-shrink:0;}

/* ---------- touch targets ----------
   Width is the wrong signal here: an iPad at 820px is still a finger. These
   rules key off the pointer type, so tablets get the same generous hit areas
   as phones without changing how anything looks. */
@media (pointer:coarse){
  .footer-col a{padding:7px 0; margin-bottom:5px;}
  .contact-info p a{display:inline-block; padding:5px 0;}
  .hero-network a,
  .footer-credit a{display:inline-block; padding:7px 0;}
  .car-dots{gap:0;}
  .car-dots button{width:34px; height:34px;}
  .product-cta{padding:10px 16px;}
  .video-yt{padding:9px 14px;}
}

/* ---------- mobile action bar ---------- */
.mobile-bar{display:none;}
@media (max-width:680px){
  .mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(250,253,255,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px;
    box-shadow:0 -6px 22px rgba(23,56,34,.12);
  }
  .mobile-bar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 10px; border-radius:14px; font-size:14.5px; font-weight:700;
  }
  .mobile-bar-call{background:var(--green-800); color:#fff;}
  .mobile-bar-wa{background:#25D366; color:#fff;}
  .wp-float{bottom:88px; right:16px;}
  body{padding-bottom:74px;}
}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1100px){
  .header-nav{display:none;}
  .feature-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feature-band-inner{grid-template-columns:minmax(0,1fr) 280px;}
}
@media (max-width:980px){
  :root{--header-h:84px;}
  .hero-inner{grid-template-columns:minmax(0,1fr);}
  .hero-badge{grid-row:1; grid-column:1; justify-self:end;}
  .award-grid{grid-template-columns:minmax(0,1fr);}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-card{flex-basis:calc((100% - 26px) / 2);}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .videos-head{flex-direction:column; align-items:flex-start;}
  .feature-band-inner{grid-template-columns:minmax(0,1fr);}
  .feature-photo{display:none;}
  .contact-grid{grid-template-columns:minmax(0,1fr);}
  .contact-map{min-height:380px;}
  .header-contact{display:none;}   /* the call CTA carries contact from here down */
}
@media (max-width:680px){
  .section{padding:45px 0;}
  .videos{padding:45px 0;}
  .wrap-wide{padding:0 28px;}
  .topbar{font-size:11.5px;}
  .mq-sep{margin:0 12px;}
  .marquee::before,.marquee::after{width:32px;}

  .header-inner{gap:12px;}
  .brand-mark{height:38px;}
  .header-call{padding:6px 14px 6px 6px; gap:8px;}
  .header-call-icon{width:32px; height:32px;}
  .header-call-text small{display:none;}
  .header-call-text strong{font-size:13.5px;}



  /* carousel: arrows overlay the slide so the card keeps full width */
  .carousel-wrap{gap:0; position:relative;}
  .carousel{padding:4px 0 8px;}
  .product-card{flex-basis:100%;}
  .car-arrow{
    position:absolute; top:38%; z-index:5; width:40px; height:40px;
    background:rgba(255,255,255,.94); box-shadow:var(--shadow-md); border-color:transparent;
  }
  .car-prev{left:6px;}
  .car-next{right:6px;}
  .product-body{padding:16px 18px 18px;}
  .product-card h3{font-size:17px; min-height:0;}
  .product-foot{flex-wrap:wrap; row-gap:10px;}

  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cat-card span{font-size:15.5px; padding-top:13px;}
  .cat-card small{font-size:12px; padding-bottom:15px;}
  .cta-band-inner{flex-direction:column; align-items:flex-start;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1; min-width:150px;}
  .award-card{flex-direction:column; text-align:center; gap:16px;}
  .award-icon{width:100px; height:100px;}
  .award-card .stars{display:block;}
  .video-grid{grid-template-columns:minmax(0,1fr);}
  /* Why Jalamkar: centred stack on mobile */
  .feature-band{padding:45px 0;}
  .feature-band .section-kicker{text-align:center;}
  .feature-heading{text-align:center; max-width:none; margin-bottom:30px;}
  .feature-list{grid-template-columns:minmax(0,1fr); gap:30px;}
  .feature-item{text-align:center; display:flex; flex-direction:column; align-items:center;}
  .feature-icon{margin:0 auto 12px;}
  .feature-item p{max-width:340px;}

  .newsletter-inner{flex-direction:column; align-items:stretch;}
  .nl-form{max-width:none;}
  /* mobile footer: light "dark white", stacked, full-width logo */
  .site-footer{
    background:linear-gradient(180deg,#eef2f6 0%,#e7edf2 100%);
    color:#4a5a4e; border-top:1px solid #dde5ec; padding-top:40px;
  }
  .footer-main{display:block; padding-bottom:0; border-bottom:0;}
  .footer-top{text-align:center; padding-bottom:22px; border-bottom:1px solid #dbe4ec;}
  .footer-logo{width:100%; max-width:none; margin:0 auto 14px; background:transparent; padding:0;}
  .footer-blurb{color:#54655a; max-width:none; text-align:center; font-size:13.5px;}
  .footer-blurb strong{color:var(--green-900);}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; padding:24px 0 26px; border-bottom:1px solid #dbe4ec;}
  .footer-col h3{color:var(--green-800); line-height:1.35; margin-bottom:12px;}
  .footer-col a{color:#54655a; margin-bottom:2px; line-height:1.4;}
  .footer-col a:hover{color:var(--green-700);}
  /* bilingual footer — Marathi under each English label */
  /* Marathi rides inline beside the English, not on its own line — stacking
     them doubled the footer's height and added a screenful of scrolling. */
  .mr{display:inline; font-size:11.5px; font-weight:500; color:#7c8b81;}
  .mr::before{content:"· "; color:#a9b6ad;}
  .mr-h{display:inline; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:none; color:var(--amber-dark);}
  .mr-h::before{content:"· "; opacity:.6;}
  /* the blurb is a full sentence, so it stays a paragraph of its own */
  .footer-blurb-mr{display:block; margin-top:8px; font-size:12.5px; line-height:1.65; color:#5d6e63;}
  .social-row{justify-content:flex-start;}
  .footer-bottom{color:#6b7a70; justify-content:center; text-align:center;}
  .footer-credit{color:var(--green-900);}
  .footer-credit a{color:var(--green-800); border-bottom-color:var(--amber);}

  .hero-badge{display:none;}
  .hero-stats{gap:22px;}
  .hero-stats dt{color:var(--amber-dark);}

  /* portrait mobile-banner.png needs a top-down veil, not a left-right one */
  .hero{padding:34px 0 40px; min-height:82vh; display:flex; align-items:center;}
  @supports (height:1svh){
    .hero{min-height:82svh;}   /* stable while the URL bar collapses */
  }
  .hero-bg-img{object-position:center 26%;}
  /* Heavy only behind the headline; the lower half stays clear so the banner
     photograph is actually visible. The stats sit on their own frosted panel,
     so they stay legible without the veil doing the work. */
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(247,251,254,.94) 0%,
      rgba(247,251,254,.86) 28%,
      rgba(247,251,254,.60) 48%,
      rgba(247,251,254,.30) 66%,
      rgba(247,251,254,.22) 100%);
  }
  /* frosted panel so the stats stay readable over the crop rows */
  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 10px; margin-top:26px; padding:18px 12px; text-align:center;
    background:rgba(255,255,255,.86); border:1px solid rgba(219,231,241,.95);
    border-radius:16px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(23,56,34,.10);
  }
  .hero-stats>div{padding:0 8px; border-left:1px solid rgba(23,56,34,.12);}
  .hero-stats>div:nth-child(odd){padding-left:8px; border-left:0;}
  .hero-stats dt{font-size:31px;}
  .hero-stats dd{font-size:12px; margin-left:auto; margin-right:auto;}
  .hero-network{
    background:rgba(255,255,255,.88); text-align:center; justify-content:center;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .hero-stats dd{color:#3f5142;}
  .hero-ctas .btn{flex:1 1 auto; min-width:150px;}
  .footer-bottom{justify-content:center; text-align:center;}
}
@media (max-width:400px){
  /* let button labels wrap rather than run off the page */
  .btn{white-space:normal; text-align:center;}
  .cat-cta-actions,.products-more-actions,.cta-actions{width:100%;}
  .cat-cta-actions .btn,.products-more-actions .btn,.cta-actions .btn{width:100%;}
  .social-row{gap:10px;}
  /* below ~380px the number no longer fits beside the logo — icon only */
  .header-call{padding:6px; gap:0;}
  .header-call-text{display:none;}
  .header-call-icon{width:34px; height:34px;}
  .brand-mark{height:34px;}
  .hero-stats{grid-template-columns:minmax(0,1fr);}
  .hero-stats>div{padding:0; border-left:0;}
  .mobile-bar a{font-size:13.5px; padding:13px 8px;}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:minmax(0,1fr);}
}