/* Home hero, ZIRKA-style layout + scroll chapters (computers only). Same 5 slides and copy, light colours.
   Left column: big grey number top-left, headline + mono line bottom-left. Thin divider with a teal progress mark.
   Right: framed photo panel with a mono caption, crosshair grid and a date / live Rajkot time row. */
.hero.zh-on{height:calc(var(--zn,5) * 85svh);overflow:visible;border-bottom:0;
  --L:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));--col:calc(var(--inner) * .34)}
.hero.zh-on .zh-pin{position:sticky;top:4.5rem;height:calc(100svh - 4.5rem);overflow:hidden;border-bottom:1px solid var(--line)}
.hero.zh-on .slides{height:calc(100svh - 4.5rem)}

/* big grey number, top-left, rolls up on each change */
.hero.zh-on .slide-num{inset-inline-end:auto;left:var(--L);top:1.75rem;font-size:clamp(7rem,13vw,12.5rem);color:#E3E6E6;-webkit-text-stroke:0;transform:translateY(35%);opacity:0;transition:transform .9s var(--ease),opacity .6s}
.hero.zh-on .slide.is-active .slide-num{transform:none;opacity:1}

/* text block, bottom-left of the left column */
.hero.zh-on .slide .wrap{padding-block:2rem 6.75rem}
.hero.zh-on .slide-copy{max-width:calc(var(--col) - 2.5rem)}
.hero.zh-on .slide-copy .eyebrow{font-size:1.05rem;margin-bottom:.9rem}
.hero.zh-on .slide-copy h1,.hero.zh-on .slide-copy h2{font-size:clamp(2rem,3.1vw,3.1rem);line-height:1.05;margin-bottom:1rem}
.hero.zh-on .slide-copy p:not(.eyebrow){font:600 .78rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:1.5rem;max-width:26rem}
.hero.zh-on .slide-copy .btn{min-height:2.8rem;padding:.6rem 1.15rem;font-size:.95rem}

/* framed photo panel, right of the divider */
.hero.zh-on .slide-media{top:1.5rem;bottom:5.5rem;left:calc(var(--L) + var(--col) + 1.75rem);inset-inline-end:var(--L);width:auto;background:#fff;border:1px solid var(--line);
  clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
.hero.zh-on .slide.is-active .slide-media{clip-path:inset(0 0 0 0)}
.hero.zh-on .slide-media picture{padding:4.5rem 3rem 3.5rem}
.hero.zh-on .slide-media img{transform:scale(1.06);transition:transform 1.4s var(--ease)}
.hero.zh-on .slide.is-active .slide-media img{transform:scale(1)}

/* divider between the columns, with a teal mark that travels down with scroll */
.zh-div{position:absolute;z-index:4;top:1.5rem;bottom:4.5rem;left:calc(var(--L) + var(--col));width:1px;background:var(--line)}
.zh-div i{position:absolute;left:-1px;width:3px;height:18%;top:calc(var(--zp,0) * 82%);background:var(--accent)}

/* HUD inside the photo panel */
.zh-hud{display:none}
.hero.zh-on .zh-hud{display:block;position:absolute;inset:0;pointer-events:none;z-index:3;font:600 .74rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text)}
.zh-hud .cap{position:absolute;left:1.25rem;top:1rem;white-space:pre}
.zh-hud .marks{position:absolute;right:12%;bottom:22%;display:grid;grid-template-columns:repeat(5,1.6rem);gap:1rem 1.1rem;opacity:0;transition:opacity .6s .5s}
.zh-hud .marks b:nth-child(n+6){transform:translateX(1.35rem)}
.hero.zh-on .slide.is-active .zh-hud .marks{opacity:.9}
.zh-hud .marks b{position:relative;width:1.6rem;height:1.6rem}
.zh-hud .marks b::before,.zh-hud .marks b::after{content:"";position:absolute;background:var(--accent)}
.zh-hud .marks b::before{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
.zh-hud .marks b::after{top:50%;left:0;right:0;height:2px;margin-top:-1px}
.zh-hud .foot{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:clamp(1.5rem,4vw,4rem);font:600 .95rem var(--display);letter-spacing:.02em;color:var(--ink)}

/* mouse coordinates, bottom corners above the bar */
.zh-xy{position:absolute;z-index:4;left:var(--L);right:var(--L);bottom:4.75rem;display:flex;justify-content:space-between;font:600 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);pointer-events:none}
.zh-xy b{font-weight:600;color:var(--ink)}

/* the bottom bar fills with scroll instead of a timer */
.hero.zh-on .dots button::after{animation:none!important;width:calc(var(--fill,0) * 100%)}
/* 2026-10-06: keep only the top-left caption; every photo centred in its panel */
.hero.zh-on .slide-media picture{padding:3.5rem;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box}
.hero.zh-on .slide-media img{margin:auto;object-fit:contain;object-position:center}
/* 2026-10-06: text sits right under the big number as one column; the teal bar fills from the bottom up */
.hero.zh-on{--numh:clamp(7rem,13vw,12.5rem)}
.hero.zh-on .slide .wrap{align-items:start;padding-block:calc(1.75rem + var(--numh) * .8 + 2.25rem) 6rem}
.hero.zh-on .slide-copy .eyebrow{margin-bottom:.75rem}
.hero.zh-on .slide-copy h1,.hero.zh-on .slide-copy h2{margin-bottom:.9rem}
.hero.zh-on .slide-copy p:not(.eyebrow){margin-bottom:1.4rem}
.zh-div i{top:auto;bottom:0;height:calc(var(--zp,0) * 100%);min-height:6%;transition:height .15s linear}
/* 2026-10-06: no counter / progress lines / arrows under the hero on computers (scroll does the job).
   The bar stays in the page as a 1px invisible line so the WhatsApp button still knows when the hero has passed. */
.hero.zh-on .hero-bar .wrap{height:1px;overflow:hidden;opacity:0;border:0;pointer-events:none}
.hero.zh-on .slide-media{bottom:1.5rem}
.hero.zh-on .slide .wrap{padding-bottom:2rem}
.zh-div{bottom:1.5rem}

/* ---------- 2026-10-06 performance + compatibility ----------
   Photos change with opacity + a small move (graphics-chip friendly) instead of clip-path, no big image scaling,
   the teal bar grows with transform only, and vh fallbacks for browsers without svh (older Safari / Chrome). */
.hero.zh-on{height:calc(var(--zn,5) * 80vh);height:calc(var(--zn,5) * 80svh)}
.hero.zh-on .zh-pin{height:calc(100vh - 4.5rem);height:calc(100svh - 4.5rem)}
.hero.zh-on .slides{height:calc(100vh - 4.5rem);height:calc(100svh - 4.5rem)}
.hero.zh-on .slide-media{clip-path:none!important;opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hero.zh-on .slide.is-active .slide-media{opacity:1;transform:none}
.hero.zh-on .slide-media img,.hero.zh-on .slide.is-active .slide-media img{transform:none!important;transition:none!important}
.hero.zh-on .slide{transition:opacity .6s var(--ease),visibility 0s linear .6s}
.hero.zh-on .slide.is-active{transition:opacity .6s var(--ease),visibility 0s}
.zh-div i{top:auto;bottom:0;height:100%;min-height:0;transform-origin:bottom;transform:scaleY(.04);transition:none;will-change:transform}
.hero.zh-on .slide-num{will-change:transform,opacity}

/* Home "Our story" sneak peek: exactly one screen on desktop (2026-10-08). The A scales with the screen height. */
@media (min-width:60rem){
  .sec-story{min-height:calc(100vh - 4.5rem);min-height:calc(100svh - 4.5rem);display:flex;align-items:center;padding-block:clamp(1.5rem,4svh,3rem)}
  .sec-story .wrap{width:100%}
  .sec-story .mark{max-width:min(26rem,52svh)}
  .sec-story .mark figcaption{margin-top:1rem}
  .sec-story .story-peek{font-size:clamp(2.6rem,min(6vw,9.5svh),5rem)}
}

/* Home scroll button: same look as the Manufacturing one; fixed at the bottom, shown only to visitors who have not scrolled */
.home-cue{position:fixed;left:50%;bottom:1.25rem;z-index:40;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem 1rem .7rem;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);text-decoration:none;font:700 .75rem var(--display);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.home-cue.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.home-cue .cue-mouse{position:relative;width:1.5rem;height:2.4rem;border:2px solid var(--accent);border-radius:1rem;transition:background .2s}
.home-cue .cue-mouse i{position:absolute;left:50%;top:.42rem;width:4px;height:.5rem;margin-left:-2px;border-radius:2px;background:var(--accent);animation:homecue 1.6s var(--ease) infinite}
.home-cue:hover .cue-mouse{background:var(--accent)}
.home-cue:hover .cue-mouse i{background:#fff}
@keyframes homecue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(.75rem);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.home-cue .cue-mouse i{animation:none}}

/* No flash of the plain slider while the page loads on computers (index.html adds .zh-wait; hero-scroll.js removes it) */
html.zh-wait .hero{opacity:0}
.hero{transition:opacity .35s var(--ease)}

/* ---------- 2026-10-09 phones and tablets: same new look as computers (old plain slider removed) ----------
   Framed photo panel with the mono caption on top, solid grey number, headline, mono line, buttons.
   Still a swipe slider with the progress bar under it (no pinned scrolling on touch screens). */
@media (max-width:56rem){
  .hero .slides{height:auto;min-height:calc(100svh - 4.5rem);display:grid}
  .hero .slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;padding:1rem var(--gutter) 5.25rem}
  .hero .slide-media{position:relative;inset:auto;width:auto;height:min(46svh,24rem);flex:none;background:#fff;border:1px solid var(--line);overflow:hidden}
  .hero .slide-media picture{padding:2.75rem 1.25rem 1.25rem;box-sizing:border-box}
  .hero .slide-media img{object-fit:contain}
  .hero .zh-hud{display:block;position:absolute;inset:0;pointer-events:none;z-index:3;font:600 .62rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text)}
  .hero .zh-hud .cap{left:.85rem;top:.7rem}
  .hero .slide-num{position:relative;inset:auto;order:2;display:block;margin:1.1rem 0 -.2rem;font-size:clamp(4.5rem,22vw,6.5rem);line-height:.8;color:#E3E6E6;-webkit-text-stroke:0}
  .hero .slide .wrap{order:3;display:block;height:auto;padding:0;margin:0;max-width:none;width:auto}
  .hero .slide-copy{max-width:36rem}
  .hero .slide-copy .eyebrow{font-size:1rem;margin-bottom:.6rem}
  .hero .slide-copy h1,.hero .slide-copy h2{font-size:clamp(1.9rem,7.6vw,2.8rem);line-height:1.05;margin-bottom:.8rem}
  .hero .slide-copy p:not(.eyebrow){font:600 .74rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:1.25rem}
  .hero .slide-copy .btns{gap:.6rem}
  .hero .slide-copy .btn{min-height:2.8rem;padding:.6rem 1.05rem;font-size:.95rem}
  .hero .hero-bar .counter{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
}

/* ---------- 2026-10-09 phones and tablets: the computer version, adapted to a narrow screen ----------
   Pinned under the header; scrolling moves through the 5 slides. No counter / dots bar (that was the old slider).
   Framed photo with the mono caption on top, the big grey number rolls in, headline + mono line + buttons under it.
   The thin divider with the teal mark becomes a line across the bottom that fills left to right as you scroll. */
@media (max-width:56rem){
  .hero.zh-on{height:calc(var(--zn,5) * 75vh);height:calc(var(--zn,5) * 75svh)}
  .hero.zh-on .zh-pin{top:4.5rem;height:calc(100vh - 4.5rem);height:calc(100svh - 4.5rem)}
  .hero.zh-on .slides{height:100%;min-height:0;display:block}
  .hero.zh-on .slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:.85rem var(--gutter) 2.25rem}
  .hero.zh-on .slide-media{position:relative;inset:auto;top:auto;bottom:auto;left:auto;width:auto;flex:1 1 auto;min-height:9rem;height:auto;max-height:none}
  .hero.zh-on .slide-media picture{padding:2.6rem 1rem 1rem}
  .hero.zh-on .slide-num{position:relative;left:auto;top:auto;inset:auto;flex:none;margin:.9rem 0 -.1rem;font-size:clamp(3.75rem,18vw,6rem);transform:translateY(35%)}
  .hero.zh-on .slide.is-active .slide-num{transform:none}
  .hero.zh-on .slide .wrap{flex:none;padding:0}
  .hero.zh-on .slide-copy{max-width:36rem}
  .hero.zh-on .slide-copy .eyebrow{font-size:.95rem;margin-bottom:.5rem}
  .hero.zh-on .slide-copy h1,.hero.zh-on .slide-copy h2{font-size:clamp(1.7rem,7vw,2.6rem);margin-bottom:.6rem}
  .hero.zh-on .slide-copy p:not(.eyebrow){font-size:.7rem;margin-bottom:1rem}
  /* scroll progress: line across the bottom, teal fill grows with scroll (computers: vertical divider) */
  .hero.zh-on .zh-div{top:auto;bottom:1rem;left:var(--gutter);right:var(--gutter);width:auto;height:1px}
  .hero.zh-on .zh-div i{top:-1px;bottom:auto;left:0;width:100%;height:3px;transform-origin:left center;transform:scaleX(.04)}
  [dir="rtl"] .hero.zh-on .zh-div i{transform-origin:right center}
}

/* 2026-10-09: the topic line (e.g. "Cylinder liners \00B7 Since 1971") is shown once, in the photo caption; hidden next to the headline */
.hero.zh-on .slide-copy .eyebrow{display:none}
/* 2026-10-09: the line under the headline (e.g. "Controlled Motion. Precision Fit. Built to Last.") bigger and darker */
.hero.zh-on .slide-copy p:not(.eyebrow){font-size:clamp(.95rem,1.05vw,1.1rem);font-weight:700;line-height:1.5;letter-spacing:.03em;color:var(--ink);max-width:30rem}
@media (max-width:56rem){.hero.zh-on .slide-copy p:not(.eyebrow){font-size:.85rem}}