/* =========================================================
   MCube – REMA TIP TOP INCO Diagnostics Microsite Stylesheet
   Brand system: REMA TIP TOP Corporate Design Manual 2017
   ========================================================= */

:root {
  /* Logo & background colors (from the brand manual) */
  --rtt-black:        #1a1a18;
  --rtt-red:          #ef232a;
  --rtt-red-hover:    #c81b22;
  --rtt-dark-gray:    #494948;
  --rtt-medium-gray:  #919292;
  --rtt-light-gray:   #f4f4f4;
  --rtt-white:        #ffffff;

  /* Accent colors – used SPARINGLY per brand rules */
  --rtt-green:        #00A983;
  --rtt-blue:         #10BAE7;
  --rtt-yellow:       #FFCC00;

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fw-thin:   200;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  /* MCube uses a slightly wider container than Remaclean because the header
     carries 5 nav items + a 19-character CTA. The standard 1200px cap left
     no room for the // ONE BRAND // ONE SOURCE // ONE SYSTEM brand claim;
     1320px gives the claim + nav + CTA enough room to coexist on wide
     desktops, with the claim still hiding gracefully on narrower screens. */
  --container: 1320px;
  --container-narrow: 880px;
  --radius: 0;          /* RTT design favors squared edges */
  --radius-sm: 2px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: 17px;
  line-height: 1.65;
  color: var(--rtt-black);
  background: var(--rtt-white);
  -webkit-font-smoothing: antialiased;
}
img,svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--rtt-red); }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { padding: 0; margin: 0; list-style: none; }
h1,h2,h3,h4 { font-weight: var(--fw-reg); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s-4) 0; }
p  { margin: 0 0 var(--s-4) 0; }
:focus-visible { outline: 2px solid var(--rtt-red); outline-offset: 3px; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.container--narrow { max-width: var(--container-narrow); }

/* ---------- Brand utilities ---------- */
.slash {
  color: var(--rtt-red);
  font-weight: var(--fw-bold);
  letter-spacing: -0.05em;
  display: inline-block;
  padding: 0 .15em;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rtt-red);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "// ";
  color: var(--rtt-red);
  font-weight: var(--fw-bold);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #ebebeb;
  transition: padding .25s var(--ease);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.brand__logo { height: 36px; width: auto; }
.brand__claim {
  font-size: 11px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rtt-dark-gray);
  white-space: nowrap;
}
/* Hide the brand claim when the container can no longer fit it alongside
   5 nav items + lang switch + the 19-char CTA. The 1320px container is the
   threshold where everything still has breathing room. */
@media (max-width: 1320px) {
  .brand__claim { display: none; }
}
.brand__claim .slash { color: var(--rtt-red); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__list { display: flex; gap: var(--s-6); align-items: center; }
.nav__link {
  font-size: 13px;
  font-weight: var(--fw-reg);
  color: var(--rtt-black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.nav__link:hover { color: var(--rtt-red); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  background: var(--rtt-red);
  color: #fff !important;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s var(--ease);
}
.nav__list { flex-shrink: 0; }
.brand { min-width: 0; }
.nav__cta:hover { background: var(--rtt-red-hover); }
.nav__toggle { display: none; }

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rtt-medium-gray);
  margin-left: var(--s-3);
  padding-left: var(--s-4);
  border-left: 1px solid #e0e0e0;
}
.lang-switch__btn {
  font: inherit;
  padding: 6px 2px;
  color: var(--rtt-medium-gray);
  font-weight: var(--fw-med);
  letter-spacing: 0.14em;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
  cursor: pointer;
}
.lang-switch__btn:hover { color: var(--rtt-red); }
.lang-switch__btn.is-active {
  color: var(--rtt-black);
  border-bottom-color: var(--rtt-red);
}
.lang-switch__sep { color: #d0d0d0; user-select: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.btn--primary { background: var(--rtt-red); color: #fff; }
.btn--primary:hover { background: var(--rtt-red-hover); color: #fff; transform: translateY(-1px); }
.btn--ghost {
  background: rgba(255,255,255,.08);
  color: var(--rtt-white);
  border: 1.5px solid rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  color: #fff;
}
.btn--outline {
  background: transparent;
  color: var(--rtt-black);
  border: 1px solid var(--rtt-black);
}
.btn--outline:hover { background: var(--rtt-black); color: #fff; }

/* Arrow inside button */
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--rtt-black);
  color: #fff;
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  align-items: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.55) contrast(1.05);
}
/* Diagonal cut overlay – RTT signature */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(26,26,24,.85) 0%, rgba(26,26,24,.55) 45%, rgba(26,26,24,0) 80%),
    linear-gradient(to bottom, rgba(26,26,24,0) 60%, rgba(26,26,24,.7) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--s-9) 0;
  max-width: 760px;
  /* sits inside .container – left-aligned within the 1200 px content column */
}
.hero__eyebrow { color: #fff; }
.hero__eyebrow::before { color: var(--rtt-red); }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  font-weight: var(--fw-reg);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s-5);
}
.hero h1 strong { font-weight: var(--fw-bold); }
.hero h1 .accent { color: var(--rtt-red); font-weight: var(--fw-bold); }
.hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: var(--fw-reg);
  color: rgba(255,255,255,.88);
  max-width: 580px;
  line-height: 1.6;
  margin-bottom: var(--s-6);
}
.hero__cta-row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);  /* breathing room before stats strip */
}

/* Hero stats strip */
.hero__stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  background: rgba(26,26,24,.92);
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
}
.hero__stat {
  background: rgba(26,26,24,.92);
  padding: var(--s-5) var(--s-5);
  text-align: left;
}
.hero__stat-value {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: var(--fw-reg);
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1;
}
/* Red is reserved for genuine units (m/s, °C, h). The qualifier "+"
   in "150+" is intentionally NOT wrapped in .unit, so the red treatment
   stays consistent across the row. */
.hero__stat-value .unit {
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  font-size: 0.65em;
  margin-left: 6px;
  letter-spacing: 0;
}
.hero__stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.6);
  margin-top: 8px;
  font-weight: var(--fw-reg);
}

/* ---------- Section base ---------- */
.section {
  /* Halved from var(--s-10) — section-to-section vertical gap reduced 50%. */
  padding: var(--s-8) 0;
  position: relative;
}
.section--tight { padding: var(--s-8) 0; }
.section--gray { background: var(--rtt-light-gray); }
.section--dark { background: var(--rtt-black); color: #fff; }

.section__head {
  max-width: 760px;
  margin-bottom: var(--s-8);
}
.section__head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: var(--fw-thin);
  letter-spacing: -0.015em;
}
.section__head h2 strong { font-weight: var(--fw-med); }
.section__head p {
  font-size: 1.1rem;
  color: var(--rtt-dark-gray);
  font-weight: var(--fw-thin);
}
.section--dark .section__head p { color: rgba(255,255,255,.75); }

/* ---------- Value prop / problem strip ---------- */
.problem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.problem__card { padding-top: var(--s-4); border-top: 3px solid var(--rtt-red); }
.problem__card h3 {
  font-size: 1.25rem;
  font-weight: var(--fw-med);
  margin-bottom: var(--s-3);
}
.problem__card p {
  color: var(--rtt-dark-gray);
  margin: 0;
}

/* ---------- Product range cards ---------- */
.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e8e8;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.18);
}
.product-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--rtt-light-gray);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.product-card__tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  margin-bottom: var(--s-3);
}
.product-card__tag::before { content: "// "; }
.product-card h3 {
  font-size: 1.4rem;
  font-weight: var(--fw-med);
  margin-bottom: var(--s-3);
  letter-spacing: -0.005em;
}
.product-card p {
  font-size: 0.95rem;
  color: var(--rtt-dark-gray);
  margin-bottom: var(--s-4);
  flex: 1;
}
.product-card__specs {
  display: flex;
  gap: var(--s-4);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rtt-medium-gray);
  border-top: 1px solid #ececec;
  padding-top: var(--s-4);
  margin-top: auto;
}
.product-card__specs span strong {
  display: block;
  font-size: 14px;
  color: var(--rtt-black);
  font-weight: var(--fw-med);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Comparison toggle (BNA 2026 catalogue tables) ---------- */
.compare {
  margin-top: var(--s-7);
  border-top: 1px solid #e0e0e0;
}
.compare__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  background: #fff;
  border: 1px solid #e0e0e0;
  margin-top: -1px;
  font-size: 14px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rtt-black);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* When details is open, pin the toggle to the top of the viewport (just under the
   sticky site header) so the user can close the comparison at any scroll depth. */
.compare[open] > .compare__summary {
  position: sticky;
  top: 76px;
  z-index: 30;
  box-shadow: 0 8px 16px -10px rgba(0,0,0,.18);
}
.compare__summary::-webkit-details-marker { display: none; }
.compare__summary:hover { background: var(--rtt-black); color: #fff; border-color: var(--rtt-black); }
.compare__summary:focus-visible { outline: 2px solid var(--rtt-red); outline-offset: 3px; }
.compare__icon {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
}
.compare__icon::before,
.compare__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.compare__icon::before {
  /* horizontal */
  top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%);
}
.compare__icon::after {
  /* vertical */
  top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%);
}
.compare[open] .compare__icon::after { transform: translateX(-50%) scaleY(0); }

.compare__body {
  padding: var(--s-6) 0 var(--s-3);
  background: transparent;
}
.compare__intro {
  color: var(--rtt-dark-gray);
  font-size: 0.95rem;
  max-width: 760px;
  margin-bottom: var(--s-6);
}
.compare__h3 {
  font-size: 1rem;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rtt-black);
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 2px solid var(--rtt-red);
  display: inline-block;
}
.compare__legend {
  font-size: 0.82rem;
  color: var(--rtt-dark-gray);
  line-height: 1.7;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid #e0e0e0;
}
.compare__legend strong { color: var(--rtt-black); }
.compare__note { color: var(--rtt-red); font-weight: var(--fw-med); }

.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e0e0;
  background: #fff;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.compare-table thead {
  background: var(--rtt-black);
  color: #fff;
}
.compare-table th {
  text-align: left;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  padding: 12px 14px;
  white-space: nowrap;
  border-right: 1px solid #2a2a28;
}
.compare-table th:last-child { border-right: 0; }
.compare-table td {
  padding: 10px 14px;
  border-top: 1px solid #ececec;
  border-right: 1px solid #ececec;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--rtt-dark-gray);
}
.compare-table td:last-child { border-right: 0; }
.compare-table tbody tr:nth-child(even) td { background: #fafafa; }
.compare-table tbody tr:hover td { background: #fff5f5; }
.compare-table .cell-type { color: var(--rtt-black); white-space: nowrap; }
.compare-table .cell-type strong { font-weight: var(--fw-med); }

/* yes/no cells with check / dash glyphs */
.compare-table .cell-yes,
.compare-table .cell-no,
.compare-table .cell-na {
  text-align: center;
  position: relative;
  min-width: 56px;
}
.compare-table .cell-yes::before { content: "✓"; color: #00A983; font-weight: var(--fw-bold); }
.compare-table .cell-no::before  { content: "–"; color: var(--rtt-medium-gray); }
.compare-table .cell-na::before  { content: "–"; color: var(--rtt-medium-gray); }
.compare-table .cell-yes[data-note]::after {
  content: attr(data-note);
  font-size: 0.65em;
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  vertical-align: super;
  margin-left: 2px;
}

@media (max-width: 600px) {
  .compare__summary { font-size: 13px; padding: var(--s-4); }
  .compare-table { font-size: 0.78rem; }
  .compare-table th, .compare-table td { padding: 8px 10px; }
}

/* ---------- ROI strip ---------- */
.roi {
  background: var(--rtt-black);
  color: #fff;
  padding: var(--s-9) 0;
  position: relative;
  overflow: hidden;
}
.roi::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 50%, rgba(239,35,42,.15) 50%);
  pointer-events: none;
}
.roi__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.roi h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  font-weight: var(--fw-thin);
  margin-bottom: var(--s-5);
}
.roi h2 strong { font-weight: var(--fw-med); color: var(--rtt-red); }
.roi p { color: rgba(255,255,255,.78); font-size: 1.05rem; }
.roi__list { margin-top: var(--s-5); }
.roi__list li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  color: rgba(255,255,255,.85);
  font-size: 0.98rem;
}
.roi__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 8px;
  background: var(--rtt-red);
}
.roi__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.roi__visual img { width: 100%; height: 100%; object-fit: cover; }
.roi__visual::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(to top, rgba(26,26,24,.5), transparent);
}

/* ---------- Trust strip (industries – thin, post-hero) ---------- */
.trust-strip {
  background: var(--rtt-light-gray);
  padding: var(--s-6) 0;
  border-bottom: 1px solid #e8e8e8;
}
.trust-strip__eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--s-5);
}
.trust-strip__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
}
.trust-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.trust-item:hover img { transform: scale(1.06); }
.trust-item span {
  font-size: 10px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rtt-dark-gray);
  line-height: 1.3;
}
@media (max-width: 960px) {
  .trust-strip__row { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
}
@media (max-width: 480px) {
  .trust-strip__row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Industries grid: full-bleed photo cards with overlay label ---------- */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.industry {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--rtt-black);
  border: 1px solid #e8e8e8;
  padding: 0;
  display: block;
  isolation: isolate;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.industry::before {
  /* RTT signature: red top accent bar, partial by default, full on hover */
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 56px;
  background: var(--rtt-red);
  transition: width .3s var(--ease);
  z-index: 3;
}
.industry:hover {
  transform: translateY(-3px);
  border-color: #d0d0d0;
  box-shadow: 0 18px 36px -24px rgba(0,0,0,.22);
}
.industry:hover::before { width: 100%; }
.industry__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
  z-index: 1;
}
.industry:hover .industry__photo { transform: scale(1.04); }
.industry__overlay {
  /* Solid translucent rectangle badge inset from the bottom-left of the card */
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(26,26,24,0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}
.industry__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
  font-weight: var(--fw-med);
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 4px;
}
.industry__copy {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  margin: 0;
}

/* ---------- Process / how-we-work ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  counter-reset: stp;
}
.step {
  position: relative;
  padding-top: var(--s-7);
}
.step::before {
  counter-increment: stp;
  content: "0" counter(stp);
  position: absolute;
  top: 0; left: 0;
  font-size: 2.5rem;
  font-weight: var(--fw-thin);
  color: var(--rtt-red);
  line-height: 1;
}
.step h3 {
  font-size: 1.15rem;
  font-weight: var(--fw-med);
  margin-bottom: var(--s-2);
}
.step p { color: var(--rtt-dark-gray); margin: 0; font-size: 0.95rem; }

/* ---------- CTA / form ---------- */
.cta-section {
  background: var(--rtt-light-gray);
  /* Halved from var(--s-9) for the tighter section rhythm. */
  padding: var(--s-7) 0;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-9);
  align-items: start;
}
.cta-grid__copy h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: var(--fw-thin);
  margin-bottom: var(--s-4);
}
.cta-grid__copy h2 strong { font-weight: var(--fw-med); }
.cta-grid__copy p {
  font-size: 1.05rem;
  color: var(--rtt-dark-gray);
  margin-bottom: var(--s-5);
}
.cta-perks { margin-top: var(--s-5); }
.cta-perks li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--rtt-black);
  font-weight: var(--fw-reg);
}
.cta-perks li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 14px;
  background: var(--rtt-red);
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
}

/* ---------- Form ---------- */
.form {
  background: #fff;
  padding: var(--s-7);
  border: 1px solid #e6e6e6;
}
.form__title {
  font-size: 1.25rem;
  font-weight: var(--fw-med);
  margin-bottom: var(--s-2);
}
.form__sub {
  color: var(--rtt-dark-gray);
  font-size: 0.95rem;
  margin-bottom: var(--s-5);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rtt-dark-gray);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: var(--fw-reg);
  line-height: 1.4;
  background: #fff;
  border: 1px solid #d6d6d6;
  padding: 12px 14px;
  border-radius: 0;
  color: var(--rtt-black);
  height: 46px;             /* identical fixed height for input + select */
  box-sizing: border-box;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}
.field select {
  /* strip native OS chrome */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%231a1a18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.field select:invalid { color: var(--rtt-medium-gray); }   /* placeholder option */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rtt-red);
  box-shadow: 0 0 0 3px rgba(239,35,42,.12);
}
.field--checkbox {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 0.85rem; color: var(--rtt-dark-gray);
}
.field--checkbox input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--rtt-red); }
.form button[type="submit"] { width: 100%; justify-content: center; padding: 18px; }
.form__legal { font-size: 12px; color: var(--rtt-medium-gray); margin-top: var(--s-3); margin-bottom: 0; }

/* ---------- Form success message ---------- */
.form-success {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-top: 3px solid var(--rtt-red);
  padding: var(--s-7);
  text-align: left;
}
.form-success__head {
  font-size: 1.4rem;
  font-weight: var(--fw-med);
  color: var(--rtt-black);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.005em;
}
.form-success__p {
  color: var(--rtt-dark-gray);
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; }
.faq details {
  border-top: 1px solid #e0e0e0;
  padding: var(--s-4) 0;
}
.faq details:last-of-type { border-bottom: 1px solid #e0e0e0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: var(--fw-med);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--rtt-red);
  font-weight: var(--fw-thin);
  font-size: 1.6rem;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  padding-top: var(--s-3);
  color: var(--rtt-dark-gray);
  margin: 0;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--rtt-black);
  color: #d2d2d2;
  padding: var(--s-8) 0 var(--s-6);
  font-size: 0.9rem;
}
.footer__top {
  display: grid;
  /* All four columns are body-text columns now (no logo block).
     Brand and contact a touch wider to fit the 5-line description and
     the one-line legal entity name. */
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__brand-p {
  color: rgba(255,255,255,.7);
  text-wrap: pretty;
  margin: 0;
}
/* All four footer column headers share the // brand eyebrow treatment */
.footer h4 {
  position: relative;
  padding-left: 0;
}
.footer h4::before {
  content: "// ";
  color: var(--rtt-red);
  font-weight: var(--fw-bold);
  margin-right: 4px;
}
.footer__claim {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,.65);
}
.footer h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  font-weight: var(--fw-med);
  margin-bottom: var(--s-4);
}
/* Unified row rhythm across every footer column: paragraph lines AND list items
   share the same font-size AND line-height, so baseline-to-baseline distance
   is identical in all four columns. */
.footer__brand-p,
.footer ul li {
  font-size: 0.85rem;
  line-height: 1.85;
}
.footer ul li { margin-bottom: 0; }
.footer a { color: #d2d2d2; }
.footer a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: 0.8rem;
  color: rgba(255,255,255,.55);
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: #fff;
  padding: 10px 16px;
  border-top: 1px solid #e2e2e2;
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
}
.sticky-cta a { width: 100%; justify-content: center; }

/* ---------- Diagonal divider – brand motif ---------- */
.divider-wedge {
  position: relative;
  height: 80px;
  background: var(--rtt-light-gray);
  overflow: hidden;
}
.divider-wedge::before {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 50%; height: 100%;
  background: var(--rtt-white);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav__list { display: none; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    color: var(--rtt-black);
  }
  .nav__toggle svg { width: 22px; height: 22px; }
  .brand__claim { display: none; }

  /* Keep the language switch visible on mobile, sit it next to the hamburger */
  .lang-switch {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-right: var(--s-2);
  }

  .nav.is-open .nav__list,
  .nav.is-open .nav__cta {
    display: flex;
  }
  .nav.is-open .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    padding: var(--s-5);
    border-bottom: 1px solid #ececec;
    gap: var(--s-4);
  }
  .nav.is-open .nav__cta {
    position: absolute;
    top: calc(100% + 220px); left: 16px; right: 16px;
    justify-content: center;
  }

  .hero__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .problem { grid-template-columns: 1fr; gap: var(--s-5); }
  .products { grid-template-columns: 1fr 1fr; }
  .industries { grid-template-columns: repeat(3, 1fr); }
  .roi__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .process { grid-template-columns: 1fr 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .sticky-cta { display: block; }
  body { padding-bottom: 80px; }
}
@media (max-width: 600px) {
  /* 24px (not 16) keeps the logo and section content from clamping right
     against the screen edge on phones, matching the breathing room the
     cards' internal padding already provides. */
  .container { padding: 0 var(--s-5); }
  .section { padding: var(--s-8) 0; }
  .roi { padding: var(--s-8) 0; }
  .products { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--s-5); }
  .form__row { grid-template-columns: 1fr; }
  .hero { min-height: 78vh; }
  .hero__content { padding: var(--s-7) 0; }
  .form { padding: var(--s-5); }
}

/* ---------- Animation: fade-up on scroll ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
}

/* =========================================================
   MCube-specific components
   ========================================================= */

/* ---------- Detail hero (per-product section head + schematic) ---------- */
.detail-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  /* Top-align so the schematic sits next to the H2 instead of floating
     vertically centred when the copy column is much taller. */
  align-items: start;
  margin-bottom: var(--s-8);
}
.detail-hero__copy { max-width: 56ch; }
.detail-hero__copy .eyebrow { margin-bottom: var(--s-4); }
.detail-hero__copy h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: var(--fw-thin);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-4);
}
.detail-hero__copy h2 strong { font-weight: var(--fw-med); }
.detail-hero__copy p {
  font-size: 1.05rem;
  color: var(--rtt-dark-gray);
  line-height: 1.65;
  margin: 0;
}
.detail-hero__visual {
  /* No card chrome around the schematic — let it sit flat on the section
     background so it doesn't compete visually with the detail cards below.
     Top padding aligns the schematic with the H2 in the copy column
     (skipping past the eyebrow above it). */
  margin: 0;
  padding-top: calc(var(--s-4) + 1.2em);
  background: transparent;
  border: 0;
}
.detail-hero__visual svg.detail-schematic {
  /* Scale the schematic to 80% of the column width and centre it, so the
     diagram feels lighter against the copy column and doesn't dominate. */
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Force Inter on every <text> inside the schematic, and match the eyebrow
   typography from elsewhere on the page — Inter Medium (500), em-based
   letter-spacing. */
.detail-hero__visual svg.detail-schematic,
.detail-hero__visual svg.detail-schematic text {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.18em;
}
@media (max-width: 960px) {
  .detail-hero {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

/* ---------- Detail grid (per-product Ideal-pokud + Co detekuje) ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.detail-grid--single { grid-template-columns: 1fr; max-width: 760px; }

.detail-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: var(--s-6);
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.section--gray .detail-card { background: #fff; }
.section:not(.section--gray) .detail-card { background: var(--rtt-light-gray); border-color: #e8e8e8; }
.detail-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -24px rgba(0,0,0,.16);
}
.detail-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40px; height: 3px;
  background: var(--rtt-red);
}
.detail-card__tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  margin-bottom: var(--s-4);
}
.detail-card__tag::before { content: "// "; }
.detail-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}
.detail-card__list li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--rtt-dark-gray);
  font-size: 0.97rem;
  line-height: 1.55;
}
.detail-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 2px;
  background: var(--rtt-red);
}
.detail-card__list--features li {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-card__list--features li::before { display: none; }
.detail-card__list--features li strong {
  font-weight: var(--fw-med);
  color: var(--rtt-black);
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border-bottom: 1px solid var(--rtt-red);
  align-self: flex-start;
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.detail-card__list--features li span {
  color: var(--rtt-dark-gray);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- MCube-specific comparison table (matrix) ---------- */
.compare-table-wrap--standalone {
  margin-top: var(--s-5);
}
.compare-table--mcube {
  font-size: 0.92rem;
}
.compare-table--mcube th,
.compare-table--mcube td {
  white-space: normal;
  vertical-align: middle;
  padding: 14px 16px;
  line-height: 1.45;
}
.compare-table--mcube thead th {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  font-weight: var(--fw-med);
}
.compare-table--mcube thead th:first-child {
  background: #2a2a28;
  width: 12%;
}
.compare-table--mcube .cell-row-h {
  background: var(--rtt-light-gray);
  color: var(--rtt-black);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fw-med);
  width: 12%;
  white-space: nowrap;
}
.compare-table--mcube tbody tr:nth-child(even) .cell-row-h { background: #ececec; }
.compare-table--mcube tbody tr:hover td:not(.cell-row-h) { background: #fff5f5; }

/* ---------- Contact direct block ---------- */
.contact-direct {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid #d8d8d8;
}
.contact-direct h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  margin-bottom: var(--s-3);
}
.contact-direct h4::before {
  content: "// ";
  color: var(--rtt-red);
  font-weight: var(--fw-bold);
}
.contact-direct ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact-direct li {
  font-size: 0.95rem;
  color: var(--rtt-dark-gray);
  line-height: 1.5;
}
.contact-direct li strong {
  color: var(--rtt-black);
  font-weight: var(--fw-med);
}
.contact-direct a:hover { color: var(--rtt-red); }

/* ---------- Hero (MCube – combined hero + overview) ---------- */
.hero-mcube {
  position: relative;
  background: var(--rtt-black);
  color: #fff;
  overflow: hidden;
  /* Bottom padding only – the upper portion (.hero-mcube__top) carries
     its own min-height + vertical centering to mirror Remaclean's hero.
     Halved from var(--s-9) to var(--s-7) for the tighter section rhythm. */
  padding: 0 0 var(--s-7);
  isolation: isolate;
}
/* Faint conveyor backdrop, heavily darkened to match the printscreen.
   Sits behind the content via a positioned ::before, not on .hero-mcube
   itself, so the dark gradients on top can do the heavy lifting. */
.hero-mcube__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* angled dark wash + bottom red glow */
    linear-gradient(105deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 50%, rgba(0,0,0,.60) 100%),
    radial-gradient(ellipse at 20% 110%, rgba(239,35,42,.22), transparent 55%),
    url("assets/img/hero-conveyor.webp") center/cover no-repeat;
  background-blend-mode: normal;
}
.hero-mcube > .container { position: relative; z-index: 1; }

.hero-mcube__top {
  display: grid;
  /* Fixed-width cube column – copy column takes all remaining space so EN
     headlines like "Do you know the real condition of your belt?" don't
     wrap onto four lines. */
  grid-template-columns: 1fr 320px;
  gap: var(--s-7);
  align-items: center;
  /* No min-height – let the section be as tall as the content needs. The
     dark backdrop already gives the hero presence; forcing extra vertical
     space just creates empty bands above and below the headline. */
  padding: var(--s-9) 0;
}
.hero-mcube__copy {
  /* Indent the hero copy by the same amount as the cards' internal padding
     so the eyebrow / H1 / body all start at the same X as the cards' text
     content below. Without this, hero text sits at container-edge while
     card text sits at container-edge + card padding — visibly misaligned. */
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.hero-mcube__eyebrow {
  color: #fff;
  margin-bottom: var(--s-5);
}
.hero-mcube__eyebrow::before { color: var(--rtt-red); }
.hero-mcube__h1 {
  /* Match Remaclean's hero h1 sizing exactly */
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  font-weight: var(--fw-reg);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
  color: #fff;
  /* Balance line breaks so the longer EN headline doesn't drop "belt?"
     onto its own line. Modern browsers (Chrome 114+, Safari 17.5+, Firefox 121+) */
  text-wrap: balance;
}
.hero-mcube__h1 .accent {
  display: block;
  color: var(--rtt-red);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.hero-mcube__sub {
  color: rgba(255,255,255,.78);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0;
  font-weight: var(--fw-reg);
}

.hero-mcube__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcube-cube {
  width: 100%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.55));
}

/* ---------- MCube product cards (under the hero) ---------- */
.hero-mcube__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  position: relative;
  z-index: 1;
}
.mcube-card {
  /* More solid background – easier to read against the dark conveyor backdrop */
  background: rgba(28,28,26,.78);
  border: 1px solid rgba(255,255,255,.12);
  padding: var(--s-5) var(--s-5) var(--s-4);
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mcube-card:hover {
  border-color: rgba(239,35,42,.55);
  background: rgba(36,36,34,.85);
  transform: translateY(-3px);
}
.mcube-card__num {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.4);
  font-weight: var(--fw-med);
}
.mcube-card__icon {
  color: var(--rtt-red);
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-4);
}
.mcube-card__icon svg { width: 100%; height: 100%; display: block; }
.mcube-card__h {
  font-size: 1.4rem;
  font-weight: var(--fw-med);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.15;
}
.mcube-card__sub {
  /* The canonical MD uses this slot for the descriptive sub-heading
     (e.g. "AI inspekce povrchu dopravníkového pásu"). Style as a small
     red eyebrow rather than italic English subtitle. */
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rtt-red);
  font-weight: var(--fw-med);
  margin: 0 0 var(--s-4);
  line-height: 1.4;
  font-style: normal;
}
.mcube-card__body {
  color: rgba(255,255,255,.82);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 var(--s-4);
}
.mcube-card__capstone {
  /* Italic solution-side capstone – replaces the longer second MD paragraph
     in the overview tile. The full solution writeup lives in the dedicated
     product section below.
     margin-top: auto pushes the capstone (and the CTA below it) to the
     bottom of the flex column, so capstones across the three cards line up
     regardless of how much the body paragraph above wraps. */
  margin: auto 0 var(--s-4) 0;
  font-style: italic;
  color: rgba(255,255,255,.7);
  font-size: 0.93rem;
  line-height: 1.5;
  padding-left: var(--s-4);
  border-left: 2px solid var(--rtt-red);
}
.mcube-card__cta {
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-med);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  position: static;          /* anchor parent for stretched ::after */
  text-decoration: none;
}
/* Stretched-link pattern: the CTA's ::after covers the entire card,
   making the whole card a single clickable target without nesting <a>s. */
.mcube-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mcube-card:hover .mcube-card__cta { color: var(--rtt-red); }
.mcube-card__cta .arrow { color: var(--rtt-red); transition: transform .2s var(--ease); }
.mcube-card:hover .mcube-card__cta .arrow { transform: translateX(4px); }

/* ---------- MCube responsive ---------- */
/* Hero responsive — keep the cube next to the copy where there's room,
   stack vertically below 900px, then tighten typography on phones. */
@media (max-width: 1100px) {
  .hero-mcube__top {
    /* Slightly tighter cube column on narrow desktops/tablets */
    grid-template-columns: 1fr 220px;
    gap: var(--s-6);
  }
  .mcube-cube { max-width: 200px; }
}
@media (max-width: 900px) {
  /* Stack the cube under the copy. Center the cube and limit its width
     so it doesn't anchor to the left edge of the viewport. */
  .hero-mcube__top {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-8) 0;
    text-align: left;
  }
  .hero-mcube__visual {
    justify-content: center;
    margin-top: var(--s-3);
  }
  .mcube-cube { max-width: 200px; }
  .hero-mcube__h1 {
    /* Cap font size proportional to the now-narrower column. */
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .hero-mcube__sub { font-size: 0.98rem; }
}
@media (max-width: 960px) {
  .detail-grid { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .compare-table--mcube { font-size: 0.85rem; }
  .compare-table--mcube .cell-row-h { width: 28%; }
  .hero-mcube__cards { grid-template-columns: 1fr; }
  .hero-mcube { padding: 0 0 var(--s-8); }
}
@media (max-width: 600px) {
  .industries { grid-template-columns: 1fr; }
  .compare-table--mcube th,
  .compare-table--mcube td { padding: 10px 12px; }
  .hero-mcube__top {
    padding: var(--s-7) 0 var(--s-6);
    gap: var(--s-5);
  }
  /* Hero copy padding tracks the now-smaller card padding so text still
     aligns with card interior text on narrow screens. */
  .hero-mcube__copy {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }
  .hero-mcube__h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    letter-spacing: -0.015em;
  }
  .hero-mcube__sub { font-size: 0.95rem; line-height: 1.55; }
  .hero-mcube__eyebrow { font-size: 10px; letter-spacing: 0.14em; }
  .mcube-cube { max-width: 150px; }
  .mcube-card { padding: var(--s-4); }
  .mcube-card__icon { width: 36px; height: 36px; margin-bottom: var(--s-3); }
  .mcube-card__h { font-size: 1.25rem; }
}