/* ============================================================
   DISONG Equipment LLC — Phase 1 stylesheet
   Light industrial corporate theme. No build step.
   ============================================================ */

:root {
  --navy: #0f2a44;
  --navy-2: #17395c;
  --steel: #38617f;
  --accent: #c8892a;
  --accent-soft: #f0e2c8;
  /* Phase 3.2 accessibility: #c8892a is the brand accent and stays the fill colour, but as
     small text on white it only reaches 2.97:1. This deeper amber keeps the same hue and
     reaches 5.13:1 on white / 4.78:1 on --bg-alt, so small labels are readable. */
  --accent-text: #966312;
  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --bg-dark: #0f2a44;
  --text: #1b2733;
  --text-2: #55677a;
  --line: #dde4ec;
  --line-strong: #c3ceda;
  --radius: 4px;
  --maxw: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--navy); margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: #e6edf5; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head p { color: var(--text-2); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
  font-weight: 700; color: var(--accent-text); margin-bottom: .6em;
}
.section-dark .eyebrow { color: var(--accent); }
.lead { font-size: 1.08rem; color: var(--text-2); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand .wordmark {
  font-size: 1.5rem; font-weight: 800; letter-spacing: .12em;
  color: var(--navy); line-height: 1;
}
/* logo slot: the approved DISONG logo is dropped in as brand/logo-dark.svg (header)
   and brand/logo-white.svg (footer); js/main.js wires the fallback chain. */
.brand img, .brand-logo { height: 34px; width: auto; display: block; }
.footer-brand .brand-logo { height: 26px; margin-bottom: 10px; }
.brand .logo-pending {
  display: block; font-size: .58rem; letter-spacing: .04em;
  color: var(--text-2); text-transform: uppercase;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  padding: 8px 10px; font-size: .9rem; color: var(--text); border-radius: var(--radius);
}
.nav a:hover { background: var(--bg-alt); text-decoration: none; }
.nav a.active { color: var(--navy); font-weight: 600; }
.nav a.nav-cta {
  border: 1px solid var(--navy); color: var(--navy); font-weight: 600; margin-left: 6px;
}
.nav a.nav-cta:hover { background: var(--navy); color: #fff; }
.nav a.nav-cta-primary { background: var(--accent); border-color: var(--accent); color: #1d1200; }
.nav a.nav-cta-primary:hover { background: #b2761f; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 7px 11px; font-size: 1rem; cursor: pointer; color: var(--navy);
  /* Phase 3.2: keep the touch target at 44 px even though the glyph is small. */
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 66px 0; }
.hero p.lead { font-size: 1.12rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #1d1200; }
.btn-primary:hover { background: #b2761f; text-decoration: none; }
.btn-ghost { border-color: var(--line-strong); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--navy); text-decoration: none; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); text-decoration: none; }
.btn-block { display: block; width: 100%; text-align: center; }

.factbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.factbar div { background: #fff; padding: 20px 22px; }
.factbar strong { display: block; color: var(--navy); font-size: 1.05rem; }
.factbar span { color: var(--text-2); font-size: .88rem; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 22px; }
/* Phase 3.2: a grid child may never be able to shrink below its min-content width, which
   used to push the second column (and the page) wider than the viewport on /quote at
   tablet widths. min-width:0 lets the column track the container and the inner content
   wrap or clip instead of scrolling the whole page sideways. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .45em; }
.card p, .card li { color: var(--text-2); font-size: .95rem; }
.card .card-actions { margin-top: auto; padding-top: 16px; }
.card-link { font-weight: 600; font-size: .92rem; display: inline-block; padding: 4px 0; }
.principle { border-left: 3px solid var(--accent); padding-left: 14px; }
.principle strong { color: var(--navy); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.tag {
  font-size: .76rem; letter-spacing: .02em; text-transform: uppercase;
  background: var(--bg-alt); border: 1px solid var(--line); color: var(--steel);
  padding: 4px 8px; border-radius: 999px;
}
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { border-top: 1px solid var(--line); padding: 12px 0; }
.detail-list li:first-child { border-top: 0; }
.detail-list strong { display: block; color: var(--navy); font-size: .96rem; }
.detail-list span { color: var(--text-2); font-size: .92rem; }

/* ---------- product category blocks ---------- */
.category { border-top: 3px solid var(--navy); background: #fff; padding: 30px; }
.category-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; }
.category .summary { color: var(--text-2); }
.cat-index {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  color: var(--accent-text); text-transform: uppercase; margin-bottom: 6px;
}
.cat-cta { margin-top: 18px; }

/* ---------- image placeholders (Phase 1) ---------- */
.ph { margin: 0; }
.ph-box {
  border: 2px dashed var(--line-strong); background: repeating-linear-gradient(
    45deg, #fbfcfe, #fbfcfe 12px, #f2f5f9 12px, #f2f5f9 24px);
  color: var(--steel); display: flex; align-items: center; justify-content: center;
  min-height: 190px; font-size: .78rem; letter-spacing: .14em; font-weight: 700;
  text-align: center; padding: 18px;
}
.ph figcaption {
  font-size: .76rem; color: var(--text-2); margin-top: 8px; line-height: 1.5;
  border-left: 2px solid var(--accent-soft); padding-left: 10px;
}
.ph figcaption strong { color: var(--navy); }
.ph-hero .ph-box { min-height: 320px; }
.ph-tall .ph-box { min-height: 300px; }

/* ---------- real imagery (Phase 1.3) ----------
   Every supplied image keeps its own aspect ratio: no box is given a fixed height,
   so nothing is cropped and nothing is stretched. The width/height attributes that
   the manifest writes into each <img> let the browser reserve the space before the
   file arrives (no layout shift), and `height: auto` keeps the ratio fluid. */
.fig { margin: 0; }
.fig img {
  width: 100%; height: auto; max-width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--radius);
  background: #eef3f8;          /* reserved area before the file paints */
}
.fig figcaption { font-size: .76rem; color: var(--text-2); margin-top: 8px; }

/* hero image: sits in its own column (text never overlaps it, so the DISONG mark
   that is part of the photograph stays uncovered and the headline stays legible) */
.hero .ph-hero, .hero .fig { width: 100%; }
.hero .fig img { border: 1px solid var(--line); }

/* grid cards: give the media a small, even frame without changing its ratio */
.grid .fig img, .card .fig img { box-shadow: 0 1px 2px rgba(11, 31, 58, .06); }

/* ---------- brand film (Phase 3.3) ----------
   The homepage film is a web delivery derivative of the approved VIDEO-01 master; the master
   file itself is never shipped to the browser. It is never autoplayed and never downloaded on
   page load: preload="none" plus a webp poster means the band costs one image until a visitor
   presses play, and the width/height attributes on the element reserve the 16:9 box, so the
   section cannot shift layout when it appears. Native controls only — no player library, and
   nothing covers the picture, so the film's own titles and contact bar stay readable. */
.film-frame { max-width: 1040px; }
.film-video {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--navy);            /* reserved area before the poster paints */
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .06);
}
.film-section .scene-note { margin-top: 14px; max-width: 780px; }

/* ---------- misc blocks ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 20px 46px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700;
}
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--bg-alt); padding: 16px 18px; font-size: .92rem; color: var(--text-2);
}
.notice strong { color: var(--navy); }
/* Phase 3.1E: one-line honesty note above the Projects image band — states that the
   scenes are representative/illustrative, not photographs of completed installations. */
.scene-note {
  margin: 0; font-size: .9rem; color: var(--text-2); line-height: 1.5;
}
.reserved {
  border: 1px dashed var(--line-strong); background: #fcfdff; padding: 20px;
  font-size: .92rem; color: var(--text-2);
}
.reserved h3 { font-size: 1rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9rem; color: var(--text-2); }
.meta-row strong { color: var(--navy); }
.faq dt { font-weight: 600; color: var(--navy); margin-top: 18px; }
.faq dd { margin: 6px 0 0; color: var(--text-2); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
/* A translated label can be longer than the English one, and a grid item defaults to
   min-width:auto — which lets that label push the whole form wider than a phone screen.
   The form is a funnel page, so it has to fit at 360-390px in every language. */
.grid-form > * { min-width: 0; }
.field { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }
.field label { overflow-wrap: anywhere; }
.field label { font-size: .87rem; font-weight: 600; color: var(--navy); }
.field .hint { font-size: .78rem; color: var(--text-2); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid rgba(200,137,42,.35); border-color: var(--accent);
}
/* Phase 3.2: one consistent, visible keyboard focus ring for every interactive element
   (previously only the form fields had one, so tabbing through links and buttons relied on
   the browser default). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible, .nav a:focus-visible, .card-link:focus-visible {
  outline: 2px solid var(--navy-2); outline-offset: 2px;
}
.field textarea { min-height: 132px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: var(--text-2); }
.check input { margin-top: 3px; }
.form-status { margin-top: 14px; font-size: .92rem; }
.form-status.ok { color: #14663f; }
.form-status.err { color: #a3241f; }
.rfq-output { margin-top: 18px; }
.rfq-output textarea {
  width: 100%; min-height: 260px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px;
  background: #fbfcfe;
}

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #c8d5e3; padding: 52px 0 26px; font-size: .9rem; }
.site-footer a { color: #dbe6f1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h4 {
  color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-legal {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .8rem; color: #9db1c6;
}
.footer-wordmark { font-weight: 800; letter-spacing: .12em; color: #fff; font-size: 1.2rem; }
.footer-note { font-size: .8rem; color: #9db1c6; margin-top: 10px; }

@media (max-width: 980px) {
  .hero-grid, .category-head { grid-template-columns: 1fr; }
  /* form + side figure: one column from tablet down, so the form keeps comfortable field
     widths instead of being squeezed into half the viewport. */
  .grid-form { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Phase 3.2: seven nav links plus the two header buttons stop fitting on one line as soon
     as the layout starts collapsing here — at 768 px the last link was stranded next to the
     buttons and the header read as accidentally wrapped. Use the menu toggle from tablet
     width down, like the rest of the header already does below 720 px. */
  .nav-toggle { display: inline-flex; }
  .header-inner { flex-wrap: wrap; }
  .nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 10px 0 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 8px; border-bottom: 1px solid var(--line); }
  .nav a.nav-cta { margin-left: 0; border-bottom: 1px solid var(--line); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .factbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .section { padding: 46px 0; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Batch 8.3B — the conversation widget
   Mobile-first: the panel is a bottom sheet on a phone and a card on a desktop.  It is
   dismissible, it never opens by itself, and it sits above nothing the visitor needs —
   the launcher is a single button in the corner until it is wanted.
   ============================================================ */
.disong-chat-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 42, 68, .28);
}
.disong-chat-launcher:hover { background: var(--navy-2); }
.disong-chat-launcher:focus-visible,
.disong-chat-close:focus-visible,
.disong-chat-form button:focus-visible,
.disong-chat-exit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.disong-chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 42, 68, .3);
  overflow: hidden;
}
.disong-chat[hidden] { display: none; }

.disong-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--navy);
  color: #fff;
}
.disong-chat-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.disong-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-alt);
}
.disong-chat-msg {
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.disong-chat-msg.from-team { background: #fff; border: 1px solid var(--line); color: var(--text); }
.disong-chat-msg.from-visitor { background: var(--navy); color: #fff; margin-left: auto; max-width: 88%; }
.disong-chat-msg.muted { color: var(--text-2); font-style: italic; }
.disong-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.disong-chat-form textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;              /* 16px stops iOS Safari zooming the page on focus */
}
.disong-chat-form button {
  align-self: flex-end;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.disong-chat-exits { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; background: #fff; }
.disong-chat-exit {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.disong-chat-exit:hover { border-color: var(--accent); color: var(--accent-text); }

@media (max-width: 560px) {
  .disong-chat {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 84vh;
    border-radius: 12px 12px 0 0;
  }
  .disong-chat-launcher { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .disong-chat, .disong-chat-launcher { transition: none; }
}

/* ---------------------------------------------------------------- language selector (8.3D)
   A compact header control, not a modal: the owner's rule is that language choice must reduce
   friction, so it never blocks the page and never asks twice.  It is rendered as real links so
   it works with scripting disabled, and the current locale is marked for assistive technology. */
.lang-switch { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lang-switch .lang-label { color: var(--text-2); }
.lang-switch a {
  color: var(--text-2); text-decoration: none; padding: 2px 6px; border-radius: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.lang-switch a:hover { background: var(--bg-alt); color: var(--navy); text-decoration: none; }
.lang-switch a[aria-current="true"] {
  color: var(--navy); border-color: var(--line); background: var(--bg-alt); font-weight: 600;
}
/* The nav carries its own bottom margin on narrow screens; keep the selector from crowding it. */
@media (max-width: 720px) {
  .lang-switch { margin-left: auto; font-size: 12px; }
  .lang-switch .lang-label { display: none; }
}

/* ============================================================
   Privacy & tracking layer — consent notice, policy page.
   Same tokens as the rest of the site; no new palette.
   ============================================================ */

.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--navy);
  color: #fff;
  border-top: 3px solid var(--accent);
  box-shadow: 0 -6px 24px rgba(15, 42, 68, 0.18);
}
.consent-bar[hidden] { display: none; }
.consent-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.consent-bar__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  max-width: 62ch;
  color: #e8eef5;
}
.consent-bar__text a { color: #fff; text-decoration: underline; }
.consent-bar__saved {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--accent-soft);
}
.consent-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-consent {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.btn-consent:hover { background: rgba(255, 255, 255, 0.12); }
.btn-consent[data-consent="accept"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.btn-consent[data-consent="accept"]:hover { background: #b87c22; }

/* A footer control that has to sit inline with links without looking like a button. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer-legal__links { display: inline-flex; flex-wrap: wrap; gap: 16px; }

/* Privacy policy page: readable measure, nothing else new. */
.policy { max-width: 78ch; }
.policy-meta { margin: 0; font-size: 14px; color: #5b6b7c; }
.policy-section { margin-top: 2.2em; }
.policy-section h2 { font-size: 20px; margin-bottom: 0.5em; }
.policy ul { margin: 10px 0 0; padding-left: 20px; }
.policy li { margin: 6px 0; line-height: 1.6; }

@media (max-width: 720px) {
  .consent-bar__inner { padding: 14px 0; }
  .consent-bar__actions { width: 100%; }
  .btn-consent { flex: 1 1 auto; text-align: center; }
}

/* Concrete batching plant model line (js/main.js: batchingLine) — the price table a buyer
   searching for a plant must be able to read on a phone without the page scrolling sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 2px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 760px; }
.spec-table th, .spec-table td { padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
.spec-table thead th { background: var(--bg-alt); color: var(--navy); font-size: 0.78rem;
  letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table td:first-child, .spec-table td:last-child { color: var(--navy); }
@media (max-width: 720px) { .spec-table { min-width: 660px; font-size: 0.9rem; } }