/* ═══════════════════════════════════════════════════════════════════════════
   THE SHOWROOM — agri.keelambi.com homepage only        (namespace: sh- / hf-)
   Loaded ONLY by /index.html, so showroom.css stays shared-safe.

   THE SYSTEM, in one paragraph:
   Warm stone is the ground and white is the object plane — that contrast is what
   makes the page read as a showroom rather than a document. Dark is used TWICE
   and only where the product is the subject: the arrival film and the close.
   Keelambi maroon is the structural accent (eyebrows, rules, links); saffron is
   ACTION ONLY and at most one filled button is visible at a time; navy carries
   specifications. Bebas is reserved for the hero lockup and the closing line —
   every section heading is DM Sans in sentence case, which is also the only way
   Kannada and English can look like one design, since Bebas has no Kannada
   glyphs and Kannada is the default language here.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --sh-stone:#F6F3EE;         /* the page */
  --sh-stone-2:#EFEAE2;       /* banding without going dark */
  --sh-surface:#FFFFFF;       /* every object */
  --sh-ink:#1A1A1C;
  --sh-ink-2:#6A665F;         /* warm-biased neutral, toward the ground */
  --sh-ink-3:#9B958C;
  --sh-line:rgba(26,26,28,.12);
  --sh-line-soft:rgba(26,26,28,.07);
  --sh-maroon:#781216;        /* brand signature — structure, not decoration */
  --sh-dark:#141416;          /* the one dark. charcoal, NOT green-black */
  --sh-r:16px;
  --hf-night:#0A1410;         /* retained: legacy dark used by the hero scrim */
}

/* HEIGHT:AUTO IS LOAD-BEARING. Every <img> below carries width/height attributes
   (for CLS). Without an explicit height:auto the browser uses the height ATTRIBUTE
   as the used height and silently ignores aspect-ratio — a 1600x1400 detail shot
   then renders 1400px tall inside a 3:2 frame. Do not remove it.  */

/* ── section shell ───────────────────────────────────────────────────────── */
.sh{position:relative}
.sh-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,52px)}
.sh--stone{background:var(--sh-stone);color:var(--sh-ink)}
.sh--white{background:var(--sh-surface);color:var(--sh-ink)}
.sh--dark{background:var(--sh-dark);color:rgba(255,255,255,.94)}
/* rhythm varies by section TYPE — statements breathe, rails compress. Identical
   padding everywhere is what makes a page read as slides. */
.sh-pad{padding-block:clamp(52px,7vw,104px)}
.sh--white + .sh--white{border-top:1px solid var(--sh-line-soft)}

/* ── type ────────────────────────────────────────────────────────────────── */
.sh-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sh-maroon)}
html[lang="kn"] .sh-eyebrow{font-family:var(--f-kn);letter-spacing:.04em;text-transform:none;font-size:12px}
.sh-rule::after{content:"";flex:1 1 auto;height:1px;background:var(--sh-line);max-width:190px}
.sh-h{font-family:var(--f-head);font-size:clamp(24px,3vw,36px);font-weight:700;
  line-height:1.16;letter-spacing:-.018em;margin:0 0 12px;max-width:22ch;text-wrap:balance}
.sh-h em{font-style:normal;color:var(--sh-maroon)}
html[lang="kn"] .sh-h{font-family:var(--f-kn);font-weight:700;letter-spacing:0;
  line-height:1.4;font-size:clamp(20px,2.4vw,28px)}
.sh-lead{font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--sh-ink-2);
  max-width:58ch;margin:0 0 18px}
html[lang="kn"] .sh-lead{font-family:var(--f-kn);line-height:1.8}
.sh-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--sh-ink-3);max-width:62ch}
html[lang="kn"] .sh-note{font-family:var(--f-kn);line-height:1.7}

/* ── actions: one filled button per screen, then outline, then text ──────── */
.sh-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px}
.btn-out{background:transparent;color:var(--sh-ink);border:1px solid var(--sh-line)}
.btn-out:hover{border-color:var(--sh-ink);background:transparent}
.sh-textlink{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--sh-maroon);
  text-decoration:none;white-space:nowrap}
.sh-textlink:hover{text-decoration:underline}
html[lang="kn"] .sh-textlink{font-family:var(--f-kn)}

/* ── reveal: one motion language, reduced-motion safe ────────────────────── */
.hf-rise{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hf-rise.hf-in{opacity:1;transform:none}
.hf-rise[data-d="1"]{transition-delay:.07s}
.hf-rise[data-d="2"]{transition-delay:.14s}
.hf-rise[data-d="3"]{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){ .hf-rise{opacity:1;transform:none;transition:none} }

/* ══ 01 · HERO ════════════════════════════════════════════════════════════ */
.hf-flagchip{display:inline-block;margin:0 0 10px;font-family:var(--f-head);font-weight:700;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);
  background:rgba(10,20,16,.30);border:1px solid rgba(255,255,255,.2);border-radius:980px;
  padding:6px 13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[lang="kn"] .hf-flagchip{font-family:var(--f-kn);letter-spacing:.04em;text-transform:none}
@media(max-width:743px){ .hf-flagchip{font-size:9.5px;letter-spacing:.14em;padding:5px 11px} }

.sh-hero-line{margin:0 0 16px;font-family:var(--f-head);font-weight:600;
  font-size:clamp(16px,1.7vw,20px);line-height:1.45;color:rgba(255,255,255,.92);max-width:26ch}
html[lang="kn"] .sh-hero-line{font-family:var(--f-kn);line-height:1.7}
/* inline-flex collapses the source whitespace before the ↗, so the arrow needs a real
   gap or it renders welded to the label ("Doti↗"). display:none / position:absolute
   children (the inactive language, the .sr-only note) never contribute a gap. */
.sh-hero-alt{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:rgba(255,255,255,.86);
  font-family:var(--f-head);font-weight:600;font-size:14.5px;text-decoration:none}
.sh-hero-alt:hover{color:#fff;text-decoration:underline}
html[lang="kn"] .sh-hero-alt{font-family:var(--f-kn)}

/* four sourced figures as a compact strip, not four competing pills */
.sh-herospec{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16)}
.sh-herospec .hpill{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0}
.sh-herospec .hpill-stat{font-family:var(--f-head);font-weight:700;font-size:17px;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.sh-herospec .hpill-lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
html[lang="kn"] .sh-herospec .hpill-lab{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none;font-size:11.5px}
@media(max-width:743px){ .sh-herospec{gap:8px 18px} .sh-herospec .hpill-stat{font-size:15px} }

/* ══ 02 · PRODUCT CARD ════════════════════════════════════════════════════ */
.sh-card{background:var(--sh-surface);border:1px solid var(--sh-line-soft);
  border-radius:var(--sh-r);overflow:hidden}
.sh-product{display:grid}
@media(min-width:860px){ .sh-product{grid-template-columns:1.15fr .85fr;align-items:center} }
.sh-product-media{background:linear-gradient(168deg,#fff 0%,var(--sh-stone) 100%);
  padding:clamp(20px,3vw,34px) clamp(16px,2.5vw,28px) clamp(14px,2vw,22px);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.sh-product-shot{display:block;width:100%;max-width:520px;height:auto;
  max-height:clamp(240px,38vh,420px);object-fit:contain}
.sh-angles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sh-angle{width:64px;height:52px;padding:0;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1.5px solid var(--sh-line);background:#fff;opacity:.7;
  transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.sh-angle img{width:100%;height:100%;object-fit:cover;display:block}
.sh-angle:hover{opacity:1}
.sh-angle.is-on{opacity:1;border-color:var(--sh-maroon)}
.sh-angle:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.sh-product-body{padding:clamp(22px,3vw,36px)}
.sh-product-name{font-family:var(--f-head);font-size:clamp(24px,2.7vw,32px);font-weight:700;
  letter-spacing:-.022em;margin:6px 0 8px;line-height:1.1}
html[lang="kn"] .sh-product-name{font-family:var(--f-kn);letter-spacing:0}
.sh-product-line{font-size:14.5px;line-height:1.6;color:var(--sh-ink-2);margin:0 0 16px;max-width:40ch}
html[lang="kn"] .sh-product-line{font-family:var(--f-kn);line-height:1.75}
.sh-price{display:flex;align-items:baseline;gap:9px;margin:0 0 4px}
.sh-price b{font-family:var(--f-head);font-weight:700;font-size:clamp(23px,2.4vw,29px);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--sh-ink)}
.sh-price-note{font-size:12.5px;color:var(--sh-ink-3)}
html[lang="kn"] .sh-price-note{font-family:var(--f-kn)}
/* specs get their own voice — navy, tabular, quiet labels */
.sh-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--sh-line-soft)}
@media(min-width:520px){ .sh-spec{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sh-spec--tight{grid-template-columns:repeat(3,minmax(0,1fr))}
.sh-spec div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-spec dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sh-ink-3)}
html[lang="kn"] .sh-spec dt{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none;font-size:11.5px}
.sh-spec dd{margin:0;font-family:var(--f-head);font-weight:700;font-size:15px;
  color:var(--navy,#1E2A78);font-variant-numeric:tabular-nums}
html[lang="kn"] .sh-spec dd{font-family:var(--f-kn)}

/* ══ 03 · FIELD FILM ══════════════════════════════════════════════════════ */
.sh-film{margin-top:clamp(20px,3vw,30px)}
.sh-film-stage{position:relative;margin:0;border-radius:var(--sh-r);overflow:hidden;
  background:#000;aspect-ratio:16/9}
.sh-film-video{width:100%;height:100%;object-fit:cover;display:block}
.sh-film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:#141416;display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
.sh-film-play svg{width:26px;height:26px;margin-left:3px}
.sh-film-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.sh-film-play:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.sh-film-play[hidden]{display:none}
/* Audio toggle reuses .feature-unmute wholesale (showroom.css) — this only grows the
   tap target to the 44px finger minimum on touch. The disc keeps its 40px look. */
@media(max-width:1023px){ .sh-film-mute{width:44px;height:44px} }
.sh-film-pick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;
  margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.sh-film-pick::-webkit-scrollbar{display:none}
@media(max-width:743px){ .sh-film-pick{grid-auto-columns:58%} }
.sh-clip{display:grid;gap:7px;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.sh-clip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;
  border:1.5px solid transparent;transition:border-color .25s var(--ease),opacity .25s var(--ease);opacity:.72}
.sh-clip span{font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--sh-ink-2)}
html[lang="kn"] .sh-clip span{font-family:var(--f-kn)}
.sh-clip:hover img{opacity:1}
.sh-clip.is-on img{opacity:1;border-color:var(--sh-maroon)}
.sh-clip.is-on span{color:var(--sh-ink)}
.sh-clip:focus-visible img{outline:2px solid var(--saffron);outline-offset:2px}

/* ══ 04 · CAPABILITY RAIL ═════════════════════════════════════════════════ */
.sh-railwrap{position:relative;margin-top:clamp(18px,2.6vw,28px)}
.sh-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:4px;-webkit-overflow-scrolling:touch}
.sh-rail::-webkit-scrollbar{display:none}
@media(max-width:1023px){ .sh-rail{grid-auto-columns:44%} }
/* one card + a peek: the peek IS the instruction, so no "swipe" label is needed */
@media(max-width:743px){ .sh-rail{grid-auto-columns:76%} }
@media(min-width:1024px){ .sh-rail{grid-auto-columns:calc((100% - 3*14px)/3.4)} }
.sh-railbtn{position:absolute;top:38%;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--sh-line);background:rgba(255,255,255,.96);color:var(--sh-ink);
  font-size:22px;line-height:1;cursor:pointer;display:none;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.sh-railbtn--prev{left:-14px} .sh-railbtn--next{right:-14px}
.sh-railbtn:hover{border-color:var(--sh-ink)}
.sh-railbtn:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
@media(min-width:1024px){ .sh-railbtn{display:flex;align-items:center;justify-content:center} }
.sh-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.sh-dot{width:6px;height:6px;border-radius:50%;background:var(--sh-line);transition:all .25s var(--ease)}
.sh-dot.is-on{background:var(--sh-ink-2);width:18px;border-radius:3px}
.sh-railfoot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}

/* the job card itself (markup emitted by home-flagship.js) */
.hf-job{position:relative;display:block;border-radius:13px;overflow:hidden;text-decoration:none;
  color:#fff;background:var(--sh-stone-2);scroll-snap-align:start;isolation:isolate;
  aspect-ratio:4/5;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.hf-job:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){ .hf-job:hover{transform:none} }
.hf-job-media{position:absolute;inset:0}
.hf-job-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.hf-job:hover .hf-job-media img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){ .hf-job:hover .hf-job-media img{transform:none} }
.hf-job-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,22,0) 42%,rgba(20,20,22,.84) 100%)}
.hf-job-ph{display:flex;align-items:center;justify-content:center;background:var(--sh-stone-2)}
.hf-job-ph b{font-family:var(--f-display);font-weight:400;font-size:40px;letter-spacing:.1em;
  color:rgba(0,0,0,.16)}
.hf-job-body{position:absolute;left:14px;right:46px;bottom:12px;z-index:2}
.hf-job-n{display:block;font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.2;
  letter-spacing:-.01em}
html[lang="kn"] .hf-job-n{font-family:var(--f-kn)}
.hf-job-s{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.76)}
html[lang="kn"] .hf-job-s{font-family:var(--f-kn)}
.hf-job-arw{position:absolute;right:11px;bottom:11px;z-index:2;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.94);color:#1A1A1C;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}

/* ══ 05 · PRODUCT DETAIL ══════════════════════════════════════════════════ */
.sh-details{display:grid;gap:16px;margin-top:clamp(18px,2.6vw,28px)}
@media(min-width:760px){ .sh-details{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* These two are whole-machine studio frames on white, not macro crops — cover-cropping
   them decapitated the subject and left a white band. contain on a white plane keeps the
   component whole and matches the product card's object language. */
.sh-detail{margin:0;background:var(--sh-stone);border-radius:var(--sh-r);overflow:hidden;
  border:1px solid var(--sh-line-soft)}
.sh-detail img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;display:block;
  background:#fff;padding:clamp(8px,1.6vw,18px)}
.sh-detail figcaption{padding:16px 18px 18px;display:grid;gap:5px}
.sh-detail b{font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:-.01em}
html[lang="kn"] .sh-detail b{font-family:var(--f-kn)}
.sh-detail figcaption span{font-size:13.5px;line-height:1.55;color:var(--sh-ink-2)}
html[lang="kn"] .sh-detail figcaption span{font-family:var(--f-kn);line-height:1.7}

/* ══ 06 · PLANTATION (AI environment) ═════════════════════════════════════ */
.sh-plant{display:grid;gap:14px;margin-top:clamp(18px,2.6vw,28px)}
@media(min-width:760px){
  .sh-plant{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-plant-lead{grid-column:1/-1}
}
.sh-plant figure,.sh-plant-lead,.sh-plant-side{margin:0}
.sh-plant figure{background:var(--sh-surface);border:1px solid var(--sh-line-soft);
  border-radius:var(--sh-r);overflow:hidden}
.sh-plant img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.sh-plant-lead img{aspect-ratio:21/9}
.sh-plant figcaption{padding:12px 16px 14px;font-size:13px;line-height:1.5;color:var(--sh-ink-2)}
html[lang="kn"] .sh-plant figcaption{font-family:var(--f-kn);line-height:1.65}
@media(max-width:759px){ .sh-plant-lead img{aspect-ratio:16/9} }

/* ══ 07 / 10 · SPLIT ══════════════════════════════════════════════════════ */
.sh-split{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
@media(min-width:860px){
  .sh-split{grid-template-columns:1fr 1.05fr}
  .sh-split--rev .sh-split-body{order:2}
  .sh-split--rev .sh-split-media{order:1}
}
.sh-split-media{display:grid;gap:12px}
@media(min-width:860px){ .sh-split-media{grid-template-columns:1.35fr .65fr;align-items:start} }
.sh-split-media figure{margin:0;border-radius:var(--sh-r);overflow:hidden;
  background:var(--sh-surface);border:1px solid var(--sh-line-soft)}
.sh-doti-main img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.sh-doti-sub img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.sh-doti-sub figcaption{padding:8px 11px;font-size:11px;letter-spacing:.04em;color:var(--sh-ink-3)}
html[lang="kn"] .sh-doti-sub figcaption{font-family:var(--f-kn)}
.sh-founder img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
@media(min-width:860px){ #story .sh-split-media{grid-template-columns:1fr} }

/* ══ 10 · PROOF ═══════════════════════════════════════════════════════════ */
.sh-trust{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.sh-trust li{display:grid;gap:3px;padding-left:16px;position:relative}
.sh-trust li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--sh-maroon)}
.sh-trust b{font-family:var(--f-head);font-weight:700;font-size:15px}
html[lang="kn"] .sh-trust b{font-family:var(--f-kn)}
.sh-trust span{font-size:13.5px;line-height:1.55;color:var(--sh-ink-2)}
html[lang="kn"] .sh-trust span{font-family:var(--f-kn);line-height:1.7}
.sh-tv{margin-top:clamp(34px,5vw,60px);padding-top:clamp(24px,3.4vw,36px);
  border-top:1px solid var(--sh-line)}
.sh-tv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.sh-tv-head .sh-eyebrow{margin:0}
.sh-tv-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.sh-tv-card{flex:1 1 260px}
/* showroom-fx.js auto-fills this row from /data/featured.json and injects its OWN
   kbtv-* markup, replacing the static cards. Rather than disable the live data, the
   injected markup is normalised into the same card language below. Flex (not grid)
   so BOTH shapes — 3 static cards, or hero + side — lay out correctly without :has(). */
.sh-tv .kbtv-hero{position:relative;display:block;flex:1 1 380px;border-radius:12px;
  overflow:hidden;text-decoration:none}
/* the shared stylesheet underlines link text; the card IS the affordance here */
.sh-tv a,.sh-tv a *{text-decoration:none}
.sh-tv a:hover .kbtv-hero-h,.sh-tv a:hover .kbtv-mini-h{text-decoration:underline}
.sh-tv .kbtv-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sh-tv .kbtv-hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,22,0) 45%,rgba(20,20,22,.86) 100%)}
.sh-tv .kbtv-hero-body{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  color:#fff;display:grid;gap:5px}
.sh-tv .kbtv-hero-kick{display:inline-flex;align-items:center;gap:5px;font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron)}
html[lang="kn"] .sh-tv .kbtv-hero-kick{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none}
.sh-tv .kbtv-hero-h{font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.32}
html[lang="kn"] .sh-tv .kbtv-hero-h{font-family:var(--f-kn);line-height:1.5}
.sh-tv .kbtv-side{display:grid;gap:10px;align-content:start;flex:1 1 280px}
.sh-tv .kbtv-mini{display:grid;grid-template-columns:104px minmax(0,1fr);gap:11px;
  align-items:center;text-decoration:none;color:inherit}
.sh-tv .kbtv-mini-media{border-radius:9px;overflow:hidden;background:var(--sh-stone-2)}
.sh-tv .kbtv-mini-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sh-tv .kbtv-mini-tag{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sh-maroon);margin-bottom:3px}
html[lang="kn"] .sh-tv .kbtv-mini-tag{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none}
.sh-tv .kbtv-mini-h{display:block;font-family:var(--f-head);font-weight:600;font-size:13px;
  line-height:1.35;color:var(--sh-ink-2)}
html[lang="kn"] .sh-tv .kbtv-mini-h{font-family:var(--f-kn);line-height:1.55}
.sh-tv-card{display:grid;gap:8px;text-decoration:none;color:inherit}
.sh-tv-media{display:block;border-radius:12px;overflow:hidden;background:var(--sh-stone-2)}
.sh-tv-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.sh-tv-card:hover .sh-tv-media img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){ .sh-tv-card:hover .sh-tv-media img{transform:none} }
.sh-tv-t{font-family:var(--f-head);font-weight:600;font-size:13.5px;line-height:1.4;color:var(--sh-ink-2)}
html[lang="kn"] .sh-tv-t{font-family:var(--f-kn);line-height:1.6}

/* ══ 09 · SAVINGS ═════════════════════════════════════════════════════════ */
/* ── THE MATH — bento calculator surface (2026-08-23; replaces .sh-savings-in) ──
   One stone plate on the white canvas: copy column + interaction panel. The only
   accent on the plate is the saffron CTA (R4); selection is border + check disc,
   never colour alone. */
.sh-calc{background:var(--sh-stone);border:1px solid var(--sh-line-soft);
  border-radius:calc(var(--sh-r) + 12px);padding:clamp(26px,4.5vw,56px);
  display:grid;gap:clamp(26px,4vw,64px)}
@media(min-width:901px){ .sh-calc{grid-template-columns:1.05fr 1fr;align-items:center} }
.sh-calc-copy .sh-lead{margin-bottom:0;max-width:46ch}
.sh-calc-ask{margin:0 0 12px;font-family:var(--f-head);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--sh-ink)}
html[lang="kn"] .sh-calc-ask{font-family:var(--f-kn)}
.sh-calc-crops{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:430px){ .sh-calc-crops{grid-template-columns:1fr} }
.sh-crop{display:flex;align-items:center;justify-content:flex-start;gap:12px;
  min-height:68px;height:auto;flex:initial;padding:12px 16px;
  background:var(--sh-surface);border:1px solid var(--sh-line);border-radius:var(--sh-r);
  cursor:pointer;text-align:left;font:inherit;color:var(--sh-ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.sh-crop:hover{border-color:var(--sh-ink-3);transform:translateY(-1px)}
.sh-crop:active{transform:scale(.99)}
.sh-crop:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:2px}
/* selected ≠ colour alone: border weight + check disc.
   The .roi-crop-btn class is carried ONLY for showroom-fx's delegated analytics;
   its retired inline-calculator saffron fill (showroom.css:1394) must not win here
   — a saffron card beside the saffron CTA would put two filled accents in one
   panel. This file loads after showroom.css; restate the surface to reclaim it. */
.sh-crop[aria-pressed="true"]{border-color:var(--sh-ink);box-shadow:inset 0 0 0 1px var(--sh-ink);
  background:var(--sh-surface);color:var(--sh-ink)}
.sh-crop-ic{font-size:26px;line-height:1}
.sh-crop-t{display:grid;gap:2px;min-width:0}
.sh-crop-n{font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.2}
html[lang="kn"] .sh-crop-n{font-family:var(--f-kn)}
.sh-crop-s{font-size:12.5px;color:var(--sh-ink-2)}
html[lang="kn"] .sh-crop-s{font-family:var(--f-kn)}
.sh-crop-check{display:none;margin-left:auto;flex:0 0 auto;width:22px;height:22px;
  border-radius:50%;background:var(--sh-ink);color:#fff;align-items:center;justify-content:center}
.sh-crop-check svg{width:12px;height:12px;display:block}
.sh-crop[aria-pressed="true"] .sh-crop-check{display:flex}
/* the live engine figure — revealed after a crop is chosen */
.sh-calc-live{display:grid;gap:3px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--sh-line-soft)}
.sh-calc-live[hidden]{display:none}
.sh-calc-live:not([hidden]){animation:hfCalcIn .45s var(--ease)}
@keyframes hfCalcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .sh-calc-live:not([hidden]){animation:none} }
.sh-calc-live-val{font-family:var(--f-head);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3vw,34px);letter-spacing:-.015em;color:var(--sh-ink)}
.sh-calc-live-lab{font-size:13px;color:var(--sh-ink-2)}
html[lang="kn"] .sh-calc-live-lab{font-family:var(--f-kn)}
.sh-calc-live-ctx{font-size:12.5px;font-weight:600;color:var(--sh-ink)}
html[lang="kn"] .sh-calc-live-ctx{font-family:var(--f-kn)}
.sh-calc-live-note{font-size:12px;color:var(--sh-ink-3)}
html[lang="kn"] .sh-calc-live-note{font-family:var(--f-kn)}
.sh-calc-go{margin-top:18px;justify-self:start}
@media(max-width:743px){ .sh-calc-go{justify-self:stretch;width:100%} }
.sh-calc-priv{margin:10px 0 0;font-size:12.5px;color:var(--sh-ink-3)}
html[lang="kn"] .sh-calc-priv{font-family:var(--f-kn)}

/* ══ 11 · CLOSE — the second and last dark surface ════════════════════════ */
#demo.section.demo{background:var(--sh-dark);color:rgba(255,255,255,.94);
  padding-block:clamp(52px,7vw,104px)}
#demo .eyebrow{color:var(--saffron)}
#demo .sec-title{font-family:var(--f-head);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(24px,3vw,36px);line-height:1.16;color:#fff;max-width:20ch;margin-inline:auto}
html[lang="kn"] #demo .sec-title{font-family:var(--f-kn);letter-spacing:0;line-height:1.4}
#demo .demo-sub{color:rgba(255,255,255,.7);max-width:56ch;margin-inline:auto}
#demo .demo-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
#demo .df-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
#demo .df-lab,#demo .demo-foot,#demo .df-note,#demo .df-hint{color:rgba(255,255,255,.66)}
#demo .demo-form-h{color:#fff}
#demo .df-crop-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
#demo .demo-reserve a{color:var(--saffron)}
#demo .btn-sec{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
#demo .btn-sec:hover{background:rgba(255,255,255,.08);border-color:#fff}
#demo .roi-demo-call,#demo .demo-step-p{color:rgba(255,255,255,.7)}

/* ══ THE RANGE — interactive range showcase (2026-08-30; replaces the card rail) ══
   One full stage per product, segment tabs as the navigation, rendered by the
   RANGE SHOWCASE script in index.html from catalog.js "range" — adding a product
   is still ONE catalogue record. Every selector lives under #range: the shared
   .rng-* system in showroom.css is untouched and keeps serving the keelambi.com
   front door. Tokens, radii, buttons and type are the section's existing ones. */
#range .rns{margin-top:clamp(16px,2.4vw,24px)}

/* — segment tabs: one connected navigation control, not four buttons — */
#range .rns-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
#range .rns-tab{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px 14px;
  background:var(--sh-surface);border:1px solid var(--sh-line-soft);border-radius:13px;cursor:pointer;
  text-align:left;font:inherit;min-height:44px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease)}
#range .rns-tab:hover{border-color:var(--sh-ink-3)}
#range .rns-tab:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
#range .rns-tab[aria-selected="true"]{border-color:var(--sh-ink)}
#range .rns-tab-n{font-family:var(--f-head);font-weight:700;font-size:13.5px;line-height:1.25;
  letter-spacing:-.01em;color:var(--sh-ink)}
html[lang="kn"] #range .rns-tab-n{font-family:var(--f-kn);letter-spacing:0}
#range .rns-tab-s{font-size:11px;line-height:1.4;color:var(--sh-ink-2)}
html[lang="kn"] #range .rns-tab-s{font-family:var(--f-kn)}
/* the active segment carries the cycle's progress — state, not decoration */
#range .rns-prog{position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;
  background:var(--sh-line-soft);overflow:hidden;opacity:0;pointer-events:none}
#range .rns-tab[aria-selected="true"] .rns-prog{opacity:1}
#range .rns-prog i{display:block;height:100%;width:100%;background:var(--sh-maroon);
  transform:scaleX(1);transform-origin:left center}
#range .rns.is-cycling .rns-tab[aria-selected="true"] .rns-prog i{
  transform:scaleX(0);animation:rnsProg 6s linear forwards}
#range .rns.is-paused .rns-tab[aria-selected="true"] .rns-prog i{animation-play-state:paused}
@keyframes rnsProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* — the stage: a snap rail. Tabs drive it; touch swipes it; both stay in sync — */
#range .rns-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;border-radius:var(--sh-r)}
#range .rns-viewport::-webkit-scrollbar{display:none}
#range .rns-track{display:flex}
#range .rns-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;background:var(--sh-surface);border:1px solid var(--sh-line-soft);
  border-radius:var(--sh-r);overflow:hidden}
@media(min-width:860px){ #range .rns-slide{grid-template-columns:1.05fr .95fr;align-items:stretch} }

/* media plate — image when the catalogue names one, the house K mark when not.
   The container owns the geometry either way: dropping a real photo into the
   record later changes NOTHING about layout (image-slot contract). */
#range .rns-media{position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(168deg,#fff 0%,var(--sh-stone) 100%);overflow:hidden}
@media(max-width:859px){ #range .rns-media{aspect-ratio:16/10} }
@media(min-width:860px){ #range .rns-media{min-height:400px} }
#range .rns-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#range .rns-slide[data-fit="contain"] .rns-media img{object-fit:contain;padding:clamp(14px,3vw,32px)}
#range .rns-media.rns-ph{background:var(--sh-stone-2)}
#range .rns-ph-mark{font-family:var(--f-display);font-weight:400;letter-spacing:.1em;
  font-size:clamp(40px,6vw,60px);color:rgba(0,0,0,.16)}

/* — product information — */
#range .rns-body{padding:clamp(18px,3.2vw,36px);display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;min-width:0}
#range .rns-cat{font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sh-maroon)}
html[lang="kn"] #range .rns-cat{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none;font-size:12px}
#range .rns-name{font-family:var(--f-head);font-weight:700;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.02em;line-height:1.12;margin:0}
html[lang="kn"] #range .rns-name{font-family:var(--f-kn);letter-spacing:0;line-height:1.3}
#range .rns-desc{font-size:14.5px;line-height:1.6;color:var(--sh-ink-2);max-width:46ch;margin:0}
html[lang="kn"] #range .rns-desc{font-family:var(--f-kn);line-height:1.75}
#range .rns-tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
#range .rns-tile{display:flex;flex-direction:column;gap:2px;padding:9px 14px;
  background:var(--sh-stone);border:1px solid var(--sh-line-soft);border-radius:12px}
#range .rns-tile b{font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.1;
  color:var(--navy,#1E2A78);font-variant-numeric:tabular-nums}
#range .rns-tile span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-ink-3)}
html[lang="kn"] #range .rns-tile span{font-family:var(--f-kn);letter-spacing:.02em;text-transform:none;font-size:11.5px}
#range .rns-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:980px;
  border:1px solid var(--sh-line);background:var(--sh-surface);font-family:var(--f-head);
  font-weight:600;font-size:12.5px;color:var(--sh-ink-2)}
#range .rns-com{margin-top:auto;padding-top:8px;font-family:var(--f-head);font-weight:700;
  font-size:15.5px;color:var(--sh-ink);font-variant-numeric:tabular-nums}
html[lang="kn"] #range .rns-com{font-family:var(--f-kn)}
#range .rns-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:8px}
#range .rns-acts .btn{min-height:44px}

/* — prev · pause · next — quiet round controls, right-aligned under the stage — */
#range .rns-ctl{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
#range .rns-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--sh-line);
  background:var(--sh-surface);color:var(--sh-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s var(--ease)}
#range .rns-btn svg{width:16px;height:16px;display:block}
#range .rns-btn:hover{border-color:var(--sh-ink)}
#range .rns-btn:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}

/* — touch presentation: swipeable full-width stages, scrollable segment strip — */
@media(max-width:743px){
  #range .rns-tabs{display:flex;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;padding-bottom:2px}
  #range .rns-tabs::-webkit-scrollbar{display:none}
  #range .rns-tab{flex:0 0 auto;min-width:148px;scroll-snap-align:start}
  #range .rns-ctl{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  #range .rns-prog i{animation:none!important;transform:scaleX(1)}
  #range .rns-tab,#range .rns-btn{transition:none}
}

/* ecosystem chips, counted from the catalogue */
.hf-mission-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.hf-eco{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--sh-line);
  border-radius:980px;padding:6px 13px;text-decoration:none;color:var(--sh-ink);background:var(--sh-surface);
  transition:border-color .3s var(--ease)}
.hf-eco:hover{border-color:var(--sh-maroon)}
.hf-eco b{font-family:var(--f-head);font-weight:700;font-size:14px}
.hf-eco span{font-family:var(--f-head);font-weight:600;font-size:12px;color:var(--sh-ink-2)}
html[lang="kn"] .hf-eco span{font-family:var(--f-kn)}

/* ══ MOBILE ACTION-LAYER GOVERNANCE (retained from the prior pass) ════════
   ONE obvious primary action at any moment. The global WhatsApp pill is off on
   phones by owner mandate; WhatsApp is contextual (sticky bar, demo section). */
@media(max-width:743px){
  #df-btn-cont .df-btn{display:none!important}
  .bm-chip{display:none}
  .stickybar .sb-menu{display:none}
  .stickybar > a[href*="rzp.io"]{display:none}
  .stickybar .sb-demo{display:flex;flex:1;height:46px;justify-content:center;white-space:nowrap}
  .sh-pad{padding-block:clamp(44px,11vw,68px)}
  .sh-h{font-size:clamp(21px,5.6vw,26px)}
  html[lang="kn"] .sh-h{font-size:clamp(18px,4.8vw,22px)}
  .sh-railbtn{display:none}
}
@media(min-width:744px){ .stickybar .sb-demo{display:none} }
html.roiw-cta #df-btn-cont .df-btn{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.roiw-cta .bm-chip{display:none!important}
/* the hero range strip is superseded by the range rail */
.hero-range-strip{display:none!important}

/* ══ MOBILE NATIVE PASS (2026-08-30) — ≤743px presentation only ═══════════
   The four sourced figures become a 2×2 instrument grid (same numbers, same
   type steps — 17px is this strip's own desktop size), and the two considered
   CTAs gain a real press state. Nothing here runs at ≥744px. */
@media(max-width:743px){
  /* the band's 2-col grid split the line and the figures into half-width
     columns; on a phone the hero reads as one column — statement, actions,
     then the proof tiles. DOM and reading order are unchanged. */
  .sh-hero-line{grid-column:1/-1}
  .sh-herospec{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin-top:18px;padding-top:0;border-top:0}
  .sh-herospec .hpill{min-height:64px;justify-content:center;gap:3px;padding:10px 12px;
    border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
  .sh-herospec .hpill-stat{font-size:17px}
  .hero-data-cta:active,.hero-data-cta2:active{transform:scale(.97)}
}
@media(max-width:743px) and (prefers-reduced-motion:no-preference){
  .hero-data-cta,.hero-data-cta2{transition:transform .16s var(--ease),background .16s var(--ease)}
}
@media(max-width:743px) and (prefers-reduced-motion:reduce){
  .hero-data-cta:active,.hero-data-cta2:active{transform:none}
}