/* ── CrusherOS brand bands ───────────────────────────────────────────────────
   The site is built as a stack of bands, exactly like the brand sheet: a plant
   photograph on one side, the words on the other. The photographs are cropped so no
   text is baked into them — every headline here is real text, so it stays sharp on a
   phone, can be read by a screen reader, found by Google and changed without a
   designer. Crusher work is orange, ready-mix is green, and the two meet in the hero. */
:root{
  /* ── One palette for the whole site ────────────────────────────────────────
     Three families and nothing else. Every value below was measured against
     the ink, the paper and white before it was chosen, and the comment on each
     line says the only job it is allowed to do. A colour used for the wrong job
     is how a page stops looking professional, so the jobs are written down.

     ORANGE is crusher work. GREEN is ready-mix. TEAL is neither: it is the
     instrument colour, used in small doses only — a status dot, an eyebrow, a
     hairline, a link on hover — so the page has a third note without ever
     competing with the two that carry the brand. */

  /* Orange — crusher */
  --o-50:#fff3ea;    /* tinted background only */
  --o-200:#ffe0cc;   /* quiet text on the dark hero */
  --o-300:#ff9a52;   /* text on dark: 9.04 on ink */
  --o-400:#f4741e;   /* THE brand orange. Fill, with dark ink text: 5.58 */
  --o-500:#d95b0e;   /* hover / deeper fill, dark ink text only */
  --o-700:#a8420a;   /* orange as text on white: 6.09 */

  /* Green — ready-mix */
  --g-50:#eafaf0;    /* tinted background only */
  --g-200:#a8f0c9;   /* quiet text on the dark bands */
  --g-300:#4ade80;   /* text on dark: 10.90 on ink */
  --g-400:#16a34a;   /* fill */
  --g-600:#15803d;   /* fill with white text: 5.02 */
  --g-700:#0f5f2f;   /* green as text on white: 7.78 */

  /* Teal — the small-highlight accent */
  --t-300:#5cc8e8;   /* on dark: 9.84 on ink */
  --t-500:#0f8fb8;   /* dots, rules, icon strokes */
  --t-700:#0a6787;   /* teal as text on white: 6.36 */

  /* States */
  --warn:#e0a32e;    /* on dark: 8.54 */
  --danger:#a52c21;  /* on white: 6.48 */

  /* Ink and paper */
  --band-ink:#0b1116;--band-ink-2:#121c22;--band-line:rgba(255,255,255,.12);
  --band-text:#e3eaed;--band-muted:#9cb0b8;

  /* The two brand roles, pointing at the palette above */
  --crusher:var(--o-400);--crusher-ink:var(--o-700);
  --rmc:var(--g-300);--rmc-ink:var(--g-600);
  --accent:var(--t-500);--accent-ink:var(--t-700);--accent-lit:var(--t-300);
}

/* ── Band skeleton ────────────────────────────────────────────────────────── */
.band{position:relative;isolation:isolate;overflow:hidden}
.band__media{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.band__scrim{position:absolute;inset:0;z-index:1}
.band__inner{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:clamp(1.6rem,3.4vw,3rem) clamp(1rem,4vw,3rem);display:grid;gap:clamp(1.2rem,3vw,2.5rem);align-items:center}
.band h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.band h2 em{font-style:normal;display:block}
.band .kicker{margin:0 0 .6rem;font-size:.78rem;letter-spacing:.16em;font-weight:800}
.band .band-tag{margin:.7rem 0 0;font-weight:650;font-size:clamp(.95rem,1.4vw,1.1rem)}
.band-points{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.band-points li{display:flex;align-items:center;gap:.65rem;font-size:.92rem;font-weight:600}
.band-points .i{flex:0 0 auto;width:30px;height:30px;padding:6px;border-radius:9px;border:1px solid currentColor}
.band--dark{background:var(--band-ink);color:#fff}
.band--dark .band-tag{color:var(--band-text)}
.band--light{background:#f3f5f3;color:var(--ink)}
.band--light .band-tag{color:var(--ink-3)}

/* ── Hero: crusher photo, words, RMC photo ────────────────────────────────── */
.hero-band{background:var(--band-ink);color:#fff;position:relative;overflow:hidden}
.hero-band__photos{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr}
.hero-band__photo{background-position:center;background-size:cover}
.hero-band__photo.crusher{background-image:image-set(url("/website/img/hero-crusher.webp") 1x)}
.hero-band__photo.rmc{background-image:image-set(url("/website/img/hero-rmc.webp") 1x)}
/* Enough dark to read the middle headline, little enough to keep both plants visible. */
.hero-band__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(11,17,22,.30) 0%,rgba(11,17,22,.55) 22%,rgba(11,17,22,.93) 42%,rgba(11,17,22,.93) 58%,rgba(11,17,22,.55) 78%,rgba(11,17,22,.30) 100%),
  linear-gradient(180deg,rgba(11,17,22,.55) 0%,transparent 30%,transparent 58%,rgba(11,17,22,.8) 100%)}
.hero-band__inner{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem) clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
/* Each side gets its own panel of shade so the words never fight the photograph. */
.hero-side{display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:clamp(1rem,1.6vw,1.4rem);border-radius:16px;
  background:linear-gradient(90deg,rgba(9,14,18,.92) 0%,rgba(9,14,18,.74) 62%,rgba(9,14,18,.34) 100%);
  border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(2px)}
.hero-side.rmc{background:linear-gradient(270deg,rgba(9,14,18,.92) 0%,rgba(9,14,18,.74) 62%,rgba(9,14,18,.34) 100%)}
.hero-side .kicker{color:var(--crusher);margin:0}
.hero-side.rmc .kicker{color:var(--rmc)}
.hero-side h2{font-family:var(--display);font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.hero-side h2 em{font-style:normal;display:block}
.hero-side .kicker{font-size:.76rem;letter-spacing:.16em;font-weight:800}
.hero-side.crusher h2 em{color:var(--crusher)}
.hero-side.rmc h2 em{color:var(--rmc)}
.hero-side .band-points{margin-top:.4rem}
.hero-side.crusher .band-points .i{color:var(--crusher)}
.hero-side.rmc .band-points .i{color:var(--rmc)}
.hero-side.rmc{text-align:right}
.hero-side.rmc .band-points li{flex-direction:row-reverse}
.hero-centre{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:0}
.hero-centre .platform-pill{margin:0;padding:.4rem 1.2rem;border:1px solid var(--band-line);border-radius:999px;background:rgba(255,255,255,.07);font-size:.72rem;letter-spacing:.22em;font-weight:800}
.hero-centre h1{font-family:var(--display);font-size:clamp(2.4rem,5vw,4.4rem);line-height:.95;text-transform:uppercase;letter-spacing:-.015em}
.hero-centre h1 em{font-style:normal;display:block;color:var(--rmc)}
.hero-centre .lead{margin:0;color:var(--band-text);max-width:36ch}
.hero-centre .cta-row{justify-content:center;margin-top:.3rem}
.hero-script{font-family:var(--script,"Caveat",cursive);font-size:1.7rem;color:var(--rmc);margin:0}
.hero-script.orange{color:var(--crusher-soft,#ffc49b)}

/* ── Crusher band (dark, rock on the right) ───────────────────────────────── */
.band--crusher .band__media{background-image:url("/website/img/crusher-rock.webp");background-position:center right}
.band--crusher .band__scrim{background:linear-gradient(90deg,rgba(11,17,22,.97) 0%,rgba(11,17,22,.86) 38%,rgba(11,17,22,.55) 62%,rgba(11,17,22,.8) 100%)}
.band--crusher .band__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.band--crusher .kicker{color:var(--crusher)}
.band--crusher h2 em{color:var(--crusher)}
.band--crusher .band-points{justify-self:end}
.band--crusher .band-points .i{color:var(--crusher)}

/* ── RMC band (light, pour in the middle) ─────────────────────────────────── */
.band--rmc .band__media{background-image:url("/website/img/rmc-pour.webp");background-position:center}
.band--rmc .band__scrim{background:linear-gradient(90deg,rgba(243,245,243,.98) 0%,rgba(243,245,243,.9) 30%,rgba(243,245,243,.35) 55%,rgba(243,245,243,.92) 84%,rgba(243,245,243,.98) 100%)}
.band--rmc .band__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.band--rmc .kicker{color:var(--rmc-ink)}
.band--rmc h2 em{color:var(--rmc-ink)}
.band--rmc .band-points{justify-self:end}
.band--rmc .band-points .i{color:var(--rmc-ink)}
.band--rmc .btn.solid{background:var(--rmc-ink);box-shadow:0 10px 26px rgba(15,122,61,.28)}
.band--rmc .btn.solid:hover{background:#0f5f2f}

/* ── Three cards: trust, sustainable, anywhere ────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:1500px;margin:0 auto;padding:clamp(1.2rem,3vw,2rem) clamp(1rem,4vw,3rem)}
.trio-card{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;min-height:clamp(220px,20vw,270px);display:flex;flex-direction:column;justify-content:center;padding:clamp(1.2rem,2.4vw,1.8rem)}
.trio-card .band__media{border-radius:18px}
.trio-card h3{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1;text-transform:uppercase;position:relative;z-index:2}
.trio-card h3 em{font-style:normal;display:block}
.trio-card p{position:relative;z-index:2;margin:.6rem 0 0;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.trio-marks{position:relative;z-index:2;display:flex;gap:1.4rem;margin-top:1.2rem}
.trio-marks div{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.76rem;font-weight:700}
.trio-marks .i{width:26px;height:26px}
.trio-card.light{color:var(--ink)}
.trio-card.light .band__scrim{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,.25) 100%)}
.trio-card.light p{color:var(--ink-3)}
.trio-card.dark{color:#fff}
.trio-card.dark .band__scrim{background:linear-gradient(90deg,rgba(6,20,12,.95) 0%,rgba(6,20,12,.78) 45%,rgba(6,20,12,.35) 100%)}
.trio-card.dark p{color:#a8f0c9}
.trio-card.trust .band__media{background-image:url("/website/img/trust-peaks.webp")}
.trio-card.green .band__media{background-image:url("/website/img/green-leaf.webp")}
.trio-card.anywhere .band__media{background-image:url("/website/img/road-aerial.webp")}
.trio-card.green h3 em,.trio-card.anywhere h3 em{color:var(--rmc)}
.trio-card.trust h3 em{color:var(--crusher-ink)}
.trio-card.green .i,.trio-card.anywhere .i{color:var(--rmc)}
.trio-card.trust .i{color:var(--ink)}

/* ── Industries (blueprint paper) ─────────────────────────────────────────── */
.band--industries{background:#f7f7f5}
.band--industries .band__media{background-image:url("/website/img/blueprint.webp");background-position:left center;background-size:auto 100%;opacity:.55}
.band--industries .band__media.mirror{transform:scaleX(-1);left:auto;right:0;width:26%}
.band--industries .band__media.left{width:26%;right:auto}
.band--industries .band__scrim{background:linear-gradient(90deg,rgba(247,247,245,.35) 0%,rgba(247,247,245,.95) 22%,rgba(247,247,245,.95) 78%,rgba(247,247,245,.35) 100%)}
.band--industries .band__inner{grid-template-columns:minmax(0,auto) minmax(0,1fr);text-align:left}
.band--industries h2 em{color:var(--rmc-ink)}
.industry-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.industry-row div{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;font-size:.8rem;font-weight:650;color:var(--ink-3);line-height:1.3;border-left:1px solid var(--line);padding-left:1rem}
.industry-row div:first-child{border-left:0;padding-left:0}
.industry-row .i{width:32px;height:32px;color:var(--ink)}

/* ── Closing call to action ───────────────────────────────────────────────── */
.band--cta .band__media{background-image:url("/website/img/cta-rock.webp");background-position:center left}
.band--cta .band__scrim{background:linear-gradient(90deg,rgba(6,12,9,.45) 0%,rgba(6,12,9,.82) 34%,rgba(6,12,9,.95) 100%)}
.band--cta .band__inner{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.band--cta h2 em{color:var(--rmc)}
.band--cta .band-points .i{color:var(--rmc)}
.band--cta .btn.solid{background:transparent;border:2px solid var(--rmc);color:#fff;box-shadow:none}
.band--cta .btn.solid:hover{background:var(--rmc);color:#06301a;box-shadow:none}

/* ── Drawn product screens (inside the page, not photographs) ─────────────── */
.screen-mock{background:linear-gradient(180deg,var(--band-ink-2),var(--band-ink));border:1px solid var(--band-line);border-radius:18px;padding:.9rem;color:#fff;box-shadow:0 24px 60px rgba(11,11,12,.22)}
.screen-bar{display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem}
.screen-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.screen-bar strong{margin-left:.4rem;font-size:.76rem;font-weight:700;color:var(--band-text)}
.screen-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.screen-kpis div{background:rgba(255,255,255,.05);border:1px solid var(--band-line);border-radius:10px;padding:.55rem .6rem}
.screen-kpis small{display:block;font-size:.66rem;color:var(--band-muted)}
.screen-kpis b{font-size:1.05rem}
.screen-rows{display:grid;gap:.4rem}
.screen-rows span{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);border-radius:8px;padding:.45rem .55rem;font-size:.72rem;color:var(--band-text)}
.screen-rows i{width:7px;height:7px;border-radius:50%;background:var(--rmc)}
.screen-rows i.warn{background:#e0a32e}
.screen-rows em{font-style:normal;color:var(--band-muted);font-size:.68rem}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hero-band__inner{grid-template-columns:1fr 1fr;padding-top:clamp(2.2rem,6vw,3.5rem)}
  .hero-centre{grid-column:1 / -1;order:-1}
  .hero-side.rmc{text-align:left}
  .hero-side.rmc .band-points li{flex-direction:row}
  .trio{grid-template-columns:1fr}
  .trio-card{min-height:200px}
  .band--industries .band__inner{grid-template-columns:1fr}
  .industry-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
  .industry-row div{border-left:0;padding-left:0}
  .band--crusher .band__inner,.band--rmc .band__inner,.band--cta .band__inner{grid-template-columns:1fr}
  .band--crusher .band-points,.band--rmc .band-points,.band--cta .band-points{justify-self:start;grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  /* On a phone the photograph becomes the top of the card and the words sit below it,
     so nothing is ever read through a picture. */
  .hero-band__photos{position:relative;height:180px;grid-template-columns:1fr 1fr}
  .hero-band__scrim{background:linear-gradient(180deg,rgba(11,17,22,.55),rgba(11,17,22,.92) 70%)}
  .hero-band__inner{grid-template-columns:1fr;padding-top:1.6rem;text-align:center}
  .hero-side{text-align:center;align-items:center}
  .hero-side .band-points li{justify-content:center}
  .band{background-position:top center}
  .band--crusher .band__media,.band--rmc .band__media,.band--cta .band__media{inset:0 0 auto 0;height:150px;border-radius:0}
  .band--crusher .band__scrim,.band--rmc .band__scrim,.band--cta .band__scrim{background:none}
  .band--crusher .band__inner,.band--rmc .band__inner,.band--cta .band__inner{padding-top:168px}
  .band--crusher,.band--cta{background:var(--band-ink)}
  .band--rmc{background:#f3f5f3}
  .band-points{grid-template-columns:1fr!important}
  .industry-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band--industries .band__media{display:none}
  .screen-kpis{grid-template-columns:1fr 1fr}
}

/* ── Single-industry hero (the RMC page) ──────────────────────────────────── */
.hero-band__photos:has(.full){grid-template-columns:1fr}
.hero-band__photo.full{background-position:center right}
.hero-band__scrim.green{background:
  linear-gradient(90deg,rgba(6,20,12,.92) 0%,rgba(6,20,12,.78) 45%,rgba(6,20,12,.42) 100%),
  linear-gradient(180deg,rgba(6,20,12,.6) 0%,transparent 35%,transparent 60%,rgba(6,20,12,.85) 100%)}
.hero-band__inner.single{grid-template-columns:minmax(0,1fr)}
.hero-band__inner.single .hero-centre{text-align:left;align-items:flex-start;max-width:56ch}
.hero-band__inner.single .hero-centre .lead{max-width:60ch}
.hero-band__inner.single .cta-row{justify-content:flex-start}
@media (max-width:720px){
  .hero-band__photos:has(.full){position:relative;height:190px}
  .hero-band__inner.single .hero-centre{text-align:center;align-items:center}
  .hero-band__inner.single .cta-row{justify-content:center}
}

/* ── Plant flow strip (photographs of the actual work) ────────────────────── */
.flow-band{background:#fff;padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line)}
.flow-wrap{max-width:1500px;margin:0 auto;display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.flow-card{border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem 1.2rem;background:#fff;box-shadow:0 8px 26px rgba(11,11,12,.05)}
.flow-card h3{display:flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem;font-weight:800}
.flow-card h3 .dot{width:15px;height:15px;border-radius:50%;display:inline-block}
.flow-card.crusher h3 .dot{background:var(--orange-ink)}
.flow-card.rmc h3 .dot{background:var(--rmc-ink)}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:.3rem}
.flow-steps li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;font-size:.74rem;font-weight:650;color:var(--ink-3);line-height:1.25}
.flow-shot{width:100%;aspect-ratio:4/3;border-radius:10px;background:#f7f7f5 center/contain no-repeat;border:1px solid var(--line)}
.flow-arrow{flex:0 0 auto;align-self:flex-start;width:13px;height:13px;margin-top:1.6rem;color:var(--muted)}

/* ── Wide plant bands and the worker portrait ─────────────────────────────── */
.band--wide-crusher .band__media{background-image:url("/website/img/crusher-wide.webp");background-position:center}
.band--wide-rmc .band__media{background-image:url("/website/img/rmc-wide.webp");background-position:center}
.band--worker{background:linear-gradient(120deg,#f7f7f5,#edf2ee)}
.band--worker .band__media{background-image:url("/website/img/worker.webp");background-position:right center;background-size:contain;background-repeat:no-repeat}
.band--worker .band__scrim{background:linear-gradient(90deg,rgba(247,247,245,.98) 0%,rgba(247,247,245,.92) 46%,rgba(247,247,245,.15) 100%)}
@media (max-width:1180px){.flow-wrap{grid-template-columns:1fr}}
@media (max-width:720px){
  .flow-steps{flex-wrap:wrap;gap:.7rem}
  .flow-steps li{flex:0 0 calc(33.333% - .5rem)}
  .flow-arrow{display:none}
}

.brand-line{margin:0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--rmc)}
.band--worker .band__inner{grid-template-columns:minmax(0,1fr)}
.band--worker blockquote{margin:0;max-width:54ch;border-left:3px solid var(--rmc-ink);padding-left:1.3rem}
.band--worker h2 em{color:var(--rmc-ink)}
.worker-script{color:var(--rmc-ink)}
@media (max-width:720px){.band--worker .band__media{background-position:center top;background-size:cover;opacity:.25}.band--worker .band__scrim{background:linear-gradient(180deg,rgba(247,247,245,.86),rgba(247,247,245,.97))}}