/* ===== TDU responsive layer =====
   Media queries can't be expressed inline; this sheet only refines the
   existing inline layout at smaller widths (mobile-first breakpoints).
   Desktop layout is untouched. */

html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- Horizontal padding shrink (sections / topbar / footer / hero bar / stat cells) ---- */
@media (max-width: 1024px) {
  .r-scope > section[style*="56px"],
  .r-scope > footer,
  .r-topbar,
  .r-herobar        { padding-left: 40px !important; padding-right: 40px !important; }
  .r-stats4 > div   { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 600px) {
  .r-scope > section[style*="56px"],
  .r-scope > footer,
  .r-topbar,
  .r-herobar        { padding-left: 20px !important; padding-right: 20px !important; }
  .r-stats4 > div   { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---- Big display headings: fluid, only shrinks, never grows past base ---- */
@media (max-width: 1024px) {
  .r-h1 { font-size: clamp(34px, 8.2vw, 82px) !important; }
}
/* Section headings shrink on phones only (they wrap fine above 600) */
@media (max-width: 600px) {
  .r-scope h2 { font-size: clamp(26px, 6.6vw, 40px) !important; }
}

/* ---- Asymmetric two-column layouts → single column ---- */
@media (max-width: 860px) {
  .r-two { grid-template-columns: 1fr !important; gap: 36px !important; }
  .r-excl { grid-template-columns: 1fr !important; }
}

/* ---- Three equal columns → 2 → 1 ---- */
@media (max-width: 900px) { .r-3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .r-3 { grid-template-columns: 1fr !important; } }

/* ---- Two equal columns (spec lists, team cards) → 1 ---- */
@media (max-width: 560px) { .r-2 { grid-template-columns: 1fr !important; } }

/* ---- Feature rows (index / title / copy) → stack ---- */
@media (max-width: 760px) {
  .r-feat { grid-template-columns: 1fr !important; gap: 6px 0 !important; }
}

/* ---- Bordered cell grids: stack, convert right borders to bottom rules ---- */
@media (max-width: 860px) {
  .r-cells { grid-template-columns: 1fr !important; }
  .r-cells > * { border-right: none !important; border-bottom: 2px solid var(--color-text) !important; }
  .r-cells > *:last-child { border-bottom: none !important; }
}

/* ---- Home hero stat strip (on red ground) ---- */
@media (max-width: 600px) {
  .r-stats { grid-template-columns: 1fr 1fr !important; }
  .r-stats > div {
    border-left: none !important; padding-left: 0 !important;
    border-top: 2px solid var(--color-bg) !important; padding-top: 16px !important;
  }
}

/* ---- Model-page 4-up stat strip ---- */
@media (max-width: 700px) { .r-stats4 { grid-template-columns: 1fr 1fr !important; } }

/* ---- Enquire form inner grid + form box padding ---- */
@media (max-width: 560px) { .r-form { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .r-formbox { padding: 22px !important; } }

/* ---- Materials label rows → stack ---- */
@media (max-width: 560px) { .r-labelrow { grid-template-columns: 1fr !important; gap: 4px !important; } }

/* ---- About stat row: tighten gap on small phones ---- */
@media (max-width: 560px) { .r-statrow { gap: 22px !important; } }

/* ---- Footer ---- */
@media (max-width: 860px) { .r-foot { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .r-foot { grid-template-columns: 1fr !important; } }
@media (max-width: 860px) { .r-foot > p { grid-column: 1 / -1 !important; } }

/* ---- Navigation: desktop links vs mobile hamburger ---- */
.r-mobnav { display: none; }
@media (max-width: 860px) {
  .r-desknav { display: none !important; }
  .r-mobnav  { display: block !important; }
}
.r-mobnav > summary { list-style: none; }
.r-mobnav > summary::-webkit-details-marker { display: none; }
.r-mobnav[open] .r-burger-top { transform: translateY(6px) rotate(45deg); }
.r-mobnav[open] .r-burger-mid { opacity: 0; }
.r-mobnav[open] .r-burger-bot { transform: translateY(-6px) rotate(-45deg); }
.r-mobnav a:hover { background: var(--color-accent-100); }