/* ── CrusherOS home, built to the brand mockup ───────────────────────────────
   Every photograph on this page is a background behind a scrim. Nothing is an
   <img> dropped into a box, so the words on top stay real text: sharp on a
   phone, readable by a screen reader, findable by Google, and changeable
   without a designer. On a phone the same photographs stay in the background —
   only the crop changes, so the page never turns into a stack of pictures. */

/* ── Photographs ─────────────────────────────────────────────────────────── */
.hero__media { background-image: url("/website/img/hero-split.webp"); background-position: center 45%; }
[data-bg="card-crusher"] { background-image: url("/website/img/card-crusher.webp"); }
[data-bg="card-rmc"]     { background-image: url("/website/img/card-rmc.webp"); }
[data-bg="gate-weigh"]   { background-image: url("/website/img/gate-weigh.webp"); background-position: center 60%; }
[data-bg="yard-wide"]    { background-image: url("/website/img/yard-wide.webp"); background-position: center 55%; }
[data-bg="cta-rock"]     { background-image: url("/website/img/cta-rock.webp"); }
[data-bg="f-raw"]     { background-image: url("/website/img/f-raw.webp"); }
[data-bg="f-weigh"]   { background-image: url("/website/img/f-weigh.webp"); }
[data-bg="f-crush"]   { background-image: url("/website/img/f-crush.webp"); }
[data-bg="f-stock"]   { background-image: url("/website/img/f-stock.webp"); }
[data-bg="f-site"]    { background-image: url("/website/img/f-site.webp"); }
[data-bg="f-report"]  { background-image: url("/website/img/f-report.webp"); }
[data-bg="f-bins"]    { background-image: url("/website/img/f-bins.webp"); }
[data-bg="f-batch"]   { background-image: url("/website/img/f-batch.webp"); }
[data-bg="f-mixer"]   { background-image: url("/website/img/f-mixer.webp"); }
[data-bg="f-cubes"]   { background-image: url("/website/img/f-cubes.webp"); }
[data-bg="gate-small"] { background-image: url("/website/img/gate-weigh-sm.webp"); }
[data-bg="yard-small"] { background-image: url("/website/img/yard-wide-sm.webp"); background-position: center 60%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* The old home stylesheet still styles .hero and .hero-inner for a two-column
   layout, so both are reset here before the new one is built. */
.hero { min-height: min(94vh, 820px); display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr; color: #fff; padding: 0; background: #0b1116; }
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(8,14,18,.86) 0%, rgba(8,14,18,.34) 30%, rgba(8,14,18,.44) 62%, rgba(8,14,18,.92) 100%),
    radial-gradient(120% 78% at 50% 44%, rgba(8,14,18,.72) 0%, rgba(8,14,18,.22) 55%, transparent 100%);
}
.hero-inner { display: block; position: relative; z-index: 2; width: min(100%, 64rem); justify-self: center; max-width: none; margin: 0; padding: clamp(4.5rem,9vw,6rem) 1.25rem 2rem; text-align: center; align-self: center; }
.hero .kicker { color: #ffe0cc; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .9rem; }
.hero h1 {
  font-family: var(--display, "Archivo", sans-serif);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: .96; letter-spacing: -.02em; text-transform: uppercase; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}
.hero h1 em { font-style: normal; display: block; color: var(--rmc); }
.hero-hinglish { margin: 1.05rem auto 0; max-width: 40rem; font-size: clamp(1rem,1.9vw,1.2rem); font-weight: 650; color: #fff; }
.hero-lead { margin: .5rem auto 0; max-width: 38rem; color: #cfdbe1; font-size: clamp(.92rem,1.5vw,1.02rem); }
.hero .cta-row { justify-content: center; margin-top: 1.6rem; }
.btn.ghost-light { border: 1px solid rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.07); backdrop-filter: blur(3px); }
.btn.ghost-light:hover { background: rgba(255,255,255,.16); }
.btn .play { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; color: #0b1116; font-size: .6rem; margin-right: .1rem; }

/* The two handwritten notes from the brand sheet. */
.hero .hero-script { position: absolute; z-index: 2; margin: 0; font-family: var(--script, "Caveat", cursive); font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hero .hero-script--left  { left: clamp(1rem, 5vw, 5rem); top: clamp(5.5rem, 13vw, 8.5rem); color: #ffc49b; transform: rotate(-7deg); }
.hero .hero-script--right { right: clamp(1rem, 5vw, 5rem); top: clamp(7.5rem, 17vw, 11rem); color: #7ff0b0; transform: rotate(6deg); }
.india-badge { position: absolute; z-index: 2; right: clamp(1rem, 3vw, 2.2rem); top: clamp(1rem, 3vw, 1.6rem); margin: 0; text-align: right; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; line-height: 1.5; color: #e8f1f4; }

/* The five promises, welded to the bottom of the photograph. */
.hero-strip {
  position: relative; z-index: 2; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,.16); background: rgba(8,14,18,.55); backdrop-filter: blur(6px);
}
.hero-strip li { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem .5rem; font-size: .8rem; font-weight: 650; line-height: 1.25; }
.hero-strip li + li { border-left: 1px solid rgba(255,255,255,.12); }
.hero-strip .i { width: 26px; height: 26px; flex: 0 0 auto; color: var(--crusher); }

/* ── Handwritten section notes ───────────────────────────────────────────── */
.script { position: absolute; margin: 0; font-family: var(--script, "Caveat", cursive); font-size: clamp(1.15rem, 2.3vw, 1.8rem); line-height: 1.05; color: var(--crusher-ink); transform: rotate(-4deg); pointer-events: none; }
.script--right { right: clamp(1rem, 4vw, 3.5rem); top: clamp(1.2rem, 3vw, 2.4rem); text-align: right; }
.script--light { color: #7ff0b0; }
.script--cta { z-index: 2; }
/* The old stylesheet caps every .section at 1200px and centres it, which leaves a
   grey gutter around a band that is meant to run edge to edge. These sections carry
   their own inner width instead. */
.section { position: relative; max-width: none; margin: 0; padding-inline: 0; }
/* The old stylesheet draws a dashed rule between sections. These bands butt up
   against each other by colour instead, so the rule is switched off. */
.section + .section::before { display: none; }

/* ── Two industries ──────────────────────────────────────────────────────── */
.two-industries { padding-block: clamp(3rem, 7vw, 5.5rem); padding-inline: 1.25rem; background: #f5f7f8; }
.section-head { max-width: 46rem; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
.section-head h2 { font-family: var(--display, "Archivo", sans-serif); font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 .7rem; }
.section-head h2 em { font-style: normal; color: var(--crusher-ink); } /* on paper: 5.67:1 */
.industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); max-width: 74rem; margin: 0 auto; }
.industry-card { border-radius: 18px; min-height: 26rem; display: flex; align-items: flex-end; color: #fff; }
.industry-card .band__scrim { background: linear-gradient(180deg, rgba(9,14,18,.30) 0%, rgba(9,14,18,.78) 46%, rgba(9,14,18,.95) 100%); }
.industry-card__body { position: relative; z-index: 2; padding: clamp(1.2rem, 2.4vw, 1.9rem); width: 100%; }
.industry-card h3 { font-family: var(--display, "Archivo", sans-serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); text-transform: uppercase; margin: 0 0 .3rem; letter-spacing: -.01em; }
.industry-card__tag { margin: 0 0 1rem; font-size: .85rem; color: #cfdbe1; }
.industry-card .band-points { margin-bottom: 1.2rem; }
.industry-card .band-points li { font-size: .86rem; }
.industry-card--crusher { border-top: 4px solid var(--crusher); }
.industry-card--crusher .band-points .i { color: var(--crusher); }
.industry-card--rmc { border-top: 4px solid var(--rmc); }
.industry-card--rmc .band-points .i { color: var(--rmc); }
.btn.solid.rmc { background: var(--rmc); color: #06301a; }
.btn.solid.rmc:hover { background: #7ff0b0; }

/* Five reasons, plain and unnumbered. */
.benefit-strip { list-style: none; margin: clamp(1.6rem, 3.5vw, 2.6rem) auto 0; padding: 0; max-width: 74rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.benefit-strip li { background: #fff; border: 1px solid #e3e8ea; border-radius: 14px; padding: 1.1rem .9rem; text-align: center; display: grid; gap: .25rem; justify-items: center; }
.benefit-strip .i { width: 30px; height: 30px; color: var(--rmc-ink); }
.benefit-strip strong { font-size: .92rem; }
.benefit-strip small { color: #5d6b72; font-size: .76rem; line-height: 1.35; }

/* ── How it works ────────────────────────────────────────────────────────── */
.band--flow { padding-block: clamp(3rem, 7vw, 5rem); color: #fff; }
.band--flow h2 em { color: #fff; }
.band--flow .band__scrim--deep { background: linear-gradient(180deg, rgba(8,14,18,.92) 0%, rgba(8,14,18,.86) 50%, rgba(8,14,18,.94) 100%); }
.hiw-inner { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding-inline: 1.25rem; }
.hiw-head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.8rem; }
.hiw-toggle { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px; gap: 2px; }
.hiw-toggle button { border: 0; background: transparent; color: #cfdbe1; font: inherit; font-weight: 700; font-size: .82rem; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; }
.hiw-toggle button.active { background: var(--crusher); color: #17251e; }
.hiw-toggle button[data-flow="rmc"].active { background: var(--rmc); color: #06301a; }
.hiw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .7rem; counter-reset: step; }
.hiw-step { position: relative; }
.hiw-step__media { display: block; height: 6.5rem; border-radius: 12px; background-size: cover; background-position: center; position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.18); }
.hiw-step__media::after { content: ""; position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(180deg, rgba(8,14,18,.12), rgba(8,14,18,.66)); }
.hiw-step__label { display: block; margin-top: .55rem; font-size: .76rem; font-weight: 650; text-align: center; color: #dbe5e9; }
.hiw-step + .hiw-step::before { content: "›"; position: absolute; left: -.62rem; top: 2.6rem; color: var(--crusher); font-size: 1.2rem; font-weight: 700; }
#flow-rmc .hiw-step + .hiw-step::before { color: var(--rmc); }

/* ── Your plant, in your hands ───────────────────────────────────────────── */
.anywhere { padding-block: clamp(3rem, 7vw, 5.5rem); background: #fff; overflow: hidden; }
.anywhere-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 74rem; margin: 0 auto; padding-inline: 1.25rem; }
.anywhere h2 { font-family: var(--display, "Archivo", sans-serif); font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1; text-transform: uppercase; margin: 0 0 .7rem; }
.anywhere h2 em { font-style: normal; display: block; color: var(--crusher-ink); } /* on white: 6.09:1 */
.check-list { list-style: none; margin: 1.3rem 0; padding: 0; display: grid; gap: .6rem; }
.check-list li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 560; }
.check-list li::before { content: "✓"; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--rmc); color: #06301a; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }

/* The dashboard beside the words is drawn, not photographed. */
.device-stack { position: relative; padding-bottom: 2rem; }
.device-laptop { background: #1b2229; border-radius: 14px 14px 4px 4px; padding: .55rem .55rem 1.1rem; box-shadow: 0 26px 60px rgba(9,14,18,.28); }
.device-laptop::after { content: ""; display: block; height: .5rem; margin: .55rem -1.6rem -1.1rem; border-radius: 0 0 10px 10px; background: #2a333c; }
.device-screen { background: #fbfcfc; border-radius: 9px; padding: .85rem .9rem; font-size: .66rem; color: #1a2127; }
.mini-top { display: flex; justify-content: space-between; align-items: center; font-size: .6rem; color: #79868d; }
.mini-brand { font-weight: 800; color: #17202a; } .mini-brand b { color: var(--crusher); }
.mini-greet { margin: .5rem 0 0; color: #79868d; font-size: .6rem; }
.mini-plant { display: block; font-size: 1rem; letter-spacing: -.01em; margin-bottom: .6rem; }
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.mini-kpis div { background: #f1f4f5; border-radius: 7px; padding: .45rem .5rem; display: grid; gap: .1rem; }
.mini-kpis span { font-size: .52rem; color: #79868d; letter-spacing: .02em; }
.mini-kpis strong { font-size: .76rem; }
.mini-kpis .green { color: var(--rmc-ink); }
.mini-chart { display: flex; align-items: flex-end; gap: .22rem; height: 3.1rem; margin: .6rem 0; }
.mini-chart span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--crusher), #ffc49b); }
.mini-chart span:nth-child(even) { background: linear-gradient(180deg, var(--rmc), #a8f0c9); }
.mini-plants { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.mini-plants li { display: flex; align-items: center; gap: .4rem; font-size: .58rem; color: #3d4951; }
.mini-plants em { margin-left: auto; font-style: normal; color: #79868d; }
.dot { width: .42rem; height: .42rem; border-radius: 50%; flex: 0 0 auto; }
.dot.ok { background: var(--rmc-ink); } .dot.off { background: #e0a32e; }
.device-phone { position: absolute; right: -.4rem; bottom: 0; width: 8.6rem; background: #1b2229; border-radius: 16px; padding: .4rem; box-shadow: 0 20px 44px rgba(9,14,18,.3); }
.device-phone .device-screen { border-radius: 12px; padding: .65rem .6rem; }
.mini-kpis--phone { grid-template-columns: 1fr 1fr; }
.mini-actions { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .28rem; }
.mini-actions li { background: #f1f4f5; border-radius: 6px; padding: .32rem .38rem; font-size: .52rem; font-weight: 650; text-align: center; color: #3d4951; }

/* ── Crusher → RMC ───────────────────────────────────────────────────────── */
.band--together { padding-block: clamp(3rem, 7vw, 5rem); color: #fff; }
.band--together .band__scrim--deep { background: linear-gradient(100deg, rgba(8,14,18,.95) 0%, rgba(8,14,18,.8) 52%, rgba(8,14,18,.52) 100%); }
.together-inner { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding-inline: 1.25rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
.band--together h2 em.green { color: var(--rmc); }
.transfer { display: flex; align-items: center; gap: .9rem; justify-content: center; }
.transfer__node { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 1rem .9rem; text-align: center; display: grid; gap: .2rem; }
.transfer__node strong { font-size: .92rem; }
.transfer__node small { font-size: .74rem; color: #b6c5cc; }
.transfer__node--rmc { border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.12); }
.transfer__arrow { width: 2rem; height: 2rem; flex: 0 0 auto; color: var(--rmc); }

/* ── What the software actually does ─────────────────────────────────────── */
.proof { padding-block: clamp(2.4rem, 5vw, 3.6rem); background: #0f1519; color: #fff; }
.proof-strip { list-style: none; margin: 0 auto; padding: 0 1.25rem; max-width: 74rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.proof-strip li { display: grid; gap: .3rem; justify-items: center; text-align: center; padding: .4rem; }
.proof-strip .i { width: 32px; height: 32px; color: var(--crusher); }
.proof-strip strong { font-size: .92rem; }
.proof-strip small { font-size: .76rem; color: #9cb0b8; line-height: 1.4; }
.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; }

/* ── Industries we serve ─────────────────────────────────────────────────── */
.serve { padding-block: clamp(3rem, 7vw, 5rem); background: #f5f7f8; }
.serve .section-head { padding-inline: 1.25rem; }
.serve-grid { list-style: none; margin: 0 auto; padding: 0 1.25rem; max-width: 74rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.serve-grid li { background: #fff; border: 1px solid #e3e8ea; border-radius: 14px; padding: 1.1rem .8rem; text-align: center; font-size: .8rem; font-weight: 620; display: grid; gap: .5rem; justify-items: center; line-height: 1.3; }
.serve-grid .i { width: 30px; height: 30px; color: var(--crusher); }

/* ── Pilot plants ────────────────────────────────────────────────────────── */
.pilots { padding-block: clamp(3rem, 7vw, 5rem); background: #fff; }
.pilots .section-head { padding-inline: 1.25rem; }
.pilot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; max-width: 74rem; margin: 0 auto; padding-inline: 1.25rem; }
.pilot-card { background: #f5f7f8; border: 1px solid #e3e8ea; border-left: 3px solid var(--rmc); border-radius: 14px; padding: 1.3rem 1.2rem; display: grid; gap: .5rem; }
.pilot-card .i { width: 30px; height: 30px; color: var(--rmc-ink); }
.pilot-card h3 { margin: 0; font-size: 1rem; }
.pilot-card p { margin: 0; font-size: .87rem; color: #4a565d; line-height: 1.55; }
.pilot-note { max-width: 74rem; margin: 1.4rem auto 0; padding-inline: 1.25rem; font-size: .85rem; color: #5d6b72; text-align: center; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.band--cta { padding-block: clamp(3rem, 7vw, 5rem); color: #fff; }
.band--cta .band__scrim--deep { background: linear-gradient(95deg, rgba(8,14,18,.95) 0%, rgba(8,14,18,.82) 55%, rgba(8,14,18,.6) 100%); }
.cta-inner { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding-inline: 1.25rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
.band--cta h2 { font-family: var(--display, "Archivo", sans-serif); font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1; text-transform: uppercase; margin: 0 0 .7rem; }
.band--cta h2 em { font-style: normal; display: block; color: var(--crusher); }
.script--cta { right: clamp(1rem, 4vw, 3rem); top: clamp(1rem, 3vw, 2rem); }

/* ── Phone and tablet ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hiw-steps { grid-template-columns: repeat(4, 1fr); }
  .serve-grid { grid-template-columns: repeat(3, 1fr); }
  .hiw-step + .hiw-step::before { display: none; }
  .together-inner, .cta-inner, .anywhere-grid { grid-template-columns: 1fr; }
  .device-stack { max-width: 30rem; }
}
@media (max-width: 860px) {
  /* The panorama does not survive a portrait crop, so the phone gets a frame
     that holds both trades at once — still a background, never a picture. */
  .hero__media { background-image: url("/website/img/hero-split-sm.webp"); background-position: center 42%; }
  [data-bg="card-crusher"] { background-image: url("/website/img/card-crusher-sm.webp"); }
  [data-bg="card-rmc"]     { background-image: url("/website/img/card-rmc-sm.webp"); }
  [data-bg="gate-weigh"]   { background-image: url("/website/img/gate-weigh-sm.webp"); }
  [data-bg="yard-wide"]    { background-image: url("/website/img/yard-wide-sm.webp"); }
  .hero { min-height: auto; }
  .hero-inner { padding-top: clamp(7.5rem, 26vw, 10rem); padding-bottom: 2.4rem; }
  .hero-script--left { top: 5.2rem; font-size: 1.3rem; }
  .hero-script--right { top: auto; bottom: 8.2rem; font-size: 1.3rem; }
  .india-badge { font-size: .56rem; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-strip li:nth-child(odd) { border-left: 0; }
  .hero-strip li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .hero-strip li:last-child { grid-column: 1 / -1; }
  .hero .cta-row { flex-direction: column; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }
  .hiw-steps { grid-template-columns: repeat(2, 1fr); }
  .serve-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-step__media { height: 5.2rem; }
  .hiw-head { flex-direction: column; align-items: stretch; }
  .script { position: static; display: block; margin: 0 auto 1rem; text-align: center; transform: none; }
  .device-phone { position: static; width: auto; max-width: 13rem; margin: 1rem auto 0; }
  .transfer { flex-direction: column; }
  .transfer__arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media, .band__media { transition: none; }
}

/* ── One rail for the whole site ─────────────────────────────────────────────
   The page was running three different content widths — 1184px for the bands,
   1200px for the footer, 1100px on the RMC page — which reads as a small jog
   every time you scroll past a section edge. Everything now sits on one rail
   with one gutter, so the left edge of a heading never moves. */
:root { --rail: 1200px; --gutter: clamp(1rem, 4vw, 2rem); }
.hiw-inner, .together-inner, .cta-inner, .anywhere-grid, .industry-grid,
.benefit-strip, .serve-grid, .proof-strip, .pilot-grid, .pilot-note,
.rmc-wrap, .meter-card, .flow-wrap, .band-inner {
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.section-head { padding-inline: var(--gutter); box-sizing: border-box; }
.two-industries { padding-inline: 0; }

/* ── Anything you tap is at least 44px ───────────────────────────────────────
   A plant owner uses this on a phone, often with gloves or dust on the glass.
   The nav buttons were 39–40px and the flow switch 36px. */
.topbar .btn, .topbar .btn.small { min-height: 44px; display: inline-flex; align-items: center; }
.hiw-toggle button { min-height: 44px; padding-inline: 1.25rem; }
.btn { min-height: 44px; }
.hiw-step { min-height: 44px; }
.serve-grid li, .benefit-strip li { min-height: 44px; }

/* ── Nothing under 12px ──────────────────────────────────────────────────────
   The drawn dashboard was down to 8.3px, which is decoration a sighted reader
   still tries to read. It scales up instead of shrinking. */
.transfer__node small { font-size: .78rem; }
.device-screen { font-size: .72rem; }
.mini-top, .mini-greet, .mini-date { font-size: .68rem; }
.mini-kpis span { font-size: .62rem; }
.mini-kpis strong { font-size: .86rem; }
.mini-plants li, .mini-actions li { font-size: .64rem; }
.mini-brand, .mini-plants em { font-size: .66rem; }
.mini-greet { color: #5d6b72; }
.hero-strip li { font-size: .82rem; }
.india-badge { font-size: .7rem; }
.india-badge span { font-size: 1em; }

/* ── The RMC page joins the same system ──────────────────────────────────────
   It was running its own hero, its own nav lockup and its own rail. The parts
   that are genuinely RMC — the cubic-metre card, the mix band, the comparison —
   stay exactly as they are; only the frame around them is made the same. */
.rmc-page .hero-band { min-height: min(78vh, 660px); display: grid; align-items: center; }
.rmc-page .hero-band__inner.single { max-width: var(--rail); margin-inline: auto; padding-inline: var(--gutter); }
/* The RMC hero is centred like the home hero, so moving between the two pages
   does not feel like moving between two websites. */
.rmc-page .hero-band__inner .hero-centre { max-width: 46rem; margin-inline: auto; text-align: center; }
.rmc-page .hero-band__inner .hero-centre .cta-row { justify-content: center; }
.rmc-page .hero-band__inner .hero-centre .lead { margin-inline: auto; }
.rmc-page .hero-script { position: static; margin: 1.1rem 0 0; text-align: center; }
/* A brighter photograph needs a stronger scrim, or the headline fights the trees. */
.rmc-page .hero-band__scrim.green {
  background:
    linear-gradient(180deg, rgba(6,20,12,.86) 0%, rgba(6,20,12,.52) 34%, rgba(6,20,12,.6) 66%, rgba(6,20,12,.92) 100%),
    radial-gradient(118% 76% at 50% 46%, rgba(6,20,12,.7) 0%, rgba(6,20,12,.26) 56%, transparent 100%);
}
/* .flow-wrap.single and .rmc-wrap carry their own widths, which is what put the
   RMC page on a narrower rail than every other page. */
.rmc-page .flow-wrap, .rmc-page .flow-wrap.single, .rmc-page .rmc-wrap { max-width: var(--rail); }
.rmc-page .platform-pill { font-size: .78rem; }
.rmc-page .brand-line { color: #7ff0b0; }
.rmc-page .hero-script { margin-top: 1.1rem; color: #7ff0b0; }
.rmc-page .flow-card { border-radius: 18px; }
.rmc-page figcaption, .rmc-page .meter-head { font-size: .78rem; }

/* The RMC page needs its own collapsing nav, because it does not load the
   industrial stylesheet that gives the home page one. */
.rmc-page .menu-toggle { display: none; }
@media (max-width: 860px) {
  .rmc-page .menu-toggle {
    display: inline-flex; align-items: center; gap: .4rem; order: 2;
    background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
    border-radius: 8px; min-height: 44px; padding: .5rem .8rem; font: 600 .78rem var(--body, inherit);
  }
  .rmc-page .topbar { flex-wrap: wrap; gap: .8rem; }
  .rmc-page .topbar nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; }
  .rmc-page .topbar nav.menu-open { display: flex; }
  .rmc-page .topbar nav a { padding: .85rem; border-bottom: 1px solid rgba(255,255,255,.14); min-height: 44px; display: flex; align-items: center; }
  .rmc-page .top-actions { margin-left: auto; }
  .rmc-page .top-actions .hide-sm { display: none; }
}

/* The RMC hero photograph is a background on every screen. The old stylesheet turned
   it into a 190px strip above the text on a phone, which is the one thing this site
   does not do: the photograph stays behind the words, only the crop changes. */
.rmc-page .hero-band__photo.rmc.full { background-image: url("/website/img/card-rmc.webp"); background-position: center; }
@media (max-width: 860px) {
  .rmc-page .hero-band__photos,
  .rmc-page .hero-band__photos:has(.full) { position: absolute; inset: 0; height: auto; }
  .rmc-page .hero-band__photo.rmc.full { background-image: url("/website/img/card-rmc-sm.webp"); }
  .rmc-page .hero-band { min-height: auto; }
  .rmc-page .hero-band__inner.single { padding-block: clamp(2.5rem, 9vw, 4rem); }
  .rmc-page .hero-centre .cta-row { flex-direction: column; }
  .rmc-page .hero-centre .cta-row .btn { width: 100%; justify-content: center; }
}

/* ── The third colour, used sparingly ────────────────────────────────────────
   Orange belongs to crusher work and green to ready-mix, so neither can be
   spent on ordinary page furniture without saying something about the product.
   Teal says nothing about either, which is exactly why it is useful here.

   The rule it lives by: teal marks small instrument-like details — an eyebrow,
   a hairline, a resting status dot — and never a headline, a block of body
   copy, a button or a card. Each selector below is written against a surface
   that was checked, because the accent has two values and using the wrong one
   is how a heading ends up at 2.99:1 on a near-black band. */

/* Eyebrows on light sections take the deep teal (6.36:1 on white). */
.section.contact .eyebrow { color: var(--accent-ink); }

/* On the dark bands the same eyebrow takes the light teal (9.84:1 on ink). */
.meter-band .kicker,
.band--dark .kicker { color: var(--accent-lit); }

/* Status dots. Green still means online — that is a meaning, not a decoration —
   and the resting dot is teal rather than a dead grey. */
.dot.ok  { background: var(--g-400); box-shadow: 0 0 0 3px rgba(22,163,74,.22); }
.dot.off { background: var(--t-500); box-shadow: 0 0 0 3px rgba(15,143,184,.22); }

/* Hairlines between small repeated things. Low alpha, so they read as
   structure rather than as a colour in their own right. The text inside the
   proof strip stays white: five teal headings in a row is not a highlight. */
.proof-strip li + li { border-left: 1px solid rgba(92,200,232,.22); }
.hiw-steps li::before { background: var(--accent); }

/* Link hover on light sections — a quiet signal, distinct from the orange CTA. */
.section a:not(.button):not(.btn):not(.industry-card):hover { color: var(--accent-ink); }

/* The India badge keeps its warmth: it is the one place orange is allowed to be
   purely decorative, because the flag sits beside it. */
.india-badge { color: var(--o-200); }

/* ── The primary button ──────────────────────────────────────────────────────
   The site's main call to action was filled with #a8420a — the deep orange that
   exists so orange can be *read* on white. As a fill it is muddy, and it is not
   the colour the logo and the headlines use, so the most important button on the
   page was the one thing not wearing the brand.

   It now takes the brand orange with dark ink on top (5.58:1). White on this
   orange measures 2.85:1, so the label has to be dark — that is not a style
   choice, it is the only legible way to use this fill. */
.btn.solid,
.section .button {
  background: var(--o-400);
  color: #17251e;
  box-shadow: 0 10px 26px rgba(244,116,30,.28);
}
.btn.solid:hover,
.section .button:hover { background: var(--o-300); color: #17251e; }

/* The green bands keep their own solid button, and the closing band keeps its
   outlined one — both were already correct. */
.band--rmc .btn.solid { background: var(--rmc-ink); color: #fff; box-shadow: 0 10px 26px rgba(21,128,61,.28); }
.band--cta .btn.solid { background: transparent; color: #fff; box-shadow: none; }
.band--cta .btn.solid:hover { background: var(--rmc); color: #06301a; }