/* ═══════════════════════════════════════════════════════════════════════════
THE KEELAMBI SHOWROOM — /prototypes/showroom/ only. Zero effect on any
shipped page. Tokens, fonts, bilingual rules and the pill CTA come from
kb.css; this file is the experience.
SEVEN MOVEMENTS, ONE CONVERSATION
① arrival a real machine entering a real estate — 2.5D, scroll-driven
② counter one question, in the farmer's own words
③ answer the site responds — SEV or Doti, by data not by guess
④ field the ground takes over the screen; controls go quiet
⑤ book the farm savings book — the engine untouched, both sides shown
⑥ range Keelambi is bigger than one machine — rendered from catalogue
⑦ next one action
NO CARDS. NO SECTION LABELS. NO STAT ROWS. NO REPEATED CTA BLOCKS.
Every photograph is real. Every claim is approved. The only invented thing
is the camera.
═══════════════════════════════════════════════════════════════════════════ */
:root{
--srm-ink:#141416; --srm-dim:#6E6E73; --srm-paper:#F7F4EC; --srm-rule:rgba(20,18,14,.14);
--srm-night:#0E0D0C;
}
body{background:#fff}
.srm-wrap{max-width:1080px;margin-inline:auto;padding-inline:22px}
@media(min-width:744px){.srm-wrap{padding-inline:52px}}
.srm-mv{position:relative}
/* NOTE for anyone adding an ![]()
here: kb.css sets max-width but NOT height:auto,
so an image sized by CSS width alone is stretched to its height ATTRIBUTE.
Every composited cutout below therefore says height:auto explicitly. A blanket
`.srm-mv img{height:auto}` looks tempting and is wrong — it outranks the
single-class rules for any layer that needs a fixed box. */
/* one type system, no eyebrows, no uppercase labels */
.srm-h{font-weight:700;letter-spacing:-0.03em;line-height:1.02;
font-size:clamp(34px,9vw,68px)}
html[lang="kn"] .srm-h{letter-spacing:0;line-height:1.28;font-size:clamp(27px,7vw,52px)}
.srm-h2{font-weight:700;letter-spacing:-0.025em;line-height:1.06;font-size:clamp(27px,6.6vw,44px)}
html[lang="kn"] .srm-h2{letter-spacing:0;line-height:1.34;font-size:clamp(23px,5.6vw,38px)}
.srm-lead{margin-top:14px;font-size:17px;line-height:1.5;color:var(--srm-dim);max-width:38ch}
html[lang="kn"] .srm-lead{line-height:1.72}
.srm-say{font-size:17px;line-height:1.55;max-width:34ch;font-weight:500}
html[lang="kn"] .srm-say{line-height:1.75}
/* ════ ① ARRIVAL — one real photograph, no compositing ═══════════════════
v3: the arrival is now a single REAL photograph in which the REAL machine is
already inside the environment — loaded with areca, on a laterite slope, in
real mud. The previous version composited a studio-lit cutout onto a
different photograph, and it read as a composite because it was one. There is
no cutout here, so there is nothing to look fake, nothing to float and
nothing to distort. The camera does one slow, restrained move; the
photograph is the hero. */
/* PHONES: the photograph is shown WHOLE, at its own aspect, and the title sits
beneath it like a film frame's card. Cover-cropping a 4:5 photograph into a
92svh phone box ate 38% of its width and pushed the machine's body out of
frame — the composition is worth more than the full-bleed. DESKTOP has the
room, so there the wide crop carries the type over it. */
.srm-arrival{background:#120C08;overflow:hidden;--p:0}
.srm-arr-scene{position:relative;aspect-ratio:4/3;overflow:hidden}
@media(min-width:520px){.srm-arr-scene{aspect-ratio:16/9}}
.srm-arr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:62% 50%;
transform:scale(calc(1.01 + var(--p) * .04));will-change:transform}
.srm-arr-veil{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(18,10,6,.26) 0%,rgba(18,10,6,0) 26%,
rgba(18,10,6,0) 68%,rgba(18,10,6,.55) 100%)}
.srm-arr-vig{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(122% 86% at 50% 46%,transparent 54%,rgba(20,12,7,.38) 100%)}
.srm-arr-copy{position:relative;padding:26px 22px 34px;color:#fff}
.srm-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;
color:rgba(255,255,255,.86)}
.srm-brand img{height:24px;width:auto;filter:brightness(0) invert(1)}
.srm-arr-copy .srm-h{margin-top:14px;color:#fff;max-width:13ch}
.srm-arr-mission{margin-top:14px;font-size:15.5px;font-weight:500;color:rgba(255,255,255,.72);
max-width:34ch;line-height:1.55}
html[lang="kn"] .srm-arr-mission{font-size:16px;line-height:1.68}
.srm-arr-down{display:none}
@media(min-width:744px){
/* DESKTOP: the wide crop, full-height, type over the frame where there is room */
.srm-arrival{position:relative;height:92svh;min-height:600px;max-height:940px}
.srm-arr-scene{position:absolute;inset:0;aspect-ratio:auto}
.srm-arr-photo{object-position:50% 52%;
transform:scale(calc(1.02 + var(--p) * .05)) translate3d(0,calc(var(--p) * -1.5%),0)}
.srm-arr-veil{background:linear-gradient(180deg,rgba(18,10,6,.72) 0%,rgba(18,10,6,.30) 24%,
rgba(18,10,6,.02) 44%,rgba(18,10,6,0) 66%,rgba(18,10,6,.28) 100%)}
.srm-arr-copy{position:absolute;inset:0 0 auto 0;padding:104px 52px 0}
.srm-brand{color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.srm-arr-copy .srm-h{text-shadow:0 2px 22px rgba(0,0,0,.62)}
.srm-arr-mission{color:rgba(255,255,255,.92);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.srm-arr-down{display:block;position:absolute;left:50%;bottom:12px;translate:-50% 0;
width:26px;height:26px;opacity:calc(1 - var(--p) * 2.6);color:#fff}
}
/* ════ ② THE COUNTER — one question, six words the farmer already uses ═══ */
.srm-counter{padding:52px 0 46px;background:#fff}
@media(min-width:744px){.srm-counter{padding:88px 0 72px}}
.srm-jobs{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--srm-rule)}
.srm-job{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:14px 2px;
background:none;border:0;border-bottom:1px solid var(--srm-rule);cursor:pointer;text-align:left;
font:inherit;color:var(--srm-ink);transition:padding-left .22s var(--ease),color .18s var(--ease)}
.srm-job:hover,.srm-job:focus-visible{padding-left:10px}
.srm-job-t{flex:1 1 auto;font-size:19px;font-weight:600;line-height:1.25}
html[lang="kn"] .srm-job-t{font-size:19px;line-height:1.45}
.srm-job-h{display:block;margin-top:3px;font-size:14px;font-weight:400;color:var(--srm-dim)}
.srm-job-go{flex:0 0 auto;width:22px;height:22px;color:var(--saffron);opacity:.55;
transition:transform .22s var(--ease),opacity .18s var(--ease)}
.srm-job:hover .srm-job-go,.srm-job:focus-visible .srm-job-go{transform:translateX(4px);opacity:1}
.srm-job.is-on{color:var(--saffron-ink)}
.srm-job.is-on .srm-job-go{opacity:1}
.srm-skip{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;
font-size:15px;font-weight:600;color:var(--srm-dim);background:none;border:0;cursor:pointer;
text-decoration:underline;text-underline-offset:4px}
/* the host, offered — never a gate, never first */
.srm-host{display:flex;align-items:center;gap:13px;margin-top:26px;padding:13px 16px 13px 13px;
border:1px solid var(--srm-rule);border-radius:16px;background:var(--srm-paper);
cursor:pointer;width:100%;text-align:left;font:inherit;min-height:66px}
.srm-host img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto}
.srm-host b{display:block;font-size:15.5px;font-weight:700}
.srm-host span{display:block;font-size:13.5px;color:var(--srm-dim);margin-top:2px}
/* what the site heard — always visible, always reversible */
.srm-chosen{display:none;align-items:center;gap:9px;margin-top:22px;font-size:14px;font-weight:600;
color:var(--saffron-ink)}
.srm-chosen.is-on{display:flex}
.srm-chosen button{background:none;border:0;font:inherit;color:var(--srm-dim);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px}
/* ════ THE STORY SCENES + THE ANSWER ════════════════════════
RHYTHM, NOT A STACK OF 100vh BACKGROUNDS. The hero is immersive; after it the
page alternates framed -> split -> immersive -> interactive, at deliberately
different heights. Every photograph is WHOLE: the machine is already inside
it, so nothing is composited, nothing floats, and no frame can hold two
machines. object-fit:cover is used only where a fixed aspect is required,
and never on these story frames -- they keep the photographer's crop. */
.srm-h3{font-weight:700;letter-spacing:-0.022em;line-height:1.1;font-size:clamp(24px,5.6vw,36px)}
html[lang="kn"] .srm-h3{letter-spacing:0;line-height:1.36;font-size:clamp(21px,4.8vw,31px)}
.srm-cap-t{margin-top:11px;font-size:16px;line-height:1.58;color:var(--srm-dim);max-width:48ch}
html[lang="kn"] .srm-cap-t{line-height:1.74}
.srm-cap-n{margin-top:13px;font-size:14px;font-weight:700;color:var(--srm-ink)}
/* framed scene: the photograph, then its caption. Never full-viewport. */
.srm-scene{padding:0 0 44px;background:#fff}
@media(min-width:744px){.srm-scene{padding:0 0 64px}}
.srm-frame{margin:0;overflow:hidden;background:#15100c}
.srm-frame img{display:block;width:100%;height:auto}
.srm-cap{padding-top:24px}
@media(min-width:1024px){
.srm-scene{padding:0 0 72px}
.srm-frame{max-width:1180px;margin-inline:auto;border-radius:4px}
.srm-cap{max-width:1180px}
}
/* split scene: image and story side by side where there is room */
.srm-split{padding:44px 0;background:var(--srm-paper)}
@media(min-width:744px){.srm-split{padding:72px 0}}
.srm-split-m{margin:0;overflow:hidden;background:#15100c;border-radius:3px}
.srm-split-m img{display:block;width:100%;height:auto}
.srm-split-t{padding-top:22px}
@media(min-width:900px){
.srm-split-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
gap:44px;align-items:center}
.srm-split-t{padding-top:0}
}
/* immersive terrain: taller, type in the frame's own dark foot */
.srm-imm{position:relative;overflow:hidden;background:#15100c}
.srm-imm img{display:block;width:100%;height:auto}
.srm-imm-veil{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(14,9,6,0) 42%,rgba(14,9,6,.55) 74%,rgba(14,9,6,.92) 100%)}
.srm-imm-copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:26px;color:#fff}
.srm-imm-copy .srm-h3{color:#fff;max-width:16ch}
.srm-imm-copy .srm-cap-t{color:rgba(255,255,255,.84);max-width:40ch}
@media(min-width:744px){.srm-imm-copy{padding-bottom:44px}}
/* the answer: one whole photograph, its story underneath */
.srm-answer{padding:0 0 50px;background:#fff}
@media(min-width:744px){.srm-answer{padding:0 0 72px}}
.srm-frame--ans{background:#15100c}
@media(min-width:1024px){.srm-frame--ans{max-width:1180px;margin-inline:auto;border-radius:4px}}
.srm-ans-photo{width:100%;height:auto}
.srm-ans-body{padding-top:26px}
.srm-ans-said{font-size:16px;font-weight:700;color:var(--saffron-ink);margin-bottom:8px}
html[lang="kn"] .srm-ans-said{font-size:16.5px;line-height:1.5}
.srm-ans-cap{margin-top:14px;font-size:16px;line-height:1.58;color:var(--srm-dim);max-width:52ch}
html[lang="kn"] .srm-ans-cap{line-height:1.76}
.srm-ans-parts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.srm-part{display:flex;align-items:baseline;gap:8px;font-size:15px}
.srm-part b{font-weight:700}
.srm-part i{font-style:normal;color:var(--srm-dim);font-variant-numeric:tabular-nums}
/* ════ THE GROUND — the interactive terrain check ══════════════════
Was a full-width black slab with an oversized frame beneath it. It now sits
on the page's own paper, the frame is a contained 16:9 (4:3 on phones), and
the ground control rides on the photograph's foot instead of a bar of its
own. The terrain frames themselves are unchanged — approved work. */
.srm-field{position:relative;background:var(--srm-paper);padding:46px 0}
@media(min-width:744px){.srm-field{padding:72px 0 76px}}
.srm-field .srm-h2{color:var(--srm-ink)}
.srm-field-lead{margin-top:11px;font-size:16px;color:var(--srm-dim);max-width:44ch}
html[lang="kn"] .srm-field-lead{line-height:1.7}
.srm-scene-stage{position:relative;margin-top:22px;aspect-ratio:4/3;overflow:hidden;
background:#15100c;border-radius:3px}
@media(min-width:744px){.srm-scene-stage{aspect-ratio:16/9;margin-top:26px}}
.srm-scene-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.04);transition:opacity .45s var(--ease),transform .8s var(--ease)}
.srm-scene-stage img.is-on{opacity:1;transform:none}
.srm-scene-veil{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(6,6,5,.34) 0%,transparent 26%,transparent 52%,rgba(6,6,5,.82) 100%)}
.srm-scene-say{position:absolute;top:0;left:0;right:0;padding:14px 18px 0;font-size:14px;
font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);max-width:24ch}
.srm-scene-claim{position:absolute;left:18px;right:18px;bottom:64px;font-size:18px;font-weight:700;
line-height:1.2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75);max-width:20ch}
html[lang="kn"] .srm-scene-claim{font-size:17px;line-height:1.42}
.srm-grounds{position:absolute;left:0;right:0;bottom:0;display:flex;
background:linear-gradient(180deg,transparent,rgba(6,6,5,.62))}
.srm-ground{flex:1 1 0;min-height:56px;padding:0 6px;background:none;border:0;cursor:pointer;
font:inherit;font-size:14px;font-weight:600;color:rgba(255,255,255,.68);
border-top:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.srm-ground.is-on{color:#fff;border-top-color:var(--saffron)}
.srm-jobline{display:flex;gap:20px;padding:14px 0 0;overflow-x:auto;scrollbar-width:none}
.srm-jobline::-webkit-scrollbar{display:none}
.srm-jobbtn{flex:0 0 auto;min-height:44px;background:none;border:0;cursor:pointer;font:inherit;
font-size:15px;font-weight:600;color:var(--srm-dim);padding:0;
border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.srm-jobbtn.is-on{color:var(--srm-ink);border-bottom-color:var(--saffron)}
/* ════ ⑤ THE BOOK — the farm savings book ═══════════════════════════════ */
.srm-book{background:var(--srm-paper);padding:56px 0 60px}
@media(min-width:744px){.srm-book{padding:90px 0 92px}}
.srm-book .srm-h2{max-width:16ch}
.srm-ask{margin-top:26px}
.srm-ask-q{font-size:15px;font-weight:600;color:var(--srm-dim)}
.srm-crops{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.srm-crop{min-height:48px;padding:0 20px;border-radius:var(--r-pill);cursor:pointer;font:inherit;
font-size:15px;font-weight:600;background:#fff;border:1px solid var(--srm-rule);color:var(--srm-ink);
transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.srm-crop.is-on{background:var(--srm-ink);border-color:var(--srm-ink);color:#fff}
.srm-acres{display:flex;align-items:baseline;justify-content:space-between;margin-top:26px}
.srm-acres b{font-size:22px;font-variant-numeric:tabular-nums}
.srm-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin-top:2px;
background:transparent;cursor:pointer}
.srm-slider::-webkit-slider-runnable-track{height:2px;background:var(--srm-rule)}
.srm-slider::-moz-range-track{height:2px;background:var(--srm-rule)}
.srm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
background:var(--srm-ink);margin-top:-12px;border:3px solid var(--srm-paper);
box-shadow:0 1px 4px rgba(0,0,0,.25)}
.srm-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--srm-ink);
border:3px solid var(--srm-paper)}
/* the ledger itself — ruled, tabular, no notebook cosplay */
.srm-ledger{margin-top:34px;border-top:1.5px solid var(--srm-ink)}
.srm-row{display:flex;align-items:baseline;gap:12px;padding:13px 0;
border-bottom:1px solid var(--srm-rule);font-variant-numeric:tabular-nums}
.srm-row-t{flex:1 1 auto;font-size:15.5px}
html[lang="kn"] .srm-row-t{font-size:15.5px;line-height:1.5}
.srm-row-v{flex:0 0 auto;font-size:15.5px;font-weight:600;min-width:6.5ch;text-align:right}
.srm-row--head{border-bottom-color:var(--srm-ink)}
.srm-row--head .srm-row-t,.srm-row--head .srm-row-v{font-size:13px;font-weight:700;color:var(--srm-dim)}
.srm-row--sub .srm-row-t{color:var(--srm-dim)}
.srm-row--total{border-bottom:0;padding-top:18px}
.srm-row--total .srm-row-t{font-size:16px;font-weight:700}
.srm-row--total .srm-row-v{font-size:19px;font-weight:700}
.srm-row--muted .srm-row-t,.srm-row--muted .srm-row-v{color:#A09A8C}
/* the balance — the emotional peak, written into the book */
.srm-balance{position:relative;margin-top:30px;padding:26px 0 4px;border-top:1.5px solid var(--srm-ink)}
.srm-bal-lab{font-size:14.5px;font-weight:700;color:var(--srm-dim)}
html[lang="kn"] .srm-bal-lab{font-size:15px}
.srm-bal-val{display:block;margin-top:6px;font-size:clamp(42px,12vw,78px);font-weight:700;
letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--srm-ink)}
/* the pen stroke: a rule drawn under the figure once it lands */
.srm-bal-rule{display:block;height:3px;margin-top:12px;background:var(--saffron);border-radius:3px;
transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--ease) .1s}
.srm-balance.is-in .srm-bal-rule{transform:scaleX(1)}
.srm-bal-pb{margin-top:14px;font-size:16px;font-weight:600}
.srm-bal-pb b{font-weight:700}
.srm-note{margin-top:18px;font-size:13px;color:var(--srm-dim);max-width:52ch}
/* ════ ⑥ THE RANGE — rendered from the catalogue, never hardcoded ════════ */
.srm-range{background:#fff;padding:56px 0 20px}
@media(min-width:744px){.srm-range{padding:90px 0 40px}}
.srm-tier{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--srm-rule);
text-decoration:none;color:inherit;transition:padding-left .22s var(--ease)}
.srm-tier:hover{padding-left:8px}
.srm-tier:first-of-type{border-top:1px solid var(--srm-rule)}
.srm-tier-m{flex:0 0 auto;width:96px;height:66px;border-radius:10px;overflow:hidden;
background:var(--canvas-2);display:flex;align-items:center;justify-content:center}
.srm-tier-m img{width:100%;height:100%;object-fit:cover}
.srm-tier-m img.is-cut{object-fit:contain;padding:5px}
/* pool tiers (attachments, estate tools) have no single photograph — the house mark
stands in, rather than a broken 
*/
.srm-tier-ph{font-family:var(--f-display,"Bebas Neue",sans-serif);font-size:26px;
line-height:1;letter-spacing:.06em;color:rgba(0,0,0,.22)}
.srm-tier-b{flex:1 1 auto;min-width:0}
.srm-tier-n{font-size:17.5px;font-weight:700;line-height:1.25}
html[lang="kn"] .srm-tier-n{line-height:1.45}
.srm-tier-l{margin-top:3px;font-size:14px;color:var(--srm-dim);line-height:1.4}
.srm-tier-p{margin-top:5px;font-size:14px;font-weight:700;color:var(--brand-maroon);
font-variant-numeric:tabular-nums}
.srm-tier-go{flex:0 0 auto;width:20px;height:20px;color:var(--srm-dim)}
/* ════ ⑦ THE NEXT STEP ══════════════════════════════════════════════════ */
.srm-next{background:var(--srm-night);color:#fff;padding:60px 0 66px}
@media(min-width:744px){.srm-next{padding:96px 0 100px}}
.srm-next .srm-h2{color:#fff;max-width:15ch}
.srm-next-sub{margin-top:14px;font-size:16px;color:rgba(255,255,255,.66);max-width:36ch}
.srm-next-act{margin-top:30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.srm-alt{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;
color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
/* ════ the host's quiet line, only if invited ═══════════════════════════ */
.srm-guide{display:none;align-items:flex-start;gap:12px;margin:0 0 20px;
font-size:15px;line-height:1.5;color:var(--srm-dim)}
html.srm-guided .srm-guide{display:flex}
.srm-guide img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto}
.srm-next .srm-guide{color:rgba(255,255,255,.72)}
/* ════ reveal — one shared, reduced-motion-aware rise ═══════════════════ */
.srm-rise{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.srm-rise.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.srm-arr-photo{transform:none!important}
.srm-arr-down{display:none}
.srm-rise{opacity:1;transform:none;transition:none}
.srm-scene-stage img{transition:opacity .01ms;transform:none}
.srm-bal-rule{transition:none;transform:scaleX(1)}
.srm-job,.srm-tier{transition:none}
}
html.srm-saver .srm-arr-photo{transform:none!important}
html.srm-saver .srm-scene-stage img{transition:opacity .01ms;transform:none}
/* the shared chrome's floors, scoped to this page (assessment §3.4 is platform work) */
body[data-kb-page="showroom"] .kb-langseg,body[data-kb-page="experience"] .kb-langseg{height:44px;padding-inline:14px}
body[data-kb-page="showroom"] .kb-bar-logo,body[data-kb-page="experience"] .kb-bar-logo{display:inline-flex;align-items:center;min-height:44px}
body[data-kb-page="showroom"] .kb-bar-logo img,body[data-kb-page="experience"] .kb-bar-logo img{height:30px}
body[data-kb-page="showroom"] .kb-bar .kb-btn-wa,body[data-kb-page="experience"] .kb-bar .kb-btn-wa{min-height:44px!important}
body[data-kb-page="showroom"] .kb-foot-links a,body[data-kb-page="experience"] .kb-foot-links a{display:inline-flex;align-items:center;min-height:44px}
body[data-kb-page="showroom"] .kb-foot-base,body[data-kb-page="experience"] .kb-foot-base{font-size:13px}
/* ════ THE STORE — build, review, and the one persistent action ══════════
A vehicle configurator, not a cart. No quantity steppers, no coupons, no
"customers also bought". Ruled rows in the same language as the counter, a
live total, and one action that follows the farmer down the page.
Every name, description and rupee is read from data/catalog.js. */
.srm-build{background:#fff;padding:52px 0 8px}
@media(min-width:744px){.srm-build{padding:84px 0 8px}}
.srm-build-sub{margin-top:10px;font-size:16px;color:var(--srm-dim)}
.srm-build-price{margin-top:4px;font-size:16px;font-weight:700;color:var(--srm-ink);
font-variant-numeric:tabular-nums}
.srm-q{margin:34px 0 14px;font-size:15px;font-weight:700;color:var(--srm-ink)}
html[lang="kn"] .srm-q{font-size:15.5px}
/* jobs as a thumbable scroller on phones, a wrap on desktop */
.srm-picks{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
margin-inline:-22px;padding:2px 22px 6px;scroll-snap-type:x proximity}
.srm-picks::-webkit-scrollbar{display:none}
@media(min-width:744px){.srm-picks{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:2px 0 6px}}
.srm-pick{flex:0 0 auto;scroll-snap-align:start;min-height:52px;padding:0 22px;cursor:pointer;
border-radius:var(--r-pill);border:1px solid var(--srm-rule);background:#fff;font:inherit;
font-size:15.5px;font-weight:600;color:var(--srm-ink);white-space:nowrap;
transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.srm-pick.is-on{background:var(--srm-ink);border-color:var(--srm-ink);color:#fff}
/* attachments — ruled rows, revealed only for the chosen job */
.srm-atts{margin-top:22px;border-top:1px solid var(--srm-rule)}
.srm-att{display:flex;align-items:center;gap:16px;padding:18px 0;
border-bottom:1px solid var(--srm-rule)}
.srm-att-b{flex:1 1 auto;min-width:0}
.srm-att-n{font-size:17px;font-weight:700;line-height:1.25}
html[lang="kn"] .srm-att-n{line-height:1.45}
.srm-att-d{margin-top:4px;font-size:14px;line-height:1.45;color:var(--srm-dim);max-width:44ch}
html[lang="kn"] .srm-att-d{line-height:1.62}
.srm-att-p{margin-top:7px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.srm-add{flex:0 0 auto;min-height:46px;padding:0 20px;border-radius:var(--r-pill);cursor:pointer;
border:1px solid var(--srm-ink);background:#fff;color:var(--srm-ink);font:inherit;
font-size:15px;font-weight:700;transition:background .18s var(--ease),color .18s var(--ease),
border-color .18s var(--ease)}
.srm-add.is-on{background:var(--green);border-color:var(--green);color:#fff}
.srm-att-help{margin-top:18px;font-size:14.5px;color:var(--srm-dim)}
.srm-att-help a{display:inline-flex;align-items:center;min-height:44px;
color:var(--saffron-ink);font-weight:700;text-decoration:none;
border-bottom:1px solid rgba(178,90,0,.35)}
/* ── the review: YOUR RANCHER ── */
.srm-review{background:var(--srm-paper);padding:50px 0 56px}
@media(min-width:744px){.srm-review{padding:84px 0 92px}}
.srm-rev-shot{margin:22px -22px 0;background:#fff;overflow:hidden}
.srm-rev-shot img{display:block;width:100%;height:auto;object-fit:contain}
@media(min-width:744px){.srm-rev-shot{margin:26px 0 0;border-radius:6px}}
@media(min-width:1024px){
.srm-rev-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
gap:46px;align-items:center}
.srm-rev-shot{margin-top:0}
}
.srm-built{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px}
.srm-built > span{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600}
.srm-built > span::before{content:"";width:15px;height:15px;border-radius:50%;flex:0 0 auto;
background:var(--green) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.srm-lines{margin-top:26px;border-top:1.5px solid var(--srm-ink)}
.srm-line{display:flex;align-items:baseline;gap:14px;padding:13px 0;
border-bottom:1px solid var(--srm-rule);font-variant-numeric:tabular-nums}
.srm-line-t{flex:1 1 auto;font-size:15.5px}
.srm-line-v{flex:0 0 auto;font-size:15.5px;font-weight:600}
.srm-line--h .srm-line-t{font-size:13px;font-weight:700;color:var(--srm-dim)}
.srm-line--h{border-bottom-color:var(--srm-ink)}
.srm-line--tot{border-bottom:0;padding-top:18px}
.srm-line--tot .srm-line-t{font-size:16px;font-weight:700}
.srm-line--tot .srm-line-v{font-size:26px;font-weight:700;letter-spacing:-0.02em}
.srm-rev-act{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.srm-rev-note{font-size:13px;color:var(--srm-dim)}
.srm-rev-alt{display:flex;flex-wrap:wrap;gap:10px 20px}
.srm-rev-alt button,.srm-rev-alt a{min-height:44px;display:inline-flex;align-items:center;
background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--srm-dim);
cursor:pointer;text-decoration:none;border-bottom:1px solid var(--srm-rule)}
/* ── the one persistent action ── */
.srm-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:14px;
padding:10px 18px calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-top:1px solid var(--srm-rule);transform:translateY(102%);
transition:transform .34s var(--ease)}
.srm-bar.is-up{display:flex;transform:none}
.srm-bar-b{flex:1 1 auto;min-width:0}
.srm-bar-n{font-size:13px;color:var(--srm-dim);line-height:1.2}
.srm-bar-p{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.srm-bar-go{flex:0 0 auto;min-height:46px;padding:0 24px;border-radius:var(--r-pill);border:0;
background:var(--srm-ink);color:#fff;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer}
@media(min-width:1024px){.srm-bar{padding-inline:52px}.srm-bar-go{padding-inline:32px}}
/* the header's WhatsApp stops being the loudest thing on the page */
body[data-kb-page="showroom"] .kb-bar .kb-btn-wa,body[data-kb-page="experience"] .kb-bar .kb-btn-wa{background:none!important;color:var(--srm-dim)!important;
border:1px solid var(--srm-rule);font-weight:600}
@media(prefers-reduced-motion:reduce){.srm-bar{transition:none}}
/* the ledger is a table, and a table wants width. Given room, the controls sit
beside it rather than stacking a screen and a half of page on a laptop. */
@media(min-width:1024px){
#bookBody{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
column-gap:52px;align-items:start}
#bookBody > .srm-ask,#bookBody > .srm-acres,#bookBody > .srm-slider{grid-column:1}
#bookBody > #srmLedger{grid-column:2;grid-row:1 / span 3;margin-top:0}
#bookBody > #srmBalance,#bookBody > .srm-note{grid-column:2}
}